/* Yuan247 — styles for every page. Generated from the approved mockups; edit and re-run conv/convert.py. */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(fonts/onest-var.woff2) format('woff2');
  unicode-range: U+0020-007E,U+00A0-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0304,U+0308,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2010-2027,U+2030-203A,U+2044,U+20AC,U+20AE,U+20B4,U+2116,U+2122,U+2190-2199,U+21A9-21AA,U+2212,U+2215,U+2248,U+2264-2265,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range: U+0020-007E,U+00A0-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0304,U+0308,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2010-2027,U+2030-203A,U+2044,U+20AC,U+20AE,U+20B4,U+2116,U+2122,U+2190-2199,U+21A9-21AA,U+2212,U+2215,U+2248,U+2264-2265,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range: U+0020-007E,U+00A0-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0304,U+0308,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2010-2027,U+2030-203A,U+2044,U+20AC,U+20AE,U+20B4,U+2116,U+2122,U+2190-2199,U+21A9-21AA,U+2212,U+2215,U+2248,U+2264-2265,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-mono-600.woff2) format('woff2');
  unicode-range: U+0020-007E,U+00A0-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0304,U+0308,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2010-2027,U+2030-203A,U+2044,U+20AC,U+20AE,U+20B4,U+2116,U+2122,U+2190-2199,U+21A9-21AA,U+2212,U+2215,U+2248,U+2264-2265,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/ibm-plex-mono-700.woff2) format('woff2');
  unicode-range: U+0020-007E,U+00A0-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0301,U+0304,U+0308,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2010-2027,U+2030-203A,U+2044,U+20AC,U+20AE,U+20B4,U+2116,U+2122,U+2190-2199,U+21A9-21AA,U+2212,U+2215,U+2248,U+2264-2265,U+FEFF,U+FFFD;
}

/* Layout: receipt slips (perforated paper) on a guilloché-hatched ground; one 1100px column, everything collapses to a single column under 760px.
   Single deliberate look (paper receipt), so no dark theme: every colour is set explicitly. */
:root {
  --ground: #EBE3DF;
  --paper: #FFFDF7;
  --ink: #1A1A1A;
  --ink-2: #2E2B27;
  --muted: #5C5850;
  --muted-2: #4A4640;
  --line: #8F8A80;
  --hair: #E2DED5;
  /* palette of the 100-yuan note: carmine red, deep wine, pink paper */
  --accent: #B8213A;
  --accent-hover: #A01B31;
  --on-accent: #FFFDF7;
  --accent-text: #9A1A30;
  --soft: #F7DDE1;
  --warn-bg: #FFF0C7;
  --warn-ink: #5A3D00;
  --danger: #B3261E;
  --ok: #2E8B57;
  --ok-text: #24734A; /* зелёный для текста: контраст ≥ 4,5 (AA) и на бумаге, и на зелёной подложке */
  --night-bg: #E6E5F4;
  --night-ink: #33306B;
  --rose: 178, 40, 58;
  --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-cjk: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --fh: 44px;
  --perf: radial-gradient(circle at 9px 0, transparent 6px, #000 6.5px) top left / 18px 12px repeat-x,
          radial-gradient(circle at 9px 12px, transparent 6px, #000 6.5px) bottom left / 18px 12px repeat-x,
          linear-gradient(#000, #000) center / 100% calc(100% - 24px) no-repeat;
  color-scheme: light;
}
@media (min-width: 760px) { :root { --gut: max(32px, env(safe-area-inset-left, 0px)); --gut-r: max(32px, env(safe-area-inset-right, 0px)); } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  background: repeating-linear-gradient(135deg, rgba(var(--rose), .05) 0 1px, transparent 1px 7px), var(--ground);
  -webkit-text-size-adjust: 100%;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ground); }
a { color: var(--accent-text); }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
.mono { font-family: var(--f-mono); }
.cjk { font-family: var(--f-cjk); }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.wrap { max-width: calc(1100px + 64px); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
@media (min-width: 760px) { .wrap { max-width: 1164px; } }

/* paper slip */
.slip-sh { filter: drop-shadow(0 10px 16px rgba(80, 30, 30, .14)); }
.slip { background: var(--paper); -webkit-mask: var(--perf); mask: var(--perf); padding-block: 26px 22px; }
.slip-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 20px 14px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.slip-h h2 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.slip-h .note { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.sec { padding-bottom: 48px; }
@media (max-width: 759px) { .slip-h { margin: 0 16px 6px; } .sec { padding-bottom: 32px; } }

/* decor */
.decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.decor span, .decor i { position: absolute; display: block; }
.rosette { border-radius: 50%; background: repeating-conic-gradient(rgba(var(--rose), .17) 0deg .5deg, transparent .5deg 3.6deg), repeating-radial-gradient(circle, rgba(var(--rose), .15) 0 1px, transparent 1px 10px);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 31% 33%, #000 34% 55%, transparent 70%); mask: radial-gradient(circle, #000 0 30%, transparent 31% 33%, #000 34% 55%, transparent 70%); }
.r1 { right: -300px; top: 40px; width: 1000px; height: 1000px; }
.r2 { left: -260px; top: 3000px; width: 720px; height: 720px; }
.outline { font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(var(--rose), .24); letter-spacing: -.04em; }
.o100 { left: -24px; top: 900px; font-size: 480px; }
.oyen { right: -10px; top: 1380px; font-size: 480px; }
.oyen2 { right: 40px; top: 2600px; font-size: 220px; -webkit-text-stroke-width: 1.5px; }
.o247 { left: -30px; top: 2020px; font-size: 480px; color: transparent; -webkit-text-stroke: 2px rgba(var(--rose), .3);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2216%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgb%28178%2C40%2C58%29%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%22.8%22%3E%3Cpath%20d%3D%22M0.0%208.00%20L4.0%209.29%20L8.0%2010.50%20L12.0%2011.54%20L16.0%2012.33%20L20.0%2012.83%20L24.0%2013.00%20L28.0%2012.83%20L32.0%2012.33%20L36.0%2011.54%20L40.0%2010.50%20L44.0%209.29%20L48.0%208.00%20L52.0%206.71%20L56.0%205.50%20L60.0%204.46%20L64.0%203.67%20L68.0%203.17%20L72.0%203.00%20L76.0%203.17%20L80.0%203.67%20L84.0%204.46%20L88.0%205.50%20L92.0%206.71%20L96.0%208.00%22/%3E%3Cpath%20d%3D%22M0.0%2012.33%20L4.0%2011.54%20L8.0%2010.50%20L12.0%209.30%20L16.0%208.00%20L20.0%206.71%20L24.0%205.50%20L28.0%204.47%20L32.0%203.67%20L36.0%203.17%20L40.0%203.00%20L44.0%203.17%20L48.0%203.67%20L52.0%204.46%20L56.0%205.50%20L60.0%206.70%20L64.0%208.00%20L68.0%209.29%20L72.0%2010.50%20L76.0%2011.53%20L80.0%2012.33%20L84.0%2012.83%20L88.0%2013.00%20L92.0%2012.83%20L96.0%2012.33%22/%3E%3Cpath%20d%3D%22M0.0%203.67%20L4.0%203.17%20L8.0%203.00%20L12.0%203.17%20L16.0%203.67%20L20.0%204.47%20L24.0%205.50%20L28.0%206.71%20L32.0%208.00%20L36.0%209.30%20L40.0%2010.50%20L44.0%2011.54%20L48.0%2012.33%20L52.0%2012.83%20L56.0%2013.00%20L60.0%2012.83%20L64.0%2012.33%20L68.0%2011.53%20L72.0%2010.50%20L76.0%209.29%20L80.0%208.00%20L84.0%206.70%20L88.0%205.50%20L92.0%204.46%20L96.0%203.67%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 96px 16px, repeating-linear-gradient(135deg, rgba(var(--rose), .12) 0 1px, transparent 1px 7px);
  -webkit-background-clip: text; background-clip: text; }
/* Меньшие «100» и «24/7» — в полях по бокам страницы, ниже больших; размер — по ширине поля. */
.o100b { right: 6px; top: 3300px; font-size: clamp(100px, 8vw, 190px); -webkit-text-stroke-width: 1.5px; }
.o247b { left: 4px; top: 3800px; font-size: clamp(90px, 6.5vw, 170px); -webkit-text-stroke-width: 1.5px; background-size: 64px 11px, auto; }
@media (max-width: 759px) {
  .r1 { right: -230px; top: 40px; width: 520px; height: 520px; }
  .r2 { display: none !important; }
  .o100 { left: -14px; top: 1120px; font-size: 210px; -webkit-text-stroke-width: 1.5px; }
  .oyen { right: -6px; top: 1500px; font-size: 210px; -webkit-text-stroke-width: 1.5px; }
  .oyen2 { display: none !important; }
  .o247 { left: -16px; top: 2350px; font-size: 200px; -webkit-text-stroke-width: 1.5px; background-size: 64px 11px, auto; }
  .o100b { right: -8px; top: 3400px; font-size: 130px; -webkit-text-stroke-width: 1.2px; }
  .o247b { left: -10px; top: 4600px; font-size: 120px; -webkit-text-stroke-width: 1.2px; background-size: 44px 8px, auto; }
}

/* header */
/* Отступ сверху (12 px) уезжает вместе со страницей, и шапка плавно доезжает до верхнего
   края: top = −padding-top. Размеры шапки при этом не меняются — ничего не прыгает. */
.top { position: sticky; top: calc(env(safe-area-inset-top, 0px) - 12px); z-index: 20; padding-top: 12px; }
.top .slip { padding-block: 18px; }
/* Шапка прижата к верху (класс .over ставит y247.js): верхние зубчики не нужны — край ровный,
   зубчики только снизу; розовая бумага и тень сильнее. Высота та же. */
.top.over .slip { background: var(--soft);
  -webkit-mask: radial-gradient(circle at 9px 12px, transparent 6px, #000 6.5px) bottom left / 18px 12px repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat;
  mask: radial-gradient(circle at 9px 12px, transparent 6px, #000 6.5px) bottom left / 18px 12px repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat; }
.top.over .slip-sh { filter: drop-shadow(0 12px 22px rgba(80, 30, 30, .28)); }
.bar { display: flex; align-items: center; gap: 12px 20px; padding: 0 22px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.wm { font-family: var(--f-body); font-weight: 800; font-size: 23px; letter-spacing: -.035em; line-height: 1; color: var(--ink); white-space: nowrap; }
.wm b { color: var(--accent); font-weight: 800; }
.wm i { font-style: normal; font-weight: 500; letter-spacing: -.02em; }
.wm .sl { display: inline-block; width: .12em; height: .86em; margin: 0 .18em 0 .16em; vertical-align: -.06em; background: currentColor; transform: skewX(-20deg); }
.nav { display: flex; gap: 4px 18px; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.nav a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.nav a:hover { color: var(--accent-text); }
.bar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--f-mono); font-size: 13px; }
.hours { color: var(--accent-text); display: inline-flex; align-items: center; gap: 6px; }
.hours::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lang { color: var(--ink); text-decoration: none; font-weight: 600; padding: 8px 4px; }
.btn-in { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-family: var(--f-body); font-size: 14px; font-weight: 700; }
.btn-in:hover { background: var(--soft); }
.btn-op { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-family: var(--f-body); font-size: 14px; font-weight: 700; }
.btn-op:hover { color: var(--on-accent); background: var(--accent-hover); }
.burger { display: none; width: 44px; height: 44px; border: 1.5px solid var(--ink); background: transparent; align-items: center; justify-content: center; cursor: pointer; }
.mnav { display: none; }
@media (max-width: 1099px) { .hours { display: none; } }
@media (max-width: 959px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .mnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin: 14px 22px 0; padding-top: 12px; border-top: 1.5px dashed var(--line); }
  .mnav[hidden] { display: none !important; }
  .mnav a { color: var(--ink); text-decoration: none; font-weight: 600; padding: 10px 0; }
}
@media (max-width: 759px) {
  .top { padding-top: 8px; top: calc(env(safe-area-inset-top, 0px) - 8px); }
  .top .slip { padding-block: 18px; }
  /* Телефон: плывущая шапка во всю ширину экрана; логотип и кнопки — на прежних местах. */
  .top.over .wrap { padding-left: 0; padding-right: 0; }
  .top.over .bar { padding-left: calc(var(--gut) + 14px); padding-right: calc(var(--gut-r) + 14px); }
  .top.over .mnav { margin-left: calc(var(--gut) + 14px); margin-right: calc(var(--gut-r) + 14px); }
  .bar { padding: 0 14px; gap: 8px; }
  .wm { font-size: 20px; }
  .btn-op { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .btn-in { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .btn-in span { display: none; }
  .btn-op span { display: none; }
  .mnav { margin: 12px 14px 0; }
}
@media (max-width: 419px) { .bar-r { gap: 6px; } .btn-op, .btn-in, .burger { width: 40px; height: 40px; } .wm { font-size: 19px; } .lang { padding: 8px 2px; } }
@media (max-width: 359px) { .wm { font-size: 17px; } .lang { display: none; } }

/* hero */
.hero { padding-block: 32px 22px; display: flex; flex-direction: column; gap: 12px; }
.hero h1 { margin: 0; font-size: clamp(28px, 2.2vw + 18px, 46px); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; max-width: 880px; }
.lead { margin: 0; font-size: 13.5px; line-height: 1.5; max-width: 620px; color: var(--muted-2); }
@media (max-width: 759px) {
  .hero { padding-block: 22px 16px; gap: 10px; }
    }
/* widget */
.wsec { padding-bottom: 28px; }
.wsec .slip-sh { filter: drop-shadow(0 18px 26px rgba(80, 30, 30, .18)); }
.w { background: var(--paper); -webkit-mask: var(--perf); mask: var(--perf); padding-block: 12px; }
.w-steps { padding: 14px 32px 12px; border-bottom: 1px solid var(--hair); }
.w-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.w-steps li { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
.w-steps li .bar4 { order: 2; flex: 1; min-width: 12px; }
.w-steps .bar4 { height: 4px; background: var(--hair); }
.w-steps .on .bar4 { background: var(--accent); }
.w-steps .lbl { display: flex; align-items: center; gap: 10px; }
.w-steps .n { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12px; font-weight: 600; border: 1px solid var(--hair); color: var(--muted); }
.w-steps .on .n { background: var(--ink); color: #fff; border-color: var(--ink); }
.w-steps .t { font-size: 15px; font-weight: 500; color: var(--muted); }
.w-steps .on .t { color: var(--ink); }
.w-steps .cur .t { font-weight: 700; }
.w-steps .cn { display: block; font-family: var(--f-cjk); font-size: 12px; color: var(--muted); }
.w-steps .mini { display: none; }
@media (max-width: 959px) {
  .w-steps { padding: 14px 32px 12px; }
}
@media (max-width: 759px) { .w-steps { padding: 14px 16px 12px; } }
@media (max-width: 959px) {
  .w-steps .mini { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
  .w-steps .mini b { font-family: var(--f-mono); font-weight: 600; font-size: 16px; color: var(--ink); }
  .w-steps ol { gap: 6px; }
  .w-steps .lbl { display: none; }
  .w-steps li .bar4 { order: 0; }
  .w-steps .bar4 { height: 5px; }
}
.w-sum { padding: 12px 32px; background: var(--paper); border-bottom: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; }
.w-sum .flow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; }
.w-sum .sl { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: none; }
.w-sum .r { color: var(--accent-text); font-family: var(--f-mono); }
.w-sum .m { color: var(--muted); font-weight: 500; }
/* длинный e-mail или название не вылезают за край виджета */
.w b, .w small { overflow-wrap: break-word; }
.w-sum .end { margin-left: auto; }
.w-sum .srow { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.w-sum .sarr { display: inline-flex; }
.ord { display: inline-flex; align-items: stretch; border: 1.5px solid var(--ink); }
.ord-n { padding: 5px 10px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 14.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.ord-s { padding: 5px 10px; font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; display: inline-flex; align-items: center; }
.ord-s.ok { color: var(--ok-text); }
.ord-s:empty { display: none; }
/* телефон 320 px: номер и этап заявки помещаются в ширину виджета, длинный этап переносится */
.ord { max-width: 100%; }
@media (max-width: 379px) {
  .ord { flex-wrap: wrap; }
  .ord-n { font-size: 13px; padding: 4px 8px; flex: 1 0 auto; }
  .w .w-sum .srow { grid-template-columns: 70px auto minmax(0, 1fr); gap: 6px; }
  .ord-s { font-size: 12px; padding: 4px 8px; white-space: normal; }
}
@media (max-width: 759px) {
  .w-sum { flex-direction: column; align-items: stretch; gap: 8px; }
  .w-sum .flow { flex-direction: column; align-items: stretch; gap: 4px; }
  .w-sum .srow { display: grid; grid-template-columns: 78px auto minmax(0, 1fr); gap: 8px; }
  .w-sum .sarr { display: none; }
  .w-sum .end { margin-left: 0; align-self: flex-start; }
}
.linkbtn { background: none; border: none; padding: 6px 0; font-weight: 600; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.w-body { padding: 24px 32px 26px; }
.nnote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-top: 14px; background: var(--night-bg); color: var(--night-ink); font-size: 13.5px; line-height: 1.45; }
.nnote svg { flex-shrink: 0; margin-top: 1px; }
.nnote b { font-weight: 700; }
.inf.night { background: var(--night-bg); border-color: transparent; }
.inf.night .inf-n { background: var(--night-ink); color: #fff; border-color: var(--night-ink); }
.inf.night span span { color: var(--night-ink); }
.ord-s.night { color: var(--night-ink); background: var(--night-bg); }
.notify { display: flex; flex-direction: column; gap: 12px; }
.notify p { margin: 0; font-size: 14px; color: var(--muted-2); }
.notify .who { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--hair); background: #fff; font-size: 14px; }
.notify .who b { font-family: var(--f-mono); font-weight: 600; overflow-wrap: anywhere; }
.notify .row { display: flex; flex-wrap: wrap; gap: 10px; }
.notify .row > * { height: 44px; font-size: 14px; }
.notify small { font-size: 12.5px; color: var(--muted); }
.ret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; padding: 12px 16px; background: var(--night-bg); color: var(--night-ink); font-size: 14px; }
.ret b { font-family: var(--f-mono); }
.ret .cta2 { margin-left: auto; height: 38px; padding: 0 14px; font-size: 14px; border-color: var(--night-ink); color: var(--night-ink); }
/* Днём плашка «Ваша заявка» — не ночным цветом и без луны. */
.ret.day { background: var(--soft); color: var(--ink); }
.ret.day .cta2 { border-color: var(--ink); color: var(--ink); }
.demo-sw { border: 1px dashed var(--line); background: none; padding: 2px 8px; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); cursor: pointer; }
.nbar-w { padding-top: 12px; }
.nbar { display: flex; align-items: center; gap: 12px 14px; padding: 12px 14px 12px 18px; background: var(--night-ink); color: #F3F2FF; }
.nbar p { margin: 0; flex: 1; font-size: 14px; line-height: 1.45; }
.nbar b { color: #fff; }
.nb-ic { flex-shrink: 0; }
.nb-in { flex-shrink: 0; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; background: #F3F2FF; color: var(--night-ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.nb-in:hover { background: #fff; color: var(--night-ink); }
.nb-x { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid rgba(243, 242, 255, .35); color: #F3F2FF; cursor: pointer; }
@media (max-width: 759px) {
  .nbar { flex-wrap: wrap; padding: 12px 14px; position: relative; }
  .nbar p { flex-basis: calc(100% - 80px); font-size: 13.5px; }
  .nb-ic { align-self: flex-start; margin-top: 2px; }
  .nb-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; }
  .nbar p { padding-right: 30px; }
  .nb-in { margin-left: 34px; }
}
.w-foot { padding: 12px 32px 14px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 759px) { .w-sum, .w-body, .w-foot { padding-left: 16px; padding-right: 16px; } .w-body { padding-top: 18px; padding-bottom: 20px; } }

.calc { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 14px; }
.calc .side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.calc .arrow { align-self: end; height: var(--fh); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.lab { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.lab::before { content: ""; width: 24px; height: 24px; flex-shrink: 0; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); }
.seg button { min-height: var(--fh); padding: 4px 6px; border: none; border-left: 1.5px solid var(--ink); background: var(--paper); font-size: 13.5px; font-weight: 700; cursor: pointer; line-height: 1.15; }
.seg button:first-child { border-left: none; }
.seg button[aria-checked="true"] { background: var(--ink); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 32px; padding: 0 10px; border: 1.5px solid var(--ink); background: transparent; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.chip b { font-weight: 700; }
.chip span { opacity: .75; }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.facts { height: var(--fh); display: grid; grid-template-columns: auto auto minmax(0, 1fr); border: 1.5px dashed var(--line); }
.facts > div { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 12px; min-width: 0; }
.facts > div + div { border-left: 1.5px dashed var(--line); }
.facts span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--muted); line-height: 1.2; }
.facts b { font-size: 14.5px; font-weight: 800; line-height: 1.2; }
/* Планшет и узкий ноутбук: колонка калькулятора узкая — «QR-код, номер або e-mail» в две
   строки мельче, а не обрезается многоточием; высота поля та же, ряды не съезжают. */
@media (min-width: 760px) and (max-width: 1099px) {
  .facts > div { padding: 0 8px; }
  .facts span { font-size: 9px; letter-spacing: .04em; }
  .facts b { font-size: 12px; line-height: 1.1; }
}
@media (max-width: 759px) {
  .facts { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div { height: 42px; }
  .facts > div:nth-child(3) { grid-column: 1 / -1; border-left: none; border-top: 1.5px dashed var(--line); }
}
.amt { margin-top: auto; display: flex; align-items: stretch; height: var(--fh); border: 1.5px solid var(--ink); background: #fff; }
.amt.out { background: #fff; }   /* сумма юаней — сплошная рамка, как у суммы «Віддаєте» */
.amt label { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-right: inherit; border-right-width: 1.5px; background: var(--paper); font-size: 14px; font-weight: 700; }
.amt label i { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-style: normal; font-size: 13px; }
.amt input { flex: 1; min-width: 0; width: 100%; border: none; background: transparent; padding: 0 14px; text-align: right; color: var(--ink); font-family: var(--f-mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.amt input:focus { outline: none; }
.amt .unit { flex-shrink: 0; align-self: center; padding: 0 14px 0 0; font-size: 15px; font-weight: 600; color: var(--accent-text); }
.amt.out input { padding-right: 8px; }
.amt:focus-within { box-shadow: 0 0 0 1.5px var(--ink); }
.c-row { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 16px; }
.c-info { display: flex; flex-direction: column; gap: 4px; font-size: 14px; min-width: 0; }
.c-info .err { color: var(--danger); font-weight: 600; }
.c-info .m { color: var(--muted); }
.cta { height: 54px; padding: 0 30px; border: 2px solid var(--ink); background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.cta:disabled { opacity: .4; cursor: not-allowed; }
.cta2 { height: 50px; padding: 0 20px; border: 1.5px solid var(--ink); background: transparent; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
/* Кнопка-ссылка — цвета кнопки, а не ссылки (на 404 «Мої заявки» была красной). */
a.cta, a.cta:hover { color: #fff; text-decoration: none; }
a.cta2, a.cta2:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 759px) {
  .calc { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .calc .arrow { display: none; }
  .amt input { font-size: 21px; }
  .cta { width: 100%; }
  .c-row > .c-info { width: 100%; }
  .c-info > span:first-child .m { display: block; }
}

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.col h3 { margin: 0; font-family: var(--f-mono); font-weight: 600; font-size: 17px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.field small { font-size: 12.5px; color: var(--muted); }
.field input[type=text], .field input[type=tel], .field input[type=email] { height: var(--fh); width: 100%; padding: 0 16px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font-family: var(--f-mono); font-size: 16px; }
.field input.plain { font-family: var(--f-body); }
/* Поле в фокусе — как сумма в калькуляторе: рамка чуть толще и тёмная, без красной обводки. */
.field input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--ink); }
/* Виджет: выбранный вариант не обводим красным — его и так видно по заливке. Мышью/пальцем — без рамки,
   с клавиатуры — тёмная рамка, чтобы было видно, где фокус. */
.w :focus-visible, #ddFloat :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.w.ptr :focus-visible, .w.ptr :focus, #ddFloat.ptr :focus-visible { outline: none; }
.w .field input:focus-visible { outline: none; }
.w:not(.ptr) .upload:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Подсказка «что ещё не заполнено» под главной кнопкой — красным. */
.w .need { color: var(--danger); font-weight: 600; }
.upload { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px dashed var(--muted); background: var(--paper); cursor: pointer; text-align: left; }
.upload svg { flex-shrink: 0; }
.upload b { display: block; }
.upload small { display: block; font-size: 13px; color: var(--muted); }
.upload.done { border-color: var(--ok-text); }
.warn { display: flex; gap: 10px; padding: 12px 14px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13.5px; line-height: 1.45; }
.warn a { color: inherit; font-weight: 700; }
.checks { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.checks label { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.checks input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.acts { margin-top: 22px; display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 759px) { .two { grid-template-columns: minmax(0, 1fr); gap: 22px; } .acts .cta2, .acts .cta { width: 100%; } }

.w { position: relative; }
.gh { margin: 4px 0 0; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.gh:first-child { margin-top: 0; }
.infs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.inf { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border: 1.5px solid var(--hair); background: #fff; }
.inf b { display: block; font-size: 14.5px; }
.inf span span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.inf-n { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-family: var(--f-mono); font-weight: 600; font-size: 13px; }
.inf.warn { background: var(--warn-bg); border-color: transparent; }
.inf.warn .inf-n { background: var(--accent); }
.inf.pend .inf-n { background: var(--soft); }
.inf.ok .inf-n { background: var(--ok); }
.spin { display: inline-block; width: 16px; height: 16px; border: 2.5px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.tbox { height: var(--fh); display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid var(--ink); background: #fff; font-family: var(--f-mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.tnote { margin: -4px 0 0; padding: 10px 12px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13.5px; line-height: 1.45; }
.rq-box { min-height: 120px; padding: 16px; border: 1.5px dashed var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: 14px; color: var(--muted-2); }
.rq-box.ready { align-items: stretch; text-align: left; gap: 4px; justify-content: flex-start; }
.rq-box.ready .rq-v { margin-bottom: 8px; }
.rq-note { font-size: 12.5px; color: var(--danger); font-weight: 600; }
.ldots { display: inline-flex; gap: 6px; }
.ldots b, .dots b { width: 8px; height: 8px; background: var(--accent); animation: blink 1.2s infinite ease-in-out; }
.ldots b:nth-child(2), .dots b:nth-child(2) { animation-delay: .2s; }
.ldots b:nth-child(3), .dots b:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.dots { display: inline-flex; gap: 5px; padding: 6px 0; }
.dots b { width: 6px; height: 6px; background: var(--line); }
.rq-check { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--soft); font-size: 13.5px; }
.rq-check b { display: block; font-size: 14.5px; }
.rq-check span span { color: var(--muted-2); }
.rq-list { display: flex; flex-direction: column; border: 1.5px dashed var(--line); background: #fff; }
.rq-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; }
.rq-row + .rq-row { border-top: 1px dashed var(--line); }
.rq-v.pre { white-space: pre-wrap; }
.rq-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rq-k { font-size: 12px; color: var(--muted); }
.rq-v { font-family: var(--f-mono); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; color: var(--ink); }
.rq-v.plain { font-family: var(--f-body); font-size: 14.5px; }
.rq-cp { flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); background: transparent; cursor: pointer; }
.rq-cp:hover { background: var(--soft); }
.rq-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13.5px; line-height: 1.45; }
.rq-warn .linkbtn { color: inherit; }
.rq-wi { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; }
.rq-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.rq-or::before, .rq-or::after { content: ""; flex: 1; border-top: 1.5px dashed var(--line); }
.wbtn { width: 100%; min-height: var(--fh); padding: 0 14px; border: 1.5px solid var(--ink); background: transparent; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; font-weight: 600; text-align: left; }
.wbtn:hover { background: var(--soft); }
.wbtn .chev { margin-left: auto; flex-shrink: 0; transition: transform .15s; }
.wbtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.rq-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border: 1.5px dashed var(--line); border-top: none; margin-top: -14px; background: #fff; text-align: center; font-size: 13px; color: var(--muted-2); }
.qr.wait { background: repeating-linear-gradient(45deg, var(--hair) 0 6px, #fff 6px 12px); }
#secIban { margin-top: -14px; border-top: none; }
.upload.err { border-color: var(--danger); }
.ferr { margin: -6px 0 0; font-size: 13px; color: var(--danger); font-weight: 600; }
.cta.cta-danger { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wmodal { position: fixed; inset: 0; z-index: 50; padding-top: max(24px, env(safe-area-inset-top, 0px)); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); background: rgba(26, 26, 26, .45); display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.wmodal[hidden] { display: none !important; }
.wmodal-c { width: min(440px, 100%); background: var(--paper); border: 2px solid var(--ink); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.wmodal-c b { font-family: var(--f-mono); font-size: 18px; }
.wmodal-c p { margin: 0; font-size: 14.5px; color: var(--muted-2); }
.wmodal .acts { flex-wrap: wrap; justify-content: flex-end; }
.phone-shot.big { width: 200px; padding: 20px 16px; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .spin, .ldots b, .dots b { animation: none; } .wbtn .chev { transition: none; } }
.pay-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.pay-head b { display: block; font-family: var(--f-mono); font-weight: 600; font-size: 17px; }
.pay-head small { font-size: 13.5px; color: var(--muted); }
.timer { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--soft); color: var(--accent-text); font-family: var(--f-mono); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.pay { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.panel { border: 1.5px dashed var(--line); padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel h3, .col h4 { margin: 0; font-size: 15px; font-weight: 700; }
.req { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.req .lines { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.copyrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1.5px solid var(--ink); }
.copyrow span { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.copyrow button { height: 34px; padding: 0 12px; border: 1.5px solid var(--ink); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.qrbox { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto; }
.qr { width: 140px; height: 140px; padding: 10px; box-sizing: content-box; background: #fff; border: 1.5px solid var(--ink); display: grid; grid-template-columns: repeat(21, 1fr); }
.qr i { display: block; }
.qr i.k { background: var(--ink); }
.danger { margin: 0; display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--danger); }
.ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.4; }
.ol li { display: flex; gap: 10px; }
.ol li > span:first-child { font-family: var(--f-mono); font-weight: 600; color: var(--accent-text); }
.linkrow { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--hair); font-size: 13.5px; }
.linkrow span { color: var(--muted); flex: 1 1 220px; }
@media (max-width: 859px) { .pay { grid-template-columns: minmax(0, 1fr); } }

.tl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tl li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.tl .dot { display: flex; flex-direction: column; align-items: center; }
.tl .dot i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--hair); color: #fff; }
.tl .done .dot i { background: var(--ink); border-color: var(--ink); }
.tl .cur .dot i { border-color: var(--accent); background: var(--soft); }
.tl .dot u { width: 2px; flex: 1; min-height: 18px; background: var(--hair); }
.tl li:last-child .dot u { display: none; }
.tl .tx { padding-bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.tl .tx b { font-size: 15px; }
.tl .tx span { font-size: 13px; color: var(--muted); }
.tl .todo .tx b { color: var(--muted); }
.shot { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.phone-shot { margin: 0; flex: 0 0 auto; width: 150px; background: #fff; color: #111; border: 1px solid rgba(0,0,0,.12); padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: system-ui, sans-serif; }
.phone-shot .ok { width: 34px; height: 34px; border-radius: 50%; background: #1AAD5B; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.phone-shot u { display: block; height: 6px; background: #EEE; text-decoration: none; }
.phone-shot figcaption { font-size: 10.5px; color: #666; }
.stamp { align-self: flex-start; transform: rotate(-7deg); margin: 4px 0 6px 6px; width: 112px; height: 112px; border: 3px solid var(--accent); border-radius: 50%; color: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--accent); }
.stamp .cjk { font-size: 24px; font-weight: 700; line-height: 1.1; }
.stamp .mono { font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.done-note { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--ink-2, var(--ink)); }
.done-note .ok { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; }
.wait { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; border: 1.5px dashed var(--hair); padding: 20px; color: var(--muted); font-size: 14px; }
.demo { font-size: 12px; color: var(--muted); font-family: var(--f-mono); }

/* dropdown for network / bank */
.dd { position: relative; }
.dd-btn { width: 100%; min-height: var(--fh); height: var(--fh); padding: 0 12px; border: 1.5px solid var(--ink); background: #fff; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.dd-btn .k { color: var(--muted); white-space: nowrap; min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.dd-btn b, .dd-btn .s { flex-shrink: 0; }
@media (max-width: 380px) { .dd-btn { font-size: 13.5px; gap: 6px; padding: 0 10px; } }
.dd-btn b { font-weight: 700; }
.dd-btn .s { color: var(--muted); }
.dd-btn .chev { margin-left: auto; flex-shrink: 0; transition: transform .15s; }
.dd-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--soft); }
.dd-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dd-panel { border: 1.5px solid var(--ink); border-top: none; background: #fff; display: flex; flex-direction: column; }
.dd.over .dd-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; box-shadow: 0 16px 28px rgba(40, 20, 20, .2); }
.dd-panel.dd-float { position: absolute; z-index: 15;   /* ниже плывущей шапки (20): при прокрутке она закрывает список, а не наоборот */ right: auto; font-family: var(--f-body); color: var(--ink); box-shadow: 0 16px 28px rgba(40, 20, 20, .2); }
.dd-panel button { min-height: 42px; padding: 0 12px; border: none; border-top: 1px solid var(--hair); background: transparent; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; font-size: 14.5px; }
.dd-panel button:first-child { border-top: none; }
.dd-panel button:hover, .dd-panel button:focus-visible { background: var(--soft); outline: none; }
.dd-panel button[aria-selected="true"] b::after { content: ""; }
.dd-panel button[aria-selected="true"] { font-weight: 700; }
.dd-panel button[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); font-weight: 800; }
.dd-panel .s { color: var(--muted); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .dd-btn .chev { transition: none; } }
/* cells: horizontal strips that stack */
.cells { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.cell { position: relative; padding: 4px 20px 4px 24px; display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.cell + .cell { border-left: 1.5px dashed var(--line); }
.ic { flex-shrink: 0; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; }
.cell .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--accent-text); }
.cell b { font-size: 15px; line-height: 1.3; }
.cell p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted-2); }
.cell .arr { position: absolute; left: -15px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 0; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px 16px no-repeat; box-shadow: 0 0 0 4px var(--paper); z-index: 1; }
.cell .cut { position: absolute; left: -9px; top: 6px; background: var(--paper); padding: 3px 0; line-height: 0; transform: rotate(90deg); }
@media (max-width: 959px) {
  .cells.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .cells.c4 .cell:nth-child(3) { border-left: none; }
  .cells.c4 .cell:nth-child(n+3) { border-top: 1.5px dashed var(--line); padding-top: 22px; margin-top: 14px; }
  .cells.c4 .cell:nth-child(3) .arr { left: 50%; top: -14px; margin: 0 0 0 -14px; transform: rotate(90deg); }
  .cells.c4 .cell:nth-child(3) .cut { left: 14px; transform: none; }
}
@media (max-width: 759px) {
  .cells, .cells.c4 { grid-template-columns: minmax(0, 1fr); }
  .cell, .cells.c4 .cell { padding: 14px 16px; margin-top: 0; }
  .cell + .cell, .cells.c4 .cell + .cell { padding-top: 22px; }
  .cell + .cell, .cells.c4 .cell + .cell { border-left: none; border-top: 1.5px dashed var(--line); }
  .cell .arr, .cells.c4 .cell .arr { left: 50%; top: -14px; margin: 0 0 0 -14px; transform: rotate(90deg); }
  .cell .cut, .cells.c4 .cell .cut { left: 14px; top: -8px; transform: none; padding: 0 3px; }
  .slip.tight { padding-block: 22px 12px; }
}
.st { flex-direction: column; gap: 5px; }
.st .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--f-mono); }
.st .hd span:first-child { font-size: 13.5px; font-weight: 600; letter-spacing: .04em; }
.st .hd em { font-style: normal; color: var(--accent-text); }
.st .hd .tm { font-size: 11px; font-weight: 600; padding: 1px 6px; border: 1.5px solid var(--ink); white-space: nowrap; }
.st .need { font-size: 12.5px; color: var(--muted-2); }
.st .need span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; }
.st .need b { font-size: 12.5px; color: var(--ink); }

/* section headings outside slips */
.h2row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 18px; }
.h2row h2 { margin: 0; font-size: clamp(25px, 1.6vw + 18px, 36px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }

/* services */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.svc { display: flex; flex-direction: column; gap: 8px; padding: 26px 22px; background: var(--paper); color: var(--ink); text-decoration: none; -webkit-mask: var(--perf); mask: var(--perf); height: 100%; }
.svc h3 { margin: 0; font-size: 19px; font-weight: 800; }
.svc p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.svc .more { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--accent-text); }
.svc { position: relative; }
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a::after { content: ""; position: absolute; inset: 0; }
.svc:hover h3, .svc:focus-within h3 { color: var(--accent-text); }
@media (max-width: 759px) { .grid3 { gap: 10px; } .svc { padding: 22px 16px; } .svc h3 { font-size: 17px; } .svc p { font-size: 14px; } }

/* rates */
.rates { margin: 0 20px; overflow-x: auto; }
.rates table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rates th { text-align: left; font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 4px 12px 8px 0; }
.rates td { padding: 9px 12px 9px 0; border-top: 1.5px dashed var(--line); }
.rates td:first-child { font-weight: 700; }
.rates td.k { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.upd { display: inline-flex; align-items: center; gap: 6px; }
.upd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
@media (max-width: 759px) {
  .rates { margin: 0 16px; }
  .rates thead { display: none; }
  .rates table, .rates tbody, .rates tr { display: block; }
  .rates tr { padding: 10px 0; border-top: 1.5px dashed var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13.5px; }
  .rates tr:first-child { border-top: none; }
  .rates td { display: block; padding: 0; border: none; }
  .rates td:nth-child(2) { grid-column: 1; color: var(--muted-2); }
  .rates td:nth-child(2)::before { content: "→ "; }
  .rates td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
  .rates td:nth-child(4), .rates td:nth-child(5) { grid-column: 2; text-align: right; font-family: var(--f-mono); font-size: 12px; color: var(--muted-2); }
  .rates td:nth-child(4) { grid-row: 2; }
  .rates td:nth-child(4)::before { content: "від "; }
  html[lang="ru"] .rates td:nth-child(4)::before { content: "от "; }
  .rates td:nth-child(5) { grid-row: 3; }
}

/* about */
.about { padding: 0 28px; display: flex; flex-direction: column; gap: 16px; }
.about .slip-h { margin: 0; justify-content: flex-start; gap: 4px 14px; }
.about .slip-h h2 { font-size: 22px; line-height: 1.2; }
.about .intro { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 980px; }
.about .g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 36px; }
.about h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 800; }
.about .g2 p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.feats { margin: 0; padding: 14px 0 0; list-style: none; border-top: 1.5px dashed var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feats li { padding: 0 14px; display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.45; min-width: 0; }
.feats li:first-child { padding-left: 0; }
.feats li + li { border-left: 1.5px dashed var(--line); }
.feats li::before { content: "✓"; color: var(--accent-text); font-weight: 800; }
@media (max-width: 959px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; } .feats li:nth-child(3) { border-left: none; padding-left: 0; } }
@media (max-width: 759px) {
  .about { padding: 0 16px; gap: 14px; }
  .about .slip-h h2 { font-size: 19px; }
  .about .intro { font-size: 14px; }
  .about .g2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .feats { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .feats li, .feats li:first-child { padding: 0; border-left: none !important; }
}

/* reviews */
.revs { padding: 0 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.revs > div { flex: 1 1 420px; min-width: 0; }
.revs h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.revs p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-2); max-width: 720px; }
@media (max-width: 759px) { .revs { padding: 0 16px; } .revs .btn-op { width: auto; padding: 0 16px; } .revs .btn-op span { display: inline; } }

/* articles */
.art { background: var(--paper); display: flex; flex-direction: column; -webkit-mask: var(--perf); mask: var(--perf); padding-top: 12px; height: 100%; }
.art .ph { aspect-ratio: 16 / 9; max-width: 100%; margin: 0 12px; border: 1.5px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-family: var(--f-mono); font-size: 12px; }
.art .bd { padding: 14px 16px 26px; display: flex; flex-direction: column; gap: 8px; }
.art h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; }
.art h3 a { color: var(--ink); text-decoration: none; }
.art h3 a:hover { color: var(--accent-text); }
.art p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.allink { font-weight: 700; font-size: 15px; }
@media (max-width: 759px) {
  #arts { gap: 10px; }
  .art { flex-direction: row; align-items: stretch; padding: 14px 0 14px 12px; }
  .art .ph { flex: 0 0 92px; width: 92px; aspect-ratio: auto; min-height: 92px; margin: 0; font-size: 10px; text-align: center; }
  .art .ph svg { width: 22px; height: 22px; }
  .art .bd { padding: 0 14px; gap: 5px; justify-content: center; min-width: 0; }
  .art h3 { font-size: 15px; }
  .art p { font-size: 13px; }
}

/* faq */
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5px; border: 1.5px solid var(--ink); background: var(--ink); margin-bottom: 18px; }
.tabs button { min-height: 50px; padding: 6px 10px; border: none; background: var(--paper); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; text-align: center; line-height: 1.2; }
.tabs button span { font-family: var(--f-mono); font-size: 12px; opacity: .75; font-weight: 500; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.faq { padding: 0 32px; }
.faq .slip-h { margin: 0 0 4px; }
.faq .slip-h h3 { margin: 0; font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .05em; }
.faq details { border-bottom: 1.5px dashed var(--line); }
.faq summary { list-style: none; padding: 18px 0; display: flex; align-items: flex-start; gap: 16px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .qn { font-family: var(--f-mono); font-size: 13px; color: var(--accent-text); padding-top: 3px; min-width: 22px; }
.faq summary .q { flex: 1; font-size: 17px; font-weight: 700; line-height: 1.35; }
.faq summary .pm { font-family: var(--f-mono); font-size: 20px; line-height: 1; width: 24px; text-align: center; }
.faq summary .pm::before { content: "+"; }
.faq details[open] summary .pm::before { content: "−"; }
.faq details p { margin: 0; padding: 0 40px 20px 38px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.faq .ask { padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; }
@media (max-width: 759px) {
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs button { min-height: 46px; font-size: 14px; }
  .faq { padding: 0 16px; }
  .faq summary { padding: 14px 0; gap: 10px; }
  .faq summary .q { font-size: 15.5px; }
  .faq details p { padding: 0 0 16px 32px; font-size: 14.5px; }
  .faq .ask .btn-op, .w .btn-op { width: auto; padding: 0 16px; }
  .faq .ask .btn-op span, .w .btn-op span { display: inline; }
}

/* footer */
.foot { padding-bottom: 28px; }
.foot .slip { padding-block: 40px 30px; }
.fgrid { padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 28px 32px; }
.fcon { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fcon > b { font-size: 14.5px; }
.fc { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; min-width: 0; }
.fc svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.fc small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.fc .sel { user-select: all; overflow-wrap: anywhere; }
a.fc:hover { color: var(--accent-text); }
.fgrid p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted-2); }
.fcol { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.fgrid nav { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; min-width: 0; }
.fgrid nav b { font-size: 14.5px; }
.fgrid nav a { color: var(--muted-2); text-decoration: none; }
.fgrid nav a:hover { color: var(--accent-text); }
.legal { margin: 26px 32px 0; padding-top: 16px; border-top: 1.5px dashed var(--line); font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 959px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fgrid > div:first-child { grid-column: 1 / -1; } .fcon { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } .fcon > b { grid-column: 1 / -1; } }
@media (max-width: 759px) { .foot { padding-bottom: calc(28px + 84px + env(safe-area-inset-bottom, 0px)); } .fgrid { padding: 0 16px; gap: 22px 20px; } .legal { margin: 22px 16px 0; } .foot .slip { padding-block: 32px 24px; } }
@media (max-width: 379px) { .fgrid { grid-template-columns: minmax(0, 1fr); } .fcon { grid-template-columns: minmax(0, 1fr); } }

/* sticky mobile bar */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; filter: drop-shadow(0 -8px 18px rgba(80, 30, 30, .26)); transform: translateY(110%); transition: transform .25s ease; }
.mbar.show { transform: none; }
.mbar .in { background: var(--soft); padding: 22px var(--gut-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gut); display: flex; align-items: center; gap: 12px;
  -webkit-mask: radial-gradient(circle at 9px 0, transparent 6px, #000 6.5px) top left / 18px 12px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 12px) no-repeat;
  mask: radial-gradient(circle at 9px 0, transparent 6px, #000 6.5px) top left / 18px 12px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 12px) no-repeat; }
.mbar .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mbar .t b { font-family: var(--f-mono); font-size: 15px; font-weight: 600; }
.mbar .t span { font-size: 12px; color: var(--muted-2); }
.mbar a { flex-shrink: 0; height: 46px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 800; font-size: 15px; }
@media (min-width: 760px) { .mbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } html { scroll-behavior: auto; } }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }

/* ---- service pages ---- */
.crumbs { padding-top: 22px; }
.crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: "›"; padding: 0 8px; color: var(--line); }
.crumbs a { color: var(--muted-2); }
.crumbs + .hero { padding-top: 12px; }
.hfacts { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hfacts li { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; background: var(--paper); border: 1px dashed var(--line); }
.hfacts li > span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--muted); }
.hfacts b { font-size: 14.5px; }
.byline { margin: 0; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.need2 { margin: 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; }
.need2 h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.need2 p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-text); font-weight: 800; }
.need2-v { padding: 16px 18px; background: var(--soft); }
.need2-v .chk { padding: 10px 12px; background: var(--paper); font-size: 13.5px; }
.sub2 { margin: 18px 20px 0; padding-top: 16px; border-top: 1.5px dashed var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 36px; }
.sub2 h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 800; }
.sub2 p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.tnote2 { margin: 12px 20px 0; font-size: 12.5px; color: var(--muted); }
.concl { margin: 16px 20px 0; padding: 12px 14px; background: var(--soft); font-size: 14.5px; line-height: 1.5; }
.need2-v .tip { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--paper); font-size: 13.5px; }
.amts td { font-weight: 600; }
.amts td:first-child { font-weight: 800; color: var(--accent-text); }
.cmpt td { vertical-align: top; }
.tabs.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmpt td.y { font-weight: 700; color: var(--ok-text); }
.cmpt th:nth-child(3) { color: var(--ok-text); }
@media (max-width: 759px) {
  .crumbs { padding-top: 14px; }
  .need2, .sub2 { grid-template-columns: minmax(0, 1fr); margin-left: 16px; margin-right: 16px; }
  .tnote2, .concl { margin-left: 16px; margin-right: 16px; }
  .rates { margin: 0 16px; }
  .cmpt { font-size: 13px; }
  .tabs.t3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rates table.pm td:nth-child(3)::before { content: "від "; font-weight: 500; color: var(--muted); }
  html[lang="ru"] .rates table.pm td:nth-child(3)::before { content: "от "; }
  .rates table.pm td:nth-child(4) { grid-row: 2; }
  .rates table.pm td:nth-child(4)::before { content: none; }
  .rates table.cmpt tr { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rates table.cmpt td:nth-child(2), .rates table.cmpt td:nth-child(3) { grid-column: 1; grid-row: auto; text-align: left; }
  .rates table.cmpt td:nth-child(2)::before { content: var(--cmp-a, "Варіант 1: "); font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
  .rates table.cmpt td:nth-child(3)::before { content: var(--cmp-b, "Yuan247: "); font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--muted); }
  .tabs.t3 button:last-child { grid-column: span 2; }
}
.why-l { margin: 0 20px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.why-l li { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 3px solid var(--accent); }
.why-l b { font-size: 15.5px; } .why-l span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.why-a { margin: 20px 20px 0; padding-top: 16px; border-top: 1.5px dashed var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.why-a span { font-size: 13px; color: var(--muted); }
@media (max-width: 959px) { .why-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .why-l { grid-template-columns: 1fr; margin: 0 16px; } .why-a { margin: 18px 16px 0; } .why-a .cta, .why-a .cta2 { flex: 1 1 100%; } }
/* Порівняльні таблиці: кожен варіант — окрема колонка з тлом, Yuan247 — зелена (правка 26.10). */
.rates table.cmpt { border-collapse: separate; border-spacing: 10px 0; margin: 0 -10px; width: calc(100% + 20px); }
.cmpt th:nth-child(n+2), .cmpt td:nth-child(n+2) { padding-left: 14px; padding-right: 14px; background: rgba(26, 26, 26, .035); }
.cmpt th:nth-child(n+2) { padding-top: 12px; padding-bottom: 10px; color: var(--ink); font-weight: 700; border-top: 3px solid var(--line); }
.cmpt th:last-child, .cmpt td:last-child { background: rgba(35, 120, 74, .08); }
.cmpt th:last-child { color: var(--ok-text); border-top-color: var(--ok-text); }
.cmpt tbody tr:last-child td:nth-child(n+2) { padding-bottom: 14px; }
@media (max-width: 759px) {
  .rates table.cmpt { margin: 0; width: 100%; }
  .rates table.cmpt tr { gap: 6px; padding: 14px 0; }
  .rates table.cmpt td:nth-child(n+2) { padding: 9px 12px; border-left: 3px solid var(--line); background: rgba(26, 26, 26, .035); color: var(--ink-2); }
  .rates table.cmpt td:last-child { border-left-color: var(--ok-text); background: rgba(35, 120, 74, .08); color: var(--ok-text); }
  .rates table.cmpt td:nth-child(n+2)::before { display: block; margin-bottom: 2px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--muted-2); }
  .rates table.cmpt td:last-child::before { color: var(--ok-text); }
}
/* Кнопка оператора с текстом (не только иконкой): текст виден и на телефоне. */
.btn-op.full { width: auto; padding: 0 16px; }
.btn-op.full span { display: inline; }

/* ---- documents ---- */
.crumbs { padding-top: 22px; }
.crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: "›"; padding: 0 8px; color: var(--line); }
.crumbs a { color: var(--muted-2); }
.crumbs + .hero { padding-top: 12px; }
.byline { margin: 0; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.doc-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.toc { position: sticky; top: 112px; }
.toc .slip { padding: 22px 18px 18px; }
.toc b { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; counter-reset: t; }
.toc a { display: block; padding: 5px 0; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--accent-text); }
.doc .slip { padding: 30px 32px 28px; }
.doc section + section { margin-top: 26px; padding-top: 22px; border-top: 1.5px dashed var(--line); }
.doc h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; scroll-margin-top: 110px; }
.doc h2 .n { font-family: var(--f-mono); color: var(--accent-text); margin-right: 8px; font-size: 17px; }
.doc h3 { margin: 16px 0 8px; font-size: 16px; font-weight: 800; }
.doc p, .doc li { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.doc p { margin: 0 0 10px; }
.doc ul, .doc ol.l { margin: 0 0 12px; padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc .note-b { padding: 12px 14px; background: var(--soft); margin: 10px 0 12px; font-size: 14.5px; }
.doc .warn-b { padding: 12px 14px; background: var(--warn-bg); color: var(--warn-ink); margin: 10px 0 12px; font-size: 14.5px; }
.doc dl.terms { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; }
.doc dl.terms dt { font-weight: 800; font-size: 15px; } .doc dl.terms dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.ccard { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; background: var(--paper); height: 100%; }
.ccard .tag { margin: 0; }
.ccard b { font-size: 18px; }
.ccard p { margin: 0; font-size: 14px; color: var(--muted-2); line-height: 1.5; }
.ccard .cta, .ccard .cta2 { margin-top: auto; align-self: flex-start; height: 44px; font-size: 14px; text-decoration: none; }
.e404 { text-align: center; padding: 40px 0 10px; }
.e404 .big { font-family: var(--f-mono); font-size: clamp(70px, 12vw, 140px); font-weight: 600; line-height: 1; color: var(--accent); letter-spacing: -.04em; }
@media (max-width: 959px) { .doc-wrap { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } .toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } }
@media (max-width: 759px) { .crumbs { padding-top: 14px; } .doc .slip { padding: 26px 16px 22px; } .toc ol { grid-template-columns: minmax(0, 1fr); } .doc p, .doc li { font-size: 14.5px; } .doc dl.terms { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .doc dl.terms dd { margin-bottom: 8px; } }

/* ---- page specific ---- */
.shots { margin: 0 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(80, 30, 30, .12); }
.shot figcaption { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
.shot figcaption .n { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #FFFDF7; font-family: var(--f-mono); font-size: 12px; font-weight: 700; }
@media (max-width: 759px) { .shots { margin: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .shot figcaption { font-size: 12.5px; grid-template-columns: 22px minmax(0, 1fr); } .shot figcaption .n { width: 22px; height: 22px; } }
.svc .more { color: var(--muted-2); font-weight: 600; font-size: 13px; font-family: var(--f-mono); }
.cmpt3 th:nth-child(3) { color: var(--ink); }
.cmpt3 th:nth-child(4) { color: var(--ok-text); }
.sub2 + .sub2 { margin-top: 0; }
#yuani .sub2 { row-gap: 20px; }
@media (max-width: 759px) {
  .rates table.cmpt3 td:nth-child(4) { grid-column: 1; grid-row: auto; text-align: left; font-family: inherit; font-size: 13.5px; color: var(--ok-text); }
  .rates table.cmpt3 td:nth-child(4)::before { content: "Yuan247: "; font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--ok-text); }
  .rates table.cmpt3 td:nth-child(3) { font-weight: 400; }
}
.ways2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.way h3 { font-size: 21px; }
.way .warn2 { margin: 2px 0 0; padding: 10px 12px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13.5px; }
@media (max-width: 759px) { .ways2 { grid-template-columns: 1fr; } }
.ways td.y { color: var(--ok-text); font-weight: 700; white-space: nowrap; }
.ways td.n { color: var(--accent-text); font-weight: 600; }
.ways td a { color: var(--accent-text); }
#oplata-druhom .sub2 { row-gap: 20px; }
  .rates table.ways td:nth-child(3) { white-space: normal; max-width: 120px; font-size: 12.5px; }
.shots.s5 { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
@media (max-width: 759px) { .shots.s5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qrt td.y { color: var(--ok-text); font-weight: 700; } .qrt td.n { color: var(--accent-text); font-weight: 600; }
#zelenyi-qr .sub2 { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed var(--line); }
.two-t { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.two-t .rates { margin-left: 20px; margin-right: 0; } .two-t > div + div .rates { margin-left: 0; margin-right: 20px; }
@media (max-width: 759px) { .two-t { grid-template-columns: 1fr; gap: 16px; } .two-t .rates, .two-t > div + div .rates { margin: 0 16px; } }
.nbu { margin: 16px 20px 0; padding: 12px 14px; background: var(--soft); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.nbu span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.nbu b { font-size: 18px; font-family: var(--f-mono); } .nbu small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 759px) { .two-t { grid-template-columns: 1fr; gap: 16px; } .two-t .rates, .two-t > div + div .rates { margin: 0 16px; } .nbu { margin: 14px 16px 0; } }
.way h3 { font-size: 21px; } .way .warn2 { margin: 2px 0 0; padding: 10px 12px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13.5px; }
.ways td.y { color: var(--ok-text); font-weight: 700; white-space: nowrap; } .ways td.n { color: var(--accent-text); font-weight: 600; }
@media (max-width: 759px) { .ways2 { grid-template-columns: 1fr; } .rates table.ways td:nth-child(3) { white-space: normal; max-width: 120px; font-size: 12.5px; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ccard .cta svg, .ccard .cta2 svg { flex-shrink: 0; }
.doc section + section { margin-top: 26px; padding-top: 22px; border-top: 1.5px dashed var(--line); }
.l404 { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding-top: 18px; border-top: 1.5px dashed var(--line); font-size: 14.5px; } .l404 a { color: var(--ink-2); }
/* ---- production additions ---- */
.toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 14px 20px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; pointer-events: auto; max-width: 340px; text-align: center; }
.toast.show { opacity: 1; transform: none; }
.toast.toast-error { background: var(--accent); }
.maintenance-banner { display: none; max-width: 1100px; margin: 12px auto 0; background: var(--warn-bg); color: var(--warn-ink); padding: 12px 16px; font-size: 14px; line-height: 1.45; text-align: center; }
.w-load { padding: 40px 32px; color: var(--muted); font-size: 15px; }
.w-load a { color: var(--accent-text); }
/* Место под калькулятор до запуска скрипта: без него страница «прыгала» вниз на 300–600 px,
   когда скрипт рисовал калькулятор (Lighthouse CLS 0,3–0,6). Высоты — как у готового калькулятора. */
.js #widget:not(.on) { min-height: 449px; }
@media (max-width: 759px) { .js #widget:not(.on) { min-height: 768px; } }
@media (max-width: 444px) { .js #widget:not(.on) { min-height: 787px; } }
@media (max-width: 320px) { .js #widget:not(.on) { min-height: 808px; } }
/* Узкая колонка калькулятора: подпись «Монета та мережа:» обрезалась многоточием —
   прячем её, выбранное («USDT TRC20», «monobank») и так понятно. */
@media (min-width: 760px) and (max-width: 1099px), (max-width: 379px) { .dd-btn .k { display: none; } }

/* ── История курса Yuan247 (страница «Курс юаня») ───────────────────────────
   Переключатели — radio + CSS, без JS. Один ряд за раз: способ × период. */
.rh-sum { margin: 0 20px 14px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.rh { margin: 0 20px; }
.rh-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rh-ctl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.rh-sw { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ink); }
.rh-sw label { padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--muted-2); cursor: pointer; white-space: nowrap; border-left: 1.5px solid var(--ink); }
.rh-sw label:first-child { border-left: 0; }
.rh-sw label:hover { color: var(--ink); background: var(--soft); }
.rh-pw label { font-family: var(--f-mono); font-size: 12.5px; }
#rhs-other:checked ~ .rh-ctl .rh-s-other, #rhs-fop:checked ~ .rh-ctl .rh-s-fop, #rhs-usdt:checked ~ .rh-ctl .rh-s-usdt,
#rhp-7:checked ~ .rh-ctl .rh-p-7, #rhp-30:checked ~ .rh-ctl .rh-p-30, #rhp-90:checked ~ .rh-ctl .rh-p-90 { background: var(--ink); color: var(--paper); }
#rhs-other:focus-visible ~ .rh-ctl .rh-s-other, #rhs-fop:focus-visible ~ .rh-ctl .rh-s-fop, #rhs-usdt:focus-visible ~ .rh-ctl .rh-s-usdt,
#rhp-7:focus-visible ~ .rh-ctl .rh-p-7, #rhp-30:focus-visible ~ .rh-ctl .rh-p-30, #rhp-90:focus-visible ~ .rh-ctl .rh-p-90 { outline: 3px solid var(--accent); outline-offset: 2px; position: relative; z-index: 1; }
.rh-c { display: none; margin: 0; }
#rhs-other:checked ~ #rhp-7:checked ~ .rh-charts .rh-c-other-7, #rhs-other:checked ~ #rhp-30:checked ~ .rh-charts .rh-c-other-30, #rhs-other:checked ~ #rhp-90:checked ~ .rh-charts .rh-c-other-90,
#rhs-fop:checked ~ #rhp-7:checked ~ .rh-charts .rh-c-fop-7, #rhs-fop:checked ~ #rhp-30:checked ~ .rh-charts .rh-c-fop-30, #rhs-fop:checked ~ #rhp-90:checked ~ .rh-charts .rh-c-fop-90,
#rhs-usdt:checked ~ #rhp-7:checked ~ .rh-charts .rh-c-usdt-7, #rhs-usdt:checked ~ #rhp-30:checked ~ .rh-charts .rh-c-usdt-30, #rhs-usdt:checked ~ #rhp-90:checked ~ .rh-charts .rh-c-usdt-90 { display: block; }
.rh-read { display: block; margin-bottom: 6px; font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--ink); min-height: 1.5em; }
.rh-plot { display: grid; grid-template-columns: minmax(0, 1fr) 76px; }
.rh-area { position: relative; height: 170px; border-bottom: 1.5px solid var(--ink); }
.rh-area svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rh-g { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.rh-fill { fill: rgba(var(--rose), .08); }
.rh-ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rh-hit { fill: transparent; }
.rh-dot { position: absolute; right: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); }
.rh-cur { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ink); display: none; pointer-events: none; }
.rh-area.on .rh-cur { display: block; }
.rh-ax { position: relative; }
.rh-ax span { position: absolute; left: 12px; transform: translateY(-50%); font-family: var(--f-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.rh-ax span.now { color: var(--accent-text); font-weight: 600; }
.rh-x { display: flex; justify-content: space-between; margin-right: 76px; padding-top: 6px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.rh-hint { display: none; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
@media (hover: hover) { .js .rh-hint { display: block; } }
.rh-tab { margin: 22px 20px 0; overflow-x: auto; }
.rh-tab table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rh-tab th[scope="col"] { text-align: left; font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 4px 12px 8px 0; }
.rh-tab tbody th, .rh-tab td { padding: 9px 12px 9px 0; border-top: 1.5px dashed var(--line); text-align: left; vertical-align: top; }
.rh-tab tbody th { font-weight: 700; }
.rh-tab .k { font-family: var(--f-mono); font-variant-numeric: tabular-nums; display: block; }
.rh-tab td.now { font-weight: 700; color: var(--ink); }
.rh-tab .d { display: block; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.rh-tab .d.up::before { content: "▲ "; }
.rh-tab .d.down::before { content: "▼ "; }
.rh-tab .p::before { content: " · "; }
.rh-tab .na { font-size: 12.5px; color: var(--muted); }
@media (max-width: 759px) {
  .rh-sum, .rh { margin-left: 16px; margin-right: 16px; }
  .rh-sum { font-size: 14px; }
  .rh-ctl { flex-direction: column; }
  .rh-sw { display: flex; }
  .rh-sw label { flex: 1 1 auto; text-align: center; padding: 8px 6px; font-size: 12.5px; white-space: normal; }
  .rh-sw:not(.rh-pw) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-sw:not(.rh-pw) label:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1.5px solid var(--ink); }
  .rh-area { height: 150px; }
  .rh-plot { grid-template-columns: minmax(0, 1fr) 68px; }
  .rh-ax span { left: 9px; font-size: 11.5px; }
  .rh-x { margin-right: 68px; }
  .rh-tab { margin: 18px 16px 0; }
  .rh-tab thead { display: none; }
  .rh-tab table, .rh-tab tbody, .rh-tab tr { display: block; }
  .rh-tab tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 12px 0; border-top: 1.5px dashed var(--line); }
  .rh-tab tr:first-child { border-top: 0; }
  .rh-tab tbody th, .rh-tab td { display: block; padding: 0; border: 0; }
  .rh-tab tbody th { grid-column: 1 / -1; grid-row: 1; padding-right: 128px; font-size: 13.5px; }
  .rh-tab td.now { grid-column: 1 / -1; grid-row: 1; justify-self: end; white-space: nowrap; }
  .rh-tab td[data-h] { grid-row: 2; }
  .rh-tab .p { display: block; }
  .rh-tab .p::before { content: none; }
  .rh-tab td[data-h]::before { content: attr(data-h); display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }
}