/* ОБЩИЕ стили страниц подписки: /plus_tariffs, редактор /edit/plus и
   базовый слой для /plus (его собственное оформление — в plus-page.css,
   он подключается только там).

   Здесь живёт ровно то, чем пользуются НЕСКОЛЬКО страниц: токены темы,
   шапка, кнопки, карточки тарифов, модалка входа, тост, подвал. Всё, что
   нужно только лендингу (первый экран, полосы, слайдер до/после, карточки
   «что входит»), вынесено в plus-page.css — иначе этот файл рос бы
   страницей, которой он не принадлежит. */
:root{--bg:#F7F2E7;--ink:#2A241C;--muted:#8C8272;--line:#E4DCCB;--beam:#C98A2B;
  --beam-ink:#FFF8EA;--surface:#FFFFFF;--accent-soft:#FBF3E3}
[data-theme=dark]{--bg:#1B1814;--ink:#EFE8D9;--muted:#A79B87;--line:#3A332A;
  --beam:#E8B84B;--beam-ink:#2A241C;--surface:#262119;--accent-soft:#2E2820}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}

/* ---------- шапка: только логотип + ссылка назад, без поиска и меню
   каталога — они бы съели весь первый экран на телефоне ---------- */
.p-top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;max-width:720px;margin:0 auto}
.p-brand{display:flex;align-items:center;gap:8px;text-decoration:none;
  font-family:Alice,serif;font-size:18px;color:var(--ink)}
.p-brand img{width:26px;height:26px;border-radius:6px}
.p-top-back{color:var(--muted);text-decoration:none;font-size:14px;font-weight:700}

/* ---------- кнопки ---------- */
.btn-main{display:inline-flex;align-items:center;justify-content:center;
  background:var(--beam);color:var(--beam-ink);font-weight:800;font-size:16px;
  text-decoration:none;border:none;border-radius:12px;padding:13px 22px;
  min-height:48px;cursor:pointer;line-height:1.2}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink);font-weight:700;font-size:15px;
  text-decoration:none;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 20px;min-height:48px;cursor:pointer;line-height:1.2}

/* ---------- секции общего вида (страница тарифов) ---------- */
section.p-section{max-width:720px;margin:0 auto;padding:34px 20px}

/* ---------- тарифы ---------- */
.p-cards{display:flex;flex-direction:column;gap:16px}
@media(min-width:560px){.p-cards{flex-direction:row;align-items:stretch}}
.p-card{flex:1;background:var(--surface);border:1.5px solid var(--line);
  border-radius:20px;padding:26px 22px;text-align:center;position:relative;
  display:flex;flex-direction:column;
  box-shadow:0 10px 30px rgba(42,36,28,.07)}
/* Выгодный тариф заметно крупнее и теплее соседнего — глазу должно быть
   очевидно, какой из двух выбирают чаще. Увеличение только на широком
   экране: на телефоне карточки идут друг под другом, и масштаб там
   ничего не подчёркивает, зато ломает отступы. */
.p-card--best{border-color:var(--beam);border-width:2px;
  background:linear-gradient(180deg,var(--accent-soft),var(--surface));
  box-shadow:0 16px 44px rgba(201,138,43,.18)}
@media(min-width:560px){.p-card--best{transform:scale(1.04);z-index:1}}
.p-card-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#FFD98A,#C98A2B);color:#241B0C;font-size:12px;
  font-weight:800;padding:5px 14px;border-radius:20px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(201,138,43,.35)}
/* Тариф на 3 года — та же идея, что у "выгодного" года, но подчёркнуто
   ярче: обводка толще и светлее, свечение сильнее, бейдж отдельного,
   более тёплого оттенка золота — год не должен теряться на его фоне,
   но 3 года обязаны читаться как ещё более выгодный вариант. */
.p-card--best2{border-color:#E8B84B;border-width:2.5px;
  background:linear-gradient(180deg,var(--accent-soft),var(--surface));
  box-shadow:0 22px 56px rgba(201,138,43,.32)}
@media(min-width:560px){.p-card--best2{transform:scale(1.05);z-index:1}}
.p-card-badge--top{background:linear-gradient(180deg,#FFE9A8,#E0A030);
  box-shadow:0 8px 24px rgba(224,160,48,.5)}
.p-card-name{font-family:Alice,serif;font-size:18px;color:var(--muted);
  margin-bottom:6px}
.p-card-price{font-size:clamp(34px,6vw,42px);font-weight:800;line-height:1.1;
  margin-bottom:8px;display:flex;align-items:baseline;justify-content:center;
  gap:10px;flex-wrap:wrap}
/* Прежняя цена рядом с новой — 12 месяцев по 390 ₽ стоили бы 4680 ₽,
   ровно на те 780 ₽, что указаны в подписи под ценой. */
.p-card-old{font-size:19px;font-weight:600;color:var(--muted);
  text-decoration:line-through;text-decoration-thickness:2px}
.p-card-note{color:var(--muted);font-size:14px;line-height:1.5;
  margin-bottom:20px;min-height:42px}
.p-card .btn-main{width:100%;margin-top:auto;min-height:52px;font-size:16.5px;
  background:linear-gradient(180deg,#FFD98A,#C98A2B);color:#241B0C;
  box-shadow:0 8px 24px rgba(201,138,43,.28);
  transition:transform .25s ease, box-shadow .25s ease}
.p-card .btn-main:hover{transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(201,138,43,.4)}
@media(prefers-reduced-motion:reduce){
  .p-card .btn-main{transition:none}.p-card .btn-main:hover{transform:none}
}
.p-fine{color:var(--muted);font-size:12.5px;line-height:1.55;text-align:center;
  margin:20px auto 0;max-width:520px}
.p-fine a{color:var(--beam);font-weight:700}
#pTariffStatus{display:none;text-align:center;background:var(--accent-soft);
  border-radius:14px;padding:18px 20px;font-size:15px;margin-top:16px;
  border:1px solid var(--line)}
#pTariffStatus a{color:var(--beam);font-weight:800;text-decoration:none}

/* ---------- короткая шапка /plus_tariffs ---------- */
.p-t-hero{max-width:720px;margin:0 auto;padding:12px 20px 30px;text-align:center}
.p-t-hero h1{font-family:Alice,serif;font-weight:400;
  font-size:clamp(26px,6vw,38px);line-height:1.15;margin:0 0 12px}
.p-t-hero .p-sub{color:var(--muted);font-size:16px;line-height:1.55;
  margin:0 auto 22px;max-width:560px}
.p-t-points{list-style:none;margin:0 auto;padding:0;max-width:520px;
  display:flex;flex-direction:column;gap:10px;text-align:left}
.p-t-points li{font-size:15px;line-height:1.5;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:0 6px 20px rgba(42,36,28,.05)}
.p-more-link{display:block;text-align:center;color:var(--muted);
  font-size:14px;padding:24px 20px 34px}
.p-more-link a{color:var(--beam);font-weight:700;text-decoration:none}

/* ---------- подвал ---------- */
.p-footer{border-top:1px solid var(--line);padding:16px 20px 26px;
  display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;
  font-size:12.5px;color:var(--muted)}
.p-footer a{text-decoration:none;color:var(--muted)}

/* ---------- мини-модалка входа по email (для CTA без авторизации) ------- */
.p-modal{position:fixed;inset:0;background:rgba(10,8,5,.72);display:none;
  align-items:center;justify-content:center;padding:20px;z-index:50}
.p-modal.open{display:flex}
.p-modal .p-dialog{background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:24px 22px;max-width:340px;width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.35)}
.p-dialog h3{font-family:Alice,serif;font-weight:400;font-size:20px;
  margin:0 0 6px}
.p-dialog p{color:var(--muted);font-size:14px;margin:0 0 14px}
.p-dialog input{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--bg);color:var(--ink);font-size:16px;
  margin-bottom:12px}
.p-dialog .btn-main{width:100%}
.p-dialog .btn-ghost{width:100%;margin-top:8px}

/* ---------- тост об ошибке ---------- */
.p-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:#2A241C;color:#FFF8EA;padding:12px 18px;border-radius:10px;
  font-size:14px;max-width:90vw;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;z-index:60}
.p-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}