/* Публичный сайт продукта. Отдаётся nginx напрямую, без участия приложения:
   на корневом домене нет ни API, ни панели — только текст. */
/* Палитра, ширина и шрифт — те же, что у главной (бывшей презентации): до 14.09.2026 у главной и
   тарифов была своя, более тёмная зелень и 900 px, у презентаций — бирюза и 1040 px, и при переходе
   между страницами прыгали шапка, лого и кнопки (замечание владельца). */
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800&display=swap");
:root {
  --brand: #0b8a86; --brand-dark: #06605d; --brand-deep: #06605d; --brand-soft: #e3f4f2;
  --ink: #0d1b1a; --muted: #5f7370; --line: #dde7e5; --bg: #ffffff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.65 "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px 72px; }
/* .wide больше не нужен: ширина одна на весь сайт — страницы не должны прыгать при переходе. */
.wide { max-width: 1040px; }

header.top {
  border-bottom: 1px solid var(--line); margin-bottom: 36px;
  padding: 18px 0; position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); z-index: 5;
}
header.top .wrap { display: flex; align-items: center; gap: 14px; padding-bottom: 0; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--brand); text-decoration: none; font-size: 17px; }
.logo i { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 15px; }
/* Знак сервиса — тот же зуб, что в иконке приложения и на листовке: врач должен узнать на сайте
   то, что уже видел на бумаге и на планшете (09.09.2026). */
.logo i svg { width: 19px; height: 19px; display: block; }
/* Подпись под именем — на всех страницах, а не только на первом экране (просьба владельца 14.09.2026). */
.logo-t { display: flex; flex-direction: column; line-height: 1.1; }
.logo-t small { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 2px; white-space: nowrap; }
@media (max-width: 600px) { .logo-t small { font-size: 10px; } }
nav a { color: var(--muted); text-decoration: none; margin-left: 0; font-size: 14.5px; white-space: nowrap; }
nav a:hover { color: var(--brand); }

h1 { font-size: 30px; line-height: 1.25; margin: 0 0 16px; letter-spacing: -.02em; }
h2 { font-size: 20px; margin: 34px 0 10px; letter-spacing: -.01em; }
h3 { font-size: 16px; margin: 22px 0 6px; }
p, li { color: #24343c; }
.lead { font-size: 18px; color: var(--muted); margin-bottom: 28px; }
.muted { color: var(--muted); }
small { color: var(--muted); font-size: 13.5px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }
a { color: var(--brand); }

.card { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 14px 0; background: #fff; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 20px 0; }
.card h3 { margin-top: 0; }

.btn { display: inline-block; background: var(--brand); color: #fff; text-decoration: none;
  padding: 12px 22px; border-radius: 10px; font-weight: 600; margin-top: 8px; }
.btn:hover { background: var(--brand-dark); }
.note { background: var(--brand-soft); border: 1px solid #cfe6df; border-radius: 12px; padding: 14px 16px; margin: 18px 0; }

footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 24px 0 40px; color: var(--muted); font-size: 14px; }
footer .wrap { padding-bottom: 0; }
footer a { color: var(--muted); margin-right: 16px; }

@media (max-width: 600px) {
  h1 { font-size: 25px; }
  nav a { margin: 6px 14px 0 0; }
  header.top .wrap { gap: 8px; }
}

/* ─── Страница тарифов (/pricing.html) ─────────────────────────────────────
   Классы используются только там; остальные страницы не затрагиваются. */
/* Открытая страница выделена в меню: набор ссылок одинаков везде, и без отметки человек не
   понимает, где он сейчас. Подчёркивание, а не только цвет, — цвет один и тот же у ссылок. */
/* Активный пункт: цвет, насыщенность и подчёркивание. Рамка снизу меняла высоту строки, и
   меню дёргалось по вертикали при переходе между страницами. */
nav a.here { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Переключатель срока оплаты */
.periods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.per {
  font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 15px; white-space: nowrap;
}
.per:hover { border-color: var(--brand); color: var(--brand); }
.per span { color: var(--brand); font-weight: 600; }
.per.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.per.is-on span { color: #cfe6df; }

/* Карточки тарифов */
/* stretch (по умолчанию) — карточки равной высоты, кнопки на одной линии внизу */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 22px; }
/* На узком экране ноутбука четыре колонки сплющивают карточки — уходим в две. */
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(2, 1fr); } }
.plan {
  position: relative; border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 20px; background: #fff; display: flex; flex-direction: column;
}
.plan.pick { border-color: var(--brand); box-shadow: 0 8px 28px rgba(47,125,114,.13); }
.plan .flag {
  position: absolute; top: -11px; left: 20px; background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 999px;
}
.plan h3 { margin: 0 0 4px; font-size: 17px; }
.plan .who { color: var(--muted); font-size: 14px; margin: 0 0 16px; min-height: 46px; }
.plan .price { font-size: 16px; color: var(--muted); line-height: 1.1; }
.plan .price b { font-size: 32px; color: var(--ink); letter-spacing: -.02em; }
.plan .price span { font-size: 15px; }
.plan .perday { color: var(--muted); font-size: 14px; margin-top: 6px; }
.plan .total {
  margin-top: 12px; padding: 9px 12px; border-radius: 10px;
  background: var(--brand-soft); color: #2c4b46; font-size: 14px; min-height: 40px;
}
.plan .total .save { display: block; color: var(--brand); font-size: 13px; }
.feat { list-style: none; padding: 0; margin: 16px 0 20px; flex: 1; }
.feat li { position: relative; padding-left: 22px; font-size: 14.5px; margin-bottom: 8px; }
.feat li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
/* прозрачная рамка — чтобы обычная и ghost-кнопка были одной высоты и вставали в один ряд */
.plan .btn { margin-top: auto; text-align: center; border: 1px solid transparent; }
.btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.btn.ghost:hover { background: var(--brand-soft); }

/* Таблица сравнения */
.tablewrap { overflow-x: auto; margin: 16px 0 6px; }
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; }
.cmp th, .cmp td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.cmp th:first-child, .cmp td:first-child { text-align: left; width: 40%; color: #24343c; }
.cmp thead th { font-size: 13.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.cmp thead th.pick-col { color: var(--brand); }
.cmp td.pick-col { background: var(--brand-soft); }
.cmp td.y { color: var(--brand); font-weight: 700; }
.cmp td.n { color: #b6c2c9; }

@media (max-width: 820px) {
  .plans { grid-template-columns: 1fr; gap: 20px; }
  .plan .who { min-height: 0; }
  .plan .total { min-height: 0; }
}
@media (max-width: 420px) {
  .per { font-size: 13px; padding: 8px 12px; }
  .cmp { font-size: 13px; }
  .cmp th, .cmp td { padding: 8px 4px; }
  /* Названия тарифов — не подпись, а то, что ищут глазами: ниже 13 px читается тяжело.
     Помещаются за счёт переноса (nowrap снят) — «Практика Про» встаёт в две строки. */
  .cmp thead th { font-size: 13px; white-space: normal; }
}

/* Пояснение внутри строки таблицы тарифов: название сущности плюс полсловa о том, что это.
   Отдельной колонки такие уточнения не стоят, а без них «свободные окна» ничего не говорят. */
.cmp .hint { color: #64748b; font-weight: 400; }
@media (max-width: 640px) { .cmp .hint { display: none; } }

/* ПАЛЬЦУ НУЖНА ПЛОЩАДЬ. Ссылки шапки и подвала были высотой 17–19 px: мышью попадёшь, пальцем
   нет, а лендинг открывают с телефона. Вертикальный отступ добавляет площадь касания, не трогая
   ни размер шрифта, ни рисунок строки.

   Ряд собран флексом с одинаковыми промежутками: на одних отступах строки, переехавшие на вторую
   линию, расходились вдвое дальше первой — шапка выглядела рыхлой ровно там, где места и так
   мало. */
/* Ряд ссылок: одинаковые промежутки и перенос по одной, а не всем блоком.
   min-width: 0 обязателен — без него nav не сжимается ниже своей «естественной» ширины и на
   пару пикселей не влезает рядом с логотипом, после чего уезжает под него целиком.
   Промежуток 14px, а не 18: с шестью пунктами меню разница как раз решает, влезет ли строка. */
nav, footer .wrap { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 0; min-width: 0; }
nav { justify-content: flex-end; }
nav a, footer a { display: inline-block; padding: 10px 0; line-height: 1.25; margin: 0; }
footer .wrap { column-gap: 16px; }
/* Строка «© dentcrm» — своей строкой во всю ширину, а не в общем ряду ссылок. */
footer .wrap > div { flex-basis: 100%; }
@media (max-width: 600px) {
  nav a { margin: 0; }
}

/* ─── Форма заявки (/start.html и /i/<код>) ───────────────────────────────── */
.fld { display: block; margin: 0 0 14px; }
/* Авторский display перебивает встроенное скрытие: без этой строки поле с атрибутом hidden
   остаётся на экране. Поймано на поле почты — оно показывалось при выбранном Telegram. */
.fld[hidden] { display: none; }
.fld > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #24343c; }
.fld > span small { font-weight: 400; color: var(--muted); }
.fld input, .fld textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: inherit;
}
/* 16px у полей — не про красоту: на iOS шрифт мельче заставляет Safari увеличивать страницу
   при фокусе, и человек дозаполняет форму в «зумленной» вёрстке. */
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.fld textarea { resize: vertical; min-height: 76px; }
/* Ловушка для ботов: невидима глазу, но существует для тех, кто заполняет формы программно.
   Не display:none — часть сборщиков такие поля пропускает. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err { min-height: 20px; margin: 2px 0 10px; color: #b42318; font-size: 14px; }
.fine { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
button.btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
button.btn:disabled { opacity: .6; cursor: default; }

/* Кнопка «Начать» в шапке: действие среди ссылок должно выглядеть действием, но не кричать —
   на странице тарифов рядом с ним есть большая кнопка, и две одинаковые спорили бы друг с другом. */
nav a.start {
  background: var(--brand); color: #fff; border-radius: 9px; padding: 8px 14px;
  font-weight: 600; margin-left: 4px;
}
nav a.start:hover { background: var(--brand-dark); color: #fff; }

/* Выбор способа подтверждения: две крупные карточки-варианта, попадаемые пальцем. */
.choice { border: 0; padding: 0; margin: 0 0 14px; }
.choice legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #24343c; }
.choice .opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff;
}
.choice .opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
/* Радио слева, текст колонкой справа. Без этого b и i вставали в строку и склеивались
   («В TelegramОткроется бот»), а курсив от <i> делал описание нечитаемым. */
.choice .opt > input { flex: 0 0 auto; margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--brand); }
.choice .opt > span { display: block; flex: 1 1 auto; min-width: 0; }
.choice .opt b { display: block; font-weight: 600; margin-bottom: 2px; }
.choice .opt i { display: block; font-style: normal; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* ─── Меню: широкий экран и телефон ──────────────────────────────────────────
   На широком все пункты стоят строкой. На телефоне шесть пунктов занимали две
   строки из трёх — остаётся главное («Тарифы») и выпадающее «О сервисе». */
nav .wide-only { display: contents; }
nav .narrow-only { display: none; }
nav > span { display: contents; }

.more { position: relative; }
.more summary {
  list-style: none; cursor: pointer; color: var(--muted); font-size: 14.5px;
  padding: 10px 0; white-space: nowrap;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: " ▾"; font-size: 11px; }
.more[open] summary { color: var(--brand); }
.more-menu {
  position: absolute; right: 0; top: 100%; z-index: 20; min-width: 210px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 40, 35, .12);
}
.more-menu a { padding: 10px 10px; border-radius: 8px; }
.more-menu a:hover { background: var(--brand-soft); }

@media (max-width: 700px) {
  nav .wide-only { display: none; }
  nav .narrow-only { display: block; }
}

/* На телефоне шапка складывается в два ряда (логотип с подписью и меню) и, закреплённая, отнимала
   около 120 px экрана при каждой прокрутке. Подпись владелец просил оставить, поэтому на узком
   экране шапку просто не закрепляем (ревью к выставке 23.09.2026). */
@media (max-width: 600px) {
  header.top { position: static; padding: 10px 0; margin-bottom: 20px; }
}