@font-face{
  font-family:"Inter SIM";
  src:url("fonts/inter-subset.woff2") format("woff2-variations"),
      url("fonts/inter-subset.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0400-045F,U+2010-2027,U+20A0-20BF,U+2190-2193,U+2713,U+2715;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIM HEY · экран заказа

   Правила системы, которым подчинено всё ниже:

   1. Цвет несёт смысл, а не украшает. Акцент ровно один и появляется
      в двух местах: главное действие и активный пункт навигации.
      Всё остальное — нейтральная шкала.
   2. Разделяют воздух и волосяная линия. Тень — только там, где предмет
      физически лежит выше плоскости. Теней две, обе почти незаметные.
   3. Поверхность одна — бумага. Стекло только под плавающим доком,
      потому что под ним действительно что-то проезжает.
   4. Насыщенность фона держится ниже 0.02 по хроме. Это свет, а не краска.
   5. Движение: 180 мс на отклик, 420 мс на появление, одна кривая,
      смещение не больше 10 пикселей. Ничего не мигает и не бегает.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── нейтральная шкала ─────────────────────────────────────────────────── */
  --paper:oklch(1 0 0);
  --canvas:oklch(0.985 0.002 265);
  --sunk:oklch(0.972 0.003 265);

  --ink:oklch(0.225 0.008 265);
  --ink-2:oklch(0.445 0.007 265);
  --ink-3:oklch(0.505 0.006 265);

  --accent-glow:oklch(0.62 0.19 255 / .22);
  --accent-hair:oklch(0.55 0.17 255 / .30);
  --hair:oklch(0.225 0.008 265 / .11);
  --hair-soft:oklch(0.225 0.008 265 / .07);

  /* ── единственный акцент ───────────────────────────────────────────────── */
  --accent:oklch(0.565 0.185 255);
  --accent-press:oklch(0.505 0.180 255);
  /* Тот же акцент, но пригодный как текст на своей же подложке:
     светлый вариант даёт 4.06:1 и не проходит порог. */
  --accent-ink:oklch(0.480 0.172 255);
  --accent-wash:oklch(0.565 0.185 255 / .10);
  --on-accent:oklch(1 0 0);

  --warn:oklch(0.510 0.180 28);
  --warn-wash:oklch(0.545 0.175 28 / .10);

  --ok:oklch(0.505 0.130 152);
  --ok-wash:oklch(0.505 0.130 152 / .11);

  /* ── свет на фоне: два очень бледных пятна ─────────────────────────────── */
  --wash-1:oklch(0.955 0.018 262 / .85);
  --wash-2:oklch(0.960 0.016 318 / .70);
  --wash:oklch(0.955 0.018 262 / .60);

  /* ── шрифт: шесть ступеней ─────────────────────────────────────────────── */
  --t-1:13px;
  --t-2:15px;
  --t-3:17px;
  --t-4:22px;
  --t-5:32px;
  --t-6:clamp(34px, 4.6vw, 48px);

  /* Inter стоит первым намеренно: системный шрифт дал бы SF на маке,
     Segoe UI на винде и Roboto на андроиде — три разных макета. Здесь
     подключён подмножественный Inter Variable (57 КБ, латиница и кириллица),
     поэтому на любом устройстве набор один и тот же. Системные шрифты
     остались запасным вариантом на случай, если файл не загрузится. */
  --sans:"Inter SIM",-apple-system,BlinkMacSystemFont,"SF Pro Text",
         ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* ── шаг 8pt ───────────────────────────────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* ── радиусы: четыре, вложенные концентричны ──────────────────────────── */
  --r-1:10px; --r-2:14px; --r-3:20px; --r-4:28px;

  /* ── размеры ───────────────────────────────────────────────────────────── */
  --tap:44px;
  --icon-1:18px;
  --icon-2:21px;
  --mark:30px;
  --flag:38px;
  /* QR сканируют чужим телефоном с расстояния вытянутой руки: чем он
     крупнее, тем увереннее ловится камерой. На телефоне отдаём ему
     больше половины ширины — места всё равно хватает. */
  --qr:min(240px, 58vw);
  --notch:13px;
  --perf-h:calc(var(--notch) * 2);
  --rail:76px;
  --rail-wide:248px;
  --measure:960px;
  --narrow:440px;
  /* Ширина для сплошного текста. 1080 пикселей под абзац — это 150 знаков
     в строке, глаз теряет начало следующей. 660 даёт около 75. */
  /* Читаемая колонка равна общей. Разная ширина у страниц читалась как
     разные сайты: меню стояло по одной сетке, витрина по второй, текст
     по третьей. Длину строки ограничиваем у самих абзацев, а не у колонки. */
  --reading:960px;
  --glyph:64px;
  --gutter:var(--s-5);

  /* ── тени ──────────────────────────────────────────────────────────────── */
  --sh-1:0 1px 2px oklch(0.20 0.01 265 / .05);
  --sh-2:0 1px 2px oklch(0.20 0.01 265 / .04), 0 12px 28px -14px oklch(0.20 0.01 265 / .16);

  /* Стекло под плавающим доком. Единственная полупрозрачная поверхность
     в интерфейсе — и единственная, у которой цвет прошит, а не выведен
     из бумаги: под ней проезжает содержимое, и оно должно просвечивать. */
  --glass:oklch(1 0 0 / .86);
  --glass-solid:oklch(1 0 0 / .97);

  /* ── движение ──────────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.32,.72,0,1);
  --fast:150ms;
  --slow:320ms;
}

/* ═══ ТЁМНАЯ ТЕМА ══════════════════════════════════════════════════════════
   Не инверсия светлой, а вторая шкала. При простом обращении яркости
   чистая бумага становится чистой чернотой, а на ней контраст режет глаз
   сильнее, чем чёрное на белом: у OLED-экрана белый текст на чёрном
   «расплывается». Поэтому фон не 0, а тёмно-серый с той же ноткой синего,
   что и на светлой теме, и поверхность светлее фона — карточка по-прежнему
   лежит выше плоскости, как и в свете.

   Тени в темноте не работают: тень — это отсутствие света, а его и так нет.
   Их роль берут на себя волосяные линии, поэтому в тёмной теме они заметнее.

   Переключатель в «Профиле» пишет `data-theme` на <html>. Без него
   действует системная настройка.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme:dark;
    --paper:oklch(0.235 0.008 265);
    --canvas:oklch(0.185 0.007 265);
    --sunk:oklch(0.285 0.008 265);

    --ink:oklch(0.965 0.003 265);
    --ink-2:oklch(0.800 0.006 265);
    --ink-3:oklch(0.720 0.007 265);

    --hair:oklch(1 0 0 / .16);
    --hair-soft:oklch(1 0 0 / .10);

    /* Акцент в темноте поднимаем по светлоте: тот же синий на тёмном фоне
       читается как почти чёрный и теряет роль акцента. */
    --accent:oklch(0.660 0.170 255);
    --accent-press:oklch(0.610 0.165 255);
    --accent-ink:oklch(0.780 0.130 255);
    --accent-wash:oklch(0.660 0.170 255 / .18);
  --accent-glow:oklch(0.70 0.19 255 / .34);
  --accent-hair:oklch(0.70 0.17 255 / .42);
    --accent-glow:oklch(0.70 0.19 255 / .34);
    --accent-hair:oklch(0.70 0.17 255 / .42);
    --on-accent:oklch(0.185 0.02 265);

    --warn:oklch(0.745 0.150 28);
    --warn-wash:oklch(0.745 0.150 28 / .18);

    --ok:oklch(0.740 0.140 152);
    --ok-wash:oklch(0.740 0.140 152 / .18);

    --wash-1:oklch(0.400 0.060 262 / .40);
    --wash-2:oklch(0.380 0.055 318 / .32);
    --wash:oklch(0.400 0.060 262 / .30);

    --sh-1:0 1px 2px oklch(0 0 0 / .30);
    --sh-2:0 1px 2px oklch(0 0 0 / .30), 0 12px 28px -14px oklch(0 0 0 / .55);
    --glass:oklch(0.235 0.008 265 / .84);
    --glass-solid:oklch(0.235 0.008 265 / .97);
  }
}

/* Тот же набор, но выбранный руками. Дублируется намеренно: `:is()` с
   медиазапросом внутри не соберёшь, а препроцессора здесь нет. */
:root[data-theme="dark"]{ color-scheme:dark;
  --paper:oklch(0.235 0.008 265);
  --canvas:oklch(0.185 0.007 265);
  --sunk:oklch(0.285 0.008 265);

  --ink:oklch(0.965 0.003 265);
  --ink-2:oklch(0.800 0.006 265);
  --ink-3:oklch(0.720 0.007 265);

  --hair:oklch(1 0 0 / .16);
  --hair-soft:oklch(1 0 0 / .10);

  --accent:oklch(0.660 0.170 255);
  --accent-press:oklch(0.610 0.165 255);
  --accent-ink:oklch(0.780 0.130 255);
  --accent-wash:oklch(0.660 0.170 255 / .18);
  --on-accent:oklch(0.185 0.02 265);

  --warn:oklch(0.745 0.150 28);
  --warn-wash:oklch(0.745 0.150 28 / .18);

  --ok:oklch(0.740 0.140 152);
  --ok-wash:oklch(0.740 0.140 152 / .18);

  --wash-1:oklch(0.400 0.060 262 / .40);
  --wash-2:oklch(0.380 0.055 318 / .32);
  --wash:oklch(0.400 0.060 262 / .30);

  --sh-1:0 1px 2px oklch(0 0 0 / .30);
  --sh-2:0 1px 2px oklch(0 0 0 / .30), 0 12px 28px -14px oklch(0 0 0 / .55);
  --glass:oklch(0.235 0.008 265 / .84);
  --glass-solid:oklch(0.235 0.008 265 / .97);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}

/* Атрибут `hidden` браузер выключает правилом `display:none` из своей
   таблицы стилей, а любое авторское `display` бьёт её по приоритету.
   Из-за этого `.btn[hidden]` продолжал показываться: на экране заказа
   разом висели все три кнопки установки. Правило нужно ровно одно и
   именно с `!important` — иначе каждый новый класс с `display` заново
   отменяет скрытие. */
[hidden]{display:none !important}

body{
  margin:0;min-height:100dvh;overflow-x:hidden;
  background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-3);line-height:1.47;letter-spacing:-.011em;
  font-optical-sizing:auto;font-synthesis-weight:none}

/* ═══ СВЕТ НА ФОНЕ ═════════════════════════════════════════════════════════
   Два пятна очень низкой насыщенности, у каждого свой период. На глаз это
   не цвет, а неравномерность освещения. Ниже трети экрана гасим совсем:
   контент должен лежать на чистой бумаге.
   ════════════════════════════════════════════════════════════════════════ */
.light{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 76%)}
.light span{position:absolute;display:block;border-radius:50%;filter:blur(90px)}
.light span:nth-child(1){
  inset:-30% auto auto -20%;width:82vmax;height:82vmax;
  background:radial-gradient(circle at 50% 50%, var(--wash-1), transparent 66%);
  animation:sway-a 96s var(--ease) infinite alternate}
.light span:nth-child(2){
  inset:-34% -24% auto auto;width:70vmax;height:70vmax;
  background:radial-gradient(circle at 50% 50%, var(--wash-2), transparent 66%);
  animation:sway-b 124s var(--ease) infinite alternate}

@keyframes sway-a{from{transform:translate3d(0,0,0) scale(1)}   to{transform:translate3d(6%,4%,0) scale(1.08)}}
@keyframes sway-b{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-5%,6%,0) scale(.97)}}

/* ═══ ПОЯВЛЕНИЕ ════════════════════════════════════════════════════════════ */
@keyframes rise{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
[data-rise]{animation:rise var(--slow) var(--ease) both}
[data-rise="1"]{animation-delay:0ms}
[data-rise="2"]{animation-delay:45ms}
[data-rise="3"]{animation-delay:90ms}
[data-rise="4"]{animation-delay:135ms}

/* Внутренняя волна: сами карточки в решётке выезжают друг за другом.
   Задержки останавливаются на десятой — в каталоге направлений карточек
   двести, и двухсекундная волна ожидания хуже мгновенной подстановки. */
@keyframes rise-sm{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
.wave > *{animation:rise-sm 340ms var(--ease) both}
.wave > *:nth-child(1){animation-delay:0ms}
.wave > *:nth-child(2){animation-delay:35ms}
.wave > *:nth-child(3){animation-delay:70ms}
.wave > *:nth-child(4){animation-delay:105ms}
.wave > *:nth-child(5){animation-delay:140ms}
.wave > *:nth-child(6){animation-delay:175ms}
.wave > *:nth-child(7){animation-delay:210ms}
.wave > *:nth-child(8){animation-delay:245ms}
.wave > *:nth-child(9){animation-delay:280ms}
.wave > *:nth-child(n+10){animation-delay:315ms}

/* ═══ КАРКАС ═══════════════════════════════════════════════════════════════ */
.app{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100dvh}
.wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.measure{width:100%;max-width:var(--measure);margin-inline:auto}

/* ═══ НАВИГАЦИЯ ════════════════════════════════════════════════════════════
   Один и тот же вид в двух местах: на телефоне плавающая пилюля снизу,
   на компьютере она же вверху. Разное расположение при одинаковом облике —
   это про то, где у человека большой палец и где он привык искать меню,
   а не про две разные навигации.
   ════════════════════════════════════════════════════════════════════════ */
.nav{
  position:fixed;z-index:5;
  left:var(--s-4);right:var(--s-4);bottom:max(var(--s-3), env(safe-area-inset-bottom));
  display:flex;align-items:center;padding:5px;
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid var(--hair);border-radius:999px;
  box-shadow:0 1px 2px oklch(0.20 0.01 265 / .05), 0 16px 32px -16px oklch(0.20 0.01 265 / .22)}

/* Логотип и учётная запись — только на широком экране. На телефоне
   в пилюле помещаются либо три пункта, либо два пункта и украшения. */
.nav__brand,.nav__foot{display:none}
.nav__items{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}

.navitem{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:50px;padding:6px 2px;border-radius:18px;
  color:var(--ink-3);font-size:10px;font-weight:500;line-height:1.1;
  letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition-property:color,background-color,scale;transition-duration:var(--fast);
  transition-timing-function:var(--ease)}
.navitem:active{scale:.94}
.navitem:hover{color:var(--ink)}
.navitem:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.navitem svg{width:var(--icon-2);height:var(--icon-2);stroke-width:1.7;flex:none;
  transition:transform var(--fast) var(--ease)}
.navitem:active svg{transform:translateY(1px)}

/* Активный пункт: мягкая заливка с растворением вправо. Ровная плашка
   на стеклянной пилюле выглядит наклейкой, а градиент читается как
   подсветка самой пилюли. */
/* Активный пункт подсвечен радиальным свечением, а не залит плашкой.
   Ровный прямоугольник на стеклянной пилюле читается наклейкой поверх
   неё; свечение выглядит как подсветка самой пилюли изнутри. */
.navitem{position:relative;isolation:isolate}
.navitem[aria-current="page"]{color:var(--accent-ink);font-weight:600}
.navitem[aria-current="page"]::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:
    radial-gradient(circle at 50% 120%, var(--accent-glow) 0%, transparent 72%),
    linear-gradient(180deg, var(--accent-wash), transparent 88%)}
.navitem[aria-current="page"] svg{color:var(--accent)}
.navitem__badge{
  position:absolute;top:3px;left:50%;margin-left:5px;
  min-width:16px;padding-inline:4px;border-radius:999px;
  font-size:9px;font-weight:650;line-height:15px;text-align:center;
  background:var(--accent);color:var(--on-accent);font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--glass)}

/* Совсем узкий телефон: подпись «Направления» перестаёт помещаться даже
   в столбце. Уменьшаем набор, а не прячем слово: значок без подписи
   узнаётся хуже, чем мелкая подпись. */
@media (max-width:370px){
  .navitem{font-size:9px;padding-inline:0}
  .nav{padding:4px}
}

/* ═══ ЗАГОЛОВОК ════════════════════════════════════════════════════════════ */
.head{padding:var(--s-5) var(--gutter) var(--s-6)}
.head__row{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-6)}
.head__crumb{font-size:var(--t-2);font-weight:500;color:var(--ink-3)}
.head h1{margin:0;font-size:var(--t-6);line-height:1.05;letter-spacing:-.028em;font-weight:600;text-wrap:balance}
.head p{margin:var(--s-3) 0 0;font-size:var(--t-2);color:var(--ink-3);letter-spacing:-.005em}

.iconbtn{
  width:var(--tap);height:var(--tap);flex:none;display:grid;place-items:center;
  margin-inline-start:calc(var(--s-3) * -1);
  border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;
  transition-property:background-color,color,scale;transition-duration:var(--fast);transition-timing-function:var(--ease)}
.iconbtn:hover{background-color:var(--sunk);color:var(--ink)}
.iconbtn:active{scale:.94}
.iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.iconbtn svg{width:var(--icon-2);height:var(--icon-2);stroke-width:1.7}
.push{margin-left:auto;margin-inline-end:calc(var(--s-3) * -1)}

/* ═══ СЕТКА ════════════════════════════════════════════════════════════════ */
/* Запас снизу под плавающую пилюлю. На узком экране в ней две строки —
   значок и подпись, — и прежнего запаса в один «тап» не хватало: нижний
   блок уезжал под меню. На широком экране меню наверху, запас не нужен. */
.main{flex:1;padding:0 var(--gutter) var(--s-7)}
@media (min-width:720px){ .main{padding-bottom:var(--s-8)} }
/* minmax(0,1fr), а не просто 1fr. У дорожки `1fr` автоматический минимум —
   min-content, и если что-то внутри не умеет сжиматься меньше своей
   естественной ширины, дорожка распирается вместе с ним. На телефоне
   393 px колонка вырастала до 464 и билет уезжал за правый край экрана. */
.grid{display:grid;gap:var(--s-5);align-items:start;grid-template-columns:minmax(0,1fr)}

/* ═══ ПОДСВЕТКА ПОД КУРСОРОМ ═══════════════════════════════════════════════
   Не прожектор, а отблеск: волосяная линия слегка набирает цвет, поверхность
   едва светлеет в точке курсора. Радиус большой, непрозрачность 5%.
   Включается только при настоящем курсоре.
   ════════════════════════════════════════════════════════════════════════ */
.surface{position:relative;background:var(--paper);border:1px solid var(--hair-soft);
  border-radius:var(--r-4);box-shadow:var(--sh-1);isolation:isolate}
.surface::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity var(--slow) var(--ease)}
.surface > *{position:relative;z-index:1}

@media (hover:hover) and (pointer:fine){
  .surface{transition:border-color var(--slow) var(--ease)}
  .surface::after{background:radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
    oklch(0.565 0.185 255 / .05), transparent 62%)}
  .surface:hover::after{opacity:1}
  .surface:hover{border-color:oklch(0.565 0.185 255 / .20)}
}

/* ═══ БИЛЕТ ════════════════════════════════════════════════════════════════
   Пропуск, а не открытка: белая бумага, волосяная линия, настоящая
   перфорация. Корешок отличается от верха на две ступени светлоты,
   а не цветом. Вырезы прорезаны маской, сквозь них виден фон страницы.
   ════════════════════════════════════════════════════════════════════════ */
.ticket{display:flex;flex-direction:column;filter:drop-shadow(0 12px 28px oklch(0.20 0.01 265 / .07))}
.ticket__top,.ticket__stub{border:1px solid var(--hair-soft)}
.ticket__top{background:var(--paper);border-radius:var(--r-4) var(--r-4) 0 0;border-bottom:0;padding:var(--s-5)}

.ticket__perf{
  position:relative;height:var(--perf-h);
  border-inline:1px solid var(--hair-soft);
  background:linear-gradient(180deg, var(--paper), var(--sunk));
  -webkit-mask-image:
    radial-gradient(circle var(--notch) at 0 50%, transparent calc(var(--notch) - 1px), #000 var(--notch)),
    radial-gradient(circle var(--notch) at 100% 50%, transparent calc(var(--notch) - 1px), #000 var(--notch));
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(circle var(--notch) at 0 50%, transparent calc(var(--notch) - 1px), #000 var(--notch)),
    radial-gradient(circle var(--notch) at 100% 50%, transparent calc(var(--notch) - 1px), #000 var(--notch));
  mask-composite:intersect}
.ticket__perf::before{content:"";position:absolute;left:var(--s-5);right:var(--s-5);top:50%;
  border-top:1px dashed var(--hair)}

.ticket__stub{
  background:var(--sunk);border-radius:0 0 var(--r-4) var(--r-4);border-top:0;
  padding:var(--s-5) var(--s-5) var(--s-6);
  display:flex;flex-direction:column;align-items:center;gap:var(--s-4);text-align:center}

.tk-row{display:flex;align-items:center;gap:var(--s-3)}
.flag{width:var(--flag);height:var(--flag);flex:none;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--hair-soft)}
.flag svg{display:block;width:100%;height:100%}
.tk-name{flex:1;min-width:0}
.tk-title{font-size:var(--t-4);font-weight:600;letter-spacing:-.02em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-sub{margin-top:1px;font-size:var(--t-1);color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pill{display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:5px var(--s-3);border-radius:999px;
  font-size:var(--t-1);font-weight:500;white-space:nowrap;
  background:var(--ok-wash);color:var(--ok)}
.pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.facts{display:flex;gap:var(--s-5);margin-top:var(--s-5);padding-top:var(--s-5);
  border-top:1px solid var(--hair-soft)}
.fact{flex:1;min-width:0}
.fact__value{font-size:var(--t-5);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.fact__value small{font-size:var(--t-2);font-weight:500;color:var(--ink-3);letter-spacing:-.01em}
.fact__key{margin-top:6px;font-size:var(--t-1);color:var(--ink-3)}

/* QR остаётся белой плашкой в любой теме, и это не оплошность.
   Камера читает тёмный код на светлом фоне; инвертированный QR часть
   сканеров не берёт вовсе. Физически это наклейка на карточке — она
   и должна выглядеть как наклейка, а не как часть тёмной поверхности. */
.qr{width:var(--qr);flex:none;padding:var(--s-3);border-radius:var(--r-2);
  background:oklch(1 0 0);color:oklch(0.16 0 0);box-shadow:inset 0 0 0 1px var(--hair-soft)}
.qr svg{display:block;width:100%;height:auto}

.stub__text{min-width:0}
.code{display:inline-block;white-space:nowrap;font-family:var(--mono);
  font-size:var(--t-1);font-weight:500;letter-spacing:.06em;color:var(--ink-2)}
.stub__text p{margin:var(--s-2) 0 0;max-width:32ch;font-size:var(--t-1);line-height:1.5;color:var(--ink-3)}

/* ═══ КНОПКИ ═══════════════════════════════════════════════════════════════
   Одна сплошная заливка акцентом. Градиент внутри — четыре процента
   светлоты сверху вниз, ровно чтобы кнопка не выглядела наклейкой.
   Ничего не светится и не переливается.
   ════════════════════════════════════════════════════════════════════════ */
.stack{display:grid;gap:var(--s-3)}

/* Липкую кнопку убрал: `position: sticky` внутри .stack не работает —
   родитель ровно по высоте содержимого, двигаться внутри него некуда,
   и кнопка просто оставалась в потоке под доком. Вместо подпорки —
   честное поведение таб-бара: контент проезжает под ним, а снизу
   зарезервировано место, чтобы до последнего элемента можно было
   доскроллить (см. padding-bottom у .main). */

.btn{
  appearance:none;border:0;width:100%;min-height:calc(var(--tap) + var(--s-2));
  padding-inline:var(--s-5);border-radius:var(--r-2);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font:inherit;font-size:var(--t-3);font-weight:500;letter-spacing:-.01em;
  color:var(--ink);cursor:pointer;text-decoration:none;
  transition-property:background-color,color,scale,box-shadow;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
.btn:active{scale:.99}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn svg{width:var(--icon-1);height:var(--icon-1);stroke-width:1.9;flex:none}

/* Цвет и блик разнесены по разным свойствам намеренно.
   Если писать сокращённо `background`, при наведении меняется и
   background-image: градиент исчезает мгновенно, а цвет в этот момент
   ещё прозрачный — получается белая вспышка. Меняем только цвет. */
.btn--accent{color:var(--on-accent);
  background-color:var(--accent);
  background-image:linear-gradient(180deg, oklch(1 0 0 / .11), oklch(1 0 0 / 0) 60%);
  box-shadow:0 1px 2px oklch(0.40 0.16 255 / .26)}
.btn--accent:hover{background-color:var(--accent-press)}
.btn--accent:disabled{background-color:oklch(0.72 0.05 255);box-shadow:none;cursor:default}

.btn--plain{background-color:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair-soft), var(--sh-1)}
.btn--plain:hover{background-color:var(--sunk)}
.btn--quiet{background-color:transparent;color:var(--ink-2)}
.btn--quiet:hover{background-color:var(--sunk);color:var(--ink)}

/* ═══ СПИСОК ═══════════════════════════════════════════════════════════════ */
/* 28 (r-4) − 8 (padding) = 20 (r-3): вложенный радиус концентричен внешнему */
.list{padding:var(--s-2)}
.row{
  position:relative;
  display:flex;align-items:center;gap:var(--s-3);width:100%;min-width:0;
  min-height:calc(var(--tap) + var(--s-2));padding:var(--s-3) var(--s-4);
  border:0;border-radius:var(--r-3);background:transparent;
  font:inherit;font-size:var(--t-3);color:var(--ink);text-align:left;cursor:pointer;
  text-decoration:none;
  transition-property:background-color;transition-duration:var(--fast);transition-timing-function:var(--ease)}
.row:hover{background-color:var(--sunk)}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Разделитель — прямая черта, а не внутренняя тень.
   `box-shadow: inset 0 1px 0` повторяет скругление строки: линия загибается
   вверх на обоих концах, и в узкой колонке, где строки высокие, соседние
   загибы читаются как вложенные прямоугольники — будто каждая строка
   в своей рамке. Отступ по краям убирает и это, и стык с углом карточки. */
.row + .row::before{
  content:"";position:absolute;top:0;left:var(--s-4);right:var(--s-4);
  height:1px;background-color:var(--hair-soft)}
.row > span:first-child{flex:none;white-space:nowrap}
.row__value{margin-left:auto;min-width:0;font-family:var(--mono);font-size:var(--t-1);
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.row__icon{flex:none;width:var(--icon-1);height:var(--icon-1);color:var(--ink-3);stroke-width:1.7}

/* ─── Всплывающая подпись ──────────────────────────────────────────────────
   Замена alert(): системное окно перекрывает страницу целиком, а в webview
   мессенджеров иногда не закрывается вовсе. Подпись сама уходит через
   пару секунд и ничего не блокирует. */
.toast{
  position:fixed;left:50%;bottom:calc(var(--s-6) + env(safe-area-inset-bottom));
  transform:translate(-50%, 12px);z-index:60;
  max-width:min(92vw, 30rem);padding:var(--s-3) var(--s-5);
  border-radius:var(--r-2);background-color:var(--ink);color:var(--paper);
  font-size:var(--t-2);line-height:1.4;text-align:center;text-wrap:pretty;
  box-shadow:var(--sh-2);
  opacity:0;pointer-events:none;
  transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease)}
.toast--on{opacity:1;transform:translate(-50%, 0)}
@media (min-width:900px){ .toast{bottom:var(--s-8)} }

/* ─── Вопрос-ответ ─────────────────────────────────────────────────────────
   Нативные details/summary: раскрываются без единой строки скрипта, ищутся
   встроенным поиском по странице и правильно читаются экранными дикторами.
   Скрываем только треугольник по умолчанию — его заменяет своя стрелка. */
.qa + .qa{box-shadow:inset 0 1px 0 var(--hair-soft)}
.qa__q{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:var(--tap);padding:var(--s-3) 0;
  font-size:var(--t-3);font-weight:500;color:var(--ink);
  cursor:pointer;list-style:none;text-wrap:pretty}
.qa__q::-webkit-details-marker{display:none}
.qa__q:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-1)}
.qa__q svg{flex:none;width:var(--icon-1);height:var(--icon-1);margin-left:auto;
  color:var(--ink-3);stroke-width:1.7;
  transition:transform var(--fast) var(--ease)}
.qa[open] .qa__q svg{transform:rotate(180deg)}
.qa__a{padding:0 0 var(--s-4);font-size:var(--t-2);line-height:1.55;
  color:var(--ink-2);text-wrap:pretty}

.hint{display:flex;gap:var(--s-3);padding:var(--s-4);
  font-size:var(--t-1);line-height:1.5;color:var(--ink-3);text-wrap:pretty}
.hint svg{flex:none;width:var(--icon-1);height:var(--icon-1);margin-top:1px;stroke-width:1.7;color:var(--ink-3)}
/* Ссылка внутри подписи. Без правила браузер красит её своим синим
   с подчёркиванием — единственное место в интерфейсе, где вылезает
   чужой цвет. */
.hint a{color:var(--accent-ink);text-decoration:none;
  box-shadow:inset 0 -1px 0 oklch(0.480 0.172 255 / .35);
  transition:box-shadow var(--fast) var(--ease)}
.hint a:hover{box-shadow:inset 0 -1px 0 var(--accent-ink)}
.hint a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ═══ УСТАНОВКА ЗАВИСИТ ОТ УСТРОЙСТВА, А НЕ ОТ ШИРИНЫ ОКНА ═════════════════ */
.on-touch{display:inline-flex}
.on-pointer{display:none}
@media (hover:hover) and (pointer:fine){
  .on-touch{display:none}
  .on-pointer{display:inline-flex}
  .hint.on-pointer{display:flex}
}


/* ═══ ГЛАВНАЯ: СОСТОЯНИЕ МОИХ eSIM ═════════════════════════════════════════
   Человек заходит сюда в поездке ради одного числа — сколько осталось.
   Поэтому остаток набран крупно, а всё остальное вокруг него мельче.
   ════════════════════════════════════════════════════════════════════════ */
.deck{display:grid;gap:var(--s-4)}

.sim{
  display:flex;flex-direction:column;
  border-radius:var(--r-4);background-color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair-soft), var(--sh-1);
  color:var(--ink);
  transition-property:box-shadow;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
.sim:hover{box-shadow:inset 0 0 0 1px var(--hair-soft), var(--sh-2)}
/* Карточка — это две ссылки, а не одна: сама eSIM и её продление.
   Вложить ссылку в ссылку нельзя, поэтому кликабельна не карточка,
   а её тело; продление живёт отдельной строкой под ним. */
.sim__main{
  /* `align-content:start` обязателен. Карточки в решётке равной высоты,
     а сетка внутри по умолчанию растягивает строки — у карточки с коротким
     содержимым остаток трафика, полоса и подпись расползались по высоте,
     и соседние карточки переставали читаться как одинаковые. */
  display:grid;align-content:start;gap:var(--s-2);flex:1;padding:var(--s-5);
  border-radius:inherit;color:inherit;text-decoration:none;
  transition:transform var(--fast) var(--ease)}
.sim__main:active{transform:scale(.995)}
.sim__main:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Наведение и нажатие — единственные состояния, где карточка меняет вид.
   Всё остальное сообщается словами. */
.sim:has(.sim__main:hover){box-shadow:inset 0 0 0 1px var(--hair), var(--sh-2)}

/* Продление появляется не всегда. Пока трафика больше пятой части,
   кнопки нет вовсе: предлагать докупить то, чего ещё много, — это шум.
   Ближе к концу она тихая, а когда пакет израсходован — акцентная,
   потому что в этот момент это единственное осмысленное действие. */
.sim__act{display:flex;gap:var(--s-2);padding:0 var(--s-5) var(--s-5)}
.sim__act .btn{min-height:var(--tap);font-size:var(--t-2);padding-inline:var(--s-4)}

.sim__top{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3);min-width:0}
.sim__name{flex:1 1 7ch;min-width:7ch;font-size:var(--t-3);font-weight:600;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Остаток — главное число экрана. Табличные цифры, чтобы соседние
   карточки не плясали шириной при разных значениях. */
.sim__left{margin-top:var(--s-2);font-size:var(--t-5);font-weight:640;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.sim__left small{font-size:var(--t-3);font-weight:500;letter-spacing:-.01em;color:var(--ink-3)}
.sim__cap{font-size:var(--t-1);color:var(--ink-3)}
.sim__foot{margin-top:var(--s-1);font-size:var(--t-1);color:var(--ink-3);text-wrap:pretty}
/* Подпись показательной eSIM. Приглушена сильнее обычной: это служебная
   пометка, а не состояние тарифа. */
.sim__foot--demo{opacity:.75;font-style:italic}

.meter--big{height:6px;border-radius:3px;margin-top:var(--s-3)}

/* Состояние карточки читается краем глаза по цвету плашки, а не по тексту. */
.chip{flex:none;padding:4px var(--s-3);border-radius:999px;
  font-size:var(--t-1);font-weight:500;white-space:nowrap;
  background-color:var(--sunk);color:var(--ink-3)}
.chip--ok{background-color:var(--ok-wash);color:var(--ok)}
.chip--warn{background-color:var(--warn-wash);color:var(--warn)}
.chip--accent{background-color:var(--accent-wash);color:var(--accent-ink)}
.chip--muted{background-color:var(--sunk);color:var(--ink-3)}

/* Обводки акцентом у карточки больше нет.
   Она означала «эту eSIM надо поставить», но три обведённых карточки
   подряд читаются как три выбранных пункта — человек ищет, где он это
   выбрал, и не находит. Состояние называет плашка, действие предлагает
   кнопка; рамка для этого не нужна. */
.sim--accent{box-shadow:inset 0 0 0 1px var(--hair-soft), var(--sh-1)}

/* Кнопка справа в шапке. Отодвигается к правому краю сама, чтобы
   не зависеть от того, что стоит слева — крошка, кнопка «назад» или
   и то и другое. */
.iconbtn--right{margin-inline-start:auto}
/* Значок темы: в светлой показываем луну (нажмёшь — станет темно),
   в тёмной солнце. Прячем не скриптом, а стилем: скрипт к моменту
   первой отрисовки ещё не выполнился, и значок успел бы мигнуть. */
.iconbtn .on-dark{display:none}
.iconbtn .on-light{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .iconbtn .on-dark{display:block}
  :root:not([data-theme="light"]) .iconbtn .on-light{display:none}
}
:root[data-theme="dark"] .iconbtn .on-dark{display:block}
:root[data-theme="dark"] .iconbtn .on-light{display:none}
:root[data-theme="light"] .iconbtn .on-dark{display:none}
:root[data-theme="light"] .iconbtn .on-light{display:block}

/* ─── Карточка учётной записи ──────────────────────────────────────────────
   Кто вы: буква, имя из почты и сама почта. Ни остатка трафика, ни числа
   eSIM — это состояние, и живёт оно на «Главной». Два экрана, показывающих
   одни и те же цифры, человек читает как ошибку, а не как удобство.
   ────────────────────────────────────────────────────────────────────────── */
.profile{
  display:flex;align-items:center;gap:var(--s-4);min-width:0;
  padding:var(--s-5);border-radius:var(--r-4);
  background-color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair-soft), var(--sh-1)}
.profile__avatar{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:var(--t-4);font-weight:600;letter-spacing:-.02em;
  background:var(--accent-wash);color:var(--accent-ink)}
.profile__who{min-width:0}
.profile__name{display:block;font-size:var(--t-4);font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile__mail{display:block;margin-top:1px;font-size:var(--t-1);color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ─── Переключатель полок ──────────────────────────────────────────────────
   Страна · Регион · Весь мир. Это не фильтр, а три разные покупки: билет
   в одну страну, маршрут по региону и пакет для тех, кто летает постоянно.
   Смешанные в одном списке, они мешают друг другу: человек, ищущий Турцию,
   продирается через «Европу и Марокко».
   ────────────────────────────────────────────────────────────────────────── */
.segmented{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:2px;
  padding:3px;border-radius:var(--r-2);background-color:var(--sunk);
  box-shadow:inset 0 0 0 1px var(--hair-soft)}
.segmented__item{
  min-height:var(--tap);padding:0 var(--s-2);border:0;
  border-radius:calc(var(--r-2) - 3px);background-color:transparent;
  font:inherit;font-size:var(--t-2);font-weight:550;color:var(--ink-2);
  letter-spacing:-.01em;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition-property:background-color,color,box-shadow;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
/* Невыбранный пункт отвечает на наведение: без этого три слова на серой
   подложке читались как подпись, а не как то, что можно нажать. */
.segmented__item:not([aria-selected="true"]):hover{
  background-color:var(--hair-soft);color:var(--ink)}
.segmented__item[aria-selected="true"]{
  background-color:var(--paper);color:var(--ink);font-weight:600;
  box-shadow:var(--sh-1), inset 0 0 0 1px var(--hair-soft)}
.segmented__item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ─── Страны внутри регионального пакета ───────────────────────────────────
   «Европа, 33 страны» без перечисления бесполезна: человек, летящий
   в Черногорию, не может проверить, входит она в эти 33, и не покупает.
   ────────────────────────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips__item{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:5px var(--s-3) 5px 5px;border-radius:999px;
  background-color:var(--paper);box-shadow:inset 0 0 0 1px var(--hair-soft);
  font-size:var(--t-1);color:var(--ink-2);white-space:nowrap}
.chips__flag{width:20px;height:20px;flex:none;border-radius:50%;overflow:hidden;
  background-color:var(--sunk)}
.chips__flag img{display:block;width:100%;height:100%}
.chips__more{
  align-self:center;min-height:32px;padding:0 var(--s-3);border:0;border-radius:999px;
  background-color:var(--sunk);font:inherit;font-size:var(--t-1);font-weight:500;
  color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:background-color var(--fast) var(--ease)}
.chips__more:hover{background-color:var(--hair-soft)}
.chips__more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ─── Быстрые действия ─────────────────────────────────────────────────────*/
.quick{display:grid;gap:var(--s-2)}
.quick__item{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:var(--tap);padding:var(--s-3) var(--s-4);
  border-radius:var(--r-2);background-color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair-soft);
  font-size:var(--t-2);color:var(--ink);text-decoration:none;
  transition:background-color var(--fast) var(--ease)}
.quick__item:hover{background-color:var(--sunk)}
.quick__item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.quick__item svg{flex:none;width:var(--icon-1);height:var(--icon-1);
  color:var(--ink-3);stroke-width:1.8}

/* ═══ ШИРОКИЙ ЭКРАН ════════════════════════════════════════════════════════
   На телефоне список идёт в одну колонку, потому что другой ширины нет.
   На компьютере одна колонка посреди пустого экрана выглядит как
   растянутая мобильная версия — и это ровно то, чем она и была бы.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:720px){
  .deck{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .quick{grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--s-3)}

  /* Витрина и тарифы — в две колонки. Карточки становятся плитками:
     волосяная линия-разделитель между строками здесь бессмысленна,
     разделяет решётка. */
  /* `border:0` обязателен: у `.surface` рамка своя, и без её снятия вокруг
     решётки оставался лишний прямоугольник — контейнера уже нет, а обводка
     от него есть. */
  /* Число колонок считает сама решётка, а не набор медиазапросов.
     Медиазапрос знает ширину ОКНА, а плитке важна ширина КОЛОНКИ, в которой
     она лежит. На экране продления колонка 440 пикселей при окне 1440 —
     по медиазапросу вставало четыре плитки по сотне, и цена налезала
     на объём. `auto-fill` от минимальной ширины плитки такого не допускает
     нигде и не требует правил под каждую страницу. */
  .surface--split{background:transparent;box-shadow:none;border:0;padding:0 !important;
    display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:var(--s-3)}
  .surface--split > .card-link,
  .surface--split > .plan{
    border-radius:var(--r-3);background-color:var(--paper);
    box-shadow:inset 0 0 0 1px var(--hair-soft)}
  .surface--split > .card-link + .card-link,
  .surface--split > .plan + .plan{box-shadow:inset 0 0 0 1px var(--hair-soft)}
  .surface--split > .card-link:hover,
  .surface--split > .plan:hover{background-color:var(--sunk)}

  /* Плитка — не строка. Горизонтальная раскладка внутри узкой колонки
     сжимает название до нуля: `flex:1;min-width:0` разрешает сжатие до
     пустоты, и от карточки остаётся флаг и цена, без страны. Ставим
     содержимое столбиком — тогда ширина названия равна ширине плитки
     и сжимать нечего. */
  .surface--split > .card-link{
    flex-direction:column;align-items:flex-start;gap:0;
    padding:var(--s-4) var(--s-4) var(--s-5)}
  .surface--split > .card-link > .flag,
  .surface--split > .card-link > .sk--flag{margin-bottom:var(--s-3)}
  .surface--split > .card-link > .card-link__body{flex:none;width:100%}
  /* Цена прижата к низу плитки: у соседей названия в одну и в две строки,
     и без этого цены встают лесенкой. */
  .surface--split > .card-link > .card-link__price{
    margin-top:auto;padding-top:var(--s-3);font-size:var(--t-3)}
  .surface--split > .card-link > .sk--price{margin-top:auto}

  /* Тариф в плитке: объём и цена в одной строке, срок и цена за гигабайт
     под ними. Строкой это не ложится — «1 526 ₽ за ГБ» переносилось посреди
     числа. Цену не отжимаем к низу плитки: между ней и сроком получалась
     пустая полоса в треть карточки, а держать их рядом важнее — человек
     сравнивает объём с ценой, а не цену с краем плитки. */
  .surface--split > .plan{
    display:grid;grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"size price" "days days";
    align-items:baseline;gap:2px var(--s-3);
    padding:var(--s-4)}
  .surface--split > .plan > .plan__size{grid-area:size;min-width:0;font-size:var(--t-4)}
  .surface--split > .plan > .plan__price{grid-area:price;font-size:var(--t-4)}
  .surface--split > .plan > .plan__days{grid-area:days;min-width:0;margin-top:2px}
  /* Цена за гигабайт встаёт в строку со сроком: «7 дней · 149 ₽ за ГБ». */
  .surface--split > .plan .plan__per{display:inline;margin-top:0}
  .surface--split > .plan .plan__per::before{content:" · "}
  .surface--split > .plan > .sk--size{grid-area:size}
  .surface--split > .plan > .sk--price{grid-area:price;width:52px}
  .surface--split > .plan > .sk--days{grid-area:days;max-width:96px}

  /* Поиск не должен растягиваться на всю ширину: строка в тысячу
     пикселей под одно слово выглядит нелепо. Переключатель полок стоит
     под ним и обязан быть той же ширины — иначе он висит сам по себе.
     В строке поиска (`.findbar`) это правило снимается: там они делят
     ширину между собой. */
  .search,.segmented{max-width:var(--narrow)}
}

@media (min-width:1100px){
  .deck{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

/* ═══ ДВЕ КОЛОНКИ НА ГЛАВНОЙ ═══════════════════════════════════════════════
   Слева — кто вы и что можно сделать, справа — ваши eSIM. Левая колонка
   короткая и не прокручивается вместе со списком: когда карточек десяток,
   кнопки не должны уезжать за верхний край.
   ════════════════════════════════════════════════════════════════════════ */
.layout{display:grid;gap:var(--s-5)}
@media (min-width:1100px){
  /* Главное слева, справка справа. На витрине страны тарифы — главное,
     а «срок начинается с первого подключения» справочная приписка.
     В разметке порядок тот же, что на телефоне: сначала тарифы. */
  .layout--flip{grid-template-columns:minmax(0, 1fr) minmax(0, 320px);
    gap:0 var(--s-7);align-items:start;margin-top:var(--s-6)}
  /* Заголовки колонок должны стоять на одной высоте. Обнулять им отступ
     нельзя — они прижмутся к предыдущему блоку; отступ переносим на саму
     сетку, и обе колонки начинаются одинаково. */
  .layout--flip > * > .section-title:first-child{margin-top:0}
  .layout--flip .layout__side{position:sticky;top:var(--s-6)}
  /* В узкой колонке значение не помещается в строку с подписью и
     переносится с отступом в полколонки. Ставим его под подписью. */
  .layout--flip .layout__side .row--info{flex-direction:column;padding-block:var(--s-3)}
  .layout--flip .layout__side .row--info .row__value{margin-left:0;text-align:left}
}


/* ═══ ПЛАНШЕТ ≥ 720 ════════════════════════════════════════════════════════ */
@media (min-width:720px){
  :root{--gutter:var(--s-6)}
  /* Меню наверх. `sticky`, а не `fixed`: содержимое не должно подлезать
     под него, а высоту шапки при этом не приходится дублировать отступом
     у первого блока — прежняя фиксация именно этим и была неудобна. */
  .nav{
    position:sticky;top:var(--s-3);left:auto;right:auto;bottom:auto;
    width:min(100% - var(--gutter) * 2, var(--measure));margin:var(--s-3) auto var(--s-2);
    gap:var(--s-4);padding:6px}
  .nav__brand{display:flex;align-items:center;gap:var(--s-2);flex:none;
    padding:var(--s-1) var(--s-3) var(--s-1) var(--s-1);border-radius:999px;
    text-decoration:none;color:inherit}
  .nav__brand b{font-size:var(--t-2);font-weight:650;letter-spacing:-.02em;white-space:nowrap}
  .nav__brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .nav__logo{width:30px;height:30px;border-radius:9px;display:block}
  .nav__items{flex:0 1 auto;display:flex;gap:2px}
  .navitem{flex-direction:row;gap:var(--s-2);min-height:var(--tap);
    padding:0 var(--s-4);border-radius:999px;font-size:var(--t-1);line-height:1.2}
  .navitem__badge{position:static;margin-left:0;box-shadow:none}
  .nav__foot{display:flex;align-items:center;gap:var(--s-1);margin-left:auto;flex:none}
  .nav__user{display:flex;align-items:center;gap:var(--s-2);
    min-height:var(--tap);
    padding:var(--s-1) var(--s-4) var(--s-1) var(--s-2);border-radius:999px;
    font-size:var(--t-1);font-weight:550;color:var(--ink-2);
    text-decoration:none;
    box-shadow:inset 0 0 0 1px var(--hair-soft);
    transition-property:background-color,color,box-shadow;
    transition-duration:var(--fast);transition-timing-function:var(--ease)}
  .nav__user:hover{background-color:var(--sunk);color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--hair)}
  /* Длинная почта не должна расталкивать меню: «konstantin.petrov@…»
     отжимал пункты влево и обрезал «Направления». */
  .nav__name{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav__user:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .nav__avatar{width:26px;height:26px;border-radius:50%;flex:none;
    display:grid;place-items:center;font-size:11px;font-weight:650;
    background:var(--accent-wash);color:var(--accent-ink)}
  .main{padding-bottom:var(--s-8)}
  .grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s-6)}
  .ticket__stub{flex-direction:row;text-align:left;align-items:center;gap:var(--s-5);padding:var(--s-5)}
}

/* ═══ ДЕСКТОП ≥ 1100 ═══════════════════════════════════════════════════════ */
@media (min-width:1100px){
  :root{--gutter:var(--s-7)}
  .nav{gap:var(--s-5);padding:7px}
  .navitem{font-size:var(--t-2);font-weight:500;padding-inline:var(--s-5)}
  .navitem__badge{font-size:10px;line-height:16px;min-width:1.5em;padding-inline:5px}
  .nav__logo{width:32px;height:32px}
  .head{padding-top:var(--s-6)}
}

/* ═══ ЗАПАСНЫЕ ВАРИАНТЫ ════════════════════════════════════════════════════ */
@supports not (backdrop-filter: blur(1px)){ .nav{background:var(--glass-solid)} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ ОСТАЛЬНЫХ ЭКРАНОВ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Экран-состояние: одна мысль по центру ─────────────────────────────────
   Используют «выпускаем», «ошибка», «код уже погашен». Разница между ними
   только в глифе, тексте и наборе действий — верстка одна.
   ────────────────────────────────────────────────────────────────────────── */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--s-8) 0 var(--s-6);max-width:34ch;margin-inline:auto}
.state__glyph{width:var(--glyph);height:var(--glyph);border-radius:50%;flex:none;
  display:grid;place-items:center;margin-bottom:var(--s-5);
  background:var(--sunk);color:var(--ink-2)}
.state__glyph svg{width:calc(var(--glyph) / 2.2);height:calc(var(--glyph) / 2.2);stroke-width:1.5}
.state__glyph--ok{background:var(--ok-wash);color:var(--ok)}
.state__glyph--warn{background:var(--warn-wash);color:var(--warn)}
.state h1{margin:0;font-size:var(--t-4);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.state p{margin:var(--s-3) 0 0;font-size:var(--t-2);color:var(--ink-3);text-wrap:pretty}
.state .stack{width:100%;margin-top:var(--s-6)}

/* ─── Индикатор выпуска ────────────────────────────────────────────────────
   Тонкое кольцо. Бесконечных анимаций в интерфейсе четыре: это кольцо,
   пульс заглушек и два пятна на фоне; все гаснут при prefers-reduced-motion.
   Кольцо оправдано тем, что сообщает: процесс идёт, а не завис.
   ────────────────────────────────────────────────────────────────────────── */
.ring{width:calc(var(--glyph) / 2);height:calc(var(--glyph) / 2);flex:none}
.ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.ring__track{stroke:var(--hair)}
.ring__head{stroke:var(--accent);stroke-dasharray:34 100;
  transform-origin:50% 50%;animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Шаги выпуска ─────────────────────────────────────────────────────────*/
.steps{width:100%;margin-top:var(--s-6);text-align:left}
.step{display:flex;align-items:center;gap:var(--s-3);min-height:36px;
  font-size:var(--t-2);color:var(--ink-3)}
.step__dot{width:18px;height:18px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--sunk);color:var(--ink-3)}
.step__dot svg{width:11px;height:11px;stroke-width:2.4}
.step--done{color:var(--ink-2)}
.step--done .step__dot{background:var(--ok-wash);color:var(--ok)}
.step--now{color:var(--ink);font-weight:500}
.step--now .step__dot{background:var(--accent-wash);color:var(--accent-ink)}

/* ─── Ввод промокода ───────────────────────────────────────────────────────
   Моноширинный, крупный, с разрядкой: код диктуют вслух и переписывают
   с экрана телефона. Заглавные — принудительно, чтобы не было ощущения,
   что регистр важен.
   ────────────────────────────────────────────────────────────────────────── */
.field{display:block;width:100%}
.field__label{display:block;font-size:var(--t-1);font-weight:500;color:var(--ink-3);
  margin-bottom:var(--s-2)}
.field__input{
  width:100%;min-height:calc(var(--tap) + var(--s-3));
  padding:var(--s-3) var(--s-4);border:0;border-radius:var(--r-2);
  background-color:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair-soft);
  font-family:var(--mono);font-size:var(--t-4);font-weight:500;
  letter-spacing:.12em;text-align:center;text-transform:uppercase;
  transition-property:box-shadow,background-color;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
/* Подсказка внутри поля показывает форму кода, а не прячется: человек
   переписывает двенадцать знаков с экрана телефона, и разметка XXXX-XXXX-XXXX
   отвечает на вопрос «а дефисы ставить?» до того, как он возникнет. */
.field__input::placeholder{color:var(--ink-3);opacity:.55;font-weight:400}
.field__input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
.field__input:focus::placeholder{color:transparent}
.field__input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--warn)}
/* Поле выше нарисовано под промокод: моноширинный набор, разрядка,
   по центру, заглавными. Всё остальное — почта, номер заказа, свободный
   текст — так набирать нельзя: адрес заглавными читается как ошибка,
   а разрядка мешает заметить опечатку. */
.field__input--text{
  font-family:var(--sans);font-size:var(--t-3);font-weight:400;
  letter-spacing:-.011em;text-align:start;text-transform:none;
  min-height:calc(var(--tap) + var(--s-1))}

.field__hint{display:block;margin-top:var(--s-2);font-size:var(--t-1);color:var(--ink-3)}
.field__hint--error{color:var(--warn)}
.field__label--strong{font-size:var(--t-2);font-weight:600;color:var(--ink)}

/* ─── Выноска с образцом ───────────────────────────────────────────────────
   Показать образец надёжнее, чем описать словами: рядом с полем ввода
   лежит ровно то, что человек ищет в письме. */
.callout{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4);border-radius:var(--r-2);
  background-color:var(--sunk);box-shadow:inset 0 0 0 1px var(--hair-soft)}
.callout__sample{
  flex:0 0 auto;font-family:var(--mono);font-size:var(--t-2);font-weight:600;
  letter-spacing:.06em;color:var(--ink);white-space:nowrap;
  padding:var(--s-2) var(--s-3);border-radius:var(--r-1);
  background-color:var(--paper);box-shadow:0 1px 2px oklch(0 0 0 / .06)}
/* В образце обычно лежит промокод моноширинным, но иногда — значок.
   Без размера svg схлопывается в пустую белую плашку. */
.callout__sample svg{display:block;width:20px;height:20px;stroke-width:2;color:var(--ink-2)}
.callout__text{font-size:var(--t-1);line-height:1.45;color:var(--ink-2)}
.callout__text b{font-weight:600;color:var(--ink)}
@media (max-width:400px){
  .callout{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
}

/* ─── Список eSIM ──────────────────────────────────────────────────────────*/
.cards{display:grid;gap:var(--s-3)}
.card-link{
  position:relative;
  display:flex;align-items:center;gap:var(--s-3);width:100%;
  padding:var(--s-4);border:0;border-radius:var(--r-3);
  background-color:transparent;font:inherit;color:var(--ink);text-align:left;
  text-decoration:none;cursor:pointer;
  transition-property:background-color;transition-duration:var(--fast);transition-timing-function:var(--ease)}
.card-link:hover{background-color:var(--sunk)}
.card-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Та же прямая черта, что и в списке строк: внутренняя тень повторяла
   скругление и на высоких карточках читалась как вложенная рамка. */
.card-link + .card-link::before{
  content:"";position:absolute;top:0;left:var(--s-4);right:var(--s-4);
  height:1px;background-color:var(--hair-soft)}
.card-link__body{flex:1;min-width:0}
.card-link__title{display:block;font-size:var(--t-3);font-weight:500;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-link__meta{display:block;margin-top:2px;font-size:var(--t-1);color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-link__right{display:flex;align-items:center;gap:var(--s-2);flex:none}
.card-link__price{flex:none;font-size:var(--t-2);font-weight:550;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
/* На витрине названия длинные («Сингапур, Малайзия и Таиланд»). Даём две
   строки вместо многоточия: обрезанное название бесполезно. */
.card-link--wrap .card-link__title{white-space:normal;overflow:visible;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-link__meta--warn{color:var(--warn)}

/* Значок региона — стопка из трёх флагов входящих стран.
   Одинаковый серый глобус у всех 27 региональных наборов не различает
   ничего: «Балканы» и «Карибы» выглядели одной карточкой. Три флага
   узнаются быстрее любой подписи. */
.flag--stack{position:relative;background:transparent;box-shadow:none;overflow:visible}
.flag--stack i{
  position:absolute;display:block;border-radius:50%;overflow:hidden;
  background-color:var(--sunk);box-shadow:0 0 0 2px var(--paper)}
.flag--stack i img{display:block;width:100%;height:100%}
.flag--stack i:nth-child(1){width:66%;height:66%;left:0;top:0;z-index:3}
.flag--stack i:nth-child(2){width:58%;height:58%;right:0;top:6%;z-index:2}
.flag--stack i:nth-child(3){width:54%;height:54%;left:16%;bottom:0;z-index:1}

/* Регион вместо страны: флага у «Европы, 33 страны» нет и быть не может. */
.flag--globe{position:relative;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--hair-soft)}
.flag--globe::after{
  content:"";position:absolute;inset:22%;border-radius:50%;
  border:1.5px solid var(--ink-3);
  background:
    linear-gradient(to right, transparent calc(50% - .75px), var(--ink-3) calc(50% - .75px),
      var(--ink-3) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(to bottom, transparent calc(50% - .75px), var(--ink-3) calc(50% - .75px),
      var(--ink-3) calc(50% + .75px), transparent calc(50% + .75px));
  opacity:.7}

/* ─── Заглушки на время загрузки ───────────────────────────────────────────
   Список приходит с сервера, и до его прихода блок был нулевой высоты:
   анимация появления проходила по пустоте, а потом страница прыгала вниз
   на высоту двухсот карточек. Заглушки занимают место с первого кадра.
   Мерцание намеренно медленное и малоконтрастное — оно не должно спорить
   с содержимым, которое вот-вот появится. */
/* Мерцает строка целиком, а не каждый её кусок. Раньше на семь заглушек
   приходилось двадцать восемь отдельных анимаций — на слабом телефоне это
   заметно, а выглядит одинаково. */
.skeleton-row{pointer-events:none;animation:sk-pulse 1.6s var(--ease) infinite}
.sk{display:block;border-radius:6px;background-color:var(--sunk)}
.sk--flag{flex:none;width:var(--flag);height:var(--flag);border-radius:50%}
.sk--title{width:42%;height:13px}
.sk--meta{width:26%;height:10px;margin-top:7px}
.sk--price{flex:none;width:58px;height:13px}
.sk--size{flex:none;width:74px;height:20px}
.sk--days{flex:1;max-width:56px;height:11px}
@keyframes sk-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){ .sk{animation:none} }

/* Проявляется список целиком одной анимацией, а не каждая из сорока
   карточек своей. Подмена содержимого без перехода читается как рывок,
   но сорок параллельных анимаций — тоже рывок, только дороже. */
/* Длительность — из токенов, а не своя: 240 мс здесь были четвёртым
   значением рядом с 180 и 420, ничем не обоснованным. Подмена данных —
   это отклик, а не появление, поэтому --fast. */
.is-fresh{animation:sk-in var(--fast) var(--ease) both}
@keyframes sk-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .is-fresh{animation:none} }

/* ─── Поиск по витрине ─────────────────────────────────────────────────────*/
.search{
  display:flex;align-items:center;gap:var(--s-3);
  padding:0 var(--s-4);min-height:calc(var(--tap) + var(--s-2));
  border-radius:var(--r-2);background-color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair-soft);
  transition:box-shadow var(--fast) var(--ease)}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.search__icon{display:flex;flex:none;color:var(--ink-3)}
.search__icon svg{width:var(--icon-2);height:var(--icon-2);stroke-width:1.8}
/* Поле растягиваем на всю высоту обёртки: иначе палец попадает мимо
   и проверка целей справедливо ругается на 277×27. */
.search__input{
  flex:1;min-width:0;align-self:stretch;border:0;background:transparent;outline:0;
  font:inherit;font-size:var(--t-3);color:var(--ink);letter-spacing:-.011em}
.search__input::placeholder{color:var(--ink-3)}
.search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ─── Шапка направления ────────────────────────────────────────────────────*/
.place-head{display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4);border-radius:var(--r-3);
  background-color:var(--paper);box-shadow:inset 0 0 0 1px var(--hair-soft), var(--sh-1)}
.place-head__title{font-size:var(--t-3);font-weight:600;letter-spacing:-.015em}
.place-head__sub{margin-top:2px;font-size:var(--t-1);color:var(--ink-3);text-wrap:pretty}

/* ─── Честное объявление вместо кнопки, которая ничего не делает ───────────*/
.notice{
  margin-top:var(--s-6);padding:var(--s-5);border-radius:var(--r-3);
  background-color:var(--sunk);box-shadow:inset 0 0 0 1px var(--hair-soft);
  font-size:var(--t-2);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.notice b{display:block;margin-bottom:var(--s-1);font-weight:600;color:var(--ink)}
/* Отказ должен читаться как отказ, а не как обычная подсказка. */
.notice--warn{margin:0 0 var(--s-5);background-color:var(--warn-wash);
  box-shadow:inset 0 0 0 1px oklch(0.510 0.180 28 / .22)}
.notice--warn b{color:var(--warn)}

/* ─── Шкала ожидания ───────────────────────────────────────────────────────
   Идёт по кривой с замедлением и доходит до конца ровно тогда, когда
   профиль действительно готов, — 100% ставит не таймер, а ответ сервера. */
.bar{width:100%;max-width:19rem;height:6px;margin:var(--s-5) auto 0;
  border-radius:3px;background-color:var(--sunk);overflow:hidden}
/* Переход линейный намеренно: шкала не «оживает», она измеряет. Значение
   пишется скриптом только при изменении, поэтому переход теперь успевает
   отработать целиком — раньше его перезапускали шестьдесят раз в секунду. */
.bar__fill{display:block;width:0;height:100%;border-radius:inherit;
  background-color:var(--accent);
  transition:width var(--fast) linear}
.bar__note{margin-top:var(--s-3);font-size:var(--t-1);color:var(--ink-3);
  font-variant-numeric:tabular-nums}

/* ─── Переключатель устройства ─────────────────────────────────────────────
   Систему мы угадываем по браузеру, но человек может смотреть с компьютера,
   а ставить на телефон. Поэтому выбор всегда виден и всегда доступен. */
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  padding:3px;margin-bottom:var(--s-5);
  border-radius:var(--r-2);background-color:var(--sunk)}
.seg__btn{
  min-height:var(--tap);border:0;border-radius:calc(var(--r-2) - 4px);
  background-color:transparent;font:inherit;font-size:var(--t-2);font-weight:500;
  color:var(--ink-3);cursor:pointer;
  transition-property:background-color,color,box-shadow;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
.seg__btn:hover{color:var(--ink)}
.seg__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg__btn--on{background-color:var(--paper);color:var(--ink);box-shadow:var(--sh-1)}

/* ─── Нумерованные шаги установки ──────────────────────────────────────────*/
.steps-num{margin:var(--s-5) 0 0;padding:0 0 0 var(--s-5);
  font-size:var(--t-2);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.steps-num li{margin-bottom:var(--s-3)}
.steps-num li::marker{color:var(--ink-3);font-variant-numeric:tabular-nums}
.steps-num b{font-weight:600;color:var(--ink)}

/* ─── Полоса расхода ───────────────────────────────────────────────────────*/
.meter{display:block;margin-top:var(--s-2);height:4px;border-radius:2px;background:var(--sunk);overflow:hidden}
.meter__fill{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.meter__fill--low{background:var(--warn)}

/* ─── Витрина: тарифы страны ───────────────────────────────────────────────*/
.plans{display:grid;gap:var(--s-3)}
.plan{
  display:flex;align-items:center;gap:var(--s-4);width:100%;
  padding:var(--s-4);border:0;border-radius:var(--r-3);
  background-color:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  transition-property:background-color;transition-duration:var(--fast);transition-timing-function:var(--ease)}
.plan:hover{background-color:var(--sunk)}
.plan:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.plan + .plan{box-shadow:inset 0 1px 0 var(--hair-soft)}
.plan__size{font-size:var(--t-4);font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;min-width:5.5ch}
/* Цена за гигабайт стоит под сроком, а не в отдельной колонке: это
   справочное число для сравнения, а не то, что человек ищет глазами. */
.plan__days{flex:1;min-width:0;font-size:var(--t-1);color:var(--ink-3)}
.plan__per{display:block;margin-top:2px;font-size:var(--t-1);
  color:var(--ink-3);opacity:.75;font-variant-numeric:tabular-nums}
.plan__price{font-size:var(--t-3);font-weight:550;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ─── Служебное ────────────────────────────────────────────────────────────*/
.section-title{margin:var(--s-6) 0 var(--s-3);font-size:var(--t-1);font-weight:500;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}

/* Три ширины колонки, и выбор между ними — не про вкус, а про содержимое.
   `center` — форма: поля длиннее 440 пикселей выглядят как приглашение
   написать сочинение. `reading` — сплошной текст. Без класса — решётка,
   которой ширина нужна вся. Раньше `center` стоял и на витрине: каталог
   из 218 направлений жался в 440 пикселей посреди пустого экрана, а шапка
   при этом занимала всю ширину — заголовок и список не совпадали по левому
   краю на треть экрана. */
.center{width:100%;max-width:var(--narrow);margin-inline:auto}
/* Не по центру, а по левому краю `.measure`: у «Магазина» и «Главной»
   содержимое начинается там же, и при переходе между разделами колонка
   не прыгает вбок. */
/* Читаемая колонка. Прижималась влево, пока меню стояло сбоку: она
   упиралась в его край и выглядела частью общей сетки. Меню переехало
   наверх, и прижатая к левому краю колонка на широком экране осталась
   висеть в пустоте — теперь она по центру, как и всё остальное. */
.reading{width:100%;max-width:var(--reading);margin-inline:auto}


/* ─── Справочная строка ────────────────────────────────────────────────────
   В отличие от строки-кнопки, здесь значение — это текст, а не идентификатор.
   Обрезать его многоточием нельзя: «с первого подключ…» ничего не сообщает.
   На узком экране значение переезжает под подпись.
   ────────────────────────────────────────────────────────────────────────── */
.row--info{cursor:default;align-items:flex-start;flex-wrap:wrap;row-gap:2px}
.row--info:hover{background-color:transparent}
.row--info .row__value{font-family:var(--sans);font-size:var(--t-2);white-space:normal;
  overflow:visible;text-overflow:clip;letter-spacing:-.005em}
@media (max-width:479px){
  .row--info{flex-direction:column;padding-block:var(--s-3)}
  .row--info .row__value{margin-left:0;text-align:left}
}

/* ─── Карточка eSIM, ждущей активации ──────────────────────────────────────
   Плашка действия уезжает под заголовок: на 390 пикселях она иначе
   вжимается в название страны.
   ────────────────────────────────────────────────────────────────────────── */
.card-link--wide{flex-wrap:wrap;row-gap:var(--s-3)}
@media (max-width:479px){
  .card-link--wide .card-link__right{width:100%;justify-content:flex-start;
    padding-left:calc(var(--flag) + var(--s-3))}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ГЛАВНАЯ КАК ВИТРИНА
   Порядок блоков отвечает порядку вопросов: кто я → что у меня есть →
   что можно купить → у меня есть код. Каждый следующий нужен, только если
   на предыдущий ответа не нашлось.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Кто вошёл ───────────────────────────────────────────────────────────── */
.acct{margin-bottom:var(--s-4)}
.acct__in{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-2);
  background:var(--paper);border:1px solid var(--hair-soft);
  text-decoration:none;color:inherit;
  transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.acct__in:hover{background:var(--sunk);border-color:var(--hair)}
.acct__in:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acct__ava{width:38px;height:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--sunk);color:var(--ink-3);
  font-size:var(--t-2);font-weight:650}
.acct__ava svg{width:20px;height:20px;stroke-width:1.6}
.acct__ava--on{background:var(--accent-wash);color:var(--accent-ink)}
.acct__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.acct__body b{font-size:var(--t-2);font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct__body small{font-size:var(--t-1);color:var(--ink-3)}
.acct__go{margin-left:auto;flex:none;color:var(--ink-3);display:grid;place-items:center}
.acct__go svg{width:18px;height:18px;stroke-width:1.8}

/* ─── Крупное предложение ─────────────────────────────────────────────────── */
.pitch{margin:var(--s-5) 0 var(--s-5)}
.pitch__h{margin:0;font-size:var(--t-6);line-height:1.03;letter-spacing:-.03em;
  font-weight:650;text-wrap:balance}
.pitch__sub{margin:var(--s-3) 0 0;font-size:var(--t-2);color:var(--ink-3);
  letter-spacing:-.005em;max-width:46ch}
.pitch__sub b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}

/* Первый заголовок секции не должен отбивать от шапки второй раз. */
.section-title--first{margin-top:0}

/* ─── Купленные симки в ряд ───────────────────────────────────────────────────
   На телефоне карточки едут вбок с прилипанием: две-три eSIM столбцом
   отжимали витрину на второй экран, а витрина — то, ради чего сюда заходит
   тот, у кого симки уже есть, но кончился трафик.
   ────────────────────────────────────────────────────────────────────────── */
.deck--rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px, 82%);
  gap:var(--s-3);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  padding-bottom:var(--s-2);
  /* Полосу прокрутки не показываем: карточка, обрезанная краем экрана,
     сама говорит, что список едет дальше, а полоса под пальцем только
     мешает попасть по карточке. */
  scrollbar-width:none}
.deck--rail::-webkit-scrollbar{display:none}
.deck--rail > *{scroll-snap-align:start}
@media (min-width:720px){
  .deck--rail{grid-auto-flow:row;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-columns:auto;overflow:visible;padding-bottom:0}
}

/* ─── Промокод ────────────────────────────────────────────────────────────── */
.promo{margin-top:var(--s-7);padding:var(--s-5);border-radius:var(--r-3);
  background:var(--sunk);border:1px solid var(--hair-soft);
  display:flex;flex-direction:column;gap:var(--s-4)}
.promo__body b{display:block;font-size:var(--t-3);font-weight:650;letter-spacing:-.015em}
.promo__body p{margin:var(--s-2) 0 0;font-size:var(--t-2);color:var(--ink-3)}
.promo .btn{align-self:stretch}
@media (min-width:720px){
  .promo{flex-direction:row;align-items:center;gap:var(--s-6)}
  /* `min-width:0` обязателен: без него длинная строка не даёт колонке
     сжаться, и кнопка вытесняет текст в узкий столбик по два слова. */
  .promo__body{flex:1 1 auto;min-width:0}
  .promo .btn{align-self:auto;flex:0 0 auto;width:auto;padding-inline:var(--s-6)}
}

/* ─── Карточки частых вопросов ────────────────────────────────────────────────
   Четыре повода, по которым пишут в поддержку чаще всего. Список из девяти
   раскрывающихся строк формально содержал всё то же, но человек с севшим
   интернетом в чужой стране не читает список — он ищет глазами свою беду.
   ────────────────────────────────────────────────────────────────────────── */
.tiles{display:grid;gap:var(--s-3);margin-bottom:var(--s-6)}
.tiles__col{display:grid;gap:var(--s-3);align-content:start}
@media (min-width:640px){ .tiles{grid-template-columns:1fr 1fr;align-items:start} }

/* Плитка — раскрывающийся блок, а не ссылка на якорь.
   Ссылка уносила вниз страницы, к общему списку, где ответ надо было ещё
   найти и раскрыть: три действия там, где нужно одно. */
.tile{border-radius:var(--r-2);overflow:hidden;
  background:var(--paper);border:1px solid var(--hair-soft);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.tile[open]{border-color:var(--hair);
  box-shadow:0 1px 2px oklch(0.20 0.01 265 / .05), 0 14px 30px -18px oklch(0.20 0.01 265 / .30)}
.tile__head{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4);cursor:pointer;list-style:none;
  transition:background-color var(--fast) var(--ease)}
.tile__head::-webkit-details-marker{display:none}
.tile__head:hover{background:var(--sunk)}
.tile__head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:inherit}
.tile__icon{width:38px;height:38px;border-radius:var(--r-1);flex:none;
  display:grid;place-items:center;background:var(--accent-wash);color:var(--accent-ink)}
.tile__icon svg{width:20px;height:20px;stroke-width:1.6}
.tile__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.tile__body b{font-size:var(--t-2);font-weight:600;letter-spacing:-.01em}
.tile__body small{font-size:var(--t-1);color:var(--ink-3);line-height:1.35}
.tile__chev{margin-left:auto;flex:none;color:var(--ink-3);display:grid;place-items:center;
  transition:transform var(--fast) var(--ease)}
.tile__chev svg{width:18px;height:18px;stroke-width:1.8}
.tile[open] .tile__chev{transform:rotate(180deg)}
.tile[open] .tile__icon{background:var(--accent);color:var(--on-accent)}
.tile__answer{position:relative;padding:var(--s-4) var(--s-4) var(--s-5)}
.tile__answer::before{content:"";position:absolute;top:0;left:var(--s-4);right:var(--s-4);
  height:1px;background-color:var(--hair-soft)}
.tile__answer p{margin:0;font-size:var(--t-2);line-height:1.55;color:var(--ink-2)}
/* Абзац от абзаца — воздухом. Сплошной кусок в семь строк человек
   не читает: он ищет в нём глазами свою ситуацию, и глазу не за что
   зацепиться. */
.tile__answer p + p{margin-top:var(--s-3)}
.qa__a p{margin:0}
.qa__a p + p{margin-top:var(--s-3)}
.tile__answer p + .tile__sub{margin-top:var(--s-4)}
.tile__sub{display:block;font-size:var(--t-1);font-weight:650;color:var(--ink);
  margin-bottom:var(--s-2);letter-spacing:-.005em}

/* Длину строки ограничиваем у текста, а не у колонки: колонка теперь
   одной ширины на всех страницах, а читать строку в сто знаков нельзя. */
.reading .head p,.reading .qa__a,.tile__answer p{max-width:74ch}


/* ═══════════════════════════════════════════════════════════════════════════
   РЕДИЗАЙН: ЧЕТЫРЕ ЭКРАНА
   Главная отвечает «что у меня сейчас», «Направления» — «куда я лечу»,
   «Помощь» — «у меня не работает», «Аккаунт» — «поменять и посмотреть».
   Витрина ушла с главной: пока она жила там, человек с двумя купленными
   симками пролистывал свои карточки, чтобы добраться до выбора страны.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Переходы между экранами ──────────────────────────────────────────────
   Сайт из отдельных HTML-файлов, и переход между ними был белой вспышкой:
   браузер гасит старую страницу до того, как отрисует новую. Штатный
   переход убирает вспышку и оставляет меню неподвижным — а значит, меню
   читается как одна и та же пилюля, а не как четыре разных.

   Где не поддерживается (Firefox), правила просто игнорируются: переход
   остаётся прежним, ничего не ломается. */
@view-transition{ navigation:auto }

::view-transition-old(root){animation:vt-out 90ms var(--ease) both}
::view-transition-new(root){animation:none}
@keyframes vt-out{to{opacity:0}}

/* Меню и фоновый свет не участвуют в переходе: собственное имя выводит
   элемент из общего снимка, и он остаётся стоять на месте. */
.nav{view-transition-name:nav}
.light{view-transition-name:light}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ─── Приветствие ──────────────────────────────────────────────────────────
   Первая строка экрана отвечает на вопрос «я вошёл?». Пока её не было,
   человек, вернувшийся через неделю, искал свои симки там, где их для него
   ещё не существует, и решал, что заказ пропал. */
.head--hello{padding-bottom:var(--s-4)}
.hello{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.hello__ava{width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-ink);
  font-size:var(--t-3);font-weight:650;letter-spacing:-.01em}
.hello__ava svg{width:23px;height:23px;stroke-width:1.6}
.hello__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.hello__name{font-size:var(--t-4);font-weight:650;letter-spacing:-.022em;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ровно одна строка в обоих состояниях: у гостя подпись, у вошедшего
   почта. Пока их было две и одна, блок терял строку на ответе сервера,
   и всё под ним подпрыгивало. */
.hello__sub{font-size:var(--t-1);line-height:1.3;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hello__btn{margin-left:auto;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding-inline:var(--s-5);border-radius:999px;
  background-color:var(--accent);
  background-image:linear-gradient(180deg, oklch(1 0 0 / .11), oklch(1 0 0 / 0) 60%);
  color:var(--on-accent);font-size:var(--t-2);font-weight:550;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 2px oklch(0.40 0.16 255 / .26);
  transition-property:background-color,scale;transition-duration:var(--fast);
  transition-timing-function:var(--ease)}
.hello__btn:hover{background-color:var(--accent-press)}
.hello__btn:active{scale:.97}
.hello__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hello__btn--quiet{background-color:var(--sunk);background-image:none;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--hair-soft)}
.hello__btn--quiet:hover{background-color:var(--sunk);color:var(--ink)}

/* ─── Два пути с главной ───────────────────────────────────────────────────
   Выбрать направление или открыть уже купленное кодом. Обе карточки равны
   по весу: у гостя нет ни одного заказа, по которому можно было бы
   угадать, какая из двух дорог его. */
.offer{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
@media (min-width:640px){ .offer{grid-template-columns:1fr 1fr} }

.offer__card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  padding:var(--s-5);border-radius:var(--r-4);
  background-color:var(--paper);color:inherit;text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--hair-soft), var(--sh-1);
  transition-property:transform,box-shadow;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
/* Свечение в углу — не украшение: оно отделяет действие от справочных
   блоков, которые на этом же экране лежат ровной бумагой. */
.offer__card::before{
  content:"";position:absolute;z-index:-1;
  inset:-52% -30% auto auto;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 64%);
  opacity:.38;
  transition-property:opacity,transform;
  transition-duration:var(--slow);transition-timing-function:var(--ease)}
.offer__card:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--accent-hair), var(--sh-2)}
.offer__card:hover::before{opacity:.8;transform:scale(1.18)}
.offer__card:active{transform:translateY(0) scale(.995)}
.offer__card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.offer__icon{width:44px;height:44px;flex:none;border-radius:var(--r-2);
  display:grid;place-items:center;margin-bottom:var(--s-4);
  background:var(--accent-wash);color:var(--accent-ink)}
.offer__icon svg{width:22px;height:22px;stroke-width:1.7}
.offer__h{font-size:var(--t-3);font-weight:650;letter-spacing:-.018em}
.offer__p{margin:var(--s-2) 0 var(--s-4);font-size:var(--t-2);line-height:1.45;
  color:var(--ink-3);text-wrap:pretty}
.offer__p b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.offer__go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-2);font-weight:600;color:var(--accent-ink)}
.offer__go svg{width:16px;height:16px;stroke-width:2.1;
  transition:transform var(--fast) var(--ease)}
.offer__card:hover .offer__go svg{transform:translateX(3px)}

/* ─── Полка популярных направлений ─────────────────────────────────────────
   Круглые флаги, а не список карточек: здесь не выбирают из двухсот,
   а узнают своё направление в лицо. Полный список живёт на «Направлениях».
   На телефоне полка едет вбок и упирается в края экрана — обрезанный
   восьмой флаг честнее говорит «дальше есть ещё», чем любая стрелка. */
.dests{
  display:grid;grid-auto-flow:column;grid-auto-columns:78px;gap:var(--s-2);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);
  padding:var(--s-1) var(--gutter) var(--s-2);
  margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:none}
.dests::-webkit-scrollbar{display:none}
.dests > *{scroll-snap-align:start}

.dest{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  padding-top:2px;color:inherit;text-decoration:none;
  transition:transform var(--fast) var(--ease)}
.dest:hover{transform:translateY(-3px)}
.dest:active{transform:translateY(0) scale(.97)}
.dest:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-2)}
.dest__flag{width:56px;height:56px;flex:none;border-radius:50%;overflow:hidden;
  background-color:var(--sunk);
  box-shadow:inset 0 0 0 1px var(--hair-soft), 0 2px 6px -3px oklch(0.20 0.01 265 / .28);
  transition:box-shadow var(--fast) var(--ease)}
.dest:hover .dest__flag{
  box-shadow:0 0 0 2px var(--accent-hair), 0 8px 16px -8px oklch(0.20 0.01 265 / .45)}
.dest__flag img,.dest__flag svg{display:block;width:100%;height:100%;object-fit:cover}
.dest__name{max-width:78px;font-size:var(--t-1);font-weight:500;line-height:1.15;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dest__price{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;line-height:1.1}

.sk--round{width:56px;height:56px;border-radius:50%}
.sk--word{width:46px;height:9px}
/* Размеры сняты с настоящей карточки, а не подобраны на глаз:
   `--s-2` перед остатком, тот же clamp у его высоты, `--s-4` перед
   полосой, `--s-1` перед сроком. Заглушка занимает ровно то место,
   которое займут данные. */
.sk--big{width:58%;height:clamp(34px, 8.5vw, 42px);border-radius:8px;margin-top:var(--s-2)}
.sk--line{width:46%;height:13px;margin-block:3px}
.sk--bar{width:100%;height:8px;border-radius:999px;margin-top:var(--s-4)}
.sk--bar + .sk--line{width:62%;margin-top:var(--s-1)}

@media (min-width:720px){
  /* На компьютере ехать некуда и незачем: полка становится решёткой. */
  .dests{grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:repeat(auto-fill, minmax(86px, 1fr));
    gap:var(--s-4) var(--s-2);
    overflow:visible;margin-inline:0;padding-inline:0}
}

/* ─── Строки-входы в аккаунте ──────────────────────────────────────────────
   Раньше это были три кнопки в самом низу экрана, под историей заказов
   и выбором темы: до них доходили только те, кто и так знал, что ищет. */
.set{display:grid;gap:var(--s-2)}
.set__row{
  display:flex;align-items:center;gap:var(--s-3);min-height:60px;
  padding:var(--s-3) var(--s-4);border-radius:var(--r-3);
  background-color:var(--paper);color:inherit;text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--hair-soft);
  transition-property:background-color,box-shadow,scale;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
.set__row:hover{background-color:var(--sunk);box-shadow:inset 0 0 0 1px var(--hair)}
.set__row:active{scale:.995}
.set__row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.set__icon{width:38px;height:38px;flex:none;border-radius:var(--r-1);
  display:grid;place-items:center;background:var(--accent-wash);color:var(--accent-ink)}
.set__icon svg{width:20px;height:20px;stroke-width:1.7}
.set__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.set__body b{font-size:var(--t-2);font-weight:600;letter-spacing:-.01em}
.set__body small{font-size:var(--t-1);color:var(--ink-3);line-height:1.3}
.set__go{margin-left:auto;flex:none;color:var(--ink-3);display:grid;place-items:center}
.set__go svg{width:18px;height:18px;stroke-width:1.8;
  transition:transform var(--fast) var(--ease)}
.set__row:hover .set__go svg{transform:translateX(2px)}
@media (min-width:640px){ .set{grid-template-columns:repeat(3, minmax(0,1fr))} }

/* ─── Выбранный тариф на экране оформления ─────────────────────────────────*/
.pick{display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-5);border-radius:var(--r-4);
  background-color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair-soft), var(--sh-1)}
.pick__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pick__title{font-size:var(--t-3);font-weight:650;letter-spacing:-.018em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick__sub{font-size:var(--t-1);color:var(--ink-3)}
.pick__price{flex:none;font-size:var(--t-4);font-weight:650;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ─── Карточка eSIM: остаток крупно ────────────────────────────────────────
   Человек открывает главную в поездке ради одного числа. Оно и набрано
   как единственное: остальное на карточке мельче его вдвое. */
.sim{position:relative;isolation:isolate;overflow:hidden}
.sim::before{
  content:"";position:absolute;z-index:-1;
  inset:-58% -40% auto auto;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 66%);
  opacity:.42;transition:opacity var(--slow) var(--ease)}
.sim:hover::before{opacity:.75}
.sim--warn::before{
  background:radial-gradient(circle at 50% 50%, var(--warn-wash), transparent 66%);
  opacity:.55}
.sim__left{font-size:clamp(34px, 8.5vw, 42px);font-weight:660;letter-spacing:-.04em}
.sim__left small{font-size:var(--t-3)}
.meter--big{height:8px;border-radius:999px;margin-top:var(--s-4)}
.meter__fill{transition:width var(--slow) var(--ease)}

/* ─── Плавное раскрытие плиток и вопросов ──────────────────────────────────
   `details` открывается мгновенным скачком высоты: страница под ответом
   прыгает вниз, и глаз теряет строку, которую читал. Свойство
   `interpolate-size` разрешает анимировать `auto`; там, где его нет,
   раскрытие остаётся прежним, мгновенным. */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}

  .tile::details-content,.qa::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--slow) var(--ease),
               content-visibility var(--slow) allow-discrete;
    content-visibility:hidden}
  .tile[open]::details-content,.qa[open]::details-content{
    block-size:auto;content-visibility:visible}
}

/* Значок плитки при раскрытии заливается акцентом — это уже было; добавлен
   только плавный переход, без него он менял цвет рывком. */
.tile__icon{transition:background-color var(--fast) var(--ease),
                      color var(--fast) var(--ease)}
.tile{transition-property:border-color,box-shadow,transform;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
.tile:hover:not([open]){transform:translateY(-1px)}

/* ─── Нажатие на карточку списка ───────────────────────────────────────────
   Отклик на палец. Без него карточка отвечает только сменой фона, а на
   телефоне фон под пальцем не виден — его закрывает сам палец. */
.card-link{transition-property:background-color,scale;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
.card-link:active{scale:.99}
.plan{transition-property:background-color,scale;
  transition-duration:var(--fast);transition-timing-function:var(--ease)}
.plan:active{scale:.99}

/* ─── Подмена заглушек ─────────────────────────────────────────────────────
   Заглушка и карточка должны совпадать по высоте, иначе страница дёргается
   в момент подмены. Полка популярных направлений держит высоту сама:
   заглушка повторяет её строение — круг, слово, цена. */
.dests.is-fresh > .dest{animation:rise-sm 320ms var(--ease) both}
.dests.is-fresh > .dest:nth-child(1){animation-delay:0ms}
.dests.is-fresh > .dest:nth-child(2){animation-delay:30ms}
.dests.is-fresh > .dest:nth-child(3){animation-delay:60ms}
.dests.is-fresh > .dest:nth-child(4){animation-delay:90ms}
.dests.is-fresh > .dest:nth-child(5){animation-delay:120ms}
.dests.is-fresh > .dest:nth-child(6){animation-delay:150ms}
.dests.is-fresh > .dest:nth-child(7){animation-delay:180ms}
.dests.is-fresh > .dest:nth-child(n+8){animation-delay:210ms}
@media (prefers-reduced-motion:reduce){ .dests.is-fresh > .dest{animation:none} }

/* Кнопка со стрелкой в конце строки: стрелка отъезжает при наведении,
   как и в карточках выше, — одно движение на весь интерфейс. */
.btn svg{transition:transform var(--fast) var(--ease)}
.btn--plain:hover svg{transform:translateX(3px)}


/* ─── Строка поиска: запрос слева, полки справа ────────────────────────────
   На компьютере поиск занимал 440 пикселей из 960, переключатель стоял
   под ним, и справа от обоих пустовала половина экрана. Одна строка
   убирает и пустоту, и лишний вертикальный шаг перед списком.
   ────────────────────────────────────────────────────────────────────────── */
.findbar{display:grid;gap:var(--s-3)}
@media (min-width:720px){
  .findbar{grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:var(--s-4)}
  .findbar .search{max-width:none}
  /* Ширина полок задана числом, а не долей: «Страна · Регион · Весь мир»
     набраны разной длины, и от доли колонки они плясали бы при каждом
     изменении окна. */
  .findbar .segmented{max-width:none;width:340px}
}

/* Каждое предложение подзаголовка — с новой строки. Две мысли в одном
   абзаце читаются как одна длинная. */
.pitch__sub > span{display:block}

/* ─── Форма и объяснение рядом ─────────────────────────────────────────────
   Экраны ввода стояли колонкой 440 пикселей посреди пустого экрана:
   заголовок «Введите код активации» ломался на две строки при том, что
   справа оставалось полтора метра свободного места. Слева объяснение,
   справа поля; левый край совпадает с левым краем остальных экранов.
   ────────────────────────────────────────────────────────────────────────── */
.split{display:grid;gap:var(--s-5);align-items:start}
.split__side{display:grid;gap:var(--s-4);align-content:start;min-width:0}
.split__form{min-width:0}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0, 1fr) minmax(0, 420px);gap:var(--s-7)}
  /* Форма важнее объяснения, поэтому в разметке она вторая, а на широком
     экране встаёт справа — там, где заканчивается чтение. На телефоне
     порядок обратный: сначала объяснить, потом просить. */
}
.split .callout{margin:0}
.split .notice{margin-top:0}
.split .hint{padding-block:0}

/* Кнопка входа в карточке учётной записи прижата к правому краю. */
.profile .hello__btn{flex:none}
.profile__who{flex:1;min-width:0}
/* На телефоне кнопка уезжает на свою строку. Втроём — кружок, две строки
   текста и пилюля — они не помещаются в 393 пикселя: от «Вашего кабинета»
   оставалось «Ваш каби…», а от почты три точки. */
@media (max-width:479px){
  .profile{flex-wrap:wrap;row-gap:var(--s-4)}
  .profile .hello__btn{width:100%;margin-left:0}
}

/* Значок человека в кружке. Кружок и есть внешняя окружность значка,
   поэтому внутри только сам человек — иначе получалось кольцо в кольце. */
.nav__avatar svg{width:16px;height:16px;stroke-width:1.9;color:var(--accent-ink)}
.profile__avatar svg{width:26px;height:26px;stroke-width:1.7}
.hello__ava svg{color:inherit}


/* ═══ ЧТО ВИДНО С ПЕРВОГО КАДРА ════════════════════════════════════════════
   Разметка приезжает мгновенно, ответ сервера — через две-четыре десятых
   секунды. Всё, что раскрывалось по ответу, отпихивало вниз уже
   поднявшиеся блоки — ровно посреди анимации появления, и это читалось
   как рывок интерфейса, а не как приход данных.

   Теперь вид страницы решается до первой отрисовки: flow.js — обычный
   скрипт в конце <body>, он успевает проставить атрибуты на <html>
   по памяти о прошлом заходе. Тот, кто открыл сайт посмотреть остаток,
   почти наверняка открывал его и вчера.
   ════════════════════════════════════════════════════════════════════════ */

/* Секция «Мои eSIM». Атрибут стоит на <html>, а не на самой секции:
   решение принимается раньше, чем существует <body>. */
[data-mine]{display:none}
:root[data-sims="1"] [data-mine]{display:block}

/* Две кнопки в приветствии меняются местами по ответу сервера. Пока
   ответа нет, показываем ту, что была в прошлый раз, — иначе у вошедшего
   мигает «Войти», а у гостя «Аккаунт». */
:root[data-signed="1"] [data-hello-login]{display:none}
:root:not([data-signed="1"]) [data-hello-account]{display:none}
:root[data-signed="1"] [data-me-login]{display:none}

/* ─── Кружок с буквой в пункте «Аккаунт» ───────────────────────────────────
   Занимает ровно место значка, который заменяет: иначе подстановка буквы
   двигала бы подпись под ней. */
.navitem__ava{
  width:var(--icon-2);height:var(--icon-2);flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:0;
  background:var(--accent);color:var(--on-accent)}
.navitem[aria-current="page"] .navitem__ava{box-shadow:0 0 0 2px var(--accent-wash)}
/* Буква заменяет значок, а не встаёт рядом. */
.navitem--me > svg{display:none}

/* Меню без пилюли учётной записи стало короче: кнопка темы осталась одна
   и не должна висеть вплотную к последнему пункту. */
@media (min-width:720px){
  .nav__foot{margin-left:auto;padding-left:var(--s-2)}
}

.sk--word--sm{width:34px;height:8px}

/* Высота полки с симками, запомненная с прошлого захода.
   У карточки с кончающимся трафиком есть кнопка продления, у обычной
   нет, — разница в сотню пикселей, и угадать её заранее нельзя.
   Запомненное значение держит место до прихода данных. */
.deck--rail{min-height:var(--deck-h, auto)}


/* ═══ ПОДВАЛ ═══════════════════════════════════════════════════════════════
   Соглашение и политика должны находиться с любого экрана, а не только
   с того, где о них вспомнили. Подвал намеренно тихий: это не раздел
   сайта, а место, где лежат документы.

   Запас снизу под плавающую пилюлю живёт здесь, а не у `main`: иначе
   между последним блоком страницы и подвалом зияла бы пустота
   в полтора экрана.
   ════════════════════════════════════════════════════════════════════════ */
.foot{
  padding:var(--s-6) var(--gutter)
          calc(var(--s-7) + var(--tap) + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair-soft);
  color:var(--ink-3);font-size:var(--t-1);line-height:1.5}
/* На телефоне подвал идёт столбцом: название, потом ссылки. В строку
   они не помещаются, и название повисало сбоку от столбца ссылок. */
.foot__row{display:grid;gap:var(--s-4);justify-items:start}
.foot__brand{font-weight:650;letter-spacing:-.02em;color:var(--ink-2)}
/* На телефоне ссылки идут столбцом: в строку они не помещаются и
   ложатся неровной лесенкой — «Пользовательское соглашение» одно,
   а «Политика конфиденциальности» и «Помощь» вдвоём. */
.foot__links{display:grid;gap:var(--s-3);justify-items:start}
@media (min-width:640px){
  .foot__links{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5)}
}
.foot__links a{color:var(--ink-3);text-decoration:none;
  transition:color var(--fast) var(--ease)}
.foot__links a:hover{color:var(--ink)}
.foot__links a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.foot__note{margin:var(--s-4) 0 0;max-width:60ch;color:var(--ink-3);opacity:.85;text-wrap:pretty}
@media (min-width:640px){
  .foot__row{display:flex;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:var(--s-3) var(--s-5)}
}
@media (min-width:720px){ .foot{padding-bottom:var(--s-7)} }

/* ─── Строка согласия под кнопкой ──────────────────────────────────────────
   Там же, где человек оставляет о себе данные, а не где-то в подвале:
   согласие, до которого надо долистать, — не согласие. */
.consent{margin:var(--s-3) 0 0;font-size:var(--t-1);line-height:1.45;
  color:var(--ink-3);text-align:center;text-wrap:pretty}
.consent a{color:var(--accent-ink);text-decoration:none;
  box-shadow:inset 0 -1px 0 oklch(0.480 0.172 255 / .35);
  transition:box-shadow var(--fast) var(--ease)}
.consent a:hover{box-shadow:inset 0 -1px 0 var(--accent-ink)}
.consent a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ─── Документы ────────────────────────────────────────────────────────────
   Сплошной текст, который читают редко и по делу. Строка ограничена
   по длине, разделы отбиты воздухом, списки — тем же кеглем, что абзацы:
   документ должен читаться, а не пугать.
   ────────────────────────────────────────────────────────────────────────── */
.legal{max-width:74ch}
.legal h2{margin:var(--s-7) 0 var(--s-3);font-size:var(--t-3);font-weight:650;
  letter-spacing:-.018em;line-height:1.25;color:var(--ink);text-wrap:balance}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 var(--s-3);font-size:var(--t-2);line-height:1.6;
  color:var(--ink-2);text-wrap:pretty}
.legal ul{margin:0 0 var(--s-4);padding-left:var(--s-5)}
.legal li{margin-bottom:var(--s-2);font-size:var(--t-2);line-height:1.6;color:var(--ink-2)}
.legal li::marker{color:var(--ink-3)}
.legal li b,.legal p b{font-weight:600;color:var(--ink)}
.legal a{color:var(--accent-ink);text-decoration:none;
  box-shadow:inset 0 -1px 0 oklch(0.480 0.172 255 / .35)}
.legal a:hover{box-shadow:inset 0 -1px 0 var(--accent-ink)}
.legal a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.legal__meta{margin-top:var(--s-7);padding-top:var(--s-4);
  border-top:1px solid var(--hair-soft);
  font-size:var(--t-1);color:var(--ink-3)}