/* OBSIDIAN — black ground, bone type, one acid accent, hairlines and oversized numerals. */

:root {
  color-scheme: dark;

  --ink: #000000;
  --ink-1: #0a0a0a;
  --ink-2: #111111;
  --ink-3: #181818;
  --ghost: #2a2a2a;          /* the 404 numeral only: lifted so OLED panels still show it */

  --line: #262626;
  --line-2: #3d3d3d;

  --bone: #f2efe8;           /* 17.9:1 on black */
  --bone-2: #aca89f;         /* 8.9:1 — body muted */
  --bone-3: #8a867e;         /* 5.5:1 — labels, eyebrows */

  --acid: #c6ff00;
  --acid-dim: #8fb800;
  --acid-ink: #0b0f00;

  --bad: #ff5c5c;            /* state colour only: errors, failed lookups */

  --display: "Unbounded", "Arial Black", "Segoe UI", sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  --well: 1200px;
  --gutter: 20px;
  --tap: 44px;
  --copy-w: 300px;           /* desktop copy-button column; >= the widest label at 12px Unbounded 700 */
}

* { box-sizing: border-box; }
/* scroll-padding-top = sticky header (60px phone / 68px desktop) + air, so
   #buy / #prices / #facts land with their heading visible, not under the bar.
   Applies to fragment navigation, nav clicks and scrollIntoView alike. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (min-width: 960px) { html { scroll-padding-top: 80px; } }
/* Smooth only for in-page clicks (the link is focused, so :focus-within holds).
   Fragment navigation on load and programmatic hash changes stay instant:
   with smooth set unconditionally, Chromium dropped the scroll to #buy/#prices
   entirely and the page stayed at the top. */
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 16px/1.55 var(--body);
  font-feature-settings: "tnum" 1, "ss01" 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a { color: var(--bone); text-decoration: none; }
a:hover { color: var(--acid); }
b, strong { font-weight: 600; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
code { font-family: var(--mono); }
::selection { background: var(--acid); color: var(--acid-ink); }

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

.wrap { width: 100%; max-width: var(--well); margin: 0 auto; padding-inline: var(--gutter); }

/* ---- star glyph: 4-point geometric, drawn with a mask so it takes currentColor ---- */
.glyph {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.4 9.6L24 12l-9.6 2.4L12 24l-2.4-9.6L0 12l9.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.4 9.6L24 12l-9.6 2.4L12 24l-2.4-9.6L0 12l9.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.glyph-s { width: .7em; height: .7em; }
.glyph-xs { width: .6em; height: .6em; }

/* ---- shared type ---------------------------------------------------------- */
.eyebrow {
  font: 500 11px/1.2 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin: 0 0 14px;
}
.muted { color: var(--bone-2); }
.fine { color: var(--bone-3); font-size: 13px; line-height: 1.5; margin-top: 14px; }
/* inline links keep a 40px tap box without changing the line's rhythm */
/* text-decoration, not border-bottom: a border would sit on the padding-box
   edge, 11px under the glyphs, and read as a stray dash on the next line */
.fine a {
  display: inline-block; padding-block: 11px; margin-block: -11px;
  color: var(--bone-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.fine a:hover { color: var(--acid); text-decoration-color: var(--acid); }
.acid { color: var(--acid); }
.inline-code {
  font-size: .92em;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--bone);
  overflow-wrap: anywhere;
}

/* index callout: a small acid numeral in a hairline square, always beside its
   heading or label, never behind it. One box for section indices (01/02/03),
   the FAQ mark (?) and the payment steps (01/02/03) on the order page. */
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--line-2);
  font: 700 12px/1 var(--display);
  letter-spacing: .04em;
  color: var(--acid);
  user-select: none;
}

/* ---- header ---------------------------------------------------------------- */
.top { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ink); z-index: 10; }
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--bone); }
.brand .glyph { color: var(--acid); width: 16px; height: 16px; }
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand:hover .brand-name { color: var(--bone); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-2);
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav a.nav-bot {
  margin-left: 6px;
  padding: 0 14px;
  border: 1px solid var(--acid);
  color: var(--acid);
}
.nav a.nav-bot:hover { background: var(--acid); color: var(--acid-ink); }

/* ---- ticker tape ------------------------------------------------------------
   The template renders the eight rows once. extra.js clones the set until the
   track is one viewport plus one set wide, writes the set width into --set,
   and adds .live only while the tape is on screen. The only animated property
   is transform on the track — no per-frame layout, one composited layer. */
.tape {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  color: var(--bone-3);
  letter-spacing: .06em;
}
.tape-track {
  display: flex;
  width: max-content;
  --set: 0px;
  --tape-dur: 40s;
}
.tape-track.live { animation: tape var(--tape-dur) linear infinite; will-change: transform; }
.tape-track.live.idle { animation-play-state: paused; }
.tape:hover .tape-track { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--set))); } }
@media (prefers-reduced-motion: reduce) { .tape-track.live { animation: none; will-change: auto; } }
.tape-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 36px;
  border-right: 1px solid var(--line);
}
.tape-item b { font-family: var(--display); font-weight: 700; color: var(--bone); font-size: 12px; }
.tape-item b::after { content: ""; display: inline-block; width: .6em; height: .6em; margin-left: 8px; vertical-align: -0.05em; background: var(--acid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.4 9.6L24 12l-9.6 2.4L12 24l-2.4-9.6L0 12l9.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.4 9.6L24 12l-9.6 2.4L12 24l-2.4-9.6L0 12l9.6-2.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tape-price { color: var(--bone-2); }
.tape-static { height: 36px; display: flex; align-items: center; padding-inline: var(--gutter); color: var(--bad); }

/* ---- hero ----------------------------------------------------------------- */
.hero { position: relative; padding-block: 56px 48px; }
/* the single glow on the page (phone only: on desktop the headline is the light) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px 320px at 92% 30%, rgba(198, 255, 0, .09), transparent 70%);
}
.hero-grid { position: relative; display: grid; gap: 40px; }
.hero h1 {
  font-weight: 800;
  font-size: clamp(33px, 7.6vw, 98px);
  line-height: .96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.lead { color: var(--bone-2); font-size: 17px; max-width: 520px; margin-top: 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* the strip is the old grid gap made explicit: 40px under the copy, hairline
   on the list itself, so the phone renders pixel for pixel as before.
   position: relative lifts it above the hero glow like .hero-grid */
.hero-strip { position: relative; margin-top: 40px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.stat { padding: 18px 0 0; border-right: 1px solid var(--line); padding-right: 12px; }
.stat + .stat { padding-left: 14px; }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); min-height: 2.6em; }
.stat dd { margin: 8px 0 0; display: flex; align-items: baseline; gap: 4px; }
.stat-n {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 8vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-u { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--acid); }
/* the fourth cell exists for the desktop strip only */
.stat-live { display: none; }

/* ---- bands & panes -------------------------------------------------------- */
.band { border-top: 1px solid var(--line); }
.band-first { border-top: 0; }
.band-last { border-bottom: 1px solid var(--line); }
main { flex: 1; }

.split { display: grid; grid-template-columns: 1fr; }
.pane { padding-block: 36px 44px; }
.pane + .pane { border-top: 1px solid var(--line); }

.pane-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.pane-head h2 { font-size: 28px; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.pane-tag {
  margin-left: auto;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acid);
  border: 1px solid var(--acid);
  padding: 6px 10px;
}

/* ---- form ----------------------------------------------------------------- */
.field { margin-bottom: 26px; }
.field label {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: 8px;
}

input[type="text"], input[type="number"], select {
  width: 100%;
  min-height: 52px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--bone);
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s;
}
/* label tone, not a ghost: #3a3a3a was ~1.6:1 and vanished on OLED. Bone-3 is
   5.5:1, still clearly not typed text next to the bone input value. */
input::placeholder { color: var(--bone-3); opacity: 1; }
input:focus, select:focus { outline: 0; border-bottom-color: var(--acid); }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.input-at { position: relative; }
.input-at .at {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-weight: 500; font-size: 22px;
  color: var(--acid);
  pointer-events: none;
}
.input-at input { padding-left: 30px; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute; right: 2px; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--bone-2);
  border-bottom: 1.5px solid var(--bone-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
/* 16px body font, not the 22px display: the longest option («USDT — Крипта
   напрямую · 0%») must fit in 335px minus the arrow at 375 without clipping. */
select { padding-right: 28px; font-size: 16px; font-family: var(--body); font-weight: 500; cursor: pointer; text-overflow: ellipsis; }
select option { background: var(--ink-2); color: var(--bone); }

.hint { display: block; font-size: 13px; color: var(--bone-3); margin-top: 8px; min-height: 18px; }
.hint.ok { color: var(--acid); }
.hint.bad { color: var(--bad); }

.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 14px; border: 1px solid var(--line); }
.preset {
  min-height: var(--tap);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--bone-2);
  font: 700 13px/1 var(--display);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.preset:nth-child(4n) { border-right: 0; }
.preset:nth-child(n+5) { border-bottom: 0; }
.preset:hover { color: var(--bone); background: var(--ink-2); }
.preset.active { background: var(--bone); color: var(--ink); }

.quote {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 6px 0 20px;
}
.quote-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); }
.quote-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 9vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--acid);
  overflow-wrap: anywhere;
  transition: opacity .2s;
}
.quote-value.tick { opacity: .35; }
.quote-fiat { color: var(--bone-2); font-size: 14px; }

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 0;
  font: 700 13px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-align: center;
}
.btn-acid { background: var(--acid); color: var(--acid-ink); border-color: var(--acid); }
.btn-acid:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn-line { background: transparent; color: var(--bone); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--bone); color: var(--bone); }
.btn-ghost { background: transparent; color: var(--bone-2); border-color: transparent; padding-inline: 12px; }
.btn-ghost:hover { color: var(--bone); }
.btn[disabled] { opacity: .5; cursor: progress; }
.btn-submit, .btn-wide { width: 100%; min-height: 60px; font-size: 15px; }

.error { color: var(--bad); font-size: 14px; margin-top: 14px; }
.board-empty { padding: 20px 0; }

/* ---- closed till ---------------------------------------------------------- */
/* The one buy-pane state that is not a failure: the rate is fine, the shop just
   is not taking orders. Acid rule and bone type, never --bad — red here reads
   as "something broke" and sends people to support for nothing. */
.closed-note {
  margin: 0 0 26px;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--acid);
  color: var(--bone-2);
  font-size: 14px;
  line-height: 1.5;
}
/* Disabled here is a standing state, not an in-flight one, so it must not take
   the .btn[disabled] cursor:progress above — that promises work is happening. */
input:disabled, select:disabled { color: var(--bone-3); border-bottom-color: var(--line); cursor: not-allowed; }
.preset:disabled { color: var(--bone-3); cursor: not-allowed; }
.preset:disabled:hover { background: transparent; color: var(--bone-3); }
/* The default preset keeps its mark, but not the bone chip: bone-3 on bone is
   3.2:1 and reads as a rendering fault rather than a disabled selection. */
.preset:disabled.active { background: var(--ink-3); color: var(--bone-2); }
.btn-closed[disabled] { cursor: not-allowed; }

/* ---- price board ---------------------------------------------------------- */
.board { width: 100%; border-collapse: collapse; }
.board th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-3);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-2);
}
.board th:nth-child(2), .board td:nth-child(2) { text-align: right; }
.board th:nth-child(3), .board td:nth-child(3) { text-align: right; width: 30%; }
.board td { padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.board tbody tr:last-child td { border-bottom: 0; }
.board tbody tr { transition: background .12s; }
.board tbody tr:hover td { background: var(--ink-1); }
.board tbody tr:hover .b-qty { color: var(--acid); }
.b-qty { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; transition: color .12s; padding-right: 16px; white-space: nowrap; }
.b-price { font-family: var(--display); font-weight: 500; font-size: 17px; white-space: nowrap; }
.b-cur { font-size: 12px; color: var(--bone-3); letter-spacing: .08em; }
.b-per { font-family: var(--mono); font-size: 13px; color: var(--bone-2); white-space: nowrap; }

/* ---- steps: 03 how it works ----------------------------------------------- */
.band > .wrap { padding-block: 36px 44px; }
/* the four bands under the buy band breathe more than the form does */
.band-sec > .wrap { padding-block: 48px 56px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
/* phone: the numeral sits in an 84px gutter left of the text, 48px Unbounded 900 */
.steps li { position: relative; padding: 24px 0 26px 84px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.steps li b { font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.steps li span:not(.step-n) { color: var(--bone-2); font-size: 15px; line-height: 1.5; }
.step-n {
  position: absolute; left: 0; top: 20px;
  font-family: var(--display); font-weight: 900;
  font-size: 44px; line-height: 1; letter-spacing: -0.05em;
  color: var(--acid);
  font-variant-numeric: tabular-nums;
}

/* ---- facts: 04 what you get, in hero-stat type ---------------------------- */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.fact { display: flex; flex-direction: column; padding: 22px 14px 26px 0; border-bottom: 1px solid var(--line); }
.fact:nth-child(odd) { border-right: 1px solid var(--line); }
.fact:nth-child(even) { padding-left: 16px; padding-right: 0; }
.fact-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); min-height: 2.6em; }
.fact-v { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.fact p { color: var(--bone-2); font-size: 14px; line-height: 1.5; margin-top: 12px; }
/* the return arrow is not in Unbounded; the fallback face draws it, so pin its
   optical size to the digits beside it */
.stat-sym { font-family: var(--body); font-weight: 600; font-size: clamp(28px, 7.5vw, 52px); }

/* ---- FAQ excerpt on the index --------------------------------------------- */
/* hairline link: display face, 44px tap box, one rule under the text */
.link-line {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap);
  font: 700 12px/1 var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
  border-bottom: 1px solid var(--line-2);
  transition: color .15s, border-color .15s;
}
.link-line:hover { color: var(--acid); border-color: var(--acid); }
.faq-x .faq-head { position: static; }

/* ---- closing band --------------------------------------------------------- */
.final { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.final-line {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 6.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  max-width: 900px;
}
.final-cta { display: flex; flex-wrap: wrap; gap: 10px; }
/* what the acid button leads to, in the form's own fine print; capped at the
   FAQ head's measure so it reads as a note beside the buttons, not a paragraph */
.final-act { display: flex; flex-direction: column; align-items: flex-start; }
.final-act .fine { max-width: 360px; }

/* ---- first paint -----------------------------------------------------------
   extra.js inserts .boot-veil — a black sheet over the page — and fades it out
   once the fonts are in. Only the sheet animates: the page underneath is
   painted normally from the first frame, so nothing re-rasterises and the
   sticky header keeps its own containing block. Fading or transforming <body>
   did both and the result shivered. No element here exists without the script,
   so a page with JS off has nothing to clear. */
.boot-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  pointer-events: none;
  opacity: 1;
  /* its own layer: the fade never repaints the page beneath it */
  will-change: opacity;
}
/* 800ms and a gentle ease-out: the sheet starts clearing at once so the page
   never feels held back, then takes a long, even tail to nothing. The sharper
   curve the reveals use is right for a 16px nudge and too abrupt for a
   full-screen dissolve — the last 10% arrived as a step. extra.js's removal
   timer must stay above this duration. */
.boot-veil.out { opacity: 0; transition: opacity .8s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) { .boot-veil { display: none; } }

/* ---- scroll reveal ---------------------------------------------------------
   Additive: without extra.js there is no .js on <html> and every block is
   visible. With it, blocks marked data-reveal start 16px low and transparent
   and settle once the IntersectionObserver in extra.js adds .in. Opacity and
   transform only — nothing here touches layout per frame. --i staggers items
   inside one grid (60ms each, capped at 8 so a long list never waits 1s). */
.js [data-reveal] { opacity: 0; transform: translateY(16px); }
/* the transition lives on .in only: the moment .js lands nothing animates
   towards hidden, a block snaps low and clear and only its arrival is drawn */
.js [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(min(var(--i, 0), 8) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* the hero counters swap digits for 800ms; tabular figures keep the column still */
.stat-n { font-variant-numeric: tabular-nums; }

/* ---- order page ----------------------------------------------------------- */
.order { position: relative; }
.order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 32px;
  padding-bottom: 22px;
}
.order-code { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: clamp(28px, 8vw, 44px); letter-spacing: -0.02em; }
.order-code code { font-family: var(--display); font-weight: 900; }

/* The state of the order is the second most legible thing after the amount:
   display face, 20px on a phone, 24px on desktop. Acid when it is live, red
   when it left the route or needs a human. */
.status {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--acid);
}
.status::before { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; }
.status.done { color: var(--acid); }
.status.bad { color: var(--bad); }
.status-block { display: flex; flex-direction: column; gap: 10px; }
.status-block .eyebrow { margin: 0; }

/* Route track: four stages, lit in acid up to the current one; every cell
   dashed when the order left the route. extra.js moves it when order.js
   rewrites #status. */
.track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 8px;
}
.track li {
  padding: 10px 0 0;
  border-top: 2px solid var(--line);
  font: 600 11px/1.2 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.track li.on { border-top-color: var(--acid); color: var(--bone); }
.track[data-stage="0"] li { border-top-style: dashed; }

.order-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 26px; border-top: 1px solid var(--line); }
.pay { padding-block: 26px 30px; position: relative; }
/* the single glow on the page: behind the amount */
.pay::before {
  content: "";
  position: absolute; left: -20%; top: -10%;
  width: 60%; height: 40%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(198, 255, 0, .08), transparent);
}

.amount { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.amount .pay-label { margin-bottom: 0; }
.amount-value { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.copy-amt { margin-top: 6px; }
.amount-value code {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 11vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--acid);
  overflow-wrap: anywhere;
  user-select: all;
}
.amount-asset { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 4vw, 24px); color: var(--bone); }
.amount-fiat { color: var(--bone-2); font-size: 15px; }
.amount-fiat i { font-style: normal; color: var(--bone-3); }

.pay-step { padding-block: 22px; border-bottom: 1px solid var(--line); }
.pay-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: 12px;
}
.pay-text { color: var(--bone-2); margin-bottom: 18px; }
.pay-warn { margin-top: 12px; font-size: 14px; color: var(--bone); }
.pay-warn::before { content: "!"; display: inline-block; font-family: var(--display); font-weight: 900; color: var(--acid); margin-right: 8px; }
.pay .btn-wide { margin-top: 24px; }

/* Value wells stack their copy button underneath at every width below 640:
   the well keeps the full 335px, the button is a full-width 44px bar. */
.copy-row { display: flex; flex-direction: column; gap: 10px; }
.copy-row code {
  display: block;
  padding: 16px 16px;
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-all;
  color: var(--bone);
  user-select: all;
}
.copy-row-memo code {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 7vw, 40px);
  letter-spacing: .04em;
  border-color: var(--acid);
  text-align: center;
  word-break: normal;
}
/* One copy button. Bone block, 12px display face, 44px tall, names its target. */
.copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap);
  padding: 0 18px;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--bone);
  font: 700 12px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.copy:hover { background: var(--acid); border-color: var(--acid); color: var(--acid-ink); }

.order-side { padding-block: 26px 30px; border-top: 1px solid var(--line); }
.kv { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); white-space: nowrap; }
.kv dd { margin: 0; font-family: var(--display); font-weight: 500; font-size: 15px; text-align: right; overflow-wrap: anywhere; }
.kv-glyph { color: var(--acid); margin-left: 4px; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.order-actions .btn { flex: 1 1 auto; }
/* buyer_note: the calm sentence from core.reasons, never the raw last_error */
.note { margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--acid); background: var(--ink-1); font-size: 14px; color: var(--bone); }

/* ---- 404 ------------------------------------------------------------------ */
.notfound { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding-block: 24px 44px; }
/* the one oversized ghost numeral left: above the heading, never behind it */
.big-404 {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(96px, 26vw, 220px);
  line-height: .85;
  letter-spacing: -0.04em;
  color: var(--ghost);
  user-select: none;
  margin-bottom: 8px;
}
.notfound h1, .notfound h2 { font-size: 28px; text-transform: uppercase; }
.notfound .muted { max-width: 560px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { display: grid; grid-template-columns: 1fr; gap: 32px; }
.faq-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.faq-title { display: flex; align-items: center; gap: 14px; }
/* h1 on /faq (the page's one heading), h2 for the excerpt on the index */
.faq-head h1, .faq-head h2 { font-size: 32px; text-transform: uppercase; line-height: 1; }
.faq-head .muted { max-width: 360px; }
.qa { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.qa li { position: relative; padding: 22px 0 22px 56px; border-bottom: 1px solid var(--line); }
.qa-n { position: absolute; left: 0; top: 24px; font: 900 15px/1 var(--display); color: var(--acid); letter-spacing: .02em; }
.qa h2, .qa h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px; }
.qa p { color: var(--bone-2); font-size: 15px; }

/* ---- footer --------------------------------------------------------------- */
.bottom { margin-top: auto; }
.bottom-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  min-height: 64px; padding-block: 14px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-3);
}
.bottom-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; color: var(--bone); }
.bottom-brand .glyph { color: var(--acid); }
.bottom-links { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.bottom-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--bone-2); }
.bottom-meta { margin-left: auto; }

/* ---- < 640: phone --------------------------------------------------------- */
@media (max-width: 639px) {
  /* header holds wordmark + all four links, «Купить» included */
  .top-row { gap: 8px; }
  .nav { gap: 0; }
  .nav a { padding: 0 6px; font-size: 11px; letter-spacing: .04em; }
  .nav a.nav-bot { padding: 0 10px; margin-left: 4px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 12px; letter-spacing: .06em; }

  /* price board: quantity left, price right, per-star under the price.
     No third column, so 10000 and 18700.00 RUB can never touch. */
  .board, .board thead, .board tbody { display: block; }
  .board tr { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .board thead tr { padding: 0 0 10px; border-bottom-color: var(--line-2); }
  .board tbody tr:last-child { border-bottom: 0; }
  .board th, .board td { display: block; padding: 0; border: 0; width: auto; }
  .board th:nth-child(3) { display: none; }
  /* the desktop 30% column width outranks the `.board td { width: auto }`
     above (0,2,1 vs 0,1,1) and left the per-star line in a 41px box at the
     left of the price column, its text spilling past the box; same
     specificity here, later in the sheet, so the line right-aligns under the
     price the way the comment above always claimed */
  .board td:nth-child(3) { width: auto; }
  .board .b-qty { padding-right: 0; }
  .board .b-per { grid-column: 2; text-align: right; font-size: 12px; margin-top: 2px; }
  .board .b-per::after { content: "/шт"; color: var(--bone-3); }
  .board tbody tr:hover { background: var(--ink-1); }
  .board tbody tr:hover td { background: transparent; }
}
@media (max-width: 399px) {
  .brand { gap: 6px; }
  .brand-name { font-size: 11px; letter-spacing: .04em; }
  .nav a { padding: 0 4px; letter-spacing: .02em; }
  .nav a.nav-bot { padding: 0 9px; margin-left: 3px; }
}

/* ---- narrow phones: 290-371 ------------------------------------------------
   375 was the proving width and stays pixel for pixel: every rule below is
   either a clamp whose cap is the 375 value or lives in a block that ends at
   371 / 359 / 339 / 319. Measurements are Unbounded at the 375 sizes; each
   block names the line that forced it. */
@media (max-width: 371px) {
  /* header: the wordmark and four links need 371px at the ≤399 metrics.
     2px link padding buys the 17px a 360 screen is short of, and the nav
     ends on the right gutter again instead of 11px past it. */
  .nav a { padding: 0 2px; }
  .nav a.nav-bot { padding: 0 8px; margin-left: 2px; }
}
@media (max-width: 359px) {
  /* below 360 the row cannot hold the wordmark at 11px: the acid glyph is the
     mark (the link's aria-label still reads STARS SHOP), in a 28px tap box */
  .brand-name { display: none; }
  .brand { min-width: 28px; justify-content: center; }
  .brand .glyph { width: 18px; height: 18px; }
  /* 04 facts: two-across leaves 125-160px cells and three-word lines. One
     column, same hairline under each fact, the label no longer reserves two
     lines it never needs at full width. */
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact, .fact:nth-child(even) { padding: 20px 0 24px; border-right: 0; }
  .fact-k { min-height: 0; }
  /* a `1fr` track still grows to its content's min-content: a nowrap copy
     label or the FAQ title pushed the whole column 22-43px past the well */
  .order-grid, .faq, .split { grid-template-columns: minmax(0, 1fr); }
  /* hero stats three-across down to 320: «КОМИССИЯ» at .14em is 78px and made
     its 1fr cell 104px, the third cell ran 4px past the well. Equal cells,
     .08em on the labels (70px), 8/10px cell padding: 75px of text at 320 */
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { padding-right: 8px; }
  .stat + .stat { padding-left: 10px; }
  .stat dt { letter-spacing: .08em; }
}
@media (max-width: 339px) {
  /* pane heads: «ПОЛУЧАЕШЬ» is 235px at 28px; beside the 28px index box and
     the 14px gap the heading has 198px at 290 — 8vw keeps the word whole
     and the heading wraps to two lines next to the box, never under it */
  .pane-head h2 { font-size: clamp(22px, 8vw, 28px); }
  /* «ВОПРОСЫ» is 210px at 32px beside the same box */
  .faq-head h1, .faq-head h2 { font-size: clamp(26px, 9.8vw, 32px); }
  /* copy buttons: «Копировать комментарий» is 256px at 12px; let it wrap
     inside the 44px bar instead of holding the column open past the well */
  .copy { white-space: normal; line-height: 1.25; padding: 6px 12px; }
  /* route track 2×2: «FRAGMENT» is 69px at 11px, four cells offer 56 at 290 */
  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .status { font-size: clamp(17px, 6.4vw, 20px); }
  /* a 9-character amount («1234.5678») at 40px is 260px; 12vw keeps it on
     one line down to 290 instead of breaking mid-number */
  .amount-value code { font-size: clamp(34px, 12vw, 40px); }
  /* key/value rows: a value that does not fit beside its label drops under
     it, still right-aligned, instead of breaking inside a date or a handle */
  .kv > div { flex-wrap: wrap; }
  .kv dd { flex: 1 1 auto; }
  /* the longest payment option is 251px at 16px; 252px is what 320 offers */
  select { font-size: 15px; }
}
@media (max-width: 319px) {
  /* «НАПРЯМУЮ.» is 269px at 33px; the well is 250px at 290 */
  .hero h1 { font-size: clamp(28px, 10.35vw, 33px); }
  /* three stat cells would be 83px at 290 and «~2 мин» needs 93: stack them,
     label left, numeral right, one hairline between rows, none after the
     last — the band's hairline closes the strip as before */
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat + .stat, .stat:last-child {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-right: 0;
  }
  .stat dt { letter-spacing: .14em; }
  .stat + .stat { border-top: 1px solid var(--line); }
  .stat dt { min-height: 0; }
  .stat dd { margin: 0; }
  /* presets stay 4-across (62px cells at 290): the UA's 6px button padding
     made «10000» a 67px cell and the other three shrink to 60 */
  .preset { padding: 0 2px; }
  /* «2.4137 TON» at 34px is 245px: 10.6vw keeps the asset on the same line */
  .quote-value { font-size: clamp(28px, 10.6vw, 34px); }
  /* «USDT — Крипта напрямую · 0%» is 251px at 16px, 220px at 14px; the
     select offers 222px beside its arrow at 290 */
  select { font-size: 14px; }
  /* steps: 72px gutter for the numeral leaves 178px of text at 290 */
  .steps li { padding-left: 72px; }
  .step-n { font-size: 40px; }
}

/* ---- ≥ 640 ---------------------------------------------------------------- */
@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .quote { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 24px; align-items: baseline; }
  .quote-label { grid-column: 1; grid-row: 1; align-self: end; }
  .quote-value { grid-column: 2; grid-row: 1; text-align: right; }
  .quote-fiat { grid-column: 2; grid-row: 2; text-align: right; }
  /* One fixed column for every copy button on desktop. The widest resting
     label («Копировать комментарий») measures 293px; a floor above that means
     the 1.5s «Скопировано» swap from order.js never narrows the box, so the
     well beside it never widens and the row never reflows on a click. */
  .copy { width: auto; min-width: var(--copy-w); flex: none; }
  .copy-row { flex-direction: row; align-items: stretch; }
  .copy-row code { flex: 1; }
  /* beside a 300px button the memo well is 274px at 640 and 295px at 1280; an
     8-char code in Unbounded 900 is 240px at 32px, 255px at 34px — the clamp
     keeps it on one line across the whole range (measured: 40px wrapped at 700) */
  .copy-row-memo code { text-align: left; font-size: clamp(30px, 4.9vw, 34px); }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 24px; }
  .steps li:nth-child(even) { padding-left: 108px; }
  .steps li:nth-child(even) .step-n { left: 24px; }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact, .fact:nth-child(even) { padding: 24px 16px 28px; border-right: 1px solid var(--line); border-bottom: 0; }
  .fact:first-child { padding-left: 0; }
  .fact:last-child { border-right: 0; padding-right: 0; }
  .final { flex-direction: row; align-items: end; justify-content: space-between; gap: 32px; }
  .presets { grid-template-columns: repeat(8, 1fr); }
  .preset:nth-child(4n) { border-right: 1px solid var(--line); }
  .preset { border-bottom: 0; }
  .preset:nth-child(8n) { border-right: 0; }
}

/* ---- ≥ 960 ---------------------------------------------------------------- */
@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .top-row { min-height: 68px; }
  /* STRIP: the headline takes the whole well, lead | buttons under it in a
     row, the three facts become a full-width strip that closes the hero.
     44px above the eyebrow, nothing below: the strip's lower hairline is the
     buy band's top border, so the hero has no bottom padding to lose. */
  .hero { padding-block: 44px 0; }
  /* no glow on desktop: the headline is the light, and a haze behind a
     full-well headline reads as a smudge */
  .hero::before { display: none; }
  /* 7.6vw: «НАПРЯМУЮ.» in Unbounded 800 at 97px (1280) and 109px (1440) sits
     inside the 1120px well without wrapping; 112px caps it so a 1600 screen
     does not get a fourth line. .92 leading: three lines at 97-109px want
     tighter than the phone's .96. The whole hero must end above the 800px
     fold at 1280 — the size, the leading and the row margins below are what
     buy that; if a line is added to the headline, the fold is the first
     casualty. */
  .hero h1 { font-size: clamp(64px, 7.6vw, 112px); line-height: .92; letter-spacing: -0.03em; }
  /* lead | buttons: two equal columns split by a hairline. Equal (not 7/5)
     so the two 204px buttons fit side by side from ~1045px up: the pair
     stretches to share the column, and once the column is too narrow they
     wrap to two full-width rows of the same width — both states read as
     chosen, a natural-width wrap did not. */
  .hero-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 28px; }
  .hero-sub .lead { margin-top: 0; font-size: 18px; max-width: 560px; }
  /* align-self: stretch runs the hairline the full height of the lead;
     align-items: flex-start keeps the 48px buttons from stretching with it */
  .hero-sub .hero-cta { margin-top: 0; padding-left: 40px; border-left: 1px solid var(--line); align-self: stretch; align-items: flex-start; }
  .hero-sub .btn { flex: 1 1 204px; }

  /* the strip: four equal cells, hairlines between, full-bleed top hairline
     (this border) and the band's top border under it. The row is a .wrap, so
     the cells end at the well edge; the fourth cell keeps its right hairline
     so the strip closes at the edge exactly the way the tape cells do,
     instead of trailing off into black after a short mono line. */
  .hero-strip { border-top: 1px solid var(--line); }
  .hero-strip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-strip .stats { grid-column: span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  /* label pinned top-left, numeral on the cell floor: grid rows auto / 1fr
     with the dd at the end, so the digits of all three cells share one
     baseline whatever the label. 32px under the numeral, the same air the
     pane heads take above the band's content. */
  .hero-strip .stat, .hero-strip .stat + .stat, .hero-strip .stat:last-child {
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 20px 24px 32px;
    border-right: 1px solid var(--line);
  }
  .hero-strip .stat:first-child { padding-left: 0; }
  .hero-strip .stat dt { min-height: 0; font-size: 12px; line-height: 1; }
  .hero-strip .stat dd { align-self: end; margin-top: 16px; gap: 6px; }
  /* 6.2vw: 79px at 1280, 88px cap from 1420; «~2 мин» at 88px needs ~180px in
     a cell that is 172px of text width at 960 (64px floor there) and 232px at
     1280. Line-height 1 keeps the count-up's min-width measurement honest;
     tabular figures keep the digits from wobbling while it runs. */
  .hero-strip .stat-n { font-weight: 800; font-size: clamp(64px, 6.2vw, 88px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .hero-strip .stat-u { font-size: 20px; line-height: 1; }
  /* fourth cell: label top-left like the others, the mono line on the floor.
     4px of bottom padding more than the numerals: a 14px mono line box has
     no descender space to speak of, the 79px numeral has ~16px, so the two
     baselines land within a few px of each other */
  .hero-strip .stat-live { display: flex; flex-direction: column; justify-content: space-between; padding: 20px 24px 36px; border-right: 1px solid var(--line); }
  .hero-strip .stat-k { font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }
  /* «TON · USDT · CryptoBot» is 185px at 14px; the cell offers 172px at 960
     and 232px at 1280, so the line may wrap at a separator on the narrowest
     desktop instead of overrunning its hairline */
  .hero-strip .stat-line { font-family: var(--mono); font-size: 14px; line-height: 1.4; letter-spacing: .02em; color: var(--bone-2); }

  .split { grid-template-columns: 7fr 5fr; }
  .pane { padding-block: 48px 56px; }
  .pane + .pane { border-top: 0; border-left: 1px solid var(--line); padding-left: 48px; }
  .pane-buy { padding-right: 48px; }
  .pane-head h2 { font-size: 32px; }
  .num { min-width: 32px; height: 32px; font-size: 13px; }
  .band > .wrap { padding-block: 48px 56px; }

  /* the lookbook rhythm: the four bands under the form open to 104/112, the
     hero's 84/72 one notch wider, so the page reads as sheets, not a form */
  .band-sec > .wrap { padding-block: 104px 112px; }
  .band-sec .pane-head { margin-bottom: 44px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps li, .steps li:nth-child(odd), .steps li:nth-child(even) { padding: 36px 24px 48px 24px; border-right: 1px solid var(--line); gap: 10px; }
  .steps li:last-child { border-right: 0; }
  /* the numeral is the loudest thing in the band: 96px, two digits fit a 256px cell with room */
  .steps li .step-n, .steps li:nth-child(even) .step-n { position: static; font-size: 96px; margin-bottom: 28px; }
  .steps li:first-child { padding-left: 0; }
  .steps li b { font-size: 17px; }
  .steps li span:not(.step-n) { font-size: 16px; }

  .fact, .fact:nth-child(even) { padding: 32px 24px 40px; }
  .fact:first-child { padding-left: 0; }
  .fact:last-child { padding-right: 0; }
  .fact .stat-n { font-size: 64px; }
  .fact .stat-sym { font-size: 58px; }
  .fact p { font-size: 15px; margin-top: 18px; }

  .faq-x .qa li { padding: 36px 0 40px 72px; }
  .faq-x .qa-n { top: 38px; }
  .final-line { font-size: 56px; }

  .order-grid { grid-template-columns: 7fr 5fr; margin-top: 32px; }
  .pay { padding: 40px 48px 48px 0; }
  .order-side { border-top: 0; border-left: 1px solid var(--line); padding: 40px 0 48px 48px; }
  .amount-value code { font-size: 80px; }
  /* Two fixed columns, so the status block sits at the right edge with its
     eyebrow right-aligned above it. Below 960 the head is a wrapping flex row
     and the status block stays left-aligned under the code: right-aligning a
     block that only spans its own text left «СТАТУС» floating mid-row. */
  .order-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 30px; align-items: end; }
  .status-block { align-items: flex-end; }
  .status { font-size: 24px; }
  .track li { font-size: 12px; padding-top: 12px; }
  .order-actions .btn { flex: 0 1 auto; }

  .faq { grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
  .faq-head { position: sticky; top: 100px; }
  .qa li { padding: 28px 0 28px 72px; }
  .qa-n { top: 30px; }
  .qa h2, .qa h3 { font-size: 18px; }

  .notfound { padding-block: 40px 72px; }
}

/* Metrika <noscript> pixel: a class, not a style attribute - the CSP has no unsafe-inline for styles */
.metrika-px { position: absolute; left: -9999px; width: 1px; height: 1px; }