/* monerostash — единственный лист витрины.
   Ни одного <script>, ни одного <svg>, ничего снаружи: ни шрифта,
   ни картинки с чужого домена. Всё состояние рисуется селекторами.

   СЛОВАРЬ КЛАССОВ НЕ ПЕРЕСЕКАЕТСЯ С ostbro. Общее имя на двух витринах
   видно глазами и связывает их надёжнее сертификата. Совпадать можно
   только общеупотребительным: chip, tile, mark. */

:root {
  --bg: #0B0D0B;
  --slab: #101410;
  --slab-on: #12160F;
  --pill: #1A1F17;
  --edge: #23281F;
  --edge-2: #2E3429;
  --edge-hi: #4A5248;
  --ink: #E9EEE7;
  --ink-2: #C4CCC0;
  --ink-3: #A3ADA0;
  --ink-4: #879083;
  --ink-5: #5F6A5C;
  --lime: #C8FF00;
  --lime-dim: rgba(200, 255, 0, .35);
  --focus: #FF2EC4;
  --warn: #FFB3B6;
  --stop: #C41F25;
  --paper: #EDECE6;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body { font-family: var(--sans); font-size: 16px; line-height: 1.5 }

input, button, label, textarea { font: inherit; color: inherit }

a { color: var(--lime); text-underline-offset: 3px }
a:hover { color: var(--bg); background: var(--lime) }

/* Ссылки-кнопки и логотип инвертироваться не должны: у них своя рамка,
   и заливка лаймом съедает её вместе со смыслом. */
.pill:hover, .logo:hover, .back:hover { color: var(--lime); background: transparent }
.pill:hover { border-color: var(--lime) }

h1, h2 { margin: 0; font-weight: 400 }

/* ——— типографика */

.fig { font-family: var(--code); font-variant-numeric: tabular-nums }
.dim { color: var(--ink-4) }
.faint { color: var(--ink-5) }
.say { color: var(--ink-2); margin: 0 }
.big { margin: 0; font-size: clamp(18px, 3vw, 21px); line-height: 1.35 }
.bigger { margin: 0; font-size: clamp(17px, 2.8vw, 19px) }
.kicker {
  font-family: var(--code); font-size: 11px;
  letter-spacing: .14em; color: var(--ink-4);
}
.kicker-on { color: var(--lime) }
/* Адрес переносится где угодно: 95 знаков Monero иначе рвут колонку. */
.addr { overflow-wrap: anywhere; word-break: break-word }

/* ——— каркас страницы */

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 24px) 70px }

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 18px 2px clamp(14px, 2.5vw, 20px);
}
.logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none }
.dot {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--lime); box-shadow: 0 0 12px var(--lime);
}
.name { font-weight: 600; white-space: nowrap }
.name-2 { color: var(--ink) }
.stash {
  background: var(--lime); color: var(--bg); padding: 1px 5px;
  border-radius: 3px; box-shadow: 0 0 14px rgba(200, 255, 0, .5);
}
.creed { font-family: var(--code); font-size: 11px; letter-spacing: .12em; color: var(--ink-4) }

.head {
  font-family: var(--code); display: flex; align-items: baseline;
  gap: 10px; padding: 0 2px 2px;
}
.hn { font-size: clamp(21px, 3.6vw, 26px); color: var(--lime) }
.hn-off { color: var(--ink-4) }
.hsep { font-size: clamp(21px, 3.6vw, 26px); color: var(--edge-2) }
.hname { font-size: clamp(21px, 3.6vw, 26px); letter-spacing: .04em }
/* В потоке заказа имя шага мельче номера: крупен номер, не слово. */
.hstep { font-size: clamp(14px, 2.2vw, 16px); letter-spacing: .18em }

/* Страницы текста — колонка, не решётка. Решётка для форм. */
.col {
  max-width: 660px; padding: clamp(14px, 2.5vw, 22px) 2px 0;
  display: grid; gap: clamp(24px, 3.5vw, 34px);
}
.col-wide { max-width: 700px }
.col-read { gap: clamp(26px, 4vw, 38px) }

.part { display: grid; gap: 14px; border-top: 1px solid var(--edge); padding-top: 16px }
.part-tight { gap: 12px }
.part-on { border-top-color: var(--lime-dim) }

/* ——— плиты */

.slab {
  border: 1px solid var(--edge); border-radius: 16px; background: var(--slab);
  padding: clamp(18px, 3.2vw, 26px); display: grid; gap: 12px;
}
.slab-sm { padding: clamp(16px, 3vw, 20px); gap: 8px }
.slab-lit {
  border-color: var(--lime-dim);
  background: radial-gradient(120% 90% at 85% 8%, rgba(200, 255, 0, .10), var(--slab) 62%);
}
.slab-stop { border-left: 2px solid var(--stop) }
.term {
  font-family: var(--code); padding: 14px; border: 1px solid var(--edge-2);
  border-radius: 11px; background: var(--bg); font-size: 14px; line-height: 1.7;
}
.term-lg { font-size: clamp(14px, 2.4vw, 17px); letter-spacing: .06em; word-break: break-all }
.term-cmd { display: grid; gap: 8px; line-height: 1.6; overflow-x: auto }

.pill {
  font-family: var(--code); border: 1px solid var(--edge-2); border-radius: 11px;
  padding: 11px 18px; font-size: 14px; text-decoration: none;
  color: var(--ink); white-space: nowrap; display: inline-block;
}
.pills { display: flex; flex-wrap: wrap; gap: 10px }

/* ——— маршрут монеты через Monero */

.chain {
  font-family: var(--code); display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; font-size: 14px;
}
.hop { padding: 5px 9px; border-radius: 7px; background: var(--pill) }
.hop-off { color: var(--ink-4) }
.hop-mid {
  padding: 5px 9px; border-radius: 7px;
  background: rgba(200, 255, 0, .18); color: var(--lime);
  box-shadow: 0 0 18px rgba(200, 255, 0, .25);
}
.arrow { color: var(--lime) }
.arrow-off { color: var(--ink-5) }

/* ——— решётка заказа */

.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px }
.tile {
  border: 1px solid var(--edge); border-radius: 16px; background: var(--slab);
  padding: clamp(18px, 3.2vw, 26px); display: grid; gap: 12px; align-content: start;
  transition: border-color .2s, background .2s;
}
.tile-mid { align-content: center; min-height: 150px; gap: 10px }
.tile-lit {
  border-color: var(--lime-dim);
  background: radial-gradient(120% 90% at 80% 10%, rgba(200, 255, 0, .14), var(--slab) 62%);
}
.tile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px }
/* Заполненная плитка подсвечивается: это единственная обратная связь,
   которую можно дать без строчки кода в браузере. */
.tile:has(input:checked),
.tile:has(input[type=text]:not(:placeholder-shown)) {
  border-color: var(--lime-dim); background: var(--slab-on);
}
.tile:has(input:checked) .k,
.tile:has(input[type=text]:not(:placeholder-shown)) .k { color: var(--lime) }
.tile:has(input[type=text]:not(:placeholder-shown)) .fill { width: 100% }

.k { font-family: var(--code); font-size: 11px; letter-spacing: .14em; color: var(--ink-4) }
.deal { margin: 0; font-size: clamp(18px, 3vw, 22px); line-height: 1.3; max-width: 34ch }

.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip {
  position: relative; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--edge-2); cursor: pointer;
}
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.chip:has(input:checked) { background: var(--lime); color: var(--bg); border-color: var(--lime) }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px }
/* Погашенная монета: видно, что она известна и недоступна. */
.chip-off { color: var(--ink-5); border-style: dashed; cursor: not-allowed }

.fld {
  font-family: var(--code); width: 100%; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--edge-2); background: var(--bg); font-size: 15px;
}
.fld-lg { font-size: 19px }
.fld-xl { padding: 16px 18px; border-radius: 12px; font-size: clamp(19px, 3.4vw, 24px); letter-spacing: .04em }
.fld::placeholder { color: var(--ink-4); opacity: 1 }
.lbl { color: var(--ink-4); font-size: 14px }
.warn { margin: 0; color: var(--warn); font-size: 14px }
.meter { height: 3px; border-radius: 999px; background: #1E2319 }
.fill { height: 3px; width: 0; border-radius: 999px; background: var(--lime); transition: width .3s }

/* Пределы всех монет сразу: на одной странице монета при первой
   загрузке ещё не выбрана, и один предел показать не из чего. */
.bounds { display: grid; gap: 3px; font-family: var(--code); font-size: 13px; color: var(--ink-4) }
.bound { display: flex; gap: 8px }
.bound-c { color: var(--ink-2); min-width: 4ch }

/* ——— выбор ставки */

.rate { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) }
.rate label {
  cursor: pointer; display: grid; gap: 4px;
  border: 1px solid var(--edge-2); border-radius: 12px; padding: 12px 14px;
}
.rate label:hover { border-color: var(--edge-hi) }
.rate input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.rate label:has(input:checked) { border-color: rgba(200, 255, 0, .5); background: var(--slab-on) }
.rate label:has(input:checked) .rk { color: var(--lime) }
.rate label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px }
.rk { font-family: var(--code); font-size: 17px; color: var(--ink) }
.rk-2 { font-size: 14px; letter-spacing: .06em }
.rate-why { display: grid; gap: 10px; border-top: 1px solid var(--edge); padding-top: 12px }

/* ——— всегда включённые механизмы */

.pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 12px rgba(200, 255, 0, .8);
}
.pip-off { width: 6px; height: 6px; background: var(--edge-2); box-shadow: none; flex: none }
.pip-on { width: 6px; height: 6px; flex: none; box-shadow: 0 0 10px rgba(200, 255, 0, .7) }
.mech { margin: 0; font-size: 17px }
.ran { display: flex; gap: 9px; align-items: baseline }

details { border-top: 1px solid var(--edge); padding-top: 10px; margin-top: 2px }
details summary {
  cursor: pointer; list-style: none; font-family: var(--code); font-size: 12px;
  letter-spacing: .1em; color: var(--ink-4); display: flex;
  justify-content: space-between; gap: 10px;
}
details summary::-webkit-details-marker { display: none }
details summary::after { content: "+"; color: var(--lime) }
details[open] summary { color: var(--lime) }
details[open] summary::after { content: "\2013" }
details summary:hover { color: var(--ink) }
details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px }
details p { margin: 10px 0 0; color: var(--ink-3); font-size: 14px; line-height: 1.5 }

/* ——— кнопки */

.go {
  border: 1px solid var(--edge-2); border-radius: 12px; background: transparent;
  color: var(--ink); padding: 13px 26px; font-size: 16px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.go:hover { border-color: var(--lime); color: var(--lime) }
.go-lg { padding: 14px 28px }
.go-sm { padding: 12px 22px; font-size: 15px; font-weight: 400 }
/* Форма заполнена целиком — кнопка загорается. Пять полей, пять условий. */
.bento:has(input[name=send-coin]:checked):has(input[name=receive-coin]:checked):has(.amt:not(:placeholder-shown)):has(.dst:not(:placeholder-shown)):has(.rfd:not(:placeholder-shown)) .go {
  background: var(--lime); color: var(--bg); border-color: var(--lime);
  box-shadow: 0 0 30px rgba(200, 255, 0, .4);
}
.find:has(input:not(:placeholder-shown)) .go {
  background: var(--lime); color: var(--bg); border-color: var(--lime);
  box-shadow: 0 0 26px rgba(200, 255, 0, .38);
}
.find:has(input:not(:placeholder-shown)) .fld { border-color: rgba(200, 255, 0, .5) }
.find { display: grid; gap: 14px }

.count { font-family: var(--code); font-size: 12px; letter-spacing: .1em; color: var(--ink-4) }
.bento { counter-reset: set }
.tile:has(input[type=radio]:checked) .k { counter-increment: set }
.tile:has(input[type=text]:not(:placeholder-shown)) .fill { counter-increment: set }
.count::after { content: counter(set) " of 5 fields ready" }

.note { display: none }
.note:target { display: block; flex: 1 0 100%; border-top: 1px solid var(--edge); padding-top: 14px }
.aside { margin-left: auto; font-family: var(--code); font-size: 12px; letter-spacing: .08em; white-space: nowrap }

/* ——— ошибки формы */

.bad { border-color: var(--stop) }
.why { margin: 0; color: var(--warn); font-size: 14px }
.why-top { border: 1px solid var(--stop); border-radius: 16px; background: var(--slab); padding: clamp(16px, 3vw, 22px); display: grid; gap: 8px }

/* ——— лента шагов заказа */

.trail {
  display: grid; gap: 1px; background: var(--edge);
  border: 1px solid var(--edge); border-radius: 14px; overflow: hidden;
}
.leg { display: grid; gap: 4px; background: var(--slab); padding: 13px 16px }
.leg .top { display: flex; align-items: baseline; gap: 10px; padding: 0 }
.mark {
  width: 18px; flex: none; text-align: center;
  font-family: var(--code); font-size: 12px; color: var(--ink-5);
}
.what { color: var(--ink-4) }
.when {
  margin-left: auto; font-family: var(--code); font-size: 13px;
  color: var(--ink-5); text-align: right;
}
.due { padding-left: 28px; font-size: 13px; color: var(--ink-5) }
.leg-done .mark { color: var(--lime) }
.leg-done .what { color: var(--ink) }
.leg-done .when { color: var(--ink-4) }
.leg-now { background: var(--slab-on) }
.leg-now .mark { color: var(--lime) }
.leg-now .what { color: var(--ink) }
.leg-now .due { color: var(--ink-4) }

/* ——— две колонки на странице заказа */

.two {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 2.4vw, 20px); padding: clamp(14px, 2.5vw, 22px) 0 0;
  align-items: start;
}
.side { display: grid; gap: 10px }
.sent { margin: 0; font-size: clamp(19px, 3.2vw, 23px); line-height: 1.35 }
.facts {
  font-family: var(--code); display: flex; flex-wrap: wrap;
  gap: 6px 18px; font-size: 13px; color: var(--ink-4);
}
/* Число ярче подписи: в строке сводки человек ищет цифру, не слово. */
.val { color: var(--ink) }
.exact { font-family: var(--code); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.exact-n { font-size: clamp(24px, 4.4vw, 32px); color: var(--lime) }
.exact-c { font-size: clamp(18px, 3vw, 22px) }
.exact-net { font-size: 13px; color: var(--ink-4) }
.deadline { font-family: var(--code); font-size: 20px }
/* Время выплаты стоит отдельно и всегда на виду: это то, ради чего
   человек держит вкладку открытой. */
.due-box { gap: 6px }
.left { font-family: var(--code); font-size: 14px; color: var(--lime) }
.oid { font-family: var(--code); font-size: 15px }
.oid-sm { font-size: 13px; color: var(--ink-4) }

/* ——— QR
   Рисуется на сервере решёткой CSS, а не картинкой и не SVG: на Safest
   в Tor Browser SVG отключён, а это основная аудитория. Имена .qr и
   .qr i задаёт движок — здесь только вид.
   Тёмное по светлому всегда: инвертированный код многие сканеры
   телефонов не читают. Поле вокруг — без него сканер не находит границы. */

.qbox { display: grid; gap: 12px; justify-items: center }
.qk { justify-self: start }
/* Блок без рамки: текст под лентой шагов — примечание, не карточка. */
.bare { display: grid; gap: 10px; padding: 4px 2px }
.qpaper { max-width: 212px; background: var(--paper); padding: 14px; border-radius: 10px; line-height: 0 }
.qr {
  display: grid; grid-template-columns: repeat(var(--qn), 1fr);
  width: var(--qs); height: var(--qs); max-width: 100%;
  background: #fff; line-height: 0; overflow: hidden;
}
.qr i { display: block; width: 100%; height: 100%; background: #fff }
.qr i.on { background: #000 }
@media (max-width: 420px) {
  .qr { width: min(var(--qs), 62vw); height: min(var(--qs), 62vw) }
}

/* ——— таблица пределов */

.ltab { display: grid; gap: 8px }
.lhead { font-family: var(--code); font-size: 11px; letter-spacing: .12em; color: var(--ink-4); display: none }
.lrow {
  display: grid; gap: 6px; border: 1px solid var(--edge);
  border-radius: 12px; background: var(--slab); padding: 12px 14px;
}
.lcell { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.lk { font-family: var(--code); font-size: 11px; letter-spacing: .12em; color: var(--ink-4) }
.lv { font-family: var(--code); font-variant-numeric: tabular-nums; color: var(--ink-2) }
.lv-c { color: var(--ink) }
.lv-w { color: var(--ink-4) }

/* ——— подвал: три столбца, четвёртого нет */

.feet {
  margin-top: clamp(34px, 5vw, 52px); border-top: 1px solid var(--edge);
  padding: 22px 2px 0; display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.feet-flat { margin-top: 26px }
.fcol { display: grid; gap: 9px; align-content: start }
.fcol a, .fcol span:not(.kicker) { font-size: 14px }
.onion {
  font-family: var(--code); padding: 22px 2px 0; font-size: 12px;
  color: var(--ink-4); word-break: break-all;
}

/* ——— ширины */

@media (min-width: 760px) {
  .two { grid-template-columns: minmax(0, 1fr) 260px }
  .ltab { gap: 0 }
  .lhead { display: grid; grid-template-columns: 1fr repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 14px 8px }
  .lhead span + span { text-align: right }
  .lrow { grid-template-columns: 1fr repeat(4, minmax(0, 1fr)); gap: 12px; border-radius: 0; border-top: none; background: none; padding: 10px 14px }
  .lrow:first-of-type { border-top: 1px solid var(--edge) }
  .lcell { display: block; text-align: right }
  .lcell:first-child { text-align: left }
  .lk { display: none }
}

@media (min-width: 880px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .t2 { grid-column: span 2 }
  .t3 { grid-column: span 3 }
  .t4 { grid-column: span 4 }
  .t6 { grid-column: span 6 }
}

/* Заголовок главной вместо 01 ORDER. Статичный: бегущая строка
   на приватном сервисе — лишнее движение и риск обрезки. */
.htag {
  font-size: clamp(19px, 3.4vw, 26px);
  color: var(--lime); letter-spacing: .04em;
  margin: 0; font-weight: 400; white-space: nowrap;
}

}


/* Блок сделки на странице депозита. Это главные цифры заказа —
   сколько отдал, сколько придёт, по какой ставке. Раньше шли
   мелким приглушённым текстом наравне со сносками, и человек
   их не находил. Теперь отдельная карточка с лаймовой рамкой. */
.deal-box {
  border: 1px solid var(--lime); border-radius: 14px;
  background: linear-gradient(180deg, rgba(200,255,0,.05), transparent);
  padding: clamp(14px, 2.6vw, 18px); margin: 0 0 14px;
}
.deal-box .kicker { color: var(--lime); }
.deal-facts {
  font-family: var(--code); display: flex; flex-wrap: wrap;
  gap: 10px 26px; margin-top: 10px;
  font-size: clamp(14px, 2.2vw, 16px); color: var(--ink-4);
}
.deal-facts .val {
  color: var(--ink); font-size: clamp(17px, 3vw, 21px);
  display: block; margin-top: 2px;
}
.deal-facts .val-rate { color: var(--lime); }


/* ОЧЕЛОВЕЧИВАНИЕ ТЕКСТОВЫХ СТРАНИЦ.
   Разметка уже структурна (part/kicker/bigger/say) — правим только
   подачу: даём глазу опоры, воздух и ширину. Слова не трогаем,
   тон остаётся суровым. Ноль скриптов, ноль svg — догма. */

/* Читаемая колонка шире узких 660: строка держит комфортные ~70
   знаков, но блоки дышат. На широком экране страница перестаёт
   жаться в левый угол. */
.col-read { max-width: 760px; }

/* Заголовок блока: был 11px серым — терялся. Делаем его якорем:
   лаймовая метка слева, чуть крупнее, с воздухом сверху. */
.col-read .kicker {
  font-size: 12px; letter-spacing: .16em;
  padding-left: 12px; position: relative;
}
.col-read .kicker::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 3px; height: 12px; background: var(--edge-2);
  border-radius: 2px;
}
.col-read .kicker-on { color: var(--lime); }
.col-read .kicker-on::before { background: var(--lime); }

/* Первая, ведущая строка блока — крупнее и светлее: глаз цепляется
   за неё, а пояснения ниже читает уже спокойно. */
.col-read .bigger {
  font-size: clamp(17px, 2.4vw, 20px); color: var(--ink);
  line-height: 1.4; margin: 2px 0 4px;
}

/* Пояснения: чуть светлее серого и с межстрочным простором —
   абзацы перестают слипаться в сплошную стену. */
.col-read .say {
  color: var(--ink-2); line-height: 1.62;
  max-width: 64ch;
}

/* Воздух между блоками больше — граница между темами читается
   как пауза, а не как строчка. */
.col-read .part {
  gap: 10px; padding-top: 26px; margin-top: 6px;
}

/* Вводная строка страницы («What is agreed, in full.») — крупная,
   задаёт тон, отделена от первого блока. */
.col-read .big {
  font-size: clamp(19px, 3vw, 24px); color: var(--ink-3);
  margin: 4px 0 8px;
}

/* ДВЕ КОЛОНКИ НА ШИРОКОМ ЭКРАНЕ.
   Пустая правая половина — потерянное место. Блоки внутри .col-read
   на десктопе текут в две колонки; на телефоне одна. Заголовок блока
   не разрывается посреди — break-inside защищает. */
@media (min-width: 1000px) {
  .col-read.col-flow { max-width: 1080px; columns: 2; column-gap: 56px; }
  .col-read.col-flow .part { break-inside: avoid; margin-top: 0; }
  .col-read.col-flow .big { columns: 1; column-span: all; }
}
/* Переключатель языков в шапке. Текущий язык — лаймом и без ссылки:
   уводить на страницу, где уже стоишь, незачем. */
.lang { letter-spacing: .12em; }
.lang a { color: var(--ink-4); text-decoration: none; }
.lang a:hover { color: var(--ink-2); }
.lang-on { color: var(--lime); }
.lang-sep { color: var(--edge-2); margin: 0 6px; }

/* ЦЕНТРИРОВАНИЕ ТЕКСТОВОЙ КОЛОНКИ.
   Была прижата влево при обёртке в 1160px — справа оставалась
   пустая половина. Сам текст остаётся выровненным по левому
   краю: центрировать строки в длинном тексте нельзя,
   глаз теряет начало строки. Центрируется КОЛОНКА, не буквы. */
.col { margin-left: auto; margin-right: auto; }
.col-read { margin-left: auto; margin-right: auto; }

/* Заголовок страницы живёт вне .col и оставался слева,
   когда колонка уехала в центр. Ставим ему ту же ширину
   и те же поля — шапка и текст выстраиваются по одной линии. */
.head { max-width: 760px; margin-left: auto; margin-right: auto; }
.col-read .head { max-width: 760px; }

/* Заголовок главной остаётся слева: он часть шапки потока
   заказа, а не текстовой страницы. Центрируется всё
   остальное. */
/* :has() ненадёжен на старом Firefox в Tor — метим классом. */
.head-left { margin-left: 0 !important; margin-right: auto !important; }
.htag { text-align: left; }

/* ВЫПАДАШКИ. <details> — родной тег, работает без скриптов,
   значит и на Safest. Первый блок страницы открыт: он несёт
   главное, прятать его незачем. */
details.fold { border-top: 1px solid var(--edge); padding-top: 26px; }
details.fold > summary {
  cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: 10px; padding: 2px 0;
}
details.fold > summary::-webkit-details-marker { display: none; }
/* Своя стрелка: треугольник браузера выглядит чужеродно
   в моноширинной вёрстке. */
details.fold > summary::after {
  content: +; margin-left: auto; color: var(--ink-4);
  font-family: var(--code); font-size: 15px;
}
details.fold[open] > summary::after { content: 2212; color: var(--lime); }
details.fold > summary:hover::after { color: var(--ink-2); }
details.fold > summary > h2 { margin: 0; }
details.fold > *:not(summary) { margin-top: 10px; }

/* LIVE. Горит, только пока курсы моложе трёх минут — иначе
   разметки нет вовсе. Это не украшение: индикатор гаснет сам,
   если цены перестали обновляться.
   Мигание — чистый CSS. На Safest с prefers-reduced-motion
   точка встаёт неподвижно и остаётся читаемой. */
.live { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .12em; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 6px var(--lime);
  animation: livepulse 2s ease-in-out infinite;
}
@keyframes livepulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none } }

/* ВЫРАВНИВАНИЕ ПАР КАРТОЧЕК. Правая в каждой паре проваливалась:
   под коротким текстом оставалась пустота, пока левая росла.
   align-items: stretch тянет обе до высоты большей. */
.bento { align-items: stretch; }
.tile { display: flex; flex-direction: column; }
/* Последний элемент карточки прижимается к низу — так подпись
   под полем выходит на одну линию в обеих колонках. */
.tile > .why, .tile > .say:last-child { margin-top: auto; }

/* Блок с ссылкой и кнопкой — flex-РЯД, а не колонка: я сделал
   .tile колонкой ради выравнивания пар, и .note:target с его
   flex:1 0 100% вылез за карточку. Возвращаем ряд там, где он
   и был, и запрещаем содержимому вылезать за границы. */
.tile:has(> .go) { flex-direction: row; flex-wrap: wrap; align-items: center; }
.note { min-width: 0; }
.note:target { max-width: 100%; }
.tile { overflow-wrap: anywhere; }

/* Верхние пределы в выпадашке: минимум решает, хватит ли у тебя,
   и этот вопрос встаёт первым. Максимум нужен единицам. */
.caps > summary {
  cursor: pointer; list-style: none; font-family: var(--code);
  font-size: 12px; letter-spacing: .08em; color: var(--ink-4);
  padding: 6px 0 2px;
}
.caps > summary::-webkit-details-marker { display: none }
.caps > summary::after { content: 

/* Верхние пределы в выпадашке. */
.caps > summary { cursor: pointer; list-style: none; font-family: var(--code); font-size: 12px; letter-spacing: .08em; color: var(--ink-4); padding: 6px 0 2px }
.caps > summary::-webkit-details-marker { display: none }
.caps > summary::after { content: