/*
Theme Name: Claude Ru
Theme URI: https://claude-ai.help/
Author: Claude Ru
Description: Брендовая тема сайта Claude Ru — нейросеть Claude от Anthropic: модели, тарифы, Claude Code, доступ и оплата из России. Домен claude-ai.help.
Version: 1.1.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: claude-help
*/

/* ============================================================
   1. Токены. Палитра снята с CSS-бандла claude.com
      (--swatch--* → сырые краски, --_theme---* → роли).
   ============================================================ */
:root {
	/* тёплая шкала офсайта */
	--paper:        #faf9f5;   /* gray-050  — полотно */
	--paper-2:      #f5f4ed;   /* gray-100  — поверхность */
	--paper-3:      #f0eee6;   /* gray-150  — вложенная поверхность */
	--edge-soft:    #e8e6dc;   /* gray-200  — мягкая линия */
	--edge:         #d1cfc5;   /* gray-300  — обычная линия */
	--edge-hard:    #b0aea5;   /* gray-400  — контрастная линия */
	--dim:          #87867f;   /* gray-500 */
	--quiet:        #5e5d59;   /* gray-600  — приглушённый текст */
	--body:         #3d3d3a;   /* gray-700  — наборный текст */
	--ink-2:        #30302e;   /* gray-750 */
	--slate:        #262624;   /* gray-800  — тёмная поверхность */
	--ink:          #141413;   /* gray-950  — заголовки, тёмная кнопка */

	/* глина: две разные краски, не путать */
	--clay:         #d97757;   /* текст, графика, линии */
	--clay-press:   #c96442;   /* заливка кнопок и ховер */
	--clay-mist:    #f6e7df;   /* производная подложка */

	/* природные свотчи офсайта — метки веток mindmap */
	--oat:          #e3dacc;
	--peach:        #ebc9b7;
	--cactus:       #bcd1ca;
	--mineral:      #629987;
	--sky:          #6a9bcc;
	--olive:        #788c5d;
	--heather:      #cbcadb;
	--fig:          #c46686;

	--star:         #d98c2b;   /* заливка звёзд рейтинга */
	--good:         #629987;
	--flag:         #b53333;

	/* геометрия офсайта */
	--shell:        90rem;     /* 1440px — максимальная ширина контента */
	--prose:        60rem;     /* 960px  — текстовая колонка */
	--gutter:       clamp(1.25rem, 3.6vw, 4rem);
	--r-xs:         4px;
	--r-s:          8px;
	--r-m:          12px;
	--r-l:          16px;
	--r-xl:         32px;
	--hair:         1px;
	--bar:          68px;

	/* шкала кегля офсайта: clamp между вьюпортом 20rem и 90rem */
	--t-display: clamp(2.625rem, 1.9107rem + 3.5714vw, 4.5rem);
	--t-h1:      clamp(2.125rem, 1.6964rem + 2.1429vw, 3.25rem);
	--t-h2:      clamp(1.875rem, 1.5417rem + 1.6667vw, 2.75rem);
	--t-h3:      clamp(1.75rem, 1.5595rem + 0.9524vw, 2.25rem);
	--t-h4:      clamp(1.4375rem, 1.2232rem + 1.0714vw, 2rem);
	--t-h5:      clamp(1.25rem, 1.1310rem + 0.5952vw, 1.5625rem);
	--t-h6:      clamp(1rem, 0.9286rem + 0.3571vw, 1.1875rem);
	--t-lead:    clamp(1.1875rem, 1.1637rem + 0.1190vw, 1.25rem);
	--t-body:    1.0625rem;
	--t-small:   0.9375rem;
	--t-cap:     0.75rem;

	--sway: cubic-bezier(.215, .61, .355, 1);
}

/* ============================================================
   2. База
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); }

body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font-family: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	font-size: var(--t-body);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: Piazzolla, Georgia, "Times New Roman", serif;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.14;
	letter-spacing: -.015em;
	text-wrap: pretty;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h5 { font-size: var(--t-h5); }
h6 { font-size: var(--t-h6); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--edge); text-underline-offset: 3px; transition: color .15s ease-out, text-decoration-color .15s ease-out; }
a:hover { color: var(--clay-press); text-decoration-color: currentColor; }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--ink-2); }

hr { border: 0; border-top: var(--hair) solid var(--edge-soft); margin: 2.5rem 0; }

::selection { background: var(--clay); color: var(--paper); }

.hidden-note {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }

/* ============================================================
   3. Оболочки. Две вложенные ширины офсайта: 1440 и 960.
   ============================================================ */
.shell {
	width: calc(100% - var(--gutter) * 2);
	max-width: var(--shell);
	margin-inline: auto;
}
.shell--prose { max-width: var(--prose); }

/* ============================================================
   4. Ветка — несущий приём макета.
      Секции не чередуются полосами: они нанизаны на непрерывную
      нить, которая идёт слева и ветвится к узлам.
   ============================================================ */
.branch {
	position: relative;
	padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem);
}
.branch::before {
	content: "";
	position: absolute;
	left: calc(var(--gutter) / 2);
	top: 0;
	bottom: 0;
	width: var(--hair);
	background: linear-gradient(180deg, transparent, var(--edge-soft) 8%, var(--edge-soft) 92%, transparent);
	pointer-events: none;
}
.branch--dark { background: var(--ink); color: #cfcdc4; }
.branch--dark h2, .branch--dark h3, .branch--dark h4 { color: var(--paper); }
.branch--dark .branch__note { color: #96948c; }
.branch--dark::before { background: linear-gradient(180deg, transparent, #35342f 8%, #35342f 92%, transparent); }
.branch--warm { background: var(--paper-3); }
.branch--stack { padding-block: clamp(1.75rem, 1rem + 3vw, 3rem); }

.branch__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.branch__head > div { max-width: 46rem; min-width: 0; }
.branch__title { margin-bottom: .35em; }
.branch__note { margin: 0; color: var(--quiet); font-size: var(--t-lead); max-width: 44rem; }

/* узловая точка на нити перед заголовком секции */
.branch__head::before {
	content: "";
	position: absolute;
	left: calc(var(--gutter) / 2 - 3px);
	width: 7px; height: 7px;
	margin-top: .55em;
	border-radius: 50%;
	background: var(--clay);
}

/* ============================================================
   5. Узел — карточка. Без тени, рамка волосяная,
      на ховере рамка удваивается (приём кнопок офсайта).
   ============================================================ */
.node {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	min-width: 0;
	padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
	background: var(--paper-2);
	border-radius: var(--r-m);
	box-shadow: 0 0 0 var(--hair) var(--edge-soft);
	transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}
.node:hover { box-shadow: 0 0 0 2px var(--edge); background: #fff; }
.node--plain { background: transparent; box-shadow: none; padding-inline: 0; }
.node--plain:hover { background: transparent; box-shadow: none; }
.node--lit { background: var(--clay-mist); box-shadow: 0 0 0 var(--hair) #ecd5c9; }
.node--lit:hover { box-shadow: 0 0 0 2px #e2bfae; background: var(--clay-mist); }
.node--dark { background: var(--slate); box-shadow: 0 0 0 var(--hair) #3b3a36; color: #cfcdc4; }
.node--dark:hover { box-shadow: 0 0 0 2px #4d4c48; background: var(--slate); }
.node--dark h3, .node--dark h4 { color: var(--paper); }

.node__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; flex: none;
	border-radius: var(--r-s);
	background: var(--paper);
	box-shadow: 0 0 0 var(--hair) var(--edge-soft);
	color: var(--clay-press);
}
.node__mark svg { width: 20px; height: 20px; }
.node--dark .node__mark { background: #1c1b1a; box-shadow: 0 0 0 var(--hair) #3b3a36; color: var(--clay); }

.node__title { font-size: var(--t-h6); margin: 0; line-height: 1.3; }
.node__text { margin: 0; font-size: var(--t-small); color: var(--quiet); }
.node--dark .node__text { color: #a3a19a; }

/* крупные числа — серифом, как заголовки офсайта */
.tally {
	font-family: Piazzolla, Georgia, serif;
	font-size: var(--t-h3);
	font-weight: 500;
	line-height: 1;
	color: var(--ink);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.node--dark .tally { color: var(--paper); }
.tally--clay { color: var(--clay-press); }

/* ============================================================
   6. Сетки. auto-fit только с настоящим минимумом.
   ============================================================ */
.spread { display: grid; gap: clamp(.85rem, .5rem + 1.2vw, 1.4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
	.spread--2, .spread--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.spread--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
	.spread--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.spread--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.spread--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
	.spread--aside { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* ============================================================
   7. Кнопки. Геометрия офсайта: радиус .5em, высота 40px,
      рамка через box-shadow, на ховере рамка удваивается.
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 40px;
	padding: 8px 16px;
	border: 0;
	border-radius: .5em;
	font-family: inherit;
	font-size: var(--t-body);
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var(--clay-press);
	color: var(--paper);
	box-shadow: 0 0 0 var(--hair) var(--clay-press);
	transition: color .1s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
.btn:hover { color: var(--paper); background: #b8593a; box-shadow: 0 0 0 2px #b8593a; }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--ink { background: var(--ink); box-shadow: 0 0 0 var(--hair) var(--ink); }
.btn--ink:hover { background: var(--ink-2); box-shadow: 0 0 0 2px var(--ink-2); }

.btn--quiet { background: var(--edge-soft); color: var(--ink); box-shadow: 0 0 0 var(--hair) var(--edge); }
.btn--quiet:hover { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--edge); }

.btn--onDark { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 var(--hair) var(--paper); }
.btn--onDark:hover { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px #fff; }

.btn--sm { min-height: 36px; padding: 8px 12px; font-size: var(--t-small); }
.btn--xs { min-height: 30px; padding: 6px 10px; font-size: var(--t-cap); white-space: nowrap; }
.btn--wide { width: 100%; }

.acts { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }

/* ============================================================
   8. Шапка
   ============================================================ */
.topbar {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(250, 249, 245, .88);
	backdrop-filter: blur(10px);
	border-bottom: var(--hair) solid var(--edge-soft);
}
.topbar__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--bar);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; flex: none; }
.brand__mark { width: 30px; height: 30px; flex: none; color: var(--clay); }
.brand__word {
	font-family: Piazzolla, Georgia, serif;
	font-size: 1.28rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
	white-space: nowrap;
}
.brand__word span { color: var(--clay-press); }

.nav { display: none; margin-left: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav a {
	display: inline-block;
	padding: 7px 10px;
	border-radius: var(--r-s);
	font-size: var(--t-small);
	color: var(--quiet);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease-out, color .15s ease-out;
}
.nav a:hover { background: var(--paper-3); color: var(--ink); }
.nav a.here { color: var(--ink); background: var(--edge-soft); }

.topbar__cta { margin-left: auto; flex: none; }
.topbar__cta .btn { white-space: nowrap; }
.topbar__cta .short { display: none; }

.hamb {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; flex: none;
	padding: 0; border: 0; cursor: pointer;
	background: var(--edge-soft);
	border-radius: .5em;
	box-shadow: 0 0 0 var(--hair) var(--edge);
	color: var(--ink);
}
.hamb svg { width: 20px; height: 20px; }
.hamb .x { display: none; }
.hamb[aria-expanded="true"] .x { display: block; }
.hamb[aria-expanded="true"] .m { display: none; }

.drawer { display: none; border-top: var(--hair) solid var(--edge-soft); background: var(--paper); }
.drawer.open { display: block; }
.drawer ul { list-style: none; margin: 0; padding: .5rem 0 1rem; }
.drawer li { margin: 0; }
.drawer a {
	display: block; padding: 11px 2px;
	border-bottom: var(--hair) solid var(--edge-soft);
	color: var(--body); text-decoration: none; font-size: var(--t-body);
}
.drawer a:hover, .drawer a.here { color: var(--clay-press); }

@media (min-width: 1080px) {
	.nav { display: block; }
	.topbar__cta { margin-left: .5rem; }
	.hamb { display: none; }
	.drawer { display: none !important; }
}

/* ============================================================
   9. Первый экран: звезда всплывает и опускается,
      заголовок выезжает пословно, от звезды прорастают ветки.
   ============================================================ */
.opening {
	position: relative;
	padding-block: clamp(2.5rem, 1rem + 6vw, 5rem) clamp(2.5rem, 1rem + 5vw, 4.5rem);
	text-align: center;
	overflow: hidden;
}
.opening::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: var(--edge-soft);
}
.opening__glow {
	position: absolute;
	top: clamp(-2rem, -1rem - 3vw, 0rem);
	left: 50%;
	width: min(760px, 120%);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle at 50% 38%, rgba(217, 119, 87, .16), rgba(217, 119, 87, .04) 42%, transparent 66%);
	pointer-events: none;
	z-index: 0;
}
.opening > .shell { position: relative; z-index: 1; }

.spark {
	width: clamp(76px, 8vw, 116px);
	height: auto;
	margin: 0 auto clamp(1.1rem, .6rem + 1.6vw, 2rem);
	color: var(--clay);
	animation: sway 6s ease-in-out infinite;
	will-change: transform;
}
@keyframes sway {
	0%, 100% { transform: translateY(-9px) rotate(-2deg); }
	50%      { transform: translateY(9px) rotate(2deg); }
}

.opening__title {
	font-size: var(--t-display);
	max-width: 20ch;
	margin: 0 auto .55em;
	letter-spacing: -.028em;
}
.opening__lead {
	max-width: 40rem;
	margin: 0 auto clamp(1.35rem, 1rem + 1.4vw, 2rem);
	font-size: var(--t-lead);
	color: var(--quiet);
}
.opening .acts { justify-content: center; }
.opening__foot {
	margin: 1.15rem 0 0;
	font-size: var(--t-small);
	color: var(--dim);
}

/* веер фактов, подвешенный к звезде */
.fan {
	display: grid;
	gap: .8rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
	text-align: left;
}
@media (min-width: 620px) { .fan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .fan { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fan__item {
	position: relative;
	padding: 1rem 1.1rem;
	background: var(--paper-2);
	border-radius: var(--r-m);
	box-shadow: 0 0 0 var(--hair) var(--edge-soft);
}
.fan__item::before {
	content: "";
	position: absolute;
	left: 1.1rem;
	top: -.8rem;
	width: var(--hair);
	height: .8rem;
	background: var(--edge);
}
.fan__key { display: block; font-size: var(--t-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: .3rem; }

/* ============================================================
   10. Mindmap — приём с claude.com/product/overview.
       Инлайновый SVG, центр в световом ореоле, категории
       серифом 13px, узлы гротеском 11px, тултип 190px.
   ============================================================ */
.mindmap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 340px;
	max-width: 720px;
	margin-inline: auto;
}
.mindmap svg { width: 100%; height: auto; display: block; overflow: visible; }
.mindmap .links line { stroke: var(--edge); stroke-width: 1; }
.mindmap .links line.to-cat { opacity: .6; }
.mindmap .links line.to-node { opacity: .4; }
.mindmap .categories circle { fill: var(--paper); stroke: var(--edge); stroke-width: 1; opacity: .95; }
.mindmap .categories text {
	font-family: Piazzolla, Georgia, serif;
	font-size: 13px; font-weight: 500; fill: var(--ink);
	text-anchor: middle; dominant-baseline: middle;
}
.mindmap .nodes circle { fill: var(--paper); stroke: var(--edge-soft); stroke-width: 1; }
.mindmap .nodes text {
	font-family: "Alegreya Sans", sans-serif;
	font-size: 11px; font-weight: 400; fill: var(--quiet);
	text-anchor: middle; dominant-baseline: middle;
}
.mindmap g { pointer-events: none; }
.mindmap g.hit { pointer-events: auto; cursor: default; }
.mindmap__logo {
	position: absolute; top: 50%; left: 50%;
	width: 100%; height: auto; max-width: 128px;
	transform: translate(-50%, -50%);
	color: var(--clay);
}
.mindmap__logo::after {
	content: "";
	display: block; position: absolute; top: 50%; left: 50%;
	width: calc(100% + 100px); height: calc(100% + 60px);
	background: var(--paper);
	z-index: -1;
	transform: translate(-50%, -50%);
	filter: blur(16px);
	border-radius: 50%;
}
@media (max-width: 780px) { .mindmap__logo { max-width: 84px; } }
.mindmap__tip {
	position: absolute;
	z-index: 5;
	width: 100%;
	max-width: 190px;
	padding: 12px 10px 16px;
	background: var(--paper);
	color: var(--ink);
	border-radius: var(--r-s);
	box-shadow: 0 0 0 var(--hair) var(--edge), 0 10px 30px rgba(20, 20, 19, .1);
	display: none;
	pointer-events: none;
}
.mindmap__tip.show { display: block; }
.mindmap__tip b { display: block; font-family: "Alegreya Sans", sans-serif; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mindmap__tip span { display: block; font-size: 11px; line-height: 1.25; color: var(--quiet); }

/* ============================================================
   11. Тарифы
   ============================================================ */
.plans { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .8rem;
	min-width: 0;
	padding: 1.4rem 1.3rem;
	background: var(--paper-2);
	border-radius: var(--r-m);
	box-shadow: 0 0 0 var(--hair) var(--edge-soft);
	transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}
.plan:hover { box-shadow: 0 0 0 2px var(--edge); background: #fff; }
.plan--pick { background: #fff; box-shadow: 0 0 0 2px var(--clay); }
.plan--pick:hover { box-shadow: 0 0 0 3px var(--clay); }
.plan__tag {
	position: absolute; top: -11px; left: 1.3rem;
	padding: 3px 9px;
	background: var(--clay-press); color: var(--paper);
	border-radius: var(--r-xs);
	font-size: var(--t-cap); font-weight: 600; letter-spacing: .03em;
}
.plan__name { margin: 0; font-size: var(--t-h5); }
.plan__price { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.plan__sum { font-family: Piazzolla, Georgia, serif; font-size: var(--t-h3); font-weight: 500; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.plan__per { font-size: var(--t-small); color: var(--dim); }
.plan__sub { margin: 0; font-size: var(--t-small); color: var(--quiet); }
.plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: var(--t-small); }
.plan__list li { display: flex; gap: .5rem; align-items: flex-start; margin: 0; min-width: 0; }
.plan__list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--mineral); }
.plan .btn { margin-top: auto; }

/* ============================================================
   12. Таблицы. Шире экрана — скролл внутри себя,
       на узком — стек карточек через data-label.
   ============================================================ */
.slab { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-m); box-shadow: 0 0 0 var(--hair) var(--edge-soft); }
table { width: 100%; border-collapse: collapse; background: var(--paper-2); font-size: var(--t-small); }
caption { text-align: left; padding: .9rem 1rem; color: var(--quiet); font-size: var(--t-small); }
th, td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: var(--hair) solid var(--edge-soft); }
th { font-weight: 600; color: var(--ink); background: var(--paper-3); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td .btn { margin: 0; }

@media (max-width: 660px) {
	.slab { overflow: visible; box-shadow: none; }
	table, thead, tbody, tr, th, td { display: block; }
	thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	tr {
		margin-bottom: .85rem; padding: .35rem .95rem .85rem;
		background: var(--paper-2); border-radius: var(--r-m);
		box-shadow: 0 0 0 var(--hair) var(--edge-soft);
	}
	td { border-bottom: var(--hair) solid var(--edge-soft); padding: .65rem 0; }
	tr td:last-child { border-bottom: 0; }
	td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--t-cap); letter-spacing: .05em; text-transform: uppercase;
		color: var(--dim); margin-bottom: .25rem;
	}
}

/* ============================================================
   13. Отзывы и звёзды
   ============================================================ */
.star-rating { position: relative; display: inline-flex; line-height: 0; vertical-align: middle; }
.star-rating__bg, .star-rating__fg { display: flex; gap: 2px; }
.star-rating__bg { color: var(--edge-hard); opacity: .45; }
.star-rating__fg { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; white-space: nowrap; color: var(--star); }
.star-rating svg { width: var(--star-size, 20px); height: var(--star-size, 20px); flex-shrink: 0; fill: currentColor; stroke: currentColor; }

.score { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.score__num { font-family: Piazzolla, Georgia, serif; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.score .star-rating { --star-size: 24px; }
.score__of { color: var(--dim); font-size: var(--t-small); }

.rev { display: flex; flex-direction: column; gap: .6rem; }
.rev__top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.rev__who { font-family: Piazzolla, Georgia, serif; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.rev__when { font-size: var(--t-cap); color: var(--dim); }
.rev__role { font-size: var(--t-cap); color: var(--dim); letter-spacing: .03em; }
.rev .star-rating { --star-size: 15px; }
.rev__text { margin: 0; font-size: var(--t-small); }

.bars { display: flex; flex-direction: column; gap: .75rem; }
.bar__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; font-size: var(--t-small); }
.bar__track { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--edge-soft); overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--clay); border-radius: 999px; }

/* ============================================================
   14. Аккордеон вопросов — grid-template-rows 0fr → 1fr
   ============================================================ */
.qa { display: flex; flex-direction: column; gap: .6rem; }
.qa__item { background: var(--paper-2); border-radius: var(--r-m); box-shadow: 0 0 0 var(--hair) var(--edge-soft); overflow: hidden; }
.qa__q {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
	width: 100%; padding: 1rem 1.15rem;
	background: none; border: 0; cursor: pointer;
	font-family: Piazzolla, Georgia, serif; font-size: var(--t-h6); font-weight: 500; color: var(--ink);
	text-align: left; line-height: 1.3;
}
.qa__q svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--clay-press); transition: transform .22s var(--sway); }
.qa__item.open .qa__q svg { transform: rotate(45deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--sway); }
.qa__item.open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 1.15rem 1.15rem; margin: 0; font-size: var(--t-small); color: var(--quiet); }
.qa__a p + p { padding-top: 0; margin-top: -.5rem; }

/* ============================================================
   15. Шаги
   ============================================================ */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; counter-reset: st; }
.steps li {
	position: relative; margin: 0; padding-left: 3.1rem; min-height: 2.2rem;
	counter-increment: st;
}
.steps li::before {
	content: counter(st);
	position: absolute; left: 0; top: -1px;
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	background: var(--paper-2);
	box-shadow: 0 0 0 var(--hair) var(--edge);
	border-radius: 50%;
	font-family: Piazzolla, Georgia, serif; font-size: 1rem; font-weight: 600; color: var(--clay-press);
}
.steps li::after {
	content: "";
	position: absolute; left: 17px; top: 34px; bottom: -1rem;
	width: var(--hair); background: var(--edge-soft);
}
.steps li:last-child::after { display: none; }
.steps h3 { font-size: var(--t-h6); margin-bottom: .25em; }
.steps p { margin: 0; font-size: var(--t-small); color: var(--quiet); }

/* ============================================================
   16. Полоса призыва
   ============================================================ */
.rail {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem 2rem; flex-wrap: wrap;
	padding: clamp(1.5rem, 1rem + 2vw, 2.6rem);
	background: var(--ink);
	color: #cfcdc4;
	border-radius: var(--r-l);
}
.rail h2 { color: var(--paper); margin-bottom: .3em; font-size: var(--t-h3); }
.rail p { margin: 0; max-width: 46ch; font-size: var(--t-small); color: #a3a19a; }
.rail__spark { width: 46px; height: 46px; color: var(--clay); flex: none; }
.rail__body { display: flex; align-items: flex-start; gap: 1.1rem; min-width: 0; flex: 1 1 24rem; }

/* ============================================================
   17. Крошки, оглавление страницы, врезки
   ============================================================ */
.trail { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: 1rem 0 0; font-size: var(--t-cap); color: var(--dim); }
.trail a { color: var(--quiet); text-decoration: none; }
.trail a:hover { color: var(--clay-press); }
.trail span[aria-current] { color: var(--ink); }

.pagetop { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.pagetop h1 { max-width: 20ch; margin-bottom: .4em; }
.pagetop__lead { font-size: var(--t-lead); color: var(--quiet); max-width: 46rem; margin: 0; }

.aside {
	padding: 1.1rem 1.25rem;
	background: var(--clay-mist);
	border-radius: var(--r-m);
	box-shadow: 0 0 0 var(--hair) #ecd5c9;
	font-size: var(--t-small);
}
.aside p:last-child { margin-bottom: 0; }

.pairs { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 700px) { .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pairs > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .1rem; border-bottom: var(--hair) solid var(--edge-soft); font-size: var(--t-small); min-width: 0; }
.pairs dt { color: var(--quiet); min-width: 0; }
.pairs dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; min-width: 0; }

.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; min-width: 0; font-size: var(--t-small); }
.ticks svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--mineral); }
.ticks--minus svg { color: var(--clay-press); }

/* Блок перелинковки уменьшен вдвое: отступы, зазоры, скругление
   и стрелка внутри ссылки — половина прежних значений. */
.more { display: flex; flex-wrap: wrap; gap: .25rem; }
.more a {
	display: inline-flex; align-items: center; gap: .2rem;
	padding: 4px 6.5px;
	background: var(--paper-2);
	border-radius: .25em;
	box-shadow: 0 0 0 var(--hair) var(--edge-soft);
	font-size: var(--t-small);
	text-decoration: none;
	color: var(--body);
	transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}
.more a:hover { background: #fff; box-shadow: 0 0 0 2px var(--edge); color: var(--ink); }
.more a svg { width: 150px; height: 75px; }

figure.art { margin: 1.75rem 0; }
figure.art img { width: 100%; max-width: 520px; margin-inline: auto; border-radius: var(--r-m); box-shadow: 0 0 0 var(--hair) var(--edge-soft); background: var(--paper-3); }
figure.art figcaption { margin-top: .6rem; text-align: center; font-size: var(--t-cap); color: var(--dim); }

/* ============================================================
   18. Подвал. Знак-корень на нити, ссылки одной лентой.
   ============================================================ */
.foot { position: relative; margin-top: clamp(2rem, 1rem + 4vw, 4rem); border-top: var(--hair) solid var(--edge-soft); background: var(--paper-3); }
.foot__inner { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
.foot__root { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; }
.foot__root svg { width: 26px; height: 26px; color: var(--clay); flex: none; }
.foot__root b { font-family: Piazzolla, Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.foot__about { max-width: 52ch; margin: 0 0 1.6rem; font-size: var(--t-small); color: var(--quiet); }
.foot__links { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; list-style: none; margin: 0 0 1.6rem; padding: 0; }
.foot__links li { margin: 0; }
.foot__links a { font-size: var(--t-small); color: var(--body); text-decoration: none; }
.foot__links a:hover { color: var(--clay-press); text-decoration: underline; }
.foot__line { border-top: var(--hair) solid var(--edge); padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; align-items: baseline; }
.foot__line p { margin: 0; font-size: var(--t-cap); color: var(--dim); max-width: 68ch; }

/* ============================================================
   19. Появление блоков. Формула офсайта: opacity + translateY,
       .6s, cubic-bezier(.215,.61,.355,1), задержка по месту в ряду.
   ============================================================ */
.enter { opacity: 0; transform: translateY(32px); }
.enter.lit { opacity: 1; transform: none; transition: opacity .6s var(--sway), transform .6s var(--sway); transition-delay: var(--wait, 0s); }

/* Заголовок выезжает пословно */
.byword { display: inline; }
.byword b { display: inline-block; font-weight: inherit; opacity: 0; transform: translateY(10px); }
.byword.lit b { opacity: 1; transform: none; transition: opacity 1s var(--sway), transform 1s var(--sway); transition-delay: var(--w, 0s); }

/* ============================================================
   20. Служебные страницы
   ============================================================ */
.void { padding-block: clamp(3rem, 2rem + 5vw, 6rem); text-align: center; }
.void .spark { animation-duration: 8s; }
.void h1 { font-size: var(--t-h1); }
.void p { max-width: 44ch; margin-inline: auto; color: var(--quiet); }

.plain { padding-block: 2rem 3rem; }
.plain h2 { margin-top: 2rem; }
.plain ul { padding-left: 1.2em; }

/* ============================================================
   21. Брейкпоинты шапки и мелочи
   ============================================================ */
@media (max-width: 480px) {
	.topbar__cta .full { display: none; }
	.topbar__cta .short { display: inline; }
	.brand__word { font-size: 1.12rem; }
}
@media (max-width: 380px) {
	.brand__word { display: none; }
	:root { --gutter: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.spark { animation: none; }
	.enter, .byword b { opacity: 1 !important; transform: none !important; transition: none !important; }
	.qa__a { transition: none; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 500px) {
	.map {display: none;}
	.more a {
		width: stretch;
	}
}