/* One theme, always light — no prefers-color-scheme variant. */
:root{
  color-scheme:light;
  --bg:#F8FAFC; --rail:#F1F5F9; --surface:#FFFFFF; --ink:#0F172A; --muted:#64748B;
  --rule:#E2E8F0; --accent:#10B981; --accent-strong:#059669; --accent-bg:#ECFDF5;
  --accent-border:#A7F3D0; --signal:#F59E0B; --ok:#059669; --radius:10px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font:14px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
h1{
  font-family:var(--sans); font-weight:800; line-height:1.15; margin:0 0 .45em;
  font-size:30px; letter-spacing:-.02em; color:var(--ink);
}
h1 .accent-text{color:var(--accent)}
h2{
  font-family:var(--sans); font-size:20px; font-weight:800; letter-spacing:-.01em;
  margin:1.75em 0 .75em; text-transform:none; color:var(--ink);
}
h3{font-family:var(--sans); font-size:14px; font-weight:700; margin:0 0 .4em; color:var(--ink)}
p{margin:0 0 1em; max-width:78ch; color:var(--ink)}
ul,ol{padding-inline-start:0}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.num,.price,td.num,td.price,input.num{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* ---- header ---- */
.site-head{
  position:sticky; top:0; z-index:30; background:#fff;
  border-bottom:1px solid #E2E8F0; height:52px;
}
.site-head-inner{
  height:100%; display:flex; align-items:center; gap:18px;
  padding:0 16px; max-width:100%;
}
.wordmark{
  display:inline-flex; align-items:center; color:#0F172A; text-decoration:none;
  flex:0 0 auto;
}
.wordmark:hover{text-decoration:none}
.wordmark .brandmark{height:26px; width:auto; display:block}
.site-nav{display:flex; gap:2px; flex:1 1 auto; align-items:center; min-width:0}
.site-nav a{
  color:#475569; font-size:12.5px; font-weight:500; white-space:nowrap;
  padding:5px 10px; border-radius:5px; text-decoration:none;
}
.site-nav a:hover{color:#0F172A; background:#F1F5F9; text-decoration:none}
.site-nav a.is-active{color:#0F172A; background:#F1F5F9; font-weight:600}
.auth-nav{display:flex; align-items:center; gap:8px; margin-inline-start:auto; flex:0 0 auto}
/* Переключатель языка рядом с авторизацией. Закрыт по умолчанию, чтобы
   не отбирать место у основного действия в шапке. */
.lang-switch{position:relative}
.lang-trigger{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid var(--rule); border-radius:8px; background:var(--surface);
  color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
}
.lang-trigger:hover{color:var(--ink); border-color:var(--muted)}
/* Языков третий десяток, и одной колонкой они уходят за нижний край
   экрана. Сетка в три колонки держит список целиком на виду; на узких
   экранах колонок становится меньше, а остаток списка прокручивается. */
.lang-menu{
  position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:60;
  display:grid; grid-template-columns:repeat(3,minmax(148px,1fr));
  gap:1px 2px; max-height:min(70vh,420px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  padding:5px; box-shadow:0 8px 24px -10px rgba(15,23,42,.22);
}
@media (max-width:760px){.lang-menu{grid-template-columns:repeat(2,minmax(140px,1fr))}}
@media (max-width:420px){.lang-menu{grid-template-columns:1fr; max-height:60vh}}
.lang-menu[hidden]{display:none}
.lang-option{
  display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px;
  font-size:13px; color:var(--ink); text-decoration:none; white-space:nowrap;
}
.lang-option .flag,.lang-trigger .flag{
  width:20px; height:15px; border-radius:2px; flex:0 0 auto; margin-inline-end:0;
}
.lang-trigger .flag-fallback,.lang-option .flag-fallback{font-size:9px}
.lang-option:hover{background:var(--rail); text-decoration:none}
.lang-option.is-current{color:var(--accent-strong); font-weight:600}
@media (max-width:640px){.lang-trigger span{display:none}}

.btn-ghost{
  display:inline-flex; align-items:center; color:#475569; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:5px; text-decoration:none; border:none; background:transparent;
  cursor:pointer; font-family:inherit;
}
.btn-ghost:hover{color:#0F172A; background:#F1F5F9; text-decoration:none}
.btn-ghost.as-btn{appearance:none}
.btn-signup{
  display:inline-flex; align-items:center; background:var(--accent-strong); color:#fff;
  font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:6px; text-decoration:none;
  border:1px solid var(--accent-strong);
}
.btn-signup:hover{background:#047857; border-color:#047857; color:#fff; text-decoration:none}

.auth-page{display:flex; justify-content:center; padding:24px 0 48px}
.auth-card,.auth-dialog{
  background:#fff; border-radius:16px; padding:32px 28px 28px; width:100%; max-width:420px;
  box-shadow:0 18px 50px rgba(15,23,42,.16); position:relative;
}
.auth-card h1,.auth-dialog h2{margin:0 0 8px; font-size:22px; letter-spacing:-.02em}
.auth-lead{color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 22px}
.auth-full{display:block; width:100%; text-align:center; box-sizing:border-box; padding:12px 18px}
.auth-or{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:18px 0}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:var(--rule)}
.auth-or span{white-space:nowrap}
.auth-secondary{
  display:block; width:100%; text-align:center; box-sizing:border-box;
  padding:12px 18px; border-radius:var(--radius); border:none; background:#EEF2F7;
  color:#1E293B; font-weight:700; font-size:14px; font-family:inherit; cursor:pointer; text-decoration:none;
}
.auth-secondary:hover{background:#E2E8F0; text-decoration:none; color:#0F172A}
.auth-x{
  position:absolute; top:14px; inset-inline-end:16px; border:none; background:transparent;
  font-size:22px; line-height:1; color:#64748B; cursor:pointer; padding:4px;
}
.auth-x:hover{color:#0F172A}
.auth-modal{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px}
.auth-modal[hidden]{display:none}
.auth-backdrop{position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(6px)}
.auth-dialog{position:relative; z-index:1; max-height:calc(100vh - 40px); overflow:auto}
.auth-error{color:#B45309; background:#FFF7ED; border:1px solid #FED7AA; border-radius:8px; padding:8px 10px; font-size:13px; margin:0 0 14px}
.auth-check{
  width:48px; height:48px; border-radius:999px; background:var(--accent-strong); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; margin:0 auto 14px;
}
.auth-card-seed,.auth-dialog [data-auth-panel="seed"]{text-align:center}
.auth-seed{
  display:block; width:100%; box-sizing:border-box; margin:0; padding:16px 12px;
  background:#0F172A; color:#34D399; font-family:var(--mono); font-size:20px; font-weight:700;
  letter-spacing:.04em; border:none; border-radius:10px; cursor:pointer;
}
.auth-copy-hint{margin:8px 0 16px; font-size:12px; color:var(--muted)}
.auth-warn{
  text-align:start; background:#FFFBEB; border:1px solid #F6E05E; border-radius:10px;
  padding:14px 16px; margin:0 0 20px; color:#92400E; font-size:13px; line-height:1.5;
}
.auth-warn strong{display:block; margin:0 0 6px; font-size:13.5px}
.auth-warn p{margin:0}
body.auth-open{overflow:hidden}
.balance-box{
  display:inline-flex; align-items:center; gap:6px; background:#ECFDF5; color:var(--accent-strong);
  font-size:13px; font-weight:700; padding:6px 12px 6px 10px; border-radius:8px; text-decoration:none;
  border:1px solid #A7F3D0; line-height:1;
}
.balance-box .balance-icon{flex:0 0 auto; color:var(--accent-strong)}
.balance-box:hover{background:#D1FAE5; text-decoration:none}
.btn-logout{
  border:none; background:transparent; color:#DC2626; font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; padding:5px 8px; border-radius:5px;
}
.btn-logout:hover{background:#FEF2F2; text-decoration:none}
.logout-form{display:inline}
/* Кнопка меню существует только на узком экране; на широком навигация
   стоит в строке и прятать её не за чем. */
.nav-toggle{
  display:none; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--rule); border-radius:8px; background:var(--surface);
  color:var(--muted); cursor:pointer; flex:0 0 auto;
}
.nav-toggle:hover{color:var(--ink); border-color:var(--muted)}
/* На широком экране обёртки нет: display:contents растворяет её, и
   навигация с кнопками входа остаются прямыми детьми строки шапки —
   ровно как до появления мобильного меню. */
.head-menu{display:contents}
.balance-slot,.lang-slot{display:flex; align-items:center; flex:0 0 auto}
/* Порядок в строке задаётся order, а не разметкой: баланс вынесен из
   меню отдельным элементом, чтобы на узком экране остаться в шапке, —
   а на широком он обязан стоять там же, где стоял. */
.site-nav{order:1}
.balance-slot{order:2; margin-inline-start:auto}
.auth-nav{order:3; margin-inline-start:0}
.lang-slot{order:4}
@media (max-width:760px){
  .site-head{height:52px}
  .site-head-inner{padding:0 12px; gap:10px}
  .nav-toggle{display:inline-flex; order:4}
  .balance-slot{order:2; margin-inline-start:auto}
  .lang-slot{order:3}
  /* Раньше навигация переносилась во вторую строку: шапка вырастала до
     92 пикселей и на каждой странице съедала полтора сантиметра экрана,
     а пять пунктов всё равно приходилось листать вбок. Теперь и ссылки,
     и кнопки входа уезжают в одну панель под шапкой — второго списка
     ссылок в документе не появляется. В строке остаётся только то, что
     нужно постоянно: марка, язык и кнопка меню. */
  .head-menu{
    display:none; position:absolute; inset-inline:0; top:100%; flex-direction:column;
    align-items:stretch; gap:2px; padding:8px; background:var(--surface);
    border-bottom:1px solid var(--rule); box-shadow:0 10px 24px -14px rgba(15,23,42,.3);
  }
  .site-head.is-nav-open .head-menu{display:flex}
  .site-nav{flex-direction:column; align-items:stretch; gap:2px}
  .site-nav a{padding:10px 12px; font-size:14px; text-align:start}
  /* Переехавшее меню кабинета — такие же строки, как ссылки навигации. */
  /* Порядок в панели задаётся order — разметка тут ни при чём: у
     .site-nav он уже стоит ради строки на широком экране. */
  .head-menu .dash-nav{display:flex; flex-direction:column; gap:2px; order:2; margin:6px 0 0; padding-top:8px; border-top:1px solid var(--rule)}
  .head-menu .dash-side-foot{order:3}

  .auth-nav{
    display:flex; flex-direction:column; align-items:stretch; gap:2px; order:4;
    margin:6px 0 0; padding-top:8px; border-top:1px solid var(--rule);
  }
  /* Всё меню — один список одинаковых строк. Кнопки входа в строке шапки
     выглядят кнопками не просто так, но в столбце из тринадцати пунктов
     пилюли и рамки вперемешку с обычными ссылками читаются как чужие
     вставки. Значки кабинета тоже убраны: половина строк с ними, половина
     без — это и есть та самая пестрота. */
  .head-menu a,.head-menu button,.head-menu .btn-ghost,.head-menu .btn-signup,
  .head-menu .btn-logout{
    display:block; width:100%; box-sizing:border-box; padding:10px 12px; margin:0;
    border:0; border-radius:8px; background:transparent; color:var(--ink);
    font:inherit; font-size:14px; font-weight:500; text-align:start; cursor:pointer;
  }
  .head-menu a:hover,.head-menu button:hover{background:var(--rail); text-decoration:none}
  .head-menu a.is-active,.head-menu .dash-nav-item.is-active{
    background:var(--accent-bg); color:var(--accent-strong); font-weight:600;
  }
  .head-menu .btn-signup{color:var(--accent-strong); font-weight:700}
  .head-menu .btn-logout{color:#DC2626}
  .head-menu .dash-nav-item svg,.head-menu .dash-side-foot svg{display:none}
  .head-menu .dash-nav-item{display:flex; align-items:center; justify-content:space-between}
}

[id]{scroll-margin-top:84px}
.crumbs{padding:12px 24px 0; color:var(--muted); font-size:12.5px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.site-main{padding:32px 20px 64px; max-width:1200px; margin:0 auto}
/* The home shell drops the centred max-width entirely — the rail and the
   order panel run flush to the window edge instead of floating in a
   1200px column, per the owner's explicit "not full width" complaint.
   Below the three-column breakpoint everything stacks into one column, so
   the small side padding comes back purely for mobile readability. */
.site-main.is-full{max-width:none; margin:0; padding:0}
@media (max-width:959px){
  .site-main.is-full{padding:16px 20px 48px}
}

/* ---- tables ---- */
/* Nowrap headers/price cells give every sortable table a minimum content
   width; at narrow viewports that minimum can exceed the page, and with
   nothing to contain it the whole page grows a horizontal scrollbar. Wrap
   the table in its own scroll container so only the table area scrolls
   sideways when it must, never the page. */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.table-scroll table{margin:1em 0}
table{width:100%; border-collapse:collapse; margin:1em 0}
th,td{text-align:start; padding:9px 10px; border-bottom:1px solid var(--rule)}
th{
  color:var(--muted); font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; white-space:nowrap;
}
th.sortable{cursor:pointer; user-select:none}
th.sortable::after{content:" \21C5"; color:var(--rule)}
th.num,td.num,td.price{text-align:end; white-space:nowrap; width:1%}
tr:hover td{background:var(--surface)}

/* ---- generic building blocks ---- */
.card,.surface{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:18px}
.badge{
  display:inline-block; border:1px solid var(--rule); border-radius:999px;
  padding:2px 8px; font-size:11px; font-weight:600; color:var(--muted);
}
.badge-accent{
  border-color:var(--accent-border); color:var(--accent); background:var(--accent-bg);
  vertical-align:middle; text-transform:uppercase; letter-spacing:.04em; font-size:10px;
}
button:hover,button:focus{
  cursor:pointer;
}
.cta{
  display:inline-block; background:var(--accent-strong); color:#fff; border:1px solid var(--accent-strong);
  border-radius:var(--radius); padding:11px 18px; font-weight:700; font-size:14px;
  box-shadow:0 1px 0 rgba(5,150,105,.25);
}
.cta:hover{text-decoration:none; background:#047857; border-color:#047857}
.cta.small{padding:7px 14px; font-size:13px; border-radius:8px}
.cta.outline{background:transparent; color:var(--accent-strong); box-shadow:none}
.cta.outline:hover{background:var(--accent-strong); color:#fff}
.notice{
  border-inline-start:2px solid var(--accent); padding-inline-start:10px; color:var(--muted); font-size:12.5px; max-width:64ch;
}
/* Ошибка поля, а не заметка на полях: .notice рисует зелёную черту и
   серый текст — для подсказки это верно, для «выберите монету» читается
   как совет, а не как причина, по которой форма не ушла. */
.field-error{margin:8px 0 0; color:#DC2626; font-size:12.5px; font-weight:500}
.ss.is-invalid .ss-trigger{border-color:#DC2626}
.big-price{font-size:44px; font-weight:800; letter-spacing:-.01em}
.addr{word-break:break-all}

/* ---- the arrived SMS code: the one place --signal appears ---- */
.sms-code{
  font-size:40px; font-weight:800; letter-spacing:.1em; color:var(--signal); margin:.3em 0 1em;
}
@media (prefers-reduced-motion: no-preference){
  .sms-code.is-arriving{animation:code-arrive .5s ease-out}
}
@keyframes code-arrive{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:translateY(0)}}

/* ---- forms ---- */
label{display:block; font-size:12.5px; color:var(--muted); margin:0 0 4px}
input[type=text],input[type=number],select,textarea{
  font:14px/1.4 var(--sans); color:var(--ink); background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:9px 11px; width:100%; max-width:26em;
}
select{max-width:16em}
textarea{max-width:100%; resize:vertical}
input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--accent)}
.field{margin:0 0 14px}
.radio-row{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.radio-row label{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--rule); border-radius:var(--radius);
  padding:6px 12px; font-size:13px; color:var(--ink); margin:0; cursor:pointer;
}
.radio-row input{margin:0}
.radio-row label:has(input:disabled){color:var(--muted); text-decoration:line-through; cursor:not-allowed}

/* ---- home: three-column picker ---- */
.home-columns{display:grid; grid-template-columns:1fr; grid-template-areas:"center" "rails" "order"; gap:24px; margin-top:0}
@media (min-width:960px){
  .home-columns{
    grid-template-columns:320px 1fr 280px; grid-template-areas:"rails center order";
    align-items:start; gap:0; padding:0;
  }
  .col-rails,.col-order{background:var(--rail); min-height:calc(100vh - 52px)}
  .col-center{background:var(--surface); padding:20px 28px 48px; border-inline:1px solid var(--rule)}
}
.col-center{grid-area:center; min-width:0}
/* Pre-existing bug, unrelated to this pass: below 960px .home-columns is a
   single 1fr column shared by all three stacked rows, so a grid item's
   default min-width:auto lets ANY one row's min-content (here, the rails)
   force that shared track wider than the viewport — every row, including
   col-center which already opts out, gets dragged along and the whole page
   grows a horizontal scrollbar. col-rails and col-order need the same
   opt-out col-center already has. */
.col-rails{grid-area:rails; display:flex; flex-direction:column; gap:4px; min-width:0}
.col-order{grid-area:order; min-width:0}
@media (min-width:960px){
  .col-order{position:sticky; top:52px; align-self:start; max-height:calc(100vh - 52px); overflow:auto}
}

/* Выбор на телефоне устроен как у соседей по рынку и не зря: две кнопки
   сверху, каждая раскрывает свой список на весь экран, выбор закрывает
   его и остаётся подписью на кнопке, а панель заказа приклеена снизу.
   Один экран — один вопрос, без прокрутки между шагами. На широком
   экране ничего этого нет: там списки и заказ стоят в колонках. */
.home-cta{display:none}
.sheet-close{display:none}
@media (max-width:959px){
  .home-cta{
    display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 18px;
  }
  /* Одна из двух кнопок — ссылка на страницу аренды, вторая открывает
     список: разметка разная, вид обязан быть одинаковым, поэтому здесь
     всё, что у кнопки и ссылки различается по умолчанию. */
  .home-cta-btn{
    display:flex; align-items:center; justify-content:center;
    padding:14px 12px; border:1px solid var(--accent); border-radius:var(--radius);
    background:var(--accent); color:#fff; font:inherit; font-size:14.5px;
    font-weight:700; line-height:1.2; text-align:center; text-decoration:none;
    cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    box-shadow:0 1px 0 rgba(5,150,105,.2); -webkit-appearance:none; appearance:none;
  }
  .home-cta-btn:hover{
    background:var(--accent-strong); border-color:var(--accent-strong);
    color:#fff; text-decoration:none;
  }
  /* Список на весь экран: своя шапка с крестиком, поиск сверху, дальше
     сам список во всю высоту. */
  /* Списки и заказ открываются под шапкой, а не поверх неё: марка и
     переключатель языка остаются на месте, и видно, что ты всё ещё на
     том же сайте, а не в отдельном приложении. */
  .col-rails .rail{
    display:none; position:fixed; inset:52px 0 0; z-index:90; margin:0;
    background:var(--surface); padding:14px 14px 40px; overflow-y:auto;
  }
  .col-rails .rail.is-open{display:block}
  .col-rails .rail .rail-title,.col-order.order-panel > h2{font-size:13px; padding-inline-end:40px}
  /* Открытый список занимает весь экран, поэтому своя коробка с прокруткой
     ему не нужна — прокручивается сам экран. Селектор с .is-open нужен по
     весу: базовое правило #countries-rail .rail-scroll стоит ниже по файлу
     и иначе перекрыло бы это. */
  #countries-rail.is-open .rail-scroll.rail-two-col,
  #services-rail.is-open .rail-scroll{max-height:none; overflow-y:visible}
  /* Крестик прибит к экрану, а не к началу списка: в списке из ста
     девяноста семи стран прокрутка уносит его наверх и закрыть становится
     нечем. */
  .sheet-close{
    display:block; position:fixed; inset-inline-end:12px; top:62px; z-index:95;
    width:34px; height:34px; border:1px solid var(--rule); border-radius:8px;
    background:var(--surface); color:var(--muted); font-size:20px; line-height:1;
    cursor:pointer; box-shadow:0 2px 8px -4px rgba(15,23,42,.35);
  }
  /* Панель заказа приклеена снизу и появляется, когда есть что показать:
     пустая карточка на полэкрана только мешала бы читать страницу. */
  /* Оба класса в селекторе не для веса ради веса: .order-panel ниже по
     файлу делает фон прозрачным — в колонке это верно, в приклеенной
     снизу панели сквозь неё просвечивала бы страница. */
  .col-order.order-panel{
    position:fixed; inset:52px 0 0; z-index:80; margin:0; min-height:0;
    overflow-y:auto; background:var(--surface); padding:12px 16px 24px;
  }
  /* Заказ должен читаться целиком, без прокрутки внутри: строки плотнее,
     список операторов не растёт вместе со страной. */
  .col-order .order-block{margin:0 0 10px}
  .col-order .op-row label{padding-top:7px; padding-bottom:7px}
  .col-order .order-price{margin:2px 0 10px}
  body:not(.has-order) .col-order{display:none}
  body.sheet-open{overflow:hidden}
}

/* Every rail is a fixed-height box with its own scrollbar — the point is
   that the picker fits in roughly one screen, not that every row is
   visible without scrolling. The filter input sits above the box, outside
   the scroll area, and stays put while its box scrolls. */
.rail{background:transparent; border:none; border-radius:0; padding:16px 14px 8px}
.rail-title{
  margin:0 0 8px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
}
.rail-filter{
  margin-bottom:8px; max-width:none; width:100%; background:var(--surface); border-radius:8px;
  border-color:var(--rule); font-size:13px;
}
.rail-scroll{
  max-height:220px; overflow-x:hidden; overflow-y:auto; border-top:none; padding-top:2px;
  min-width:0;
}
#countries-rail{padding:12px 12px 2px}
#countries-rail .rail-title{margin-bottom:6px}
#countries-rail .rail-filter{margin-bottom:6px; padding:7px 10px; font-size:12.5px}
#countries-rail .rail-scroll{
  max-height:240px; overflow-x:hidden; overflow-y:scroll;
  scrollbar-width:thin; scrollbar-color:#CBD5E1 transparent;
}
#countries-rail .rail-scroll::-webkit-scrollbar{width:6px}
#countries-rail .rail-scroll::-webkit-scrollbar-track{background:transparent}
#countries-rail .rail-scroll::-webkit-scrollbar-thumb{
  background:#CBD5E1; border-radius:3px;
}
#countries-rail .rail-scroll.rail-two-col{
  display:flex; gap:4px 8px; align-items:flex-start;
}
/* The two columns are a flex row of two <ul>s (the id-scoped rule above wins
   over the grid one), so filtering collapses them by switching to a column.
   align-items:stretch is the load-bearing half: the base rule sets
   flex-start, which in column direction makes every row hug its own text —
   that is why a lone "Spain" sat in a 70px box inside a 296px rail. */
#countries-rail .rail-scroll.rail-two-col.is-filtering{
  flex-direction:column; align-items:stretch; gap:0;
}
#countries-rail .rail-scroll.rail-two-col.is-filtering .rail-list{
  display:contents;
}
#countries-rail .rail-list{flex:1 1 0; min-width:0}
#countries-rail .rail-list li{margin:0; padding:0; line-height:0}
#countries-rail .rail-list a{
  height:24px; padding:0 4px; font-size:12px; gap:6px; border-radius:3px; line-height:1;
}
#countries-rail .rail-two-col .flag{width:24px; height:18px; border-radius:2px}
#services-rail{padding-top:8px}
/* На широком экране список сервисов не ограничен: левая колонка сама по
   себе один длинный столбец, и внутренний скролл в ней только мешал бы.
   На узком экране список открывается на весь экран и тоже не нуждается в
   собственной коробке — прокручивается сам экран. */
#services-rail .rail-scroll{max-height:none; overflow-y:visible}
@media (max-width:959px){
  /* Обе подсказки объясняют трёхколоночную раскладку: «списки слева»,
     «цена справа». В одну колонку они складываются сверху вниз, и текст
     начинает врать. Правильнее было бы переписать сами строки без сторон
     света, но это 25 словарей; пока подсказка просто убрана там, где
     неверна, — рядом и так стоит то, о чём она говорит. */
  .path-go,.col-order .invite{display:none}
}
.rail-scroll.rail-two-col{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 8px; align-content:start;
}
.rail-list{list-style:none; margin:0; padding:0; min-width:0}
.rail-list a{
  display:flex; align-items:center; gap:7px; height:28px; padding:0 6px; color:var(--ink); font-size:13px;
  border-radius:6px; min-width:0; max-width:100%; overflow:hidden;
}
.rail-list a:hover{color:var(--accent-strong); background:var(--surface); text-decoration:none}
.rail-list a.is-selected{color:var(--accent-strong); font-weight:700; background:var(--surface)}
.rail-list .rail-dial{color:var(--muted); font-size:11px; white-space:nowrap; flex:0 0 auto}
/* Two-col country rows are too narrow for flag + name + dial — dial lives in title/data. */
.rail-two-col .rail-dial{display:none}
.rail-list .rail-name{flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.rail-list .rail-price{color:var(--muted); white-space:nowrap; flex:0 0 auto; font-size:12px}
.rail-empty{color:var(--muted); font-size:12.5px; padding:6px 4px; grid-column:1/-1}

.rail-two-col .flag{margin-inline-end:0; width:24px; height:18px}

.tile{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:5px; font-size:11px; font-weight:700;
  color:var(--ink); line-height:1;
}
.tile svg{width:14px; height:14px; display:block}
.tile-neutral{background:var(--rail); color:var(--muted)}
/* A service with a real brand mark gets no tile at all — the glyph, in its
   own (contrast-checked) brand colour, sits directly on the page. The tile
   box is kept only as an invisible frame so rail rows stay aligned with the
   lettered fallback tiles beside them. */
.tile-glyph{background:none; border-radius:0}
/* The glyph itself: a vendored, cached SVG file clipped to a shape by
   mask-image and painted with a plain background-color — a brand colour
   without ever inlining the icon's own path data into the page. --tile-icon
   starts unset (mask:none, nothing painted) and is only set once js()'s
   IntersectionObserver decides the icon is close enough to the viewport to
   be worth a request; --tile-color is a bare hex string and costs nothing
   to set upfront. */
.icon-mask{
  display:block; width:18px; height:18px; background-color:var(--tile-color);
  -webkit-mask:var(--tile-icon,none) center/contain no-repeat;
  mask:var(--tile-icon,none) center/contain no-repeat;
}
/* A handful of vendored coin marks (USDC, TRX) are already a full-colour
   brand disc with a white glyph, not the single-path monochrome shape the
   mask above expects — masking one of these would flatten it to a plain
   filled circle and throw its colour away. Those render as a normal,
   un-tinted <img> instead; see Layout::coinIconHtml(). */
.coin-icon-colored{display:block; width:18px; height:18px; object-fit:contain}
/* A coin's inline label in a dense table row: the mark sits at the text's
   own cap height (1em) rather than the picker's fixed 18px, so it never
   pushes the row taller or breaks the column's vertical alignment. */
.coin-label{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.coin-label-mark{display:inline-flex; flex:0 0 auto; width:1em; height:1em}
.coin-label-mark .icon-mask,.coin-label-mark .coin-icon-colored{width:1em; height:1em}
.coin-label-net{color:var(--muted)}

/* ---- mobile-operator toggle buttons: real radios, styled as buttons ---- */
.op-toggle-row{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.op-toggle{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:6px 12px; font-size:13px; color:var(--ink); cursor:pointer; background:var(--surface);
  box-shadow:none; outline:none;
}
.op-toggle:has(input:checked){
  border-color:var(--accent-strong); color:var(--accent-strong); background:var(--accent-bg);
}
.op-toggle:has(input:focus-visible){
  border-color:var(--accent-strong);
  box-shadow:0 0 0 2px rgba(5,150,105,.25);
}
.op-toggle.is-disabled{color:var(--muted); cursor:not-allowed; background:var(--rail); border-color:var(--rule)}
.op-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.op-mark{display:inline-flex; width:16px; height:16px; flex:0 0 auto}
.op-mark svg,.op-mark img{width:100%; height:100%; display:block; object-fit:contain; border-radius:2px}

/* Real flags, not emoji — a hairline border keeps a white flag (e.g. Poland)
   visible against a white panel. */
.flag{
  flex:0 0 auto; width:24px; height:18px; border:1px solid var(--rule); border-radius:2px;
  vertical-align:middle; object-fit:cover; margin-inline-end:6px;
  background:var(--rail);
}
.flag-fallback{
  display:inline-flex; align-items:center; justify-content:center; background:var(--rail);
  color:var(--muted); font-size:8px; font-weight:700; width:24px; height:18px;
}

.order-panel{
  background:transparent; border:none; border-radius:0; padding:18px 14px;
  min-height:280px;
}
.order-panel .invite{color:var(--muted); margin:0 0 12px; text-align:center; font-size:13.5px}
.order-panel .empty-art{display:block; width:56px; height:auto; margin:40px auto 16px}
.order-panel > h2{
  margin-top:0; margin-bottom:16px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
}
.order-panel .field{margin:0 0 16px}
.order-panel .cta{display:block; text-align:center}

/* ---- order panel: filled state, built client-side from the two rails ---- */
.order-block{margin:0 0 14px}
.order-label{
  margin:0 0 5px; font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.order-value{display:flex; align-items:center; gap:7px; margin:0; font-size:14px; font-weight:700}
.op-row-list{
  list-style:none; margin:0; padding:0; border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; background:var(--surface);
}
.op-row{border-top:1px solid var(--rule)}
.op-row:first-child{
  border-top:none;
  border-top-left-radius:calc(var(--radius) - 1px);
  border-top-right-radius:calc(var(--radius) - 1px);
}
.op-row:last-child{
  border-bottom-left-radius:calc(var(--radius) - 1px);
  border-bottom-right-radius:calc(var(--radius) - 1px);
}
.op-row:only-child{border-radius:calc(var(--radius) - 1px)}
.op-row label{
  display:flex; align-items:center; gap:8px; padding:8px 10px; margin:0; cursor:pointer; font-size:13px;
  color:var(--ink);
}
.op-row:has(input:checked){background:var(--accent-bg); box-shadow:inset 0 0 0 1px var(--accent)}
.op-row:has(input:checked) label{color:var(--accent); font-weight:700}
.op-row:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:-2px; border-radius:inherit}
.op-row-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.op-row-price{color:var(--muted); white-space:nowrap}
.op-row:has(input:checked) .op-row-price{color:var(--accent)}
.op-row-spacer{width:9px; flex:0 0 auto}
.order-price{text-align:center; margin:16px 0}
.order-price .amount{margin:0; font-size:32px; font-weight:800; letter-spacing:-.01em}
.order-price .per{margin:2px 0 0; font-size:11.5px; color:var(--muted)}
.order-fine{margin:10px 0 0; font-size:12px; color:var(--muted); text-align:center}

/* ---- home: long-term rental panel ---- */
.rental-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; margin-bottom:.85em}
.rental-head h2{margin:0; flex:1 1 auto; font-size:18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
/* Страна и оператор делят первую строку, срок занимает всю вторую: в
   три колонки четыре кнопки срока не помещались и «90 days» обрезалось. */
.rental-form{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-bottom:0}
/* Метки как на /rental — мелкие прописные вместо строчных 13px: и
   единообразно, и панель ниже. */
.rental-panel .rental-form label{
  display:block; font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px;
}
.rental-form .field{min-width:0}
.rental-form .field:last-child{grid-column:1 / -1}
.rental-form select{max-width:none; width:100%}
.rental-form .dur-row{gap:8px}
.rental-form .dur-btn{flex:1 1 0}
.rental-panel .cta{display:block; width:100%; text-align:center; margin:6px 0 10px}
.rental-panel .cta:disabled{opacity:1; cursor:default}
@media (max-width:640px){.rental-form{grid-template-columns:1fr 1fr} .rental-form .field:nth-child(3){grid-column:1/-1}}
@media (max-width:440px){.rental-form{grid-template-columns:1fr}}

/* ---- home: panels ---- */
.panel{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:22px; margin:0 0 18px; box-shadow:0 1px 2px rgba(6,40,31,.04);
}
.panel h2:first-child{margin-top:0}
.panel > .section-head:first-child h2{margin-top:0}

.home-hero{
  background:var(--accent-bg); border:1px solid var(--accent-border);
  border-radius:16px; padding:28px 30px; margin:0 0 22px;
  display:flex; align-items:center; gap:28px;
}
.home-hero-copy{min-width:0; flex:1 1 auto}
.home-hero-art{flex:0 0 auto; display:none}
.home-hero-art svg{display:block; width:240px; height:auto}
/* The three-column shell's centre track is a flexible 1fr between two fixed
   600px rails, so its own width only grows past "roomy" well beyond the
   960px point where the columns themselves appear — from 960px up to
   somewhere past 1200px there is real width for the picker but not enough
   left over, after this panel's own padding, for a 240px illustration next
   to the copy without squeezing the fact chips. Reveal the art only once
   there is genuinely spare room, rather than at the layout's own
   breakpoint. */
@media (min-width:1280px){
  .home-hero-art{display:block}
}
.home-hero h1{
  font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.2;
  max-width:22em; margin:0 0 .55em; color:var(--ink);
}
/* «No KYC» переносилось по слогам смысла: No оставалось наверху, KYC
   уезжало вниз в одиночестве. Переносится целиком. */
.home-hero h1 em{font-style:normal; color:var(--accent-strong); white-space:nowrap}
.home-hero p.lede-strong{
  font-size:14.5px; line-height:1.6; color:#1E293B; font-weight:600; max-width:68ch; margin:0 0 10px;
}
.home-hero p.lede{
  font-size:14px; line-height:1.6; color:#475569; max-width:68ch; margin:0 0 16px;
}
.hero-stats{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;
}
.hero-stats li{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--accent-border); border-radius:999px;
  padding:6px 12px 6px 10px; font-size:12.5px; color:var(--ink); font-weight:500;
}
.hero-stats li::before{
  content:""; width:14px; height:14px; flex:0 0 auto; border-radius:50%;
  background:var(--accent-strong);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.3 11.2 3.6 8.5l1.2-1.2 1.5 1.5 4.9-4.9 1.2 1.2z'/></svg>") center/12px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.3 11.2 3.6 8.5l1.2-1.2 1.5 1.5 4.9-4.9 1.2 1.2z'/></svg>") center/12px no-repeat;
}
@media (max-width:640px){
  .home-hero{padding:22px}
}

/* Два сценария названы рядом и одинаково: раньше разовый код нигде не
   был назван вовсе — он просто «происходил» в рельсах, — и отличить его
   от аренды было не по чему. */
.paths{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 18px}
.path{padding:0 0 0 2px}
.path-mark{display:block; width:40px; height:22px; color:var(--accent); margin:0 0 10px}
.path h3{margin:0 0 5px; font-size:15px; letter-spacing:-.01em}
.path p{margin:0 0 5px; font-size:13px; color:var(--muted); line-height:1.5}
.path .path-go{margin:0; font-size:12.5px; color:var(--muted)}
.path .path-go strong{color:var(--ink); font-weight:600}
/* Два сценария остаются рядом и на телефоне: их сравнивают друг с другом,
   а в столбик второй уезжает под сгиб и сравнение распадается. Текст
   ужимается, карточки получают рамку — иначе в узкой колонке не видно,
   где кончается один и начинается другой. */
@media (max-width:720px){
  .paths{grid-template-columns:1fr 1fr; gap:10px}
  .path{
    padding:12px; border:1px solid var(--rule); border-radius:var(--radius);
    background:var(--surface);
  }
  .path-mark{width:32px; height:18px; margin:0 0 8px}
  .path h3{font-size:14px}
  .path p{font-size:12.5px; line-height:1.45}
}

.steps{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px;
  background:transparent; border:none;
}
.steps li{
  background:var(--surface); padding:16px; border:1px solid var(--rule); border-radius:12px;
}
.step-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px; margin-bottom:10px;
  background:var(--accent); color:#fff; font-size:13px; font-weight:800;
}
.steps h3{margin-bottom:.35em; color:var(--ink); font-size:14px; letter-spacing:0; text-transform:none; font-weight:700}
.steps p{margin:0; font-size:13px; color:var(--muted); max-width:none}
@media (max-width:640px){.steps{grid-template-columns:1fr}}

.tile-grid{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px; background:transparent; border:none;
}
.tile-grid li{
  background:var(--surface); padding:14px; border:1px solid var(--rule); border-radius:12px;
  transition:border-color .15s, box-shadow .15s;
}
.tile-grid li:hover{border-color:var(--accent-border); box-shadow:0 4px 14px rgba(16,185,129,.12)}
.tile-grid .tile-head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.tile-grid .tile-name{font-weight:700; font-size:13.5px}
.tile-grid .tile-price{display:block; color:var(--muted); font-size:12.5px; margin-bottom:8px}
.tile-grid a.tile-link{font-size:12.5px; font-weight:600}
@media (max-width:760px){.tile-grid{grid-template-columns:repeat(2,1fr)}}

/* minmax(0,1fr), а не 1fr: у элемента сетки min-width по умолчанию равен
   его содержимому, и «United Kingdom» с флагом и кодом просто не давал
   колонке сжаться — плитки вылезали за край карточки. */
.chip-row{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
}
.chip-row a{
  display:flex; align-items:center; gap:8px; border:1px solid var(--rule); border-radius:12px;
  padding:10px 12px; font-size:13px; font-weight:600; color:var(--ink); background:var(--surface);
  min-width:0; height:100%;
}
/* Имя переносится по словам и не обрезается: «Нидер…» экономит строку
   ценой узнаваемости, а плитка здесь именно для узнавания. Высоту ряда
   держит height:100% на ссылке — иначе соседняя плитка в одну строку
   оказывается ниже. */
.chip-row .chip-name{min-width:0}
.chip-row a:hover{border-color:var(--accent-border); background:var(--accent-bg); color:var(--accent-strong); text-decoration:none}
.chip-row .num{color:var(--muted); font-size:12px; font-weight:500; margin-inline-start:auto}
@media (max-width:640px){
  .chip-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Телефонный код уступает место названию: в две колонки он забирает
     треть плитки, а «Нидерланды» после этого не помещаются целым словом.
     Код есть на самой странице страны, ради которой сюда и жмут. */
  .chip-row .num{display:none}
}

.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:1em; margin-bottom:.35em}
.section-head h2{margin-bottom:.55em; flex:1}
.section-head a{font-size:13px; font-weight:600; white-space:nowrap}

/* Вопрос-заголовок, ответ-абзац: модель извлекает фрагмент, а не
   страницу, и заголовок с формулировкой вопроса — куда более сильный
   якорь, чем термин списка определений. */
.faq-q{
  margin:26px 0 6px; font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.35;
}
.faq-q:first-child{margin-top:0}
.faq-a{margin:0 0 4px; line-height:1.65; max-width:80ch; color:var(--ink)}
.faq details{border:1px solid var(--rule); border-radius:12px; padding:0; margin:0 0 8px; background:var(--surface)}
.faq summary{
  font-weight:600; cursor:pointer; font-size:14px; padding:14px 16px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent-strong); font-size:18px; font-weight:500; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--accent-strong)}
.faq .faq-a{margin:0 0 4px; color:var(--ink); line-height:1.65; max-width:80ch}
.faq dt{font-weight:700; margin-top:1.2em}
.faq dd{margin:.3em 0 0; color:var(--muted)}

.how-lede{margin:-.2em 0 1em; color:var(--muted); font-size:14px; max-width:none}

/* ---- catalog listing pages (/countries, /services) ---- */
.catalog-page{max-width:960px; margin:0 auto; padding:24px 20px 48px}
.catalog-page h1{margin-bottom:4px}
.catalog-intro{color:var(--muted); font-size:14.5px; margin:0 0 18px; max-width:none}
/* Подпись под H1 на всех разделах выглядит одинаково: на части страниц
   она была .catalog-intro и приглушённой, на части .lede-strong и цвета
   основного текста. Домашний герой со своим правилом не затронут. */
.catalog-page > .lede-strong,
.apidoc-section > .lede-strong,
.legal-page > .lede{
  color:var(--muted); font-size:14.5px; margin:0 0 18px; max-width:78ch; font-weight:400;
}
.catalog-search{
  font:14px/1.4 var(--sans); color:var(--ink); background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:10px 14px; width:100%; max-width:100%; margin:0 0 16px;
  box-sizing:border-box;
}
.catalog-search:focus{border-color:var(--accent); outline:none}

/* country grid */
.country-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px;
}
.country-card{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface);
  color:var(--ink); text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
.country-card:hover{border-color:var(--accent-border); box-shadow:0 2px 8px rgba(16,185,129,.10); text-decoration:none}
.country-card .flag{width:28px; height:21px; flex:0 0 auto; margin:0}
.country-card-body{display:flex; flex-direction:column; min-width:0}
.country-card-name{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.country-card-meta{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.country-page h1{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px}
.country-page h1 .flag{width:32px; height:24px}
.country-hero p{max-width:78ch; color:#334155; line-height:1.6; margin:0 0 20px}
.country-stats{display:flex; flex-wrap:wrap; gap:18px 28px; margin:0 0 28px}
.country-stats div{display:flex; flex-direction:column; gap:2px}
.country-stats strong{font-size:26px; font-weight:800; letter-spacing:-.03em}
.country-stats span{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.country-lock{
  display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:38px; box-sizing:border-box;
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--rail); font-size:14px;
}
.country-lock .flag{width:20px; height:15px}
.country-page .order-configurator{margin:0 0 32px}
.country-page .order-configurator .cta{display:inline-block; margin-top:12px}
.cta.is-disabled{opacity:.45; pointer-events:none; cursor:default}
.svc-chip.is-picked,.svc-name.is-picked{outline:2px solid var(--accent); outline-offset:1px; border-radius:8px}
.op-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; margin:0 0 32px}
.op-card{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border:1px solid var(--rule); border-radius:12px; background:var(--surface);
}
.op-card strong{display:block; font-size:14px}
.op-card span{display:block; font-size:12px; color:var(--muted)}
.svc-name{display:inline-flex; align-items:center; gap:8px; font-weight:600}
.buy-link{font-weight:700; font-size:13px; white-space:nowrap}
.svc-cat{margin:0 0 28px}
.svc-cat h3{margin:0 0 10px; font-size:16px}
.svc-cat h3 span{color:var(--muted); font-weight:500; font-size:13px}
.svc-chips{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px}
.svc-chip{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid var(--rule); border-radius:10px; background:var(--surface);
  color:var(--ink); text-decoration:none; min-width:0;
}
.svc-chip:hover{border-color:var(--accent-border); text-decoration:none}
.svc-chip-name{flex:1 1 auto; min-width:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.svc-chip-price{font-size:12.5px; font-weight:700; color:var(--accent-strong)}
.country-seo{margin:8px 0 32px; max-width:78ch}
.country-seo p{color:#475569; line-height:1.65}
.other-countries{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; margin:0 0 16px}
.other-country{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border:1px solid var(--rule); border-radius:12px; background:var(--surface);
  color:var(--ink); text-decoration:none;
}
.other-country:hover{border-color:var(--accent-border); text-decoration:none}
.other-country span{display:flex; flex-direction:column; min-width:0}
.other-country strong{font-size:14px}
.other-country span span{font-size:12px; color:var(--muted)}

/* service grid */
.service-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px;
}
.service-card{
  display:flex; flex-direction:column; gap:8px; padding:14px;
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface);
  color:var(--ink); text-decoration:none; transition:border-color .15s, box-shadow .15s;
  height:100%;
}
.service-card:hover{border-color:var(--accent-border); box-shadow:0 2px 8px rgba(16,185,129,.10); text-decoration:none}
.service-card-head{display:flex; align-items:center; gap:8px}
.service-card-name{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.service-card-meta{display:flex; align-items:center; justify-content:space-between; gap:8px}
.service-card-price{font-weight:700; font-size:13px; color:var(--accent-strong)}
.service-card .badge{font-size:10px}

/* category tabs */
.cat-tabs{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px}
.cat-tab{
  padding:5px 12px; font-size:12.5px; font-weight:600; border:1px solid var(--rule);
  border-radius:999px; background:var(--surface); color:var(--muted); cursor:pointer;
  transition:all .15s;
}
.cat-tab:hover{border-color:var(--accent-border); color:var(--ink)}
.cat-tab.is-active{background:var(--accent-bg); border-color:var(--accent-border); color:var(--accent-strong)}

@media (max-width:640px){
  .country-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr))}
}

/* ---- rental page ---- */
.rental-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin:0 0 40px;
}
.rental-card{
  position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:24px 20px; text-align:center; transition:border-color .15s, box-shadow .15s;
}
.rental-card:hover{border-color:var(--accent-border); box-shadow:0 4px 16px rgba(16,185,129,.10)}
.rental-card-popular{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.rental-card .badge{position:absolute; top:-10px; left:50%; transform:translateX(-50%); white-space:nowrap}
.rental-duration{font-weight:700; font-size:15px; margin:0 0 2px; color:var(--ink)}
.rental-days{font-size:13px; color:var(--muted); margin:0 0 12px}
.rental-price{font-size:28px; font-weight:800; margin:0 0 2px; color:var(--ink); letter-spacing:-.02em}
.rental-daily{font-size:12px; color:var(--muted); margin:0}

.rental-how{margin:0 0 40px}
.rental-how h2{margin-bottom:16px}

.rental-compare{margin:0 0 32px}
.rental-compare table{width:100%}
.rental-compare th:first-child{width:25%}
.rental-compare th{text-align:center}
.rental-compare td:not(:first-child){text-align:center}

td.accent{color:var(--accent-strong)}

/* searchable select */
.ss{position:relative}
.ss-trigger{
  display:flex; align-items:center; gap:8px; padding:8px 12px; width:100%; box-sizing:border-box;
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface);
  cursor:pointer; font-size:14px; color:var(--ink); min-height:38px;
}
.ss-trigger:hover{border-color:var(--accent-border)}
.ss-trigger.is-open{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.ss-trigger .ss-flag{width:20px; height:15px; object-fit:cover; border-radius:2px; flex-shrink:0}
.ss-trigger .ss-op-icon{width:16px; height:16px; object-fit:contain; border-radius:2px; flex-shrink:0}
.ss-trigger .ss-op-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0}
.ss-trigger .tile{flex-shrink:0}
.ss-trigger .ss-amount{margin-inline-start:auto; font-size:12.5px; color:var(--muted); white-space:nowrap}
.ss-trigger .ss-amount + .ss-arrow{margin-inline-start:0}
.ss-trigger .ss-arrow{margin-inline-start:auto; font-size:10px; color:var(--muted); transition:transform .15s}
.ss-trigger.is-open .ss-arrow{transform:rotate(180deg)}
.ss-placeholder{color:var(--muted)}
.ss-drop{
  position:absolute; top:100%; inset-inline:0; z-index:50; margin-top:4px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:260px; display:flex; flex-direction:column;
}
.ss-search{
  padding:8px 12px; border:none; border-bottom:1px solid var(--rule); outline:none;
  font-size:13px; width:100%; box-sizing:border-box; background:transparent; color:var(--ink);
}
.ss-list{overflow-y:auto; flex:1; padding:4px 0}
.ss-close{display:none}
/* Выпадающий список на телефоне открывается на весь экран под шапкой:
   в конце длинной формы он иначе вылезает за нижний край, и до строк
   приходится доскроливать страницу вслепую. */
@media (max-width:760px){
  .ss-drop{
    position:fixed; inset:52px 0 0; z-index:90; margin:0; max-height:none;
    border:0; border-radius:0; box-shadow:none;
  }
  .ss-search{padding:14px 52px 14px 16px; font-size:15px}
  .ss-list{padding:4px 0 40px}
  .ss-opt{padding:12px 16px}
  .ss-close{
    display:block; position:fixed; inset-inline-end:12px; top:62px; z-index:95;
    width:34px; height:34px; border:1px solid var(--rule); border-radius:8px;
    background:var(--surface); color:var(--muted); font-size:20px; line-height:1;
    cursor:pointer;
  }
}
.ss-opt{
  display:flex; align-items:center; gap:8px; padding:7px 12px; cursor:pointer;
  font-size:13px; color:var(--ink); transition:background .1s;
}
.ss-opt:hover,.ss-opt.is-hl{background:var(--accent-bg)}
.ss-opt .ss-flag{width:20px; height:15px; object-fit:cover; border-radius:2px; flex-shrink:0}
.ss-opt .ss-op-icon{width:16px; height:16px; object-fit:contain; border-radius:2px; flex-shrink:0}
.ss-opt .ss-op-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0}
.ss-opt .tile{flex-shrink:0}
.ss-opt .ss-dial{color:var(--muted); font-size:12px; margin-inline-start:auto}
.ss-opt .ss-amount{color:var(--muted); font-size:12.5px; margin-inline-start:auto; white-space:nowrap}
.ss-group-label{
  padding:8px 12px 4px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.ss-text-sub{color:var(--muted); font-weight:500; font-size:.92em}

/* ---- account dashboard ---- */
.dash{display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; align-items:start; margin:0 0 24px}
.dash-side{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:14px;
  position:sticky; top:68px;
}
.dash-balance{
  background:linear-gradient(160deg,#047857,#059669); color:#fff; border-radius:12px;
  padding:18px 16px; margin:0 0 14px; text-align:center;
}
.dash-balance-amount{margin:0 0 12px; font-size:28px; font-weight:800; letter-spacing:-.02em; color:#fff}
.dash-balance-sub .dash-balance-amount{font-size:18px; margin:0 0 6px}
.dash-balance-note{margin:0; font-size:12px; color:rgba(255,255,255,.85)}
.dash-add-funds{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  background:rgba(255,255,255,.92); color:#047857; font-weight:700; font-size:13px;
  border-radius:8px; padding:9px 12px; text-decoration:none;
}
.dash-add-funds:hover{background:#fff; text-decoration:none}
.dash-nav{display:flex; flex-direction:column; gap:2px}
.dash-nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  color:var(--ink); font-size:13.5px; font-weight:500; text-decoration:none; position:relative;
}
.dash-nav-item:hover{background:var(--rail); text-decoration:none}
.dash-nav-item.is-active{
  background:var(--accent-bg); color:var(--accent-strong); font-weight:700;
}
.dash-ico{width:18px; height:18px; flex:0 0 auto}
.dash-badge{
  margin-inline-start:auto; background:#F59E0B; color:#fff; font-size:11px; font-weight:800;
  width:18px; height:18px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center;
}
.dash-side-foot{margin-top:12px; padding-top:12px; border-top:1px solid var(--rule)}
.dash-main{min-width:0}
.dash p{max-width:none}
.dash-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 18px}
.dash-stat{
  background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:16px 18px;
}
.dash-stat-icon{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:10px; margin-bottom:10px;
}
.dash-stat-green{background:#ECFDF5; color:#059669}
.dash-stat-blue{background:#EFF6FF; color:#2563EB}
.dash-stat-purple{background:#F5F3FF; color:#7C3AED}
.dash-stat-value{margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em}
.dash-stat-label{margin:4px 0 0; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.dash-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#EFF6FF; border:1px solid #BFDBFE; border-radius:12px; padding:14px 18px; margin:0 0 24px;
}
.dash-banner strong{display:block; margin:0 0 2px}
.dash-banner p{margin:0; color:#1E3A8A; font-size:13px}
.dash-banner a{white-space:nowrap; font-weight:700}
.dash-banner-green{background:var(--accent-bg); border-color:var(--accent-border)}
.dash-banner-green p{color:#065F46}
.dash-section-title{
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.dash-empty{
  border:1.5px dashed var(--rule); border-radius:14px; padding:48px 20px; text-align:center; color:var(--muted);
  background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.dash-empty-tall{padding:64px 24px; min-height:320px}
.dash-empty p{margin:0; max-width:none}
.dash-empty-title{
  margin:0 0 8px !important; font-size:18px; font-weight:800; letter-spacing:-.01em;
  color:var(--ink); line-height:1.3;
}
.dash-empty-lead{
  margin:0 0 20px !important; font-size:14px; line-height:1.55; color:var(--muted);
  max-width:42ch !important;
}
.dash-empty-action{margin:0 !important}
.dash-empty .empty-art{width:48px; height:auto; margin:0 0 14px; opacity:.7; display:block}
.dash-empty-ico{width:40px; height:40px; margin:0 0 12px; color:#CBD5E1; display:block}
.dash-lock-icon{display:inline-flex; color:var(--accent-strong); margin-bottom:12px}
.dash-lock-icon .dash-ico{width:28px; height:28px}
.dash-more{margin:12px 0 0}
.dash-muted{color:var(--muted)}
.dash-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:20px; margin:0 0 16px;
}
.dash-card h2{font-size:16px; margin:0 0 12px}
.dash-card-lead{margin:0 0 12px; color:var(--muted); font-size:13px}
.dash-presets{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:22px 10px; margin:6px 0 18px}
.dash-preset{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:14px 12px 12px;
  cursor:pointer; font:inherit; text-align:center; width:100%;
}
.dash-preset:hover{border-color:var(--accent-border)}
.dash-preset.is-active{border-color:var(--accent-strong); box-shadow:0 0 0 1px var(--accent-strong); background:var(--accent-bg)}
.dash-preset-amount{font-size:18px; font-weight:800; line-height:1.2}
.dash-preset-sub{display:block; font-size:11.5px; color:var(--muted); line-height:1.2; min-height:14px}
/* The bonus badge is absolutely positioned so it straddles the button's
   top border instead of taking up flow space — a bonus-free preset (like
   $25 or $50) simply has no badge and no gap, rather than an empty second
   line. See dash-preset-sub above for the outcome line ("You get" the total). */
.dash-preset-badge{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  font-size:10.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
  border-radius:999px; padding:2px 8px; line-height:1.5;
  background:var(--accent-bg); color:var(--accent-strong); border:1px solid var(--accent-border);
}
.dash-preset-tier-high .dash-preset-badge{background:var(--accent-strong); color:#fff; border-color:var(--accent-strong)}
.dash-preset-tier-best{border-color:var(--signal)}
.dash-preset-tier-best.is-active{border-color:var(--signal); box-shadow:0 0 0 1px var(--signal)}
.dash-preset-tier-best .dash-preset-badge{background:var(--signal); color:#fff; border-color:var(--signal)}
.dash-step-num{
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background:var(--accent-bg); color:var(--accent-strong); font-size:11px; font-weight:800;
  margin-inline-end:6px; vertical-align:2px;
}
.dash-amount-row{display:flex; align-items:center; gap:10px; justify-content:center}
.dash-amount-btn{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--rule); background:var(--rail);
  font-size:20px; cursor:pointer; color:var(--ink);
}
.dash-amount-field{
  display:flex; align-items:center; gap:4px; border:1px solid var(--rule); border-radius:12px;
  padding:8px 14px; min-width:140px; justify-content:center; background:#fff;
}
.dash-amount-prefix{font-size:22px; font-weight:700; color:var(--muted)}
.dash-amount-field input{
  border:none; outline:none; width:5ch; font-size:28px; font-weight:800; text-align:center;
  font-family:var(--mono); background:transparent; color:var(--ink); padding:0;
}
.dash-amount-hint{text-align:center; color:var(--muted); font-size:12.5px; margin:10px 0 0}
.dash-topup select{
  width:100%; padding:12px 14px; border:1px solid var(--rule); border-radius:10px;
  font-size:14px; background:#fff; color:var(--ink);
}
.dash-topup-submit{width:100%; justify-content:center; text-align:center}
.dash-subs-head{display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin:0 0 12px}
.dash-subs-create{flex:0 0 auto}
.dash-subs-create .cta{white-space:nowrap}
.dash-subs-head .cta[disabled]{opacity:.55; cursor:not-allowed}
.dash-inline-form{display:inline}
.dash-assign-form{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.dash-assign-form .field{margin:0; flex:1 1 160px}
.dash-assign-form .field select{width:100%}
.dash-assign-form .cta{margin:0}
.dash-feature-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 24px}
.dash-feature{background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:16px}
.dash-feature h3{margin:0 0 6px; font-size:15px}
.dash-feature p{margin:0; color:var(--muted); font-size:13px}
.dash-steps{margin:0 0 18px; padding-inline-start:20px; color:var(--ink)}
.dash-steps li{margin:0 0 8px}
.dash-security-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.dash-meta-label{display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
.dash-2fa{display:flex; gap:16px; align-items:flex-start}
.dash-2fa-icon{
  flex:0 0 auto; width:48px; height:48px; border-radius:12px; background:var(--accent-bg);
  color:var(--accent-strong); display:flex; align-items:center; justify-content:center;
}
.dash-2fa-icon .dash-ico{width:24px; height:24px}
.dash-2fa-body h2{font-size:16px; margin:0 0 6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.dash-2fa-body p{margin:0 0 14px; color:var(--muted)}
.dash-pill{
  font-size:10px; font-weight:800; letter-spacing:.04em; background:var(--rail); color:var(--muted);
  border-radius:999px; padding:3px 8px;
}
.dash-pill-on{background:var(--accent-bg); color:var(--accent-strong)}
.dash-2fa-form{margin-top:14px; max-width:28em}
.dash-2fa-form .field input{max-width:100%}
.dash-2fa-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:4px}
.dash-2fa-actions .cta{margin:0}
.dash-recovery-codes{
  list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.dash-recovery-codes li{
  background:var(--rail); border-radius:8px; padding:8px 12px; font-size:14px; text-align:center;
}
.dash-ticket-thread{margin:0 0 16px; display:flex; flex-direction:column; gap:10px}
.dash-ticket-msg{border:1px solid var(--rule); border-radius:12px; padding:12px 14px; background:var(--surface)}
.dash-ticket-msg-operator{background:var(--accent-bg); border-color:var(--accent-border)}
.dash-ticket-msg-head{display:flex; justify-content:space-between; gap:12px; font-size:12px; margin:0 0 6px}
.dash-ticket-msg p{margin:0; white-space:pre-wrap}
@media (max-width:900px){
  .dash{grid-template-columns:1fr}
  .dash-side{position:static}
  .dash-stats,.dash-feature-grid,.dash-security-meta,.dash-recovery-codes{grid-template-columns:1fr}
  .dash-subs-head{flex-direction:column}
  .dash-banner{flex-direction:column; align-items:flex-start}
}

.rental-countries-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:0; margin:0 0 36px; align-items:start;
}
/* Длинные названия («St. Vincent & Grenadines») переносятся на вторую
   строку и растягивали всю строку сетки. Высота ячейки зафиксирована, а
   флаг прижат к верху, чтобы ряд не разъезжался. */
.rental-country-item{
  appearance:none; background:none; border:0; font:inherit; cursor:pointer; width:100%;
  display:flex; align-items:flex-start; gap:8px; padding:8px 10px; min-height:34px;
  line-height:1.35;
  font-size:13px; color:var(--ink); text-decoration:none; border-radius:6px; transition:background .12s;
}
.rental-country-item:hover{background:var(--accent-bg)}
.rental-country-item img{width:20px; height:15px; object-fit:cover; border-radius:2px; flex-shrink:0; margin-top:2px}

.rental-faq{margin:0 0 36px}
.rental-faq details{border-bottom:1px solid var(--rule); padding:14px 0}
.rental-faq details:first-child{border-top:1px solid var(--rule)}
.rental-faq summary{font-weight:600; font-size:14px; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between}
.rental-faq summary::after{content:'+'; font-size:18px; font-weight:400; color:var(--muted); transition:transform .2s}
.rental-faq details[open] summary::after{content:'−'}
.rental-faq summary::-webkit-details-marker{display:none}
.rental-faq details p{margin:10px 0 4px; font-size:13px; color:var(--muted); line-height:1.6}

.rental-cta-wrap{text-align:center; margin:24px 0 0}

/* duration toggle buttons (shared: home rental + /rental page) */
.dur-row{display:flex; gap:10px}
.dur-btn{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:13px 8px 11px; border:1px solid var(--rule); border-radius:12px;
  background:var(--surface); cursor:pointer; transition:all .15s;
}
.dur-btn:hover{border-color:var(--accent-border)}
.dur-btn.is-active{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-bg); box-shadow:0 0 0 1px var(--accent)}
.dur-days{font-size:18px; font-weight:800; line-height:1.2}
.dur-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.dur-btn.is-active .dur-label{color:var(--accent-strong)}
/* Страница аренды: «7 days» одной строкой вместо столбика — кнопка ниже.
   Правило ограничено .rental-page, чтобы не тронуть кнопки на главной,
   где разметка со столбиком осталась. */
.rental-page .dur-btn{padding:10px 8px 9px; border-radius:10px}
.rental-panel .dur-btn{padding:8px 8px; border-radius:9px}
.rental-page .dur-term,.rental-panel .dur-term{
  font-size:14px; font-weight:500; letter-spacing:-.01em; line-height:1.25; white-space:nowrap;
}
/* Число и слово «days» одного веса: выделять цифру незачем, кнопка
   читается целиком. */
.rental-page .dur-days,.rental-panel .dur-days{font-size:14px; font-weight:500; letter-spacing:-.01em}
.rental-page .dur-btn.is-active .dur-term,.rental-panel .dur-btn.is-active .dur-term{color:var(--accent-strong); font-weight:600}

/* rental configurator on /rental page */
.rental-tagline{margin:0; font-size:13px; color:var(--muted)}
/* Аренда — второй сценарий рядом с разовым кодом, и на главной он тонул
   в череде одинаковых белых панелей. Акцентная рамка отделяет его. */
.rental-panel{border-color:var(--accent)}
.rental-panel .rental-head{margin-bottom:14px}
.rental-panel .rental-head h2{margin:0 0 3px}
.rental-configurator{
  padding:26px 28px 24px; margin:0 0 28px; border-radius:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.10);
}
.rental-config-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px}
.rental-config-field{min-width:0}
.rental-config-field label{display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:7px}
.rental-config-field select{width:100%; max-width:none; font-size:14px; box-sizing:border-box}
.rental-config-duration{margin-bottom:0}
.rental-config-duration label{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:9px; display:block}
.rental-extend-hint{font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); font-size:11px}
.rental-config-result{margin-top:22px}
/* The result is the product, so it gets the one confident gesture on this
   page: a dark plate under the light controls, in the same ink as the code
   blocks elsewhere on the site. */
.rental-result-live{
  background:#1E293B; border-radius:12px; padding:20px 24px; color:#F1F5F9;
}
/* What was chosen, restated on the plate: the flag and the carrier mark
   are the only colour here, so they do the confirming. */
.rental-plate-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 16px;
}
.rental-chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 7px;
  border-radius:999px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  font-size:12.5px; font-weight:600; color:#E2E8F0; line-height:1;
}
.rental-chip .flag{width:18px; height:14px; border-radius:2px; display:block}
.rental-chip-op{width:15px; height:15px; object-fit:contain; display:block}
.rental-chip-dot{width:9px; height:9px; border-radius:50%; display:block}
.rental-result-empty{
  border:1px dashed var(--rule); border-radius:12px; padding:26px 24px;
  text-align:center; color:#94A3B8; font-size:13.5px;
}
/* Абзац наследует ограничение ширины по мере чтения; без auto-полей его
   коробка прижималась влево, и текст выглядел смещённым. */
/* Цвет задан на самом абзаце: на контейнере его перебивало более
   специфичное правило для p внутри .catalog-page. */
.rental-result-empty p{margin:0 auto; max-width:none; color:#94A3B8}

.rental-span{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  margin:0 0 20px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.10);
}
.rental-span-label{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#94A3B8; margin-bottom:3px;
}
.rental-span-end-right{text-align:end}
.rental-span-date{
  font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:#F8FAFC;
  font-variant-numeric:tabular-nums;
}
.rental-span-track{position:relative; height:1px; background:rgba(255,255,255,.16)}
.rental-span-track::before,.rental-span-track::after{
  content:""; position:absolute; top:50%; width:7px; height:7px; border-radius:50%;
  background:#34D399; transform:translateY(-50%);
}
.rental-span-track::before{inset-inline-start:0}
.rental-span-track::after{inset-inline-end:0}
.rental-span-mid{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#1E293B; padding:0 12px; font-size:11px; font-weight:600;
  letter-spacing:.02em; color:#34D399; white-space:nowrap;
}
/* Before a country is picked the panel said nothing but a dash floating in
   whitespace. It now states what the reader is waiting for, and collapses
   to the price the moment there is one. */
.rental-result-main{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.rental-live-price{
  font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1; color:#FFFFFF;
  font-variant-numeric:tabular-nums;
}
.rental-live-daily{
  font-size:13px; font-weight:600; color:#A5B4C4; font-variant-numeric:tabular-nums;
}
.rental-result-note{margin:10px 0 0; font-size:12.5px; color:#A5B4C4; line-height:1.5}
/* Solid accent on the dark plate: the one place on the page that asks for
   a decision, so it is the only thing here that shouts. */
.rental-cta{
  display:block; width:100%; margin:20px 0 0; box-sizing:border-box;
  padding:13px 20px; border-radius:10px; text-align:center;
  background:var(--accent); color:#052E23; font-size:14.5px; font-weight:700;
  letter-spacing:-.01em; text-decoration:none; transition:background .15s, transform .1s;
}
.rental-cta:hover{background:#34D399; color:#052E23; text-decoration:none}
.rental-cta:active{transform:translateY(1px)}
.rental-cta:focus-visible{outline:2px solid #A7F3D0; outline-offset:3px}
.rental-cta-hint{
  margin:10px 0 0; text-align:center; font-size:12px; color:#94A3B8;
  font-variant-numeric:tabular-nums;
}
@media (max-width:520px){.rental-config-row{grid-template-columns:1fr}}

.rental-table-note{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px}

@media (max-width:640px){
  .rental-config-row{grid-template-columns:1fr}
  .dur-row{flex-wrap:wrap}
}

/* ---- API page ---- */
.api-page h2{margin:0 0 12px; font-size:18px}
.api-cards{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin:0 0 36px;
}
.api-card{
  display:flex; align-items:flex-start; gap:12px; padding:16px;
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface);
  color:var(--ink); text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
.api-card:hover{border-color:var(--accent-border); box-shadow:0 2px 8px rgba(16,185,129,.10); text-decoration:none}
.api-card-icon{font-size:24px; flex:0 0 auto; line-height:1}
.api-card-body{display:flex; flex-direction:column; min-width:0}
.api-card-title{font-weight:700; font-size:14px}
.api-card-desc{font-size:12.5px; color:var(--muted); margin-top:2px}

.api-section{margin:0 0 36px}
.api-section p{font-size:14px; line-height:1.6; max-width:76ch}
.api-section code{
  background:var(--rail); padding:2px 6px; border-radius:4px; font-size:13px;
  font-family:var(--mono);
}
.api-code{font-size:13px; line-height:1.6; overflow-x:auto; padding:16px !important}

.api-flow{display:flex; flex-direction:column; gap:16px}
.api-flow-step{display:flex; gap:14px; align-items:flex-start}
.api-flow-num{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:28px; height:28px; border-radius:999px; background:var(--accent-bg);
  color:var(--accent-strong); font-weight:800; font-size:13px;
}
.api-flow-step h3{margin:0 0 4px; font-size:14px}
.api-flow-step p{margin:0; font-size:13px; color:var(--muted); line-height:1.5}

.api-note{
  background:var(--rail); border:1px solid var(--rule); border-radius:var(--radius); padding:16px 20px;
}
.api-note h2{font-size:14px; margin-bottom:6px}
.api-note p{margin:0; font-size:13px}

/* ---- pair / service / country pages ---- */
.crosslinks{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:1.5em 0}
.crosslinks ul{list-style:none; margin:0; padding:0; columns:2; column-gap:16px}
.crosslinks li{margin-bottom:4px; break-inside:avoid}
.crosslinks .num{color:var(--muted); margin-inline-end:6px}
@media (max-width:640px){.crosslinks{grid-template-columns:1fr} .crosslinks ul{columns:1}}
.delivery-notes dt{font-weight:700; margin-top:1em}
.delivery-notes dd{margin:.3em 0 0; color:var(--muted)}

/* ---- invoice ---- */
.invoice-shell{max-width:560px; margin:0 auto; padding:8px 0 32px}
.invoice-crumb{margin:0 0 20px; font-size:13px}
.invoice-crumb a{color:var(--muted); font-weight:500}
.invoice-crumb a:hover{color:var(--accent)}

/* Счёт на оплату — одна колонка и один порядок чтения: статус, сколько
   отправить, куда, до какого времени, чем это грозит при ошибке. Раньше
   он был двумя карточками, где сумма с кнопкой копирования стояла в
   заголовке, адрес с другой кнопкой — в теле, а QR сбоку; каждое из трёх
   действий выглядело по-своему, и порядок читался не сверху вниз. */
.inv{display:flex; flex-direction:column; gap:12px}
.inv-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:16px;
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:14px;
  align-items:center; text-align:center;
}
.inv-amount-row{display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap; margin:0}
.inv-amount{font-size:34px; font-weight:800; letter-spacing:-.03em; margin:0; color:var(--ink); line-height:1.15}
.inv-amount-ticker{font-size:16px; font-weight:700; color:var(--muted)}
.inv-amount-approx{margin:-8px 0 0; font-size:14px; color:var(--muted)}
.inv-coin-line{margin:0}
.inv-coin{
  display:inline-flex; align-items:center; gap:6px; margin:0;
  background:var(--rail); border-radius:999px; padding:5px 12px;
  font-size:13px; font-weight:600; color:var(--ink);
}
.inv-coin img,.inv-coin svg{width:16px; height:16px; border-radius:50%}
.inv-waiting{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin:0}
.inv-waiting-expired{color:var(--muted)}
.inv-spinner{
  width:14px; height:14px; border:2px solid var(--accent-border);
  border-top-color:var(--accent); border-radius:50%; flex:0 0 auto;
}
@media (prefers-reduced-motion:no-preference){
  .inv-spinner{animation:inv-spin .8s linear infinite}
}
@keyframes inv-spin{to{transform:rotate(360deg)}}
.inv-confirmed{color:var(--accent-strong); font-weight:600}
.inv-confirmed .inv-check{
  display:inline-flex; width:16px; height:16px; align-items:center; justify-content:center;
  border-radius:50%; background:var(--accent-strong); color:#fff; font-size:10px; font-weight:700;
}
.qr-wrap{
  margin:0; padding:10px; background:#fff; border:1px solid var(--rule); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.qr-wrap svg{width:148px; height:148px; display:block}
.inv-qr{margin:2px 0; padding:10px; background:#fff; border:1px solid var(--rule); border-radius:12px}
.inv-qr svg{width:168px; height:168px; display:block}
/* Сумма и адрес — две одинаковые строки: подпись, значение, одна и та же
   кнопка. Именно их переносят в кошелёк, и разной их внешность быть не
   должна. */
.inv-fields{display:flex; flex-direction:column; gap:8px; width:100%; text-align:start}
.inv-field{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px;
  background:var(--rail); border:1px solid var(--rule); border-radius:12px; padding:10px 12px;
}
.inv-field-label{
  grid-column:1/-1; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
}
.inv-field-value{font-size:13.5px; line-height:1.45; word-break:break-all; color:var(--ink); min-width:0}
/* Тикер стоит рядом с числом, но копируется только число: кошелёк ждёт
   в поле суммы цифры, а «25.00 USDC» он не примет. */
.inv-field-unit{color:var(--muted)}
.inv-id{margin:0; text-align:center; font-size:12px; font-family:var(--mono); color:var(--muted)}
.copy-btn{
  border:1px solid var(--rule); background:var(--surface); border-radius:8px; padding:7px 12px;
  font:12.5px/1 var(--sans); font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap;
}
.copy-btn:hover{border-color:var(--accent); color:var(--accent)}
.inv-send{margin:0; font-size:13.5px; color:var(--muted); line-height:1.45}
.inv-send .num{font-weight:700; color:var(--ink)}
.inv-progress{width:100%}

.inv-progress-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:0 0 8px; font-size:13px; color:var(--muted);
}
.inv-progress-head #inv-remaining{font-weight:700; color:var(--ink); font-size:14px}
.inv-progress-track{background:var(--rail); border-radius:999px; height:8px; overflow:hidden}
.inv-progress-fill{height:100%; background:var(--accent); border-radius:999px; transition:width 1s linear, background-color .3s}
.inv-progress.is-warn .inv-progress-fill{background:#DC2626}
.inv-progress.is-warn .inv-progress-head #inv-remaining{color:#DC2626}
.inv-expired-box{margin:0}
.notice.notice-warn{
  border:1px solid #FECACA; background:#FEF2F2; color:#7F1D1D;
  padding:12px 14px; border-radius:10px; font-size:13px; max-width:none; margin:0; line-height:1.5;
}
.inv-bonus{
  margin:0; font-size:13px; color:#065F46; background:var(--accent-bg); border:1px solid var(--accent-border);
  border-radius:10px; padding:10px 12px;
}
.inv-foot{margin:0; text-align:center; font-size:12.5px; color:var(--muted)}
.inv-foot a{font-weight:600}

.inv-confirmed-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px;
}
.inv-meta-label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin:0 0 4px;
}
.inv-confirmed-grid strong{font-size:18px}
.inv-sent{margin:0; font-size:13px; color:var(--muted)}
.inv-confirmed-cta{margin:4px 0 0}

@media (max-width:560px){
  .inv-amount{font-size:30px}
  .inv-card{padding:18px 14px 16px}
  .inv-qr svg{width:148px; height:148px}
  .qr-wrap svg{width:132px; height:132px}
}

/* legacy invoice bits still used elsewhere */
.invoice{border:1px solid var(--rule); border-radius:var(--radius); padding:20px; margin:1em 0}
.invoice .amount-line{margin-bottom:10px}
.invoice .amount-line .num{font-size:22px; font-weight:800}

/* ---- deposits list: pending/confirmed/expired row status ---- */
.dep-status{display:inline-flex; align-items:center; gap:6px; font-size:13px}
.dep-status-confirmed,.dep-status-expired{color:var(--muted)}
.dep-spinner{width:12px; height:12px; border-width:2px}
.dep-remaining{color:var(--muted); font-size:12px}
.dep-restart{font-size:12.5px; white-space:nowrap}

/* ---- footer: four columns, then one legal line beneath ---- */
.site-foot{border-top:1px solid var(--rule); margin-top:40px; padding:32px 20px 0}
.foot-grid{
  max-width:1200px; margin:0 auto; display:grid;
  grid-template-columns:1.5fr repeat(5,minmax(0,1fr)); gap:14px 20px; align-items:start;
}
.foot-col h2{margin:0 0 9px; font-size:12px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink)}
.foot-all{color:var(--accent) !important; font-weight:500}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin-bottom:5px; font-size:12.5px; line-height:1.45}
.foot-col a{color:var(--muted)}
.foot-col a:hover{color:var(--accent)}
.foot-about p{color:var(--muted); font-size:13px}
/* The footer wordmark is plain text, not the header's SVG brandmark, so
   it needs its own weight to read as the brand rather than a stray line. */
.foot-about .wordmark{
  font-weight:800; font-size:16px; letter-spacing:-0.02em; color:var(--ink); margin:0 0 8px;
}
.pay-badges{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0}
.pay-badge{
  display:inline-flex; align-items:center; gap:5px; border:1px solid var(--rule); border-radius:999px;
  padding:3px 9px 3px 7px; font-size:11px; font-weight:600; color:var(--muted); background:var(--surface);
}
.pay-badge .icon-mask,.pay-badge .coin-icon-colored{width:13px; height:13px}
.pay-badge-net{color:var(--muted); font-weight:500}
.foot-bottom{
  max-width:1200px; margin:28px auto 0; border-top:1px solid var(--rule); padding:16px 0 32px;
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline; justify-content:space-between;
}
/* Terms, refund, privacy, contact: one measured column of prose. */
.legal-page{max-width:68ch}
.legal-page h1{margin:0 0 6px}
.legal-page .legal-updated{margin:0 0 22px; font-size:12.5px; color:var(--muted)}
.legal-page .lede{font-size:16px; color:var(--ink); margin:0 0 26px}
.legal-page h2{margin:30px 0 10px; font-size:16px; letter-spacing:-0.01em}
.legal-page p{margin:0 0 12px; line-height:1.65}
.legal-page ul{margin:0 0 12px; padding-inline-start:20px}
.legal-page li{margin:0 0 8px; line-height:1.6}
.legal-page strong{font-weight:600}
.foot-new{
  display:inline-block; margin-inline-start:5px; padding:1px 5px; border-radius:4px;
  background:var(--accent-bg); color:var(--accent-strong); border:1px solid var(--accent-border);
  font-size:9.5px; font-weight:700; letter-spacing:0.04em; vertical-align:1px;
}
/* Agent page: the three "why an agent can use this" panels. */
.agents-page .agent-why{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:26px 0 8px;
}
.agents-page .agent-why-item{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:16px 18px;
}
.agents-page .agent-why-item h2{margin:0 0 6px; font-size:14.5px}
.agents-page .agent-why-item p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55}
.agents-page h3{margin:24px 0 8px; font-size:14.5px; letter-spacing:-0.01em}
.agents-page .agent-note{
  margin:12px 0 0; padding:10px 13px; border-radius:var(--radius);
  background:var(--rail); color:var(--muted); font-size:12.5px; line-height:1.55;
}
.agents-page .agent-flow{margin:0 0 14px; padding-inline-start:20px}
.agents-page .agent-flow li{margin:0 0 10px; line-height:1.6}
.agents-page .agent-foot{
  margin:26px 0 0; padding-top:16px; border-top:1px solid var(--rule); color:var(--muted); font-size:13.5px;
}
.vs-page .vs-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px}
.vs-page .vs-item a{
  display:block; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:14px 16px; text-decoration:none; color:var(--ink);
}
.vs-page .vs-item a:hover{border-color:var(--accent); background:var(--accent-bg)}
.vs-page .vs-item strong{display:block; font-size:14.5px; margin-bottom:3px}
.vs-page .vs-item span{display:block; font-size:13px; color:var(--muted); line-height:1.5}
/* Ссылки на остальные сравнения: их одиннадцать, и маркированным списком
   в одну колонку они читались как свалка. Та же карточка, что в индексе
   сравнений, только в одну строку и сеткой по ширине колонки. Текст
   ссылки остаётся полным («OTPDrop vs X»): это и есть её смысл для
   поиска, сокращать его до одного имени — терять половину. */
.vs-page .vs-other{
  list-style:none; margin:14px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px;
}
.vs-page .vs-other a{
  display:block; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:10px 12px; color:var(--ink);
  font-size:13.5px; text-decoration:none; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.vs-page .vs-other a:hover{border-color:var(--accent); background:var(--accent-bg)}
.vs-page .vs-table th[scope="row"]{text-align:start; font-weight:600; white-space:nowrap}
.vs-page .vs-table td{vertical-align:top; line-height:1.55}
.vs-page h2{margin:30px 0 10px; font-size:16px}
.vs-page p{line-height:1.65}
.vs-page .vs-foot{
  margin:28px 0 0; padding-top:14px; border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--muted);
}
.vs-page .vs-back{margin:14px 0 0; font-size:13.5px}
.guides-page .guide-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px}
.guides-page .guide-item a{
  display:block; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:15px 17px; text-decoration:none; color:var(--ink);
}
.guides-page .guide-item a:hover{border-color:var(--accent); background:var(--accent-bg)}
.guides-page .guide-item strong{display:block; font-size:15px; margin-bottom:4px; line-height:1.35}
.guides-page .guide-item span{display:block; font-size:13px; color:var(--muted); line-height:1.5}
/* Дата и время чтения под заголовком: не украшение, а сигнал свежести —
   в карте сайта она была, а на самой странице её никто не видел. */
.guide-meta{
  margin:-2px 0 22px; font-size:12.5px; color:var(--muted);
  padding-bottom:16px; border-bottom:1px solid var(--rule);
}
.guide-page article{max-width:68ch}
.guide-page article h2{margin:30px 0 10px; font-size:16px}
.guide-page article p{margin:0 0 12px; line-height:1.7}
.guide-page article ul,.guide-page article ol{margin:0 0 14px; padding-inline-start:20px}
.guide-page article li{margin:0 0 9px; line-height:1.65}
.guide-page .guide-more{
  max-width:68ch; margin:34px 0 0; padding-top:18px; border-top:1px solid var(--rule);
}
.guide-page .guide-more h2{margin:0 0 8px; font-size:14px; color:var(--muted)}
.guide-page .guide-more ul{margin:0; padding-inline-start:18px}
.guide-page .guide-more li{margin:0 0 6px; font-size:13.5px}
.glossary-page{max-width:72ch}
.glossary-page h2{margin:32px 0 10px; font-size:16px}
.glossary-page .glossary{margin:0; display:grid; grid-template-columns:minmax(140px,220px) 1fr; gap:8px 20px}
.glossary-page .glossary dt{font-weight:600; font-size:13.5px}
.glossary-page .glossary dd{margin:0; color:var(--muted); font-size:13.5px; line-height:1.6}
.stats-page .stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:26px 0 6px;
}
.stats-page .stat-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  padding:18px; text-align:center;
}
.stats-page .stat-num{display:block; font-size:26px; font-weight:700; letter-spacing:-0.02em}
.stats-page .stat-label{display:block; margin-top:4px; font-size:12.5px; color:var(--muted); line-height:1.4}
.stats-page h2{margin:32px 0 10px; font-size:16px}
.stats-page p{line-height:1.65}
@media (max-width:520px){
  .glossary-page .glossary{grid-template-columns:1fr; gap:2px 0}
  .glossary-page .glossary dd{margin:0 0 12px}
}
/* API reference: sticky section index beside the endpoint blocks. */
.apidoc{
  display:grid; grid-template-columns:224px minmax(0,1fr); gap:0 40px;
  max-width:1200px; margin:0 auto; align-items:start;
}
.apidoc-nav{position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; padding:4px 0 24px}
.apidoc-nav-head{
  margin:18px 0 6px; font-size:10.5px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--muted);
}
.apidoc-nav-head:first-child{margin-top:0}
.apidoc-nav ul{list-style:none; margin:0 0 4px; padding:0}
.apidoc-nav li{margin:0}
.apidoc-nav a{
  display:flex; align-items:center; gap:7px; padding:5px 9px; border-radius:6px;
  color:var(--ink); font-size:13px; text-decoration:none;
}
.apidoc-nav a:hover{background:var(--rail)}
.apidoc-body{min-width:0; padding-bottom:40px}
.apidoc-section{scroll-margin-top:16px; max-width:820px}
.apidoc-section + .apidoc-section{margin-top:34px; padding-top:30px; border-top:1px solid var(--rule)}
.apidoc-section h1{margin:0 0 10px}
.apidoc-section h2{margin:0 0 10px; font-size:19px; letter-spacing:-0.015em}
.apidoc-section p{line-height:1.65}
.apidoc-meta{display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--muted); margin:14px 0 0}
.apidoc-steps{margin:0 0 12px; padding-inline-start:20px}
.apidoc-steps li{margin:0 0 8px; line-height:1.6}
.verb{
  display:inline-block; min-width:38px; text-align:center; padding:2px 6px; border-radius:4px;
  font-size:9.5px; font-weight:700; letter-spacing:0.04em; font-family:var(--mono,ui-monospace,monospace);
}
.verb-get{background:#EFF6FF; color:#1D4ED8; border:1px solid #BFDBFE}
.verb-post{background:var(--accent-bg); color:var(--accent-strong); border:1px solid var(--accent-border)}
.apidoc-route{
  display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:9px 12px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
}
.apidoc-route code{font-size:13px; color:var(--ink)}
.apidoc-label{
  margin:18px 0 6px; font-size:10.5px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--muted);
}
.apidoc-code{
  margin:0; padding:14px 16px; border-radius:var(--radius); overflow-x:auto;
  background:var(--surface); border:1px solid var(--rule);
  font-size:12.5px; line-height:1.6; white-space:pre;
}
.apidoc-code-dark{background:#0F172A; border-color:#0F172A; color:#E2E8F0}
.apidoc-table{width:100%; border-collapse:collapse; font-size:13px}
.apidoc-table th{
  text-align:start; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding:0 12px 7px 0; border-bottom:1px solid var(--rule);
}
.apidoc-table td{padding:9px 12px 9px 0; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.5}
.apidoc-table .req{color:var(--accent-strong); font-size:11.5px; font-weight:600}
.apidoc-table .opt{color:var(--muted); font-size:11.5px}
.apidoc-callout{
  margin:16px 0; padding:13px 16px; border-radius:var(--radius);
  background:var(--accent-bg); border:1px solid var(--accent-border); font-size:13.5px; line-height:1.6;
}
.apidoc-callout.apidoc-warn{background:#FFFBEB; border-color:#FDE68A}
@media (max-width:900px){
  .apidoc{grid-template-columns:1fr; gap:0}
  .apidoc-nav{
    position:static; max-height:none; margin-bottom:26px; padding-bottom:20px;
    border-bottom:1px solid var(--rule);
  }
  .apidoc-nav ul{display:flex; flex-wrap:wrap; gap:2px}
}
/* Пустое состояние панели аренды: графика вместо голой строки. */
.rental-art{display:block; width:100%; max-width:260px; height:auto; margin:0 auto 14px}
.rental-art-msg > path{opacity:0; animation:rental-msg 4.2s ease-in-out infinite}
.rental-art-msg > path:nth-child(2){animation-delay:.5s}
.rental-art-msg > path:nth-child(3){animation-delay:1s}
@keyframes rental-msg{
  0%,8%{opacity:0; transform:translateY(4px)}
  16%,62%{opacity:1; transform:translateY(0)}
  76%,100%{opacity:0; transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .rental-art-msg > path{opacity:1; animation:none}
}

/* Шаги — это последовательность, поэтому она нарисована как последовательность:
   одна линия сквозь весь ряд, а не четыре отдельные коробки. */
/* Один фон на всю последовательность: он её группирует, в отличие от
   четырёх отдельных коробок, которые её дробили. */
.rental-steps-panel{
  background:var(--surface); border:1px solid var(--rule); border-radius:16px;
  padding:24px 28px 26px; margin:0 0 28px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.rental-steps-panel h2{margin:0 0 4px; font-size:17px; letter-spacing:-.015em}
.rental-steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
  margin:0; padding-top:26px; position:relative;
}
.rental-steps::before{
  content:""; position:absolute; top:5px; inset-inline-start:4px; inset-inline-end:14px; height:1px; background:var(--rule);
}
/* Наконечник на конце линии: ряд читается как ход, а не как четыре точки. */
.rental-steps::after{
  content:""; position:absolute; top:1.5px; inset-inline-end:14px; width:8px; height:8px;
  border-top:1px solid var(--rule); border-inline-end:1px solid var(--rule);
  transform:translateX(4px) rotate(45deg);
}
.rental-step{position:relative; padding:0}
.rental-step::before{
  content:""; position:absolute; top:-26px; inset-inline-start:0; width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--surface);
}
.rental-step-num{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  color:var(--muted); margin:0 0 6px;
}
.rental-step h3{margin:0 0 5px; font-size:14.5px; letter-spacing:-.01em}
@media (max-width:720px){
  .rental-steps-panel{padding:20px 20px 22px}
  .rental-steps{grid-template-columns:1fr 1fr; gap:26px 20px; padding-top:22px}
  .rental-steps::before,.rental-steps::after{display:none}
  .rental-step::before{top:-22px}
}
/* Код опускается в номер и загорается по одной ячейке. */
.home-hero-art .hero-code rect{opacity:.18; animation:hero-digit 3.6s ease-in-out infinite}
.home-hero-art .hero-code rect:nth-child(2){animation-delay:.22s}
.home-hero-art .hero-code rect:nth-child(3){animation-delay:.44s}
.home-hero-art .hero-code rect:nth-child(4){animation-delay:.66s}
@keyframes hero-digit{
  0%,6%{opacity:.18}
  18%,64%{opacity:1}
  80%,100%{opacity:.18}
}
.home-hero-art .hero-drop{animation:hero-drop 3.6s ease-in-out infinite}
@keyframes hero-drop{
  0%,10%{opacity:.25}
  20%,60%{opacity:1}
  74%,100%{opacity:.25}
}
@media (prefers-reduced-motion:reduce){
  .home-hero-art .hero-code rect,.home-hero-art .hero-drop{opacity:1; animation:none}
}
/* Домашняя версия итога: одна светлая строка вместо тёмной плашки со
   шкалой. На /rental эта плашка — главный элемент страницы, здесь она
   перебивала основной сценарий и занимала под 300px. */
.rental-summary{margin-top:14px}
.rental-summary-empty{
  margin:0; padding:12px 16px; border:1px dashed var(--rule); border-radius:10px;
  text-align:center; font-size:13px; color:#94A3B8;
}
/* display:flex перебивал атрибут hidden, и пустая живая строка
   показывалась вместе с заглушкой. */
.rental-summary-live[hidden],.rental-summary-empty[hidden]{display:none}
.rental-summary-live{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 12px 10px 16px; border:1px solid var(--rule); border-radius:10px;
  background:var(--surface);
}
.rental-summary-price{
  font-size:20px; font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums;
}
.rental-summary-meta{
  flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.rental-summary-cta{
  flex:0 0 auto; padding:8px 16px; border-radius:8px; background:var(--accent);
  color:#052E23; font-size:13.5px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.rental-summary-cta:hover{background:#34D399; color:#052E23; text-decoration:none}
@media (max-width:640px){
  .rental-summary-cta{width:100%; text-align:center}
}

/* Панель была коробкой с семью коробками внутри. Срок — один сегментный
   переключатель с общей рамкой и разделителями вместо четырёх кнопок,
   итог — строка под тонкой линией, без своей рамки и фона. */
.rental-panel .dur-row{
  display:flex; gap:0; border:1px solid var(--rule); border-radius:10px; overflow:hidden;
  background:var(--surface);
}
.rental-panel .dur-btn{
  flex:1 1 0; border:0; border-radius:0; background:none; padding:9px 8px;
  box-shadow:none;
}
.rental-panel .dur-btn + .dur-btn{border-inline-start:1px solid var(--rule)}
.rental-panel .dur-btn:hover{background:var(--rail)}
.rental-panel .dur-btn.is-active{
  background:var(--accent-bg); box-shadow:none; border-color:var(--rule);
}
.rental-panel .rental-summary{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--rule);
}
.rental-panel .rental-summary-empty{
  border:0; padding:2px 0; text-align:start;
}
.rental-panel .rental-summary-live{
  border:0; background:none; padding:0; gap:12px;
}
.legal-links{margin:0; font-size:12.5px; color:var(--muted)}
.legal-links a{color:var(--muted)}
.legal-links a:hover{color:var(--accent)}
.foot-notice{margin:0; max-width:52ch}
@media (max-width:1080px){.foot-grid{grid-template-columns:1.4fr repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
/* Одной колонкой пять списков ссылок растягивают подвал на несколько
   экранов, а половина строки при этом пустует: пункты короткие. Пары
   колонок хватает и на самом узком экране, текст о сервисе остаётся во
   всю ширину — он единственный здесь набран абзацем. */
@media (max-width:520px){.foot-grid{grid-template-columns:1fr 1fr} .foot-about{grid-column:1/-1}}