/*
Theme Name: Potato VPN Ru
Theme URI: https://potatovpn.info/
Author: Potato VPN Ru
Description: Тема сайта Potato VPN Ru — русскоязычный сайт о подписке Potato VPN: тарифы, страны, установка на пяти платформах.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: potato-info
*/

/* ============================================================
   Язык дизайна «стена устройств».

   С офсайта potatovpn.com сняты КОДОМ из бандлов index.CyE58Htg.css
   и onRenderClient.BxYQvWWn.css (62 630 байт) и сохранены по прямому
   требованию владельца:
     — контейнер 1200px (6 вхождений, доминанта бандла);
     — кнопка-пилюля радиусом 27px;
     — блок радиусом 8px с тенью 0 2px 4px rgba(0,0,0,.1) (5 вхождений);
     — градиент #8e2de2 → #4a00e0;
     — лестница брейкпоинтов 1439/1299/1200/1023/830/767;
     — структура подвала.

   Расхождение с сеткой вынесено на четыре оставшиеся оси:
     1. Типографика — сериф EB Garamond ведёт всю иерархию и числа.
        В VPN-кластере сетки серифа-лидера нет ни у одного сайта.
     2. Первый экран — стена из пяти экранов-устройств (.rig).
     3. Ховер — меняется ТОЛЬКО радиус: 8px → 27px, блок не двигается.
     4. Числа — старостильные минускульные цифры серифом (.tally).
        В таблицах принудительно возвращаются lining + tabular,
        иначе цены не сходятся по колонке.
   ============================================================ */

:root {
	--shell: 1200px;
	--pad: 24px;

	--bg: #ffffff;
	--surface: #fafafa;
	--surface-2: #f3f3f3;
	--line: #dbdfe7;
	--line-soft: #ededed;
	--ink: #333333;
	--muted: #666666;
	--faint: #b3b3b3;

	--accent: #712ce2;
	--accent-deep: #4a00e0;
	--accent-lit: #8e2de2;
	--accent-pale: #a066ff;
	--grad: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
	--slab: #080114;
	--ok: #e6fdef;

	--r: 8px;
	--r-pill: 27px;
	--sh: 0 2px 4px rgba(0, 0, 0, .1);
	--sh-up: 0 2px 20px rgba(17, 2, 40, .08);

	--f-display: "EB Garamond", Georgia, "Times New Roman", serif;
	--f-text: "Tuffy", "Segoe UI", Arial, sans-serif;
	--f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--t: .2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: 17px;
	line-height: 1.62;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--accent-deep); text-underline-offset: 2px; }
a:hover { color: var(--accent-lit); }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -.008em;
	margin: 0 0 .5em;
	color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
p  { margin: 0 0 1.05em; }

.lead {
	font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem);
	color: var(--muted);
	max-width: 62ch;
}

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.strip { padding: 72px 0; }
.strip--tint { background: var(--surface); }
.strip--tight { padding: 48px 0; }
.strip--slab { background: var(--slab); color: #fff; }
.strip--slab h2, .strip--slab h3 { color: #fff; }
.strip--slab .lead { color: rgba(255, 255, 255, .72); }

.skip {
	position: absolute; left: -9999px; top: 0;
	background: #fff; color: var(--ink); padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

.vh {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Кнопка: геометрия офсайта ───────────────────────────── */
.pill {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; min-height: 44px; padding: 0 26px;
	border: 0; border-radius: var(--r-pill);
	font-family: var(--f-text); font-size: 16px; font-weight: 700;
	text-decoration: none; cursor: pointer;
	transition: background-color .3s ease, opacity .2s ease;
}
.pill--go { background: var(--grad); color: #fff; box-shadow: var(--sh); }
.pill--go:hover { color: #fff; opacity: .92; }
.pill--line {
	background: transparent; color: var(--accent-deep);
	box-shadow: inset 0 0 0 1px var(--line);
}
.pill--line:hover { box-shadow: inset 0 0 0 1px var(--accent-pale); color: var(--accent-deep); }
.pill--xs { min-height: 34px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.pill--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* Строка-уточнение под кнопкой. Говорит, что произойдёт, без обещаний. */
.cta-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* ── Шапка ───────────────────────────────────────────────── */
.top {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line-soft);
}
.top__in { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark__ic { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: block; flex: none; }
.mark__tx { font-family: var(--f-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; }

.nav { display: flex; gap: 20px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.nav a:hover, .nav .on { color: var(--accent-deep); }

.top .pill--go { margin-left: 14px; }

.jump {
	display: none; width: 42px; height: 42px; margin-left: auto;
	border: 1px solid var(--line); border-radius: var(--r);
	background: #fff; cursor: pointer;
}
.jump span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 3px auto; }

.drawer { display: none; border-top: 1px solid var(--line-soft); background: #fff; }
.drawer.is-open { display: block; }
.drawer a { display: block; padding: 12px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-soft); }

/* ── Первый экран: стена устройств ───────────────────────── */
.stage { padding: 64px 0 56px; }
.stage__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }

/* Пять рамок разного размера. Не одна панель со строками, а именно
   независимые экраны — это несущий факт бренда: 5 устройств. */
.rig {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 12px;
}
.rig__scr {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
	padding: 14px;
	min-height: 96px;
	overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
}
.rig__scr:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.rig__scr:nth-child(2) { grid-column: span 4; }
.rig__scr:nth-child(3) { grid-column: span 2; }
.rig__scr:nth-child(4) { grid-column: span 2; }
.rig__scr:nth-child(5) { grid-column: span 6; min-height: 74px; }

.rig__os { font-size: 13px; color: var(--muted); }
.rig__geo { font-family: var(--f-display); font-size: 19px; font-weight: 600; }
.rig__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--accent-lit); display: inline-block; margin-right: 7px;
}
/* Волна подсветки слева направо — единственная фирменная анимация. */
.rig__scr::after {
	content: ""; position: absolute; inset: 0;
	background: var(--grad); opacity: 0; transition: opacity .5s ease;
	pointer-events: none; mix-blend-mode: multiply;
}
.js .rig--live .rig__scr::after { animation: rigwave 6.5s ease-in-out infinite; }
.rig--live .rig__scr:nth-child(2)::after { animation-delay: .5s; }
.rig--live .rig__scr:nth-child(3)::after { animation-delay: 1s; }
.rig--live .rig__scr:nth-child(4)::after { animation-delay: 1.5s; }
.rig--live .rig__scr:nth-child(5)::after { animation-delay: 2s; }
@keyframes rigwave { 0%, 70%, 100% { opacity: 0; } 12%, 22% { opacity: .07; } }

/* ── Плита ───────────────────────────────────────────────── */
.tile {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--sh);
	padding: 24px;
	/* Ось расхождения: ховер меняет ТОЛЬКО радиус. */
	transition: border-radius .28s ease;
}
.tile:hover { border-radius: var(--r-pill); }
.tile > :last-child { margin-bottom: 0; }
/* Иконки приходят из локального спрайта: контурные по умолчанию. */
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }
.tile__ic { width: 26px; height: 26px; color: var(--accent); margin-bottom: 10px; }
.tile__ic .ic { width: 26px; height: 26px; }
.tile__ph {
	display: block; height: 180px; border-radius: var(--r);
	background: var(--surface-2);
}

.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 768px) { .rows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.rows--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rows--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

/* ── Числа: старостильные цифры серифом ──────────────────── */
.tally { display: inline-flex; flex-direction: column; line-height: 1; }
.tally__v {
	font-family: var(--f-display);
	font-variant-numeric: oldstyle-nums;
	font-feature-settings: "onum" 1;
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
	font-weight: 600;
	letter-spacing: -.015em;
}
.tally__unit {
	margin-top: 8px;
	font-family: var(--f-text);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}
.facts { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 30px; }

/* ── Тарифы ──────────────────────────────────────────────── */
.rates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 768px) { .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rates { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rate { display: flex; flex-direction: column; }
.rate__term { font-size: 14px; color: var(--muted); }
.rate__sum {
	font-family: var(--f-display);
	font-size: 2.05rem; font-weight: 700;
	/* В ценах — прописные и табличные: иначе колонка не сходится. */
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	margin: 6px 0 2px;
}
.rate__per { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.rate .pill { margin-top: auto; }
.rate--pick { border-color: var(--accent-pale); box-shadow: var(--sh-up); }

/* ── Таблицы ─────────────────────────────────────────────── */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-family: var(--f-text); font-weight: 700; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
td { font-variant-numeric: lining-nums tabular-nums; }

@media (max-width: 767px) {
	.tw table, .tw thead, .tw tbody, .tw tr, .tw th, .tw td { display: block; }
	.tw thead { display: none; }
	.tw tr { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; padding: 6px 12px; }
	.tw td { border: 0; padding: 8px 0; }
	.tw td::before {
		content: attr(data-label);
		display: block; font-size: 12px; letter-spacing: .05em;
		text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
	}
}

/* ── Звёзды ──────────────────────────────────────────────── */
.stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
/* Звёздам нужна именно заливка: без неё пустая и полная звезда одинаковы. */
.stars .ic { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.stars__bg { color: var(--line); display: block; }
.stars__fg { color: #f0a500; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; display: block; }
.stars__fg svg { display: inline-block; }

/* ── Отзывы и критерии ───────────────────────────────────── */
.note { display: flex; flex-direction: column; gap: 10px; }
.note__by { font-family: var(--f-display); font-weight: 600; font-size: 17px; }
.note__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--faint); }

.crit { display: grid; gap: 14px; }
.crit__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.crit__bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.crit__bar i { display: block; height: 100%; background: var(--grad); }
.crit__val { font-family: var(--f-display); font-variant-numeric: lining-nums tabular-nums; font-weight: 600; }

/* ── Аккордеон ───────────────────────────────────────────── */
.ask { border-top: 1px solid var(--line-soft); }
.ask__q {
	width: 100%; background: none; border: 0; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 18px 0; text-align: left;
	font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; color: var(--ink);
}
.ask__q::after { content: "+"; font-size: 1.3rem; color: var(--accent); flex: none; }
.ask__q[aria-expanded="true"]::after { content: "−"; }
.ask__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
.ask__a > div { overflow: hidden; }
.ask__q[aria-expanded="true"] + .ask__a { grid-template-rows: 1fr; }
.ask__a p { padding-bottom: 16px; margin: 0; color: var(--muted); }

/* ── Флаги и списки ──────────────────────────────────────── */
.flag { border-radius: 2px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.geo { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.geo li {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	padding: 7px 14px; font-size: 15px;
}

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.steps li::before {
	content: counter(s);
	font-family: var(--f-display); font-weight: 600;
	width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--surface-2); color: var(--accent-deep);
}

.rel { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rel a {
	display: inline-block; padding: 8px 15px;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	text-decoration: none; font-size: 15px; color: var(--ink);
	transition: border-color var(--t);
}
.rel a:hover { border-color: var(--accent-pale); }

.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--faint); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }

/* ── Подвал: структура офсайта ───────────────────────────── */
.foot { background: var(--surface); border-top: 1px solid var(--line); padding: 52px 0 26px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 830px) { .foot__grid { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); } }
.foot h3 { font-size: 15px; font-family: var(--f-text); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.foot a { color: var(--ink); text-decoration: none; font-size: 15px; }
.foot a:hover { color: var(--accent-deep); }
.foot__note {
	margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
	font-size: 13px; color: var(--faint);
}

/* ── Всплывающая анимация ────────────────────────────────────
   Требование владельца. Скрытое состояние вешается ТОЛЬКО на .js,
   который проставляет инлайновый скрипт в <head> до отрисовки, —
   иначе при сбое скрипта первый экран остаётся пустым (грабля FLUX Ru).
   Заголовок приходит с раскрытым просветом и стягивается к нулю,
   блок всплывает на 18px. Без блюра и без масштаба.             */
.js .rise { opacity: 0; transform: translateY(18px); }
.js .rise.in {
	opacity: 1; transform: none;
	transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.js .rise:nth-child(2) { transition-delay: .06s; }
.js .rise:nth-child(3) { transition-delay: .12s; }
.js .rise:nth-child(4) { transition-delay: .18s; }

.js .spread { opacity: 0; letter-spacing: .06em; }
.js .spread.in {
	opacity: 1; letter-spacing: -.008em;
	transition: opacity .5s ease, letter-spacing .7s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .rise, .js .spread { opacity: 1; transform: none; letter-spacing: normal; }
}

/* ── Лестница брейкпоинтов офсайта ───────────────────────── */
@media (max-width: 1299px) { .strip { padding: 62px 0; } }

@media (max-width: 1023px) {
	:root { --pad: 20px; }
	.stage { padding: 48px 0 40px; }
	.rig__scr:nth-child(1) { grid-column: span 3; grid-row: auto; }
	.rig__scr:nth-child(2) { grid-column: span 3; }
	.rig__scr:nth-child(3) { grid-column: span 3; }
	.rig__scr:nth-child(4) { grid-column: span 3; }
	.rig__scr:nth-child(5) { grid-column: span 6; }
}

@media (max-width: 830px) {
	.nav { display: none; }
	.jump { display: block; }
	/* Реф-кнопка остаётся видимой рядом с бургером, не уезжает в меню. */
	.top .pill--go { margin-left: 0; order: 2; }
	.jump { order: 3; margin-left: 12px; }
	.nav { order: 4; }
}

@media (max-width: 767px) {
	:root { --pad: 16px; }
	body { font-size: 16px; }
	.strip { padding: 46px 0; }
	.facts { gap: 22px; }
	.rig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rig__scr:nth-child(n) { grid-column: span 1; }
	.rig__scr:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 430px) {
	/* На самых узких прячем словесную часть знака, чтобы кнопка влезла. */
	.mark__tx { display: none; }
	.pill--go { padding: 0 18px; font-size: 15px; }
}