/* YATUMO storefront — single stylesheet. Theme: "sunset flight" — navy night sky with a gold/orange/coral accent (same palette as the airport videos), twinkling stars,
   night-sky footer; one file for home, country page, account and login. */

/* ---------- fonts (02.10.2026): Onest for text, Unbounded for headlines, numbers and the wordmark. Self-hosted variable fonts (SIL OFL), one file per script;
   the fallback faces carry the metrics of the real fonts, so nothing jumps when they arrive. ---------- */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/unbounded-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/unbounded-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The ruble sign is in neither of the subsets above: without these two it comes from Arial and stands off the digits' line and height */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/onest-rub.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/unbounded-rub.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Onest fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 105.2%; ascent-override: 92.2%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Unbounded fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 134.6%; ascent-override: 73.9%; descent-override: 18.2%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  --bg: #ffffff; --bg-soft: #fff6ee; --bg-accent: #fff0e3; --page: #f7f9ff;
  --text: #151f40; --muted: #455381; --faint: #7382b3;
  --line: #e1e8f5; --line-strong: #c9d5ea;
  --accent: #f0600f; --accent-hover: #d64f06; --accent-text: #c2470a;
  --sunset: linear-gradient(120deg, #ffc233 0%, #ff8a2b 48%, #ff5a3c 100%);
  --sunset-soft: linear-gradient(135deg, #fff3e0 0%, #ffe9d6 100%);
  --night: linear-gradient(170deg, #040a2b 0%, #0a1d5c 50%, #164590 100%);
  --gold: #ffc233; --violet: #2f6bd8; --pink: #ff5a3c;
  --glow: 0 10px 30px rgba(255, 96, 50, .28);
  --lift: 0 14px 40px rgba(28, 43, 92, .14);
  --ok: #1f7a3f; --ok-bg: #eef7f0; --warn: #8a5a00; --warn-bg: #fff6e0; --err: #b3261e; --err-bg: #fdecea;
  --r-sm: 10px; --r: 18px; --r-lg: 28px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --font: "Twemoji Country Flags", "Onest", "Onest fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Twemoji Country Flags", "Unbounded", "Unbounded fallback", "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, Menlo, monospace;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* min-height + no-repeat: on a short page (login, an empty cabinet) the glow gradients used to be tiled at the end of the content, leaving a visible step across the page */
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: radial-gradient(1200px 500px at 90% -10%, #ffe9d2 0%, transparent 60%), radial-gradient(900px 500px at -10% 30%, #dfe9ff 0%, transparent 60%), var(--page); background-repeat: no-repeat; color: var(--text); font: 16px/1.5 "Twemoji Country Flags", var(--font); }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: var(--accent-text); }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { margin: 0 0 var(--s3); line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 18px; }
p { margin: 0 0 var(--s3); }
small { font-size: 14px; }
.muted, .sub { color: var(--muted); }
.shell { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s4); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header / footer ---------- */
.site-header { position: relative; z-index: 10; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); }
.site-header .shell { display: flex; align-items: center; gap: var(--s5); min-height: 68px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; gap: var(--s2); color: var(--text); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: .04em; }
.logo-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--sunset); color: #fff; display: grid; place-items: center; font-size: 17px; box-shadow: var(--glow); transform: rotate(-12deg); }
.site-nav { display: flex; gap: var(--s5); margin-left: auto; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.site-nav a:hover { color: var(--accent-text); }
/* header over a photo (home hero, country page) */
.site-header.on-photo { position: absolute; top: 0; left: 0; right: 0; background: transparent; border: 0; backdrop-filter: none; }
.site-header.on-photo .logo, .site-header.on-photo .site-nav a { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.site-header.on-photo .site-nav a:hover { color: #ffd9a8; }
.site-header.on-photo .pill { background: rgba(9, 17, 41, .4); border-color: rgba(255, 255, 255, .55); color: #fff; }
.site-header.on-photo .pill:hover { background: #fff; color: var(--text); }

.site-footer { position: relative; margin-top: var(--s8); background: var(--night); color: #ced6e9; font-size: 14px; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 55% 30%, #ffe7b0 50%, transparent 51%), radial-gradient(1px 1px at 75% 60%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 25%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 45% 85%, #fff 50%, transparent 51%); }
.site-footer .shell { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: var(--s5); padding-top: var(--s7); padding-bottom: var(--s7); }
.site-footer b { display: block; color: #fff; margin-bottom: var(--s2); }
.site-footer a, .site-footer button { display: block; width: fit-content; padding: var(--s2) 0; border: 0; background: none; color: #ced6e9; text-decoration: none; cursor: pointer; font-size: 14px; }
.site-footer a:hover, .site-footer button:hover { color: #ffd9a8; text-decoration: underline; }
.site-footer p { margin: 0 0 var(--s2); }

/* ---------- buttons ---------- */
.btn, .primary, .secondary, .pill, .button-link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5); border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn, .primary { background: var(--sunset); color: #fff; box-shadow: var(--glow); }
.btn:hover, .primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 34px rgba(255, 80, 60, .38); }
.secondary, .pill { background: var(--bg); color: var(--text); border-color: var(--line-strong); }
.secondary:hover, .pill:hover { border-color: var(--accent); color: var(--accent-text); }
.button-link.secondary { color: var(--text); }
button:disabled, .primary:disabled, .secondary:disabled { opacity: .55; cursor: not-allowed; }
.text-link { background: none; border: 0; padding: var(--s2) 0; color: var(--accent-text); cursor: pointer; font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- forms ---------- */
input[type=text], input[type=email], input[type=search], input:not([type]), input[inputmode], select, textarea {
  width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg); font-size: 16px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: 0 0 auto; }
.field { display: grid; gap: var(--s1); font-size: 14px; color: var(--muted); }
.field > span { font-weight: 600; color: var(--text); }
.check { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; color: var(--muted); }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.full { grid-column: 1 / -1; }
.error, .account-error, .promo-error { color: var(--err); font-size: 14px; }

/* ---------- tabs / segmented ---------- */
.tabs, .catalog-tabs, .dest-tabs, .dest-chips, .help-categories { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.tabs button, .catalog-tabs button, .dest-tabs button, .dest-chips button, .help-categories button {
  min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 15px; font-weight: 500;
}
.tabs button:hover, .catalog-tabs button:hover, .dest-tabs button:hover, .dest-chips button:hover, .help-categories button:hover { border-color: var(--accent); }
.tabs button.active, .catalog-tabs button.active, .dest-tabs button.active, .dest-chips button.active, .help-categories button.active {
  background: var(--sunset); border-color: transparent; color: #fff; box-shadow: var(--glow);
}
.dest-tabs small, .dest-chips small { color: inherit; opacity: .7; margin-left: var(--s1); }

/* ---------- tables, lists, notes ---------- */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: var(--s3) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 14px; }
.note { padding: var(--s3) var(--s4); border: 1px solid var(--line); background: var(--bg-accent); border-radius: var(--r-sm); font-size: 15px; }
.note b { display: block; margin-bottom: var(--s1); }
.tag { display: inline-block; padding: 1px var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 12px; color: var(--muted); white-space: nowrap; }
.tag.accent { border-color: var(--accent); color: var(--accent-text); }
details summary { cursor: pointer; font-weight: 600; padding: var(--s3) 0; }
details summary::marker { color: var(--faint); }
.lpa { font-family: var(--mono); font-size: 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3); word-break: break-all; }
.catalog-status, .empty { padding: var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--muted); text-align: center; }

/* ---------- dialog ---------- */
dialog { border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0; width: min(720px, calc(100% - 32px)); max-height: calc(100dvh - 32px); color: var(--text); }
dialog::backdrop { background: rgba(20, 20, 18, .5); }
.modalhead { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.modalhead b { font-size: 18px; }
.modalbody { padding: var(--s5); overflow: auto; }
.close { width: 40px; height: 40px; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); border-radius: var(--r-sm); }
.close:hover { background: var(--bg-soft); color: var(--text); }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }
.steps { display: none; }
.panel { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft); }
.result { text-align: center; }
.account-access { display: grid; gap: var(--s1); max-width: 440px; margin: var(--s4) auto; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-soft); text-align: left; }
.account-access.access-before-pay { grid-template-columns: 1fr 1fr; }
.account-access small { color: var(--muted); } .account-access b { font-family: var(--mono); }
.price { font-weight: 700; }

/* ---------- toast ---------- */
.client-toast, .ops-toast { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 50; max-width: 360px; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--text); color: #fff; font-size: 15px; }

/* ---------- section scaffolding ---------- */
.section { padding-top: var(--s7); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--muted); }

.actions.center { justify-content: center; }
.panel > span { min-width: 0; }

/* ---------- home ---------- */
/* Hero: one photo — traveller, plane, passengers on the stairs, sea, mountains. Wide screens: photo behind the text, traveller on the right.
   Tablets and phones (<= 1000px): photo above the text, fading into the sunset background.
   The picture is right- and top-aligned, so the traveller's head keeps the same clearance under the header at every width; past 1983px it stops growing and its
   left edge dissolves into the veil. The bottom edge is a wave cut out with a mask, so the page background shows through without a seam (public/hero*.webp/jpg are built by tools/build-hero.mjs). */
:root { --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V20C1200 80 960 60 720 30C480 0 240 90 0 40Z'/%3E%3C/svg%3E"); }
.hero { --wave-h: 70px; position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; background: #1c284f; color: #fff; isolation: isolate;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat, var(--wave-mask) bottom / 100% var(--wave-h) no-repeat;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat, var(--wave-mask) bottom / 100% var(--wave-h) no-repeat; }
.hero-pic { position: absolute; inset: 0; z-index: -3; display: block; pointer-events: none; }
.hero-bg { position: absolute; top: 0; right: 0; width: 100%; max-width: 1983px; height: 100%; object-fit: cover; object-position: 100% 100%; }   /* bottom-right: on wide screens the synthetic sky at the top is what gets cropped, never the tarmac and the airstair */
@media (min-width: 1984px) { .hero-bg { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); } }
/* veil: dusk falls over the text column and fades out before the traveller. hero-route.js measures the column and the traveller and sets --veil-solid (where the dusk stops being
   solid: the right edge of the text column, but never past the man's hair) and --veil-clear (where it is gone); the percentages are only the fallback for the first paint.
   Plateau .70 keeps the pink end of the headline gradient at 3:1 even over the brightest part of the sunset sky (test-hero-20260930.mjs measures it). */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(15, 28, 71, .84) 0, rgba(15, 28, 71, .70) var(--veil-solid, 46%), rgba(15, 28, 71, 0) var(--veil-clear, 62%)), linear-gradient(180deg, rgba(9, 19, 51, .5) 0%, transparent 22%); }
.hero-stars, .dest-stage .hero-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(2px 2px at 8% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 22% 8%, #fff 50%, transparent 51%), radial-gradient(2.5px 2.5px at 35% 22%, #ffe9b8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 48% 12%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 14% 44%, #ffe9d6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 42% 38%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 60%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 5% 70%, #fff 50%, transparent 51%);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
/* flight route: hero-route.js sets a 1:1 viewBox and a path through the free strip under the header (never over the text or the traveller), so nothing is stretched */
.hero-route { position: absolute; left: 0; top: 0; width: 100%; height: 260px; z-index: -1; pointer-events: none; overflow: visible; }
.hero-route path { fill: none; stroke: rgba(255, 236, 210, .75); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.hero-inner { --col: 600px; padding-top: 128px; padding-bottom: 112px; }
.hero-kicker { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); }
.hero-kicker span { color: var(--gold); }
.hero h1 { max-width: 640px; font-size: 52px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(4, 11, 36, .35); }
/* the accent words: a full gold → orange → pink sunset on every line (box-decoration-break: clone), a tight shadow keeps the edges crisp on the bright sky */
.hero h1 .glow { color: #ffb36b; text-shadow: none; }
.hero .lead { max-width: 540px; font-size: 18px; color: #ecf1fe; }
.flight-search { max-width: 560px; margin: var(--s5) 0 var(--s4); padding: var(--s4); border-radius: var(--r); background: rgba(255, 255, 255, .95); color: var(--text); box-shadow: 0 20px 50px rgba(5, 14, 45, .35); }
.flight-search label { display: block; font-weight: 700; margin-bottom: var(--s2); }
.search-row { display: flex; gap: var(--s2); }
.search-row select { flex: 1 1 auto; min-width: 0; border-radius: 999px; padding-left: var(--s4); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); max-width: var(--col, 600px); margin: 0; padding: 0; list-style: none; font-size: 14px; }
.facts li { padding: 0; color: rgba(255, 255, 255, .92); }
.facts li::before { content: "✓"; margin-right: 6px; color: #ffd9a8; font-weight: 700; }

.section-head h2, .section > h2 { font-weight: 800; }
.catalog-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); grid-template-areas: "tabs search"; align-items: start; gap: var(--s2) var(--s4); }
.catalog-bar .catalog-tabs { grid-area: tabs; margin-bottom: var(--s2); }
.catalog-search { grid-area: search; width: 100%; }
.catalog-search input { border-radius: 999px; padding-left: var(--s4); }
.plans-heading-meta { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--s4); }
.plans-card > .section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s5); }
.plans-card > .section-head > h2 { margin: 0; }

/* country tiles: destination photo (or sunset gradient) with flag, name and price */
.countries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.country { position: relative; display: flex; align-items: flex-end; gap: var(--s2); min-height: 150px; padding: var(--s3) var(--s4); border-radius: var(--r); overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: var(--night); box-shadow: 0 6px 18px rgba(28, 43, 92, .12); transition: transform .2s ease, box-shadow .2s ease; }
.country:nth-child(4n+1):not(.has-photo) { background: linear-gradient(135deg, #ff9a3c, #ff724f); }
.country:nth-child(4n+2):not(.has-photo) { background: linear-gradient(135deg, #3a77e9, #ff8c6f); }
.country:nth-child(4n+3):not(.has-photo) { background: linear-gradient(135deg, #1fa2c9, #3a77e9); }
.country:nth-child(4n):not(.has-photo) { background: linear-gradient(135deg, #ff8a2b, #ff5a3c); }
.country::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 17, 41, 0) 20%, rgba(9, 17, 41, .56) 50%, rgba(9, 17, 41, .84) 75%, rgba(9, 17, 41, .88) 100%); }
.country:hover { color: #fff; transform: translateY(-4px); box-shadow: var(--lift); }
.country-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.country:hover .country-photo { transform: scale(1.06); }
.country .flag { font-size: 26px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.country-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 17px; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.country-name small { display: block; font-weight: 500; font-size: 13px; opacity: .85; }
.country-price { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--accent-text); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.countries .catalog-status { grid-column: 1 / -1; margin-top: var(--s4); }
.empty { margin-top: var(--s4); }

.how-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.how-cards li { position: relative; display: grid; align-content: start; gap: var(--s2); padding: var(--s6) var(--s5) var(--s5); border-radius: var(--r); background: var(--bg); box-shadow: var(--lift); counter-increment: step; overflow: hidden; }
.how-cards li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sunset); color: #fff; font-weight: 800; font-size: 20px; box-shadow: var(--glow); }
.how-cards li::after { content: "✦"; position: absolute; right: 18px; top: 14px; color: var(--gold); font-size: 22px; opacity: .8; }
.how-cards b { font-size: 18px; }
.how-cards span { color: var(--muted); }
.how-list { margin: 0 0 var(--s3); padding-left: var(--s5); max-width: 760px; }
.how-list li { padding: var(--s2) 0; }
.how-list li::marker { font-weight: 700; color: var(--accent-text); }
.table-wrap { overflow-x: auto; border-radius: var(--r); background: var(--bg); box-shadow: var(--lift); }
.compare { min-width: 640px; }
.compare tbody th { color: var(--text); width: 18%; }
.compare thead th { background: var(--bg-soft); color: var(--text); }
.compare thead th:nth-child(2) { background: var(--sunset); color: #fff; }
.compare td:nth-child(2) { background: #fff6ef; font-weight: 600; }
.compare tr:last-child > * { border-bottom: 0; }
.small-print { font-size: 14px; margin-top: var(--s3); }
.faq #helpSearch { max-width: 520px; margin-bottom: var(--s3); border-radius: 999px; padding-left: var(--s4); }
.faq-list { display: grid; gap: var(--s2); max-width: 860px; }
.faq-list details { padding: 0 var(--s4); border-radius: var(--r-sm); background: var(--bg); box-shadow: 0 4px 14px rgba(28, 43, 92, .07); }
.faq-list details[open] { box-shadow: var(--lift); }
/* wide screens: two columns across the container, the "show all" button spans both (22.10.2026: the list used to stop at 860 px with an empty right side) */
@media (min-width: 1000px) {
  .faq-list { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: var(--s3); }
  .faq-list > :not(details) { grid-column: 1 / -1; }
}
.faq-list details summary::marker { color: var(--accent); }
.faq-list details p { color: var(--muted); padding-bottom: var(--s3); }

@media (prefers-reduced-motion: reduce) { .hero-stars, .hero-route path { animation: none; } .country, .country-photo, .btn, .primary { transition: none; } }

/* ---------- country page ---------- */
/* Stage: destination photo as a slightly darkened background behind the heading and the plan list. */
.dest-stage { position: relative; isolation: isolate; padding-bottom: var(--s7); background: var(--night); color: #fff; overflow: hidden; }
.stage-photo { position: absolute; inset: 0; margin: 0; z-index: -3; }
.stage-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dest-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(8, 16, 43, .72) 0%, rgba(8, 16, 43, .66) 35%, rgba(10, 19, 48, .82) 100%); }   /* 14.10.2026: .66 / .82 so the «Региональные» and «Весь мир» links reach 4.5 : 1 over the lighter photos */
.stage-photo figcaption { position: absolute; right: var(--s4); bottom: var(--s2); z-index: 1; font-size: 12px; }
.stage-photo figcaption a { color: rgba(255, 255, 255, .75); text-decoration: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.stage-photo figcaption a:hover { color: #fff; text-decoration: underline; }
.dest-head { padding-top: 110px; padding-bottom: var(--s5); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: 14px; color: rgba(255, 255, 255, .8); margin-bottom: var(--s4); }
.crumbs a { color: rgba(255, 255, 255, .85); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.dest-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); font-size: 46px; font-weight: 800; text-shadow: 0 2px 20px rgba(3, 9, 27, .5); }
.dest-flag { font-size: 44px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.dest-flag:empty { display: none; }
.dest-title-suffix { font-weight: 500; color: #ffd9b0; margin-left: calc(-1 * var(--s3)); }
.dest-head .lead { color: #ecf1fe; max-width: 720px; font-size: 18px; text-shadow: 0 1px 10px rgba(3, 9, 27, .5); }
.dest-facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 14px; }
.dest-facts span { padding: 0; color: rgba(255, 255, 255, .92); }
.dest-facts span:empty { display: none; }
.dest-facts #destKind { font-weight: 700; background: var(--sunset); border-color: transparent; }

.plans-card { position: relative; width: calc(100% - 2 * var(--s4)); max-width: 1088px; padding: var(--s5) var(--s5) var(--s4); border-radius: var(--r-lg); background: rgba(255, 255, 255, .97); color: var(--text); box-shadow: 0 30px 80px rgba(4, 11, 36, .4); }
.plans-card .section-head h2 { font-size: 28px; }
.plan-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--s4); }
.plan-sort { display: flex; align-items: center; gap: var(--s2); margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; }
.plan-sort select { width: auto; min-height: 40px; border-radius: 999px; }
.plan-head, .dest-card { display: grid; grid-template-columns: 1fr 110px; align-items: center; }
.dest-card-pick { display: grid; grid-template-columns: 28px minmax(0, 2fr) 1fr 1fr 110px; align-items: center; gap: var(--s3); min-height: 60px; padding: var(--s2) var(--s4); cursor: pointer; }
/* the header mirrors the rows exactly: same padding (plus the 1px card border) and the same five columns, the 110px "Подробнее" column is padding here */
.plan-head { grid-template-columns: 28px minmax(0, 2fr) 1fr 1fr 110px; gap: var(--s3); padding: 0 calc(110px + var(--s4) + 1px) var(--s2) calc(var(--s4) + 1px); font-size: 13px; color: var(--muted); }
.plan-head span:nth-child(6) { display: none; }
.plan-head span:nth-child(5) { text-align: right; }
.dest-unit-label { display: none; }
.plan-list { display: grid; gap: var(--s2); }
.dest-card { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); transition: border-color .15s ease, box-shadow .15s ease; }
.dest-card:hover { border-color: #ffb68a; box-shadow: 0 6px 20px rgba(255, 106, 43, .12); }
.dest-card.selected { border-color: var(--accent); background: #fff7f0; box-shadow: 0 0 0 2px rgba(240, 96, 15, .25); }
.dest-card.selected .dest-gb { color: var(--accent-text); }
/* pinned: "Хит!" and "Самый выгодный" */
.dest-card.pinned { margin-top: var(--s3); border-width: 2px; }
.dest-card.hit { border-color: #ffb13b; background: linear-gradient(90deg, #fff4dc, #fff 60%); box-shadow: 0 8px 26px rgba(255, 170, 40, .28); }
.dest-card.best { border-color: #8aaff5; background: linear-gradient(90deg, #eaf0fe, #fff 60%); box-shadow: 0 8px 26px rgba(58, 119, 233, .2); }
.dest-card.hit.best { background: linear-gradient(90deg, #fff4dc, #eaf0fe 50%, #fff 90%); }
.dest-card.pinned.selected { box-shadow: 0 0 0 3px rgba(240, 96, 15, .3), 0 8px 26px rgba(255, 140, 40, .25); }
.dest-ribbon { position: absolute; top: -13px; left: var(--s4); display: flex; gap: var(--s1); }
.dest-ribbon span { padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.dest-hit { background: linear-gradient(90deg, #ff9a1f, #ff4f4f); }
.dest-badge { background: linear-gradient(90deg, #3a77e9, #ff724f); }
.dest-vol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-width: 0; }
.dest-gb { font-size: 20px; font-weight: 800; white-space: nowrap; }
.dest-extra { flex-basis: 100%; font-size: 14px; color: var(--muted); }
.dest-days { color: var(--text); }
.dest-unit { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.dest-price { text-align: right; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.dest-info { justify-self: end; margin-right: var(--s2); min-height: 40px; padding: 0 var(--s2); border: 0; background: none; color: var(--accent-text); cursor: pointer; font-size: 14px; font-weight: 600; }
.dest-info:hover { text-decoration: underline; }
.plan-list .catalog-status { margin-top: var(--s4); }
.plan-more { margin-top: var(--s3); }
.plan-more:empty { display: none; }
.buybar { position: sticky; bottom: var(--s3); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-radius: 999px; background: var(--night); color: #fff; box-shadow: 0 16px 40px rgba(5, 14, 45, .35); }
.buybar #buySummary { display: grid; min-width: 0; }
.buybar small { color: #ced6e9; }

.dest-specs .specs-grid, .roaming-list { padding: var(--s5); border-radius: var(--r); background: var(--bg); box-shadow: var(--lift); }
.dest-specs h2, #how h2 { font-weight: 800; }
.specs-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s6); align-items: start; }
.spec-list { margin: 0; border-top: 1px solid var(--line); }
.spec-list > div { display: grid; grid-template-columns: 200px 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; }
.spec-networks { font-size: 15px; color: var(--muted); }
.spec-networks h3 { color: var(--text); }
.spec-networks p { margin-bottom: var(--s1); }
.spec-networks b { color: var(--text); }
.spec-networks small { display: block; margin-top: var(--s2); }
.coverage-list p { color: var(--muted); font-size: 14px; }
#planInfo .spec-list > div { grid-template-columns: 150px 1fr; }
#planInfo .spec-networks { margin-top: var(--s4); }
.roaming-list { display: grid; grid-template-columns: 200px 1fr; gap: var(--s2) var(--s4); margin: 0; max-width: 860px; }
.roaming-list dt { font-weight: 600; }
.roaming-list dd { margin: 0; color: var(--muted); }

/* ---------- account ---------- */
.account-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s6); padding-top: var(--s6); align-items: start; }
.account-shell:has(.account-side[hidden]) { grid-template-columns: minmax(0, 1fr); }
.account-side { position: sticky; top: var(--s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); min-width: 0; }
.account-person { display: grid; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); min-width: 0; }
.account-person b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-person small { color: var(--muted); }
.account-side nav { display: grid; gap: var(--s1); }
.account-side nav button { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer; font-size: 15px; }
.account-side nav button:hover { background: var(--bg-soft); }
.account-side nav button.active { background: var(--bg-soft); font-weight: 600; }
#clientTicketBadge:not(:empty) { min-width: 22px; padding: 0 6px; border-radius: var(--r-sm); background: var(--accent); color: #fff; font-size: 12px; text-align: center; }
.account-side .text-link { justify-self: start; padding-left: var(--s3); color: var(--muted); font-weight: 400; }
.account-content { min-width: 0; }
.account-entry { max-width: 640px; }
.account-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.account-heading h1 { margin: 0; font-size: 28px; }
.account-view > h2 { margin-top: var(--s6); font-size: 22px; }
.account-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 var(--s5); border: 1px solid var(--line); border-radius: var(--r); }
.account-metrics > div { padding: var(--s3) var(--s4); }
.account-metrics > div + div { border-left: 1px solid var(--line); }
.account-metrics dt { font-size: 14px; color: var(--muted); }
.account-metrics dd { margin: 0; }
.account-metrics dd b { font-size: 22px; }
.account-metrics dd small { color: var(--muted); }
.client-panel, .lookup-card, .client-order-card, .client-ticket { padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.client-panel + .client-panel, .account-dashboard-grid, .client-panel + .account-dashboard-grid, .account-dashboard-grid + .client-panel { margin-top: var(--s4); }
.client-panel h2, .lookup-card h2 { font-size: 18px; }
.client-panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.client-panel-head h2 { margin: 0; }
.account-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.account-dashboard-grid .client-panel { margin: 0; }
.account-dashboard-grid > :only-child { grid-column: 1 / -1; }
.lookup-grid { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-end; }
.lookup-grid .field { flex: 1 1 180px; }
.lookup-card { margin-top: var(--s5); }
.access-help { margin: var(--s3) 0 0; font-size: 14px; }

.tg-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); padding: var(--s3) var(--s4); border: 1px solid #2a9fd6; border-radius: var(--r-sm); }
.tg-banner p { margin: 0; color: var(--muted); font-size: 15px; }
.tg-banner small { color: var(--muted); }
.tg-open { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.tg-open:hover { border-color: var(--text); color: var(--text); }

.compact-connection { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.compact-connection .flag { font-size: 22px; width: 28px; text-align: center; flex: 0 0 auto; }
.compact-connection > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.compact-connection span, .compact-connection small { color: var(--muted); font-size: 14px; }
.client-usage { height: 6px; margin: var(--s1) 0; border-radius: 3px; background: var(--line); overflow: hidden; max-width: 360px; }
.client-usage i { display: block; height: 100%; width: 0; background: var(--accent); }
.client-usage.large { height: 8px; max-width: none; margin: var(--s2) 0 var(--s4); }

.client-orders { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.client-order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.client-order-top span:first-child { color: var(--muted); font-size: 15px; }
.client-order-top h2 { font-size: 22px; margin: var(--s1) 0; }
.client-order-top small { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.client-order-status { flex: 0 0 auto; padding: 2px var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; }
.traffic-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); margin-top: var(--s4); }
.traffic-hero > div:first-child { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.traffic-hero > div:first-child span, .traffic-hero small, .traffic-percent span { color: var(--muted); font-size: 14px; }
.traffic-hero b { font-size: 28px; font-variant-numeric: tabular-nums; }
.traffic-percent b { font-size: 18px; }
.connection-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; }
.connection-details > div { display: grid; min-width: 0; }
.connection-details small { color: var(--muted); font-size: 13px; }
.connection-details span { color: var(--muted); font-size: 13px; font-family: var(--mono); overflow-wrap: anywhere; }
.client-order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.topup-card .topup-note { margin: var(--s3) 0 0; color: var(--muted); }

.esim-install-body .secondary, .esim-install-body .primary { white-space: normal; text-align: center; }
.esim-install { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.esim-install-qr img { width: 220px; height: 220px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.esim-install-body h3 { margin-bottom: var(--s1); }
.esim-install-body p, .esim-install-body small { color: var(--muted); font-size: 15px; }
.esim-install-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 var(--s1); }
.install-details { border-top: 1px solid var(--line); margin-top: var(--s3); }
.install-details dl { margin: 0 0 var(--s3); display: grid; gap: var(--s1); }
.install-details dt { font-size: 14px; color: var(--muted); }
.install-details dd { margin: 0 0 var(--s2); }
.roaming-details dt { color: var(--text); font-weight: 600; }
.roaming-details dd { color: var(--muted); font-size: 15px; }
.esim-send { margin-top: var(--s3); }
.esim-send-status, .topup-status { margin: var(--s2) 0 0; font-size: 14px; color: var(--muted); }
.esim-send-status:empty, .topup-status:empty { display: none; }
.esim-send-status.good, .topup-status.good { color: var(--ok); }
.esim-send-status.bad, .topup-status.bad { color: var(--err); }
.esim-install-note { margin: var(--s3) 0 0; font-size: 14px; }
.topup-block { display: grid; gap: var(--s2); padding: var(--s4) 0; border-bottom: 1px solid var(--line); justify-items: start; }
.topup-block h3 { margin: 0; }
.topup-block p { margin: 0; color: var(--muted); font-size: 15px; }
.topup-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); width: 100%; }
.topup-options[hidden] { display: none; }
.topup-option { display: grid; gap: 2px; padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); text-align: left; cursor: pointer; }
.topup-option:hover { border-color: var(--text); }
.topup-option.selected { border-color: var(--accent); background: var(--bg-accent); }
.topup-option span { color: var(--muted); font-size: 14px; }
.activation-choice { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft); }
.activation-choice p { color: var(--muted); font-size: 15px; }
.activation-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.activation-options button { display: grid; gap: 2px; padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); text-align: left; cursor: pointer; }
.activation-options button.selected { border-color: var(--accent); background: var(--bg-accent); }
.activation-options small { color: var(--muted); }

.client-tickets { display: grid; gap: var(--s3); }
.client-ticket-head { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.client-ticket-head span:first-child { color: var(--muted); font-size: 14px; }
.client-ticket-head h2 { font-size: 18px; margin: 2px 0; }
.client-ticket-head small { color: var(--muted); font-size: 13px; }
.ticket-status { flex: 0 0 auto; align-self: flex-start; padding: 2px var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; }
.ticket-status.pending_client { border-color: var(--accent); color: var(--accent-text); }
.ticket-status.resolved { color: var(--ok); border-color: var(--ok); }
.client-message { padding: var(--s3); border-radius: var(--r-sm); background: var(--bg-soft); margin-top: var(--s2); }
.client-message.answer { background: var(--bg-accent); }
.client-message p { margin: 0 0 var(--s1); white-space: pre-wrap; }
.client-message small, .waiting-answer { color: var(--muted); font-size: 14px; }
.client-empty { padding: var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--muted); }
.client-empty h2 { font-size: 18px; color: var(--text); }
.ticket-form { margin-bottom: var(--s4); }
.ticket-form .actions { justify-content: space-between; align-items: center; }
.ticket-form .actions p { margin: 0; }
.promo-code { font-family: var(--mono); font-size: 28px; margin: var(--s1) 0 var(--s2); }
.referral-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.referral-stats .account-metrics { margin-top: var(--s4); }

/* ---------- login ---------- */
.login { max-width: 480px; padding-top: var(--s7); }
.login h1 { font-size: 28px; }
.login form { display: grid; gap: var(--s4); margin-top: var(--s5); }
.login .primary { width: 100%; }
#loginCode { font-family: var(--mono); font-size: 24px; letter-spacing: .3em; text-align: center; }
.login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); }
.login-links .text-link { font-weight: 400; min-height: 44px; }
#loginStatus { min-height: 24px; margin-top: var(--s3); font-size: 15px; color: var(--muted); }
.login-other { display: grid; gap: var(--s4); }
.login-other section { display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.login-other small { font-size: 13px; }
.login-or { display: flex; align-items: center; gap: var(--s3); width: 100%; margin: 0 0 var(--s2); color: var(--muted); font-size: 14px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.telegram-login { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-width: 225px; min-height: 44px; padding: 0 var(--s4); border: 0; border-radius: var(--r-sm); background: #1a7db3; color: #fff; font-weight: 600; cursor: pointer; }
.telegram-login:hover { background: #166b99; }
.telegram-login:disabled { opacity: .6; }

@media (max-width: 1000px) { .countries { grid-template-columns: repeat(3, minmax(0, 1fr)); } .how-cards { grid-template-columns: 1fr; } .esim-install { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

@media (max-width: 760px) {
  h1 { font-size: 28px; } h2 { font-size: 22px; }
  .search-row { flex-direction: column; }
  .countries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .country { min-height: 118px; padding: var(--s2) var(--s3); flex-wrap: wrap; align-content: flex-end; }
  .country-name { flex-basis: calc(100% - 36px); font-size: 15px; }
  .country-price { font-size: 13px; }
  .catalog-bar { grid-template-columns: 1fr; grid-template-areas: "tabs" "search"; gap: var(--s2); }
  .catalog-search { width: 100%; }
  .plans-card .section-head { align-items: flex-start; }
  .plans-card > .section-head { grid-template-columns: 1fr; gap: var(--s3); }
  .plans-heading-meta { display: grid; justify-items: end; gap: var(--s2); }
  .catalog-bar .catalog-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .catalog-tabs button { white-space: nowrap; }
  .dest-flag { font-size: 26px; }
  .dest-title-suffix { display: none; }
  .dest-head { padding-top: 120px; }
  .dest-head h1 { font-size: 30px; }
  .dest-flag { font-size: 30px; }
  .dest-head .lead { font-size: 16px; }
  .plans-card { width: calc(100% - 2 * var(--s2)); padding: var(--s4) var(--s3) var(--s3); border-radius: var(--r); }
  .plan-sort { margin-left: 0; margin-bottom: var(--s3); }
  .plan-head { display: none; }
  .dest-card { grid-template-columns: 1fr auto; }
  .dest-card-pick { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "radio vol price" "radio days unit"; gap: 0 var(--s3); padding: var(--s3) var(--s2); }
  .dest-card-pick input { grid-area: radio; }
  .dest-vol { grid-area: vol; }
  .dest-days { grid-area: days; font-size: 14px; color: var(--muted); }
  .dest-unit { grid-area: unit; text-align: right; font-size: 13px; }
  .dest-price { grid-area: price; }
  .dest-info { margin-right: 0; }
  .dest-unit-label { display: inline; }
  /* multi-country packages: "100 стран" goes on its own line, so the volume column keeps its width ("102 МБ" used to break into two lines) */
  .dest-cover { display: block; }
  .dest-dot { display: none; }
  .buybar { bottom: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s4); }
  .buybar #buySummary small { display: none; }
  .specs-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .spec-list > div, #planInfo .spec-list > div { grid-template-columns: 120px 1fr; }
  .roaming-list { grid-template-columns: 1fr; gap: var(--s1); }
  .roaming-list dd { margin-bottom: var(--s3); }
  .account-shell { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s4); }
  .account-side { position: static; gap: var(--s2); }
  .account-person { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s2); padding-bottom: var(--s2); }
  .account-side nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: var(--s1); border-bottom: 1px solid var(--line); }
  .account-side nav::-webkit-scrollbar { display: none; }
  .account-side nav button { flex: 0 0 auto; white-space: nowrap; gap: var(--s2); border-radius: 0; border-bottom: 2px solid transparent; }
  .account-side nav button.active { background: none; border-bottom-color: var(--accent); }
  .account-side .text-link { justify-self: end; padding: 0; min-height: 32px; font-size: 14px; }
  .account-heading { flex-wrap: wrap; margin-bottom: var(--s4); }
  .account-heading h1 { font-size: 22px; }
  .account-metrics { grid-template-columns: 1fr; }
  .account-metrics > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .account-metrics > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s2) var(--s3); }
  .account-metrics dd b { font-size: 18px; }
  .account-dashboard-grid { grid-template-columns: 1fr; }
  .client-panel, .lookup-card, .client-order-card, .client-ticket { padding: var(--s3) var(--s4); }
  .tg-banner { flex-direction: column; align-items: flex-start; }
  .connection-details { grid-template-columns: 1fr 1fr; }
  .esim-install { grid-template-columns: 1fr; justify-items: start; }
  .esim-install-qr img { width: 200px; height: 200px; }
  .esim-install-buttons > * { flex: 1 1 100%; }
  .activation-options { grid-template-columns: 1fr; }
  .traffic-hero b { font-size: 24px; }
  .site-header .shell { gap: var(--s3); flex-wrap: wrap; min-height: 56px; }
  .site-nav { order: 3; width: 100%; margin: 0; gap: var(--s4); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s2); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; min-height: 40px; font-size: 15px; }
  .site-header .pill, .site-header .btn { margin-left: auto; }
  .site-footer .shell { grid-template-columns: 1fr 1fr; }
  .formgrid { grid-template-columns: 1fr; }
  .section { padding-top: var(--s6); }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .modalbody { padding: var(--s4); }
}
@media (max-width: 420px) { .btn, .primary, .secondary, .pill, .button-link { white-space: normal; text-align: center; } .site-footer .shell { grid-template-columns: 1fr; } }

/* ---------- checkout form (dialog #buy on the country page) ---------- */
.checkout { display: grid; gap: var(--s4); }
.checkout-summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--sunset-soft); }
.checkout-price { font-size: 22px; font-weight: 800; color: var(--accent-text); white-space: nowrap; }
.checkout input[readonly] { background: var(--bg-soft); color: var(--muted); }
.checkout .field small { color: var(--muted); }
.checkout .actions { margin-top: 0; }
.checkout .error:empty { display: none; }
.auth-methods { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: calc(-1 * var(--s2)); font-size: 14px; }
.auth-methods-title { color: var(--muted); }
.auth-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--bg); }
.auth-chip.on { border-color: #b5d8c1; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.auth-chip small { font-weight: 400; color: var(--muted); }
.auth-chip a { color: var(--accent-text); font-weight: 600; }
@media (max-width: 420px) { .checkout-summary { flex-direction: column; align-items: flex-start; } .checkout .actions > * { flex: 1 1 100%; } }

/* social sign-in buttons in the brands' own style: Telegram blue with the white paper plane ("Войти через Telegram"),
   black "Войти с Яндекс ID" with the red Ya mark. The blue is a shade darker than the widget's #54a9eb so white text keeps 4.5:1. */
.social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 264px; min-height: 48px; padding: 0 22px; border-radius: 12px; font: 600 16px/1.2 var(--font); letter-spacing: 0; cursor: pointer;
  box-shadow: 0 1px 2px rgba(21, 31, 64, .08), 0 4px 12px rgba(21, 31, 64, .08); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.social-btn svg { flex: 0 0 auto; display: block; }
.social-btn.telegram { background: #1a7db3; color: #fff; border: 1px solid #1a7db3; }
.social-btn.telegram:hover { background: #166b99; border-color: #166b99; color: #fff; }
.social-btn.yandex { background: #000; color: #fff; border: 1px solid #000; }
.social-btn.yandex:hover { background: #1f1f1f; border-color: #1f1f1f; color: #fff; }
:root[data-theme="dark"] .social-btn.yandex { border-color: rgba(255, 255, 255, .22); }
.social-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(21, 31, 64, .08), 0 8px 20px rgba(21, 31, 64, .12); }
.social-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.social-btn.telegram:active { box-shadow: 0 0 0 4px rgba(42, 171, 238, .3), 0 2px 6px rgba(21, 31, 64, .1); }
.social-btn.yandex:active { box-shadow: 0 0 0 4px rgba(252, 63, 29, .25), 0 2px 6px rgba(21, 31, 64, .1); }
.social-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* all buttons: natural raised look, soft highlight while pressed */
.secondary, .pill { box-shadow: 0 1px 2px rgba(21, 31, 64, .06), 0 3px 10px rgba(21, 31, 64, .06); }
.btn:active, .primary:active, .secondary:active, .pill:active, .social-btn:active, .tabs button:active, .catalog-tabs button:active, .dest-tabs button:active, .dest-chips button:active, .help-categories button:active {
  transform: translateY(0) scale(.99); filter: brightness(1.06); }
.btn:active, .primary:active { box-shadow: 0 0 0 4px rgba(255, 106, 43, .25), 0 8px 20px rgba(255, 80, 60, .3); }
.secondary:active, .pill:active, .tabs button:active, .catalog-tabs button:active, .dest-tabs button:active, .dest-chips button:active, .help-categories button:active { box-shadow: 0 0 0 4px rgba(255, 106, 43, .18); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .social-btn { transition: none; } }

/* country warning (Russia: local internet restrictions) — a bold, solid plate readable on the dark photo and in dialogs */
.dest-warning { display: flex; gap: var(--s3); align-items: flex-start; max-width: 860px; margin: var(--s3) 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: #ffe7a8; border: 2px solid #ffb800; color: #3d2a00; font-size: 16px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.dest-warning span { flex: 0 0 auto; font-size: 22px; line-height: 1.1; }
.dest-warning b { font-weight: 800; }
.checkout .dest-warning { margin: 0; box-shadow: none; font-size: 14px; }
/* "data comes with a short delay" notes (traffic, sessions) */
.data-delay { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: #edf2fe; color: #2a5fc9; font-size: 13px; font-weight: 600; line-height: 1.4; }
/* email binding for accounts created from Telegram */
.email-bind { margin-bottom: var(--s4); border: 2px solid #ffb68a !important; background: var(--sunset-soft) !important; }
.email-bind h2 { font-size: 20px; font-weight: 800; }
/* the binding card pushes the view title below the night band → dark title there */
.account-page #emailBind:not([hidden]) ~ .account-view .account-heading h1 { color: var(--text); text-shadow: none; }
.email-bind-form { display: grid; gap: var(--s3); max-width: 520px; }
.email-bind-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.email-bind .error:empty, .email-bind .error:empty { display: none; }
.checkout-bind-note { margin: 0; font-size: 14px; color: var(--muted); }
.checkout-bind-note b { color: var(--text); }

/* checkout: sign-in inside the order dialog */
.checkout-auth { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-sm); background: var(--bg-soft); }
.checkout-auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-top: calc(-1 * var(--s2)); }
.checkout-auth-links .text-link { font-weight: 500; font-size: 14px; }
.checkout-social { display: grid; gap: var(--s2); }
.checkout-social .login-or { margin: 0; }
.checkout-social-buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s3); }
.checkout-next { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: #edf2fe; color: var(--violet); font-size: 14px; font-weight: 600; }
.checkout-next span { flex: 0 0 auto; }
input[type=password] { width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); font-size: 16px; }
/* account: loading / problem states */
.account-page .account-loading h1 { color: #fff; }
.account-page .account-loading p { color: #dee7fd; }
.account-problem { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: #fff; color: var(--err); font-weight: 600; box-shadow: var(--lift); }

/* ---------- account: "sunset flight" theme (night band with stars, cards overlapping it; no scroll veil) ---------- */
.account-page .account-band { position: absolute; top: 0; left: 0; right: 0; height: 250px; z-index: 0; background: var(--night); overflow: hidden; isolation: isolate; }
.account-page .account-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--sunset); }
.account-page .account-band .hero-stars { z-index: 0; }
.account-page main { position: relative; z-index: 1; }
.account-page .account-shell { padding-top: 104px; }
.account-page .account-heading h1, .account-page .account-entry > h1 { color: #fff; text-shadow: 0 2px 14px rgba(3, 9, 27, .4); }
.account-page .account-heading h1::after { content: " ✦"; color: var(--gold); font-size: .7em; }
.account-page .account-heading { min-height: 56px; }
.account-page .account-entry > p { color: #dee7fd; }
.account-page .account-entry > p a { color: #ffd9a8; }
.account-page .account-view > p.muted:first-of-type { color: #dee7fd; }

.account-page .account-side { padding: var(--s4); border-radius: var(--r); background: var(--bg); box-shadow: var(--lift); }
.account-page .account-person { position: relative; padding-left: 44px; min-height: 36px; border-bottom-color: var(--line); }
.account-page .account-person::before { content: attr(data-initials); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sunset); color: #fff; font-size: 15px; box-shadow: var(--glow); }
.account-page .account-side nav button { border-radius: 999px; font-weight: 500; }
.account-page .account-side nav button:hover { background: var(--bg-soft); }
.account-page .account-side nav button.active { background: var(--sunset); color: #fff; font-weight: 700; box-shadow: var(--glow); }
.account-page #clientTicketBadge:not(:empty) { border-radius: 999px; background: #fff; color: var(--accent-text); }
.account-page .account-side nav button:not(.active) #clientTicketBadge:not(:empty) { background: var(--sunset); color: #fff; }

.account-page .account-metrics { gap: var(--s3); border: 0; }
.account-page .account-metrics > div { position: relative; overflow: hidden; border: 0 !important; border-radius: var(--r); background: var(--bg); box-shadow: var(--lift); }
.account-page .account-metrics > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sunset); }
.account-page .account-metrics dd b { color: var(--accent-text); font-weight: 800; }
.account-page .client-panel, .account-page .lookup-card, .account-page .client-order-card, .account-page .client-ticket { border: 0; border-radius: var(--r); box-shadow: var(--lift); }
.account-page .client-order-card { padding-top: var(--s5); }
.account-page .client-order-top h2 { font-weight: 800; }
.account-page .client-order-status { border-radius: 999px; padding: 3px 12px; background: var(--ok-bg); border-color: #b5d8c1; color: var(--ok); font-weight: 600; }
.account-page .traffic-hero b { color: var(--accent-text); font-weight: 800; }
.account-page .client-usage { height: 8px; border-radius: 999px; background: #e6eaf2; }
.account-page .client-usage i { background: var(--sunset); border-radius: 999px; }
.account-page .client-usage.large { height: 12px; }
.account-page .connection-details { border-color: var(--line); }
.account-page .compact-connection { border-top-color: var(--line); }

.account-page .tg-banner { border: 0; border-radius: var(--r); padding: var(--s4) var(--s5); background: linear-gradient(120deg, #1d6fb8 0%, #2a9fd6 55%, #578bec 100%); color: #fff; box-shadow: 0 10px 28px rgba(42, 159, 214, .3); }
.account-page .tg-banner p, .account-page .tg-banner small { color: #e3f3ff; }
.account-page .tg-open { border: 0; border-radius: 999px; background: #fff; color: #1d6fb8; }
.account-page .tg-open:hover { color: #0f4f86; }

.account-page .esim-install-qr { align-self: start; height: fit-content; width: fit-content; padding: 7px; border-radius: 20px; background: var(--sunset); box-shadow: var(--glow); }
.account-page .esim-install-qr img { border: 0; border-radius: 14px; }
.account-page .install-details { border-top-color: var(--line); }
.account-page .roaming-details { margin-top: var(--s3); padding: 0 var(--s4); border: 1px solid #d6e0f9; border-radius: var(--r-sm); background: #edf2fe; }
.account-page .roaming-details summary { color: var(--violet); }
.account-page .topup-block, .account-page .esim-install { border-bottom-color: var(--line); }
.account-page .topup-option, .account-page .activation-options button { border-radius: 14px; transition: transform .15s ease, box-shadow .15s ease; }
.account-page .topup-option:hover, .account-page .activation-options button:hover { transform: translateY(-2px); box-shadow: var(--lift); border-color: #ffb68a; }
.account-page .topup-option strong { color: var(--accent-text); font-size: 18px; }
.account-page .topup-option.selected, .account-page .activation-options button.selected { border-color: var(--accent); background: var(--sunset-soft); }
.account-page .activation-choice { border: 0; border-radius: var(--r); background: var(--sunset-soft); }

.account-page .ticket-status { border-radius: 999px; padding: 3px 12px; }
.account-page .client-message { border-radius: 14px; }
.account-page .client-message.answer { background: #edf2fe; }
.account-page .client-empty { border-radius: var(--r); background: var(--bg); }
.account-page .referral-hero { background: var(--sunset-soft); }
.account-page .promo-code { font-weight: 800; color: var(--accent); }
.account-page .how-list li::marker { color: var(--accent); }

@media (max-width: 760px) {
  .account-page .account-band { height: 210px; }
  .account-page .account-shell { padding-top: 112px; }
  .account-page .account-side { padding: var(--s3); }
  .account-page .account-side nav { border-bottom: 0; gap: var(--s1); padding-bottom: 2px; }
  .account-page .account-side nav button { border-bottom: 0; }
  .account-page .account-side nav button.active { background: var(--sunset); }
  .account-page .account-heading h1 { color: var(--text); text-shadow: none; }
  .account-page .account-entry > h1 { color: #fff; }
  .account-page .account-metrics > div { padding: var(--s3) var(--s4); }
  .account-page .tg-banner { padding: var(--s4); }
}

/* ---------- scroll veil: natural progressive blur at the top while scrolling (scroll-veil.js) ---------- */
.scroll-veil { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(to bottom, rgba(255, 250, 245, .55), rgba(255, 250, 245, 0)); }
.scroll-veil i { position: absolute; inset: 0; }
.scroll-veil i:nth-child(1) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); }
.scroll-veil i:nth-child(2) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 70%); }
.scroll-veil i:nth-child(3) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 45%); mask-image: linear-gradient(to bottom, #000 0%, transparent 45%); }
.is-scrolled .scroll-veil { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scroll-veil { transition: none; } }
@media (max-width: 760px) { .scroll-veil { height: 48px; } }

/* ---------- consent note (implicit consent instead of checkboxes) ---------- */
.consent-note { margin: var(--s3) 0 0; font-size: 13px; line-height: 1.45; color: var(--muted, #4d5c8f); }
.catalog-tabs button small, .dest-tabs button small, .dest-chips button small { margin-left: 4px; opacity: .7; font-weight: 500; }

/* ---------- lighter scroll veil: a single blur layer (three stacked backdrop-filters made scrolling janky on weaker PCs) ---------- */
.scroll-veil { height: 44px; }
.scroll-veil i:nth-child(1), .scroll-veil i:nth-child(3) { display: none; }
.scroll-veil i:nth-child(2) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
@media (max-width: 760px) { .scroll-veil { height: 36px; } }
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) { .scroll-veil i { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }

/* ---------- cabinet: initials avatar, low-traffic plate, cancel, promo chip, public support ---------- */
.account-page .account-person::before { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
#accountMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { #accountMetrics { grid-template-columns: 1fr; } }
.low-alert { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r); background: #fff4d6; border: 1px solid #f0c674; color: #5a3b00; }
.low-alert > span { font-size: 22px; }
.low-alert > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.low-alert small { color: #7a5a1e; }
.cancel-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin: var(--s2) 0 0; }
.cancel-row small { color: var(--muted); }
.text-link.danger { color: var(--err); }
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.client-empty { padding: var(--s5); border-radius: var(--r); background: var(--bg); box-shadow: var(--lift); text-align: center; }
.promo-code:not(.has-code) { font-family: inherit; font-size: 20px; font-weight: 600; color: var(--muted); -webkit-text-fill-color: currentColor; background: none; }
.account-page .promo-code:not(.has-code) { background: none; color: var(--muted); -webkit-text-fill-color: currentColor; }
.promo-code.has-code { display: inline-flex; align-items: center; gap: var(--s3); padding: 6px 16px; border: 2px dashed var(--accent); border-radius: 14px; cursor: pointer; user-select: all; }
.promo-code.has-code::after { content: "Скопировать"; font-family: var(--font, inherit); font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--accent-text, var(--accent)); -webkit-text-fill-color: currentColor; }
.promo-code.has-code:hover { background: rgba(255, 122, 44, .08); }
.support-public-form { display: grid; gap: var(--s3); max-width: 560px; }
.support-public-form textarea { width: 100%; }
.pill-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--sunset); color: #fff; font-size: 11px; font-weight: 800; }
.pill.signed-in { display: inline-flex; align-items: center; }
.low-alert { margin-bottom: var(--s4); }
.referral-hero small { display: block; margin-bottom: var(--s2); }

/* ---------- one window: conditions + order; whole plan row is clickable; promo entered in the cabinet ---------- */
.dest-card { cursor: pointer; }
.dest-card-pick { cursor: pointer; }
.dest-radio { width: 18px; height: 18px; border: 2px solid #bdc4db; border-radius: 50%; background: #fff; }
.dest-card:hover .dest-radio, .dest-card.selected .dest-radio { border-color: var(--accent); }
.dest-card.selected .dest-radio { background: radial-gradient(circle, var(--accent) 0 45%, #fff 50%); }
.dest-card:focus-within .dest-card-pick { outline: none; }
.dest-card-pick:focus-visible { outline: 3px solid rgba(240, 96, 15, .45); outline-offset: -3px; border-radius: var(--r-sm); }
.dest-info { pointer-events: auto; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-weight: 700; cursor: pointer; text-align: right; }
.checkout-details { margin-bottom: var(--s4); }
.checkout-details .spec-list { margin-top: 0; }
.checkout-step { margin: var(--s4) 0 var(--s3); font-size: 18px; }
.promo-block { margin: var(--s3) 0; }
.promo-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.promo-row .field { flex: 1 1 200px; margin: 0; }
.promo-applied { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: #eaf8ee; color: #1d6b38; }
.promo-msg { min-height: 1em; margin: var(--s1) 0 0; color: var(--err); font-size: 14px; }
.checkout-details .spec-networks { margin-top: var(--s4); }

/* ---------- order window fits the screen ---------- */
#buy[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
#buy .modalhead { flex: 0 0 auto; padding: var(--s3) var(--s5); }
#buy .modalbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s4) var(--s5); overscroll-behavior: contain; }
#buy .checkout { gap: var(--s3); }
.checkout-details { margin-bottom: var(--s2); }
.checkout-details .spec-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
.checkout-details .spec-list > div { grid-template-columns: 110px 1fr; padding: 6px 0; font-size: 14px; }
.checkout-details .spec-networks:empty, .spec-networks:empty { display: none; }
.checkout-details .spec-networks { margin-top: var(--s2); font-size: 13px; }
.checkout-step { margin: var(--s3) 0 var(--s2); font-size: 16px; }
#buy .checkout-auth { padding: var(--s3); gap: var(--s2); }
#buy .checkout-next { padding: var(--s2) var(--s3); font-size: 13px; }
@media (max-width: 640px) { .checkout-details .spec-list { grid-template-columns: 1fr; } #buy .modalbody { padding: var(--s3) var(--s4); } }
.dest-card.hit:not(.pinned), .dest-card.best:not(.pinned) { margin-top: var(--s3); border-width: 2px; }

/* ---------- destination facts row: badge and texts on one centred line ---------- */
.dest-facts { align-items: center; gap: var(--s2) var(--s4); }
.dest-facts span { display: inline-flex; align-items: center; min-height: 28px; line-height: 1.2; font-size: 14px; }
.dest-facts #destKind { padding: 0 14px; border-radius: 999px; font-weight: 700; }
.dest-share { min-height: 44px; padding: 0 var(--s4); border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(8, 17, 46, .38); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .18s ease-out, border-color .18s ease-out; }
.dest-share:hover { background: rgba(8, 17, 46, .6); border-color: #fff; }
.dest-share:active { background: rgba(8, 17, 46, .75); }
.dest-share:focus-visible { outline: 2px solid #ffc233; outline-offset: 2px; }

/* ---------- expert review 16–20: logo plane centred, hero route/planes, headline contrast, close button ---------- */
.logo-mark { transform: none; font-size: 0; line-height: 0; }
.logo-mark svg { display: block; transform: rotate(45deg); }
.hero-route path#heroPath { stroke: rgba(255, 236, 210, .6); }
.hero-plane { filter: drop-shadow(0 1px 3px rgba(8, 23, 72, .5)); }
/* the planes fly along the route that hero-route.js writes into offset-path (is-live = path exists, wide layout); 9 s cycle: 4.5 s of flight, fade in over the first 6 %, fade out at the end, then rest.
   The second plane starts half a cycle later. CSS rather than SMIL: Firefox counts every SMIL frame as an inline-style CSP violation. */
.hero-route .hero-plane { opacity: 0; offset-rotate: auto; }
.hero-route.is-live .hero-plane { animation: hero-fly 9s linear infinite backwards; }
.hero-route.is-live .hero-plane + .hero-plane { animation-delay: 4.5s; }
@keyframes hero-fly { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 44% { opacity: 1; } 50% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-plane { display: none; } }
.close { display: inline-grid; place-items: center; padding: 0; font-size: 22px; line-height: 1; }
.close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.plan-sort select:focus-visible, #heroCountry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-route .hero-plane path { fill: #fff3e0; stroke: none; stroke-dasharray: none; }
.hero-route .hero-plane + .hero-plane path { fill: #ffd9b0; }

/* ---------- home bottom (expert point 19): folded comparison, one call to action, slim footer ---------- */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-top: var(--s7); padding: var(--s6) var(--s7); border-radius: 24px; background: linear-gradient(120deg, #ffc233, #ff8a2b 55%, #ff5a3c); color: #fff; box-shadow: 0 18px 40px rgba(255, 112, 40, .28); }
.cta-band h2 { margin: 0 0 4px; color: #fff; }
.cta-band p { margin: 0; opacity: .92; }
.cta-band .primary { background: #fff; color: #c2410c; box-shadow: none; white-space: nowrap; }
.cta-band .primary:hover { background: #fff3e6; }
.faq-more { margin-top: var(--s3); }
.site-footer.footer-slim { margin-top: var(--s7); }
.site-footer.footer-slim .shell { grid-template-columns: 1fr auto; gap: var(--s3) var(--s6); align-items: center; padding-top: var(--s5); padding-bottom: var(--s5); }
.footer-slim .fs-brand { display: flex; flex-direction: column; gap: 2px; }
.footer-slim .fs-brand b { margin: 0; }
.footer-slim nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); justify-content: flex-end; }
.site-footer.footer-slim nav a { display: inline-block; padding: var(--s1) 0; }
.footer-slim .fs-note { grid-column: 1 / -1; margin: 0; font-size: 13px; opacity: .78; }
@media (max-width: 760px) {
  .cta-band { flex-direction: column; align-items: flex-start; padding: var(--s5); gap: var(--s4); }
  .site-footer.footer-slim .shell { grid-template-columns: 1fr; }
  .footer-slim nav { justify-content: flex-start; }
}
.cta-band.shell { max-width: 1088px; width: calc(100% - 32px); }
/* plan row: "Подробнее" is vertically centred on the row and sits at its right edge */
.dest-card .dest-info { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; margin: 0; padding: 0 var(--s4) 0 var(--s2); min-height: 0; }
.plans-no-payment { margin: 0 0 var(--s4); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--bg-soft); color: var(--muted); font-size: 14px; }
.dest-coverage-detail, .dest-limit { grid-column: 2 / -1; color: var(--muted); font-size: 12px; line-height: 1.35; }
.dest-limit { color: var(--accent-text); }
.scope-tabs { width: 100%; }

/* question without an account, on the sign-in page */
.login-help { margin-top: var(--s5); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--bg-soft); }
.login-help > summary { cursor: pointer; font-weight: 600; color: var(--accent-text); }
.login-help[open] > summary { margin-bottom: var(--s2); }
.login-help .support-public-form { margin-top: var(--s3); }
#psStatus { min-height: 1em; margin: var(--s2) 0 0; font-size: 14px; }

/* ---------- 5G badge on country tiles (top right, next to where the price sits on the other pills) ---------- */
.country .badge-5g { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 9px; border-radius: 999px; color: #fff; font-size: 14px; line-height: 1; letter-spacing: .02em; background: linear-gradient(120deg, #0a1d5c, #2f6bd8); box-shadow: 0 4px 14px rgba(58, 119, 233, .45), inset 0 0 0 1px rgba(255, 255, 255, .38); }
.country .badge-5g b { font-weight: 800; font-style: italic; }
.country .badge-5g svg { display: block; }

/* ---------- theme switch (sun ⇄ moon) in the header ---------- */
.theme-toggle { position: relative; flex: 0 0 auto; width: 60px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(255, 255, 255, .16); cursor: pointer; color: #fff; margin-left: calc(-1 * var(--s2)); }
.site-header:not(.on-photo) .theme-toggle { border-color: var(--line-strong); background: var(--bg-soft); color: var(--muted); }
.theme-toggle .tt-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(9, 17, 41, .35); transition: transform .25s ease; }
.theme-toggle .tt-icon { position: absolute; top: 0; bottom: 0; width: 30px; display: grid; place-items: center; transition: color .25s ease; }
.theme-toggle .tt-sun { left: 0; } .theme-toggle .tt-moon { right: 0; }
:root[data-theme="light"] .theme-toggle .tt-sun { color: #f0600f; }
:root[data-theme="dark"] .theme-toggle .tt-knob { transform: translateX(28px); }
:root[data-theme="dark"] .theme-toggle .tt-moon { color: #2d6fe8; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) { .theme-toggle { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle .tt-knob, .theme-toggle .tt-icon { transition: none; } }

/* ---------- dark theme: tokens first, then the few places with hard-coded light colours ---------- */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161e36; --bg-soft: #1f2845; --bg-accent: #252f51; --page: #0d1327;
  --text: #eff3fe; --muted: #b3bcd9; --faint: #7e8cba;
  --line: #2c3658; --line-strong: #3f4c76;
  --accent: #ff8a4c; --accent-hover: #ffa06d; --accent-text: #ffa66f;
  --sunset-soft: linear-gradient(135deg, #202a49 0%, #222d51 55%, #232e51 100%);
  --lift: 0 14px 40px rgba(0, 0, 0, .5);
  --glow: 0 10px 30px rgba(255, 96, 50, .3);
  --violet: #9cbfff;
  --ok: #6fdc98; --ok-bg: #17301f; --warn: #ffcf7a; --warn-bg: #362a10; --err: #ff9088; --err-bg: #3a1a18;
}
:root[data-theme="dark"] body { background: radial-gradient(1200px 500px at 90% -10%, rgba(57, 84, 173, .32) 0%, transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(47, 74, 163, .3) 0%, transparent 60%), var(--page); background-repeat: no-repeat; }
:root[data-theme="dark"] .site-header:not(.on-photo) { background: rgba(13, 19, 39, .85); }
:root[data-theme="dark"] .compare td:nth-child(2) { background: #212943; }
:root[data-theme="dark"] .dest-card.selected { background: #202843; }
:root[data-theme="dark"] .dest-card.hit { background: linear-gradient(90deg, #3a2c16, var(--bg) 60%); box-shadow: 0 8px 26px rgba(255, 170, 40, .18); }
:root[data-theme="dark"] .dest-card.best { background: linear-gradient(90deg, #212c50, var(--bg) 60%); box-shadow: 0 8px 26px rgba(58, 119, 233, .25); }
:root[data-theme="dark"] .dest-card.hit.best { background: linear-gradient(90deg, #3a2c16, #212c50 50%, var(--bg) 90%); }
:root[data-theme="dark"] .dest-radio { background: var(--bg); border-color: #56679f; }
:root[data-theme="dark"] .dest-card.selected .dest-radio { background: radial-gradient(circle, var(--accent) 0 45%, var(--bg) 50%); }
:root[data-theme="dark"] dialog { background: var(--bg); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(3, 6, 16, .72); }
:root[data-theme="dark"] .data-delay, :root[data-theme="dark"] .checkout-next, :root[data-theme="dark"] .account-page .roaming-details, :root[data-theme="dark"] .account-page .client-message.answer { background: #202a49; border-color: #36426c; color: var(--violet); }
:root[data-theme="dark"] .account-page .client-usage { background: #303a59; }
:root[data-theme="dark"] .account-problem { background: var(--bg); }
:root[data-theme="dark"] .account-page #clientTicketBadge:not(:empty) { background: var(--bg-soft); }
:root[data-theme="dark"] .low-alert { background: #3a2c10; border-color: #7a5a1e; color: #ffd58a; }
:root[data-theme="dark"] .low-alert small { color: #e6bd75; }
:root[data-theme="dark"] .promo-applied { background: #17301f; color: #7fe0a1; }
:root[data-theme="dark"] .scroll-veil { background: linear-gradient(to bottom, rgba(13, 19, 39, .6), rgba(13, 19, 39, 0)); }
:root[data-theme="dark"] .secondary, :root[data-theme="dark"] .pill { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 3px 10px rgba(0, 0, 0, .25); }
:root[data-theme="dark"] .country-price { background: rgba(255, 255, 255, .92); color: #b3410a; }
:root[data-theme="dark"] .compare thead th { background: var(--bg-soft); }
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--bg-soft); color: var(--text); border-color: var(--line-strong); }
:root[data-theme="dark"] ::placeholder { color: var(--faint); }

/* dark theme: the two big white cards over the photos, a darker veil over country photos */
:root[data-theme="dark"] .flight-search { background: rgba(22, 30, 54, .94); color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .plans-card { background: rgba(19, 26, 49, .97); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .dest-stage::before { background: linear-gradient(180deg, rgba(4, 10, 27, .72) 0%, rgba(4, 10, 27, .55) 35%, rgba(7, 14, 35, .78) 100%); }
:root[data-theme="dark"] .site-header.on-photo .pill:hover { background: var(--bg-soft); color: var(--text); }

/* narrow screens: logo, account button and the theme switch stay on one row */
@media (max-width: 480px) {
  .site-header .shell { gap: var(--s2); }
  .site-header .pill { padding-left: 12px; padding-right: 12px; font-size: 13px; }
  .theme-toggle { width: 52px; height: 28px; }
  .theme-toggle .tt-knob { width: 20px; height: 20px; }
  .theme-toggle .tt-icon { width: 26px; }
  :root[data-theme="dark"] .theme-toggle .tt-knob { transform: translateX(24px); }
}
:root[data-theme="dark"] .client-toast, :root[data-theme="dark"] .ops-toast { background: #2f3c69; border: 1px solid #495b95; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

/* 5G on the country page: same badge, larger, straight; breadcrumbs on one centred line */
.country .badge-5g b { font-style: normal; }
.dest-5g { flex: 0 0 auto; align-self: center; margin-left: auto; }
.dest-5g .badge-5g { display: inline-flex; align-items: center; gap: 9px; padding: 9px 22px 9px 17px; border-radius: 999px; color: #fff; font-size: 26px; line-height: 1; letter-spacing: .02em; text-shadow: none; background: linear-gradient(120deg, #0a1d5c, #2f6bd8); box-shadow: 0 6px 20px rgba(58, 119, 233, .5), inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.dest-5g .badge-5g b { font-weight: 800; font-style: normal; }
.dest-5g .badge-5g svg { width: 24px; height: 24px; display: block; }
@media (max-width: 760px) { .dest-head h1 { position: relative; padding-right: 84px; } .dest-5g { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-left: 0; } .dest-5g .badge-5g { font-size: 20px; padding: 7px 18px 7px 14px; } .dest-5g .badge-5g svg { width: 19px; height: 19px; } }
.crumbs { align-items: center; gap: 0 var(--s2); }
.crumbs > * { display: inline-flex; align-items: center; min-height: 32px; line-height: 1.2; }
.crumbs > span[aria-hidden="true"] { opacity: .7; }

/* ---------- hero layout by width (visual audit 30.09.2026) ---------- */
/* 1101–1365px: the traveller keeps his place on the right (the picture is right-aligned and scales with the hero height), so the text column gets narrower and smaller instead of
   running over him. --col is the column width, derived from where his arm is: on a screen w wide the arm sits about w - 615 px from the left and the column starts at about w/2 - 544
   (w - 16 - … below 1152), so the room is roughly w/2 - 89 (w - 636 below 1152); the formulas keep ~10 px off that for the scrollbar. test-hero-20260930.mjs insists on a 12 px gap. */
@media (max-width: 1365px) {
  .hero-inner { --col: clamp(440px, calc(50vw - 100px), 600px); }
  .hero h1 { font-size: 48px; max-width: var(--col); }
  .hero .lead { max-width: min(470px, var(--col)); font-size: 17px; }
  .flight-search { max-width: calc(var(--col) - 14px); }
}
/* the three fact pills fill the column exactly at 1280px and the last one touched his arm; 2 px less padding each, still on one row (the chips above it wrap if the column gets narrower) */
@media (min-width: 1101px) and (max-width: 1365px) { .hero .facts li { padding-left: 8px; padding-right: 8px; } }
@media (max-width: 1200px) { .hero h1 { font-size: 44px; } }
/* 1101–1260px: the card's lower right corner is right at his shoulder; 12 px narrower than the column (select and button still fit on one row) */
@media (min-width: 1101px) and (max-width: 1260px) { .flight-search { max-width: calc(var(--col) - 26px); } }
/* the 1152 column rule is wider than the one above 1152; here the card follows his shoulder instead: 421 px at 1101, 456 px at 1152 */
@media (min-width: 1101px) and (max-width: 1152px) { .flight-search { max-width: calc(70vw - 350px); } }
@media (max-width: 1152px) { .hero-inner { --col: clamp(400px, calc(100vw - 655px), 520px); } }
/* <= 1100px: photo block on top, text on the sunset background below; the photo dissolves into it instead of ending on a hard line */
@media (max-width: 1100px) {
  .hero { --photo-h: clamp(400px, 78vw, 580px); display: block; min-height: 0; background: linear-gradient(180deg, #152351 0%, #1b2f70 52%, #203372 100%); }
  .hero-pic { inset: 0 0 auto 0; height: var(--photo-h); }
  .hero-bg { max-width: none; object-position: 100% 0; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .hero::before { inset: 0 0 auto 0; height: calc(var(--photo-h) + 64px); background: linear-gradient(180deg, rgba(9, 19, 51, .68) 0, rgba(9, 19, 51, .5) calc(var(--photo-h) * .16), rgba(9, 19, 51, .3) calc(var(--photo-h) * .28), rgba(9, 19, 51, 0) calc(var(--photo-h) * .44), rgba(9, 19, 51, 0) calc(var(--photo-h) * .58), rgba(9, 19, 51, .5) var(--photo-h), rgba(9, 19, 51, 0) 100%); }   /* 22.10.2026: the darkening runs on below the photo's edge and fades out, so it leaves no step there */   /* 14.10.2026: the lower edge darkens a little under the headline accent (3 : 1 at 390) */   /* stronger under the header: its links lie over the sky (the nav row sits lower now that its links are 44 px tall) */
  .hero-inner { --col: 560px; padding-top: calc(var(--photo-h) - 84px); padding-bottom: 96px; }
  .hero h1 { font-size: 38px; max-width: 640px; }
  .hero .lead { max-width: 560px; font-size: 17px; }
  .flight-search { max-width: 560px; }
  .hero-route { display: none; }
}
@media (max-width: 600px) { .hero h1 { font-size: 32px; } .hero .lead { font-size: 16px; } }
/* phones and small tablets use the portrait crop (the header wraps to two rows here, so the traveller must sit well below it) */
@media (max-width: 600px) { .hero { --photo-h: clamp(400px, 124vw, 560px); }
  /* the headline sits on the lowest 150 px of the photo: the veil gets darker there, so the #ffb36b accent keeps 3:1 on the pavement and the fuselage (test-hero-20260930.mjs) */
  .hero::before { background: linear-gradient(180deg, rgba(9, 19, 51, .68) 0, rgba(9, 19, 51, .5) calc(var(--photo-h) * .16), rgba(9, 19, 51, .3) calc(var(--photo-h) * .28), rgba(9, 19, 51, 0) calc(var(--photo-h) * .44), rgba(9, 19, 51, 0) calc(var(--photo-h) - 200px), rgba(9, 19, 51, .55) calc(var(--photo-h) - 110px), rgba(9, 19, 51, .66) calc(var(--photo-h) - 30px), rgba(9, 19, 51, .5) var(--photo-h), rgba(9, 19, 51, 0) 100%); } }

/* very narrow phones (<= 380px): logo, account button and theme switch still fit on one row */
@media (max-width: 380px) {
  .logo { font-size: 18px; gap: 6px; }
  .logo-mark { width: 30px; height: 30px; }
  .site-header .shell { gap: 6px; }
  .site-header .pill { padding-left: 10px; padding-right: 10px; font-size: 12.5px; }
}
@media (max-width: 340px) {
  .logo { font-size: 16px; letter-spacing: .02em; }
  .site-header .pill { padding-left: 8px; padding-right: 8px; font-size: 12px; }
  .theme-toggle { width: 46px; }
  :root[data-theme="dark"] .theme-toggle .tt-knob { transform: translateX(20px); }
  .theme-toggle .tt-icon { width: 23px; }
}

/* country page: stars only in the sky strip at the top and in the side margins (they used to be spread over a stage as tall as the whole plan list, and one landed inside the breadcrumbs) */
.dest-stage .hero-stars { bottom: auto; height: 520px;
  background-image: radial-gradient(2px 2px at 4% 6%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 19% 4%, #fff 50%, transparent 51%), radial-gradient(2.5px 2.5px at 35% 8%, #ffe9b8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 51% 5%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 67% 9%, #ffe9d6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 82% 5%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 95% 8%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 2% 26%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 3% 42%, #ffe9d6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 97% 24%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 96% 47%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 60% 30%, #fff 50%, transparent 51%); }

/* phones: the tab row scrolls sideways. A scroll container clips its children, which cut the active tab's glow into a pale rectangle — so the row gets padding for the glow
   (cancelled by negative margins: the layout does not move) and runs edge to edge; its right edge fades out to show there is more, and the end padding lets the last tab come fully into view */
@media (max-width: 760px) {
  .catalog-bar .catalog-tabs { max-width: none; width: calc(100% + 2 * var(--s4)); margin: -20px calc(-1 * var(--s4)) -30px; padding: 20px 40px 38px var(--s4);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%); }
}

/* phones, cabinet: the same fix for the sideways-scrolling section row — room for the active pill's glow (cancelled by negative margins), edge-to-edge inside the card, faded right edge */
@media (max-width: 760px) {
  .account-page .account-side nav { margin: -14px calc(-1 * var(--s3)) -28px; padding: 14px 44px 30px var(--s3);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%); }
}

/* cabinet 30.09: line states, filters, cancel/instruction dialogs, pending payment note */
.account-page .client-order-status.state-pending, .account-page .client-order-status.state-preparing { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.account-page .client-order-status.state-canceled, .account-page .client-order-status.state-refunded, .account-page .client-order-status.state-problem { background: var(--err-bg); color: var(--err); border-color: transparent; }
.account-page .client-order-status.state-ended { background: var(--line); color: var(--muted); border-color: transparent; }
.account-page .client-order-status.state-topup, .account-page .client-order-status.state-done { background: var(--sunset-soft); color: var(--ink); border-color: transparent; }
.client-order-card.state-canceled, .client-order-card.state-refunded, .client-order-card.state-ended { opacity: .92; }
.client-order-card.state-canceled .client-order-top h2, .client-order-card.state-refunded .client-order-top h2 { color: var(--muted); }
.compact-connection b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.orders-filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.orders-filters:empty { display: none; }
.orders-filters button { border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.orders-filters button small { color: var(--muted); margin-left: 4px; }
.orders-filters button.active { background: var(--sunset-soft); border-color: transparent; font-weight: 600; }
.orders-filters button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.order-note { margin: var(--s3) 0; padding: var(--s3); border-radius: var(--r); background: var(--sunset-soft); color: var(--ink); font-size: 15px; }
.pay-note { display: grid; gap: 2px; margin: var(--s3) 0; padding: var(--s3); border-radius: var(--r); background: var(--warn-bg); color: var(--warn); font-size: 15px; }
.pay-note span { color: inherit; opacity: .9; }
.pay-logos { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0; padding: 0; list-style: none; }
.pay-logos li { display: block; line-height: 0; }
.pay-logos img { display: block; width: 52px; height: 32px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); }
.pay-cards-note { margin: var(--s2) 0 var(--s3); color: var(--muted); font-size: 14px; }
.client-order-actions .danger, .cancel-row .danger { color: var(--err); border-color: var(--err); }
.client-order-actions .primary.danger, .client-dialog .primary.danger { background: var(--err); color: #fff; border-color: transparent; }
.client-dialog .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }
.how-steps { margin: 0; padding-left: 20px; display: grid; gap: var(--s3); }

/* 30.09 expert round: theme switch lives in the footer / cabinet card / a floating corner switch, not in the header */
.site-footer .theme-toggle { display: block; margin: 0 0 0 var(--s2); padding: 0; width: 60px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .16); align-self: center; }
/* the footer width above beats the narrow-screen sizes of the knob and icons (52 / 46 px): follow them, or the knob stops short of the edge */
@media (max-width: 480px) { .site-footer .theme-toggle { width: 52px; } }
@media (max-width: 340px) { .site-footer .theme-toggle { width: 46px; } }
.site-footer .theme-toggle:hover { text-decoration: none; }
.footer-slim nav { align-items: center; }
.account-side .theme-toggle.in-side { display: block; margin: var(--s3) 0 0; border-color: var(--line-strong); background: var(--bg-soft); color: var(--muted); }
.theme-toggle.floating { position: fixed; right: 16px; bottom: 16px; z-index: 30; margin: 0; border-color: var(--line-strong); background: var(--bg); color: var(--muted); box-shadow: var(--lift, 0 6px 18px rgba(9, 21, 61, .18)); }
@media (max-width: 760px) { .account-side .theme-toggle.in-side { margin-left: 0; } }

/* header pill of a signed-in visitor: "Личный кабинет" in full where it fits, the avatar alone on narrow screens */
@media (max-width: 900px) { .pill.signed-in .pill-label { display: none; } .pill.signed-in { width: 44px; padding-left: 0; padding-right: 0; } .pill.signed-in .pill-avatar { margin-right: 0; } }

/* hero conditions: separate rounded pills instead of a run of glued ticks */
.facts { gap: 6px; }
.facts li { padding: 3px 10px; border-radius: 999px; background: rgba(9, 19, 53, .46); border: 1px solid rgba(255, 255, 255, .28); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; line-height: 1.35; white-space: nowrap; }
.facts li::before { margin-right: 5px; }

/* selects: our own chevron with room on the right (the native one sat against the edge) */
select { -webkit-appearance: none; appearance: none; padding-right: 46px; background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23412a6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] select { background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23f3e9ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* dark theme: the comparison table keeps the sunset header on "Туристическая eSIM" like the light theme */
:root[data-theme="dark"] .compare thead th:nth-child(2) { background: var(--sunset); color: #fff; }
:root[data-theme="dark"] .compare td:nth-child(2) { background: #212943; }
/* the three condition pills wrap into two rows in the narrow desktop column: take that height back from the bottom padding so the photo scale (and the traveller) stays where it was */
@media (min-width: 1001px) and (max-width: 1152px) { .hero-inner { padding-bottom: 78px; } }

/* ---------- plan cards (30.09.2026): 3-column grid, country → regional → world blocks, sunset colours ---------- */
.plan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; margin-top: var(--s4); }
.plan-scope { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0 0; font-size: 18px; font-weight: 800; color: var(--text); }
.plan-scope::before { content: ""; width: 6px; height: 22px; border-radius: 6px; background: var(--sunset); flex: 0 0 auto; }
.plan-scope:first-child { margin-top: 0; }
.sim-perks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-weight: 600; }
.sim-perks li::before { content: "✓"; margin-right: 6px; color: #4c85f0; font-weight: 800; }
.plan-list .dest-card { display: flex; flex-direction: column; align-items: stretch; border: 2px solid var(--line); border-radius: 22px; background: var(--bg); box-shadow: 0 2px 8px rgba(18, 33, 82, .05); overflow: visible; }
.plan-list .dest-card:hover { border-color: #ffb68a; box-shadow: 0 10px 28px rgba(255, 106, 43, .16); }
.plan-list .dest-card.selected { border-color: transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--sunset) border-box; box-shadow: 0 14px 34px rgba(255, 114, 79, .22); }
.plan-list .dest-card.hit { border-color: #ffb13b; background: linear-gradient(180deg, #fff3da, var(--bg) 60%); box-shadow: 0 10px 28px rgba(255, 170, 40, .26); }
.plan-list .dest-card.best { border-color: #8aaff5; background: linear-gradient(180deg, #e9effe, var(--bg) 60%); box-shadow: 0 10px 28px rgba(58, 119, 233, .18); }
.plan-list .dest-card.hit.best { background: linear-gradient(180deg, #fff3da, #e9effe 45%, var(--bg) 85%); }
.plan-list .dest-card.hit.selected, .plan-list .dest-card.best.selected { border-color: var(--accent); }
.plan-list .dest-card.pinned, .plan-list .dest-card.hit:not(.pinned), .plan-list .dest-card.best:not(.pinned) { margin-top: 0; border-width: 2px; }
.plan-list .dest-ribbon { top: -14px; left: var(--s4); }
.plan-list .dest-card-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 18px 20px 6px; flex: 1 1 auto; grid-template-columns: none; }
.plan-list .dest-radio { width: 26px; height: 26px; border-width: 2px; margin-bottom: 4px; flex: 0 0 auto; }
.plan-list .dest-card.selected .dest-radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 42%, var(--bg) 46%); }
.plan-list .dest-vol { display: block; }
.plan-list .dest-gb { display: flex; align-items: center; gap: 8px; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; white-space: normal; }
.plan-list .dest-card.unlimited .dest-gb { font-size: 22px; color: var(--accent); }
.plan-list .dest-card.unlimited .dest-gb .ico-inf { flex: 0 0 auto; color: var(--accent); }
.plan-list .dest-extra { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.plan-list .dest-days { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 16px; }
.plan-list .dest-days .ico, .plan-list .dest-where .ico { flex: 0 0 auto; }
.plan-list .dest-tag { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--bg-accent); color: var(--accent-text); font-size: 12px; font-weight: 700; letter-spacing: 0; vertical-align: middle; }
.plan-list .dest-price { margin-top: 6px; text-align: left; font-size: 27px; font-weight: 800; color: var(--text); }
.plan-list .dest-price small { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.plan-list .dest-unit { order: 4; margin-top: -4px; font-size: 13px; }
.plan-list .dest-where { order: 5; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; }
.plan-list .dest-card .dest-info { align-self: stretch; justify-content: flex-start; gap: 8px; margin: 0; padding: 12px 20px 18px; min-height: 0; font-size: 16px; font-weight: 700; color: var(--accent-text); }
.plan-list .dest-card:hover .dest-info { text-decoration: underline; }
.plan-list .catalog-status { grid-column: 1 / -1; }
.plan-list .dest-card-pick:focus-visible { outline: 3px solid rgba(240, 96, 15, .45); outline-offset: -3px; border-radius: 20px; }
:root[data-theme="dark"] .plan-list .dest-card.hit { background: linear-gradient(180deg, #3a2c16, var(--bg) 60%); }
:root[data-theme="dark"] .plan-list .dest-card.best { background: linear-gradient(180deg, #212c50, var(--bg) 60%); }
:root[data-theme="dark"] .plan-list .dest-card.hit.best { background: linear-gradient(180deg, #3a2c16, #212c50 45%, var(--bg) 85%); }
:root[data-theme="dark"] .plan-list .dest-card.selected { background: linear-gradient(#202843, #202843) padding-box, var(--sunset) border-box; }
@media (max-width: 900px) { .plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }
@media (max-width: 520px) {
  .plan-list { gap: 18px 10px; }
  .plan-list .dest-card-pick { padding: 14px 14px 4px; gap: 6px; }
  .plan-list .dest-gb { font-size: 24px; }
  .plan-list .dest-card.unlimited .dest-gb { font-size: 18px; }
  .plan-list .dest-price { font-size: 22px; }
  .plan-list .dest-days, .plan-list .dest-where { font-size: 14px; }
  .plan-list .dest-radio { width: 22px; height: 22px; }
  .plan-list .dest-card .dest-info { padding: 10px 14px 14px; font-size: 14px; }
  .plan-scope { font-size: 16px; }
}
@media (max-width: 340px) { .plan-list { grid-template-columns: 1fr; } }

/* comparison table: always open; on phones every row becomes a stacked card (no sideways scroll) */
@media (max-width: 720px) {
  .table-wrap { overflow: visible; background: transparent; box-shadow: none; }
  .compare { min-width: 0; display: block; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare tbody { display: grid; gap: var(--s3); }
  .compare tbody tr { display: block; border-radius: var(--r); background: var(--bg); box-shadow: var(--lift); overflow: hidden; }
  .compare tbody th { display: block; width: auto; padding: var(--s3) var(--s4); background: var(--bg-soft); border-bottom: 0; font-size: 15px; font-weight: 700; }
  .compare tbody td { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--line); font-size: 15px; }
  .compare tbody td::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 600; }
  .compare tbody td:last-child { border-bottom: 0; }
  .compare td:nth-child(2) { background: #fff6ef; }
  .compare td:nth-child(2)::before { color: var(--accent-text); }
}

/* manual renewal bonus (set by the team for a customer whose package has ended) */
.topup-block .topup-bonus { display: inline-block; margin-top: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sunset-soft); color: var(--text); font-weight: 700; font-size: 14px; }
.topup-option.has-bonus { border-color: var(--accent); }
.topup-option strong s { color: var(--muted); font-weight: 500; margin-right: 4px; }


/* 01.10 language switch RU / EN: same pill as the theme switch, placed right after it (footer, cabinet card, floating on the login page) */
.lang-toggle { position: relative; flex: 0 0 auto; display: block; width: 60px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(255, 255, 255, .16); cursor: pointer; color: #fff; margin: 0 0 0 var(--s2); align-self: center; font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .04em; }
.lang-toggle .lt-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(9, 17, 41, .35); transition: transform .25s ease; }
.lang-toggle .lt-label { position: absolute; top: 0; bottom: 0; width: 30px; display: grid; place-items: center; transition: color .25s ease; pointer-events: none; }
.lang-toggle .lt-ru { left: 0; } .lang-toggle .lt-en { right: 0; }
:root[data-lang="ru"] .lang-toggle .lt-ru, :root[data-lang="en"] .lang-toggle .lt-en { color: #c2470a; }
:root[data-lang="en"] .lang-toggle .lt-knob { transform: translateX(28px); }
.site-footer .lang-toggle { display: block; margin: 0 0 0 var(--s2); padding: 0; width: 60px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .16); color: #fff; font-size: 12px; align-self: center; }
.site-footer .lang-toggle:hover { color: #fff; text-decoration: none; }
.lang-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.side-toggles { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.account-side .side-toggles .theme-toggle.in-side, .account-side .side-toggles .lang-toggle.in-side { margin: 0; }
.account-side .lang-toggle.in-side { display: block; border-color: var(--line-strong); background: var(--bg-soft); color: var(--muted); }
.lang-toggle.floating { position: fixed; right: 88px; bottom: 16px; z-index: 30; margin: 0; border-color: var(--line-strong); background: var(--bg); color: var(--muted); box-shadow: var(--lift, 0 6px 18px rgba(9, 21, 61, .18)); }
@media (max-width: 480px) {
  .lang-toggle, .site-footer .lang-toggle { width: 52px; height: 28px; }
  .lang-toggle .lt-knob { width: 20px; height: 20px; }
  .lang-toggle .lt-label { width: 26px; }
  :root[data-lang="en"] .lang-toggle .lt-knob { transform: translateX(24px); }
  .lang-toggle.floating { right: 80px; }
}
@media (max-width: 340px) {
  .lang-toggle, .site-footer .lang-toggle { width: 46px; }
  :root[data-lang="en"] .lang-toggle .lt-knob { transform: translateX(20px); }
  .lang-toggle .lt-label { width: 23px; }
  .lang-toggle.floating { right: 74px; }
}
@media (prefers-reduced-motion: reduce) { .lang-toggle .lt-knob, .lang-toggle .lt-label { transition: none; } }

/* 02.10 audit: the floating switches (login page) share one landmark */
.floating-tools { display: flex; flex-direction: row-reverse; justify-content: center; gap: 8px; padding: 24px 16px 28px; }
.floating-tools .theme-toggle.floating, .floating-tools .lang-toggle.floating { position: relative; inset: auto; margin: 0; }

/* 02.10 speed audit: nothing below the plans is visible (so nothing can jump) until the plans are drawn */
body.plans-loading .dest-stage ~ *, body.plans-loading .site-footer, body.plans-loading .plans-card { visibility: hidden; }
body.plans-loading .plans-card { min-height: 560px; }
.not-found { text-align: center; padding: 72px 0 96px; }
.not-found h1 { margin: 0 0 12px; }
.not-found p { color: var(--muted); margin: 0 0 24px; }

/* 02.10 audit: tappable things are at least 44 px high on phones and touch screens (WCAG 2.5.5). Small controls keep their look; their hit area grows invisibly. */
@media (max-width: 900px), (pointer: coarse) {
  .site-nav a, .tabs button, .catalog-tabs button, .dest-tabs button, .dest-chips button, .help-categories button, .plan-sort select { min-height: 44px; }
  a.text-link, button.text-link, .account-side .text-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .account-side nav button, .orders-filters button, .tg-open { min-height: 44px; }
  .close { width: 44px; height: 44px; }
  .site-footer.footer-slim nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .crumbs a, #destCredit, .theme-toggle, .lang-toggle { position: relative; }
  .crumbs a::after { content: ""; position: absolute; inset: -6px -4px; }
  #destCredit { display: inline-flex; align-items: center; min-height: 44px; }
  .theme-toggle::after, .lang-toggle::after { content: ""; position: absolute; inset: -9px -5px; } /* inset is measured from the padding box: the 1 px border makes it 44 px */
  .theme-toggle.floating, .lang-toggle.floating { position: fixed; }
  .floating-tools .theme-toggle.floating, .floating-tools .lang-toggle.floating { position: relative; }
}

/* ---------- typography (02.10.2026) ----------
   Headlines, plan sizes, prices and the wordmark are set in Unbounded (wide, geometric — it reads like airport signage and carries Cyrillic); everything else in Onest,
   which was drawn for Russian text. Unbounded is about 30 % wider than the old system face, so its sizes are smaller than the sizes they replace. */
body { font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--display); font-weight: 650; letter-spacing: -.025em; line-height: 1.14; text-wrap: balance; }
h3 { font-weight: 650; text-wrap: balance; }
h1 { font-size: 30px; } h2 { font-size: 22px; } h3 { font-size: 18px; }
p, li, .lead { text-wrap: pretty; }
.logo { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.hero h1 { font-size: 40px; font-weight: 700; line-height: 1.12; letter-spacing: -.03em; }
.dest-head h1 { font-size: 36px; font-weight: 700; letter-spacing: -.03em; }
.account-heading h1, .login h1 { font-size: 24px; }
.plan-scope { font-family: var(--display); font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.plan-list .dest-gb { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.plan-list .dest-card.unlimited .dest-gb { font-size: 19px; }
.plan-list .dest-price { font-family: var(--display); font-size: 21px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.plan-list .dest-price small { font-family: var(--font); }
.price, .promo-code, .dest-price, .total { font-variant-numeric: lining-nums tabular-nums; }
button, .btn, .pill, a.primary, .primary, .secondary { font-family: var(--font); font-weight: 650; letter-spacing: .005em; }
@media (max-width: 1260px) { .hero h1 { font-size: 34px; } }
@media (max-width: 1000px) { .hero h1 { font-size: 30px; } }
@media (max-width: 600px) { .hero h1 { font-size: 24px; } .dest-head h1 { font-size: 24px; } h1 { font-size: 24px; } h2 { font-size: 19px; } .plan-list .dest-gb { font-size: 21px; } .plan-list .dest-card.unlimited .dest-gb { font-size: 16px; } .plan-list .dest-price { font-size: 18px; } }

/* ---------- one-time code field (otp.js): six cells over one real input ---------- */
.otp { position: relative; display: block; width: 100%; max-width: 360px; margin-top: var(--s2); }
.otp-cells { display: flex; gap: 8px; }
.otp-cell { position: relative; flex: 1 1 0; min-width: 0; height: 58px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--bg); color: var(--text);
  font: 700 24px/1 var(--display); font-style: normal; font-variant-numeric: lining-nums tabular-nums; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.otp-cell.otp-gap { margin-left: 8px; }
.otp-cell.is-filled { border-color: var(--text); background: var(--bg-soft); }
.otp.is-focused .otp-cell.is-active { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(240, 96, 15, .18); }
.otp.is-focused .otp-cell.is-active:not(.is-filled)::after { content: ""; width: 2px; height: 26px; border-radius: 2px; background: var(--accent); animation: otp-caret 1.1s steps(1) infinite; }
.otp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; background: transparent; font-size: 16px; cursor: text; }
.otp.otp-error .otp-cell { border-color: var(--err); background: var(--err-bg); animation: otp-shake .36s both; }
@keyframes otp-caret { 50% { opacity: 0; } }
@keyframes otp-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .otp.is-focused .otp-cell.is-active:not(.is-filled)::after { animation: none; } .otp.otp-error .otp-cell { animation: none; } }
@media (max-width: 380px) { .otp-cells { gap: 6px; } .otp-cell { height: 52px; font-size: 21px; border-radius: 12px; } .otp-cell.otp-gap { margin-left: 6px; } }
.otp-meta { margin: var(--s2) 0 0; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.otp-meta.is-expired { color: var(--err); font-weight: 600; }
:root[data-theme="dark"] .otp-cell.is-filled { border-color: var(--line-strong); }
/* plain mode (admin backup code): the real input is shown, the cells are hidden */
.otp.otp-plain .otp-cells { display: none; }
.otp.otp-plain input { position: static; opacity: 1; height: auto; padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); }

/* ---------- legibility (03.10.2026) ----------
   1. Ink on the sunset gradient. White on gold→coral measured 1.6–3.1 : 1 (WCAG AA asks 4.5 : 1; axe-core does not score text on
      gradients, so the earlier audits missed it). Airport wayfinding solves the same with dark text on amber: every surface filled
      with --sunset carries --on-sunset in both themes. Checked by work/google-oauth-20260927/audit-contrast-20261003.mjs.
   2. Gradient-filled text on light surfaces: the gold end read 1.6 : 1 on white, so the light theme uses solid or deeper colours.
   3. Headings: Unbounded 800 with -0.025em tracking was dense at 22 px; 600 with -0.01em keeps the voice and reads easier.
   4. Found on the way: the per-GB label was hidden on wide screens (a bare "$1.16"), the undefined --ink token left the cabinet
      filter chips navy on the navy band, the Telegram banner and the tile price chip were below 4.5 : 1. */
:root { --on-sunset: #14193a; --ink: var(--text); --accent-text: #b33e05; --violet: #2556b8; }
:root[data-theme="dark"] { --violet: #9cbfff; }
.btn, .primary, .btn:hover, .primary:hover { color: var(--on-sunset); }
.tabs button.active, .catalog-tabs button.active, .dest-tabs button.active, .dest-chips button.active, .help-categories button.active { color: var(--on-sunset); }
.how-cards li::before { color: var(--on-sunset); }
.compare thead th:nth-child(2), :root[data-theme="dark"] .compare thead th:nth-child(2) { color: var(--on-sunset); }
.dest-facts #destKind { color: var(--on-sunset); }
.cta-band, .cta-band h2 { color: var(--on-sunset); }
.cta-band p { opacity: 1; color: rgba(20, 25, 58, .86); }
.cta-band .primary { background: var(--on-sunset); color: #fff; }
.cta-band .primary:hover { background: #0a1d5c; color: #fff; }
.account-page .account-person::before, .pill-avatar { color: var(--on-sunset); }
.account-page .account-side nav button.active, .account-page .account-side nav button:not(.active) #clientTicketBadge:not(:empty) { color: var(--on-sunset); }
.dest-ribbon .dest-hit { background: var(--sunset); color: var(--on-sunset); }
.dest-ribbon .dest-badge { background: linear-gradient(120deg, #0a1d5c, #2f6bd8); color: #fff; }
.plan-list .dest-unit-label { display: inline; }
.account-page .promo-code.has-code { background: none; color: #a8360a; -webkit-text-fill-color: currentColor; }
:root[data-theme="dark"] .account-page .promo-code.has-code { color: #ffb27a; }
.orders-filters button { background: var(--bg); color: var(--text); }
.orders-filters button:focus-visible { outline-color: var(--accent); }
.account-page .tg-banner { background: linear-gradient(120deg, #164f8f 0%, #1d6fb8 55%, #2f5fc4 100%); }
.country-price, :root[data-theme="dark"] .country-price { background: #fff; color: #b33e05; }
h1, h2 { letter-spacing: -.01em; }
h2 { font-size: 24px; line-height: 1.2; }
.section-head h2, .section > h2, .dest-specs h2, #how h2, .email-bind h2, .account-page .client-order-top h2 { font-weight: 600; }
.hero h1 { letter-spacing: -.02em; }
.dest-head h1 { font-weight: 650; letter-spacing: -.015em; }
@media (max-width: 600px) { h2 { font-size: 20px; } }
/* on phones the cabinet heading sits below the night band (its colour already switches to --text); the intro line under it did not */
@media (max-width: 760px) { .account-page .account-view > p.muted:first-of-type { color: var(--muted); } }
/* cabinet: offers and discounts on/off (account.js setupOffers) */
.offers-pref .switch-row { display: flex; align-items: flex-start; gap: var(--s3); min-height: 44px; cursor: pointer; }
.offers-pref input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.offers-pref b { display: block; font-size: 16px; }
.offers-pref small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.45; }
/* the unsubscribe page (lib/offers-page.mjs) */
.offers-page p { max-width: 560px; }
.offers-form { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }


/* ---------- legacy modal styles kept for backwards-compatible cached markup ---------- */
.site-notice { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border: 0; border-radius: var(--r-lg); padding: 0; overflow: auto; background: var(--night); color: #fff; box-shadow: 0 30px 80px rgba(4, 10, 43, .55); }
.site-notice::backdrop { background: rgba(4, 10, 43, .82); }
:root[data-theme="dark"] .site-notice { background: var(--night); border: 1px solid rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .site-notice::backdrop { background: rgba(2, 5, 20, .84); }
.site-notice::before { content: ""; display: block; height: 6px; background: var(--sunset); }
.site-notice-body { display: grid; justify-items: center; gap: var(--s4); padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 48px) clamp(24px, 5vw, 40px); text-align: center; }
.site-notice-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sunset); color: var(--on-sunset); font: 700 34px/1 var(--display); box-shadow: var(--glow); }
.site-notice h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 4.4vw, 38px); line-height: 1.2; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.site-notice p { margin: 0; max-width: 34em; font-size: clamp(18px, 2.6vw, 23px); line-height: 1.45; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.site-notice .site-notice-ok { min-width: 200px; min-height: 52px; margin-top: var(--s3); font-size: 18px; }
/* no entrance animation and no backdrop blur: on a slow machine the fade stuck at its first frame (03.10.2026) and the page looked dark and frozen */

/* Install guide page (/guide) */
.guide-head { padding-top: var(--s7); }
.guide-head h1 { margin: 0 0 var(--s3); }
.guide-head .lead { max-width: 640px; color: var(--muted); }
.guide-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin: var(--s4) 0 0; }
.guide-page .section h2 { margin: 0 0 var(--s3); }
.guide-page .section h3 { margin: var(--s4) 0 var(--s2); }
.guide-page .section p { max-width: 760px; }
.guide-list { margin: 0; padding-left: var(--s5); max-width: 760px; }
.guide-list li { padding: var(--s1) 0; }
.guide-list li::marker { color: var(--accent); }
.guide-page main > section[id] { scroll-margin-top: 72px; }
/* Roaming walkthrough: drawn phone screens (own drawings, no third-party screenshots). The screens keep phone-like light colours in both themes. */
.phone-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 236px)); gap: var(--s4); margin: 0 0 var(--s5); padding: 0; list-style: none; counter-reset: pstep; }
.phone-steps > li { counter-increment: pstep; display: grid; align-content: start; gap: var(--s2); min-width: 0; }
.phone-steps > li > p { margin: 0; font-size: 15px; line-height: 1.45; }
.phone-steps > li > p::before { content: counter(pstep); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--sunset); color: var(--on-sunset); font-weight: 700; font-size: 13px; vertical-align: 1px; }
.pm { --pm-bg: #f2f2f7; --pm-row: #fff; --pm-ink: #1c1c1e; --pm-sub: #5f5f66; --pm-on: #34c759; --pm-line: #e3e3e8;
  min-height: 300px; padding: 30px 10px 14px; border: 8px solid #14193a; border-radius: 30px; background: var(--pm-bg); color: var(--pm-ink); font-size: 13px; line-height: 1.25; position: relative; box-shadow: var(--lift); }
.pm::before { content: ""; position: absolute; top: 8px; left: 50%; width: 56px; height: 14px; margin-left: -28px; border-radius: 10px; background: #14193a; }
:root[data-theme="dark"] .pm { border-color: #3a4775; }
:root[data-theme="dark"] .pm::before { background: #3a4775; }
.pm-samsung { --pm-bg: #f6f6f6; --pm-on: #3e91ff; }
.pm-pixel { --pm-bg: #f7f9fc; --pm-row: #f7f9fc; --pm-on: #1a73e8; --pm-line: transparent; }
.pm-pixel::before, .pm-samsung::before { width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; }
.pm-title { margin: 4px 4px 10px; font-weight: 700; font-size: 20px; }
.pm-back { margin: 0 4px 6px; color: var(--pm-on); font-size: 13px; }
.pm-ios .pm-back { color: #0a64d8; }
.pm-ios .pm-back::before { content: "‹ "; font-size: 16px; }
.pm-samsung .pm-back, .pm-pixel .pm-back { margin: 2px 4px 12px; color: var(--pm-ink); font-weight: 700; font-size: 17px; }
.pm-samsung .pm-back::before, .pm-pixel .pm-back::before { content: "← "; }
.pm-group { margin: 10px 8px 4px; color: var(--pm-sub); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.pm-list { margin: 0; padding: 0; list-style: none; border-radius: 12px; background: var(--pm-row); overflow: hidden; }
.pm-samsung .pm-list { border-radius: 18px; }
.pm-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 38px; padding: 6px 10px; border-bottom: 1px solid var(--pm-line); }
.pm-list li:last-child { border-bottom: 0; }
.pm-list span { color: var(--pm-sub); white-space: nowrap; }
.pm-go::after { content: " ›"; color: #a0a0a8; }
.pm-list .pm-hit { position: relative; z-index: 1; background: #fff1e4; border-radius: 10px; box-shadow: inset 0 0 0 2px #ff8a2b; font-weight: 600; }
.pm-sw { flex: none; width: 34px; height: 20px; border-radius: 12px; background: #d1d1d6; position: relative; }
.pm-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pm-sw.on { background: var(--pm-on); }
.pm-sw.on::after { left: 16px; }
@media (max-width: 760px) {
  .phone-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(236px, 74%); overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px var(--s3); }
  .phone-steps > li { scroll-snap-align: start; }
}

/* Benefits strip (home, country page) */
.trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s6); margin-bottom: 0; padding-left: 0; padding-right: 0; list-style: none; }
.trust-strip li { display: grid; align-content: start; gap: 4px; padding: var(--s4); border-radius: var(--r); background: var(--bg); box-shadow: var(--lift); border: 1px solid var(--line); }
.trust-strip b { font-size: 16px; }
.trust-strip span { color: var(--muted); font-size: 14px; }
@media (max-width: 1000px) { .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .trust-strip { grid-template-columns: minmax(0, 1fr); } }

/* Floating Telegram button */
.tg-float { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--sunset); color: var(--on-sunset); font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: var(--glow); }
.tg-float:hover, .tg-float:focus-visible { filter: brightness(1.06); color: var(--on-sunset); } /* beats the generic a:hover accent colour, which is unreadable on sunset */
@media (max-width: 520px) { .tg-float { right: 12px; bottom: 12px; padding: 11px 15px; font-size: 14px; } }


/* Cookie notice */
.consent-bar { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 440px; display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r, 16px); background: var(--bg); color: var(--text); border: 1px solid var(--line, rgba(128,128,160,.35)); box-shadow: var(--lift, 0 10px 30px rgba(0,0,0,.25)); font-size: 13.5px; line-height: 1.45; }
.consent-bar p { margin: 0; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.consent-actions button { font: inherit; font-weight: 700; padding: 8px 14px; min-height: 44px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line, rgba(128,128,160,.5)); background: transparent; color: inherit; }
.consent-actions .consent-accept { background: var(--sunset); color: var(--on-sunset); border-color: transparent; }
@media (max-width: 640px) { .consent-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; } .consent-open .tg-float { bottom: 190px; } .consent-open body { padding-bottom: 176px; } }

/* Stage 0 (06.10.2026): compact notices on phones, quick country chips */
.quick-countries { display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--col, 600px); margin: 0 0 var(--s3); }
.quick-countries:empty { display: none; }
.quick-countries a { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.quick-countries a small { color: #fff1de; font-size: 12.5px; font-weight: 600; }
.quick-countries a:hover, .quick-countries a:focus-visible { background: #fff; color: #14193a; }
.quick-countries a:hover small, .quick-countries a:focus-visible small { color: #b4501a; }
@media (max-width: 640px) {
  .consent-bar { gap: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; }
  .consent-actions { flex-wrap: nowrap; }
  .consent-actions button { flex: 1 1 0; padding: 8px 10px; font-size: 13px; }
  .consent-open .tg-float { display: none; }
  .tg-float { padding: 12px; }
  .tg-float span { display: none; }
}
@media (max-width: 600px) { .hero-kicker, .hero .lead { display: none; } .quick-countries { gap: 4px 6px; } .quick-countries a { align-items: center; min-height: 44px; padding: 0 12px; font-size: 13px; } }   /* 14.10.2026: a real 44 px target instead of 34 px plus a pseudo-element */


/* Stage 1: plans as a table, sticky bar with the choice, trip scenarios */
.dest-stage { overflow: clip; }
.plan-list { grid-template-columns: 1fr; gap: 8px; }
/* thin rows like a price table: package | validity | price | radio; badges sit right of the volume */
.plan-list { gap: 6px; }
.plan-list .dest-card-pick { grid-template-areas: none; }
.plan-cols, .plan-list .dest-card-pick { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 120px 22px; align-items: center; column-gap: 14px; }
.plan-cols { margin: 0 0 2px; padding: 9px 21px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: 14px; }
.plan-cols span:nth-child(3) { text-align: right; }
.plan-list .dest-card, .plan-list .dest-card.pinned, .plan-list .dest-card.hit, .plan-list .dest-card.best, .plan-list .dest-card.hit.best, .plan-list .dest-card.hit:not(.pinned), .plan-list .dest-card.best:not(.pinned),
:root[data-theme="dark"] .plan-list .dest-card, :root[data-theme="dark"] .plan-list .dest-card.hit, :root[data-theme="dark"] .plan-list .dest-card.best, :root[data-theme="dark"] .plan-list .dest-card.hit.best { border: 1px solid var(--line); border-radius: 26px; background: var(--bg); box-shadow: none; }
.plan-list .dest-card:hover { border-color: #ffb68a; box-shadow: none; }
.plan-list .dest-card.selected, .plan-list .dest-card.hit.selected, .plan-list .dest-card.best.selected, :root[data-theme="dark"] .plan-list .dest-card.selected { border: 1px solid var(--accent); background: var(--bg-accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-list .dest-card-pick { min-height: 46px; padding: 6px 20px; gap: 0 14px; border-radius: 26px; }
.plan-list .dest-vol { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.plan-list .dest-days { grid-column: 2; grid-row: 1; margin: 0; max-width: 100%; font-size: 16px; color: var(--text); }
.plan-list .dest-days .ico { display: none; }
/* every term is a pill: several terms of one volume are switches, a single term is a static pill; the chosen one is sunset in the selected row, outlined elsewhere */
.plan-list .dest-terms { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dest-term { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 15px; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.dest-term:hover { border-color: var(--accent); }
.dest-term.active { border-color: var(--accent); background: var(--bg-accent); color: var(--accent-text); font-weight: 600; }
.dest-card.selected .dest-term.active { border-color: transparent; background: var(--sunset); color: var(--on-sunset); }
.dest-term.static { cursor: inherit; }
.dest-term.static:hover { border-color: var(--line-strong); }
.dest-card.selected .dest-term.static { border-color: transparent; background: var(--sunset); color: var(--on-sunset); font-weight: 600; }
.dest-term:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dest-term { transition: none; } }
.plan-list .dest-price { grid-column: 3; grid-row: 1; margin: 0; text-align: right; font-size: 18px; font-weight: 600; white-space: nowrap; }
.plan-list .dest-price small { display: none; }
.plan-cols span { white-space: nowrap; }
.plan-list .dest-radio { grid-column: 4; grid-row: 1; width: 22px; height: 22px; margin: 0; justify-self: end; }
.plan-list .dest-limit { grid-column: 1 / -1; grid-row: 2; margin: 0 0 4px; font-size: 13px; }
.plan-list .dest-unit, .plan-list .dest-where, .plan-list .dest-coverage-detail, .plan-list .dest-card .dest-info { display: none; }
.plan-list .dest-gb { font-size: 18px; letter-spacing: 0; }
.plan-list .dest-card.unlimited .dest-gb { font-size: 16px; }
.plan-list .dest-extra { display: inline; margin: 0; font-size: 13px; }
.plan-list .dest-ribbon { position: static; display: inline-flex; gap: 6px; padding: 0; }
.plan-list .dest-ribbon span { padding: 2px 10px; font-size: 12px; line-height: 1.5; box-shadow: none; white-space: nowrap; }

.scenario-title { margin: 0 0 8px; font-weight: 700; color: var(--muted); font-size: 14px; }
.scenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.scenarios[hidden], .scenario-note[hidden], .scenario-title[hidden], .cart[hidden] { display: none; }
.scenarios button { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-soft); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.scenarios button b { font-size: 15px; }
.scenarios button small { color: var(--muted); font-size: 13px; }
.scenarios button:hover { border-color: var(--accent); }
.scenarios button.active { background: linear-gradient(var(--bg-accent), var(--bg-accent)) padding-box, var(--sunset) border-box; border: 2px solid transparent; }
.scenario-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--bg-accent); color: var(--accent-text); font-size: 15px; font-weight: 600; }

.cart { position: sticky; bottom: 12px; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; margin: var(--s4) 0 0; padding: 12px 14px 12px 22px; border: 2px solid transparent; border-radius: 22px; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--sunset) border-box; box-shadow: 0 14px 40px rgba(18, 33, 82, .28); }
.cart-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.cart-sum b { font-family: var(--display); font-size: 17px; }
.cart-price { font-family: var(--display); font-size: 20px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; color: var(--accent-text); white-space: nowrap; }
.cart .primary { min-height: 48px; padding: 0 28px; }
.cart-help { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.cart-help li::before { content: "✓ "; color: var(--accent-text); font-weight: 800; }
@media (max-width: 720px) {
  .scenarios { display: flex; flex-wrap: wrap; gap: 8px; }
  .scenarios button { padding: 10px 14px; }
  .scenarios button small { display: none; }
  .cart-help li:not(:first-child) { display: none; }
  .cart-help { gap: 0; }
  .cart { padding: 10px 10px 10px 16px; gap: 10px; border-radius: 20px; }
  .cart-sum b { font-size: 14px; }
  .cart-price { font-size: 17px; }
  .cart .primary { padding: 0 14px; font-size: 14px; min-height: 44px; }
  .esim-page .tg-float { display: none; }
}
@media (max-width: 600px) {
  .plan-cols, .plan-list .dest-card-pick { grid-template-columns: minmax(0, 1fr) 62px 62px 20px; column-gap: 8px; }
  .plan-cols { padding: 8px 15px; font-size: 13px; }
  .plan-list .dest-card-pick { padding: 6px 14px; }
  .plan-list .dest-days { font-size: 14px; }
  .plan-list .dest-price { font-size: 16px; }
  .plan-list .dest-gb { font-size: 16px; }
  .plan-list .dest-radio { width: 20px; height: 20px; }
  .plan-list .dest-ribbon span { padding: 1px 8px; font-size: 11px; }
  .plan-list .dest-vol { gap: 0 6px; }
  .plan-list .dest-ribbon span.dest-badge { padding: 1px 6px; font-size: 10px; letter-spacing: -.01em; }
  .plan-list .dest-terms { grid-column: 1 / 4; grid-row: 2; margin: 4px 0 4px; }
  .dest-term { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .dest-term.static { min-height: 34px; }
  .plan-list .dest-limit { grid-row: 3; }
}
.plan-list .dest-card { scroll-margin-block: 20px 210px; }
.cart-help a { color: inherit; text-decoration: none; }
.cart-help a:hover, .cart-help a:focus-visible { color: var(--accent-text); text-decoration: underline; }

/* Stage 3: personalization — "continue" strip on the home page, guide for the visitor's phone */
.resume { display: flex; align-items: center; gap: 4px; max-width: var(--col, 600px); margin: 0 0 var(--s3); }
.resume[hidden] { display: none; }
.resume a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding: 8px 16px; border-radius: 999px; background: var(--sunset); color: var(--on-sunset, #14193a); font-weight: 600; font-size: 15px; text-decoration: none; }
.resume a:hover, .resume a:focus-visible { box-shadow: 0 6px 18px rgba(255, 138, 43, .45); }
.resume button { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.resume button:hover, .resume button:focus-visible { background: rgba(255, 255, 255, .3); }
.device-hint { margin: 0 0 var(--s4); padding: 10px 16px; border-radius: 14px; background: var(--bg-accent); color: var(--accent-text); font-size: 15px; font-weight: 600; }
.device-hint a { color: inherit; text-decoration: underline; margin-left: 6px; }
@media (max-width: 600px) { .resume a { padding: 7px 12px; font-size: 14px; } }

/* Stage 1.6: regional and world plans as a quiet line instead of tabs */
.scope-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; width: 100%; margin: 0 0 12px; font-size: 15px; }
.scope-line[hidden] { display: none; }
.scope-q { color: var(--muted); }
.scope-link { padding: 4px 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.scope-link small { color: var(--muted); font-weight: 500; }
.scope-link:hover, .scope-link:focus-visible { text-decoration-thickness: 2px; }

/* Owner request 07.10: calmer plans card — no term chips, price notice, eSIM note or country heading; a one-line «what it is enough for» in the cart.
   11.10: the three scenario buttons are back (they replace the traffic sentence of the lead). */
#dayChips, .plan-scope[data-scope="country"] { display: none !important; }
.cart-fit { flex: 0 0 100%; color: var(--muted); font-size: 14px; line-height: 1.35; }
@media (max-width: 600px) { .cart-fit { font-size: 12.5px; } }
#catalogNotice[hidden] { display: none; }

/* Owner request 07.10 (2): the «Едете в несколько стран?» line sits next to the kind badge in the hero; the plans card has no sort or price notices */
.dest-facts .scope-line { width: auto; margin: 0; }
.dest-facts .scope-line .scope-q, .dest-facts .scope-line small { color: rgba(255, 255, 255, .78); }
.dest-facts .scope-link { color: #ffc690; }
.plan-scope { margin-bottom: var(--s2); }
.trust-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .trust-two { grid-template-columns: minmax(0, 1fr); } }

/* 07.10 visual check: skip link for keyboard users (added by theme.js); consent buttons reach 44 px */
.skip-link { position: fixed; left: -9999px; top: 12px; z-index: 1000; padding: 12px 18px; border-radius: 999px; background: var(--sunset); color: var(--on-sunset); font-weight: 700; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.skip-link:focus, .skip-link:focus-visible { left: 12px; outline: 2px solid var(--on-sunset); outline-offset: 2px; }
main:focus { outline: none; }
/* Keyboard focus: a focused plan card must not stop under the sticky order bar */
html { scroll-padding-bottom: 168px; scroll-padding-top: 16px; }
@media (max-width: 640px) { html { scroll-padding-bottom: 290px; } }
/* 07.10 audit: country chips on the home hero and the "regional" link keep their look, their hit area reaches 44 px. */
@media (max-width: 900px), (pointer: coarse) {
  .quick-countries a { position: relative; }
  .quick-countries a::after { content: ""; position: absolute; inset: -6px -2px; }
  .scope-link { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* 07.10 audit: the floating Telegram button no longer covers the order bar on wide screens; on phones the bar drops the long description so it hides less of the list. */
@media (min-width: 721px) { .esim-page .cart { bottom: 76px; } }
@media (max-width: 720px) { .cart .cart-fit { display: none; } }
/* 07.10 legal pack: consent checkboxes (order window, login), footer document links, document pages (/legal/*). Colours come from the theme tokens, so both themes follow. */
.consent-checks { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.consent-check { display: flex; align-items: flex-start; gap: var(--s3); min-height: 44px; font-size: 14px; line-height: 1.45; color: var(--text); cursor: pointer; }
.consent-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
/* an unticked box after a click on the button: the box is outlined, the text keeps its colour */
.consent-check.missing { margin: 0 calc(-1 * var(--s2)); padding: var(--s2); border-radius: var(--r-sm); outline: 2px solid var(--err); outline-offset: -2px; }
.consent-check.missing input { outline: 2px solid var(--err); outline-offset: 1px; }
.consent-check a, .consent-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.footer-slim .fs-docs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.site-footer.footer-slim .fs-docs a { display: inline-block; padding: var(--s1) 0; font-size: 13px; }
.site-footer.footer-slim nav a[aria-current="page"] { color: #ffd9a8; text-decoration: underline; }
.legal-doc { padding-top: var(--s7); padding-bottom: var(--s5); max-width: 860px; }
.legal-doc h1 { margin: 0 0 var(--s4); font-size: 32px; line-height: 1.15; }
.legal-doc h2 { margin: var(--s6) 0 var(--s3); font-size: 22px; line-height: 1.25; scroll-margin-top: 72px; }
.legal-doc p, .legal-doc li { margin: 0 0 var(--s3); line-height: 1.6; overflow-wrap: anywhere; }
.legal-doc ul, .legal-doc ol { margin: 0 0 var(--s3); padding-left: var(--s5); }
.legal-doc li::marker { color: var(--accent); }
.legal-doc a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc blockquote { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-soft); }
.legal-doc blockquote p:last-child { margin-bottom: 0; }
.legal-doc code { padding: 1px 6px; border-radius: 6px; background: var(--bg-accent); font-family: var(--mono); font-size: .92em; }
.legal-table { margin: 0 0 var(--s4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.legal-table th, .legal-table td { padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.legal-table th { background: var(--bg-accent); }
@media (max-width: 720px) { .legal-doc { padding-top: var(--s6); } .legal-doc h1 { font-size: 26px; } .legal-doc h2 { font-size: 19px; } .legal-table { overflow: visible; }
  .legal-table table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-table tr { margin-bottom: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
  .legal-table td { border: 0; border-top: 1px solid var(--line); }
  .legal-table tr td:first-child { border-top: 0; background: var(--bg-accent); font-weight: 600; }
  .legal-table td:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
}

/* 10.10.2026: the cookie notice on a phone is a strip at the very bottom; the page and the sticky cart move up by its height (--consent-h from consent.js) */
@media (max-width: 640px) {
  .consent-bar { left: 0; right: 0; bottom: 0; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 14px 14px 0 0; font-size: 12px; line-height: 1.35; }
  .consent-actions button { padding: 6px 10px; }
  .consent-open body { padding-bottom: var(--consent-h, 100px); }
  .consent-open .cart { bottom: calc(var(--consent-h, 100px) + 8px); }
}
/* 10.10.2026: the Telegram button is a round icon and no longer covers card corners; the label opens on hover or keyboard focus and stays readable for screen readers */
.tg-float { width: 52px; height: 52px; padding: 0; justify-content: center; }
.tg-float span { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) and (min-width: 641px) {
  .tg-float:hover, .tg-float:focus-visible { width: auto; padding: 0 18px; }
  .tg-float:hover span, .tg-float:focus-visible span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* 10.10.2026 cabinet: one quiet delay note per screen, days left next to traffic, folded installation data, binding an order by number at the bottom, an arrow on the phone section row */
.account-page .data-delay, :root[data-theme="dark"] .account-page .data-delay { margin: var(--s2) 0 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.45; }
.traffic-hero b em { font-style: normal; font-size: .6em; font-weight: 700; color: var(--text); white-space: nowrap; }
.install-fold { margin-top: var(--s2); }
.install-fold > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
.install-fold > .esim-install { margin-top: var(--s2); }
.bind-order-row { margin: var(--s4) 0 0; text-align: center; }
.bind-order-row .text-link { min-height: 44px; font-size: 14px; font-weight: 500; }
.account-nav-wrap { position: relative; }
.account-nav-more { display: none; }
@media (max-width: 760px) {
  .account-nav-wrap.more-right .account-nav-more { position: absolute; top: 0; right: calc(-1 * var(--s2)); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--text); box-shadow: var(--lift, 0 4px 12px rgba(9, 21, 61, .16)); cursor: pointer; }
}
.why-yatumo { margin-top: var(--s6); }
.why-yatumo h2 { margin: 0; }
.why-yatumo .trust-strip { margin-top: var(--s3); }
.install-fold > summary { list-style: none; gap: var(--s2); }
.install-fold > summary::-webkit-details-marker { display: none; }
.install-fold > summary::after { content: ""; width: 8px; height: 8px; margin: 0 4px 4px auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.install-fold[open] > summary::after { margin-bottom: 0; margin-top: 4px; transform: rotate(-135deg); }

/* YATUMO motion prototype (11.10.2026). Goes at the end of site.css once approved.
   Every rule hangs on html.motion-ok, which motion.js sets only when the visitor has not asked for less motion:
   without JS, or with prefers-reduced-motion, the page keeps its current static look.
   Only transform and opacity move, except the sliding pill (width/height of an absolutely positioned element, no layout effect). */

/* ---------- 1. «Как это работает»: route line, numbers light up one by one, signal bars in step 3 ---------- */
.how-cards li .sig { position: absolute; right: 18px; top: 14px; display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.how-cards li .sig b { display: block; width: 5px; border-radius: 2px; background: var(--accent); }
.how-cards li .sig b:nth-child(1) { height: 9px; }
.how-cards li .sig b:nth-child(2) { height: 14px; }
.how-cards li .sig b:nth-child(3) { height: 19px; }
.how-cards li .sig b:nth-child(4) { height: 24px; }
.how-cards li:has(.sig)::after { content: none; }

@media (min-width: 1001px) {
  .motion-ok .how-cards::before, .motion-ok .how-cards::after {
    content: ""; position: absolute; left: 46px; top: 53px; height: 2px; width: calc((200% - 64px) / 3 + 32px); border-radius: 2px; z-index: 1; pointer-events: none;
  }
  .how-cards { position: relative; }
  .motion-ok .how-cards::before { background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 11px); }
  .motion-ok .how-cards::after { background: var(--sunset); transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.45, .05, .25, 1) .1s; }
  .motion-ok .how-cards.in-view::after { transform: scaleX(1); }
}
.motion-ok .how-cards li::before { position: relative; z-index: 2; opacity: .3; transform: scale(.8); transition: opacity .3s ease-out, transform .45s cubic-bezier(.22, 1, .36, 1); }
.motion-ok .how-cards.in-view li::before { opacity: 1; transform: none; }
.motion-ok .how-cards.in-view li:nth-child(1)::before { transition-delay: .1s; }
.motion-ok .how-cards.in-view li:nth-child(2)::before { transition-delay: .55s; }
.motion-ok .how-cards.in-view li:nth-child(3)::before { transition-delay: 1s; }
.motion-ok .how-cards li .sig b { opacity: .22; transform: scaleY(.45); transform-origin: bottom; transition: opacity .25s ease-out, transform .3s cubic-bezier(.22, 1, .36, 1); }
.motion-ok .how-cards.in-view li .sig b { opacity: 1; transform: none; }
.motion-ok .how-cards.in-view li .sig b:nth-child(1) { transition-delay: 1.15s; }
.motion-ok .how-cards.in-view li .sig b:nth-child(2) { transition-delay: 1.3s; }
.motion-ok .how-cards.in-view li .sig b:nth-child(3) { transition-delay: 1.45s; }
.motion-ok .how-cards.in-view li .sig b:nth-child(4) { transition-delay: 1.6s; }

/* ---------- 3. Cart: slides up when the first plan is chosen, the button shines once ---------- */
.motion-ok .cart:not([hidden]) { animation: cart-in .26s cubic-bezier(.2, .8, .2, 1) both; }
.motion-ok .cart .primary { position: relative; overflow: hidden; }
.motion-ok .cart:not([hidden]) .primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  transform: translateX(-120%); animation: btn-shine .8s ease-out .4s 1 forwards;
}
@keyframes cart-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes btn-shine { to { transform: translateX(120%); } }

/* ---------- 4. Chips and switches: one pill slides to the chosen item ---------- */
.motion-ok .has-slide { position: relative; }
.motion-ok .has-slide > button { position: relative; z-index: 1; transition: color .2s ease-out, border-color .2s ease-out; }
/* the item drops its own fill only while the pill is there to replace it (a group that was hidden at load has no pill until it is shown) */
.motion-ok .has-slide > .slide-ind:not([hidden]) ~ button.active, .motion-ok .has-slide > .slide-ind:not([hidden]) ~ button[aria-pressed="true"] { background: transparent; box-shadow: none; border-color: transparent; }
.motion-ok .slide-ind {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--sunset); box-shadow: var(--glow); pointer-events: none;
  transition: transform .26s cubic-bezier(.3, .7, .2, 1), width .26s cubic-bezier(.3, .7, .2, 1), height .26s cubic-bezier(.3, .7, .2, 1);
}
.motion-ok .slide-ind.no-anim { transition: none; }
.motion-ok .slide-ind[hidden] { display: none; }

/* ---------- 7. Loading placeholders instead of an empty block, soft fade-in of the real tiles ---------- */
:root { --skel-shine: rgba(255, 255, 255, .6); }
:root[data-theme="dark"] { --skel-shine: rgba(255, 255, 255, .07); }
.skel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft); }
.skel.skel-tile { min-height: 150px; }
@media (max-width: 760px) { .skel.skel-tile { min-height: 118px; } }
.skel.skel-row { min-height: 64px; }
.skel.skel-line { min-height: 18px; border-radius: 9px; }
.motion-ok .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--skel-shine) 50%, transparent 70%); transform: translateX(-100%); animation: skel-sweep 1.4s ease-in-out infinite; }
@keyframes skel-sweep { to { transform: translateX(100%); } }

.motion-ok .countries.first-paint > .country { animation: tile-in .36s cubic-bezier(.2, .8, .2, 1) both; }
.motion-ok .countries.first-paint > .country:nth-child(2) { animation-delay: 35ms; }
.motion-ok .countries.first-paint > .country:nth-child(3) { animation-delay: 70ms; }
.motion-ok .countries.first-paint > .country:nth-child(4) { animation-delay: 105ms; }
.motion-ok .countries.first-paint > .country:nth-child(5) { animation-delay: 140ms; }
.motion-ok .countries.first-paint > .country:nth-child(6) { animation-delay: 175ms; }
.motion-ok .countries.first-paint > .country:nth-child(7) { animation-delay: 210ms; }
.motion-ok .countries.first-paint > .country:nth-child(8) { animation-delay: 245ms; }
.motion-ok .countries.first-paint > .country:nth-child(n+9) { animation-delay: 280ms; }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.motion-ok .countries:has(> .skel) > .catalog-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.motion-ok) .skel { display: none; }

/* ---------- 11.10.2026 conversion pack: country page ---------- */
/* Scenario buttons: what the trip needs, with the volume they recommend */
.scenarios button small { color: var(--accent-text); font-weight: 600; }
.scenarios button.active small { color: var(--accent-text); }
@media (max-width: 720px) {
  .scenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .scenarios button { align-content: start; padding: 8px 10px; border-radius: 14px; }
  .scenarios button b { font-size: 13.5px; line-height: 1.25; }
  .scenarios button small { display: block; font-size: 12px; line-height: 1.25; }
}
/* Scenario hint, the «*» after the recommended volume and its footnote at the bottom of the page (owner, 11.10.2026) */
.scenarios button .scenario-hint { color: var(--muted); font-size: 13px; line-height: 1.3; }
.footnote-mark { margin-left: 1px; font-size: .8em; line-height: 0; vertical-align: super; }
.page-footnote { margin-top: var(--s6); margin-bottom: var(--s5); color: var(--muted); font-size: 13px; line-height: 1.45; }
.page-footnote[hidden] { display: none; }
.page-footnote > span { color: var(--accent-text); font-weight: 700; }
@media (max-width: 720px) { .scenarios button .scenario-hint { font-size: 11.5px; line-height: 1.25; } .page-footnote { font-size: 12px; } }

/* Price per GB (volume plans) or per day (unlimited) under the row price */
.dest-amount { font-variant-numeric: lining-nums tabular-nums; }
.plan-list .dest-per { display: block; margin-top: 1px; font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.25; color: var(--muted); }
@media (max-width: 720px) { .plan-list .dest-per { font-size: 11px; white-space: nowrap; } }

/* Order bar as a boarding pass: stub with the destination code, a perforation with two notches, then the plan and the price */
:root { --ticket-hole: #fff; }
:root[data-theme="dark"] { --ticket-hole: #131a31; }
.cart { --stub-w: 74px; grid-template-columns: var(--stub-w) minmax(0, 1fr) auto; column-gap: 18px; padding-left: 16px; }
.cart-stub { display: grid; justify-items: center; gap: 1px; min-width: 0; text-align: center; }
.cart-stub small { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cart-stub b { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--text); }
.cart-stub svg { flex: 0 0 auto; color: var(--accent-text); transform: rotate(90deg); }
.cart-perf { position: absolute; top: -2px; bottom: -2px; left: calc(16px + var(--stub-w) + 9px - 10px); width: 20px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 5px, transparent 5px 10px) center 13px / 2px calc(100% - 26px) no-repeat; }
.cart-perf::before, .cart-perf::after { content: ""; position: absolute; left: 0; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #ffb930; border-radius: 50%; background: var(--ticket-hole); }
.cart-perf::before { top: -10px; clip-path: inset(50% -2px -2px -2px); }
.cart-perf::after { bottom: -10px; border-color: #ffa22e; clip-path: inset(-2px -2px 50% -2px); }
.cart-per { color: var(--muted); font-size: 14px; white-space: nowrap; }
.cart-price { font-variant-numeric: lining-nums tabular-nums; }
/* a new plan: the stub tilts as if torn off and the plane hops forward */
.motion-ok .cart.punch .cart-stub { animation: stub-punch .5s cubic-bezier(.2, .8, .2, 1); }
.motion-ok .cart.punch .cart-stub svg { animation: plane-hop .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes stub-punch { 30% { transform: translateY(-3px) rotate(-7deg); } 100% { transform: none; } }
@keyframes plane-hop { 0% { transform: rotate(90deg); } 35% { transform: translateX(6px) rotate(90deg); opacity: .4; } 36% { transform: translateX(-6px) rotate(90deg); } 100% { transform: rotate(90deg); opacity: 1; } }
/* phone: one row about 64 px high: stub, price over the plan, button; the help line and the country name go away */
@media (max-width: 720px) {
  .cart { --stub-w: 42px; grid-template-columns: var(--stub-w) minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 8px 8px 10px; }
  .cart-perf { left: calc(10px + var(--stub-w) + 6px - 10px); }
  .cart .cart-help, .cart-stub small, .cart-dest, .cart-per { display: none; }
  .cart-stub b { flex-direction: column; gap: 0; font-size: 14px; }
  .cart-sum { display: grid; gap: 0; }
  .cart-sum .cart-price { order: -1; font-size: 19px; line-height: 1.2; }
  .cart-sum #cartTitle { overflow: hidden; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
  .cart .primary { min-height: 44px; }
}
@media (max-width: 640px) { html { scroll-padding-bottom: 200px; } }

/* «All countries» tile closes the last row of a country grid: it spans the free columns (4 / 3 / 2 per row) */
.countries > .country.all-tile { align-items: center; justify-content: space-between; background: var(--night); color: #fff; }
.countries > .country.all-tile::after { display: none; }
.all-tile .country-name { font-family: var(--display); font-size: 19px; font-weight: 600; }
.all-tile .country-name small { margin-top: 2px; font-family: var(--font); }
.all-arrow { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sunset); color: var(--on-sunset); font-size: 22px; font-weight: 700; box-shadow: var(--glow); transition: transform .2s ease-out; }
.all-tile:hover .all-arrow, .all-tile:focus-visible .all-arrow { transform: translateX(4px); }
.countries > .all-tile:nth-child(4n+1) { grid-column: span 4; }
.countries > .all-tile:nth-child(4n+2) { grid-column: span 3; }
.countries > .all-tile:nth-child(4n+3) { grid-column: span 2; }
@media (max-width: 1000px) {
  .countries > .all-tile:nth-child(n) { grid-column: auto; }
  .countries > .all-tile:nth-child(3n+1) { grid-column: span 3; }
  .countries > .all-tile:nth-child(3n+2) { grid-column: span 2; }
}
@media (max-width: 760px) {
  .countries > .all-tile:nth-child(n) { grid-column: auto; }
  .countries > .all-tile:nth-child(2n+1) { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) { .all-arrow { transition: none; } }

/* «Что вы получите» fills the right half of the plan details */
.spec-side { display: grid; gap: var(--s4); }
.spec-get { padding: var(--s4); border-radius: var(--r); background: var(--bg-soft); }
.spec-get h3 { margin: 0 0 var(--s3); }
.spec-get ul { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.spec-get li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
.spec-get li::before { content: "✓"; grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sunset); color: var(--on-sunset); font-size: 14px; font-weight: 800; }
.spec-get b { font-size: 15px; }
.spec-get span { color: var(--muted); font-size: 14px; line-height: 1.4; }

/* ---------- 11.10.2026 conversion pack: cabinet ---------- */
/* «Подключения» head: binding an old order sits next to «Все подключения» */
.panel-head-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s4); }
@media (max-width: 640px) { .client-panel-head { flex-wrap: wrap; } .panel-head-links { justify-content: flex-start; gap: 0 var(--s3); } .panel-head-links .text-link { font-size: 14px; } }

/* Line card as a boarding pass: stub with the destination code, perforation with two notches under the head */
.ticket-card .client-order-top { justify-content: flex-start; }
.ticket-card .order-top-main { flex: 1 1 auto; min-width: 0; }
.order-stub { display: grid; flex: 0 0 auto; justify-items: center; align-content: center; gap: 2px; min-width: 64px; padding: 6px 14px 6px 0; border-right: 2px dashed var(--line-strong); text-align: center; }
.client-order-top .order-stub small { font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.order-stub b { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--text); }
.order-stub svg { color: var(--accent-text); transform: rotate(90deg); }
.order-perf { position: relative; display: block; height: 20px; margin: var(--s3) calc(-1 * var(--s5)) 0;
  background: repeating-linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 12px) center / calc(100% - 28px) 2px no-repeat; }
.order-perf::before, .order-perf::after { content: ""; position: absolute; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--page); box-shadow: inset 0 2px 6px rgba(28, 43, 92, .12); }
.order-perf::before { left: -10px; clip-path: inset(-2px -2px -2px 50%); }
.order-perf::after { right: -10px; clip-path: inset(-2px 50% -2px -2px); }
.ticket-card .order-perf + * { margin-top: var(--s2); }
@media (max-width: 760px) {
  .order-perf { margin-left: calc(-1 * var(--s4)); margin-right: calc(-1 * var(--s4)); }
  .order-stub { min-width: 50px; padding-right: 10px; }
  .order-stub b { flex-direction: column; gap: 0; font-size: 16px; }
  .ticket-card .client-order-top h2 { font-size: 19px; }
}

/* Remaining traffic: a ring next to the number */
.traffic-ring { position: relative; display: grid; flex: 0 0 auto; place-content: center; justify-items: center; width: 92px; height: 92px; text-align: center; }
.traffic-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.traffic-ring circle { fill: none; stroke-width: 4; }
.traffic-ring .ring-track { stroke: #e6eaf2; }
.traffic-ring .ring-fill { stroke: #ff8a2b; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.traffic-ring b { position: relative; font-size: 18px; line-height: 1.1; }
.traffic-ring span { position: relative; font-size: 11.5px; }
:root[data-theme="dark"] .traffic-ring .ring-track { stroke: #303a59; }
.traffic-hero { align-items: center; margin-bottom: var(--s3); }
@media (max-width: 760px) { .traffic-ring { width: 80px; height: 80px; } .traffic-ring b { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .traffic-ring .ring-fill { transition: none; } }

/* Request waiting for payment: where the order is now */
.order-steps { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: var(--s4) 0 var(--s3); padding: 0; list-style: none; counter-reset: step; }
.order-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 2px; color: var(--muted); font-size: 13px; line-height: 1.25; text-align: center; counter-increment: step; }
.order-steps li::before { content: counter(step); position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--bg); font-size: 13px; font-weight: 700; }
.order-steps li::after { content: ""; position: absolute; top: 13px; right: calc(50% + 14px); left: calc(-50% + 14px); height: 2px; background: var(--line-strong); }
.order-steps li:first-child::after { display: none; }
.order-steps li.done::before { content: "✓"; border-color: transparent; background: var(--sunset); color: var(--on-sunset); }
.order-steps li.current::after { background: #ff8a2b; }
.order-steps li.current::before { border-color: #ff8a2b; color: var(--accent-text); box-shadow: 0 0 0 4px rgba(255, 138, 43, .18); }
.order-steps li.current span { color: var(--text); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .order-steps li.current::before { animation: step-pulse 1.8s ease-in-out 1; } }
@keyframes step-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 138, 43, .08); } }
@media (max-width: 640px) { .order-steps li { font-size: 11.5px; } }

/* Overview: install a line that has not connected yet */
/* the install row goes under the whole line (flag, text, «Подробнее»), lined up with the text: the button never squeezes into the middle column */
.compact-connection.has-install { flex-wrap: wrap; }
.compact-connection.has-install > div { flex-basis: 0; }
.compact-connection .install-now { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: calc(-1 * var(--s2)) 0 0; padding-left: calc(28px + var(--s3)); }
.compact-connection .install-now .primary { min-height: 40px; padding: 0 18px; }
.compact-connection .install-now small { font-size: 13px; }

/* «Едете дальше? Региональные пакеты» instead of a plain «Купить eSIM» on a working line */
.go-regional { flex-wrap: wrap; gap: 0 .3em; }
.go-regional > * { white-space: nowrap; }
.go-regional small { font-size: inherit; font-weight: 500; opacity: .75; }

/* Overview: promo code for friends while a line is working */
.account-dashboard-grid > [hidden] + .quick-support { grid-column: 1 / -1; }
.promo-card h2 { margin-top: 0; }
.promo-card-code { justify-self: start; display: inline-block; margin: 0 0 var(--s3); padding: 6px 14px; border: 2px dashed #ffb930; border-radius: 12px; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: .04em; color: var(--accent-text); }
/* the counted number sits in a span inside <b>; the muted 14px rule for the caption spans must not shrink it */
.traffic-hero > div:first-child b span[data-count-mb] { color: inherit; font-size: inherit; }

/* ---------- 12.10.2026 motion pack 2: store, country page, cabinet ----------
   Same rules as above: html.motion-ok (motion.js, not set under prefers-reduced-motion), only transform/opacity, nothing on prices, sums, statuses or QR. */

/* 1. hero: a warm glow drifts slowly behind the sky; it pauses when the hero is off screen */
.hero-aurora { position: absolute; top: -18%; right: -12%; z-index: -1; width: 62%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 160, 80, .26), rgba(255, 120, 80, .1) 55%, transparent 100%); }
@media (max-width: 760px) { .hero-aurora { top: -10%; right: -40%; width: 120%; height: 60%; } }
.motion-ok .hero-aurora { animation: aurora-drift 22s ease-in-out infinite alternate; will-change: transform; }
.motion-ok .hero.is-away .hero-aurora { animation-play-state: paused; }
@keyframes aurora-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 7%, 0) scale(1.12); } }

/* 2. country tiles: a tab or SIM switch brings the new tiles in one by one; the flag tips on hover */
.motion-ok .countries.swap > .country { animation: tile-in .3s cubic-bezier(.2, .8, .2, 1) backwards; }
.motion-ok .countries.swap > .country:nth-child(2) { animation-delay: 40ms; }
.motion-ok .countries.swap > .country:nth-child(3) { animation-delay: 80ms; }
.motion-ok .countries.swap > .country:nth-child(4) { animation-delay: 120ms; }
.motion-ok .countries.swap > .country:nth-child(5) { animation-delay: 160ms; }
.motion-ok .countries.swap > .country:nth-child(6) { animation-delay: 200ms; }
.motion-ok .countries.swap > .country:nth-child(7) { animation-delay: 240ms; }
.motion-ok .countries.swap > .country:nth-child(n+8) { animation-delay: 280ms; }
.motion-ok .country .flag { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.motion-ok .country:hover .flag, .motion-ok .country:focus-visible .flag { transform: rotate(-6deg) scale(1.12); }

/* 3. search: the matched letters are marked; an empty result shows a plane on its route */
.country-name mark.hit { padding: 0 1px; border-radius: 3px; background: var(--sunset); color: var(--on-sunset); text-shadow: none; }
.empty-scene { position: relative; display: block; height: 34px; max-width: 260px; margin: var(--s4) auto 0; overflow: hidden; color: var(--accent-text); }
.empty-scene[hidden] { display: none; }
.empty-scene::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 2px; margin-top: -1px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); }
.empty-scene .plane { position: absolute; top: 50%; left: calc(50% - 11px); display: block; width: 22px; height: 22px; margin-top: -11px; }
.empty-scene .plane svg { display: block; width: 22px; height: 22px; transform: rotate(90deg); }
.client-empty .empty-scene { margin: 0 auto var(--s3); }
.motion-ok .empty-scene .plane { animation: plane-lane 6s ease-in-out infinite; }
@keyframes plane-lane { 0% { transform: translateX(-118px); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateX(118px); opacity: 0; } }

/* 4. trip scenarios: the pill slides between the cards, a bar shows how much of the trip the plan covers */
.motion-ok .scenarios .slide-ind { border-radius: var(--r-sm); }
.scenario-meter { display: block; height: 6px; margin: 2px 0 var(--s3); overflow: hidden; border-radius: 999px; background: var(--line); }
.scenario-meter[hidden] { display: none; }
.scenario-meter i { display: block; height: 100%; border-radius: inherit; background: var(--sunset); transform-origin: left center; transform: scaleX(0); }
.motion-ok .scenario-meter i { transition: transform .5s cubic-bezier(.3, .7, .2, 1); }

/* 5. «Что вы получите»: the circle pops, the tick is wiped in, one line after another */
.motion-ok .spec-get li { position: relative; }
.motion-ok .spec-get li::before { content: ""; }
.motion-ok .spec-get li::after { content: "✓"; position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; color: var(--on-sunset); font-size: 14px; font-weight: 800; }
.motion-ok .spec-get ul li::before { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.motion-ok .spec-get ul li::after { transition: clip-path .3s ease-out; }
.motion-ok .spec-get ul:not(.in-view) li::before { transform: scale(0); }
.motion-ok .spec-get ul:not(.in-view) li::after { clip-path: inset(0 100% 0 0); }
.motion-ok .spec-get ul li:nth-child(2)::before { transition-delay: .12s; } .motion-ok .spec-get ul li:nth-child(2)::after { transition-delay: .3s; }
.motion-ok .spec-get ul li:nth-child(3)::before { transition-delay: .24s; } .motion-ok .spec-get ul li:nth-child(3)::after { transition-delay: .42s; }
.motion-ok .spec-get ul li:nth-child(4)::before { transition-delay: .36s; } .motion-ok .spec-get ul li:nth-child(4)::after { transition-delay: .54s; }

/* 6. roaming comparison: the visitor types the operator's price, two bars grow from zero */
.roam .roam-field { max-width: 320px; margin-top: var(--s3); }
.roam-bars { display: grid; gap: var(--s3); max-width: 640px; margin-top: var(--s4); }
.roam-bars[hidden] { display: none; }
.roam-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; align-items: center; gap: var(--s3); font-size: 15px; }
.roam-row b { text-align: right; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.roam-track { display: block; height: 14px; overflow: hidden; border-radius: 999px; background: var(--bg-soft); }
.roam-track i { display: block; height: 100%; border-radius: inherit; background: #6f7a9c; transform-origin: left center; transform: scaleX(0); }
.roam-yt .roam-track i { background: var(--sunset); }
:root[data-theme="dark"] .roam-track i { background: #9aa5c7; }
:root[data-theme="dark"] .roam-yt .roam-track i { background: var(--sunset); }
.motion-ok .roam-track i { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.roam-sum { margin: var(--s1) 0 0; font-weight: 600; }
@media (max-width: 640px) { .roam-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } .roam-track { grid-column: 1 / -1; grid-row: 2; } }

/* 7. order dialog: a quick fade (opacity only; checked in Edge at 1440 px because an earlier dialog animation got stuck there) */
.motion-ok dialog#buy[open] { animation: dlg-in .16s ease-out; }
@keyframes dlg-in { from { opacity: 0; } }

/* 8. one-time code: a typed digit clicks into the cell, an accepted code lights the cells one after another */
.motion-ok .otp-cell.pop { animation: otp-pop .16s ease-out; }
@keyframes otp-pop { from { transform: scale(1.12); } }
.otp.otp-ok .otp-cell { border-color: #2f9e63; background: rgba(47, 158, 99, .12); }
.motion-ok .otp.otp-ok .otp-cell { animation: otp-ok .36s ease-out backwards; }
@keyframes otp-ok { from { border-color: var(--line-strong); background: var(--bg-soft); transform: scale(1); } 50% { transform: scale(1.08); } }
.motion-ok .otp.otp-ok .otp-cell:nth-child(2) { animation-delay: 50ms; } .motion-ok .otp.otp-ok .otp-cell:nth-child(3) { animation-delay: 100ms; }
.motion-ok .otp.otp-ok .otp-cell:nth-child(4) { animation-delay: 150ms; } .motion-ok .otp.otp-ok .otp-cell:nth-child(5) { animation-delay: 200ms; }
.motion-ok .otp.otp-ok .otp-cell:nth-child(6) { animation-delay: 250ms; }
:root[data-theme="dark"] .otp.otp-ok .otp-cell { border-color: #4cc88a; background: rgba(76, 200, 138, .14); }
/* code step (21.10.2026, from the owner's OTP reference): lock badge, red digits on a wrong code, "checking" breathing, spinner and green button */
.otp-head { display: flex; align-items: center; gap: var(--s3); }
.otp-lock { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--on-sunset); background: linear-gradient(135deg, #ffc233, #ff8a2b 55%, #ff5a3c); box-shadow: 0 6px 18px rgba(255, 106, 43, .28); }
.otp-title { margin: 0; font: 600 20px/1.2 var(--display); letter-spacing: -.01em; }
.otp-head .muted { margin: 4px 0 0; overflow-wrap: anywhere; }
.otp.otp-error .otp-cell { color: var(--err); }
.otp.otp-verifying .otp-cell { border-color: var(--line-strong); background: var(--bg-soft); }
.motion-ok .otp.otp-verifying .otp-cell { animation: otp-wait .9s ease-in-out infinite; }
.motion-ok .otp.otp-verifying .otp-cell:nth-child(2) { animation-delay: 60ms; } .motion-ok .otp.otp-verifying .otp-cell:nth-child(3) { animation-delay: 120ms; }
.motion-ok .otp.otp-verifying .otp-cell:nth-child(4) { animation-delay: 180ms; } .motion-ok .otp.otp-verifying .otp-cell:nth-child(5) { animation-delay: 240ms; }
.motion-ok .otp.otp-verifying .otp-cell:nth-child(6) { animation-delay: 300ms; }
@keyframes otp-wait { 50% { opacity: .5; } }
.primary.is-ok::before { content: ""; display: inline-block; flex: none; margin-right: 10px; vertical-align: -3px; }
.primary.is-ok::before { width: 13px; height: 7px; margin-bottom: 3px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); vertical-align: middle; }
.primary.is-ok:disabled { opacity: 1; cursor: default; }
.primary.is-ok, .primary.is-ok:hover { background: #4cc88a; box-shadow: none; transform: none; color: var(--on-sunset); }
@keyframes otp-spin { to { transform: rotate(360deg); } }

/* 10. theme switch: the new theme grows as a circle from the switch (theme.js animates ::view-transition-new(root)) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* 12. cabinet: a section opens with a short slide */
.motion-ok .account-view:not([hidden]) { animation: view-in .2s ease-out backwards; }
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } }

/* 13. «Установить в один тап»: a bar runs on the button, the line under it says what is happening */
.motion-ok .install-now.is-opening .primary { position: relative; overflow: hidden; }
.motion-ok .install-now.is-opening .primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(255, 255, 255, .35); transform-origin: left center; animation: install-run 1.3s ease-out forwards; }
@keyframes install-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.motion-ok .install-now.is-opening small { animation: step-text .3s ease-out backwards; }
@keyframes step-text { from { opacity: 0; transform: translateY(4px); } }

/* 14. a request that was paid: the card gets a ring and a few sparks once */
.motion-ok .just-up { position: relative; }
.motion-ok .just-up::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 2px solid #ff8a2b; border-radius: inherit; pointer-events: none; animation: up-ring 1.4s ease-out 1 both; }
.motion-ok .just-up::before { content: ""; position: absolute; top: 14px; right: 22px; z-index: 1; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; background: #ffc233;
  box-shadow: 16px 0 #ff8a2b, -16px 0 #ff5a3c, 0 16px #ffc233, 0 -16px #ff8a2b, 11px 11px #ff5a3c, -11px -11px #ffc233; animation: up-spark .9s ease-out 1 both; }
@keyframes up-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.03); } }
@keyframes up-spark { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }

/* 15. a copied code or link: the button shows a tick, the toast slides in */
.copied::before { content: "✓"; margin-right: .4em; }
.motion-ok .copied { animation: copied-pop .3s ease-out; }
@keyframes copied-pop { 40% { transform: scale(1.06); } }
.motion-ok .client-toast:not([hidden]) { animation: toast-in .24s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }

/* ===== Pack 3 (12.10.2026) ===== */
/* P3-1. cookie notice: slides up after the first screen has been seen, slides down on the choice; a phone gets a tighter strip */
.motion-ok .consent-bar { animation: consent-in .32s cubic-bezier(.2, .8, .2, 1) backwards; transition: transform .24s ease-in, opacity .24s ease-in; }
.consent-bar.is-leaving { transform: translateY(110%); opacity: 0; pointer-events: none; }
@keyframes consent-in { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 640px) {
  .consent-bar { gap: 4px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); font-size: 11.5px; line-height: 1.3; }
  .consent-actions button { min-height: 44px; padding: 0 10px; font-size: 13px; }
}
/* P3-2. hero on a phone: the heading rises into the faded lower part of the photo instead of starting 400 px down */
@media (max-width: 600px) { .hero-inner { padding-top: calc(var(--photo-h) - 150px); padding-bottom: 72px; } }
/* P3-3 (S11). login: a press on a pale button shakes the consent box and says what is missing; the locked buttons let the press through to the page */
.login-locked #emailForm button:disabled, .login-locked #telegramLogin:disabled, .login-locked #yandexLogin:disabled { pointer-events: none; }
.consent-check.nudge { animation: otp-shake .36s both; }
.consent-hint { margin: 0; min-height: 0; font-size: 13px; line-height: 1.4; color: var(--err); }
.consent-hint:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .consent-check.nudge { animation: none; } }

/* ======================================================================================================================
   Pack 3b (14.10.2026): S1 tile → country morph, S2 FAQ accordion, S3 compare ticks, S4 world-map tile, S5 plane on scroll,
   S7 top progress, S8 skeletons, S9 focus zoom, S10 404 plane. transform/opacity only (offset-distance and block-size are the named
   exceptions: a small SVG plane and the open height of one FAQ answer); all of it is off under prefers-reduced-motion.
   ====================================================================================================================== */

/* S1. cross-document view transition: the photo and flag of the pressed tile grow into the country page header (nav-morph.js names the tile).
   The opt-in itself (@view-transition) lives in vt.css, linked only by the two pages that take part (index, esim): with it on every page a script
   redirect during load (account → login) aborted the transition (InvalidStateError in Chrome, a crashed tab in WebKit). */
@media (prefers-reduced-motion: no-preference) {
  .stage-photo { view-transition-name: dest-photo; }
  .dest-flag { view-transition-name: dest-flag; }
  ::view-transition-group(dest-photo), ::view-transition-group(dest-flag) { animation-duration: .4s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  ::view-transition-old(dest-photo), ::view-transition-new(dest-photo) { height: 100%; object-fit: cover; }
  ::view-transition-new(dest-photo) { filter: brightness(.5); }   /* the page photo sits under a dark scrim; the snapshot has none */
}

/* S2. FAQ: own chevron that turns, the answer opens and closes smoothly where ::details-content exists (Chrome/Edge 131+) */
.faq-list details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); list-style: none; }
.faq-list details summary::-webkit-details-marker { display: none; }
.faq-list details summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: translateY(-2px) rotate(45deg); }
.faq-list details[open] summary::after { transform: translateY(2px) rotate(225deg); }
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq-list details summary::after { transition: transform .2s ease-out; }
  .faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size .26s ease-out, content-visibility .26s allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; }
}
.faq-list .faq-loading { margin: 0; color: var(--muted); }

/* S3. comparison: a sunset tick at the end of every cell of the «Туристическая eSIM» column; with motion they pop in row by row */
.compare td:nth-child(2) { position: relative; padding-right: 46px; }
.compare td:nth-child(2)::after { content: "✓"; position: absolute; right: 14px; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--sunset); color: var(--on-sunset); font-size: 12px; font-weight: 800; line-height: 1; }
.motion-ok .compare td:nth-child(2)::after { transform: scale(0); opacity: 0; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .2s ease-out; }
.motion-ok .compare.in-view td:nth-child(2)::after { transform: none; opacity: 1; }
.motion-ok .compare.in-view tbody tr:nth-child(2) td:nth-child(2)::after { transition-delay: 60ms; }
.motion-ok .compare.in-view tbody tr:nth-child(3) td:nth-child(2)::after { transition-delay: 120ms; }
.motion-ok .compare.in-view tbody tr:nth-child(4) td:nth-child(2)::after { transition-delay: 180ms; }

/* S4. «Все страны»: dotted world map behind the tile, a route line, a plane that flies on hover (once on a phone, motion.js adds .flown) */
.all-tile .world-map { position: absolute; top: 0; right: -6px; z-index: -2; height: 100%; width: auto; aspect-ratio: 360 / 135; overflow: visible; pointer-events: none; }
.all-tile .world-dots { fill: none; stroke: #8fb0ff; stroke-opacity: .4; stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: 0 5; }
.all-tile .world-route { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 3 4; }
.all-tile .world-stop { fill: var(--gold); }
.all-tile .world-plane { fill: #fff; offset-path: path("M207 24Q262 6 285 66"); offset-rotate: auto; offset-distance: 0%; }
.countries > .country.all-tile::after { display: block; z-index: -1; background: linear-gradient(90deg, rgba(4, 10, 43, .94) 0%, rgba(4, 10, 43, .6) 34%, rgba(4, 10, 43, 0) 64%); }
@keyframes world-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .all-tile:hover .world-plane, .all-tile:focus-visible .world-plane, .all-tile.flown .world-plane { animation: world-fly 1.5s cubic-bezier(.45, .05, .25, 1) both; }
}

/* S5. «Как это работает»: the plane and the sunset line follow the scroll where scroll-driven animations exist; elsewhere the time-based reveal above stays */
.how-plane { display: none; }
@media (min-width: 1001px) {
  @supports (animation-timeline: view()) {
    .how-cards { view-timeline: --how block; }
    .motion-ok .how-cards::after { transition: none; transform: scaleX(0); animation: how-fill linear both; animation-timeline: --how; animation-range: entry 25% cover 45%; }
    .motion-ok .how-plane { display: block; position: absolute; left: 46px; top: 43px; z-index: 3; width: calc((200% - 64px) / 3 + 32px); height: 22px; pointer-events: none; animation: how-fly linear both; animation-timeline: --how; animation-range: entry 25% cover 45%; }
    .how-plane svg { position: absolute; left: -11px; top: 0; width: 22px; height: 22px; fill: var(--accent-text); }
    @keyframes how-fill { to { transform: scaleX(1); } }
    @keyframes how-fly { 0% { opacity: 0; } 6% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
  }
}

/* S7. a 2 px sunset strip at the top while the catalog loads or a page opens (motion.js) */
.top-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 2px; background: var(--sunset); transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none; }
.top-progress.run { opacity: 1; animation: top-run 2.4s cubic-bezier(.1, .6, .2, 1) forwards; }
.top-progress.finish { opacity: 0; transform: scaleX(1); transition: transform .2s ease-out, opacity .3s ease-out .2s; }
@keyframes top-run { to { transform: scaleX(.85); } }

/* S8. placeholders for the plan list and the FAQ */
.skel.skel-plan, .skel.skel-faq { display: block; }
.skel.skel-plan { min-height: 180px; border-radius: 22px; }
.skel.skel-faq { min-height: 56px; border-radius: var(--r-sm); }
@media (max-width: 760px) { .skel.skel-plan { min-height: 92px; } }
.motion-ok .faq-list:has(> .skel) > .faq-loading, .motion-ok .plan-list:has(> .skel) > .catalog-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.motion-ok body.plans-loading .plans-card #planGrid { visibility: visible; }

/* S9. the tile photo zooms on keyboard focus too */
.country:focus-visible .country-photo { transform: scale(1.06); }

/* S10. 404: a plane that has lost its route */
.lost-route { display: block; width: min(300px, 78%); height: auto; margin: 0 auto var(--s4); overflow: visible; }
.lost-route .lost-trail { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 7; }
.lost-route .lost-plane { fill: var(--accent-text); offset-path: path("M16 70C52 70 66 20 112 24C158 28 160 70 128 66C96 62 108 12 160 16C192 18 204 40 208 56"); offset-rotate: auto; offset-distance: 0%; }
@keyframes lost-loop { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: no-preference) { .lost-route .lost-plane { animation: lost-loop 7s linear infinite; } }

/* ---------- Pack 3b, cabinet (C1-C7) ---------- */
/* C3: the active item of the account menu is the sliding pill; without the pill (menu hidden, no JS) the item keeps its own fill */
.motion-ok .account-page .has-slide > .slide-ind:not([hidden]) ~ button.active { background: transparent; box-shadow: none; }
.motion-ok .account-page .has-slide > .slide-ind:not([hidden]) ~ button { transition: color .2s ease-out; }
/* the order filters wore a soft fill with light text in the dark theme; on the sunset pill the text is the dark one in both themes */
.motion-ok .orders-filters.has-slide > .slide-ind:not([hidden]) ~ button.active { color: var(--on-sunset); }
.motion-ok .orders-filters.has-slide > .slide-ind:not([hidden]) ~ button.active small { color: inherit; opacity: .75; }

/* C2: the ring turns amber at 20 % left and red at 10 %, then pulses once (the number beside it says the same) */
.traffic-ring[data-level="low"] .ring-fill { stroke: #d97a00; }
.traffic-ring[data-level="crit"] .ring-fill { stroke: #d92d20; }
:root[data-theme="dark"] .traffic-ring[data-level="low"] .ring-fill { stroke: #ffb020; }
:root[data-theme="dark"] .traffic-ring[data-level="crit"] .ring-fill { stroke: #ff6b5e; }
@keyframes ring-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
.motion-ok .traffic-ring.pulse { animation: ring-pulse .6s ease-out 1; }

/* C4: «В сети», only while the provider shows fresh traffic on the line */
.connection-details .net-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font: 600 13px/1.2 var(--font); color: #157347; }
:root[data-theme="dark"] .connection-details .net-live { color: #5fd08a; }
.net-live i { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.net-live s { display: block; width: 3px; border-radius: 1px; background: currentColor; text-decoration: none; transform-origin: bottom; }
.net-live s:nth-child(1) { height: 5px; } .net-live s:nth-child(2) { height: 8px; } .net-live s:nth-child(3) { height: 11px; }
@keyframes bar-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.motion-ok .net-live s { animation: bar-in .35s ease-out both; }
.motion-ok .net-live s:nth-child(2) { animation-delay: .1s; } .motion-ok .net-live s:nth-child(3) { animation-delay: .2s; }

/* C5: «Куда нажимать» is a small phone that taps through the settings; the same path is written under it */
.install-demo { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.install-demo-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.install-demo-head h4 { margin: 0; font-size: 16px; }
.install-demo-os { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-soft); }
.install-demo-os button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.install-demo-os button[aria-pressed="true"] { background: var(--sunset); color: var(--on-sunset); font-weight: 700; }
.install-demo-panel { display: flex; align-items: center; gap: var(--s4); margin: var(--s3) 0; }
.install-demo-panel[hidden] { display: none; }
.install-demo-path { margin: 0; color: var(--muted); font-size: 15px; }
.install-demo .phone { position: relative; flex: 0 0 auto; width: 150px; height: 230px; padding: 8px; border-radius: 24px; background: #0b1330; box-shadow: 0 0 0 2px #29335c, var(--shadow, 0 8px 24px rgba(4, 10, 43, .25)); overflow: hidden; }
.install-demo .phone-screen { position: absolute; inset: 8px; display: flex; flex-direction: column; gap: 8px; padding: 14px 10px 10px; border-radius: 17px; background: #121c42; color: #fff; opacity: 0; pointer-events: none; }
.install-demo .phone-screen.on { opacity: 1; }
.install-demo .phone-screen b { font-size: 13px; font-weight: 700; }
.install-demo .row { position: relative; display: flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .1); font-style: normal; font-size: 12px; }
.install-demo .row.hot { background: var(--sunset); color: var(--on-sunset); font-weight: 700; }
.install-demo .row em { position: absolute; right: 12px; top: 50%; width: 22px; height: 22px; margin: -11px -11px 0 0; border-radius: 50%; background: rgba(255, 255, 255, .85); opacity: 0; }
.install-demo .scan .finder { position: relative; flex: 1; margin: 4px 6px; }
.install-demo .scan .finder i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--sunset); }
.install-demo .scan .finder i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; border-top-left-radius: 8px; }
.install-demo .scan .finder i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; border-top-right-radius: 8px; }
.install-demo .scan .finder i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 8px; }
.install-demo .scan .finder i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 8px; }
.install-demo .scan small { color: rgba(255, 255, 255, .85); font-size: 11px; text-align: center; }
@keyframes demo-tap { 0%, 35% { transform: scale(.4); opacity: 0; } 55% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.motion-ok .install-demo .phone-screen { transform: translateX(10px); transition: opacity .25s ease-out, transform .25s ease-out; }
.motion-ok .install-demo .phone-screen.on { transform: none; }
.motion-ok .install-demo .phone-screen.past { transform: translateX(-10px); }
.motion-ok .install-demo .phone-screen.on .row.hot em { animation: demo-tap 1s ease-out .6s 1 both; }
@media (max-width: 520px) { .install-demo-panel { flex-direction: column; align-items: flex-start; } }

/* C6: a new answer from support slides in once; the unread badge pulses once */
@keyframes answer-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes badge-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
.motion-ok .client-message.fresh { animation: answer-in .4s ease-out 1 both; }
.motion-ok #clientTicketBadge.pulse:not(:empty) { animation: badge-pulse .5s ease-out .3s 1; }

/* C7: the corners close in on the QR code once (the code itself does not move) */
.esim-install-qr { position: relative; }
.qr-corners { position: absolute; inset: 2px; pointer-events: none; }
.qr-corners i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--on-sunset); }
.qr-corners i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; border-top-left-radius: 8px; }
.qr-corners i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; border-top-right-radius: 8px; }
.qr-corners i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 8px; }
.qr-corners i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 8px; }
@keyframes qr-close { from { transform: scale(1.25); opacity: 0; } to { transform: none; opacity: 1; } }
.motion-ok .qr-corners:not(.still) { animation: qr-close .6s ease-out 1 both; }

@media (prefers-reduced-motion: reduce) {
  .traffic-ring.pulse, .net-live s, .client-message.fresh, #clientTicketBadge.pulse, .qr-corners, .install-demo .phone-screen, .install-demo .row em { animation: none !important; transition: none !important; }
}

/* ======================================================================================================================
   Design backlog (14.10.2026): the pale «locked» buttons in the dark theme were 1.43 : 1 (sunset at 55% over the night background, dark text);
   now they are a flat dark amber with light text, still clearly different from the live button. Light theme is unchanged.
   ====================================================================================================================== */
:root[data-theme="dark"] .primary:disabled { opacity: 1; background: #4a3f27; border-color: transparent; color: #f6dfb4; box-shadow: none; }

/* ======================================================================================================================
   Pack 4 (14.10.2026), guide page: the header link of the section being read is marked (underline grows from the left);
   the phone screens of each roaming block come in one after another. Only transform and opacity; guide-motion.js sets html.motion-ok.
   ====================================================================================================================== */
.site-nav a[aria-current="location"] { color: var(--accent-text); }
.site-header.on-photo .site-nav a[aria-current="location"] { color: #ffd9a8; }
.site-nav a[href^="#"] { position: relative; }
.site-nav a[href^="#"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; opacity: 0; }
.site-nav a[aria-current="location"]::after { transform: scaleX(1); opacity: 1; }
html.motion-ok .site-nav a[href^="#"]::after { transition: transform .22s ease-out, opacity .15s ease-out; }
html.motion-ok .guide-page .phone-steps:not(.in-view) > li { opacity: 0; transform: translateY(14px); }
html.motion-ok .guide-page .phone-steps > li { transition: opacity .35s ease-out, transform .35s ease-out; }
html.motion-ok .guide-page .phone-steps > li:nth-child(2) { transition-delay: .09s; }
html.motion-ok .guide-page .phone-steps > li:nth-child(3) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .site-nav a[href^="#"]::after { transition: none; }
  .guide-page .phone-steps > li { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* The guide is a long page: its header stays on screen so the marked section is visible (on a phone only the menu row stays, the logo row scrolls away). */
.guide-page .site-header { position: sticky; top: 0; }
@media (max-width: 760px) { .guide-page .site-header { top: -52px; } }

/* Info pages (/save, /what-is-esim, /keep-number), 22.10.2026: a photo under the lead, the calculator form, the "SIM + eSIM" scheme. */
.info-figure { margin: var(--s5) 0 0; max-width: 1088px; }
.info-figure img { display: block; width: 100%; height: 260px; max-width: none; object-fit: cover; border-radius: var(--r-lg); background: var(--bg-soft); }
.info-figure figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); }
.info-figure figcaption a { color: inherit; }
@media (max-width: 600px) { .info-figure img { height: 180px; border-radius: var(--r); } }
.save-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); max-width: 880px; }
.save-form .field input, .save-form .field select { width: 100%; min-height: 44px; }
.save-hint { max-width: 760px; margin: var(--s3) 0 0; }
.save .roam-bars { max-width: 760px; }
.save-plan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin: var(--s2) 0 0; font-weight: 600; }
.save-plan .text-link { padding: 12px 0; }
@media (max-width: 760px) { .save-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .save-form { grid-template-columns: minmax(0, 1fr); } }
.info-page .spec-list { max-width: 760px; }
.info-page .spec-list > div { grid-template-columns: 220px 1fr; }
@media (max-width: 600px) { .info-page .spec-list > div { grid-template-columns: 1fr; gap: 2px; } }
.scheme { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; margin: 0; }
.scheme-phone { flex: none; width: 96px; height: auto; color: var(--text); }
.scheme-phone .ph-main rect:first-child { fill: var(--violet); }
.scheme-phone .ph-esim rect:first-child { fill: #ff8a2b; }
.scheme-lanes { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; flex: 1 1 280px; max-width: 460px; }
.scheme-lanes li { display: grid; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--bg-soft); border-left: 6px solid var(--violet); }
.scheme-lanes li.lane-esim { border-left-color: #ff8a2b; }
.scheme-lanes span { color: var(--muted); }
.scheme figcaption { flex-basis: 100%; max-width: 760px; color: var(--muted); }
/* code step, dark theme: the "checking" and "signed in" buttons keep their colours (the generic dark disabled amber above is for idle disabled buttons) */
:root[data-theme="dark"] .primary.is-ok:disabled { background: #4cc88a; color: var(--on-sunset); box-shadow: none; }
/* "Отправить код заново через 0:58": a waiting link is muted grey and readable, not a faded orange */
.login-links .text-link:disabled { opacity: 1; color: var(--muted); cursor: default; }
/* wrong code: the reason sits right under the cells (red text with a dot, not colour alone) */
.otp-error-msg { margin: calc(var(--s2) * -1) 0 0; font-size: 14px; font-weight: 600; color: var(--err); }
.otp-error-msg::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--err); color: var(--bg); font-size: 12px; line-height: 1; }

/* Buttons (22.10.2026, press.js): a clear dip on press; a button the page has disabled after the click is grey with a spinner on the right */
.btn, .primary, .secondary, .social-btn, .pill { transition: transform .12s ease-out, filter .12s, box-shadow .15s, background-color .15s, border-color .15s, color .15s; }
.btn:active:not(:disabled), .primary:active:not(:disabled), .secondary:active:not(:disabled), .pill:active:not(:disabled), .social-btn:active:not(:disabled),
.btn.is-pressed, .primary.is-pressed, .secondary.is-pressed, .pill.is-pressed, .social-btn.is-pressed { filter: brightness(.94); }
@media (prefers-reduced-motion: no-preference) {
  .btn:active:not(:disabled), .primary:active:not(:disabled), .secondary:active:not(:disabled), .pill:active:not(:disabled), .social-btn:active:not(:disabled),
  .btn.is-pressed, .primary.is-pressed, .secondary.is-pressed, .pill.is-pressed, .social-btn.is-pressed { transform: scale(.97); }
}
.is-working:disabled, .is-busy:disabled { opacity: 1; cursor: progress; background: #cfd5e4; border-color: transparent; color: #3a4468; box-shadow: none; transform: none; filter: none; }
.is-working:disabled::after, .is-busy:disabled::after { content: ""; display: inline-block; flex: none; width: 16px; height: 16px; margin-left: 10px; vertical-align: -3px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: otp-spin .7s linear infinite; }
:root[data-theme="dark"] .is-working:disabled, :root[data-theme="dark"] .is-busy:disabled { background: #3a4263; color: #e3e8f8; }
@media (prefers-reduced-motion: reduce) { .is-working:disabled::after, .is-busy:disabled::after { animation: none; border-right-color: currentColor; opacity: .6; } }

/* cabinet on a phone (22.10.2026): who is signed in on top, the sections as pills that wrap (no hidden sideways scroll, no arrow),
   theme/language switches and "Sign out" share the last row instead of each taking its own */
@media (max-width: 760px) {
  .account-page .account-side { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "person person" "nav nav" "tools exit"; gap: var(--s3); padding: var(--s4); }
  .account-page .account-person { grid-area: person; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2px; min-height: 40px; padding: 0 0 var(--s3) 52px; }
  .account-page .account-person::before { width: 40px; height: 40px; }
  .account-page .account-person b { font-size: 16px; line-height: 21px; }
  .account-page .account-person small { line-height: 17px; }
  .account-page .account-nav-wrap { grid-area: nav; }
  .account-page .account-side nav { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; border: 0; gap: var(--s2); -webkit-mask-image: none; mask-image: none; }
  .account-page .account-side nav button { min-height: 44px; flex: 1 1 auto; justify-content: center; padding: 0 var(--s3); background: var(--bg-soft); }
  .account-page .account-side nav button.active { background: var(--sunset); }
  .account-page .account-nav-wrap.more-right .account-nav-more { display: none; }
  .account-page .account-side .side-toggles { grid-area: tools; margin: 0; }
  .account-page #customerLogout { grid-area: exit; align-self: center; justify-self: end; min-height: 44px; padding: 0 var(--s2); font-size: 15px; }
  .account-page .compact-connection { align-items: flex-start; }
  .account-page .compact-connection .flag { margin-top: 2px; }
  .account-page .compact-connection > .text-link { align-self: flex-start; min-height: 32px; }
  .account-page .compact-connection .install-now { flex-direction: column; align-items: stretch; gap: var(--s2); margin: var(--s1) 0 0; padding-left: 0; }
  .account-page .compact-connection .install-now .primary { min-height: 48px; justify-content: center; text-align: center; }
  .account-page .compact-connection .install-now small { text-align: center; }
}

/* Text under a country page: written on the server for search engines, read by people as a short summary (empty when the page has no country) */
.dest-about:empty { display: none; }
.dest-about h2 { margin: 0 0 var(--s3); }
.dest-about h3 { margin: var(--s4) 0 var(--s2); font-size: 1rem; }
.dest-about p { max-width: 760px; margin: 0 0 var(--s2); }
#where .guide-list .text-link { display: inline-block; padding: 8px 0; }

/* Guide articles (public/guide/*.html, built by tools/build-guides.mjs from outputs/seo/articles) */
.guide-doc .article-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); margin-bottom: var(--s3); font-size: 14px; color: var(--muted); }
.guide-doc .article-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.guide-doc .article-meta { margin: calc(-1 * var(--s2)) 0 var(--s4); font-size: 14px; color: var(--muted); }
.guide-doc h3 { margin: var(--s4) 0 var(--s2); font-size: 1.05rem; line-height: 1.3; }
.guide-doc .article-toc { margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-soft); }
.guide-doc .article-toc ol { margin: var(--s2) 0 0; }
.guide-doc .article-toc li { margin: 0; }
.guide-doc .article-toc a, .guide-doc .article-related a { display: inline-block; padding: 10px 0; }
.guide-doc .article-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: var(--s6) 0 var(--s4); }
.guide-doc a.btn { color: var(--on-sunset); text-decoration: none; }
.guide-doc .article-related ul { margin: 0; padding: 0; list-style: none; }
.guide-doc .article-related li { margin: 0; }

/* About page (23.10.2026): figures strip and advantage cards. Same card language as .trust-strip; the icon sits on the sunset gradient, so it takes --on-sunset. */
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: var(--s6) 0 0; padding: 0; list-style: none; }
.about-stats li { display: grid; align-content: start; gap: 2px; padding: var(--s4) var(--s5); border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--lift); }
.about-stats b { font-family: var(--display); font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--accent-text); }
.about-stats span { color: var(--muted); font-size: 14px; }
.adv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.adv-grid li { display: grid; align-content: start; gap: var(--s2); padding: var(--s5) var(--s4) var(--s4); border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--lift); }
.adv-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s2); border-radius: 50%; background: var(--sunset); color: var(--on-sunset); }
.adv-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.adv-grid b { font-size: 17px; }
.adv-grid span { color: var(--muted); font-size: 15px; }
@media (max-width: 1000px) { .about-stats, .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .about-stats li { padding: var(--s3) var(--s4); }
  .adv-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .adv-grid li { grid-template-columns: 44px minmax(0, 1fr); align-items: start; column-gap: var(--s3); row-gap: var(--s1); padding: var(--s4); }
  .adv-ico { grid-row: 1 / span 2; margin: 0; }
  .adv-grid span { grid-column: 2; }
}
/* The cards come in one after another when the block is on screen (guide-motion.js sets in-view); without html.motion-ok nothing is hidden. */
.motion-ok .about-stats li, .motion-ok .adv-grid li { opacity: 0; transform: translateY(10px); transition: opacity .3s ease-out, transform .45s cubic-bezier(.22, 1, .36, 1); }
.motion-ok .about-stats.in-view li, .motion-ok .adv-grid.in-view li { opacity: 1; transform: none; }
.motion-ok .about-stats.in-view li:nth-child(2), .motion-ok .adv-grid.in-view li:nth-child(2) { transition-delay: .06s; }
.motion-ok .about-stats.in-view li:nth-child(3), .motion-ok .adv-grid.in-view li:nth-child(3) { transition-delay: .12s; }
.motion-ok .about-stats.in-view li:nth-child(4), .motion-ok .adv-grid.in-view li:nth-child(4) { transition-delay: .18s; }
.motion-ok .adv-grid.in-view li:nth-child(5) { transition-delay: .24s; }
.motion-ok .adv-grid.in-view li:nth-child(6) { transition-delay: .3s; }
.motion-ok .adv-grid.in-view li:nth-child(7) { transition-delay: .36s; }
.motion-ok .adv-grid.in-view li:nth-child(8) { transition-delay: .42s; }

/* /buy-esim: the plans open the page (24.10.2026) */
.buy-plans .catalog-search { display: block; max-width: 420px; margin: var(--s4) 0; }
.buy-plans .countries { margin-bottom: var(--s4); }
@media (max-width: 760px) { .buy-plans .catalog-search { max-width: none; } }