/* Лендинг консультации с Анной Гусейновой, Кишинёв.
   Страница повторяет макет 720×1280. Единица --u это 1 пиксель макета:
   ширина экрана (не больше 480) делённая на 720. Все размеры в ней. */
:root {
  --u: calc(min(100vw, 480px) / 720);
  --cream: #F4ECE1;
  --cream-2: #FBF7F1;
  --line: #E3D2BA;
  --gold: #B8894A;
  --gold-dark: #8C6532;
  --ink: #1D1915;
  --ink-2: #4E443C;
  --bad: #A43D2B;
  --good: #2F7D4F;
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Montserrat", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #EFE4D5; color: var(--ink); font-family: var(--sans); }
/* Цифры в антикве ровные, как на макете: «$350», «3 дня». */
.t1, .t1-sub, .price, .pr2, .cta, .big, .who, .box .b, .st b, .kick { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.page { width: min(100vw, 480px); margin: 0 auto; position: relative; overflow: hidden; }
.view { display: none; position: relative; min-height: calc(1280 * var(--u)); }
.view.on { display: block; }
/* Экраны шагов на высоких телефонах тянутся до низа, шёлк фона не обрывается */
.view.silk { min-height: max(calc(1280 * var(--u)), 100vh); min-height: max(calc(1280 * var(--u)), 100svh); }
.u { position: absolute; }

/* Переключатель языка, поверх всех экранов */
.lang { position: absolute; z-index: 20; top: calc(22 * var(--u)); right: calc(22 * var(--u)); display: flex; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(251,247,241,.88); box-shadow: 0 2px 8px rgba(80,55,20,.12); }
.lang button { position: relative; min-width: 34px; height: 26px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .08em; color: var(--ink-2); }
.lang button::after { content: ""; position: absolute; inset: -6px -2px; }
.lang button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.lang button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Шёлковый фон экранов шагов и подтверждения */
.silk::before, .silk::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.silk::before { top: 0; height: calc(232 * var(--u)); background: url("assets/silk-top.jpg") center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.silk::after { bottom: 0; height: calc(440 * var(--u)); background: url("assets/silk-bottom.jpg") center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); }
.silk {
  background:
    radial-gradient(calc(420 * var(--u)) calc(500 * var(--u)) at 50% 45%, rgba(250,244,238,.95), rgba(250,244,238,0) 70%),
    linear-gradient(90deg, #EBD7C4 0%, #F8EBDD 50%, #E9D6C9 100%);
}
/* Золото надписей темнее и с переливом, как на макете. */
.big .g, .done .who, .box .b {
  background: linear-gradient(180deg, #BE925A 0%, #93693A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ====================== ЭКРАН ПРЕДЛОЖЕНИЯ ====================== */
#v-offer { background: linear-gradient(180deg, #FAF5EE 0%, #F4ECE1 60%, #EFE3D3 100%); height: calc(1390 * var(--u)); }
.herobox { left: 0; top: 0; width: calc(720 * var(--u)); height: calc(672 * var(--u)); overflow: hidden; }
.sky { left: calc(250 * var(--u)); top: 0; width: calc(470 * var(--u)); height: calc(690 * var(--u));
  background: url("assets/sky.jpg") 8% 22% / 135% auto no-repeat; }
.sky::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #FAF5EE 0%, rgba(250,245,238,.7) 14%, rgba(250,245,238,.12) 34%, rgba(250,245,238,0) 50%),
              linear-gradient(0deg, rgba(255,214,160,.22), rgba(255,226,190,.22)),
              linear-gradient(180deg, rgba(255,236,206,.18) 0%, rgba(250,245,238,0) 40%, rgba(245,236,224,0) 86%, #F5EDE2 100%); }
.anna { left: calc(262 * var(--u)); top: calc(196 * var(--u)); width: calc(478 * var(--u)); height: auto; }
.t1 { left: calc(45 * var(--u)); top: calc(80 * var(--u)); margin: 0; font-family: var(--serif); font-weight: 600; text-transform: uppercase;
  font-size: calc(40 * var(--u)); line-height: 1.06; letter-spacing: .01em; }
.t1 .g { color: var(--gold); }
.t1-sub { left: calc(45 * var(--u)); top: calc(222 * var(--u)); font-family: var(--sans); font-weight: 500; text-transform: uppercase;
  font-size: calc(16 * var(--u)); letter-spacing: .2em; }
.t1-lead { left: calc(45 * var(--u)); top: calc(272 * var(--u)); width: calc(270 * var(--u)); margin: 0; font-size: calc(16.5 * var(--u)); line-height: 1.32; color: var(--ink-2); }
.mk { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--ink); white-space: nowrap; }
.mk img { width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(11 * var(--u)); object-fit: cover; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(80,55,20,.18); }
.mk .arrow { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; border: 1px solid #B9A58C; display: grid; place-items: center; font-size: calc(18 * var(--u)); margin-left: calc(4 * var(--u)); }
.mk.two { white-space: normal; line-height: 1.15; }
.m1, .m3, .m5, .m7 { left: calc(45 * var(--u)); }
.m2, .m4, .m6, .m8 { left: calc(209 * var(--u)); }
.m1, .m2 { top: calc(388 * var(--u)); }
.m3, .m4 { top: calc(458 * var(--u)); }
.m5, .m6 { top: calc(528 * var(--u)); }
.m7, .m8 { top: calc(598 * var(--u)); }

.bens { left: calc(45 * var(--u)); top: calc(726 * var(--u)); width: calc(630 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); }
.ben { padding: 0 calc(10 * var(--u)) 0 calc(14 * var(--u)); border-left: 1px solid var(--line); font-size: calc(12.5 * var(--u)); font-weight: 500; text-transform: uppercase; line-height: 1.35; letter-spacing: .02em; }
.ben:first-child { border-left: 0; padding-left: 0; }
.ben svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); color: var(--gold); display: block; margin-bottom: calc(10 * var(--u)); }

.price { left: calc(45 * var(--u)); top: calc(862 * var(--u)); width: calc(630 * var(--u)); height: calc(112 * var(--u));
  border-radius: calc(20 * var(--u)); background: linear-gradient(135deg, #2C2521 0%, #191411 100%); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(30,22,16,.28); overflow: hidden; }
.price .lbl { position: absolute; left: calc(40 * var(--u)); top: calc(31 * var(--u)); color: #D7C8B4; font-size: calc(12.5 * var(--u)); letter-spacing: .1em; text-transform: uppercase; line-height: 1.38; }
.price s { position: absolute; left: calc(215 * var(--u)); top: calc(34 * var(--u)); font-family: var(--serif); font-size: calc(34 * var(--u)); color: #8E8170; text-decoration-thickness: calc(2 * var(--u)); }
.price .now { position: absolute; left: calc(350 * var(--u)); top: calc(2 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: calc(106 * var(--u)); line-height: 1;
  background: linear-gradient(180deg, #F3DCAE 0%, #C99B57 60%, #A97A3C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Блик по тёмной плашке цены, один проход раз в несколько секунд */
.price::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255,236,200,0) 0%, rgba(255,236,200,.13) 50%, rgba(255,236,200,0) 100%); }

.gift { left: calc(38 * var(--u)); top: calc(1018 * var(--u)); width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, #E2BE7E, #A47837 75%); box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(150,105,40,.3); }
.gift svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.pr1 { left: calc(100 * var(--u)); top: calc(1014 * var(--u)); color: var(--gold); font-size: calc(14.5 * var(--u)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pr2 { left: calc(100 * var(--u)); top: calc(1036 * var(--u)); margin: 0; font-family: var(--serif); font-weight: 600; text-transform: uppercase; font-size: calc(34 * var(--u)); line-height: 1.02; }
.pr3 { left: calc(100 * var(--u)); top: calc(1110 * var(--u)); font-size: calc(12.5 * var(--u)); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pol { width: calc(140 * var(--u)); height: calc(148 * var(--u)); object-fit: cover; border: calc(7 * var(--u)) solid #fff; border-bottom-width: calc(20 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(60,40,15,.25); }
.pol.a { left: calc(418 * var(--u)); top: calc(1002 * var(--u)); transform: rotate(-3deg); }
.pol.b { left: calc(552 * var(--u)); top: calc(980 * var(--u)); transform: rotate(6deg); }
.swoosh { left: calc(330 * var(--u)); top: calc(910 * var(--u)); width: calc(390 * var(--u)); height: calc(260 * var(--u)); }
.plane { left: calc(470 * var(--u)); top: calc(1070 * var(--u)); width: calc(215 * var(--u)); transform: rotate(-10deg); filter: brightness(1.18) contrast(1.05) drop-shadow(0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.18)); }

.cta { left: calc(45 * var(--u)); width: calc(630 * var(--u)); height: calc(86 * var(--u)); border: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--u));
  font-family: var(--serif); font-weight: 700; text-transform: uppercase; color: #1F1A16; font-size: calc(32 * var(--u)); letter-spacing: .03em;
  background: linear-gradient(180deg, #ECCF97 0%, #CFA25E 50%, #B4833F 100%);
  box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(150,105,40,.38), inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cta .ar { width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; border: 1.5px solid rgba(31,26,22,.35); display: grid; place-items: center; font-size: calc(26 * var(--u)); font-family: var(--sans); font-weight: 400; }
.cta:focus-visible, .chip:focus-visible, .copy:focus-visible, .fld input:focus-visible, .link:focus-visible { outline: 3px solid #1F1A16; outline-offset: 3px; }
.cta[disabled] { cursor: progress; }
#v-offer .cta { top: calc(1176 * var(--u)); }
.facts { left: calc(45 * var(--u)); top: calc(1300 * var(--u)); width: calc(630 * var(--u)); display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: calc(13.5 * var(--u)); color: var(--ink); }
.facts div { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(12 * var(--u)); border-left: 1px solid var(--line); line-height: 1.3; }
.facts div:first-child { border-left: 0; padding-left: calc(18 * var(--u)); }
.facts svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); color: var(--gold); flex: 0 0 auto; }

/* ====================== ЭКРАНЫ ШАГОВ ====================== */
.flow { position: relative; z-index: 1; padding: calc(30 * var(--u)) calc(45 * var(--u)) calc(60 * var(--u)); }
.steps { position: relative; height: calc(110 * var(--u)); }
.st { position: absolute; top: 0; width: calc(160 * var(--u)); margin-left: calc(-80 * var(--u)); text-align: center; font-size: calc(11.5 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.st b { display: grid; place-items: center; width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: 0 auto calc(10 * var(--u)); border-radius: 50%;
  font-family: var(--serif); font-size: calc(22 * var(--u)); font-weight: 600; color: var(--gold); border: 1.5px solid var(--gold); background: #FBF6EF; }
.st.on b { color: #fff; border-color: transparent; background: radial-gradient(circle at 35% 30%, #D9B273, #8F6430 80%); box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(140,100,50,.35); }
.st.s1 { left: calc(223 * var(--u)); } .st.s2 { left: calc(405 * var(--u)); }
.steps .bar { position: absolute; top: calc(23 * var(--u)); left: calc(248 * var(--u)); width: calc(134 * var(--u)); height: 1.5px; background: var(--gold); }
.head { text-align: center; }
.kick { display: inline-block; font-family: var(--serif); font-weight: 600; color: var(--gold); font-size: calc(22 * var(--u)); letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: calc(4 * var(--u)); border-bottom: 1px solid var(--gold); margin-top: calc(10 * var(--u)); }
.big { margin: calc(18 * var(--u)) 0 0; font-family: var(--serif); font-weight: 600; text-transform: uppercase; font-size: calc(74 * var(--u)); line-height: .88; }
.big .g { color: var(--gold); display: block; }
.sub2 { margin: calc(18 * var(--u)) 0 0; font-size: calc(14 * var(--u)); letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; color: var(--ink); }
.why { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: calc(40 * var(--u)); text-align: center; }
.why div { border-left: 1px solid var(--line); padding: 0 calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; line-height: 1.35; }
.why div:first-child { border-left: 0; }
.why i { display: grid; place-items: center; width: calc(58 * var(--u)); height: calc(58 * var(--u)); margin: 0 auto calc(12 * var(--u)); border-radius: 50%; background: #F0E1CB; color: var(--gold-dark); }
.why svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.fld { display: flex; align-items: center; gap: calc(18 * var(--u)); height: calc(95 * var(--u)); padding: 0 calc(28 * var(--u)); margin-top: calc(34 * var(--u));
  border: 1px solid var(--line); border-radius: calc(20 * var(--u)); background: rgba(255,252,247,.82); }
.fld + .fld { margin-top: calc(26 * var(--u)); }
.fld:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,137,74,.16); }
.fld svg.i { width: calc(32 * var(--u)); height: calc(32 * var(--u)); color: var(--gold-dark); flex: 0 0 auto; }
/* 16px не меньше: иначе iPhone приближает страницу при вводе */
.fld input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: max(16px, calc(20 * var(--u))); color: var(--ink); outline: none; }
.fld input::placeholder { color: #9A8D7E; }
.fld.bad { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(164,61,43,.12); }
.fld.ok .okmark { opacity: 1; transform: none; }
.okmark { width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: var(--good); flex: 0 0 auto; opacity: 0; transform: scale(.6); }
.cc { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: max(15px, calc(20 * var(--u))); flex: 0 0 auto; }
.cc select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.cc .flag { width: calc(36 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(3 * var(--u)); overflow: hidden; display: inline-block; }
.cc .flag svg { display: block; width: 100%; height: 100%; }
.cc .chev { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.vsep { width: 1px; height: calc(42 * var(--u)); background: var(--line); flex: 0 0 auto; }
.err { color: var(--bad); font-size: max(13px, calc(15 * var(--u))); line-height: 1.4; margin: calc(10 * var(--u)) 0 0; }
.err:empty { margin: 0; }
.msg { margin-top: calc(28 * var(--u)); border: 1px solid var(--line); border-radius: calc(20 * var(--u)); background: rgba(255,252,247,.82); padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u)); }
.msg .h { display: flex; align-items: center; gap: calc(18 * var(--u)); font-size: calc(18 * var(--u)); color: var(--ink-2); }
.msg .h svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); color: var(--gold-dark); }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26 * var(--u)); margin-top: calc(24 * var(--u)); }
.chip { height: calc(66 * var(--u)); border-radius: calc(12 * var(--u)); border: 1px solid #D9C6AA; background: transparent; cursor: pointer; font: inherit; font-size: calc(17 * var(--u)); color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); -webkit-tap-highlight-color: transparent; }
.chip svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.chip[aria-pressed="true"] { background: #161210; border-color: #161210; color: #fff; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.flow .cta { position: relative; left: 0; width: 100%; margin-top: calc(50 * var(--u)); }

.card { display: grid; grid-template-columns: calc(62 * var(--u)) 1fr; column-gap: calc(40 * var(--u)); margin-top: calc(22 * var(--u));
  border: 1px solid var(--line); border-radius: calc(22 * var(--u)); background: rgba(255,252,247,.82); padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u)); }
.card .ico { grid-row: span 9; width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #DDB879, #A07438 80%); box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(150,105,40,.3); }
.card .ico svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.card h3 { margin: calc(16 * var(--u)) 0 0; font-size: calc(19 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.card .meta { font-size: calc(16 * var(--u)); color: var(--ink-2); margin-top: calc(4 * var(--u)); }
.rw { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.rw:last-child { border-bottom: 0; }
.card .meta + .rw { margin-top: calc(10 * var(--u)); }
.rw .k { font-size: calc(14 * var(--u)); color: var(--ink-2); }
.rw .v { font-size: calc(22 * var(--u)); font-weight: 600; margin-top: calc(4 * var(--u)); letter-spacing: .01em; font-variant-numeric: tabular-nums; word-break: break-all; }
#r-card { white-space: nowrap; word-break: normal; }
#r-wallet { font-size: calc(18 * var(--u)); }
.copy { position: relative; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid #E2CFB3; background: #F2E4D0; display: grid; place-items: center; cursor: pointer; color: var(--ink); padding: 0; }
.copy::after { content: ""; position: absolute; inset: -10px; }
.copy svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.copy.done { background: var(--good); border-color: var(--good); color: #fff; }
.sample { display: inline-block; vertical-align: middle; margin-left: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--bad); color: #fff; font-size: calc(11 * var(--u)); letter-spacing: .08em; }
.ntc { display: grid; grid-template-columns: calc(52 * var(--u)) 1fr; column-gap: calc(28 * var(--u)); align-items: center; margin-top: calc(20 * var(--u));
  border: 1px solid var(--line); border-radius: calc(20 * var(--u)); background: rgba(255,252,247,.82); padding: calc(18 * var(--u)) calc(26 * var(--u)) calc(18 * var(--u)) calc(36 * var(--u)); }
.ntc .ex { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; border: 1.5px solid var(--gold-dark); color: var(--gold-dark); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: calc(28 * var(--u)); }
.ntc ul { margin: 0; padding: 0 0 0 calc(44 * var(--u)); border-left: 1px solid var(--line); font-size: calc(14 * var(--u)); line-height: 1.5; color: var(--ink); }
.ntc li { margin: calc(2 * var(--u)) 0; }
.cta.two { height: calc(96 * var(--u)); font-size: calc(27 * var(--u)); line-height: 1.12; gap: calc(24 * var(--u)); justify-content: flex-start; padding-left: calc(30 * var(--u)); position: relative; overflow: hidden; }
.cta.two .up { position: relative; z-index: 1; width: calc(66 * var(--u)); height: calc(66 * var(--u)); border-radius: 50%; border: 1.5px solid rgba(31,26,22,.3); display: grid; place-items: center; flex: 0 0 auto; }
.cta.two .up svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.cta.two span.t { position: relative; z-index: 1; flex: 1; text-align: center; padding-right: calc(40 * var(--u)); }
#v-oplata .flow { padding-top: calc(22 * var(--u)); }
#v-oplata .steps { height: calc(92 * var(--u)); }
#v-oplata .kick { margin-top: 0; }
#v-oplata .big { font-size: calc(68 * var(--u)); margin-top: calc(14 * var(--u)); }
#v-oplata .sub2 { margin-top: calc(18 * var(--u)); line-height: 1.45; }
#v-oplata .card { margin-top: calc(26 * var(--u)); padding-top: calc(10 * var(--u)); }
#v-oplata .card h3 { margin-top: calc(20 * var(--u)); }
#v-oplata .rw { padding: calc(13 * var(--u)) 0; }
#v-oplata .card .meta + .rw { margin-top: calc(10 * var(--u)); }
#v-oplata .rw .v { font-size: calc(21 * var(--u)); margin-top: calc(2 * var(--u)); }
#v-oplata #r-wallet { font-size: calc(17 * var(--u)); word-break: normal; white-space: nowrap; }
#v-oplata .ntc { margin-top: calc(26 * var(--u)); }
#v-oplata .cta.two { margin-top: calc(36 * var(--u)); }

/* Загрузка чека: полоса хода прямо в кнопке, под ней файл и что происходит */
.cta.two .fill { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, rgba(255,246,226,.55), rgba(255,240,210,.25)); }
.cta.two .spin { display: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; border: 2px solid rgba(31,26,22,.25); border-top-color: #1F1A16; }
.cta.two.busy .spin { display: block; }
.cta.two.busy .up svg { display: none; }
.cta.two.got { background: linear-gradient(180deg, #8FC7A0 0%, #4F9A69 55%, #2F7D4F 100%); color: #fff; }
.cta.two.got .up { border-color: rgba(255,255,255,.6); }
.upinfo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: calc(18 * var(--u)); padding: 0 calc(10 * var(--u));
  font-size: max(13px, calc(15 * var(--u))); color: var(--ink-2); }
.upinfo[hidden] { display: none; }
.upinfo .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upinfo .st2 { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* Под ошибкой и строкой файла светлая плашка: на шёлке фона золотые линии */
#v-oplata .err:not(:empty), #v-dannye .err:not(:empty) { padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: calc(14 * var(--u));
  background: rgba(255,250,244,.92); border: 1px solid rgba(164,61,43,.25); }
.upinfo { padding: calc(10 * var(--u)) calc(18 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255,252,247,.82); }
.again { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: calc(14 * var(--u)); }
.again[hidden] { display: none; }
.link { position: relative; background: none; border: 0; padding: 4px 2px; color: var(--ink); font: 600 max(13px, calc(16 * var(--u)))/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link::after { content: ""; position: absolute; inset: -8px -4px; }

/* ====================== ГОТОВО ====================== */
.done { text-align: center; padding-top: calc(250 * var(--u)); }
.chk { width: calc(128 * var(--u)); height: calc(128 * var(--u)); margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #F0D49C, #B8894A 70%); box-shadow: 0 0 0 calc(10 * var(--u)) rgba(216,179,119,.22), 0 0 calc(50 * var(--u)) rgba(216,179,119,.55); }
.chk svg { width: calc(62 * var(--u)); height: calc(62 * var(--u)); }
.done .big { margin-top: calc(42 * var(--u)); font-size: calc(70 * var(--u)); }
.done .big .g { font-size: calc(58 * var(--u)); margin-top: calc(6 * var(--u)); }
.done .on2 { margin-top: calc(22 * var(--u)); font-size: calc(19 * var(--u)); letter-spacing: .18em; text-transform: uppercase; }
.done .who { margin-top: calc(6 * var(--u)); font-family: var(--serif); font-weight: 600; color: var(--gold); text-transform: uppercase; font-size: calc(40 * var(--u)); }
.done hr { width: calc(230 * var(--u)); border: 0; border-top: 1px solid var(--gold); margin: calc(26 * var(--u)) auto calc(52 * var(--u)); }
.box { display: grid; grid-template-columns: calc(96 * var(--u)) 1fr; align-items: center; margin: 0 calc(25 * var(--u)); padding: calc(30 * var(--u)) calc(30 * var(--u));
  border: 1px solid #DCC6A6; border-radius: calc(20 * var(--u)); background: rgba(255,252,247,.55); text-align: left; }
.box svg { width: calc(62 * var(--u)); height: calc(62 * var(--u)); color: var(--gold-dark); }
.box .tx { border-left: 1px solid var(--line); padding-left: calc(28 * var(--u)); }
.box .a { font-size: calc(17 * var(--u)); letter-spacing: .1em; text-transform: uppercase; }
.box .b { margin-top: calc(6 * var(--u)); font-family: var(--serif); font-weight: 600; color: var(--gold); text-transform: uppercase; font-size: calc(40 * var(--u)); line-height: 1; white-space: nowrap; }

/* ====================== ДВИЖЕНИЕ ======================
   Лёгкое и только там, где помогает понять, что произошло.
   Кто просил систему двигаться меньше, получает страницу без него. */
@media (prefers-reduced-motion: no-preference) {
  /* backwards, а не both: конечное состояние не держим, иначе оно перебьёт
     нажатие кнопки и её собственные анимации */
  /* Класс enter ставит скрипт при переходе на экран, при первой загрузке его нет */
  .view.enter { animation: enter .45s cubic-bezier(.2,.7,.2,1) backwards; }
  .view.enter .flow > :not(.chk) { animation: enter .5s cubic-bezier(.2,.7,.2,1) backwards; }
  .view.enter .flow > :nth-child(2) { animation-delay: .05s; }
  .view.enter .flow > :nth-child(3) { animation-delay: .1s; }
  .view.enter .flow > :nth-child(n+4) { animation-delay: .15s; }
  @keyframes enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  .plane { animation: float 7s ease-in-out infinite; }
  @keyframes float { 50% { translate: 0 calc(-7 * var(--u)); } }
  .gift { animation: ring 3.6s ease-out infinite; }
  @keyframes ring {
    0% { box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(150,105,40,.3), 0 0 0 0 rgba(214,175,110,.45); }
    60%, 100% { box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(150,105,40,.3), 0 0 0 calc(14 * var(--u)) rgba(214,175,110,0); } }
  .price::after { animation: shine 6s ease-in-out 1.2s infinite; }
  @keyframes shine { 0% { left: -40%; opacity: 1; } 22% { left: 120%; opacity: 1; } 23%, 100% { left: 120%; opacity: 0; } }

  .cta { transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .3s ease, color .3s ease; }
  .cta:hover { filter: brightness(1.04); }
  .cta:active:not([disabled]) { transform: scale(.985); }
  .cta .ar { transition: transform .25s ease; }
  .cta:hover .ar, .cta:focus-visible .ar { transform: translateX(calc(5 * var(--u))); }
  .cta.two .fill { transition: width .25s linear; }
  .cta.two.busy .spin { animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .page .view.on .flow > .cta.two.got { animation: pop .35s ease; }

  .chip { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
  .chip:active { transform: scale(.97); }
  .fld { transition: border-color .2s ease, box-shadow .2s ease; }
  .fld.shake { animation: shake .36s ease; }
  @keyframes shake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
  .okmark { transition: opacity .2s ease, transform .25s cubic-bezier(.2,1.4,.4,1); }
  .copy { transition: background .2s ease, color .2s ease, transform .15s ease; }
  .copy.done { animation: pop .3s ease; }
  @keyframes pop { 40% { transform: scale(1.08); } 100% { transform: none; } }
  .err:not(:empty) { animation: enter .25s ease both; }

  .view.enter .flow > .chk { animation: chk-in .55s cubic-bezier(.2,1.4,.4,1) .1s backwards; }
  .view.enter .chk path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .45s ease .5s forwards; }
  @keyframes chk-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .lang button { transition: background .2s ease, color .2s ease; }
}