/* Hallmark · page-specific layouts. One macrostructure per page, no cross-reuse. */

/* ========== index · Stat-Led (H4: giant stat, qualifier below, row of four) ========== */
.hero-stat { padding-block: calc(var(--space-3xl) + 3rem) var(--space-2xl); text-align: left; }
.hero-stat__kicker { font-size: var(--text-md); color: var(--color-neutral); max-width: 40ch; }
.hero-stat__num {
  font-family: var(--font-outlier); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: var(--text-stat); line-height: 1; color: var(--color-ink); letter-spacing: -0.04em;
  margin-block: var(--space-xs);
}
.hero-stat__num small { font-size: 0.32em; font-weight: 700; color: var(--color-accent); letter-spacing: 0; }
.hero-stat__sub { font-size: var(--text-md); color: var(--color-muted); max-width: 52ch; margin-bottom: var(--space-md); }
.hero-stat__def { font-size: var(--text-sm); color: var(--color-neutral); max-width: 52ch; margin-bottom: var(--space-xl); }   /* SEO/GEO: определение «Шелдон — это…» */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); border-top: var(--rule-hair); padding-top: var(--space-lg); margin-top: var(--space-2xl); }
.stat-strip div b { display: block; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); }
.stat-strip div span { font-size: var(--text-sm); color: var(--color-neutral); }
@media (max-width: 60rem) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pain {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-xl); border: var(--rule-hair); border-radius: var(--radius-xl);
  background: var(--color-paper-2);
}
.pain b { display: block; color: var(--color-ink); font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.pain p { font-size: var(--text-sm); color: var(--color-neutral); }
.pain .a { color: var(--color-accent); font-weight: 500; margin-top: auto; }

.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
.tiles .card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 11rem; }
.tile--2w { grid-column: span 3; }
.tile--img { grid-column: span 3; padding: 0; overflow: hidden; position: relative; min-height: 14rem; }
.tile--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.tile--sm { grid-column: span 2; }
@media (max-width: 60rem) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile--2w, .tile--img, .tile--sm { grid-column: auto; }
}

/* hero screenshot under the fold */
.hero-shot { margin-top: var(--space-2xl); }

/* ========== calculator (index + compare) ========== */
.calc { border: var(--rule-hair); border-radius: var(--radius-2xl); background: var(--color-band); padding: clamp(1.5rem, 1rem + 3vw, 3rem); }
.calc__row { display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: end; }
.calc__row .field { flex: 1 1 14rem; }
.calc input[type="range"] { accent-color: var(--color-accent); width: 100%; min-height: 44px; }
.calc__out { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); border-top: var(--rule-hair); padding-top: var(--space-lg); }
.calc__out b { display: block; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); }
.calc__out .is-hero b { color: var(--color-accent); }
.calc__out span { font-size: var(--text-sm); color: var(--color-neutral); }
.calc__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-neutral); }
@media (max-width: 60rem) { .calc__out { grid-template-columns: minmax(0, 1fr); } }

/* ========== admin/guests · Workbench + Split Studio diptychs ========== */
.tour { display: grid; gap: var(--space-3xl); }
.tour-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.tour-item:nth-child(even) .tour-item__text { order: 2; }
.tour-item__text h2 { margin-bottom: var(--space-sm); }
.tour-item__text p { color: var(--color-neutral); max-width: 44ch; }
.tour-item__text ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; color: var(--color-neutral); font-size: var(--text-sm); display: grid; gap: var(--space-xs); }
.tour-item__text ul li { position: relative; padding-left: 1.5em; line-height: 1.5; }
.tour-item__text ul li::before { content: "—"; position: absolute; left: 0; color: var(--color-accent); font-weight: 600; }
@media (max-width: 60rem) {
  .tour-item, .tour-item:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .tour-item:nth-child(even) .tour-item__text { order: 0; }
}

/* ========== launcher · «Восемь рубежей защиты» — 2×4 numbered mini-cards ========== */
.defense { display: grid; gap: var(--space-xl); }
.defense .section-head { margin-inline: auto; margin-bottom: 0; text-align: center; }
.defense__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.defense-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-lg); row-gap: var(--space-2xs);
  align-items: start; padding: var(--space-lg) var(--space-xl);
  background: var(--color-band); border: var(--rule-hair); border-radius: var(--radius-xl);
  transition: border-color var(--dur-normal) var(--ease-out);
}
.defense-card:hover { border-color: oklch(40% 0.05 85); }
.defense-card__no {
  grid-row: span 2; font-family: var(--font-outlier); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: var(--text-xl); line-height: 1.15; color: var(--color-accent); letter-spacing: -0.02em;
}
.defense-card b { color: var(--color-ink); font-weight: 600; line-height: 1.3; align-self: center; }
.defense-card p { font-size: var(--text-sm); color: var(--color-neutral); line-height: 1.5; }
@media (max-width: 60rem) { .defense__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .defense-card { padding: var(--space-lg); column-gap: var(--space-md); } }

/* launcher · «Два режима оболочки»: stacked duo — wide Cyrillic display face needs full column width */
.tour-item .modes { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-self: center; }
.tour-item .modes .card h3 { font-size: var(--text-base); }

/* phone row for guests page */
.phone-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
@media (max-width: 60rem) { .phone-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ========== install · Narrative Workflow (F4 steps 1.0→3.0, vertical, line connector) ========== */
.steps { display: grid; gap: var(--space-2xl); position: relative; }
.step { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-lg); }
.step__no { font-family: var(--font-outlier); font-weight: 800; font-size: var(--text-xl); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.step__body h2 { margin-bottom: var(--space-sm); }
.step__body p { max-width: 58ch; color: var(--color-neutral); }
.step__body .shot, .step__body .shot-todo { margin-top: var(--space-lg); }
.step__extra { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-neutral); border-left: 2px solid var(--color-rule); padding-left: var(--space-md); }
@media (max-width: 40rem) { .step { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } }

/* ========== control · Manifesto (declarative large type, sparse) ========== */
.creed { display: grid; gap: var(--space-3xl); }
.creed-item { max-width: 58rem; }
.creed-item h2 { font-size: var(--text-display); max-width: 20ch; margin-bottom: var(--space-md); }
.creed-item p { font-size: var(--text-md); color: var(--color-neutral); max-width: 52ch; }
.creed-item .small { font-size: var(--text-sm); margin-top: var(--space-sm); }

/* ========== compare · spec table + verdict ========== */
.compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; background: var(--color-paper); min-width: 12rem; }
.compare-table th.us, .compare-table td.us { background: var(--color-paper-2); color: var(--color-ink); }
.compare-table thead th { font-family: var(--font-body); }
/* S58: таблица целиком в ширину без прокрутки; на телефоне строка = карточка (подписи из data-label) */
.compare-table { table-layout: fixed; }
.compare-table th, .compare-table td, .compare-table .t-num { white-space: normal; overflow-wrap: break-word; }
.compare-table th:first-child, .compare-table td:first-child { position: static; min-width: 0; width: 19%; }
.compare-table th.us { width: 21%; }
.compare-table .t-num { font-size: 0.92em; }
@media (max-width: 60rem) {
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare-table tr { border: var(--rule-hair); border-radius: var(--radius-lg); margin-bottom: var(--space-md); overflow: hidden; }
  .compare-table tbody th, .compare-table th:first-child { width: auto; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); }
  .compare-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-bottom: 0; }
  .compare-table td::before { content: attr(data-label); color: var(--color-neutral); font-family: var(--font-body); font-weight: 500; }
  .compare-table td.us { background: transparent; padding-top: var(--space-sm); }
  .compare-table td.us::before { color: var(--color-accent); }
  .compare-table td:last-child { padding-bottom: var(--space-sm); }
}
.compare-note { font-size: var(--text-sm); color: var(--color-neutral); margin-top: var(--space-md); max-width: 70ch; }

/* ========== gallery · Portfolio Grid + lightbox ========== */
.gfilter { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.gfilter button {
  padding: var(--space-xs) var(--space-md); min-height: 44px;
  border: var(--rule-hair); border-radius: var(--radius-pill); background: transparent;
  color: var(--color-neutral); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.gfilter button:hover { color: var(--color-ink); border-color: var(--color-neutral); }
.gfilter button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.ggrid figure { margin: 0; }
.ggrid button.gshot { padding: 0; border: none; background: none; cursor: zoom-in; width: 100%; border-radius: var(--radius-md); }
.ggrid img { width: 100%; border: var(--rule-hair); border-radius: var(--radius-md); transition: translate var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); }
.ggrid button.gshot:hover img { translate: 0 -3px; box-shadow: var(--glow-amber); }
.ggrid figcaption { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-neutral); }
.ggrid .is-hidden { display: none; }
.ggrid figure.ph--pwa { max-width: 300px; }
@media (max-width: 60rem) { .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ggrid { grid-template-columns: minmax(0, 1fr); } .ggrid figure.ph--pwa { max-width: 70%; } }

dialog.lightbox { border: none; border-radius: var(--radius-md); background: var(--color-paper-2); padding: var(--space-sm); max-width: min(96vw, 90rem); }
dialog.lightbox::backdrop { background: oklch(8% 0.02 265 / 0.85); backdrop-filter: blur(6px); }
dialog.lightbox img { border-radius: var(--radius-sm); max-height: 86vh; width: auto; max-width: 100%; margin-inline: auto; }
dialog.lightbox .lb-close { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 44px; height: 44px; border: none; border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: 1.2rem; cursor: pointer; }

/* ========== pricing · Conversational FAQ + zero card ========== */
.zero-card {
  border: 1px solid oklch(45% 0.08 85); border-radius: var(--radius-2xl);
  background: var(--color-band); padding: var(--space-2xl);
  box-shadow: var(--glow-amber);
}
.zero-card .hero-stat__num { font-size: clamp(3.4rem, 8vw, 7rem); }
.zero-card p { max-width: 50ch; color: var(--color-neutral); }
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 60rem) { .services { grid-template-columns: minmax(0, 1fr); } }

.faq { max-width: 46rem; margin-inline: auto; }
.faq details { border-bottom: var(--rule-hair); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline;
  padding-block: var(--space-lg); color: var(--color-ink); font-weight: 600; font-size: var(--text-md);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-outlier); color: var(--color-neutral); flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; color: var(--color-accent); }
.faq summary:hover { color: var(--color-accent); }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-neutral); max-width: 60ch; }

/* ========== about · Letter (H5) + contact form ========== */
.letter { max-width: 44rem; }
.letter__salute { font-family: var(--font-display); font-size: var(--text-display-s); color: var(--color-ink); margin-bottom: var(--space-lg); }
.letter p + p { margin-top: var(--space-md); }
.letter__sign { margin-top: var(--space-xl); font-family: var(--font-outlier); color: var(--color-ink); }
.contact-card { border: var(--rule-hair); border-radius: var(--radius-xl); background: var(--color-band); padding: var(--space-xl); }
.contact-card form { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-card .field--full, .contact-card .btn-row, .contact-card .form-status { grid-column: 1 / -1; }
@media (max-width: 40rem) { .contact-card form { grid-template-columns: minmax(0, 1fr); } }

/* ========== izi-inspired components ========== */

/* chapter badge: izi «— IZI» chip — accent dot + mono label, centered above section heads */
.chip-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid oklch(45% 0.08 85 / 0.5); border-radius: var(--radius-pill);
  background: oklch(20% 0.03 85 / 0.5);
  font-family: var(--font-outlier); font-size: var(--text-sm); font-weight: 700; color: var(--color-accent);
  margin-bottom: var(--space-md); letter-spacing: 0.02em;
}
.chip-badge::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--color-accent); flex-shrink: 0;
}
section.section > .chip-badge,
section.section > .wrap > .chip-badge,
.mega > .chip-badge {
  display: flex; width: fit-content; margin-inline: auto;
}

/* ---- block2 clone: row of 5 rounded phone cards (izi «Мобильная трансформация») ---- */
.phone-cards {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md);
  margin-top: var(--space-xl);
}
.phone-card {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  background: var(--color-band); border: var(--rule-hair); border-radius: var(--radius-xl);
  transition: translate var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
}
a.phone-card:hover { translate: 0 -3px; box-shadow: var(--glow-amber); border-color: oklch(40% 0.05 85); }
.phone-card__img {
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-lg);
  border: var(--rule-hair); background: var(--color-paper);
}
.phone-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone-card b { color: var(--color-ink); font-weight: 600; line-height: 1.3; }
.phone-card p { font-size: var(--text-sm); color: var(--color-neutral); }
@media (max-width: 60rem) {
  .phone-cards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--space-sm); margin-inline: calc(-1 * var(--page-pad)); padding-inline: var(--page-pad);
    scrollbar-width: thin;
  }
  .phone-card { flex: 0 0 min(70vw, 16rem); scroll-snap-align: center; }
}

/* ---- block3 clone: giant rounded container with pill tabs + split content ---- */
.mega {
  background: var(--color-band); border: var(--rule-hair); border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.mega .section-head { margin-bottom: var(--space-lg); }
.mega .showcase__tabs { justify-content: center; border-bottom: var(--rule-hair); padding-bottom: var(--space-lg); margin-bottom: var(--space-xl); }
.mega .shot img { background: var(--color-paper); }

/* tabbed showcase: switcher of big screenshots */
.showcase__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.showcase__tabs button {
  padding: var(--space-xs) var(--space-lg); min-height: 44px;
  border: var(--rule-hair); border-radius: var(--radius-pill); background: transparent;
  color: var(--color-neutral); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.showcase__tabs button:hover { color: var(--color-ink); border-color: var(--color-neutral); }
.showcase__tabs button[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.showcase__panel { display: none; }
.showcase__panel.is-active { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.showcase__panel .shot--phone { justify-self: center; }
.showcase__text h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.showcase__text p { color: var(--color-neutral); }
.showcase__text .more { display: inline-block; margin-top: var(--space-md); color: var(--color-accent); font-weight: 500; }
@media (max-width: 60rem) { .showcase__panel.is-active { grid-template-columns: minmax(0, 1fr); } }

/* price split: amber "free" vs dark "extras" */
.price-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.price-split__free {
  border-radius: var(--radius-xl); padding: var(--space-xl);
  background: linear-gradient(140deg, oklch(78% 0.13 85), oklch(66% 0.14 70));
  color: var(--color-accent-ink);
}
.price-split__free h3, .price-split__free h2 { color: var(--color-accent-ink); font-family: var(--font-display); margin-bottom: var(--space-sm); }
.price-split__free p { color: oklch(26% 0.05 85); }
.price-split__free ul { margin: var(--space-md) 0 0; padding-left: 1.1em; color: oklch(24% 0.05 85); display: grid; gap: var(--space-2xs); font-weight: 500; }
.price-split__paid {
  border: var(--rule-hair); border-radius: var(--radius-xl); padding: var(--space-xl);
  background: var(--color-band);
}
.price-split__paid h3, .price-split__paid h2 { font-family: var(--font-display); margin-bottom: var(--space-sm); }
.price-split__paid p { color: var(--color-neutral); }
.price-split__paid ul { margin: var(--space-md) 0 0; padding-left: 1.1em; color: var(--color-neutral); display: grid; gap: var(--space-2xs); }
@media (max-width: 60rem) { .price-split { grid-template-columns: minmax(0, 1fr); } }

/* pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.tier { border: var(--rule-hair); border-radius: var(--radius-xl); background: var(--color-band); padding: var(--space-xl); }
.tier--hero { border-color: oklch(45% 0.08 85); box-shadow: var(--glow-amber); }
.tier h3 { font-family: var(--font-display); font-size: var(--text-md); }
.tier .tier__price { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); margin: var(--space-sm) 0; }
.tier .tier__price small { font-size: 0.5em; color: var(--color-neutral); font-weight: 400; }
.tier p.tier__note { font-size: var(--text-sm); color: var(--color-neutral); min-height: 3em; }
.tier ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.tier ul li::before { content: "✓ "; color: var(--color-ok); font-weight: 700; }
.tier ul li.tier__inherit::before { content: "+ "; color: var(--color-accent); }
.tier ul li.tier__inherit { color: var(--color-neutral); }
@media (max-width: 60rem) { .tiers { grid-template-columns: minmax(0, 1fr); } }

/* launcher logo strip: slow marquee of supported launcher names */
.lstrip { overflow: hidden; border-block: var(--rule-hair); padding-block: var(--space-md); }
.lstrip__track { display: flex; gap: var(--space-2xl); width: max-content; animation: lstrip 36s linear infinite; }
.lstrip span { font-family: var(--font-outlier); font-weight: 700; font-size: var(--text-md); color: var(--color-neutral); white-space: nowrap; }
.lstrip span b { color: var(--color-accent); font-weight: 700; }
@keyframes lstrip { from { translate: 0 0; } to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .lstrip__track { animation: none; flex-wrap: wrap; width: auto; } }

/* features hub grid */
.hub-cat { margin-bottom: var(--space-2xl); }
.hub-cat h2 { margin-bottom: var(--space-lg); display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.hub-cat h2 a { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); }
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.hub-grid .card h3 { font-size: var(--text-base); }
@media (max-width: 60rem) { .hub-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- izi 5-step onboarding: numbered accordion left, big visual right ---- */
.onb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.onb__steps { display: grid; gap: var(--space-sm); }
.onb__step {
  border: var(--rule-hair); border-radius: var(--radius-xl);
  background: var(--color-paper-2);
  transition: border-color var(--dur-normal) var(--ease-out);
}
.onb__step[open] { border-color: oklch(45% 0.08 85); }
.onb__step summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-lg); color: var(--color-ink); font-weight: 600;
}
.onb__step summary::-webkit-details-marker { display: none; }
.onb__no {
  flex-shrink: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: var(--color-paper-3);
  font-family: var(--font-outlier); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--color-neutral); font-size: var(--text-base);
}
.onb__step[open] .onb__no { background: var(--color-accent); color: var(--color-accent-ink); }
.onb__step p { padding: 0 var(--space-lg) var(--space-lg) calc(var(--space-lg) + 2.4rem + var(--space-md)); font-size: var(--text-sm); color: var(--color-neutral); }
.onb__cta { margin-top: var(--space-md); }
.onb__visual { position: sticky; top: 6rem; }
.onb__visual img { border-radius: var(--radius-xl); }
@media (max-width: 60rem) {
  .onb { grid-template-columns: minmax(0, 1fr); }
  .onb__visual { position: static; order: 2; }
  .onb__step p { padding-left: var(--space-lg); }
}

/* ---- izi form block: rounded container, text left + request form right ---- */
.form-band {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl);
  background: var(--color-band); border: var(--rule-hair); border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.form-band__text h2 { margin-bottom: var(--space-sm); }
.form-band__text p { color: var(--color-neutral); max-width: 40ch; }
.form-band form { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.form-band .field--full, .form-band .btn-row, .form-band .form-status { grid-column: 1 / -1; }
.form-band .field input { background: var(--color-paper); border-radius: var(--radius-md); }
@media (max-width: 60rem) {
  .form-band { grid-template-columns: minmax(0, 1fr); }
  .form-band form { grid-template-columns: minmax(0, 1fr); }
}

/* two paths: build-it-yourself vs take Sheldon */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.vs__col { border-radius: var(--radius-2xl, 32px); padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); }
.vs__col h2 { font-family: var(--font-display); font-size: var(--text-md); }
.vs__col--build { background: var(--color-band, var(--color-paper-2)); border: var(--rule-hair); }
.vs__col--build p, .vs__col--build small { color: var(--color-neutral); }
.vs__col--take { background: linear-gradient(140deg, oklch(78% 0.13 85), oklch(66% 0.14 70)); color: var(--color-accent-ink); }
.vs__col--take h3 { color: var(--color-accent-ink); }
.vs__col--take p { color: oklch(26% 0.05 85); }
.vs__col--take small a { color: var(--color-accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vs__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); border-top: 1px solid oklch(50% 0.03 265 / 0.35); padding-top: var(--space-md); margin-top: auto; }
.vs__col--take .vs__nums { border-top-color: oklch(40% 0.08 85 / 0.5); }
.vs__nums b { display: block; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-lg); font-weight: 800; color: var(--color-ink); white-space: nowrap; }
.vs__col--take .vs__nums b { color: var(--color-accent-ink); }
.vs__nums span { font-size: var(--text-sm); color: var(--color-neutral); }
.vs__col--take .vs__nums span { color: oklch(30% 0.05 85); }
.vs__col small { font-size: var(--text-sm); }
@media (max-width: 60rem) {
  .vs { grid-template-columns: minmax(0, 1fr); }
  .vs__nums b { font-size: var(--text-md); }
}
@media (max-width: 40rem) {
  .vs__col { padding: var(--space-lg); }
  .vs__nums { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .vs__nums div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; }
  .vs__nums span { font-size: var(--text-sm); }
}

/* ========== izi «ideal conditions» clone: dotted band, centered head with inline brand chip, underline tabs ========== */
.ideal {
  background:
    radial-gradient(40rem 26rem at 78% 0%, oklch(45% 0.09 70 / 0.12), transparent 70%),
    radial-gradient(34rem 24rem at 12% 90%, oklch(40% 0.07 290 / 0.12), transparent 70%),
    radial-gradient(oklch(32% 0.02 265 / 0.55) 1px, transparent 1.5px);
  background-size: auto, auto, 22px 22px;
  background-color: oklch(11% 0.012 265);
}
.ideal .section-head { margin-inline: auto; text-align: center; max-width: 50rem; }
.ideal .chip-badge { margin-inline: auto; }
.ideal__brand { display: inline-flex; align-items: center; padding: 0.06em 0.4em; border-radius: var(--radius-md); background: var(--color-paper-3); font-family: var(--font-outlier); color: var(--color-ink); white-space: nowrap; }
.ideal__brand b { color: var(--color-accent); }
.ideal__tabs { justify-content: center; gap: 0; border-bottom: var(--rule-hair); margin-bottom: var(--space-2xl); }
.ideal__tabs button { border: none; border-radius: 0; background: none; padding: var(--space-sm) var(--space-lg); color: var(--color-neutral); border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; }
.ideal__tabs button:hover { color: var(--color-ink); border-color: transparent; border-bottom-color: var(--color-rule); }
.ideal__tabs button[aria-selected="true"] { color: var(--color-accent); background: none; border-bottom-color: var(--color-accent); }
.ideal .showcase__panel.is-active { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 60rem) { .ideal .showcase__panel.is-active { grid-template-columns: minmax(0, 1fr); } }

/* subnav strip on the three feature pages */
.subnav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-2xl); }
.subnav a {
  padding: var(--space-xs) var(--space-md); min-height: 44px; display: inline-flex; align-items: center;
  border: var(--rule-hair); border-radius: var(--radius-pill); color: var(--color-neutral); font-size: var(--text-sm); font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.subnav a:hover { color: var(--color-ink); border-color: var(--color-neutral); }
.subnav a[aria-current="page"] { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-paper-3); }

/* S54-J1 Т2: вторичная кнопка «Демо» в шапке + пункт в мобильном меню */
.nav__cta--ghost { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule); }
.nav__cta--ghost:hover { box-shadow: inset 0 0 0 1px var(--color-neutral); filter: none; }
.nav__cta + .nav__cta { margin-left: calc(var(--space-sm) - var(--space-xl)); }
.nav__mobile-only { display: none; }
@media (max-width: 60rem) { .nav__mobile-only { display: block; } }

/* h1-conversion (SEO): сохранить прежний вид p-элементов */
h1.hero-stat__kicker { font-weight: 400; font-size: var(--text-md); margin-block: 1em; }
h1.letter__salute { font-weight: 400; margin-top: 1em; }

/* ---- S54-J1 страница-фишка: боль цитатой, цифры, места под графику, соседи ---- */
.painq { max-width: 46rem; margin: var(--space-xl) 0 0; padding-left: var(--space-lg); border-left: 3px solid var(--color-accent); }
.painq p { font-size: var(--text-md); color: var(--color-ink); line-height: 1.45; }
.painq cite { display: block; margin-top: var(--space-xs); font-style: normal; font-size: var(--text-sm); color: var(--color-neutral); }
.art-slot { aspect-ratio: 16 / 9; border-radius: var(--radius-lg, 1.25rem); background:
  radial-gradient(60% 70% at 70% 40%, color-mix(in oklch, var(--color-bloom) 55%, transparent), transparent 70%),
  linear-gradient(160deg, var(--color-paper-3), var(--color-paper)); border: 1px solid var(--color-rule); }
/* ---- S54-J1 Т3a: графика banana (направление B «диорама») в слотах и в hero главной ---- */
.art-slot--img { display: block; aspect-ratio: auto; overflow: hidden; background: var(--color-paper-2); }
.art-slot--img img { display: block; width: 100%; height: auto; }
.hero-art { position: relative; isolation: isolate; overflow: hidden; }
.hero-art__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero-art__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }
.hero-art::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, var(--color-paper) 0%, color-mix(in oklch, var(--color-paper) 92%, transparent) 34%,
    color-mix(in oklch, var(--color-paper) 40%, transparent) 62%, transparent 100%),
  linear-gradient(180deg, color-mix(in oklch, var(--color-paper) 70%, transparent) 0%, transparent 25%,
    transparent 70%, var(--color-paper) 100%); }
.hero-art .hero-stat__kicker, .hero-art .hero-stat__sub, .hero-art .hero-stat__def { max-width: 44ch; }
.hero-art .stat-strip { max-width: 56rem; }
@media (max-width: 60rem) {
  /* на телефоне сцена — отдельным кадром под текстом, иначе под маской её не видно */
  .hero-art { display: flex; flex-direction: column; }
  .hero-art::before { display: none; }
  .hero-art__bg { order: 2; position: relative; inset: auto; aspect-ratio: 16 / 9; margin-top: calc(-1 * var(--space-lg));
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 85%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 85%, transparent 100%); }
  .hero-art__bg img { object-position: 58% 55%; transform: scale(1.3); transform-origin: 58% 55%; }
}
.next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.next-grid a.card { display: block; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.next-grid a.card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.next-grid a.card h3 { font-size: var(--text-base); color: var(--color-ink); }
.next-grid a.card p { color: var(--color-neutral); font-size: var(--text-sm); }
@media (max-width: 60rem) { .next-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .next-grid a.card { transition: none; } .next-grid a.card:hover { transform: none; } }
.painq + .btn-row { margin-top: var(--space-xl); }

/* ---- S54-J1 главная: bento плюшек ---- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(15rem, auto); gap: var(--space-md); }
.bento__t { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2xs);
  padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-2);
  text-decoration: none; isolation: isolate; transition: border-color var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out); }
.bento__t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; z-index: -2;
  opacity: 0.32; transform: scale(1.04); transition: opacity var(--dur-normal) var(--ease-out), transform 600ms var(--ease-out); }
.bento__t::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 0%, color-mix(in oklch, var(--color-paper) 70%, transparent) 45%, var(--color-paper) 100%); }
.bento__t:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.bento__t:hover img { opacity: 0.5; transform: scale(1); }
.bento__t h3 { font-size: var(--text-md); color: var(--color-ink); }
.bento__t p { font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }
.bento__fact { align-self: flex-start; font-family: var(--font-outlier); font-size: 0.75rem; font-weight: 700; color: var(--color-accent-ink);
  background: var(--color-accent); border-radius: 999px; padding: 0.15rem 0.6rem; margin-bottom: var(--space-xs); }
.bento__t--xl { grid-column: span 2; grid-row: span 2; }
.bento__t--xl h3 { font-size: var(--text-xl); }
.bento__t--tall { grid-row: span 2; }
.bento__t--wide { grid-column: span 2; }
@media (max-width: 60rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__t--tall { grid-row: span 1; } }
@media (max-width: 36rem) { .bento { grid-template-columns: minmax(0, 1fr); } .bento__t--xl, .bento__t--wide { grid-column: span 1; } .bento__t--xl { grid-row: span 1; } }

/* ---- один день клуба: линия времени, прогресс по скроллу (JS), без JS — всё видно ---- */
.day { position: relative; list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg); }
.day__bar { position: absolute; left: 0; right: 0; top: 0.9rem; height: 2px; background: var(--color-rule); }
.day__bar i { display: block; height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--day-p, 1)); }
.day__step { position: relative; padding-top: var(--space-xl); }
.day__step::before { content: ""; position: absolute; top: 0.55rem; left: 0; width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--color-paper); border: 2px solid var(--color-accent); }
.day__step time { display: block; font-family: var(--font-outlier); font-weight: 800; font-size: var(--text-lg); color: var(--color-accent); }
.day__step b { display: block; color: var(--color-ink); margin: var(--space-2xs) 0; }
.day__step p { font-size: var(--text-sm); color: var(--color-neutral); }
.day.is-live .day__step { opacity: 0.6; transition: opacity var(--dur-normal) var(--ease-out); }
.day.is-live .day__step.is-on { opacity: 1; }
.day.is-live .day__step:not(.is-on) p { color: var(--color-ink); }   /* контраст AA под 0.6 */
@media (max-width: 60rem) {
  .day { grid-template-columns: minmax(0, 1fr); padding-left: var(--space-lg); }
  .day__bar { top: 0; bottom: 0; left: 0.35rem; right: auto; width: 2px; height: auto; }
  .day__bar i { transform-origin: top; transform: scaleY(var(--day-p, 1)); }
  .day__step { padding-top: 0; }
  .day__step::before { left: calc(-1 * var(--space-lg)); top: 0.35rem; }
}

/* ---- живое демо: 5 карточек ---- */
.demogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); align-items: end; }
.democard { display: flex; flex-direction: column; gap: var(--space-2xs); text-decoration: none; }
.democard img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-rule); transition: border-color var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out); }
.democard:hover img { border-color: var(--color-accent); transform: translateY(-3px); }
.democard b { color: var(--color-ink); margin-top: var(--space-xs); }
.democard span { font-size: var(--text-sm); color: var(--color-neutral); }
@media (max-width: 60rem) { .demogrid { grid-template-columns: minmax(0, 1fr); } }
.next-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 60rem) { .next-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .next-grid--4 { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .bento__t, .bento__t img, .democard img { transition: none; }
  .bento__t:hover, .democard:hover img { transform: none; }
}
.hub-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hub-grid--5 .card p a { color: var(--color-muted); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 3px; }
.hub-grid--5 .card p a:hover { color: var(--color-accent); }
@media (max-width: 60rem) { .hub-grid--5 { grid-template-columns: minmax(0, 1fr); } }
.tour-item .shot--phone { max-width: 20rem; width: 100%; justify-self: center; margin-inline: auto; }

/* ---- S54-J1 «работа администратора»: экран слева, список справа, наведение переключает ---- */
.adm { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: center; }
.adm__stage { display: grid; }
.adm__stage .adm__img { grid-area: 1 / 1; opacity: 0; transition: opacity var(--dur-normal) var(--ease-out); }
.adm__stage .adm__img.is-on { opacity: 1; }
.adm__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2xs); }
.adm__item { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md); border: 1px solid transparent; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.adm__item b { display: block; color: var(--color-muted); font-weight: 600; transition: color var(--dur-fast) var(--ease-out); }
.adm__item span { display: block; margin-top: 0.15rem; font-size: var(--text-sm); color: var(--color-neutral); }
.adm__item:hover, .adm__item:focus-visible, .adm__item.is-on { background: var(--color-paper-2); border-color: var(--color-rule); }
.adm__item.is-on b, .adm__item:hover b { color: var(--color-ink); }
.adm__item.is-on { box-shadow: inset 3px 0 0 var(--color-accent); }
.adm__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 60rem) { .adm { grid-template-columns: minmax(0, 1fr); } .adm__item span { display: none; } .adm__item.is-on span { display: block; } }
@media (prefers-reduced-motion: reduce) { .adm__stage .adm__img, .adm__item, .adm__item b { transition: none; } }
.demo-hint { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-neutral); }

/* ---- S54-J1 Д7: pwa.html — телефоны внахлёст, треугольник-play, тихие фоны-диорамы, GSAP ---- */
.pwa-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--space-3xl) + 3rem) var(--space-2xl); }
.pwa-hero__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.pwa-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 56%; transform: scale(1.1); transform-origin: 62% 56%; }
.pwa-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, var(--color-paper) 0%, color-mix(in oklch, var(--color-paper) 90%, transparent) 36%,
    color-mix(in oklch, var(--color-paper) 48%, transparent) 58%, color-mix(in oklch, var(--color-paper) 30%, transparent) 100%),
  linear-gradient(180deg, color-mix(in oklch, var(--color-paper) 78%, transparent) 0%, transparent 28%, transparent 62%, var(--color-paper) 100%); }
.pwa-hero__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.pwa-hero__text h1 { max-width: 14ch; margin-top: var(--space-md); }
.pwa-hero__text .lede { margin-top: var(--space-md); }
.pwa-hero__text .btn-row { margin-top: var(--space-xl); }
.pwa-facts { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin: var(--space-xl) 0 0; padding: var(--space-lg) 0 0; list-style: none; border-top: var(--rule-hair); }
.pwa-facts b { display: block; font-family: var(--font-outlier); font-size: var(--text-md); font-weight: 700; color: var(--color-accent); }
.pwa-facts span { font-size: var(--text-sm); color: var(--color-neutral); }
.pwa-hero__stage { position: relative; }
.pwa-hero__mock { display: block; width: 112%; max-width: none; height: auto; margin-left: -6%; filter: drop-shadow(0 30px 40px oklch(0% 0 0 / 0.55)); }
.pwa-mock { display: block; height: auto; filter: drop-shadow(0 28px 36px oklch(0% 0 0 / 0.55)); }

/* телефон-мокап: тёмная рамка, кадр F1 внутри */
.phone { display: block; width: 16rem; height: auto; filter: drop-shadow(0 28px 36px oklch(0% 0 0 / 0.6)); }
.pwa-chip { position: absolute; display: grid; gap: 0.1rem; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-paper-2) 86%, transparent); border: 1px solid var(--color-rule); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lift); font-family: var(--font-outlier); font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.pwa-chip b { color: var(--color-accent); }
.pwa-chip small { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); color: var(--color-neutral); }
.pwa-chip--a { left: -4%; top: 14%; }
.pwa-chip--b { right: -2%; top: 66%; }

/* бегущая строка — как «играйте рядом» у референса, только по-нашему */
.ticker { overflow: hidden; background: linear-gradient(90deg, oklch(66% 0.14 70), oklch(80% 0.14 85) 60%, oklch(74% 0.14 80));
  color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); padding-block: var(--space-sm); white-space: nowrap; }
.ticker__track { display: inline-flex; animation: ticker 40s linear infinite; will-change: transform; }
.ticker__track span { padding-right: 2.25rem; }
.ticker__track span::before { content: "//"; margin-right: 2.25rem; opacity: 0.5; font-family: var(--font-outlier); font-weight: 800; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* иконки и мини-пункты */
.pwa-ico { display: block; width: 4rem; height: 4rem; object-fit: contain; margin-left: -0.35rem; }
.pwa-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.pwa-minis li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.pwa-minis .pwa-ico { width: 2.6rem; height: 2.6rem; margin: -0.2rem 0 0 -0.2rem; }
.pwa-minis b { display: block; color: var(--color-ink); font-weight: 600; line-height: 1.3; }
.pwa-minis p { font-size: var(--text-sm); color: var(--color-neutral); margin-top: 0.15rem; }

/* карточка как на снимке владельца: текст слева, два телефона справа внахлёст, срезаны нижним краем */
.pwa-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl);
  min-height: 31rem; padding: clamp(1.5rem, 1rem + 3vw, 3rem); border: var(--rule-hair); border-radius: var(--radius-2xl); background: var(--color-band); }
.pwa-card--tex::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.22; pointer-events: none;
  background: url("../assets/img/art/pwa-lounge-1440.webp") 70% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.pwa-card--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pwa-card--rev .pwa-card__text { order: 2; }
.pwa-card--rev.pwa-card--tex::before { background-position: 30% 50%;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 55%); mask-image: linear-gradient(270deg, transparent 0%, #000 55%); }
.pwa-card__text h2 { margin-top: var(--space-md); max-width: 16ch; }
.pwa-card__text > p { color: var(--color-neutral); max-width: 46ch; margin-top: var(--space-sm); }
.pwa-card__phones { position: relative; }
.pwa-card__phones .pwa-mock { position: absolute; left: -10%; top: 16%; width: 136%; max-width: none; }
.pwa-card--rev .pwa-card__phones .pwa-mock { left: -10%; top: 50%; translate: 0 -50%; width: 118%; }

/* блок: заголовок слева, телефоны справа, под ними стеклянная карточка с четырьмя пунктами */
.pwa-feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--space-xl); align-items: end; }
.pwa-feat__head { align-self: center; padding-bottom: var(--space-2xl); }
.pwa-feat__head h2 { margin-top: var(--space-md); max-width: 16ch; }
.pwa-feat__head p { color: var(--color-neutral); max-width: 44ch; margin-top: var(--space-sm); }
.pwa-feat__phones { position: relative; height: 27rem; }
.pwa-feat__phones .pwa-mock { position: absolute; left: 2%; bottom: -7rem; width: 100%; }
.pwa-feat--rev .pwa-feat__head { order: 2; }
.pwa-feat--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pwa-feat__card { grid-column: 1 / -1; position: relative; z-index: 2; padding: var(--space-xl); border-radius: var(--radius-xl);
  border: 1px solid color-mix(in oklch, var(--color-accent) 28%, var(--color-rule)); background: color-mix(in oklch, var(--color-paper-2) 76%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 -20px 60px -30px oklch(58% 0.13 75 / 0.35); }
.pwa-feat__card .pwa-minis { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* треугольник-play с плавными линиями: кадр вписан в скруглённый треугольник, вокруг — контуры */
.pwa-play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.pwa-play__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.pwa-play__line { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linejoin: round; opacity: 0.6; }
.pwa-play__line--2 { opacity: 0.32; }
.pwa-play__line--3 { opacity: 0.14; }
.pwa-play__text h2 { margin-top: var(--space-md); max-width: 16ch; }
.pwa-play__text > p { color: var(--color-neutral); max-width: 44ch; margin-top: var(--space-sm); }
.pwa-steps { list-style: none; counter-reset: s; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.pwa-steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--space-sm); counter-increment: s; }
.pwa-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-outlier); font-weight: 800; color: var(--color-accent); font-size: var(--text-md); line-height: 1.45; }
.pwa-steps b { display: block; color: var(--color-ink); font-weight: 600; }
.pwa-steps p { font-size: var(--text-sm); color: var(--color-neutral); }

/* «внутри ещё» — плитки с телефоном в углу */
.pwa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.pwa-tile { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 21rem; padding: var(--space-lg);
  border: var(--rule-hair); border-radius: var(--radius-xl); background: var(--color-band); text-decoration: none;
  transition: border-color var(--dur-normal) var(--ease-out), translate var(--dur-normal) var(--ease-out); }
.pwa-tile:hover { border-color: oklch(40% 0.05 85); translate: 0 -3px; }
.pwa-tile b { color: var(--color-ink); font-weight: 600; font-size: var(--text-md); max-width: 10rem; line-height: 1.25; }
.pwa-tile p { font-size: var(--text-sm); color: var(--color-neutral); margin-top: var(--space-xs); max-width: 11rem; }
.pwa-tile .phone { position: absolute; right: -2.75rem; top: 6.5rem; width: 11.5rem; rotate: -6deg; z-index: -2; }
.pwa-tile:nth-child(even) .phone { rotate: 5deg; }
.pwa-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--color-band) 0%, color-mix(in oklch, var(--color-band) 60%, transparent) 35%, transparent 60%); }

/* бренд + установка: контурное слово за карточкой, как у референса, но наше */
.pwa-brand { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-3xl); }
.pwa-brand__word { position: absolute; left: 50%; top: var(--space-xl); translate: -50% 0; z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(3.2rem, 11.5vw, 11rem); line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px color-mix(in oklch, var(--color-accent) 42%, transparent); }
.pwa-brand__card { position: relative; overflow: hidden; margin-top: clamp(3rem, 9vw, 7.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem); border-radius: var(--radius-2xl); border: 1px solid color-mix(in oklch, var(--color-accent) 28%, var(--color-rule));
  background: color-mix(in oklch, var(--color-paper-2) 84%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pwa-brand__text h2 { margin-top: var(--space-md); max-width: 16ch; }
.pwa-brand__text > p { color: var(--color-neutral); max-width: 44ch; margin-top: var(--space-sm); }
.pwa-brand__text .btn-row { margin-top: var(--space-xl); }
.pwa-brand__phones { position: relative; height: 24rem; }
.pwa-brand__phones .pwa-mock { position: absolute; left: -4%; bottom: -9rem; width: 110%; max-width: none; }

@media (max-width: 60rem) {
  .pwa-hero { padding-top: calc(var(--space-3xl) + 2rem); }
  .pwa-hero::before { background: linear-gradient(180deg, var(--color-paper) 0%, color-mix(in oklch, var(--color-paper) 85%, transparent) 50%, color-mix(in oklch, var(--color-paper) 55%, transparent) 100%); }
  .pwa-hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  /* телефон целиком, чипы — рядом под ним, а не поверх */
  .pwa-hero__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .pwa-hero__mock { grid-column: 1 / -1; width: 100%; margin-left: 0; }
  .pwa-chip, .pwa-chip--a, .pwa-chip--b { position: static; inset: auto; }
  .pwa-play__art { display: none; }
  .pwa-card, .pwa-card--rev { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: var(--space-lg); }
  .pwa-card--rev .pwa-card__text { order: 0; }
  .pwa-card__phones { height: 17rem; }
  .pwa-card__phones .pwa-mock, .pwa-card--rev .pwa-card__phones .pwa-mock { left: 0; top: 0; translate: 0 0; width: 100%; }
  .pwa-feat, .pwa-feat--rev { grid-template-columns: minmax(0, 1fr); }
  .pwa-feat--rev .pwa-feat__head { order: 0; }
  .pwa-feat__head { padding-bottom: var(--space-lg); }
  .pwa-feat__phones { height: 17rem; }
  .pwa-feat__phones .pwa-mock { left: 0; bottom: -5rem; }
  .pwa-feat__card { padding: var(--space-lg); }
  .pwa-feat__card .pwa-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pwa-play { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .pwa-play__art { max-width: 26rem; margin-inline: auto; }
  .pwa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pwa-brand__card { grid-template-columns: minmax(0, 1fr); }
  .pwa-brand__phones { height: 16rem; }
  .pwa-brand__phones .pwa-mock { left: 0; bottom: -6rem; width: 100%; }
}
@media (max-width: 40rem) {
  .pwa-minis, .pwa-feat__card .pwa-minis { grid-template-columns: minmax(0, 1fr); }
  .pwa-grid { grid-template-columns: minmax(0, 1fr); }
  .pwa-tile { min-height: 18rem; }
  .pwa-chip { font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); }
}

/* ---------- S55-B1 блог: /blog/ карточки + статья (tools/site/blog_build.py) ---------- */
.blog-head { padding-top: calc(var(--space-3xl) + 2rem); padding-bottom: var(--space-xl); }
.blog-head h1 { max-width: 22ch; }
.blog-head .lede { margin-top: var(--space-md); }
.tagbar { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }
.tagbar button {
  min-height: 44px; padding: var(--space-xs) var(--space-md); cursor: pointer;
  border: var(--rule-hair); border-radius: var(--radius-pill); background: var(--color-paper-2);
  font: 500 var(--text-sm) var(--font-body); color: var(--color-muted);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tagbar button:hover { border-color: var(--color-neutral); color: var(--color-ink); }
.tagbar button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.blog-list { padding-bottom: var(--space-2xl); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: var(--rule-hair); border-radius: var(--radius-xl); background: var(--color-band);
  transition: translate var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
}
.post-card[hidden] { display: none; }
.post-card:hover { translate: 0 -3px; box-shadow: var(--glow-amber); border-color: oklch(40% 0.05 85); }
.post-card__cover, .post-card__cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card__cover--empty, .post-cover--empty {
  background: radial-gradient(60% 80% at 70% 30%, oklch(45% 0.09 70 / 0.35), transparent 70%), var(--color-paper-3);
}
.post-card__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); flex: 1; }
.post-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); }
.tag {
  display: inline-block; padding: 0.15rem var(--space-xs); border-radius: var(--radius-sm);
  background: oklch(20% 0.03 85 / 0.5); color: var(--color-accent);
  font-family: var(--font-outlier); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
}
a.tag:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.post-card__title { font-size: 1.125rem; line-height: 1.28; color: var(--color-ink); }
@media (min-width: 60.01rem) {
  .blog-grid--first > .post-card:first-child { grid-column: 1 / -1; flex-direction: row; }
  .blog-grid--first > .post-card:first-child .post-card__cover { flex: 0 0 58%; }
  .blog-grid--first > .post-card:first-child .post-card__cover img { height: 100%; }
  .blog-grid--first > .post-card:first-child .post-card__body { padding: var(--space-xl); justify-content: center; }
  .blog-grid--first > .post-card:first-child .post-card__title { font-size: var(--text-lg); }
  .blog-grid--first > .post-card:first-child .post-card__meta { margin-top: var(--space-md); }
}
.post-card p { font-size: var(--text-sm); color: var(--color-neutral); }
.post-card__meta { margin-top: auto; font-family: var(--font-outlier); font-size: 0.72rem !important; }
.pager { display: flex; gap: var(--space-xs); justify-content: center; margin-top: var(--space-xl); }
.pager a { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: var(--rule-hair); border-radius: var(--radius-pill); }
.pager a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }

.post { max-width: calc(46rem + 2 * var(--page-pad)); padding-top: calc(var(--space-3xl) + 2rem); padding-bottom: var(--space-2xl); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-neutral); margin-bottom: var(--space-lg); }
.crumbs a { color: var(--color-neutral); }
.crumbs a:hover { color: var(--color-ink); }
.crumbs [aria-current] { color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.post-head h1 { font-size: var(--text-display-s); margin-top: var(--space-sm); }
.post-meta { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-neutral); }
.post-meta__author { color: var(--color-muted); font-weight: 500; }
.post-cover { display: block; margin-top: var(--space-xl); border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 9; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-short { margin-top: var(--space-xl); padding: var(--space-lg); border: 1px solid oklch(45% 0.08 85 / 0.5); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); background: oklch(20% 0.03 85 / 0.35); }
.post-short__label { font-family: var(--font-outlier); font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-2xs); }
.post-short p:last-child { color: var(--color-ink); font-size: var(--text-md); line-height: 1.5; }
.post-body { margin-top: var(--space-xl); font-size: 1.0625rem; line-height: 1.7; }
.post-body > * + * { margin-top: var(--space-md); }
.post-body h2 { font-size: var(--text-lg); margin-top: var(--space-2xl); }
.post-body h3 { margin-top: var(--space-xl); }
.post-body ul, .post-body ol { padding-left: 1.3em; display: grid; gap: var(--space-xs); }
.post-body li::marker { color: var(--color-accent); }
.post-body blockquote { padding-left: var(--space-lg); border-left: 3px solid var(--color-accent); color: var(--color-ink); font-size: var(--text-md); }
.post-body .shot { margin-block: var(--space-xl); }
.post-body .shot img { border-radius: var(--radius-md); border: var(--rule-hair); }
.post-table { overflow-x: auto; border: var(--rule-hair); border-radius: var(--radius-md); }
.post-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.post-table th, .post-table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: var(--rule-hair); vertical-align: top; }
.post-table th { color: var(--color-ink); font-weight: 600; background: var(--color-paper-2); }
.post-table tr:last-child td { border-bottom: 0; }
.post-cta { margin-top: var(--space-2xl); padding: var(--space-xl); border: var(--rule-hair); border-radius: var(--radius-xl); background: var(--color-band); }
.post-cta .btn-row { margin-top: var(--space-lg); }
.post-faq { margin-top: var(--space-2xl); }
.post-faq h2 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.post-faq .faq { margin-inline: 0; }

@media (max-width: 60rem) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .post-body { font-size: 1rem; }
  .post-short p:last-child { font-size: var(--text-base); }
  .post-cta { padding: var(--space-lg); }
  .crumbs [aria-current] { max-width: 18ch; }
}

/* S57-T2: метка редакции у функции (без метки — во всех, в том числе бесплатной) */
.ed { display: inline-block; margin-left: 0.4em; padding: 0.1em 0.55em; border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--font-body, inherit); font-size: 0.62em; font-weight: 600; letter-spacing: 0.02em; vertical-align: 0.2em; white-space: nowrap; }
.ed--lite { color: var(--color-ok); }
.ed--pro { color: var(--color-accent); }
.ed-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-neutral); }
.ed-note .ed { margin-left: 0; margin-right: 0.3em; font-size: 0.8em; vertical-align: 0.1em; }
.trial-grid { margin-top: var(--space-xl); }
.tier p.tier__year { margin: calc(-1 * var(--space-xs)) 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-neutral); }

/* ========== S58 · заявки: мини-форма в cta-band, «Получить расчёт» под калькулятором, окно в углу ========== */
.lead-inline input[name="contact"], .calc__lead input[name="contact"], .lead-pop input[name="contact"] {
  flex: 1 1 15rem; min-width: 0; min-height: 48px; padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair); border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base);
}
.lead-inline input[name="contact"]:focus-visible, .calc__lead input[name="contact"]:focus-visible, .lead-pop input[name="contact"]:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 0; border-color: transparent;
}
.lead-inline input[name="contact"]::placeholder, .calc__lead input[name="contact"]::placeholder, .lead-pop input[name="contact"]::placeholder { color: var(--color-neutral); }

.lead-inline { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; max-width: 36rem; margin-inline: auto; }
.lead-inline .form-status, .lead-inline .form-note { flex-basis: 100%; margin: 0; max-width: none; }
.cta-band .lead-inline__lede { margin-top: var(--space-xl); }

.calc__lead { margin-top: var(--space-lg); border-top: var(--rule-hair); padding-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.calc__lead-text { color: var(--color-ink); font-weight: 500; }
.calc__lead-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.lead-pop {
  position: fixed; z-index: 60; width: min(23rem, calc(100vw - 2rem));
  right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  padding: var(--space-lg); display: grid; gap: var(--space-sm);
  background: var(--color-paper-2); border: var(--rule-hair); border-radius: var(--radius-xl); box-shadow: var(--shadow-lift);
  opacity: 0; translate: 0 12px; transition: opacity var(--dur-normal) var(--ease-out), translate var(--dur-normal) var(--ease-out);
}
.lead-pop.is-on { opacity: 1; translate: 0 0; }
.lead-pop__x {
  position: absolute; top: 0.4rem; right: 0.4rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--color-neutral); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lead-pop__x:hover { color: var(--color-ink); }
.lead-pop__x:focus-visible { outline: 2px solid var(--color-focus); }
.lead-pop__icon { width: 56px; height: 56px; margin: -0.25rem 0 0 -0.35rem; }
.lead-pop__title { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.2; padding-right: 2.2rem; color: var(--color-ink); }
.lead-pop__text { font-size: var(--text-sm); color: var(--color-neutral); }
.lead-pop form { display: grid; gap: var(--space-sm); }
.lead-pop .form-status { margin: 0; }
.lead-pop .form-status:empty { display: none; }
@media (max-width: 40rem) {
  .lead-pop { right: 0.75rem; left: 0.75rem; width: auto; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); padding: var(--space-md); }
  .lead-pop__text, .lead-pop__icon { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lead-pop { transition: none; translate: none; } }

/* ========== S58 · 3D-иконки banana в текстовых карточках ========== */
.card-ico { display: block; width: 68px; height: 68px; margin: -0.35rem 0 var(--space-sm) -0.4rem; filter: drop-shadow(0 6px 14px oklch(8% 0.02 265 / 0.5)); }
.pain .card-ico { margin-bottom: var(--space-md); }
.day__step .card-ico { width: 48px; height: 48px; margin: 0 0 var(--space-xs) -0.35rem; }

/* ========== S58 · сцена-диорама banana справа в шапке страницы ========== */
.page-art { position: relative; isolation: isolate; }
.page-art__bg {
  position: absolute; z-index: -1; pointer-events: none; margin: 0;
  top: calc(var(--space-xl) + 1rem); right: calc(50% - 50vw); width: min(62vw, 64rem); aspect-ratio: 16 / 9;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 72%, transparent 100%);
  mask-composite: intersect;
}
.page-art__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-art .section-head, .page-art .chip-badge, .page-art .subnav { position: relative; }
@media (max-width: 60rem) {
  .page-art__bg { position: relative; top: auto; right: auto; display: block; width: calc(100% + 2 * var(--page-pad)); max-width: none;
    margin: var(--space-lg) calc(-1 * var(--page-pad)) 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent); }
}

/* ========== S58 · скриншоты увеличиваются по клику (site.js) ========== */
img.is-zoomable { cursor: zoom-in; }
img.is-zoomable:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
dialog.lightbox .lb-cap { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-neutral); text-align: center; }
dialog.lightbox .lb-cap:empty { display: none; }

/* ========== S58 · «Путь второй»: перелив и свечение; подсветка кнопок заявки ========== */
.vs__col--take { position: relative; isolation: isolate; overflow: hidden;
  box-shadow: 0 0 0 1px oklch(85% 0.12 85 / 0.5), 0 18px 60px oklch(70% 0.15 75 / 0.35), 0 0 120px oklch(72% 0.15 78 / 0.25); }
.vs__col--take::after { content: ""; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, oklch(97% 0.06 90 / 0.45) 50%, transparent 60%);
  translate: -60% 0; animation: vs-sheen 6s var(--ease-out) infinite; }
@keyframes vs-sheen { 0%, 55% { translate: -60% 0; } 100% { translate: 60% 0; } }
.vs__col--take .btn--ink { align-self: flex-start; margin-top: auto; }
.btn--ink { background: var(--color-paper); color: var(--color-ink); border-color: transparent; }
.btn--ink:hover { background: var(--color-paper-2); }
.btn--glow, .nav__cta { animation: cta-glow 2.8s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 oklch(80% 0.15 80 / 0.0), 0 0 18px oklch(80% 0.15 80 / 0.25); }
  50% { box-shadow: 0 0 0 4px oklch(80% 0.15 80 / 0.18), 0 0 34px oklch(80% 0.15 80 / 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .vs__col--take::after, .btn--glow, .nav__cta { animation: none; }
}

/* ========== S58 · таблица «что в какой редакции» (tools/site/tariff_table.py) ========== */
.mx-link { margin-top: var(--space-xl); text-align: center; }
.mx { border: var(--rule-hair); border-radius: var(--radius-xl); overflow: clip; background: var(--color-paper-2); }
.mx__table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.mx__table thead th { position: sticky; top: 5.5rem; z-index: 1; background: var(--color-band); padding: var(--space-md); font-family: var(--font-display); font-size: var(--text-sm); text-align: center; white-space: normal; }
.mx__table thead th:first-child { text-align: left; width: 52%; }
.mx__table thead th small { display: block; margin-top: 0.2em; font-family: var(--font-body); font-weight: 500; color: var(--color-neutral); }
.mx__table thead th.mx__hero { color: var(--color-accent); }
.mx__table tbody th { text-align: left; font-weight: 400; white-space: normal; padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair); }
.mx__table tbody th b { display: block; color: var(--color-ink); font-weight: 600; }
.mx__table tbody th span { display: block; font-size: var(--text-sm); color: var(--color-neutral); }
.mx__c { text-align: center; border-top: var(--rule-hair); }
.mx__table td:nth-child(3) { background: oklch(80% 0.14 80 / 0.05); }
.mx__yes { color: var(--color-accent); font-weight: 700; font-size: 1.15rem; }
.mx__no { color: var(--color-rule); }
.mx__group th { background: var(--color-paper); color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; padding: var(--space-md) var(--space-md) var(--space-xs); border-top: var(--rule-hair); }
@media (max-width: 40rem) {
  .mx__table thead th:first-child { width: 38%; }
  .mx__table thead th { overflow-wrap: anywhere; hyphens: auto; }
  .mx__table thead th { padding: var(--space-sm) var(--space-2xs); font-size: 0.72rem; }
  .mx__table thead th small { font-size: 0.68rem; }
  .mx__table tbody th { padding: var(--space-sm); }
  .mx__table tbody th span { display: none; }
}

/* ========== S58 · бегущие строки пяти видов (.mq) ========== */
.mq { --mq-dur: 46s; overflow: hidden; white-space: nowrap; }
.mq__track { display: inline-flex; align-items: center; width: max-content; animation: mq var(--mq-dur) linear infinite; will-change: transform; }
.mq--rev .mq__track { animation-direction: reverse; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq:hover .mq__track { animation-play-state: paused; }

/* янтарная — как «играйте рядом» на странице приложения */
.mq--amber { background: linear-gradient(90deg, oklch(66% 0.14 70), oklch(80% 0.14 85) 60%, oklch(74% 0.14 80)); color: var(--color-accent-ink);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); padding-block: var(--space-sm); }
.mq--amber span { padding-right: 2.25rem; }
.mq--amber span::before { content: "//"; margin-right: 2.25rem; opacity: 0.5; font-family: var(--font-outlier); font-weight: 800; }

/* тёмная — пара к янтарной в скрещённых */
.mq--dark { background: var(--color-paper-2); color: var(--color-neutral); border-block: var(--rule-hair);
  font-family: var(--font-outlier); font-weight: 700; font-size: var(--text-md); padding-block: var(--space-sm); }
.mq--dark span { padding-right: 2.5rem; }
.mq--dark span::before { content: "●"; margin-right: 2.5rem; color: var(--color-accent); font-size: 0.6em; vertical-align: 0.25em; }

/* с 3D-иконками — фишки-плашки */
.mq--icons { --mq-dur: 60s; padding-block: var(--space-lg); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq--icons span { display: inline-flex; align-items: center; gap: var(--space-sm); margin-right: var(--space-md); padding: 0.45rem 1.1rem 0.45rem 0.45rem;
  border: var(--rule-hair); border-radius: var(--radius-pill, 999px); background: var(--color-paper-2); color: var(--color-ink); font-weight: 500; }
.mq--icons img { width: 40px; height: 40px; }

/* контурный крупный текст */
.mq--outline { --mq-dur: 70s; padding-block: var(--space-md); }
.mq--outline span { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.5rem + 5vw, 5.5rem); line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1.5px oklch(70% 0.1 80 / 0.55); padding-right: 0.5em; }
.mq--outline span:nth-child(3n+2) { color: var(--color-accent); -webkit-text-stroke: 0; }

/* лента настоящих скриншотов */
.mq--shots { --mq-dur: 80s; padding-block: var(--space-lg); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq--shots img { width: auto; height: clamp(9rem, 6rem + 9vw, 15rem); margin-right: var(--space-md); border-radius: var(--radius-md); border: var(--rule-hair); box-shadow: var(--shadow-lift); }

/* две скрещённые */
.mq-cross { position: relative; padding-block: var(--space-3xl); overflow: hidden; }
.mq-cross .mq { width: 110%; margin-left: -5%; }
.mq-cross .mq--amber { rotate: -2.5deg; position: relative; z-index: 1; box-shadow: 0 10px 40px oklch(8% 0.02 265 / 0.6); }
.mq-cross .mq--dark { rotate: 2deg; margin-top: -0.9rem; }

@media (prefers-reduced-motion: reduce) { .mq__track { animation: none; } }