/* ═══════════════════════════════════════════════════════════════
   ALLWALLET · сайт — лендинг и документы
   ═══════════════════════════════════════════════════════════════
   Тот же материал, что у приложения: тушь банкнотной печати, монета,
   гильош и микротекст. Лендинг — тёмный, как приложение по умолчанию;
   документы — на «лавандовой бумаге», второй теме приложения.

   1. Шрифты        5. Купюры            9.  Цены
   2. Токены        6. Обещания          10. Вопросы
   3. Основа        7. Возможности       11. Документы
   4. Шапка, hero   8. Шаги, приватность 12. Подвал, движение
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Шрифты (локальные, как в приложении) ───────────────────── */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/Onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/Onest-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/Onest-latin.woff2) format('woff2'); 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: 'Prata'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Prata-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Prata-latin.woff2) format('woff2'); 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'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/JetBrainsMono-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/JetBrainsMono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/JetBrainsMono-latin.woff2) format('woff2'); 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; }

/* ── 2. Токены ──────────────────────────────────────────────────── */

:root {
  --bg:      #0E1714;   /* тушь с зеленцой — фон тёмной темы приложения */
  --s1:      #15211D;
  --s2:      #1C2B26;
  --line:    #2A3B35;
  --text:    #E8EFEA;
  --muted:   #8EA39A;
  --faint:   #5E7169;
  --coin:    #F2994A;   /* монета в центре знака */
  --on-coin: #22130A;
  --mint:    #63D297;
  --note-a:  #1F3530;
  --note-b:  #132420;
  --gl:      rgba(242, 153, 74, .5);    /* гильош на купюре */
  --gl-dim:  rgba(232, 239, 234, .16);  /* гильош на «личных» купюрах */

  --lav:       #EFEBFA; /* лавандовая тема приложения */
  --lav-s:     #F8F6FE;
  --lav-card:  #FFFFFF;
  --lav-line:  #DCD4F1;
  --lav-text:  #221B38;
  --lav-muted: #5F587D;
  --violet:    #6A4BD0;

  --f-display: 'Prata', Georgia, serif;
  --f-body:    'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1160px;
  --gut:  clamp(16px, 4vw, 32px);
  --r:    22px;
  color-scheme: dark;
}

/* ── 3. Основа ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid var(--coin); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--coin); color: var(--on-coin); padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { left: 8px; }

/*  Микротекст — как защитная печать на купюре: моноширинный, разрядка, капс */
.micro { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.display { font-family: var(--f-display); letter-spacing: -.02em; line-height: 1.04; }
.lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.55; color: var(--muted); }
.lead b { color: var(--text); font-weight: 600; }
.h2 { font: 400 clamp(32px, 4.6vw, 54px)/1.06 var(--f-display); letter-spacing: -.02em; }
.sec { padding: clamp(72px, 10vw, 128px) 0; }
.sec-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head .micro { display: block; margin-bottom: 16px; color: var(--coin); }
.sec-head .lead { margin-top: 18px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 15px; font: 600 16px/1 var(--f-body); text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn.coin { background: var(--coin); color: var(--on-coin); }
.btn.coin:hover { background: #F5A862; }
.btn.ghost { border-color: var(--line); color: var(--text); background: rgba(232, 239, 234, .03); }
.btn.ghost:hover { border-color: var(--muted); }
.btn.small { min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.btn svg { width: 18px; height: 18px; }

/* ── 4. Шапка и первый экран ───────────────────────────────────── */

.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand span { font: 750 21px/1 var(--f-body); letter-spacing: -.02em; }
.nav { display: flex; gap: 26px; }
.nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--text); }
.lang { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); text-decoration: none; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; }
.lang:hover { color: var(--text); border-color: var(--muted); }
@media (max-width: 860px) { .nav { display: none; } .top .wrap { gap: 12px; } }
@media (max-width: 380px) { .brand span { display: none; } }

.lang-hint { background: var(--s2); border-bottom: 1px solid var(--line); font-size: 15px; }
.lang-hint .wrap { display: flex; align-items: center; gap: 14px; min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
.lang-hint a { color: var(--coin); font-weight: 600; text-decoration: none; }
.lang-hint button { margin-left: auto; background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 6px; }

.hero { position: relative; padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.hero::before { content: ''; position: absolute; inset: -120px 0 auto; height: 760px; z-index: -1; pointer-events: none;
  background: radial-gradient(52% 46% at 74% 42%, rgba(242, 153, 74, .10), transparent 70%), radial-gradient(40% 40% at 10% 0%, rgba(99, 210, 151, .05), transparent 70%); }
/*  Заголовок — во всю ширину, под ним слева текст и кнопки, справа купюры */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 72px); row-gap: clamp(28px, 4vw, 44px); align-items: center; }
.hero .head { grid-column: 1 / -1; }
.hero h1 { font-size: clamp(44px, 6.6vw, 84px); }
.hero .micro { display: block; margin-bottom: 22px; color: var(--coin); }
.hero .lead { max-width: 30em; }
/*  Страницы сценариев (/couples…): заголовок длиннее, чем на главной, справа — телефон вместо купюр */
.hero.page h1 { font-size: clamp(38px, 5.2vw, 66px); }
.hero .shot { display: flex; justify-content: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cta-note { margin-top: 18px; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .bills { margin: 8px auto 0; } }
@media (max-width: 480px) { .cta .btn { width: 100%; } }

/* ── 5. Купюры ──────────────────────────────────────────────────
   Семейная купюра впереди, две личные — позади: общее на виду, у каждого своё.
   Размеры — в единицах контейнера (cqw): купюра масштабируется как картинка. */

.bills { position: relative; container-type: inline-size; aspect-ratio: 640 / 470; width: 100%; max-width: 640px; margin-left: auto; }
.bill { position: absolute; overflow: hidden; isolation: isolate; aspect-ratio: 640 / 360; border-radius: 4.2cqw; color: var(--text);
  background: radial-gradient(120% 90% at 78% 40%, rgba(242, 153, 74, .10), transparent 60%), linear-gradient(155deg, var(--note-a), var(--note-b));
  border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 2px 0 rgba(255, 255, 255, .03) inset; }
.bill .gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.bill .gl g { fill: none; stroke: var(--gl); stroke-width: .7; }
.bill .frame { position: absolute; inset: 1.4cqw; border: 1px solid var(--gl); border-radius: 3cqw; pointer-events: none; opacity: .7; }
.bill.front { left: 0; right: 0; bottom: 0; width: 100%; z-index: 3; padding: 4.4cqw 5cqw; }
.bill.back { width: 62%; z-index: 1; padding: 3.2cqw 3.6cqw; background: linear-gradient(155deg, #182A25, #0F1D19); }
.bill.back .gl g { stroke: var(--gl-dim); }
.bill.back .frame { border-color: var(--gl-dim); }
.bill.back.l { left: 2%; top: -1%; transform: rotate(-6deg); transform-origin: 70% 90%; }
.bill.back.r { right: 2%; top: 0; transform: rotate(6deg); transform-origin: 30% 90%; z-index: 2; }

.bill-top { display: flex; justify-content: space-between; gap: 3cqw; font: 500 1.9cqw/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.bill-sum { margin-top: 8.2cqw; font: 400 14cqw/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.bill-sum .dec { font-size: 6.2cqw; color: var(--muted); }
.bill-sum .cur { font-size: 7cqw; color: var(--coin); margin: 0 .9cqw; }
.bill-row { display: flex; gap: 2.6cqw; margin-top: 4cqw; font: 600 2.7cqw/1 var(--f-body); flex-wrap: wrap; }
.bill-row .inc { color: var(--mint); }
.bill-row .muted { font-weight: 400; color: var(--muted); }
.bill-serial { position: absolute; right: 5cqw; bottom: 4.6cqw; font: 500 2.3cqw/1 var(--f-mono); letter-spacing: .16em; color: var(--coin); }

/*  На личных купюрах всё в полтора раза мельче — они дальше */
.bill.back .bill-top { justify-content: flex-start; align-items: center; gap: 1.2cqw; font-size: 1.5cqw; }
.bill.back .bill-top svg { width: 1.9cqw; height: 1.9cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bill.back .who { display: flex; align-items: center; gap: 1.6cqw; margin-top: 2.2cqw; }
.bill.back .who i { width: 4cqw; height: 4cqw; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 2cqw/1 var(--f-body); font-style: normal; color: #1A120B; }
.bill.back .bill-sum { margin: 0; font-size: 5.2cqw; }
.bill.back .bill-sum .dec { font-size: 2.6cqw; }
.bill.back .bill-sum .cur { font-size: 2.8cqw; color: var(--muted); margin: 0 .5cqw; }

/*  Микропечать вдоль канта */
.bill .microprint { font: 500 6px/1 var(--f-mono); letter-spacing: 1.6px; fill: var(--gl); }
.bill.back .microprint { fill: var(--gl-dim); }

/* ── 6. Три обещания ───────────────────────────────────────────── */

.rule { height: 34px; color: var(--line); }
.rule svg { width: 100%; height: 34px; }
.rule path { fill: none; stroke: currentColor; stroke-width: 1; }

.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); padding-block: clamp(48px, 7vw, 80px); }
.promise { border-top: 1px solid var(--line); padding-top: 22px; }
.promise h3 { font: 400 clamp(28px, 3.2vw, 38px)/1.1 var(--f-display); margin: 14px 0 12px; letter-spacing: -.01em; }
.promise p { color: var(--muted); }
@media (max-width: 820px) { .promises { grid-template-columns: 1fr; } }

/* ── 7. Возможности ────────────────────────────────────────────── */

.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.feat + .feat { margin-top: clamp(72px, 9vw, 112px); }
.feat .txt { max-width: 500px; }
.feat .micro { color: var(--coin); }
.feat h3 { font: 400 clamp(30px, 3.8vw, 46px)/1.08 var(--f-display); letter-spacing: -.015em; margin: 16px 0 18px; }
.feat p { color: var(--muted); font-size: 18px; }
.feat p + p { margin-top: 12px; }
.feat .shot { display: flex; justify-content: center; }
.feat.flip .txt { order: 2; }
@media (max-width: 820px) { .feat { grid-template-columns: minmax(0, 1fr); } .feat.flip .txt { order: 0; } }

.phone { position: relative; margin: 0; width: min(318px, 78vw); padding: 9px; border-radius: 46px; background: #070C0A; border: 1px solid #22312C;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.phone img { width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 38px; }
.phone.lav { background: #FFFFFF; border-color: var(--lav-line); box-shadow: 0 40px 80px -30px rgba(52, 33, 120, .35); }
.duo { position: relative; display: flex; justify-content: center; }
.duo .phone { flex: none; width: min(270px, 46%); }
.duo .phone:first-child { transform: rotate(-4deg) translateX(9%); z-index: 1; }
.duo .phone:last-child { transform: rotate(4deg) translate(-9%, 6%); z-index: 2; }

.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(80px, 11vw, 140px); }
.mini { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.mini svg { width: 26px; height: 26px; color: var(--coin); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini h3 { font: 600 19px/1.3 var(--f-body); margin: 18px 0 8px; }
.mini p { color: var(--muted); font-size: 16px; }
a.mini { display: block; color: inherit; text-decoration: none; transition: border-color .2s; }
a.mini:hover { border-color: var(--coin); }
a.mini h3 { margin-top: 0; }
.sec-more { margin-top: 28px; }
.sec-more .more { color: var(--coin); font-weight: 600; text-decoration: none; }
.sec-more .more:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .minis { grid-template-columns: 1fr; } }

/*  Лавандовая полоса: раздел «под себя» сам в лавандовой теме приложения */
.band-lav { background: var(--lav); color: var(--lav-text); color-scheme: light; }
.band-lav .micro { color: var(--violet); }
.band-lav .feat p, .band-lav .lead { color: var(--lav-muted); }
.band-lav .swatches { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.band-lav .swatches i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--lav), 0 0 0 4px var(--lav-line); }

/* ── 8. Шаги и приватность ─────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); counter-reset: step; }
.step { position: relative; padding-top: 4px; }
.step b.n { display: block; font: 400 72px/1 var(--f-display); color: var(--coin); letter-spacing: -.02em; }
.step h3 { font: 600 21px/1.3 var(--f-body); margin: 18px 0 10px; }
.step p { color: var(--muted); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 36px; } }

.vault { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; padding: clamp(28px, 5vw, 64px);
  background: radial-gradient(60% 80% at 100% 0%, rgba(242, 153, 74, .07), transparent 60%), linear-gradient(160deg, var(--s1), #101A17); }
.vault .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 72px); margin-top: clamp(32px, 4vw, 48px); }
.vault .grid .micro { color: var(--coin); }
.vault .grid p { color: var(--muted); margin-top: 10px; }
.vault .more { display: inline-flex; margin-top: 40px; color: var(--coin); font-weight: 600; text-decoration: none; }
.vault .more:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .vault .grid { grid-template-columns: 1fr; } }

/* ── 9. Цены ───────────────────────────────────────────────────── */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { display: flex; flex-direction: column; border-radius: 28px; padding: clamp(26px, 4vw, 40px); background: var(--s1); border: 1px solid var(--line); }
.plan.free { border-color: color-mix(in srgb, var(--coin) 55%, var(--line)); }
.plan .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan .head h3 { font: 400 30px/1.1 var(--f-display); }
.badge { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-coin); background: var(--coin); padding: 7px 10px; border-radius: 8px; }
.price { margin-top: 22px; font: 400 clamp(46px, 6vw, 64px)/1 var(--f-display); letter-spacing: -.02em; }
.price small { font: 400 18px/1.4 var(--f-body); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.price-alt { margin-top: 10px; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.plan li { position: relative; padding-left: 30px; }
.plan li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--coin); border-bottom: 2px solid var(--coin); transform: rotate(-45deg); }
.plan.plus li::before { border-color: var(--muted); }
.plan .btn { margin-top: 34px; align-self: flex-start; }
.plan .fine { margin-top: auto; padding-top: 28px; color: var(--faint); font-size: 14px; }
.plans-note { margin-top: 22px; color: var(--muted); font-size: 15px; max-width: 720px; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }

/* ── 10. Вопросы ───────────────────────────────────────────────── */

.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 24px 0; font: 600 19px/1.35 var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 13px; height: 13px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 0 24px; color: var(--muted); max-width: 680px; }

.final { text-align: center; }
.final .mark { width: 104px; height: 104px; margin: 0 auto 30px; }
.final .h2 { max-width: 760px; margin: 0 auto; }
.final .cta { justify-content: center; }

/* ── 11. Документы — на лавандовой бумаге ──────────────────────── */

body.doc { background: var(--lav); color: var(--lav-text); color-scheme: light; }
body.doc .top { background: color-mix(in srgb, var(--lav) 86%, transparent); }
body.doc .top.scrolled { border-bottom-color: var(--lav-line); }
body.doc .nav a, body.doc .lang { color: var(--lav-muted); }
body.doc .lang { border-color: var(--lav-line); }
body.doc .nav a:hover, body.doc .lang:hover { color: var(--lav-text); }
body.doc .btn.coin { background: var(--violet); color: #fff; }
body.doc .btn.coin:hover { background: #5B3DBE; }
body.doc :focus-visible { outline-color: var(--violet); }

.paper { max-width: 760px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--gut) clamp(64px, 9vw, 112px); }
.paper .micro { color: var(--violet); }
.paper h1 { font: 400 clamp(34px, 6vw, 58px)/1.06 var(--f-display); letter-spacing: -.02em; margin: 14px 0 12px; hyphens: auto; overflow-wrap: break-word; }
.paper .ed { color: var(--lav-muted); font: 500 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.paper .intro { font-size: 19px; line-height: 1.6; margin-top: 26px; }
.toc { margin: 36px 0 8px; padding: 22px 26px; background: var(--lav-s); border: 1px solid var(--lav-line); border-radius: 20px; }
.toc ol { margin: 12px 0 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.toc li { break-inside: avoid; padding: 3px 0; }
.toc a { color: var(--lav-text); text-decoration: none; }
.toc a:hover { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .toc ol { columns: 1; } }
.paper h2 { font: 400 clamp(25px, 3.4vw, 30px)/1.2 var(--f-display); margin: 52px 0 14px; letter-spacing: -.01em; }
.paper h2 .no { color: var(--violet); margin-right: 10px; }
.paper h3 { font: 600 18px/1.4 var(--f-body); margin: 26px 0 8px; }
.paper p, .paper li { font-size: 17px; line-height: 1.7; }
.paper p + p { margin-top: 12px; }
.paper ul, .paper ol.list { padding-left: 22px; margin: 10px 0 0; }
.paper li + li { margin-top: 6px; }
.paper a { color: var(--violet); text-underline-offset: 3px; }
.paper .card { background: var(--lav-card); border: 1px solid var(--lav-line); border-radius: 18px; padding: 18px 22px; margin-top: 16px; }
.paper table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 16px; }
.paper th, .paper td { text-align: left; vertical-align: top; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--lav-line); }
.paper th { font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lav-muted); }
@media (max-width: 560px) { .paper table, .paper thead, .paper tbody, .paper tr, .paper td { display: block; } .paper thead { display: none; } .paper td { border: 0; padding: 2px 0; } .paper tr { border-bottom: 1px solid var(--lav-line); padding: 10px 0; } }

/*  Что ещё нужно заполнить перед публикацией — видно сразу */
.todo { background: rgba(242, 153, 74, .22); border-bottom: 2px dashed #C9671A; padding: 0 4px; border-radius: 4px; font-style: normal; }

/* ── 12. Подвал и движение ─────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding: 48px 0 40px; color: var(--muted); font-size: 15px; }
.foot .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot .brand { margin-bottom: 14px; }
.foot h4 { margin: 0 0 12px; font: 500 11.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; }
body.doc .foot { border-top-color: var(--lav-line); color: var(--lav-muted); }
body.doc .foot a:hover { color: var(--lav-text); }
body.doc .foot .legal { border-top-color: var(--lav-line); }
@media (max-width: 720px) { .foot .wrap { grid-template-columns: 1fr 1fr; } .foot .about { grid-column: 1 / -1; } }
@media (max-width: 440px) { .foot .wrap { grid-template-columns: minmax(0, 1fr); } }

/*  Гильош купюры «гравируется» при загрузке; личные купюры раздвигаются следом */
@media (prefers-reduced-motion: no-preference) {
  .bill.front .gl path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: engrave 2.6s cubic-bezier(.45, 0, .2, 1) forwards; }
  .bill.front .gl path:nth-child(2n) { animation-delay: .25s; }
  .bill.front .gl path:nth-child(3n) { animation-delay: .5s; }
  .bill.back.l { animation: fan-l .9s .35s cubic-bezier(.2, .8, .2, 1) both; }
  .bill.back.r { animation: fan-r .9s .45s cubic-bezier(.2, .8, .2, 1) both; }
  .bill.front .bill-sum, .bill.front .bill-row { animation: rise .7s .15s ease both; }
}
@keyframes engrave { to { stroke-dashoffset: 0; } }
@keyframes fan-l { from { transform: rotate(0) translate(10%, 22%); opacity: 0; } }
@keyframes fan-r { from { transform: rotate(0) translate(-10%, 22%); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }