/* Shared site chrome and informational pricing. No checkout controls. */
/* Подвал: слева «кто мы», справа три смысловые группы. Разметка и причина
   такого деления — в footer() в deploy/build-site.py. */
.site-footer {
  width: 100%; max-width: 1200px; margin: 2.5rem auto 0; padding: 0 0 1.25rem;
  /* border-top: 0 — гасим общее правило footer{border-top} из pricing.css,
     support.css и drive-sync.css. Оно осталось от прежнего подвала-строки; при
     подвале-карточке это вторая граница подряд, и её видно как лишний отчерк. */
  border-top: 0; color: #475569; text-align: left;
  font: 13px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Точка отсчёта для container query выше. */
  container-type: inline-size;
}
/* Карточка, а не линейка сверху: подвал перестаёт быть хвостом страницы и
   становится отдельным блоком — так его и читают. */
.site-footer__card {
  display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: 1.25rem 2.5rem; padding: 1.6rem 1.8rem;
  border: 1px solid #e2e8f0; border-radius: 16px; background: #fff;
}
/* Раскладка по ширине САМОГО ПОДВАЛА, а не окна.
   Подвал получает ширину от контейнера страницы: на лендинге это 1200px, на
   /support/ и юридических — 760px. То есть при одном и том же окне подвал
   разной ширины, и media query тут промахивается по определению — отсюда
   container query. На узком контуре бренд занимает всю строку сверху (языкам
   нужна ширина: в колонке 240px семь названий рвались на три строки), а три
   группы ссылок встают в ряд под ним. */
@container (max-width: 900px) {
  .site-footer__card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@container (max-width: 560px) {
  .site-footer__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.site-footer__logo { display: inline-block; font-size: 17px; font-weight: 700; color: #0f172a; }
.site-footer p { margin: .45rem 0 0; color: inherit; font-size: 13px; }
.site-footer address { margin-top: .2rem; font-size: 12px; font-style: normal; }
.site-footer__groups { display: contents; }
.site-footer__group { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
/* Заголовок группы — метка, а не подзаголовок страницы: он должен читаться
   боковым зрением и не спорить с самими ссылками. */
.site-footer__group h2 {
  margin: 0 0 .1rem; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #0f172a;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a:focus-visible, .site-compare summary:focus-visible { outline: 2px solid #0284c7; outline-offset: 4px; border-radius: 3px; }
.site-pricing { width: 100%; margin: 3rem 0 1.5rem; text-align: left; }
.site-pricing > h2 { margin: 0 0 .7rem; color: #0f172a; font-size: clamp(26px,4vw,34px); text-align: center; }
.site-pricing__intro { text-align: center; color: #475569; font-size: 16px; }
.site-pricing__instruction { margin: 1.3rem 0; padding: 1rem 1.2rem; border: 1px solid #7dd3fc; border-radius: 12px; background: #f0f9ff; color: #0c4a6e; font-size: 14px; line-height: 1.6; }
.site-plans { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.site-plan { display: flex; flex-direction: column; padding: 20px 17px; border: 1px solid #cbd5e1; border-radius: 16px; background: #fff; color: #0f172a; }
.site-plan--featured { border: 2px solid #ea580c; padding: 19px 16px; }
.site-plan__head { min-height: 68px; }
.site-plan h3 { margin: 0 0 6px; font-size: 19px; color: inherit; }
.site-plan__badge { display: inline-block; padding: 2px 8px; border: 1px solid #ea580c; border-radius: 20px; color: #c2410c; font-size: 11px; font-weight: 600; }
.site-plan .site-plan__price { margin: 8px 0; color: inherit; font-size: 13px; white-space: nowrap; }
.site-plan__price strong { font-size: 36px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.site-plan .site-plan__billing { min-height: 58px; font-size: 12px; color: #475569; line-height: 1.5; margin: 0 0 14px; }
.site-plan .site-plan__note { margin: 0 0 10px; font-size: 12px; color: #475569; }
.site-plan ul { padding-left: 17px; margin: 0 0 20px; font-size: 13px; line-height: 1.5; }
.site-plan li { margin: 0 0 9px; color: inherit; }
.site-plan .site-plan__where { margin: auto 0 0; padding-top: 14px; border-top: 1px solid #e2e8f0; color: #475569; font-size: 12px; font-weight: 600; }
.site-compare { margin-top: 22px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; color: #0f172a; }
.site-compare summary { cursor: pointer; padding: 16px 18px; font-size: 15px; font-weight: 600; }
.site-compare__scroll { overflow-x: auto; padding: 0 18px 16px; }
.site-compare table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.site-compare td,.site-compare th { padding: 11px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.site-compare tbody th { font-weight: 400; width: 60%; }
/* Подсветка того, чем Pro отличается от Free. Цвет и форма ярлыка совпадают с
   src/shared/accountTheme.js — тем же источником, что красит бейдж тарифа в
   расширении. Правила ЗДЕСЬ, а не в concept.css: его грузит только лендинг, и
   страница /pricing/ оставалась без оформления вовсе. */
.compare-pro-badge {
  display: inline-block; padding: 2px 8px; border: 1px solid transparent;
  border-radius: 999px; background: rgba(13, 148, 136, .12); color: #0f766e;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1.4;
}
.compare-unavailable { color: #7b8796; }
/* Заливка полупрозрачная, а не подобранный оттенок: одна и та же годится и для
   светлой темы, и для тёмной. Тот же приём и по той же причине, что у ярлыка. */
.site-compare .compare-advantage { background: rgba(13, 148, 136, .12); }
.compare-advantage strong { font-weight: 700; }
.compare-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.site-pricing .site-pricing__terms { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: #475569; }
.site-contact { display: inline-block; padding: .7rem 1rem; background: #0284c7; color: #fff !important; border-radius: 8px; font-weight: 600; text-decoration: none; }
.site-contact:focus-visible { outline: 2px solid #0284c7; outline-offset: 3px; }
@media (max-width: 760px) { .site-plans { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) {
  .site-plans { grid-template-columns: minmax(0,1fr); }
  .site-plan__head, .site-plan .site-plan__billing { min-height: 0; }
  .site-footer__card { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem 1.25rem; }
  .site-footer__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}
@media (prefers-color-scheme: dark) {
  .site-footer { color: #cbd5e1; }
  .site-footer__card { background: #1e293b; border-color: #475569; }
  .site-footer__logo, .site-footer__group h2 { color: #f1f5f9; }
  .site-minifooter { background: rgba(15, 23, 42, .92); border-color: #475569; color: #cbd5e1; }
  .site-minifooter a { color: #f1f5f9; }
  .site-pricing > h2 { color: #f1f5f9; }
  .site-pricing__intro, .site-pricing .site-pricing__terms { color: #cbd5e1; }
  .site-pricing__instruction { background: #0c354b; color: #bae6fd; border-color: #0369a1; }
  .site-plan,.site-compare { background: #1e293b; color: #f1f5f9; border-color: #475569; }
  .site-plan--featured { border-color: #fb923c; }
  .site-plan__badge { color: #fdba74; border-color: #fb923c; }
  .site-plan .site-plan__billing,.site-plan .site-plan__note,.site-plan .site-plan__where { color: #cbd5e1; }
  .site-plan .site-plan__where,.site-compare td,.site-compare th { border-color: #475569; }
  /* Тёмная бирюза на тёмной панели сливается с ней — светлее, как в расширении. */
  .compare-pro-badge { color: #5eead4; }
  .compare-unavailable { color: #94a3b8; }
}
/* Переключатель языков занимает свою половину нижнего яруса, а не остаток
   левой колонки: семь названий в неё не влезали и рвались на две строки. */
/* Языки живут в брендовой колонке и переносятся по её ширине — ровно как в
   подвале pdf2md. В общей строке с адресом семь названий рвались пополам. */
.site-footer .lang-switch {
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: .25rem .9rem; margin-top: .9rem; font-size: 12px;
}
.site-footer .lang-switch a { color: inherit; opacity: .85; padding: 3px 0; }
.site-footer .lang-switch a:hover { opacity: 1; text-decoration: underline; }
.site-footer .lang-switch a[aria-current] { font-weight: 700; opacity: 1; }
.site-footer .lang-switch a[hidden] { display: none; }
@media (max-width: 520px) {
  /* В столбик всё выравнивается по левому краю — языкам тоже, иначе они одни
     остаются прижатыми вправо. */
  .site-footer .lang-switch { gap: .2rem .9rem; justify-content: flex-start; }
  .site-footer .lang-switch a { min-height: 32px; display: flex; align-items: center; }
}

/* Сокращённый подвал, прижатый к низу окна.
 *
 * ЗАЧЕМ. Полный подвал лежит в конце длинной страницы, и до поддержки надо
 * доскроллить всю её. Полоса держит на виду то, что может понадобиться в любой
 * момент, и убирается сама, когда доскроллили до настоящего подвала — иначе
 * две копии одних ссылок стояли бы друг над другом.
 *
 * Показывает её assets/footer.js; без скрипта атрибут hidden остаётся, и
 * страница просто живёт без полосы.
 */
.site-minifooter {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem max(1rem, calc((100vw - 1200px) / 2));
  border-top: 1px solid #e2e8f0; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  color: #475569; font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.site-minifooter[hidden] { display: none; }
.site-minifooter > a { font-weight: 700; color: #0f172a; text-decoration: none; }
.site-minifooter nav { display: flex; gap: 1.2rem; }
.site-minifooter a { color: inherit; text-decoration: none; }
.site-minifooter a:hover { text-decoration: underline; }
.site-minifooter a:focus-visible { outline: 2px solid #0284c7; outline-offset: 3px; border-radius: 3px; }
.site-minifooter p { margin: 0; font-size: 12px; }
@media (max-width: 600px) {
  /* Название и год — на телефоне это всё, что влезает, не тесня ссылки. */
  .site-minifooter p { display: none; }
  .site-minifooter { padding: .55rem 1rem; }
}

/* Полоса запуска на Product Hunt.
 *
 * Живёт в site.css, а не у лендинга: полоса общая по смыслу и может понадобиться
 * на любой странице, а concept.css грузит только лендинг (та же причина, по
 * которой сюда переехала таблица тарифов).
 *
 * В разметке полоса скрыта и раскрывается assets/ph.js, пока идёт день запуска.
 * Без скрипта её не видно — это и есть нужный исход: баннер, обещающий
 * вчерашний запуск, хуже отсутствия баннера. */
.ph-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  padding: .6rem 3rem .6rem 1rem;
  position: relative;
  background: linear-gradient(90deg, #ff6154, #ff8a3d);
  color: #fff;
  font-size: .95rem;
  line-height: 1.3;
  text-align: center;
}

.ph-strip p {
  margin: 0;
  font-weight: 600;
}

/* Бейдж отдаёт Product Hunt, размеры заданы им же; своей высоты не навязываем,
   иначе он поедет при смене их макета. */
.ph-strip img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ph-strip__close {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.ph-strip__close:hover,
.ph-strip__close:focus-visible {
  background: rgba(0, 0, 0, .18);
}

@media (max-width: 600px) {
  .ph-strip { padding: .55rem 2.6rem .55rem .8rem; font-size: .85rem; }
}