/* Remorvi 2.0 typography, self-hosted. The design kit pulls these from Google
   Fonts; the payment page's CSP is font-src 'self' and a checkout has no business
   waiting on a third party to render its price. Same unicode-range split as the
   fonts already here. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Golos Text";
  src: url("/assets/fonts/golos-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  src: url("/assets/fonts/golos-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/fonts/press-start-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/fonts/press-start-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Departure Mono";
  src: url("/assets/fonts/departure-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0d0b14;
  --surface: #151020;
  --surface-2: #1d1530;
  --ink: #f2edfa;
  --text: #d9d2e9;
  --text-2: #b7a8d9;
  --muted: #8d81ad;
  --accent: #a78bfa;
  --accent-2: #c4b5fd;
  --ring: #3f2d6b;
  --border: #241f33;
  --cta: #2aabee;
  --cta-press: #1e96d6;
  --cta-ink: #06121c;
  --ok: #3ce195;
  --warn: #f0b35b;
  --danger: #f87171;
  --px-shadow: #060410;
  --font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --font-pixel: "Press Start 2P", "Golos Text", system-ui, sans-serif;
  --font-mono: "Departure Mono", "Cascadia Mono", Consolas, monospace;
  --page: 1120px;
  --measure: 72ch;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scroll-padding-top: 86px;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  border: 12px solid var(--bg);
  box-shadow: inset 0 0 0 1px rgba(63, 45, 107, 0.26);
  pointer-events: none;
  content: "";
}

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

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--ink);
}

button,
input,
textarea,
select {
  font: inherit;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 16px;
  padding: 10px 14px;
  transform: translateY(-160%);
  border: 1px solid var(--ring);
  background: var(--surface);
  color: var(--ink);
}

.skip-link:focus {
  transform: none;
}

.shell {
  width: min(calc(100% - 48px), var(--page));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  border-bottom: 1px solid var(--ring);
  background: rgba(13, 11, 20, 0.96);
}

.header-inner {
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
  image-rendering: auto;
}

.site-nav {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 22px;
}

.site-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.lang-link {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ring);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid transparent;
  background: var(--cta);
  box-shadow: 4px 4px 0 var(--px-shadow);
  color: var(--cta-ink);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: #4ab7f0;
  color: var(--cta-ink);
}

.button:active {
  transform: translate(2px, 2px);
  background: var(--cta-press);
  box-shadow: 2px 2px 0 var(--px-shadow);
}

.button-secondary {
  border-color: var(--ring);
  background: var(--surface);
  color: var(--ink);
}

.button-secondary:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--ink);
}

.button-small {
  min-height: 44px;
  padding: 9px 14px;
  font-size: 9px;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero {
  display: grid;
  min-height: 710px;
  align-items: center;
  gap: 68px;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  padding-block: 96px;
}

.hero-copy {
  max-width: 680px;
}

.hero h1,
.page-hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 700;
  hyphens: auto;
  letter-spacing: -0.045em;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.hero-lead {
  max-width: 62ch;
  margin: 28px 0 0;
  color: var(--text-2);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  margin-top: 34px;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-note {
  display: flex;
  margin: 24px 0 0;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

.dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 2px solid var(--ok);
}

.instrument {
  position: relative;
  border: 1px solid var(--ring);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--px-shadow);
}

.instrument::before,
.instrument::after {
  position: absolute;
  width: 18px;
  height: 18px;
  content: "";
}

.instrument::before {
  top: -7px;
  left: -7px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}

.instrument::after {
  right: -7px;
  bottom: -7px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}

.instrument-head {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ring);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.instrument-status {
  color: var(--ok);
}

.audit-list {
  margin: 0;
  padding: 8px 18px;
  list-style: none;
}

.audit-row {
  display: grid;
  align-items: start;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 16px 0;
  border-bottom: 1px dashed var(--ring);
}

.audit-row:last-child {
  border-bottom: 0;
}

.audit-label {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
}

.audit-detail {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
}

.audit-value {
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}

.instrument-foot {
  padding: 17px 18px;
  border-top: 1px solid var(--ring);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
}

.section {
  padding-block: 92px;
  border-top: 1px solid var(--border);
}

.section-compact {
  padding-block: 64px;
}

.section-head {
  display: grid;
  margin-bottom: 42px;
  gap: 28px;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  align-items: end;
}

.section-head h2,
.cta-band h2,
.pricing-card h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(27px, 3.8vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}

.section-head p {
  max-width: 58ch;
  margin: 0;
  color: var(--text-2);
  font-size: 18px;
  text-wrap: pretty;
}

.card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  min-height: 280px;
  padding: 28px;
  border: 1px solid var(--ring);
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--px-shadow);
}

.card-number,
.step-number {
  display: inline-flex;
  min-width: 34px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ring);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
}

.card h3,
.step h3,
.contact-card h2 {
  margin: 28px 0 12px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.25;
}

.card p,
.step p,
.contact-card p {
  margin: 0;
  color: var(--text-2);
  text-wrap: pretty;
}

.card-note {
  display: block;
  margin-top: 22px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
}

.limits {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--ring);
  background: var(--surface);
  grid-template-columns: 0.9fr 1.1fr;
}

.limits-title {
  padding: 42px;
  border-right: 1px solid var(--ring);
  background: var(--surface-2);
}

.limits-title h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(27px, 3.7vw, 42px);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.limits-list {
  margin: 0;
  padding: 28px 42px;
  list-style: none;
}

.limits-list li {
  position: relative;
  padding: 15px 0 15px 28px;
  border-bottom: 1px dashed var(--ring);
  color: var(--text-2);
}

.limits-list li:last-child {
  border-bottom: 0;
}

.limits-list li::before {
  position: absolute;
  top: 24px;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--accent);
  content: "";
}

.steps {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step {
  min-height: 240px;
  padding: 30px;
  border: 1px solid var(--ring);
  border-right: 0;
  background: var(--surface);
}

.step:last-child {
  border-right: 1px solid var(--ring);
}

.step h3 {
  margin-top: 24px;
}

.pricing-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 0.82fr 1.18fr;
}

.pricing-card {
  position: relative;
  padding: 34px;
  border: 1px solid var(--ring);
  background: var(--surface);
  box-shadow: 5px 5px 0 var(--px-shadow);
}

.pricing-card-featured {
  border-color: var(--accent);
}

.pricing-label {
  margin: 0 0 18px;
  color: var(--accent);
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1.7;
  text-transform: uppercase;
}

.price {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.price small {
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
}

.price-lead {
  margin: 18px 0 0;
  color: var(--text-2);
}

.feature-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding: 10px 0 10px 25px;
  border-bottom: 1px dashed var(--ring);
  color: var(--text);
}

.feature-list li:last-child {
  border-bottom: 0;
}

.feature-list li::before {
  position: absolute;
  top: 20px;
  left: 0;
  width: 8px;
  height: 8px;
  border: 2px solid var(--ok);
  content: "";
}

.pricing-actions {
  display: flex;
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 14px;
}

.billing-note {
  margin: 30px 0 0;
  padding: 20px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 15px;
}

.billing-note strong {
  color: var(--ink);
}

.cta-band {
  display: grid;
  align-items: center;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 46px;
  border: 1px solid var(--ring);
  background: var(--surface-2);
  box-shadow: 6px 6px 0 var(--px-shadow);
}

.cta-band p {
  max-width: 60ch;
  margin: 14px 0 0;
  color: var(--text-2);
}

.site-footer {
  padding-block: 54px 28px;
  border-top: 1px solid var(--ring);
  background: var(--surface);
}

.footer-grid {
  display: grid;
  gap: 46px;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
}

.footer-intro {
  max-width: 48ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.footer-title {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--text-2);
  font-size: 14px;
}

.footer-bottom {
  display: flex;
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px dashed var(--ring);
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.page-hero {
  padding-block: 86px 54px;
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  max-width: 920px;
  font-size: clamp(36px, 5vw, 60px);
}

.page-lead {
  max-width: 66ch;
  margin: 24px 0 0;
  color: var(--text-2);
  font-size: 20px;
  text-wrap: pretty;
}

.page-meta {
  display: flex;
  margin-top: 26px;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--ring);
  border-radius: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.article-wrap {
  display: grid;
  align-items: start;
  gap: 54px;
  grid-template-columns: 240px minmax(0, var(--measure));
  padding-block: 64px 96px;
}

.toc {
  position: sticky;
  top: 102px;
  padding: 20px;
  border: 1px solid var(--ring);
  background: var(--surface);
}

.toc-title {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li + li {
  margin-top: 8px;
}

.toc a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.toc a:hover {
  color: var(--ink);
}

.prose {
  min-width: 0;
  color: var(--text);
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin: 58px 0 18px;
  scroll-margin-top: 100px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.prose h3 {
  margin: 34px 0 12px;
  color: var(--ink);
  font-size: 21px;
}

.prose p,
.prose li {
  text-wrap: pretty;
}

.prose p {
  margin: 0 0 18px;
}

.prose ul,
.prose ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.prose li + li {
  margin-top: 9px;
}

.prose li::marker {
  color: var(--accent);
}

.prose strong {
  color: var(--ink);
}

.prose a {
  color: var(--accent-2);
}

.prose blockquote {
  margin: 30px 0;
  padding: 22px 24px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--text-2);
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.legal-summary {
  margin-bottom: 40px;
  padding: 24px;
  border: 1px solid var(--ring);
  background: var(--surface-2);
}

.legal-summary p:last-child {
  margin-bottom: 0;
}

.data-table {
  width: 100%;
  margin: 28px 0;
  border-collapse: collapse;
  font-size: 15px;
}

.data-table th,
.data-table td {
  padding: 14px 12px;
  border: 1px solid var(--ring);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: var(--surface-2);
  color: var(--ink);
}

.contact-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-card {
  min-height: 250px;
  padding: 28px;
  border: 1px solid var(--ring);
  background: var(--surface);
}

.contact-card h2 {
  margin-top: 18px;
}

.contact-value {
  display: inline-block;
  margin-top: 22px;
  overflow-wrap: anywhere;
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 14px;
}

.contact-kicker {
  color: var(--muted);
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1.7;
  text-transform: uppercase;
}

.contact-help {
  margin-top: 30px;
  padding: 24px;
  border: 1px dashed var(--ring);
  color: var(--text-2);
}

.contact-help strong {
  color: var(--ink);
}

.contact-help p {
  margin: 0;
}

.contact-help p + p {
  margin-top: 14px;
}

.status-panel {
  display: grid;
  margin-top: 32px;
  border: 1px solid var(--ring);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.status-item {
  padding: 22px;
  border-right: 1px solid var(--ring);
  background: var(--surface);
}

.status-item:last-child {
  border-right: 0;
}

.status-label {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.status-value {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-weight: 700;
}

.not-found {
  display: grid;
  min-height: calc(100vh - 70px);
  place-items: center;
  padding-block: 80px;
}

.not-found-card {
  width: min(100%, 760px);
  padding: 50px;
  border: 1px solid var(--ring);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--px-shadow);
}

.not-found-code {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 64px;
  line-height: 1;
}

.not-found-card h1 {
  margin: 24px 0 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.1;
}

.not-found-card p {
  max-width: 52ch;
  margin: 0 0 28px;
  color: var(--text-2);
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-block: 76px;
  }

  .instrument {
    width: min(100%, 680px);
  }

  .section-head {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .card-grid .card:last-child,
  .contact-grid .contact-card:last-child {
    grid-column: 1 / -1;
  }

  .article-wrap {
    grid-template-columns: 1fr;
  }

  .toc {
    position: static;
  }

  .status-panel {
    grid-template-columns: 1fr 1fr;
  }

  .status-item:nth-child(2) {
    border-right: 0;
  }

  .status-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ring);
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  body::before {
    display: none;
  }

  .shell {
    width: min(calc(100% - 32px), var(--page));
  }

  .header-inner {
    min-height: 64px;
    gap: 12px;
  }

  .site-nav .nav-optional {
    display: none;
  }

  .site-nav {
    gap: 10px;
  }

  .site-nav .header-cta {
    display: none;
  }

  .hero {
    gap: 50px;
    padding-block: 62px 74px;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(34px, 10.5vw, 48px);
  }

  .hero-lead,
  .page-lead {
    font-size: 18px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .audit-row {
    grid-template-columns: 1fr;
  }

  .audit-value {
    text-align: left;
  }

  .section {
    padding-block: 70px;
  }

  .section-compact {
    padding-block: 54px;
  }

  .card-grid,
  .contact-grid,
  .steps,
  .pricing-grid,
  .limits,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .card-grid .card:last-child,
  .contact-grid .contact-card:last-child {
    grid-column: auto;
  }

  .card {
    min-height: auto;
  }

  .limits-title {
    padding: 30px;
    border-right: 0;
    border-bottom: 1px solid var(--ring);
  }

  .limits-list {
    padding: 22px 28px;
  }

  .step {
    min-height: auto;
    border-right: 1px solid var(--ring);
    border-bottom: 0;
  }

  .step:last-child {
    border-bottom: 1px solid var(--ring);
  }

  .pricing-card {
    padding: 28px;
  }

  .cta-band {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .cta-band .button {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .page-hero {
    padding-block: 62px 42px;
  }

  .article-wrap {
    gap: 32px;
    padding-block: 42px 72px;
  }

  .prose h2 {
    font-size: 24px;
  }

  .data-table {
    display: block;
    overflow-x: auto;
    white-space: normal;
  }

  .status-panel {
    grid-template-columns: 1fr;
  }

  .status-item,
  .status-item:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--ring);
  }

  .status-item:last-child {
    border-bottom: 0;
  }

  .not-found-card {
    padding: 32px 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #fff;
    color: #111;
  }

  .site-header,
  .site-footer,
  .toc,
  .button {
    display: none;
  }

  .page-hero,
  .section {
    border-color: #ddd;
  }

  .page-hero h1,
  .prose h2,
  .prose h3,
  .prose strong {
    color: #111;
  }

  .page-lead,
  .prose,
  .tag {
    color: #222;
  }

  .article-wrap {
    display: block;
    padding-top: 24px;
  }

  .card,
  .pricing-card,
  .contact-card,
  .summary-box,
  .status-panel {
    background: #fff;
    box-shadow: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Remorvi 2.0 — payment page.  Routes: /pay/ and /en/pay/ only.
   Requires <html class="rv2"> on those two routes.

   Every colour below is a token quoted from
   design/design-system/tokens.css.  Ratios are computed from the two hex
   values named in the comment.  AA thresholds: 4.5:1 normal text,
   3:1 large text (>=18.66px bold) and non-text (WCAG 1.4.11).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens, verbatim from design-system/tokens.css ─────────────────── */
html.rv2 {
  /* surfaces  (tokens.css:12-17) */
  --rv-bg: #fdfdff;
  --rv-surface: #ffffff;
  --rv-bg-alt: #fbfaff;
  --rv-bg-soft: #faf8ff;
  --rv-tint: #f7f4fd;
  --rv-tint-accent: #f3effc;

  /* borders  (tokens.css:20-25) */
  --rv-border-hairline: #efeaf8;
  --rv-border-row: #f0ebfa;
  --rv-border: #e6def6;
  --rv-border-chip: #ddd3f5;
  --rv-border-strong: #d5c9f0;

  /* text  (tokens.css:28-31) */
  --rv-ink: #14101d;
  --rv-body: #3d3552;
  --rv-secondary: #5c5470;
  --rv-muted: #8d81ad;

  /* dark point-inserts  (tokens.css:34-48) */
  --rv-dark-footer: #0d0b14;
  --rv-dark: #120e1c;
  --rv-dark-raise: #1c1329;
  --rv-dark-border: #2b2145;
  --rv-dark-border-strong: #3f2d6b;
  --rv-dark-ink: #f2edfa;
  --rv-dark-body: #d9d2e9;
  --rv-dark-accent: #c4b5fd;
  --rv-dark-secondary: #b7a8d9;

  /* accent + CTA  (tokens.css:51-56) */
  --rv-accent: #6d4de2;
  --rv-accent-hover: #7837df;
  --rv-cta: #0088cc;

  /* status  (tokens.css:60-70) */
  --rv-ok: #3ce195;
  --rv-ok-bg: #effcf5;
  --rv-ok-border: #b7ecd2;
  --rv-warn: #fbbf24;
  --rv-danger: #f87171;
  --rv-danger-text: #dc2626;

  /* pixel decor  (tokens.css:95-96) */
  --rv-px-decor: #e9e2f8;
  --rv-px-decor-2: #f0ebfa;

  /* type  (tokens.css:113-115) — faces are already self-hosted in site.css */
  --rv-font: "Manrope", system-ui, sans-serif;
  --rv-font-mono: "JetBrains Mono", monospace;
  --rv-font-pixel: "Press Start 2P", monospace;

  /* radii  (tokens.css:118-127) */
  --rv-r-chip: 9px;
  --rv-r-pill-s: 10px;
  --rv-r-btn: 12px;
  --rv-r-input: 14px;
  --rv-r-card-s: 16px;
  --rv-r-card-l: 20px;
  --rv-r-hero: 24px;
  --rv-r-pill: 99px;

  /* shadows  (tokens.css:130-136) — neutral, downward, no glow */
  --rv-shadow-card: 0 6px 24px rgba(20, 16, 29, 0.05);
  --rv-btn-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* motion  (tokens.css:139-145) */
  --rv-ease-out: ease-out;
  --rv-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --rv-t-tap: 120ms;
  --rv-t-ui: 150ms;
  --rv-t-hover: 200ms;

  /* layout  (tokens.css:148-152) */
  --rv-header-h: 76px;
  --rv-content: 1180px;
  --rv-article: 660px;
}

/* keyframes copied verbatim from tokens/motion.css:4,6 */
@keyframes rvFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rvPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── 2 · Route shell: recolour the shared chrome, light for this route only ─ */
html.rv2 {
  color-scheme: light;
  scroll-padding-top: var(--rv-header-h);
}
html.rv2 body {
  background: var(--rv-bg);                      /* #fdfdff */
  color: var(--rv-ink);                          /* #14101d on #fdfdff = 18.43:1 */
  font-family: var(--rv-font);
  font-size: 15.5px;
  line-height: 1.6;
}
/* site.css:157 paints a 12px dark viewport frame. It belongs to 1.x. */
html.rv2 body::before { display: none; }

html.rv2 .site-header {
  background: rgba(253, 253, 255, 0.94);         /* readme.md:50 */
  border-bottom: 1px solid var(--rv-border-hairline);   /* #efeaf8 on #fdfdff = 1.17:1, seam only */
}
html.rv2 .header-inner { min-height: var(--rv-header-h); }
html.rv2 .brand {
  color: var(--rv-ink);                          /* #14101d on #fdfdff = 18.43:1 */
  font-family: var(--rv-font);
  font-weight: 800;
  letter-spacing: -0.022em;
}
html.rv2 .site-nav a {
  color: var(--rv-secondary);                    /* #5c5470 on #fdfdff = 6.99:1  ✓ AA */
  font-family: var(--rv-font);
  font-weight: 600;
  transition: color var(--rv-t-ui) var(--rv-ease-out);
}
html.rv2 .site-nav a[aria-current="page"] { color: var(--rv-ink); }   /* 18.43:1 */
html.rv2 .lang-link {
  border: 1px solid var(--rv-border);            /* #e6def6 on #fdfdff = 1.28:1, decorative */
  border-radius: var(--rv-r-pill-s);
  color: var(--rv-secondary);                    /* 6.99:1 ✓ */
  font-family: var(--rv-font-mono);
}
/* The header CTA is the one 1.x element that survives into the light page: a
   hard 3px shadow and a 2px radius on a white ground reads as a paste-in from
   the old site. Same Telegram blue, 2.0 geometry. */
html.rv2 .button.header-cta {
  background: var(--rv-cta);                     /* #0088cc */
  color: #ffffff;                                /* 3.89:1 - AA large only; Paddle's own button is the same blue */
  border: none;
  border-radius: var(--rv-r-btn);                /* 12px */
  box-shadow: var(--rv-shadow-chip);             /* 0 6px 18px rgba(20,16,29,.14) */
  font-family: var(--rv-font);
  font-weight: 700;
  letter-spacing: -0.01em;
  transform: none;
  transition: background var(--rv-t-ui) var(--rv-ease-out), transform var(--rv-t-tap) var(--rv-ease-out);
}
html.rv2 .button.header-cta:hover { background: var(--rv-cta-hover); transform: none; }
html.rv2 .button.header-cta:active { transform: scale(0.97); }

html.rv2 .skip-link {
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-r-btn);
  background: var(--rv-surface);
  color: var(--rv-ink);                          /* #14101d on #ffffff = 18.72:1 */
}
/* The footer keeps the kit's dark ground and is the stitch to the rest of
   the site, whose --bg is the same #0d0b14. Only its own surface moves. */
html.rv2 .site-footer {
  background: var(--rv-dark-footer);             /* #0d0b14 */
  border-top: 1px solid var(--rv-dark-border);   /* #2b2145 */
}
html.rv2 .footer-title { color: var(--rv-dark-ink); }        /* #f2edfa on #0d0b14 = 16.99:1 */
html.rv2 .footer-links a { color: var(--rv-dark-secondary); } /* #b7a8d9 on #0d0b14 = 8.94:1 ✓ */
html.rv2 .footer-intro,
html.rv2 .footer-bottom { color: var(--rv-muted); }           /* #8d81ad on #0d0b14 = 5.47:1 ✓ */

@media (hover: hover) and (pointer: fine) {
  html.rv2 .site-nav a:hover { color: var(--rv-ink); }
  html.rv2 .footer-links a:hover { color: var(--rv-dark-ink); }
}

/* ── 3 · Kit component classes actually used here (verbatim) ───────────── */

/* tokens/components.css:5-13,18-21 */
html.rv2 .rv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  border: none;
  border-radius: var(--rv-r-btn);
  cursor: pointer;
  font-family: var(--rv-font);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--rv-t-ui) var(--rv-ease-out),
    color var(--rv-t-ui) var(--rv-ease-out),
    border-color var(--rv-t-ui) var(--rv-ease-out),
    transform var(--rv-t-tap) var(--rv-ease-out);
}
html.rv2 .rv-btn:active { transform: scale(0.97); }
html.rv2 .rv-btn--blue {
  background: var(--rv-cta);                     /* #0088cc */
  color: #ffffff;                                /* #ffffff on #0088cc = 3.89:1 — see .pay-btn--primary */
  box-shadow: var(--rv-btn-inset);
}
html.rv2 a.rv-btn--blue,
html.rv2 a.rv-btn--blue:hover { color: #ffffff; }
html.rv2 .rv-btn--blue:active { transform: translateY(0) scale(0.985); }
html.rv2 .rv-btn--outline {
  background: transparent;
  border: 1.5px solid var(--rv-border);          /* #e6def6 on #ffffff = 1.30:1, decorative */
  color: var(--rv-ink);                          /* #14101d on #ffffff = 18.72:1 ✓ */
  transition:
    background 0.45s ease, color 0.45s ease, border-color 0.45s ease,
    transform var(--rv-t-tap) var(--rv-ease-out);
}
html.rv2 a.rv-btn--outline { color: var(--rv-ink); }
html.rv2 .rv-btn--outline:active { transform: scale(0.98); }

/* tokens/pixel.css:7-24 — kicker mechanics */
html.rv2 .rv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--rv-font-pixel);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--rv-accent);                       /* #6d4de2 on #fdfdff = 5.43:1 ✓ */
}
html.rv2 .rv-kicker--hero { gap: 11px; font-size: 12px; }
html.rv2 .rv-pxpair {
  position: relative;
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
}
html.rv2 .rv-kicker--hero .rv-pxpair { width: 11px; height: 11px; }
html.rv2 .rv-pxpair::before,
html.rv2 .rv-pxpair::after { content: ""; position: absolute; }
html.rv2 .rv-pxpair::before { width: 6px; height: 6px; background: var(--rv-accent); }
html.rv2 .rv-pxpair::after  { width: 4px; height: 4px; background: var(--rv-dark-accent); }
html.rv2 .rv-kicker--hero .rv-pxpair::before { width: 7px; height: 7px; }
/* orientation b / b-m — Тарифы uses a / a-m, adjacent surfaces must differ */
html.rv2 .rv-pxpair--b::before   { left: 0; top: 0; }
html.rv2 .rv-pxpair--b::after    { right: 0; bottom: 0; }
html.rv2 .rv-pxpair--b-m::before { right: 0; top: 0; }
html.rv2 .rv-pxpair--b-m::after  { left: 0; bottom: 0; }

/* tokens/pixel.css:27-28,34 */
html.rv2 .rv-decor {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--rv-px-decor);                /* #e9e2f8 on #fdfdff = 1.22:1, deliberately quieter */
  pointer-events: none;
}
html.rv2 .rv-decor--s { width: 5px; height: 5px; background: var(--rv-px-decor-2); }
html.rv2 .rv-pxbadge--tint {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--rv-border-chip);       /* #ddd3f5 */
  border-radius: var(--rv-r-pill);
  background: var(--rv-tint-accent);             /* #f3effc */
  color: var(--rv-accent);                       /* #6d4de2 on #f3effc = 4.87:1 ✓ AA */
  font-family: var(--rv-font-pixel);
  font-size: 6.5px;
  white-space: nowrap;
}

/* ── 4 · Page shell ────────────────────────────────────────────────────── */
.pay-page { display: block; }

.pay-wrap {
  width: min(100% - 48px, var(--rv-article));    /* 660px, 24px gutter */
  margin-inline: auto;
}

.pay-hero {
  position: relative;
  overflow: hidden;                              /* clips the decor squares */
  padding: 56px 0 26px;                          /* Тарифы:68 rhythm */
}
.pay-h1 {
  margin: 18px 0 0;
  max-width: 18ch;
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--rv-ink);                          /* #14101d on #fdfdff = 18.43:1 ✓ */
  text-wrap: balance;
}
.pay-lead {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rv-secondary);                    /* #5c5470 on #fdfdff = 6.99:1 ✓ AA */
  text-wrap: pretty;
}

.pay-section { padding-bottom: 72px; }           /* readme.md:50 «секции py 72» */

/* ── 5 · The shell (checker idiom: white plane + dark rail, one container) ─ */
.pay-shell {
  overflow: hidden;                              /* clips the iframe to r24 */
  border: 1px solid var(--rv-border);            /* #e6def6 on #ffffff = 1.30:1 */
  border-radius: var(--rv-r-hero);               /* 24px */
  background: var(--rv-surface);                 /* #ffffff */
  box-shadow: var(--rv-shadow-card);             /* 0 6px 24px rgba(20,16,29,.05) */
}
/* The shell is not clickable, so it is static: no hover lift, no shadow swap.
   CLAUDE.md:20 — «Некликабельные карточки статичны». */

/* ── 6 · Summary card (white plane) ────────────────────────────────────── */
.pay-head { padding: 22px 20px 18px; }

.pay-plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pay-plan {
  margin: 0;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.016em;
  color: var(--rv-ink);                          /* #14101d on #ffffff = 18.72:1 ✓ */
}
/* Press Start 2P at 6.5px is decoration, never load-bearing. The fact that this
   renews is carried in real type by the "Then, unless you cancel first" row. */

.pay-due-label {
  margin: 16px 0 0;
  font-family: var(--rv-font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--rv-secondary);                    /* #5c5470 on #ffffff = 7.10:1 ✓ AA */
}
/* Кабинет:150 sets this label in --rv-muted #8d81ad = 3.57:1, which fails AA.
   On a checkout it is essential text, so it moves up one level. */

.pay-due {
  margin: 6px 0 0;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rv-ink);                          /* #14101d on #ffffff = 18.72:1 ✓ */
  font-variant-numeric: tabular-nums;            /* the total is redrawn on checkout.updated */
}

/* ── 7 · Trial badge ───────────────────────────────────────────────────── */
.pay-trial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 6px 11px;
  border: 1px solid var(--rv-ok-border);         /* #b7ecd2 on #ffffff = 1.32:1, decorative */
  border-radius: var(--rv-r-chip);               /* 9px */
  background: var(--rv-ok-bg);                   /* #effcf5 */
  font-size: 12px;
  font-weight: 700;
  color: var(--rv-ink);                          /* #14101d on #effcf5 = 17.75:1 ✓ */
}
/* The kit's own chip sets this text in --rv-ok-text #0b8a55 = 4.17:1 on #effcf5,
   below AA. The colour still carries meaning through the square, per
   guidelines/colors-verdict.html: «всегда квадрат 3px + подпись». */
.pay-trial__mark {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--rv-ok);                      /* #3ce195 on #effcf5 — marker, never alone */
}
.pay-trial[hidden] { display: none; }            /* pay.js toggles .hidden */

/* ── 8 · Price rows ────────────────────────────────────────────────────── */
.pay-ledger {
  margin: 18px 0 0;
  border-top: 1px solid var(--rv-border-row);    /* #f0ebfa on #ffffff = 1.17:1 */
}
.pay-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rv-border-row);
}
.pay-row:last-child { padding-bottom: 0; border-bottom: none; }
.pay-row__label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rv-secondary);                    /* #5c5470 on #ffffff = 7.10:1 ✓ AA */
}
.pay-row__value {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  text-align: right;
  color: var(--rv-ink);                          /* #14101d on #ffffff = 18.72:1 ✓ */
  font-variant-numeric: tabular-nums;
}
.pay-row__value--quiet {
  font-size: 13px;
  font-weight: 600;
  color: var(--rv-secondary);                    /* 7.10:1 ✓ */
}
/* The kit's table row weights the label (13.5/600 ink) over the value
   (13px #5c5470). On a checkout the amount is the decision, so the weights
   are swapped. Both levels still clear AA. */
.pay-row--total { border-top: 1px solid var(--rv-border-row); }

/* ── 9 · Frame container ───────────────────────────────────────────────── */
.pay-frame {
  position: relative;
  margin: 0 20px 18px;
  min-height: 480px;                             /* == frameInitialHeight: 480. Change both or neither. */
  overflow: hidden;                              /* an iframe is a rectangle; without this r16 does nothing */
  border: 1px solid var(--rv-border);            /* #e6def6 on #ffffff = 1.30:1 — Paddle's light frame
                                                    has no outer edge of its own; this supplies one */
  border-radius: var(--rv-r-card-s);             /* 16px — second nesting level, 24 → 16 */
  background: var(--rv-surface);                 /* #ffffff, so the seam to Paddle's white is 1.00:1 */
}
/* Never cap the height: Paddle requires "the complete checkout frame with
   footer" to be visible, and the frame resizes itself per step. */
.pay-frame iframe { display: block; width: 100%; border: none; }

.pay-frame__wait {
  position: absolute;
  inset: 0;
  background: var(--rv-bg-soft);                 /* #faf8ff — the kit's ground for inert areas */
}
.pay-frame[data-ready="true"] .pay-frame__wait { display: none; }

/* ── 10 · Status line ──────────────────────────────────────────────────── */
.pay-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 20px 18px;
  padding: 11px 14px;
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-r-btn);                /* 12px */
  background: var(--rv-bg-soft);                 /* #faf8ff */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--rv-body);                         /* #3d3552 on #faf8ff = 10.90:1 ✓ AA */
}
/* Square + label, never colour alone. The square is a pseudo-element because
   pay.js writes textContent and would wipe a child node. */
.pay-status::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--rv-warn);                    /* #fbbf24 — marker; the sentence is the label */
}
/* pay.js sets textContent = "" on checkout.loaded. :empty ignores pseudo-elements.
   It collapses rather than display:none, because this is the aria-live region that
   has to announce a card decline: a screen reader will not read text that appears
   in an element which was display:none a moment earlier. */
.pay-status:empty {
  height: 0;
  margin-block: 0;
  padding-block: 0;
  border-width: 0;
  overflow: hidden;
}
.pay-status:empty::before { display: none; }

/* ── 11 · Error state ──────────────────────────────────────────────────── */
/* pay.js unhides [data-checkout-fallback] on checkout.error and when the page
   is opened without ?_ptxn. Both mean the frame will never paint, so it
   collapses instead of reserving 480px of nothing. */
/* The :has() variant that keyed off the visible fallback buttons is gone: those
   buttons also show while simply WAITING for a transaction link, and painting
   that state red says something is broken when nothing is. State is now a
   single attribute set by pay.js, and only these three states have no frame to
   show: idle (no link yet), error (it will never paint) and done (it is over).
   Plain "waiting" keeps the 480px reserved so the page does not jump when the
   frame lands. */
.pay-shell[data-pay-state="idle"] .pay-frame,
.pay-shell[data-pay-state="error"] .pay-frame,
.pay-shell[data-pay-state="done"] .pay-frame { display: none; }
.pay-shell[data-pay-state="error"] .pay-status { border-color: var(--rv-danger); color: var(--rv-ink); }
.pay-shell[data-pay-state="error"] .pay-status::before { background: var(--rv-danger); animation: none; }

/* Paid. The frame shows Paddle's own confirmation and then goes; without this
   the summary above it would keep reading "Due today" as if nothing happened. */
.pay-shell[data-pay-state="done"] .pay-status {
  border-color: var(--rv-ok-border);
  background: var(--rv-ok-bg);
  color: var(--rv-ink);
}
.pay-shell[data-pay-state="done"] .pay-status::before { background: var(--rv-ok); animation: none; }

/* A discount is money coming off, so it reads as a credit rather than a charge.
   The row is hidden until pay.js sees totals.discount above zero. */
.pay-row--discount[hidden] { display: none; }
.pay-row__value--credit { color: var(--rv-ok-text, #0b8a55); }

/* ── 12 · Buttons ──────────────────────────────────────────────────────── */
.pay-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 20px 20px;
}
.pay-fallback[hidden] { display: none; }

.pay-btn {
  min-height: 48px;                              /* readme.md:50 — «хиты ≥44px» */
  padding: 0 22px;
  font-size: 14.5px;
}
/* #ffffff on --rv-cta #0088cc is 3.89:1: it fails AA 4.5:1 for normal text but
   clears the 3:1 large-text threshold at >=18.66px bold. The blue fill is
   therefore used at large-text size only. The kit has no darker blue token. */
.pay-btn--primary { font-size: 19px; font-weight: 800; }

/* No .rv-cta shine on this page. The real submit button lives inside Paddle's
   frame and cannot take it; adding it here would create two primaries, and
   tokens/motion.css:17 restricts it to «главные CTA страницы». */

@media (hover: hover) and (pointer: fine) {
  /* components.css:19 sends the blue CTA hover to --rv-accent. Following the
     code rather than the prose guardrail: #ffffff on #6d4de2 = 5.51:1 ✓ AA,
     versus #ffffff on --rv-cta-hover #0b99e0 = 3.16:1, worse than at rest. */
  html.rv2 .rv-btn--blue:hover { background: var(--rv-accent); }
  /* components.css:21 floods the outline button with --rv-cta and a white
     label = 3.89:1 at 14.5px, below AA. Same fix, same reason. */
  html.rv2 .rv-btn--outline:hover {
    background: var(--rv-accent);                /* #ffffff on #6d4de2 = 5.51:1 ✓ */
    border-color: var(--rv-accent);
    color: #ffffff;
  }
}

/* ── 13 · Dark rail (trust + legal) ────────────────────────────────────── */
.pay-rail {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 20px;
  background: var(--rv-dark);                    /* #120e1c — component, not a section */
}
/* The 2px top accent rail is the one sanctioned coloured bar (CLAUDE.md:13
   allows top-only; left/right >1px is forbidden). */
.pay-rail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--rv-accent);                  /* #6d4de2 */
  opacity: 0.55;
}
.pay-trust {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--rv-dark-body);                    /* #d9d2e9 on #120e1c = 12.98:1 ✓ AA */
}
.pay-trust li { display: flex; gap: 9px; }
.pay-trust__mark {
  flex: none;
  width: 13px;
  font-weight: 800;
  color: var(--rv-dark-accent);                  /* #c4b5fd on #120e1c = 10.29:1 ✓ */
}
.pay-legal {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--rv-dark-border);  /* #2b2145 — kit's footer divider */
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rv-dark-secondary);               /* #b7a8d9 on #120e1c = 8.70:1 ✓ AA */
  text-wrap: pretty;
}
.pay-legal a {
  color: var(--rv-dark-accent);                  /* #c4b5fd on #120e1c = 10.29:1 ✓ */
  text-decoration: underline;                    /* base.css:10 removes it globally; a legal link
                                                    at 10.29:1 next to 8.70:1 body would otherwise
                                                    lean on hue alone */
  text-underline-offset: 0.18em;
}
@media (hover: hover) and (pointer: fine) {
  .pay-legal a:hover { color: var(--rv-dark-ink); }   /* #f2edfa on #120e1c = 16.53:1 */
}

/* ── 14 · Focus states ─────────────────────────────────────────────────── */
/* base.css:12 is the whole focus story in the kit. Two page-local corrections. */
html.rv2 :focus-visible {
  outline: 2px solid var(--rv-cta);              /* #0088cc on #fdfdff = 3.83:1 ✓ 1.4.11
                                                    #0088cc on #ffffff = 3.89:1 ✓ */
  outline-offset: 2px;
}
/* A #0088cc ring on a #0088cc button is 1:1 and vanishes. */
html.rv2 .rv-btn--blue:focus-visible {
  outline-color: var(--rv-accent);               /* #6d4de2 on #ffffff = 5.51:1 ✓ */
}
/* Inside the dark rail the blue ring reads at 4.88:1, which passes, but it is a
   foreign colour there. The rail's own accent is stronger and native. */
.pay-rail :focus-visible {
  outline-color: var(--rv-dark-accent);          /* #c4b5fd on #120e1c = 10.29:1 ✓ */
}
/* Paddle draws its own focus ring inside the frame; theme and dashboard
   branding do not expose a focus colour, so a visible seam at the tab boundary
   is unavoidable. Documented, not fixable from here. */

/* ── 15 · Decor ────────────────────────────────────────────────────────── */
/* Two pairs, hero band only. Never over the frame — an iframe paints over
   anything beneath it, and the shell has overflow:hidden anyway. */
.pay-decor-1 { top: 96px;  left: 6%; }
.pay-decor-2 { top: 110px; left: calc(6% + 13px); }
.pay-decor-3 { top: 196px; right: 5%; }

/* ── 16 · Mobile — the kit has one breakpoint, --rv-bp-mobile: 640px ────── */
@media (max-width: 640px) {
  .pay-wrap { width: min(100% - 32px, var(--rv-article)); }
  .pay-hero { padding: 34px 0 20px; }
  .pay-head { padding: 18px 14px 16px; }
  .pay-due { font-size: 30px; }
  .pay-frame,
  .pay-status,
  .pay-fallback { margin-inline: 14px; }
  .pay-rail { padding: 16px 14px 18px; }
  .pay-fallback { flex-direction: column; }
  .pay-btn { width: 100%; }
  .rv-decor { display: none; }                   /* the column now fills the width */
}
/* Paddle's frame declares a min-width floor (286px with checkout padding off,
   312px with it on). Below 400px the shell's horizontal padding is the thing
   in the way, so the frame takes the shell's full inner width.
   At 360px: 360 − 32 gutter − 2 border = 326px ✓ */
@media (max-width: 400px) {
  .pay-frame {
    margin-inline: 0;
    border-inline: none;
    border-radius: 0;
  }
}
/* At the 320px floor (site.css sets body{min-width:320px}) even that is short.
   The shell goes full-bleed: 320px ✓ against both floors. */
@media (max-width: 359px) {
  .pay-wrap { width: 100%; }
  .pay-shell { border-inline: none; border-radius: 0; }
  .pay-status, .pay-fallback { margin-inline: 14px; }
}

/* ── 17 · Motion ───────────────────────────────────────────────────────── */
/* Composite-only, gated. Reveal-safe: these animations start immediately, so
   nothing depends on JS or a scroll timeline to become visible
   (CLAUDE.md:24 — «контент видим по умолчанию»). */
@media (prefers-reduced-motion: no-preference) {
  .pay-shell { animation: rvFadeUp 300ms var(--rv-ease-out) both; }
  .pay-status::before { animation: rvPulse 1.2s ease-in-out infinite; }
}
/* The ledger deliberately does NOT animate on checkout.updated. A total that
   re-animates while the buyer types a tax ID is noise, and the canon forbids
   bounce and scale-in on UI (CLAUDE.md:22). */

/* ── 18 · Success (optional — only if successUrl stays unset, see §6) ───── */
.pay-done { padding: 8px 0 4px; text-align: center; }
.pay-done__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--rv-ok);              /* #3ce195 */
  border-radius: 50%;
  background: var(--rv-ok-bg);                   /* #effcf5 */
  font-size: 22px;
  font-weight: 800;
  color: var(--rv-ink);                          /* #14101d on #effcf5 = 17.75:1 ✓
                                                    Тарифы:169 uses --rv-ok-text-alt #0d9f62
                                                    = 3.24:1, which fails */
}
.pay-done__title {
  margin: 14px 0 0;
  font-weight: 800;
  font-size: 20px;
  color: var(--rv-ink);                          /* 18.72:1 ✓ */
}
.pay-done__body {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--rv-secondary);                    /* #5c5470 on #ffffff = 7.10:1 ✓ */
}