/* ==========================================================================
   furfur.cards/esim — «Пастельный рейс» (ported from the approved prototype, 28.09.2026)
   Paper + aubergine ink + one vermilion. The paintings carry the colour.
   Mobile-first. All motion lives in the reduced-motion guard at the end.
   Night tokens: edit only the night:begin…night:end block, then run
   `python tools/sync_night_css.py` — it copies them into the prefers-color-scheme mirror.
   ========================================================================== */

/* Onest (OFL 1.1), self-hosted: wght 400–700, Latin + Cyrillic (fonts/OFL-Onest.txt). No third-party request. */
@font-face {
  font-family: "Onest";
  src: url("fonts/onest.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Furfur Gothic";
  src: url("fonts/furfur-gothic.woff2") format("woff2");
  font-weight: 500 900; font-stretch: 50% 200%; font-display: swap;
}
/* metric fallback so the swap does not reflow the hero (tuned against Arial) */
@font-face {
  font-family: "Furfur Gothic Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* DAY is the default. NIGHT (further down) redefines only these tokens, so components never branch on the theme.
   Rule for new CSS: no raw colours outside this block, except inside pastel areas (paintings, .twin, tag stubs),
   which stay pastel in both themes and use --on-pastel. */
:root {
  /* paper & ink */
  --paper: #F6F0E7;          /* page: the haze at the bottom of every painting */
  --paper-2: #EFE6D9;        /* alternate band */
  --ticket: #FFFBF4;         /* anything that is a piece of paper */
  --field: #FFFFFF;          /* inside of inputs, checkboxes, the QR preview slot */
  --field-err: #FFF6F2;
  --ink: #221A33;            /* aubergine ink — 14.7:1 on paper */
  --ink-2: #554A66;          /* secondary text — 7.3:1 */
  --ink-3: #665C78;          /* labels, placeholders — 5.5:1 */
  --ink-rgb: 34, 26, 51;     /* ink as a triplet for hairlines and hover tints */
  --rule: rgba(var(--ink-rgb), .14);
  --rule-2: rgba(var(--ink-rgb), .26);
  --perf: rgba(var(--ink-rgb), .38);
  --tint: rgba(var(--ink-rgb), .05);   /* hover wash on rows and nav links */
  /* selected / emphasis blocks (selected package, checked payment, «Дни идут», header CTA, «Найти», the jump
     button, the active suggestion, «Включите линию eSIM»): by day solid ink with paper text; at night a lifted
     violet with cream text and a cream hairline, so they never outshine the vermilion CTA */
  --inv-bg: #221A33;
  --inv-fg: #FFFBF4;
  --inv-edge: transparent;   /* inset hairline on those blocks (night only) */
  --inv-2: #D6CCE4;          /* secondary text inside them */
  --inv-accent: var(--peach);          /* the code in an active suggestion row */
  /* dark surfaces that stay dark in both themes: footer (--deep), help panel and sticky bar (--raise) */
  --deep: #221A33;
  --raise: #221A33;
  --raise-edge: #221A33;     /* = --raise by day (invisible); a cream hairline at night */
  --on-deep: #FFFBF4;
  --on-deep-2: #D6CCE4;
  /* the one action colour: vermilion from the paintings' warm range */
  --act: #C8442A;            /* white text 4.9:1 — only CTA + selected package */
  --act-hover: #B03A22;
  --act-edge: #8E2E1B;       /* the pressed-paper edge under the CTA */
  --act-ink: #A8361F;        /* vermilion as text on paper, 5.8:1 */
  --act-on-ink: #F0704F;     /* the punch on an inverted row, 5.2:1 on ink */
  --act-on-ink-fg: #221A33;  /* a number printed on that punch */
  --stamp: #5B45C8;          /* violet stamp ink; the old brand purple lives only here */
  --stamp-blend: multiply;
  --focus: var(--stamp);     /* focus ring: 5.9:1 on paper; switched inside ink blocks, see below */
  --focus-inv: #C9BEFF;      /* focus ring on an inverted (ink) block, 9.7:1 */
  --focus-deep: #C9BEFF;     /* focus ring on footer / help panel / sticky bar */
  --ok: #1A6E4B;             /* 5.2:1 on the green chip */
  --ok-bg: #DDF0E6;
  --on-ok: #FFFFFF;
  --ready-fg: #3E2F8F;       /* «Готова к установке» on --lav */
  /* painting tints: only inside windows, moods, chips and the compare column */
  --lav: #E6DEF6; --peach: #FBE2D0; --rose: #F4D6D8; --sky: #D9E6F2; --sand: #F5E0C0; --mint: #D3EBE2;
  /* pastel areas keep printed aubergine ink in any theme */
  --on-pastel: #221A33;
  --on-pastel-2: #574C69;     /* ≥ 5.2:1 on every mood stop (ink-3 dipped to 4.1 on the deepest ones) */
  /* paintings, pastel stubs and windows: untouched by day, slightly dimmed at night (a filter value: do not chain it) */
  --art-filter: none;
  --pastel-filter: none;     /* tag stubs and typographic windows: pastel paper, dimmed less than paintings */
  --vig: 64%;                /* where the oval painting (destination and order pass) starts to dissolve */
  --ring: transparent;       /* porthole hairline around that oval (night only) */
  --fade-lift: 0%;           /* how much later the card-top paintings start to fade (night 40 %: past the edge, a crisp cut) */
  --shade-1: #FAF5EC;        /* the porthole's pull-down shade: moulded cream plastic */
  --shade-2: #E8DFD1;
  --pane-rim: rgba(34, 26, 51, .5);  /* dark inner rim where the glass meets the frame */
  --mist-crop: 0%;           /* night: the card-top paintings hang this far below their window, so the pale mist
                                painted into their bottom 20 % is cut off and the window ends on saturated paint */
  /* shadows and edges */
  --sh: 34, 26, 51;          /* shadow colour triplet: rgba(var(--sh), a) */
  --sheet-edge: 0 1px 0 rgba(34, 26, 51, .12);   /* first drop-shadow of the notched passes */
  --flag-edge: rgba(34, 26, 51, .1);
  --tag-edge: rgba(34, 26, 51, .55);   /* hairline that follows a tag's cut corners, notches and hole */
  --tag-drop: rgba(34, 26, 51, .08);
  /* theme toggle icon: which of the two glyphs is showing */
  --moon: 1; --sun: 0;
  /* SVG paper grain for flat pastel areas (typographic windows, tag stubs) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .5  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* type */
  --f-d: "Furfur Gothic", "Furfur Gothic Fallback", system-ui, sans-serif;
  --f-t: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-m: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* space & grid */
  --g: 16px;                 /* page gutter */
  --max: 1280px;
  --r: 6px;                  /* paper corner — the only radius for paper objects */
  --notch: 11px;
  /* motion */
  --t-fast: 140ms; --t-med: 320ms; --t-slow: 700ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-stamp: cubic-bezier(.3, 1.5, .5, 1);
  --ease-drift: cubic-bezier(.45, 0, .55, 1);
  color-scheme: light;
}

/* ---------- NIGHT («Ночной рейс»): the cabin after dark ----------
   Deep aubergine page, dark-paper tickets lifted by a lighter surface and a cream hairline, cream ink.
   Ink blocks invert to cream. Paintings and pastels stay pastel, slightly dimmed. The QR plate stays white.
   Two ways in, one set of values: [data-theme="dark"] (the toggle, ?theme=dark) and the OS setting when the
   visitor has not chosen. src/build.py copies the night:begin…night:end block into the media-query mirror. */
:root[data-theme="dark"] {
  /* night:begin */
  --paper: #17121F;
  --paper-2: #1E1828;
  --ticket: #282134;
  --field: #1C1626;
  --field-err: #3A1E1D;
  --ink: #F4ECE1;
  --ink-2: #CFC5D6;
  --ink-3: #ABA0B8;
  --ink-rgb: 244, 236, 225;
  --tint: rgba(244, 236, 225, .06);
  --inv-bg: #3A2F58;
  --inv-fg: #F4ECE1;
  --inv-edge: rgba(244, 236, 225, .5);
  --inv-2: #CFC5D6;
  --inv-accent: #FFB59B;
  --deep: #0F0B15;
  --raise: #342A46;
  --raise-edge: rgba(244, 236, 225, .14);
  --on-deep: #F4ECE1;
  --on-deep-2: #D6CCE4;
  --act: #C8442A;
  --act-hover: #B43C24;
  --act-edge: #5E1E10;
  --act-ink: #FF8F70;
  --act-on-ink: #FF8F70;
  --act-on-ink-fg: #221A33;
  --stamp: #A996FF;
  --stamp-blend: screen;
  --focus: #B7A8FF;
  --focus-inv: #C9BEFF;
  --focus-deep: #B7A8FF;
  --ok: #7FD9AE;
  --ok-bg: #173A2B;
  --on-ok: #0F2A1E;
  --ready-fg: #DCD3FF;
  --lav: #3A2F58; --peach: #4B3029; --rose: #4A2A36; --sky: #22344A; --sand: #45372A; --mint: #1E3A33;
  --art-filter: brightness(.93) saturate(.95);
  --pastel-filter: brightness(.93) saturate(.96);
  --vig: 93%;
  --ring: rgba(244, 236, 225, .34);
  --fade-lift: 40%;
  --mist-crop: 25%;
  --shade-1: #3E3450;
  --shade-2: #2C2439;
  --pane-rim: rgba(0, 0, 0, .6);
  --on-pastel-2: #4F4561;
  --sh: 0, 0, 0;
  --sheet-edge: 0 0 .8px rgba(244, 236, 225, .45);
  --flag-edge: rgba(255, 255, 255, .3);
  --tag-edge: rgba(244, 236, 225, .42);
  --tag-drop: rgba(0, 0, 0, .16);
  --moon: 0; --sun: 1;
  color-scheme: dark;
  /* night:end */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* night-mirror:begin (written by src/build.py from the block above; edit that one) */
    --paper: #17121F;
    --paper-2: #1E1828;
    --ticket: #282134;
    --field: #1C1626;
    --field-err: #3A1E1D;
    --ink: #F4ECE1;
    --ink-2: #CFC5D6;
    --ink-3: #ABA0B8;
    --ink-rgb: 244, 236, 225;
    --tint: rgba(244, 236, 225, .06);
    --inv-bg: #3A2F58;
    --inv-fg: #F4ECE1;
    --inv-edge: rgba(244, 236, 225, .5);
    --inv-2: #CFC5D6;
    --inv-accent: #FFB59B;
    --deep: #0F0B15;
    --raise: #342A46;
    --raise-edge: rgba(244, 236, 225, .14);
    --on-deep: #F4ECE1;
    --on-deep-2: #D6CCE4;
    --act: #C8442A;
    --act-hover: #B43C24;
    --act-edge: #5E1E10;
    --act-ink: #FF8F70;
    --act-on-ink: #FF8F70;
    --act-on-ink-fg: #221A33;
    --stamp: #A996FF;
    --stamp-blend: screen;
    --focus: #B7A8FF;
    --focus-inv: #C9BEFF;
    --focus-deep: #B7A8FF;
    --ok: #7FD9AE;
    --ok-bg: #173A2B;
    --on-ok: #0F2A1E;
    --ready-fg: #DCD3FF;
    --lav: #3A2F58; --peach: #4B3029; --rose: #4A2A36; --sky: #22344A; --sand: #45372A; --mint: #1E3A33;
    --art-filter: brightness(.93) saturate(.95);
    --pastel-filter: brightness(.93) saturate(.96);
    --vig: 93%;
    --ring: rgba(244, 236, 225, .34);
    --fade-lift: 40%;
    --mist-crop: 25%;
    --shade-1: #3E3450;
    --shade-2: #2C2439;
    --pane-rim: rgba(0, 0, 0, .6);
    --on-pastel-2: #4F4561;
    --sh: 0, 0, 0;
    --sheet-edge: 0 0 .8px rgba(244, 236, 225, .45);
    --flag-edge: rgba(255, 255, 255, .3);
    --tag-edge: rgba(244, 236, 225, .42);
    --tag-drop: rgba(0, 0, 0, .16);
    --moon: 0; --sun: 1;
    color-scheme: dark;
    /* night-mirror:end */
  }
}
@media (min-width: 760px) { :root { --g: 32px; } }
@media (min-width: 1200px) { :root { --g: 48px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.55 var(--f-t); font-feature-settings: "tnum" 0;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
@media (min-width: 760px) { body { font-size: 17px; } }
img { max-width: 100%; height: auto; display: block; }
/* paintings: untouched by day, a touch dimmer at night so pastel skies do not glare on the dark paper */
.art, .pass__label, .frieze__track img { filter: var(--art-filter); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button, input { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
/* ink blocks: a light ring, the violet one is only 2.5:1 there */
.foot, .panel--help, .buybar { --focus: var(--focus-deep); }
.seg__opt:has(input:checked) { --focus: var(--focus-inv); }
.tap { display: inline-flex; align-items: center; min-height: 44px; }
::selection { background: var(--peach); color: var(--ink); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--ticket); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 8px; }
.nw { white-space: nowrap; }
.nocase { text-transform: none !important; letter-spacing: 0 !important; }

/* ---------- type roles ---------- */
.lbl {
  font: 650 12px/1.25 var(--f-d); font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.h1 {
  font: 800 clamp(46px, 11.6vw, 108px)/.93 var(--f-d); font-stretch: 56%; letter-spacing: -.005em;
  text-wrap: balance;
}
.h1__kicker { display: block; margin-bottom: .55em; font: 650 clamp(15px, 1.6vw, 18px)/1.2 var(--f-t); font-stretch: 100%; letter-spacing: 0; color: var(--ink-2); }
.h2 {
  font: 780 clamp(36px, 5.8vw, 66px)/.96 var(--f-d); font-stretch: 60%; letter-spacing: 0;
  text-wrap: balance;
}
.h3 { font: 750 23px/1.1 var(--f-d); font-stretch: 76%; }
.lead { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
@media (min-width: 760px) { .lead { font-size: 19px; } }
.price { font: 750 20px/1 var(--f-d); font-stretch: 118%; font-feature-settings: "tnum"; white-space: nowrap; letter-spacing: -.01em; }
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld--r { text-align: right; align-items: flex-end; flex: none; }
.fld--r .lbl { white-space: nowrap; }
.fld .val { font-weight: 500; font-size: 15px; line-height: 1.25; }
.fld .val.price { font-size: 20px; font-weight: 750; }

.flag { width: calc(var(--w, 28px)); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--flag-edge); flex: none; }
.flag--region { display: inline-grid; place-items: center; color: var(--ink-2); box-shadow: none; }
.flag--region svg { width: 100%; height: 100%; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--rule); }
.top__in { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); min-height: 44px; }
.logo__word { font: 800 17px/1 var(--f-d); font-stretch: 185%; letter-spacing: .02em; }
@media (min-width: 760px) { .logo__word { font-size: 19px; font-stretch: 200%; } }
.logo__tag { font: 650 11px/1 var(--f-t); padding: 3px 5px 4px; border: 1.5px solid currentColor; border-radius: 3px; }
.logo--inv { color: var(--on-deep); }
.nav { display: none; }
.top__help, .top__cta, .top__lang {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  font-weight: 600; font-size: 15px; text-decoration: none; border-radius: var(--r); white-space: nowrap;
}
.top__help { border: 1.5px solid var(--ink); }
.top__help:hover, .top__lang:hover { background: var(--ink); color: var(--ticket); }
.top__cta { background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); }
.top__cta:hover { background: var(--act); color: #fff; }
.top__lang { border: 1.5px solid var(--rule-2); }
/* day / night toggle: a round punch in the header, left of the CTA. Shown only with JS (the inline <head>
   script sets .js before the first paint). The glyph follows the --moon / --sun tokens, so it is right at
   first paint even before app.js syncs aria-pressed. */
.theme-tg { display: none; }
.js .theme-tg {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 -8px 0 auto; padding: 0;
  border: 1.5px solid var(--rule-2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.theme-tg:hover { border-color: var(--ink); background: var(--tint); }
.theme-tg + .top__help, .theme-tg + .top__cta, .theme-tg + .top__lang { margin-left: 0; }
.theme-tg__i { grid-area: 1 / 1; width: 20px; height: 20px; }
.theme-tg__moon { opacity: var(--moon); transform: rotate(calc(var(--sun) * 70deg)) scale(calc(.5 + var(--moon) * .5)); }
.theme-tg__sun { opacity: var(--sun); transform: rotate(calc(var(--moon) * -70deg)) scale(calc(.5 + var(--sun) * .5)); }
.top__lang-s { display: none; }
/* phones: logo · toggle · one compact action. The labels stay in the accessibility tree (visually hidden). */
@media (max-width: 479px) {
  .top__in { gap: 12px; }
  .top .logo__word { font-stretch: 170%; }
  .top__help { padding: 0 12px; min-width: 44px; justify-content: center; }
  .top__help span, .top__cta .top__cta-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 1000–1199: the nav is in, so the price CTA drops «Пакеты» to leave room for the toggle (4-digit prices too) */
@media (min-width: 1000px) and (max-width: 1199px) {
  .top__cta .top__cta-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 379px) {
  .js .theme-tg { margin-right: -4px; }
  /* 320–379: no room for logo + toggle + price; the jump button and the sticky bar carry «от N ₽» here */
  .top__cta { display: none; }
  .top__lang-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .top__lang-s { display: inline; }
}
@media (min-width: 1000px) {
  .nav { display: flex; gap: 4px; margin-left: 12px; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); border-radius: var(--r); white-space: nowrap; }
  .nav a:hover { color: var(--ink); background: var(--tint); }
}
/* 1000–1199: nav + day/night toggle + «Поддержка» (home) are ~40 px too wide for 1024 at full padding.
   The links sit closer, and below 1080 the button shows only the Telegram mark (label kept for screen readers). */
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav { margin-left: 4px; gap: 0; }
  .nav a { padding: 0 10px; }
}
@media (min-width: 1000px) and (max-width: 1079px) {
  .top__help { padding: 0; width: 44px; justify-content: center; }
  .top__help span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- sections ---------- */
.sec { padding: 56px 0; }
.sec--band { background: var(--paper-2); }
.sec__head { display: grid; gap: 10px; margin-bottom: 26px; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.sec__head--stack { grid-template-columns: 1fr !important; }
.sec__head--stack .sec__note { justify-self: start; }
.sec__note { color: var(--ink-2); font-size: 15px; max-width: 30em; }
.h2__count { font-size: .42em; vertical-align: .95em; font-stretch: 120%; color: var(--ink-3); margin-left: .1em; white-space: nowrap; }
@media (min-width: 760px) {
  .sec { padding: 88px 0; }
  .sec__head { gap: 14px; margin-bottom: 36px; }
}
@media (min-width: 1000px) {
  .sec__head { grid-template-columns: minmax(0, 1fr) minmax(0, 24em); align-items: end; gap: 32px; }
  .sec__note { justify-self: end; }
}

/* ==========================================================================
   HOME
   ========================================================================== */
/* clip only sideways (the fan's rotated cards): vertically the open suggestion list must hang out of the hero,
   over «Популярные направления» — on the two-column hero it reaches ~170 px below the hero's bottom edge */
.hero { position: relative; z-index: 2; padding: 28px 0 40px; overflow-x: clip; overflow-y: visible; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.hero__text { display: grid; gap: 18px; align-content: start; }
.hero .h1 { max-width: 9em; font-size: clamp(40px, 11.6vw, 96px); }
@media (min-width: 1000px) { .hero .h1 { font-size: clamp(64px, 6.6vw, 96px); } }
@media (min-width: 1000px) {
  .hero { padding: 48px 0 8px; }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
  .hero__text { gap: 24px; }
}

/* search as a pass you fill in */
.qpass { position: relative; background: var(--ticket); border: 1px solid var(--rule-2); border-radius: var(--r); box-shadow: 0 1px 0 rgba(var(--sh), .04), 0 18px 36px -24px rgba(var(--sh), .35); margin-top: 6px; }
/* one field, one question: the header strip says «ticket», the label says what to type */
.qpass__band { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 12px 16px 11px; font: 650 12px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.qpass__band-r { display: block; flex: none; }
.qpass__band-r .barcode { width: 84px; height: 15px; opacity: .45; }
.qpass__to { padding: 14px 16px 14px; display: grid; gap: 10px; position: relative; }
.qpass__lbl { font: 750 20px/1.1 var(--f-d); font-stretch: 104%; color: var(--ink); }
.qpass__field { position: relative; display: flex; align-items: center; gap: 0; border: 2px solid var(--ink); border-radius: var(--r); background: var(--field); min-height: 56px; padding-left: 14px; }
.qpass__field:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.qpass__field .ico { color: var(--ink-3); width: 20px; height: 20px; }
.qpass__field input { flex: 1 1 0; width: 0; min-width: 0; border: 0; outline: 0; background: transparent; padding: 14px 10px; font-size: 17px; font-weight: 500; }
.qpass__field input::placeholder { color: var(--ink-3); font-weight: 400; }
.qpass__field input::-webkit-search-cancel-button { display: none; }
.qpass__go { align-self: stretch; border: 0; margin: 4px; padding: 0 16px; border-radius: 3px; background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); font-weight: 600; cursor: pointer; }
.qpass__go:hover { background: var(--act); color: #fff; }
.qpass__often { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; font-size: 14px; color: var(--ink-2); margin-top: -4px; }
.qpass__often a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); }
.qpass__often a[hidden] { display: none; }
/* «Часто ищут» is always one line: as many whole chips as fit (2 at 320 px, 3 at 390, 4 at 1024, 5 on wide screens).
   app.js hides the chips that wrap; until it runs (and without JS) the second line is clipped here, so nothing
   jumps. The 6 px padding keeps the focus ring inside the clip. */
.js .qpass__often { max-height: 56px; overflow: hidden; padding: 6px; margin: -10px -6px -6px; }
@media (max-width: 359px) { .qpass__often { column-gap: 8px; } .qpass__often a { gap: 5px; } } /* two chips at 320 */
.qpass__often .flag { width: 20px; }
/* perforation drawn as a background so both notches can sit exactly on it, whatever the block's height */
.qpass__facts { position: relative; display: grid; gap: 0; padding: 4px 16px 10px; background: repeating-linear-gradient(90deg, var(--perf) 0 5px, transparent 0 11px) top left / 100% 1.5px no-repeat; }
.qpass__facts > div { display: grid; grid-template-columns: 6.6em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.qpass__facts dt { white-space: nowrap; }
.qpass__facts > div:last-child { border-bottom: 0; }
.qpass__facts dd { font-size: 15px; font-weight: 500; white-space: nowrap; }
/* notches where the perforation meets the edge */
.qpass__facts::before, .qpass__facts::after { content: ""; position: absolute; top: 0; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule-2); z-index: 1; }
.qpass__facts::before { left: -10px; clip-path: inset(0 0 0 50%); }
.qpass__facts::after { right: -10px; clip-path: inset(0 50% 0 0); }
@media (min-width: 560px) {
  .qpass__facts { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px; padding: 14px 16px 14px; }
  .qpass__facts > div { grid-template-columns: 1fr; gap: 5px; border: 0; padding: 0; }
}

/* live suggestions */
.suggest { position: absolute; left: -2px; right: -2px; top: calc(100% + 6px); z-index: 20; background: var(--ticket); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: 0 24px 40px -20px rgba(var(--sh), .45); overflow: hidden; }
.suggest li a[role=option], .suggest__none { display: grid; grid-template-columns: 28px 3.4em 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; text-decoration: none; border-top: 1px solid var(--rule); }
.suggest li:first-child a { border-top: 0; }
.suggest .flag--region { --w: 28px; width: 28px; color: inherit; }
.suggest__none a { font-weight: 600; }
.suggest li a[aria-selected="true"], .suggest li a:hover { background: var(--inv-bg); color: var(--inv-fg); }
.suggest li a[aria-selected="true"] .suggest__code, .suggest li a:hover .suggest__code { color: var(--inv-accent); }
.suggest__code { font: 750 13px/1 var(--f-d); font-stretch: 150%; color: var(--ink-3); }
.suggest__name { font-weight: 600; }
.suggest__price { font: 700 15px/1 var(--f-d); font-stretch: 112%; white-space: nowrap; }
.suggest__none { display: block; font-size: 15px; color: var(--ink-2); }

/* the fan of paintings */
.fan { position: relative; height: 350px; margin: 0 -4px -18px; contain: layout; }
.fan__card { position: absolute; top: 34px; width: 46%; max-width: 250px; margin: 0; padding: 8px 8px 30px; background: var(--ticket); border-radius: 3px; box-shadow: 0 1px 1px rgba(var(--sh), .12), 0 20px 30px -18px rgba(var(--sh), .45); }
.fan__card img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 70%; }
.fan__card figcaption { position: absolute; left: 10px; bottom: 7px; font: 600 12px/1 var(--f-d); font-stretch: 110%; color: var(--ink-2); }
.fan__card--r figcaption { left: auto; right: 10px; }
.fan__cc { display: none; }
@media (min-width: 560px) { .fan__cc { display: inline; } }
.fan__card--l { left: 0; transform: rotate(-7deg); }
.fan__card--r { right: 0; transform: rotate(6deg); top: 52px; }
.fan__pass { position: absolute; left: 50%; top: 0; width: 58%; max-width: 320px; transform: translateX(-50%) rotate(-1.2deg); display: flex; flex-direction: column; background: var(--ticket); border: 1px solid var(--rule-2); border-radius: var(--r); text-decoration: none; overflow: hidden; box-shadow: 0 2px 2px rgba(var(--sh), .08), 0 34px 50px -26px rgba(var(--sh), .55); z-index: 2; }
.fan__win { position: relative; display: block; aspect-ratio: 4 / 3.5; overflow: hidden; }
.fan__win img { position: absolute; inset: 0; width: 100%; height: calc(100% + var(--mist-crop)); object-fit: cover; object-position: 50% 62%; -webkit-mask-image: linear-gradient(#000 calc(68% + var(--fade-lift)), transparent); mask-image: linear-gradient(#000 calc(68% + var(--fade-lift)), transparent); }
/* the pass body is a size container: on small phones the code and the price shrink with the pass (never the
   viewport), so «JPN», «Цена от» and «156 ₽» stay inside it. Budget: «ДОМ» (56 px) + two 8 px gaps
   + at least 14 px of dotted line + «JPN» at 4.0 em (Furfur Gothic 800, 170 %). */
.fan__body { container-type: inline-size; display: grid; gap: 6px; padding: 2px 14px 14px; position: relative; }
.fan__route { display: flex; align-items: center; gap: 8px; font: 800 13px/1 var(--f-d); font-stretch: 170%; color: var(--ink-3); }
.fan__route i { flex: 1; min-width: 14px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--perf) 0 2px, transparent 0 7px); }
.fan__route b { color: var(--ink); font-size: clamp(16px, (100cqi - 86px) / 4, 26px); font-weight: 800; }
/* «1–20 ГБ · 4G/5G» on one line when it fits, otherwise 4G/5G on its own line (never a dot left hanging) */
@container (max-width: 214px) { .fan__sep { display: none; } .fan__gens { display: block; } }
@container (max-width: 175px) { .fan__fields .val.price { font-size: 17px; } }
.fan__name { font: 750 20px/1.1 var(--f-d); font-stretch: 70%; }
.fan__fields { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; margin-top: 4px; background: linear-gradient(90deg, var(--perf) 50%, transparent 0) top / 10px 1.5px repeat-x; }
.fan__label { position: absolute; width: 92px; height: 92px; right: 14%; top: 4px; transform: rotate(10deg); z-index: 3; box-shadow: 0 8px 10px rgba(var(--sh), .22); filter: var(--art-filter); border-radius: 50%; border: 5px solid var(--ticket); }
/* small phones: the pass takes a bigger share of the fan so its printed fields keep a readable size */
@media (max-width: 419px) { .fan__pass { width: 64%; } .fan__body { padding-inline: 12px; } .fan__card figcaption { display: none; } } /* the wider pass would cut «Халонг» in half */
@media (min-width: 560px) { .fan { height: 470px; } .fan__label { width: 120px; height: 120px; } }
@media (min-width: 1000px) {
  .fan { height: 560px; margin: 0; }
  .fan__card { top: 96px; width: 44%; max-width: 300px; }
  .fan__card--r { top: 136px; }
  .fan__pass { width: 62%; max-width: 400px; top: 10px; }
  .fan__label { width: 150px; height: 150px; right: 2%; top: 0; }
  .fan__name { font-size: 17px; }
}

/* ---------- product ticket ---------- */
.tkt {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--ticket); color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 1px 0 rgba(var(--sh), .05), 0 18px 32px -26px rgba(var(--sh), .5);
  transition: box-shadow var(--t-med) var(--ease-out); /* the lift and tilt: motion block at the end */
}
.tkt__win { position: relative; display: block; aspect-ratio: 4 / 3.3; overflow: hidden; }
/* night: a painted window ends on a crisp edge with a cream hairline (the porthole's --ring) instead of a fade
   into the dark ticket, which read as a fog shelf. By day --ring is transparent and the fade is back. */
.tkt__win:has(> .art)::after, .rpass__win::after, .fan__win::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 1px; background: var(--ring); pointer-events: none; }
.tkt__win .art { position: absolute; inset: 0; width: 100%; height: calc(100% + var(--mist-crop)); object-fit: cover; object-position: 50% 72%; -webkit-mask-image: linear-gradient(#000 calc(70% + var(--fade-lift)), transparent 99%); mask-image: linear-gradient(#000 calc(70% + var(--fade-lift)), transparent 99%); }
.tkt__body { display: grid; gap: 3px; padding: 4px 16px 14px; }
.tkt__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tkt__code { font: 800 30px/1 var(--f-d); font-stretch: 190%; letter-spacing: -.01em; }
.tkt__name { font: 750 22px/1.1 var(--f-d); font-stretch: 70%; margin-top: 6px; }
.tkt__sub { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.tkt__foot { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 14px 16px 16px; margin-top: auto; }
.tkt__foot::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1.5px; background: repeating-linear-gradient(90deg, var(--perf) 0 5px, transparent 0 11px); }
.tkt__foot .fld:first-child .val { font-size: 14px; color: var(--ink-2); }
.tkt--xl .tkt__code { font-size: clamp(30px, 4vw, 56px); }
.tkt--xl .tkt__name { font-size: 30px; }
.tkt--xl .price { font-size: 26px; }
@media (hover: hover) and (pointer: fine) {
  .tkt:hover { box-shadow: 0 1px 0 rgba(var(--sh), .05), 0 30px 44px -28px rgba(var(--sh), .6); }
}

/* rails and the bento */
.wrap--rail { padding-inline: 0; }
.bento, .rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--g) 26px; scroll-padding-inline: var(--g); scrollbar-width: none; overscroll-behavior-x: contain; }
.bento::-webkit-scrollbar, .rail::-webkit-scrollbar { display: none; }
.bento > .tkt, .rail > .tkt { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
@media (min-width: 1000px) {
  .wrap--rail { padding-inline: var(--g); }
  .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; overflow: visible; padding: 0; }
  .bento > .tkt { flex: none; }
  .bento > .tkt--xl { grid-column: span 2; grid-row: span 2; }
  .tkt--xl .tkt__win { aspect-ratio: auto; flex: 1; min-height: 420px; }
  .rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; overflow: visible; padding: 0; }
  .rail > .tkt { flex: none; }
}

/* ---------- typographic window: destinations without a painting ---------- */
.twin {
  container-type: size;
  --m1: #FBE2D0; --m2: #F4D6D8; --m3: #FBEFE6; --m4: #F3E4DC;
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 16px 16px 26px; overflow: hidden; color: var(--on-pastel); filter: var(--pastel-filter);
  background:
    radial-gradient(circle at 78% 30%, var(--sun, #FFF3E6) 0 21%, rgba(255, 255, 255, 0) 21.6%),
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .75) 0, rgba(255, 255, 255, 0) 42%),
    radial-gradient(110% 80% at 88% 0%, var(--m1) 0, transparent 62%),
    radial-gradient(100% 90% at 0% 100%, var(--m2) 0, transparent 70%),
    linear-gradient(180deg, var(--m3), var(--m4));
}
.twin::after { /* paper grain so the flat gradient reads as painted */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: var(--grain);
}
.mood-sand { --sun: #FFE7C4; --m1: #F7D3A6; --m2: #F2C9B6; --m3: #FCEBD6; --m4: #F6E1CC; }
.mood-haze { --sun: #F7F4FF; --m1: #CFE0F0; --m2: #E3D9F2; --m3: #EEF2F7; --m4: #E6E6F1; }
.mood-dawn { --sun: #FFE9DA; --m1: #F9CDB2; --m2: #E9D2EE; --m3: #FCEDE3; --m4: #F3E2E6; }
.mood-rose { --sun: #FFE8E4; --m1: #F4C7CC; --m2: #F7D9C4; --m3: #FBEDEC; --m4: #F5E3E1; }
.mood-lagoon { --sun: #F2FFF9; --m1: #BFE4DD; --m2: #D5E6F4; --m3: #EAF5F1; --m4: #E1EEF0; }
.twin__code { position: absolute; left: 12px; top: 10px; font: 800 56px/1 var(--f-d); font-size: 15cqi; font-stretch: 200%; color: rgba(255, 255, 255, .78); letter-spacing: -.02em; pointer-events: none; text-shadow: 0 1px 0 rgba(34, 26, 51, .06); }
.twin__list { position: relative; z-index: 1; display: grid; gap: 2px; }
.twin__place { display: flex; align-items: baseline; gap: 10px; font: 750 19px/1.2 var(--f-d); font-stretch: 70%; }
.twin__n { font: 650 11px/1 var(--f-d); letter-spacing: .08em; color: var(--on-pastel-2); min-width: 1.7em; }
.twin .lbl { color: var(--on-pastel-2); }
.twin__sticker { position: absolute; z-index: 2; right: 14px; top: 14px; padding: 5px; background: #fff; border-radius: 3px; transform: rotate(-4deg); box-shadow: 0 6px 12px -6px rgba(34, 26, 51, .45); }
.twin__sticker img { width: 38px; height: 28.5px; object-fit: cover; }
.twin__lbl { position: relative; z-index: 1; }
/* «Куда именно» (destination and order pass). The flag sticker is in the header row, so it can never cover a
   name. Names are sized against the window itself (container units), whichever limit is tighter:
   width  — the longest name (--pk letters, ≤ .7 em each in Furfur Gothic 800 at 66 %) beside the 30 px number column;
   height — --pn rows of 1.2 em + 13 px under the ~70 px header. «Санто-Доминго» fits a 252 px window at 20 px,
   «Дилижан» gets 33 px on the same phone. */
.twin--big { padding: 22px 22px 24px; gap: 12px; justify-content: safe center; }
.twin--big .twin__code { display: none; }
.twin__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.twin--big .twin__place {
  font-size: clamp(20px, min((100cqi - 30px) / (var(--pk, 10) * .7), ((100cqb - 72px) / var(--pn, 4) - 13px) / 1.2), 44px);
  font-stretch: 66%; font-weight: 800; padding: 5px 0; border-bottom: 1px solid rgba(34, 26, 51, .12); white-space: nowrap;
}
.twin--big .twin__place:last-child { border-bottom: 0; }
.twin--big .twin__sticker { position: relative; right: auto; top: auto; flex: none; margin: 0 4px 0 0; transform: rotate(5deg); padding: 6px; }
.twin--big .twin__sticker img { width: 56px; height: 42px; }
.twin--big .twin__lbl { white-space: nowrap; }
@container (max-width: 280px) { .twin--big .twin__sticker img { width: 44px; height: 33px; } .twin--big .twin__sticker { padding: 5px; } }

/* ---------- all 42: luggage tags grouped by region ----------
   A tag = pastel stub (punched eyelet + vertical ISO-3 code) | notched perforation | printed body.
   The paper is masked (eyelet hole + two notches), the link around it carries the hairline and the shadow. */
.sky-sand   { --sky-a: #F7D8AA; --sky-b: #EDBBA7; }   /* Турция и Ближний Восток: apricot → terracotta rose */
.sky-jade   { --sky-a: #BFE3D5; --sky-b: #D7CDF2; }   /* Азия: jade → lavender */
.sky-dawn   { --sky-a: #D4C7F2; --sky-b: #F4CFBE; }   /* Кавказ и Центральная Азия: lavender → peach */
.sky-rose   { --sky-a: #F2C4CB; --sky-b: #F7DEC6; }   /* Европа: rose → blush */
.sky-lagoon { --sky-a: #B6DEDA; --sky-b: #F5D7B6; }   /* Африка, острова и Карибы: lagoon → sand */
.sky-dusk   { --sky-a: #CADBF1; --sky-b: #E6D1EE; }   /* Регионы и весь мир: sky → lilac */
.deps__group { --tag-sky: linear-gradient(172deg, var(--sky-a, var(--lav)) 8%, var(--sky-b, var(--peach)) 92%); }

.deps { display: grid; gap: 40px; }
.deps__gh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 9px; margin-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.deps__gt { font: 750 22px/1.1 var(--f-d); font-stretch: 72%; text-wrap: balance; }
.deps__n { display: inline-flex; align-items: center; gap: 8px; flex: none; font: 650 12px/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.deps__n::before { content: ""; width: 18px; height: 11px; border-radius: 2px; background: var(--tag-sky); box-shadow: 0 0 0 1px var(--rule); }

.tags { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tags > li { display: flex; min-width: 0; }
.tag {
  --sw: 44px;                /* stub width */
  --hy: 14px;                /* eyelet centre, from the top */
  --hr: 4.5px;               /* eyelet hole radius */
  --nr: 6px;                 /* notch radius at the perforation */
  position: relative; flex: 1; display: flex; min-width: 0; min-height: 80px;
  color: var(--ink); text-decoration: none;
  filter: drop-shadow(0 0 .7px var(--tag-edge)) drop-shadow(0 7px 9px var(--tag-drop));
}
.tag__paper {
  position: relative; flex: 1; display: flex; min-width: 0; background: var(--ticket);
  border-radius: 0 var(--r) var(--r) 0;
  /* the tag end: two cut corners, like a real luggage tag */
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  -webkit-mask:
    radial-gradient(circle var(--hr) at calc(var(--sw) / 2) var(--hy), #0000 calc(100% - .6px), #000),
    radial-gradient(circle var(--nr) at var(--sw) 0, #0000 calc(100% - .6px), #000),
    radial-gradient(circle var(--nr) at var(--sw) 100%, #0000 calc(100% - .6px), #000);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--hr) at calc(var(--sw) / 2) var(--hy), #0000 calc(100% - .6px), #000),
    radial-gradient(circle var(--nr) at var(--sw) 0, #0000 calc(100% - .6px), #000),
    radial-gradient(circle var(--nr) at var(--sw) 100%, #0000 calc(100% - .6px), #000);
  mask-composite: intersect;
}
.tag__stub { position: relative; flex: none; width: var(--sw); display: flex; align-items: flex-end; justify-content: center; padding: calc(var(--hy) + 11px) 0 8px; background: var(--tag-sky); overflow: hidden; filter: var(--pastel-filter); }
.tag__stub::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .6; mix-blend-mode: multiply; pointer-events: none; }
/* the code stays aubergine in any theme: the stub is always pastel */
.tag__code { position: relative; z-index: 1; writing-mode: vertical-rl; transform: rotate(180deg); font: 800 16px/1 var(--f-d); font-stretch: 128%; letter-spacing: .03em; color: var(--on-pastel); white-space: nowrap; }
/* reinforcement ring around the punched hole */
.tag__eyelet { position: absolute; left: calc(var(--sw) / 2 - var(--hr) - 3.5px); top: calc(var(--hy) - var(--hr) - 3.5px); width: calc(2 * var(--hr) + 7px); height: calc(2 * var(--hr) + 7px); border-radius: 50%; border: 3.5px solid rgba(255, 252, 246, .9); box-shadow: 0 0 0 .6px rgba(34, 26, 51, .22), inset 0 0 0 .6px rgba(34, 26, 51, .28), 0 1px 1.5px rgba(34, 26, 51, .18); pointer-events: none; }
.tag__body {
  position: relative; flex: 1; min-width: 0; display: grid; align-content: center;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name fare" "sub fare";
  gap: 2px 12px; padding: 10px 14px 10px 15px;
}
/* the perforation between stub and body, stopping short of the notches */
.tag__body::before { content: ""; position: absolute; left: 0; top: calc(var(--nr) + 3px); bottom: calc(var(--nr) + 3px); width: 1.5px; background: repeating-linear-gradient(180deg, var(--perf) 0 4px, transparent 0 9px); }
.tag__lab { grid-area: lab; display: none; font-size: 11px; } /* phones: the compact tag drops «Куда» */
/* the country is what people scan for: the name and flag are the loudest thing on the tag after the code */
.tag__name { grid-area: name; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* phones: the size follows the screen so the longest single word («Саудовская», «Таджикистан») fits whole — a name
   may wrap between words, never inside one */
.tag__name b { font: 780 clamp(19px, 5.7vw, 24px)/1.05 var(--f-d); font-stretch: 78%; letter-spacing: -.005em; min-width: 0; overflow-wrap: normal; }
.tag__flag { display: flex; flex: none; }
.tag__flag .flag { --w: 30px; width: 30px; border-radius: 3px; box-shadow: 0 0 0 1px var(--flag-edge), 0 2px 4px -1px rgba(var(--sh), .28); }
.tag__sub { grid-area: sub; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.tag__fare { grid-area: fare; align-self: center; }
.tag__no, .tag__perf, .tag__net { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tag:hover { filter: drop-shadow(0 0 .7px var(--tag-edge)) drop-shadow(0 0 .7px var(--tag-edge)) drop-shadow(0 14px 14px var(--tag-drop)) drop-shadow(0 4px 4px var(--tag-drop)); }
  .tag:hover .tag__name b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .16em; }
}
.tag:focus-visible { outline-offset: 4px; border-radius: var(--r); }
/* narrow phones: the name gets the full width, the price moves down beside the cities */
@media (max-width: 374px) {
  .tag__body { grid-template-areas: "name name" "sub fare"; column-gap: 10px; }
  .tag__fare { align-self: end; }
}

.deps__empty { font-size: 16px; padding: 18px; background: var(--ticket); border: 1px dashed var(--rule-2); border-radius: var(--r); }
.deps__empty a { font-weight: 600; }
.deps [hidden] { display: none !important; }

/* tablet and up: the full printed tag — number, perforation, Сеть | Цена от */
@media (min-width: 700px) {
  .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .tag { --sw: 54px; --hy: 18px; --nr: 7px; min-height: 136px; }
  .tag__stub { padding: calc(var(--hy) + 14px) 0 11px; }
  .tag__code { font-size: 20px; font-stretch: 150%; }
  .tag__body {
    align-content: stretch; grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: "lab no" "name name" "sub sub" "perf perf" "net fare"; gap: 3px 12px; padding: 11px 16px 12px 17px;
  }
  .tag__lab { display: block; margin-bottom: 1px; }
  .tag__name { gap: 11px; margin: 2px 0 1px; }
  /* the longest word must fit the tag at every width (Азербайджан, Таджикистан in a 3-column row at 1000–1440):
     width left for it = tag body − flag − gap, at ≤ .76 em per letter (the widest measured: Филиппины .75) */
  .tag__body { container-type: inline-size; }
  .tag__name b { font-size: clamp(17px, calc((100cqi - 45px) / (var(--nc, 8) * .76)), 27px); }
  .tag__flag .flag { --w: 34px; width: 34px; }
  .tag__no { display: block; grid-area: no; justify-self: end; font-size: 11px; white-space: nowrap; }
  .tag__perf { display: block; grid-area: perf; height: 1.5px; margin: 7px 0 6px; background: repeating-linear-gradient(90deg, var(--perf) 0 5px, transparent 0 11px); }
  .tag__net { display: flex; grid-area: net; align-self: end; }
  .tag__net .lbl { white-space: nowrap; }
  .tag__net .val { font-size: 15px; line-height: 20px; }
  .tag__fare .val.price { line-height: 20px; } /* both value boxes 20 px, so «СЕТЬ» and «ЦЕНА ОТ» sit on one line */
  .tag__fare { align-self: end; }
}
@media (min-width: 1000px) {
  .tags { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; }
}
/* wide: the region title moves to a sticky left column, like a departures board's gate sign */
@media (min-width: 1240px) {
  .deps { gap: 56px; }
  .deps__group { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .deps__gh { position: sticky; top: 84px; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 0 0; border-bottom: 0; border-top: 1.5px solid var(--ink); }
  .deps__gt { font-size: 30px; font-stretch: 60%; line-height: 1.02; }
}
@media (min-width: 1400px) {
  .deps__group { grid-template-columns: 250px minmax(0, 1fr); gap: 0 44px; }
}

/* ---------- region passes ---------- */
.rpasses { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--g)); padding: 4px var(--g) 24px; scroll-padding-inline: var(--g); scrollbar-width: none; }
.rpasses::-webkit-scrollbar { display: none; }
.rpasses > .rpass { flex: 0 0 min(84vw, 340px); scroll-snap-align: start; }
.rpass { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--ticket); border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; text-decoration: none; box-shadow: 0 18px 32px -26px rgba(var(--sh), .5); }
.rpass__win { position: relative; display: block; aspect-ratio: 2.1 / 1; overflow: hidden; }
.rpass__win .art { position: absolute; inset: 0; width: 100%; height: calc(100% + var(--mist-crop)); object-fit: cover; object-position: 50% 70%; -webkit-mask-image: linear-gradient(#000 calc(60% + var(--fade-lift)), transparent); mask-image: linear-gradient(#000 calc(60% + var(--fade-lift)), transparent); }
.rpass__body { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 0 18px 18px; }
/* the code and «33 страны» share a row; on a 320 px phone the card is 269 px wide, so the code narrows (28 px, 160 %)
   and the row may wrap instead of pushing the card wider than itself */
.rpass__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.rpass__code { font: 800 34px/1 var(--f-d); font-stretch: 190%; }
@media (max-width: 359px) { .rpass__code { font-size: 28px; font-stretch: 160%; } } /* EUR + «33 страны» in one row at 320 */
.rpass__count { font: 650 13px/1 var(--f-d); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rpass__name { font: 750 26px/1.1 var(--f-d); font-stretch: 68%; }
.rpass__list { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.rpass__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; margin-top: 8px; background: linear-gradient(90deg, var(--perf) 50%, transparent 0) top / 11px 1.5px repeat-x; }
.rpass__foot .fld .val { font-size: 14px; }
.rpass__foot .fld--r { margin-left: auto; }
@media (min-width: 760px) {
  .rpasses { display: grid; gap: 18px; overflow: visible; margin: 0; padding: 0; }
  .rpasses > .rpass { flex: none; }
  .rpass { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .rpass__win { aspect-ratio: auto; min-height: 250px; }
  .rpass__win::after { left: auto; top: 0; width: 1px; height: auto; } /* the painting is the left column here */
  .rpass__win .art { -webkit-mask-image: linear-gradient(90deg, #000 calc(62% + var(--fade-lift)), transparent); mask-image: linear-gradient(90deg, #000 calc(62% + var(--fade-lift)), transparent); }
  .rpass__body { padding: 22px 24px 22px 6px; align-content: start; }
}
@media (min-width: 1100px) {
  .rpasses { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .rpass { grid-template-columns: minmax(0, 1fr); }
  .rpass__win { aspect-ratio: 4 / 3; min-height: 0; }
  .rpass__win::after { left: 0; top: auto; width: auto; height: 1px; }
  .rpass__win .art { -webkit-mask-image: linear-gradient(#000 calc(64% + var(--fade-lift)), transparent); mask-image: linear-gradient(#000 calc(64% + var(--fade-lift)), transparent); }
  .rpass__body { padding: 0 22px 22px; }
}

/* ---------- journey: four stops ---------- */
.journey { position: relative; display: grid; gap: 0; counter-reset: stop; }
.journey::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, var(--ink-3) 0 3px, transparent 0 9px); }
.stop { position: relative; display: grid; gap: 6px; padding: 0 0 28px 44px; counter-increment: stop; }
.stop__dot { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--ink); display: grid; place-items: center; }
.stop__dot::after { content: counter(stop); font: 800 11px/1 var(--f-d); font-stretch: 120%; }
.stop h3 { font: 750 23px/1.1 var(--f-d); font-stretch: 74%; }
.stop p { color: var(--ink-2); font-size: 15.5px; max-width: 30em; }
.stop--go h3 { background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); justify-self: start; padding: 4px 10px 5px; margin-left: -10px; border-radius: 3px; }
.stop--go .stop__dot { background: var(--inv-bg); }
.stop--go .stop__dot::after { color: var(--inv-fg); }
@media (min-width: 1000px) {
  .journey { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .journey::before { left: 12px; right: 12%; top: 11px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 0 9px); }
  .stop { padding: 44px 0 0; align-content: start; }
  .stop--go h3 { margin-left: 0; }
}

/* ---------- comparison ---------- */
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--rule); }
.cmp thead th { font: 650 12px/1.25 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1.5px solid var(--ink); }
.cmp tbody th { font-weight: 600; width: 22%; }
.cmp td { color: var(--ink-2); }
.cmp .cmp__us { color: var(--ink); font-weight: 600; background: linear-gradient(90deg, var(--peach), transparent 85%); padding-left: 14px; }
.cmp thead .cmp__us { color: var(--ink); background: var(--peach); }
@media (max-width: 759px) {
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .cmp tbody th { grid-column: 1 / -1; width: auto; padding: 0; border: 0; font: 650 12px/1.25 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .cmp td { padding: 0; border: 0; font-size: 14px; }
  .cmp td::before { content: attr(data-l); display: block; font-size: 12px; color: var(--ink-3); font-weight: 500; }
  .cmp .cmp__us { grid-column: 1 / -1; padding: 8px 12px; border-radius: 3px; font-size: 16px; }
  .cmp .cmp__us::before { color: var(--act-ink); font-weight: 600; }
}

/* ---------- compatibility ---------- */
.compat-wrap { position: relative; }
.compat { display: grid; gap: 28px; }
.keys { display: flex; gap: 8px; margin-bottom: 18px; }
.keys kbd { display: grid; place-items: center; width: clamp(50px, 14vw, 76px); aspect-ratio: 1; border-radius: 50%; background: var(--ticket); border: 1.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 700 clamp(22px, 6vw, 32px)/1 var(--f-d); font-stretch: 110%; }
.compat__lead { font-size: 18px; max-width: 26em; }
.compat__alt { color: var(--ink-2); margin-top: 8px; }
.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec caption { text-align: left; padding-bottom: 10px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 11px 0; border-top: 1px solid var(--rule); }
.spec th { width: 6.5em; font-weight: 600; padding-right: 12px; }
.spec td { color: var(--ink-2); }
.note { font-size: 15px; padding: 14px 16px; border-radius: var(--r); background: var(--ticket); border: 1px solid var(--rule-2); }
.note--warn { border-left: 4px solid var(--act); }
.compat__list .note { margin-top: 16px; }
.stamp { width: 150px; height: 150px; color: var(--stamp); transform: rotate(var(--rot, -8deg)); mix-blend-mode: var(--stamp-blend); opacity: .88; }
.stamp text { font-family: var(--f-d); font-weight: 750; font-stretch: 120%; }
.stamp .stamp__big { font-weight: 800; font-stretch: 140%; }
.compat__dial { position: relative; }
.compat__dial .stamp { position: absolute; right: -4px; top: 76px; width: 104px; height: 104px; }
.compat__dial .stamp + .keys + .compat__lead { padding-right: 96px; }
@media (min-width: 760px) {
  .compat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
  .compat__dial .stamp { right: 0; top: -14px; width: 138px; height: 138px; }
  .compat__dial .stamp + .keys + .compat__lead { padding-right: 0; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 26px; }
.faq__side { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.faq__side .sec__note { justify-self: start; }
.qa-list { border-top: 1.5px solid var(--ink); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { display: grid; grid-template-columns: 2.4em 1fr 24px; gap: 8px; align-items: baseline; padding: 16px 0; cursor: pointer; list-style: none; min-height: 56px; }
.qa summary::-webkit-details-marker { display: none; }
.qa__n { font: 650 12px/1 var(--f-d); letter-spacing: .08em; color: var(--ink-3); }
.qa__q { font-weight: 600; font-size: 17px; line-height: 1.35; text-wrap: pretty; }
.qa__x { position: relative; width: 16px; height: 16px; align-self: center; }
.qa__x::before, .qa__x::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--ink); transition: transform var(--t-fast) var(--ease-out); }
.qa__x::after { transform: rotate(90deg); }
.qa[open] .qa__x::after { transform: rotate(0); }
.qa p { padding: 0 8px 20px calc(2.4em + 8px); color: var(--ink-2); max-width: 44em; }
@media (max-width: 759px) { .qa p { padding-left: 0; } }
@media (min-width: 1000px) {
  .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; }
  .qa-list { border-top: 1.5px solid var(--ink); }
}

/* ---------- horizon frieze + footer ---------- */
.frieze { --fh: 170px; position: relative; height: var(--fh); overflow: hidden; margin-top: 24px; -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); }
.frieze__track { display: flex; height: 100%; width: max-content; }
.frieze__item { position: relative; flex: none; display: block; height: 100%; margin-right: var(--fo, -64px); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.frieze__track img { height: calc(100% + var(--mist-crop)); width: calc(var(--fh) * 420 / 466); max-width: none; aspect-ratio: 420 / 466; object-fit: cover; object-position: 50% 80%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); transition: transform var(--t-med) var(--ease-out); }
/* a printed name label: always on touch screens, on hover / focus with a mouse */
.frieze__cap { position: absolute; left: 50%; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; transform: translateX(-50%);
  padding: 5px 9px 5px 7px; border-radius: 3px; background: var(--ticket); box-shadow: 0 0 0 1px var(--rule), 0 8px 14px -8px rgba(var(--sh), .45);
  font: 650 12px/1.2 var(--f-t); white-space: nowrap; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.frieze__cap .flag { width: 20px; }
/* touch: every label is always visible, so it carries only the short name and the paintings overlap less, so
   neighbouring labels never collide; the full «eSIM для …» stays in the link name for screen readers */
.frieze__short { display: none; }
@media (hover: none), (pointer: coarse) {
  .frieze { --fo: -38px; }
  .frieze__cap { bottom: 10px; gap: 5px; padding: 4px 7px 4px 5px; font-size: 11.5px; }
  .frieze__cap .flag { width: 16px; }
  .frieze__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .frieze__short { display: inline; }
}
.frieze__item:focus-visible { outline: 0; }
.frieze__item:focus-visible .frieze__cap { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .frieze__cap { opacity: 0; transform: translate(-50%, 6px); }
  .frieze__item:hover, .frieze__item:focus-visible { z-index: 2; }
  .frieze__item:hover .frieze__cap, .frieze__item:focus-visible .frieze__cap { opacity: 1; transform: translate(-50%, 0); }
  .frieze__item:hover img { transform: translateY(-6px); }
}
/* beats the pan shorthand in the motion block (same specificity would lose to it, being earlier) */
.frieze.is-live:is(:hover, :focus-within) .frieze__track { animation-play-state: paused; }
@media (min-width: 1000px) { .frieze { --fh: 230px; } }
.foot { background: var(--deep); color: #E9E2F2; padding: 52px 0 calc(40px + env(safe-area-inset-bottom, 0px)); position: relative; font-size: 15px; }
.foot::before { /* scalloped stamp edge */ content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px; background: radial-gradient(circle at 10px 0, transparent 7px, var(--deep) 7.5px) 0 0 / 20px 10px repeat-x; }
.foot a { color: #fff; }
.foot .lbl { color: #B7ACC8; }
.foot__grid { display: grid; gap: 32px; }
.foot__brand p { margin-top: 14px; max-width: 26em; color: #D2C8E0; }
.foot__facts { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.foot__facts dd { margin-top: 2px; }
.foot__facts dd a { display: inline-flex; align-items: flex-start; min-height: 44px; } /* text stays on the dd baseline, the extra hit area hangs below */
.foot__legal { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 34px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); }
.foot__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__all { margin-top: 18px; }
.foot__all p:last-child { margin-top: 10px; font-size: 13.5px; line-height: 2.35; color: #B7ACC8; }
.foot__all a { color: #D8CFE6; text-decoration: none; display: inline-block; }
/* touch screens: 44 px rows, so every one of the 42 links is a full tap target (a mouse keeps the compact 32 px).
   Below 760 px the list is a fold, closed by app.js, so the taller rows do not lengthen the phone footer. */
@media (pointer: coarse), (max-width: 759px) { .foot__all p:last-child { line-height: 44px; } .foot__all a { line-height: 44px; } }
@media (max-width: 759px) {
  .foot__all-h { display: none; }
  .foot .fold__sum { color: var(--on-deep); border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 0; }
  .foot .fold__x::before, .foot .fold__x::after { background: var(--on-deep); }
  .foot__fold[open] .fold__sum { border-bottom: 0; }
  .foot__all p:last-child { margin-top: 0; }
}
.foot__all a:hover { color: #fff; text-decoration: underline; }
.foot__copy { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: 13.5px; color: #B7ACC8; }
.foot--mini { padding: 26px 0; margin-top: 40px; }
.foot--mini::before { display: none; }
.foot--mini .foot__copy { margin: 0; }
.foot--mini a { display: inline-flex; min-height: 44px; align-items: center; }
@media (min-width: 1000px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .foot__facts { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   DESTINATION — the page is one boarding pass
   ========================================================================== */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; color: var(--ink-2); padding-top: 4px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs > span[aria-current] { color: var(--ink); font-weight: 500; }
.dest { padding: 2px 0 20px; }

.pass { position: relative; display: grid; }
.pass__art { position: relative; height: 240px; margin: -1px -18px 4px; pointer-events: none; }
.pass__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  -webkit-mask-image: radial-gradient(closest-side, #000 var(--vig), transparent 100%);
  mask-image: radial-gradient(closest-side, #000 var(--vig), transparent 100%); object-position: 50% var(--fy, 40%); }
.pass__label { position: absolute; z-index: 1; left: 12px; bottom: 6px; width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--ticket); transform: rotate(-9deg); box-shadow: 0 10px 18px -10px rgba(var(--sh), .5); }
.pass__scene { z-index: 0; }
/* night: the oval is a lit porthole — a near-crisp edge (--vig 93 %) inside a cream hairline frame, instead of a
   pale haze dissolving into the dark ticket (that read as grey fog). By day --ring is transparent. */
.pass__art:has(> .pass__scene)::after, .opass__art:has(> .art)::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ring); pointer-events: none; }
.pass--type .pass__art { height: 330px; margin: 0 0 6px; }
.pass--type .twin { border-radius: 4px; }

/* the sheet: body + stub, notched where they meet */
.pass__sheet { position: relative; display: grid; filter: drop-shadow(var(--sheet-edge)) drop-shadow(0 22px 26px rgba(var(--sh), .13)); }
.pass__body, .pass__stub { background: var(--ticket); position: relative; min-width: 0; }
.pass__body { border-radius: var(--r) var(--r) 0 0;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; }
.pass__stub { border-radius: 0 0 var(--r) var(--r);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; }
.pass__stub::before { content: ""; position: absolute; left: calc(var(--notch) + 6px); right: calc(var(--notch) + 6px); top: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--perf) 0 6px, transparent 0 12px); }

.pass__band { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 14px 18px 12px; font: 650 12px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.pass__band-r { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.pass__band-r .flag { width: 22px; }
.pass__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 18px 22px; }

/* ДОМ ✈ TUR. The codes are sized against the route's own width (container units), never the viewport:
   the ticket body is «viewport − stub − padding», capped by --max, so a vw size outgrew it from ~1500 px
   and slid under the stub's perforation. Budget: width = two 8 px gaps + the dotted line's reserve
   (--route-p of the width, at least --route-line) + codes at --route-k em. --route-k is «ДОМ» plus the
   widest ISO3 code («OMN», with split-flap cell gaps) measured in Furfur Gothic 800 at this stretch,
   so every destination gets the same size and none can overflow. The vw clamp is the fallback without cqi.
   Three rows — labels, codes, notes — shared by both ends (the two .route__pt are display: contents), so «ДОМ» and
   «ARM» always sit on one line even when only one note wraps (at 320 px «ставите до вылета» takes two lines). */
.route { --route-line: 30px; --route-p: .16; --route-k: 9.3; --route-max: 80px;
  container-type: inline-size; display: grid; grid-template-columns: auto minmax(var(--route-line), 1fr) auto;
  grid-template-rows: auto auto auto; align-items: end; gap: 3px 8px; min-width: 0; }
.route__pt { display: contents; }
.route__pt > .lbl { grid-row: 1; }
.route__pt > .route__code { grid-row: 2; }
.route__pt > .route__note { grid-row: 3; align-self: start; }
.route__pt > * { grid-column: 1; }
.route__pt--to > * { grid-column: 3; justify-self: end; text-align: right; }
.route__code { font: 800 clamp(22px, 6.4vw, 46px)/.9 var(--f-d);
  font-size: min(var(--route-max), (100cqi - 16px - max(var(--route-line), var(--route-p) * 100cqi)) / var(--route-k));
  font-stretch: 190%; letter-spacing: -.02em; white-space: nowrap; }
.route__note { font-size: 13px; color: var(--ink-2); }
/* the arc rides the code row; the negative margins keep it from making that row taller than the codes */
.route__line { position: relative; grid-column: 2; grid-row: 2; height: clamp(16px, 9cqi, 38px); align-self: center; margin-block: -8px; color: var(--ink-3); }
.route__line svg:first-child { width: 100%; height: 100%; display: block; }
.route__plane { position: absolute; left: 50%; top: -4px; width: clamp(12px, 40%, 20px); height: auto; aspect-ratio: 1; color: var(--ink); transform: translateX(-50%); } /* a short arc (320 px) gets a smaller plane */
/* site.js flies it along the arc (.route--fly): its position and heading come in as an inline transform */
.route--fly .route__plane { left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
/* the title sits in its own size container and takes the largest size at which its widest word (--lw, in em, from
   site_view.title_em) still fits the column: no country name breaks mid-word at any width */
.pass__title { container-type: inline-size; min-width: 0; }
.pass__h1 { font-size: clamp(44px, 11vw, 80px); font-size: min(clamp(44px, 11vw, 80px), 98cqi / var(--lw, 5)); overflow-wrap: break-word; }
@media (max-width: 379px) { .pass__h1 { font-size: min(38px, 98cqi / var(--lw, 5)); } .opass__h1 { font-size: 38px; } }
.pass__intro { color: var(--ink-2); font-size: 16px; max-width: 36em; }
.jump { display: flex; align-items: center; gap: 10px; justify-content: space-between; min-height: 52px; padding: 0 16px; border-radius: var(--r); background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); text-decoration: none; font-weight: 600; }
.jump b { margin-left: auto; font: 750 18px/1 var(--f-d); font-stretch: 115%; }
.jump:hover { background: var(--act); color: #fff; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fields .fld { padding: 11px 0 12px; border-top: 1px solid var(--rule); gap: 5px; }
.fields .lbl { letter-spacing: .08em; white-space: nowrap; }
/* every value on one line, like the hero facts: copy is kept short (≤ 14 characters, «Великобритания») and the
   long forms live in the facts section / «Детали». Measured to fit a 118 px column at 320 px. */
.fields dd { font-weight: 600; font-size: 15px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 359px) { .fields { column-gap: 12px; } .fields dd { font-size: 14px; } } /* «Великобритания» in a 120 px column */
.fld--inv dd { align-self: flex-start; background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); padding: 2px 8px 3px; margin-left: -8px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* step labels: 1 Пакет · 2 Оплата · 3 Почта · 4 Отметки */
.step { display: flex; align-items: center; gap: 10px; font: 750 21px/1.15 var(--f-d); font-stretch: 76%; margin-bottom: 12px; }
.step__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); font: 800 12px/1 var(--f-d); font-stretch: 120%; flex: none; }

/* packages: a spec table, not pills */
.fares { padding: 20px 18px 30px; border-top: 1.5px solid var(--ink) !important; }
.fares > legend { float: left; width: 100%; }
.fares > legend + * { clear: both; }
.fares__cols { display: flex; justify-content: space-between; padding: 0 0 8px; }
.fare { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "p main cost" "p hint cost"; align-items: center; gap: 2px 12px; padding: 14px 12px 14px 10px; margin: 0 -10px; border-top: 1px solid var(--rule); cursor: pointer; border-radius: 3px; transition: background var(--t-fast); }
.fare:last-of-type { border-bottom: 1px solid var(--rule); }
.fare input { position: absolute; opacity: 0; pointer-events: none; }
.fare__punch { grid-area: p; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: grid; place-items: center; background: var(--ticket); }
.fare__punch::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--act-on-ink); transform: scale(0); transition: transform var(--t-fast) var(--ease-stamp); }
.fare__main { grid-area: main; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fare__gb { font: 750 22px/1 var(--f-d); font-stretch: 118%; }
.fare__days { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.fare__hint { grid-area: hint; font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.fare__cost { grid-area: cost; display: grid; justify-items: end; gap: 4px; }
.fare__price { font: 750 21px/1 var(--f-d); font-stretch: 115%; font-feature-settings: "tnum"; white-space: nowrap; }
.fare__per { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.fare:hover { background: var(--tint); }
.fare:has(input:checked) { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); }
.fare:has(input:checked) + .fare { border-top-color: var(--inv-bg); }
.fare:has(input:checked) .fare__days, .fare:has(input:checked) .fare__hint, .fare:has(input:checked) .fare__per { color: var(--inv-2); }
.fare:has(input:checked) .fare__punch { border-color: var(--act-on-ink); background: transparent; }
.fare:has(input:checked) .fare__punch::after { transform: scale(1); }
.fare:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.stub__vert { display: none; }
.stub__in { display: grid; gap: 26px; padding: 30px 18px 24px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.seg__opt { position: relative; display: grid; gap: 2px; padding: 10px 8px 11px; text-align: center; cursor: pointer; min-height: 58px; align-content: center; }
.seg__opt + .seg__opt { border-left: 1.5px solid var(--ink); }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt b { font-size: 16px; }
.seg__opt small { font-size: 12.5px; color: var(--ink-2); line-height: 1.2; }
.seg__opt:has(input:checked) { background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); }
.seg__opt:has(input:checked) small { color: var(--inv-2); }
.seg__opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -5px; }
/* «Криптовалюта» (115 px) does not fit a third of a phone or desktop stub (252–346 px):
   in a narrow stub the three options become rows — name left, detail right */
.methods { container-type: inline-size; }
@container (max-width: 419px) {
  .seg { grid-template-columns: 1fr; }
  .seg__opt { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; min-height: 48px; padding: 11px 14px; text-align: left; }
  .seg__opt small { text-align: right; }
  .seg__opt + .seg__opt { border-left: 0; border-top: 1.5px solid var(--ink); }
}

.field { display: grid; gap: 0; }
.field .step { margin-bottom: 12px; }
.input { width: 100%; min-height: 54px; padding: 14px 14px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--field); font-size: 17px; }
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.field__hint { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }
.field__err { font-size: 14px; font-weight: 600; color: var(--act-ink); margin-top: 8px; }
.is-err .input { border-color: var(--act); background: var(--field-err); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 10px 0; font-size: 15px; line-height: 1.4; cursor: pointer; min-height: 44px; }
.check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--field); display: grid; place-items: center; cursor: pointer; }
.check input::after { content: ""; width: 12px; height: 7px; border: solid var(--ticket); border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform var(--t-fast) var(--ease-stamp); }
.check input:checked { background: var(--ink); }
.check input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.is-err .check input:not(:checked) { border-color: var(--act); box-shadow: 0 0 0 3px rgba(200, 68, 42, .18); }

/* «К оплате»: the price changes with the package (89 ₽ … 17 570 ₽). Selection and price share a row while
   they fit; a longer price drops to its own row instead of crushing the selection or sliding under the
   stub's edge. 13.6cqi keeps even «17 570 ₽» (7.06 em) inside the narrowest stub (252 px). */
.total { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.total .lbl { flex: 0 0 100%; }
.total__sel { flex: 1 1 5.5em; font-size: 14px; color: var(--ink-2); }
.total__price { margin-left: auto; font: 800 clamp(34px, 10vw, 46px)/.9 var(--f-d); font-size: min(46px, 13.6cqi); font-stretch: 130%; font-feature-settings: "tnum"; white-space: nowrap; letter-spacing: -.01em; }
.btn-go { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 20px; border: 0; border-radius: var(--r); background: var(--act); color: #fff; font: 600 18px/1.1 var(--f-t); cursor: pointer; text-decoration: none; box-shadow: 0 3px 0 var(--act-edge); transition: background var(--t-fast), transform var(--t-fast); }
.btn-go:hover { background: var(--act-hover); }
.btn-go:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--act-edge); }
.btn-go .ico { width: 22px; height: 22px; }
.btn-go span { text-wrap: balance; }
.total + .btn-go { margin-top: -10px; }
.stub__note { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.stub__trust { display: grid; gap: 8px; font-size: 14px; padding: 14px 0 0; border-top: 1px solid var(--rule); }
.stub__trust li { padding-left: 18px; position: relative; }
.stub__trust li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
.stub__trust a { font-weight: 600; }
.stub__trust li:has(> .tap)::before { top: calc(50% - 5px); }
.barcode { width: 100%; height: 34px; fill: var(--ink); opacity: .2; }

/* sticky price bar on phones */
.buybar { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--raise); color: var(--on-deep); box-shadow: inset 0 1px 0 var(--raise-edge); transform: translateY(0); }
.buybar[hidden] { display: block; transform: translateY(110%); visibility: hidden; } /* the slide: motion block */
.buybar__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 560px; margin: 0 auto; }
.buybar__sum { display: grid; line-height: 1.15; }
.buybar__sum b { font: 800 22px/1 var(--f-d); font-stretch: 125%; }
.buybar__sum > span { font-size: 13.5px; color: var(--on-deep-2); }
.buybar__go { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: var(--r); background: var(--act); color: #fff; font-weight: 600; text-decoration: none; }
@media (min-width: 1000px) { .buybar { display: none !important; } }
/* keyboard focus must not scroll in behind the fixed bar (WCAG 2.2 2.4.11): the browser keeps a focused element
   this far above the bottom edge. The bar is 68 px + the safe area; 84 px leaves the focus ring clear of it. */
@media (max-width: 999px) { html:has(.buybar) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* facts, install, preview */
.facts { display: grid; gap: 0 32px; }
.facts > div { display: grid; gap: 6px; align-content: start; padding: 16px 0 18px; border-top: 1px solid var(--rule); } /* start: a taller neighbour in the row must not push the bold head down */
.facts dd { color: var(--ink-2); font-size: 15px; }
.facts dd b { display: block; font: 750 24px/1.1 var(--f-d); font-stretch: 72%; color: var(--ink); margin-bottom: 6px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .facts { grid-template-columns: repeat(3, 1fr); } }

.install { display: grid; gap: 40px; }
.preview { margin: 0; display: grid; gap: 14px; justify-items: center; }
.preview figcaption { font-size: 14px; color: var(--ink-2); max-width: 26em; text-align: center; }
.mini { width: min(100% - 16px, 320px); background: var(--ticket); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 0 0 16px; box-shadow: 0 26px 40px -28px rgba(var(--sh), .55); transform: rotate(1.4deg); display: grid; gap: 12px; }
.mini__band { display: flex; justify-content: space-between; padding: 12px 14px; font: 650 10.5px/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.mini__route { display: flex; align-items: center; gap: 10px; padding: 0 14px; font: 800 26px/1 var(--f-d); font-stretch: 190%; }
.mini__route span { color: var(--ink-3); font-size: 15px; }
.mini__route i { flex: 1; height: 1.5px; background: repeating-linear-gradient(90deg, var(--perf) 0 2px, transparent 0 7px); }
.mini__row { display: flex; justify-content: space-between; align-items: center; padding: 0 14px; font-size: 13px; }
.mini__chip { font-weight: 600; font-size: 12.5px; padding: 4px 8px; border-radius: 3px; background: var(--lav); }
.mini__qr { position: relative; margin: 2px 14px 0; aspect-ratio: 1.5; border: 1.5px dashed var(--rule-2); border-radius: 3px; display: grid; place-items: center; background: var(--field); }
.mini__qr span { position: absolute; width: 26px; height: 26px; border: 5px solid var(--ink); opacity: .22; }
.mini__qr span:nth-child(1) { left: 12px; top: 12px; } .mini__qr span:nth-child(2) { right: 12px; top: 12px; } .mini__qr span:nth-child(3) { left: 12px; bottom: 12px; }
.mini__qr em { font-style: normal; font-size: 12.5px; color: var(--ink-3); max-width: 12em; text-align: center; }
.mini__btn { margin: 0 14px; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r); background: var(--act); color: #fff; font-weight: 600; font-size: 14px; }
.mini__fields { display: flex; justify-content: space-between; padding: 0 14px; font-size: 13px; font-weight: 600; }
.mini__fields span { display: grid; gap: 3px; }
.mini__fields i { font-style: normal; font-size: 10px; }
@media (min-width: 1000px) { .install { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: center; } .install .journey { grid-template-columns: 1fr 1fr; } .install .journey::before { display: none; } }

/* ---------- destination: desktop layout ---------- */
@media (min-width: 760px) {
  .pass__band, .pass__top, .fares, .stub__in { padding-inline: 28px; }
  .pass__art { height: 320px; margin-inline: -28px; }
  .pass--type .pass__art { margin-inline: 0; }
  .fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .pass { --stub: 390px; padding-top: 12px; }
  .pass__sheet { grid-template-columns: minmax(0, 1fr) var(--stub); }
  .pass__body { border-radius: var(--r) 0 0 var(--r);
    -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
  .pass__stub { border-radius: 0 var(--r) var(--r) 0;
    -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
  .pass__stub::before { left: 0; right: auto; top: calc(var(--notch) + 6px); bottom: calc(var(--notch) + 6px); width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--perf) 0 6px, transparent 0 12px); }
  .stub__in { position: sticky; top: 76px; padding: 26px 30px 26px 34px; gap: 22px; }
  .stub__vert { display: block; position: absolute; right: 8px; top: 30px; writing-mode: vertical-rl; font: 650 10.5px/1 var(--f-d); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); opacity: .7; }
  .pass__band { padding: 16px 32px 14px; }
  .pass__top { padding: 22px 32px 30px; }
  .pass__top > .pass__art { margin: -22px -32px 6px; height: 300px; }
  .pass--type .pass__top > .pass__art { margin: 0 0 6px; }
  .route__note { font-size: 14px; }
  .jump { display: none; }
  .fares { padding: 26px 32px 34px; }
  /* the price column is as wide as «1 390 ₽» in every row, so the hint column is the same in every row; inside it the
     hints share one left edge, and the block (as wide as the longest hint, 23.6 em) sits in the middle of the column.
     A longer price only widens its own row. */
  .fare { grid-template-columns: 26px minmax(9em, .9fr) minmax(0, 1.4fr) minmax(7.5em, max-content); grid-template-areas: "p main hint cost"; padding: 16px 14px; margin: 0 -14px; gap: 16px; }
  .fare__main { flex-direction: column; gap: 4px; }
  .fare__hint { justify-self: center; width: min(100%, 24em); text-align: left; }
}
@media (min-width: 1240px) {
  .pass__top { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); grid-template-areas: "route route" "h1 art" "intro art" "fields art"; grid-template-rows: auto auto auto 1fr; gap: 18px 36px; padding: 22px 32px 30px; }
  .pass__top > .route { grid-area: route; padding-bottom: 6px; }
  .pass__top > .pass__title { grid-area: h1; align-self: end; }
  .pass__top > .pass__intro { grid-area: intro; }
  .pass__top > .fields { grid-area: fields; grid-template-columns: 1fr 1fr; align-self: start; }
  .pass__top > .pass__art { grid-area: art; height: auto; min-height: 430px; margin: -30px 0 -30px 0; }
  .pass__scene { -webkit-mask-image: radial-gradient(closest-side, #000 calc(var(--vig) + 2%), transparent 100%); mask-image: radial-gradient(closest-side, #000 calc(var(--vig) + 2%), transparent 100%); }
  .pass__label { width: 120px; height: 120px; left: 4px; bottom: 34px; }
  .pass--type .pass__art { margin: 0; min-height: 440px; }
}
@media (min-width: 1280px) {
  .pass { --stub: 410px; }
  .pass__h1 { font-size: min(88px, 98cqi / var(--lw, 5)); }
}
/* long country names on the order page (Азербайджана, Таджикистана, путешествий…): one size down; the country
   page fits its title to the column instead (.pass__title above) */
.opass--long .opass__h1 { font-size: clamp(32px, 9vw, 56px); }
@media (min-width: 1000px) {
  .opass--long .opass__main { grid-template-areas: "route route" "h1 h1" "status art" "fields art" "usage usage"; }
}

/* ==========================================================================
   ORDER PAGE — the issued pass
   ========================================================================== */
.top--order { position: static; }
.top--order .top__in, .foot--mini .wrap { max-width: 1280px; } /* line up with the order sheet (same width as the destination pass) */
.order { max-width: 1280px; padding-top: 18px; }
.opass { position: relative; display: grid; }
.opass__main > .opass__art { order: -1; }
.opass__art { position: relative; height: 190px; margin: -18px -18px 0; pointer-events: none; }
.opass__art .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fy, 40%); -webkit-mask-image: radial-gradient(closest-side, #000 var(--vig), transparent 100%); mask-image: radial-gradient(closest-side, #000 var(--vig), transparent 100%); }
/* no painting: the «Куда именно» window, framed inside the pass like on the destination page */
.opass--type .opass__art { height: 300px; margin: -4px 0 0; }
.opass--type .twin { border-radius: 4px; }
.opass__sheet { display: grid; filter: drop-shadow(var(--sheet-edge)) drop-shadow(0 22px 26px rgba(var(--sh), .13)); }
.opass__body, .opass__stub { background: var(--ticket); position: relative; min-width: 0; }
.opass__body { border-radius: var(--r) var(--r) 0 0; -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat; }
.opass__stub { border-radius: 0 0 var(--r) var(--r); padding: 28px 18px 24px; display: grid; gap: 14px; -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat; }
.opass__stub::before { content: ""; position: absolute; left: calc(var(--notch) + 6px); right: calc(var(--notch) + 6px); top: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--perf) 0 6px, transparent 0 12px); }

.opass__main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 18px 24px; }
.opass .route { --route-max: 54px; } /* the issued pass: the code stays below the 60 px title */
.opass__h1 { font-size: clamp(38px, 9vw, 60px); }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 6px 12px 7px; border-radius: 3px; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip--ready { background: var(--lav); color: var(--ready-fg); }
.chip--ok { background: var(--ok-bg); color: var(--ok); }
.status__time { font-size: 14px; color: var(--ink-2); }
.opass .stamp { position: absolute; right: 8px; top: 8px; width: 112px; height: 112px; z-index: 2; }
.fields--order { grid-template-columns: 1fr 1fr; }
.usage { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
.usage__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.usage__val { font-size: 15px; }
.usage__val b { font: 800 26px/1 var(--f-d); font-stretch: 125%; }
.usage__used { margin-left: auto; font-size: 14px; color: var(--ink-2); }
.usage__bar { height: 12px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(var(--ink-rgb), .12) 0 2px, transparent 0 6px), var(--paper-2); overflow: hidden; }
.usage__bar span { display: block; height: 100%; width: var(--p); background: var(--ink); border-radius: 2px; }
.usage__note { font-size: 13.5px; color: var(--ink-2); }
.opass__stub .step { margin: 0; }
.btn-go--apple { min-height: 62px; }
.btn-go--apple .ico { width: 22px; height: 22px; }
.hint { font-size: 14px; color: var(--ink-2); }
.qr { margin: 6px 0 0; display: grid; justify-items: center; gap: 10px; }
.qr__plate { background: #fff; padding: 10px; border-radius: 4px; border: 1px solid var(--rule-2); width: min(240px, 72vw); }
.qr__plate svg { display: block; width: 100%; height: auto; }
.qr figcaption { font-size: 13.5px; color: var(--ink-2); text-align: center; max-width: 22em; }
.big-left { display: grid; gap: 2px; }
.big-left b { font: 800 56px/1 var(--f-d); font-stretch: 130%; }
.big-left span { color: var(--ink-2); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: var(--r); font-weight: 600; text-decoration: none; }
.btn-line:hover { background: var(--ink); color: var(--ticket); }
.order__grid { display: grid; gap: 16px; margin-top: 28px; }
.panel { background: var(--ticket); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 20px 18px; display: grid; gap: 12px; align-content: start; }
.panel .h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.panel .h3 .ico { width: 26px; height: 26px; }
.panel__sub { font-size: 14px; color: var(--ink-2); }
.copyrow { display: grid; gap: 6px; }
.copyrow__in { display: flex; gap: 8px; align-items: stretch; }
.code { flex: 1; min-width: 0; font: 500 14.5px/1.35 var(--f-m); padding: 11px 12px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 4px; word-break: break-all; user-select: all; -webkit-user-select: all; }
.code--plain { background: none; border: 0; padding: 0; }
.btn-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--ticket); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn-copy:hover { background: var(--ink); color: var(--ticket); }
.btn-copy.is-done { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.btn-copy--sm span { display: none; }
@media (min-width: 420px) { .btn-copy--sm span { display: inline; } }
@media (max-width: 479px) { .copyrow .btn-copy { padding: 0 12px; } .copyrow .btn-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.btn-copy.is-done .ico { display: none; }
.btn-copy.is-done::before { content: "✓"; font-weight: 700; }
.how { border-top: 1px solid var(--rule); }
.how summary { display: flex; justify-content: space-between; align-items: center; min-height: 50px; font-weight: 600; cursor: pointer; list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ink-2); }
.how[open] summary::after { content: "–"; }
.how ol { list-style: decimal; padding: 0 0 14px 22px; display: grid; gap: 8px; font-size: 15px; }
.how li::marker { font-weight: 700; color: var(--ink-3); }
.signs { display: grid; gap: 8px; counter-reset: s; }
.signs li { position: relative; padding: 12px 14px 12px 50px; background: var(--paper); border-radius: 4px; font-size: 15px; counter-increment: s; }
.signs li::before { content: counter(s); position: absolute; left: 12px; top: 11px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--ticket); font: 800 12px/1 var(--f-d); font-stretch: 120%; }
.signs__key { background: var(--inv-bg) !important; color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); font-weight: 600; }
.signs__key::before { background: var(--act-on-ink) !important; color: var(--act-on-ink-fg) !important; }
.details { display: grid; }
.details > div { display: grid; gap: 6px; padding: 10px 0 12px; border-top: 1px solid var(--rule); }
@media (min-width: 480px) { .details > div { grid-template-columns: 8.6em 1fr; gap: 12px; align-items: center; } }
.details dd { font-size: 15px; min-width: 0; }
.details .code { word-break: normal; overflow-wrap: anywhere; }
.panel--help { background: var(--raise); color: var(--on-deep); border-color: var(--raise-edge); }
.panel--help .btn-line { border-color: var(--on-deep); color: var(--on-deep); justify-self: start; }
.panel--help .btn-line:hover { background: var(--on-deep); color: var(--raise); }
.panel--help .panel__sub { color: var(--on-deep-2); }
@media (min-width: 760px) {
  .opass__art { height: 240px; margin-inline: -28px; }
  .opass__main, .opass .pass__band { padding-inline: 28px; }
  .opass__stub { padding-inline: 28px; }
  .fields--order { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .order__grid { grid-template-columns: 1fr 1fr; align-items: start; grid-template-areas: "manual how" "arrive details" "warn warn" "help help"; }
  .order__grid > [data-a="manual"] { grid-area: manual; } .order__grid > [data-a="how"] { grid-area: how; }
  .order__grid > [data-a="arrive"] { grid-area: arrive; } .order__grid > [data-a="details"] { grid-area: details; }
  .order__grid > .note { grid-area: warn; } .order__grid > [data-a="help"] { grid-area: help; }
  .panel--help { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
  .panel--help .h3, .panel--help p { grid-column: 1; } .panel--help .btn-line { grid-column: 2; grid-row: 1 / span 3; }
  .opass--live ~ .order__grid { grid-template-areas: "arrive details" "warn warn" "help help"; }
}
@media (min-width: 1000px) {
  .opass { --stub: 390px; padding-top: 40px; }
  .opass__sheet { grid-template-columns: minmax(0, 1fr) var(--stub); }
  .opass__body { border-radius: var(--r) 0 0 var(--r); -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
  .opass__stub { border-radius: 0 var(--r) var(--r) 0; align-content: start; padding: 30px 30px 28px 34px; -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
  .opass__stub::before { left: 0; right: auto; top: calc(var(--notch) + 6px); bottom: calc(var(--notch) + 6px); width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--perf) 0 6px, transparent 0 12px); }
  .opass { padding-top: 0; }
  .opass .pass__band { padding: 16px 32px 14px; }
  .opass__main { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); grid-template-areas: "route route" "h1 art" "status art" "fields art" "usage usage"; gap: 16px 30px; padding: 24px 32px 30px; }
  .opass__main > .route { grid-area: route; }
  .opass__main > .opass__h1 { grid-area: h1; align-self: end; }
  .opass__main > .status { grid-area: status; }
  .opass__main > .fields { grid-area: fields; grid-template-columns: 1fr 1fr; }
  .opass__main > .usage { grid-area: usage; }
  .opass__main > .opass__art { grid-area: art; height: auto; min-height: 300px; margin: -10px -20px -10px 0; }
  .opass--type .opass__main > .opass__art { margin: 0; min-height: 330px; }
  .opass .stamp { top: 110px; right: 20px; }
  .qr__plate { width: 250px; }
  .btn-go--apple { font-size: 17px; padding: 0 16px; }
}

/* ==========================================================================
   MOTION — opt-in only. Without it the page is already in its final state.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* the toggle glyph turns: moon out, sun in (the page itself cross-fades through a view transition in app.js) */
  .theme-tg__i { transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }

  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }

  /* the pass arrives once (never below .6 opacity, so nothing is hidden) */
  .pass__sheet, .opass__sheet { animation: pass-in var(--t-slow) var(--ease-out) both; }
  @keyframes pass-in { from { transform: translateY(22px) rotate(.8deg); opacity: .6; } }
  .route__arc { stroke-dashoffset: 0; animation: arc 1.1s var(--ease-out) .15s both; }
  @keyframes arc { from { stroke-dasharray: 1 6; opacity: 0; } 40% { opacity: 1; } }
  .js .route__plane { animation: glide 1.6s var(--ease-out) .2s both; }
  @keyframes glide { from { transform: translateX(calc(-50% - 60px)) translateY(10px) rotate(-14deg); opacity: 0; } 30% { opacity: 1; } }
  .js .route--fly .route__plane { animation: none; } /* the flight in site.js replaces the one-off glide */

  /* tickets lift and tilt, the painting leans in; region passes lift; the phone price bar slides */
  .tkt { transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
  .tkt__win .art { transition: transform 600ms var(--ease-out); }
  .tkt:active { transform: scale(.985); }
  .rpass { transition: transform var(--t-med) var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .tkt:hover { transform: translateY(-4px) rotate(-.6deg); }
    .tkt:hover .art { transform: scale(1.04); }
    .rpass:hover { transform: translateY(-4px); }
  }
  .buybar { transition: transform var(--t-med) var(--ease-out); }
  .buybar[hidden] { transition: transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med); }

  /* luggage tags swing on their eyelet (the pivot is the punched hole) */
  .tag { transform-origin: calc(var(--sw) / 2) var(--hy); transition: transform var(--t-med) var(--ease-out), filter var(--t-med) var(--ease-out); }
  .tag:active { transform: scale(.985); }
  @media (hover: hover) and (pointer: fine) {
    .tag:hover { transform: translateY(-2px) rotate(1.2deg); } /* hangs a little lower on the right, as if from its eyelet */
  }

  /* the fan deals out */
  .fan__card--l { animation: deal-l var(--t-slow) var(--ease-out) .1s both; }
  .fan__card--r { animation: deal-r var(--t-slow) var(--ease-out) .18s both; }
  .fan__pass { animation: deal-c var(--t-slow) var(--ease-out) both; }
  .fan__label { animation: stamp-in 380ms var(--ease-stamp) .6s both; }
  @keyframes deal-l { from { transform: translateX(30%) rotate(0); } }
  @keyframes deal-r { from { transform: translateX(-30%) rotate(0); } }
  @keyframes deal-c { from { transform: translateX(-50%) translateY(16px) rotate(0); } }
  @keyframes stamp-in { from { transform: scale(1.5) rotate(-6deg); opacity: .3; } }

  /* living illustrations: only while on screen (.is-live set by IntersectionObserver) */
  .is-live .pass__label { animation: drift 7s var(--ease-drift) infinite alternate; }
  @keyframes drift { from { transform: rotate(-9deg); } to { transform: translate3d(3px, -6px, 0) rotate(-6deg); } }
  .frieze.is-live .frieze__track { animation: pan 80s linear infinite; }
  /* the track holds four identical sets of 7; moving by exactly one set loops without a seam */
  @keyframes pan { to { transform: translate3d(calc(-7 * (var(--fh) * 420 / 466 + var(--fo, -64px))), 0, 0); } }
  .is-hidden .frieze__track, .is-hidden .pass__label, .is-hidden .porthole__cloud { animation-play-state: paused; }

  /* window seat: the shade is down when the pass opens, gets a small tug, then rolls up; clouds drift past while
     the window is on screen */
  .porthole__shade { animation: shade-up 1500ms var(--ease-out) 250ms backwards; }
  @keyframes shade-up { from { transform: translateY(-3%); } 30% { transform: translateY(-3%); } 42% { transform: translateY(-22%); } 52% { transform: translateY(-17%); } }
  .is-live .porthole__cloud { animation: cloud 19s linear infinite; }
  .is-live .porthole__cloud--2 { animation-duration: 27s; animation-delay: -11s; }
  @keyframes cloud { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: .85; } 80% { opacity: .85; } 100% { transform: translateX(260%); opacity: 0; } }

  /* scroll reveal with an opacity floor — crawlers and fast scrollers never see empty blocks */
  @supports (animation-timeline: view()) {
    .sec__head, .journey .stop, .deps__group, .rpass, .facts > div, .compat, .cmp tr {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 32%;
    }
    @keyframes rise { from { transform: translateY(22px); opacity: .35; } }
    .pass__scene, .pass__art:has(> .pass__scene)::after, .porthole__glass .art { animation: par linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes par { from { transform: translateY(-10px); } to { transform: translateY(14px); } }
  }

  /* the stub tears on submit (the form is already posting) */
  .pass__stub.is-torn { animation: tear 460ms cubic-bezier(.5, 0, .75, 0) forwards; }
  @keyframes tear { to { transform: rotate(4deg) translate(14px, 60px); opacity: 0; } }

  /* price flip */
  .flip { display: inline-block; animation: flip 300ms var(--ease-out); }
  @keyframes flip { 0% { transform: rotateX(80deg); opacity: .2; } 100% { transform: none; } }

  /* the one stamp lands, once per order */
  .stamp.is-landing { animation: land 420ms var(--ease-stamp) both; }
  @keyframes land { from { transform: scale(2.1) rotate(-18deg); opacity: 0; } }
}

/* split-flap cells (JS builds them only when motion is allowed) */
.sfx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cells { display: inline-flex; gap: .04em; }
/* app.js fixes each card to its final letter's width; a wider drum letter overflows both sides evenly */
.c { position: relative; display: inline-flex; justify-content: center; min-width: .72em; perspective: 3em; }
.c::before { content: attr(data-p); position: absolute; inset: 0; display: flex; justify-content: center; clip-path: inset(0 0 50% 0); background: var(--ticket); backface-visibility: hidden; opacity: 0; }

.methods > legend, .consents > legend { float: left; width: 100%; }
.methods > legend + *, .consents > legend + * { clear: both; }
@media (max-width: 419px) { .pass__band .nocase, .qpass__band .nocase, .band__sep { display: none; } }

@media (max-width: 419px) { .pass__band, .qpass__band { letter-spacing: .07em; font-size: 11.5px; } }
@media (max-width: 359px) { .qpass__band-r .barcode { width: 52px; } }
/* the whole placeholder «Страна или город» has to stay visible next to «Найти» */
@media (max-width: 379px) {
  .qpass__field { padding-left: 4px; }
  .qpass__field .ico { display: none; }
  .qpass__field input { padding-inline: 6px; }
  .qpass__go { padding: 0 14px; }
}

@media (max-width: 379px) {
  .route { --route-k: 8.3; } /* «ДОМ» + «OMN» at 160% */
  .route__code { font-stretch: 160%; }
  .fare__gb { font-size: 19px; }
  .fare__price { font-size: 18px; }
  .logo__word { font-size: 15px; }
  .top__in { gap: 12px; }
}

/* folds: open by default (and without JS); app.js closes them on phones to keep the page short */
.fold__sum { display: none; }
@media (max-width: 759px) {
  .fold__sum { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 2px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); font-weight: 600; cursor: pointer; list-style: none; }
  .fold__sum::-webkit-details-marker { display: none; }
  .fold__x { position: relative; width: 16px; height: 16px; }
  .fold__x::before, .fold__x::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--ink); }
  .fold__x::after { transform: rotate(90deg); transition: transform var(--t-fast) var(--ease-out); }
  .fold[open] .fold__x::after { transform: rotate(0); }
  .fold .spec caption { display: none; }
}
@media (min-width: 1000px) and (max-width: 1239px) { .pass--type .pass__top > .pass__art { height: 380px; } }
@media (min-width: 1000px) and (max-width: 1239px) { .pass__top > .fields { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   PORTHOLE — the window seat (from concept A, recoloured for paper/ink and night)
   The painting sits behind an oval cabin window: frame of ticket paper with a moulded inner ring, a dark rim on
   the glass, a faint diagonal glare, a pull-down shade with a handle. Used on the destination and order passes
   for destinations that have a painting; the others keep the typographic «Куда именно» window.
   ========================================================================== */
.porthole {
  position: relative; margin: 0; width: 100%; aspect-ratio: 31 / 40; padding: 5.5%; border-radius: 50% / 39%;
  background: linear-gradient(155deg, var(--ticket) 25%, var(--paper-2));
  box-shadow: inset 0 0 0 1px var(--rule-2), inset 0 3px 5px -2px rgba(255, 255, 255, .5), 0 28px 42px -30px rgba(var(--sh), .6);
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.porthole::before { content: ""; position: absolute; inset: 2.6%; border-radius: 50% / 39%; box-shadow: inset 0 0 0 1px var(--rule); pointer-events: none; }
.porthole__glass { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 50% / 39%; isolation: isolate;
  background: linear-gradient(180deg, #CBBEF0 0%, #E5C9E4 52%, #F8D9C5 100%); }
.porthole__glass .art { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; object-fit: cover; object-position: 50% var(--fy, 45%);
  -webkit-mask-image: none; mask-image: none; }
/* dark rim + a soft cabin shadow on the glass edge */
.porthole__glass::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--pane-rim), inset 0 12px 26px rgba(40, 24, 80, .22); }
/* a faint diagonal glare on the pane, above the painting and the shade */
.porthole__glass::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, .17) 46%, rgba(255, 255, 255, .05) 52%, transparent 60%); }
.porthole__shade {
  position: absolute; inset: 0; z-index: 2; transform: translateY(-91%); transition: transform 620ms var(--ease-out);
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(var(--sh), .05) 9px 10px), linear-gradient(180deg, var(--shade-1), var(--shade-2));
  border-bottom: 1px solid rgba(34, 26, 51, .3);
}
.porthole__shade::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 22%; height: 4px; margin-left: -11%; border-radius: 3px; background: rgba(34, 26, 51, .4); }
.porthole__cloud { position: absolute; z-index: 1; top: 30%; left: -70%; width: 70%; height: 20%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); }
.porthole__cloud--2 { top: 57%; width: 48%; height: 13%; }
.porthole.is-shut .porthole__shade { transform: translateY(-4%); }
@media (hover: hover) and (pointer: fine) {
  .porthole { cursor: pointer; }
  .porthole:hover .porthole__shade { transform: translateY(-80%); }
  .porthole.is-shut:hover .porthole__shade { transform: translateY(-12%); }
}
@media (prefers-reduced-motion: reduce) { .porthole__shade { transition: none; } }

/* placement: overrides the painted-oval sizes of .pass__art / .opass__art above */
.pass__art:has(> .porthole), .pass__top > .pass__art:has(> .porthole) { height: auto; min-height: 0; margin: 4px 0 12px; display: flex; justify-content: center; align-items: center; }
.pass__art > .porthole { width: min(72%, 290px); }
.opass__art:has(> .porthole), .opass__main > .opass__art:has(> .porthole) { height: auto; min-height: 0; margin: 6px 0 8px; display: flex; justify-content: center; align-items: center; }
.opass__art > .porthole { width: min(56%, 220px); }
@media (min-width: 760px) {
  .pass__art > .porthole { width: min(46%, 310px); }
  .opass__art > .porthole { width: min(40%, 240px); }
}
@media (min-width: 1000px) {
  .pass__top > .pass__art:has(> .porthole) { margin: 0; }
  .pass__art > .porthole { width: min(84%, 350px); }
  .opass__main > .opass__art:has(> .porthole) { margin: 0; }
  .opass__art > .porthole { width: min(94%, 350px); }
}
/* wide screens: the order pass gives its porthole the same room as the destination pass (~310–330 px) */
@media (min-width: 1240px) {
  .opass__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ==========================================================================
   DESTINATION — states the prototype did not draw
   ========================================================================== */
/* nothing to buy (the card is off, direct checkout is off for a site-only destination, or the prices have not
   arrived): the packages stay on the pass as a plain price list, the stub says why and where to go */
.fare--static { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main cost" "hint cost"; cursor: default; }
.fare--static:hover { background: none; }
.stub__state { display: grid; gap: 8px; }
.stub__state .h3 { font-size: 30px; }
@media (min-width: 1000px) {
  .fare--static { grid-template-columns: minmax(9em, .9fr) minmax(0, 1.4fr) minmax(7.5em, max-content); grid-template-areas: "main hint cost"; }
  .fare--static .fare__hint { justify-self: center; width: min(100%, 24em); text-align: left; }
}

/* regions: the covered countries as a numbered timetable column list (alphabetical, from the plan) */
.cover { columns: 2; column-gap: 20px; counter-reset: cover; }
.cover li { break-inside: avoid; display: flex; align-items: baseline; gap: 10px; padding: 9px 0 10px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.3; }
.cover li::before { counter-increment: cover; content: counter(cover, decimal-leading-zero); flex: none; min-width: 2.2em; font: 700 11px/1 var(--f-d); font-stretch: 120%; letter-spacing: .06em; color: var(--ink-3); font-feature-settings: "tnum"; }
.fold > .cover { margin-top: 6px; }
@media (max-width: 379px) { .cover { column-gap: 14px; } .cover li { font-size: 14px; gap: 8px; } }
@media (min-width: 760px) { .cover { columns: 3; column-gap: 32px; } }
@media (min-width: 1000px) { .cover { columns: 4; } }
@media (min-width: 1240px) { .cover { columns: 5; } }

/* ==========================================================================
   DOCUMENTS — оферта, возврат, конфиденциальность, контакты, о магазине
   One printed sheet with the pass band on top; the other documents beside it (below it on phones).
   The body HTML comes from app/legal.py (h2, p, ul/ol, b, a, code, p.muted.small).
   ========================================================================== */
.doc { padding: 4px 0 64px; }
.doc__grid { display: grid; gap: 28px; align-items: start; }
.doc__sheet { min-width: 0; background: var(--ticket); border-radius: var(--r); filter: drop-shadow(var(--sheet-edge)) drop-shadow(0 22px 26px rgba(var(--sh), .13)); }
.doc__body { padding: 22px 18px 32px; }
.doc__h1 { font-size: clamp(38px, 10vw, 72px); margin-bottom: 22px; overflow-wrap: break-word; }
.prose { max-width: 44em; font-size: 16px; line-height: 1.6; }
.prose > * + * { margin-top: 12px; }
.prose h2 { font: 750 25px/1.12 var(--f-d); font-stretch: 76%; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule); text-wrap: balance; }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h2 + * { margin-top: 12px; }
.prose ul, .prose ol { display: grid; gap: 10px; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--ink-3); font-weight: 600; }
.prose a { font-weight: 600; }
.prose code { font: 14px/1.4 var(--f-m); background: var(--tint); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere; }
.prose .muted { color: var(--ink-2); }
.prose .small { font-size: 14px; }
.prose > p.muted.small:first-child { padding-bottom: 14px; border-bottom: 1px dashed var(--rule-2); }
.prose > p.muted.small:first-child + h2 { margin-top: 26px; padding-top: 0; border-top: 0; } /* the dashed rule above is enough */
.doc__nav { display: grid; gap: 4px; }
.doc__nav .lbl { padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.doc__nav > a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 500; }
.doc__nav > a:hover { text-decoration: underline; }
.doc__nav > a[aria-current] { font-weight: 700; }
.doc__nav > a[aria-current]::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--act); }
.doc__help { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.doc__help a { font-weight: 600; color: var(--ink); }
@media (min-width: 760px) {
  .doc__body { padding: 30px 28px 42px; }
  .prose { font-size: 17px; }
}
@media (min-width: 1000px) {
  .doc { padding-bottom: 88px; }
  .doc__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
  .doc__body { padding: 38px 56px 56px; }
  .doc__nav { position: sticky; top: 88px; }
}

/* ==========================================================================
   BUY GATE — «Переходим к оплате» (Digiseller auto-post) and «Не удалось перейти к оплате»
   A small pass in the middle of the page; noindex, no footer frieze.
   ========================================================================== */
/* the page is at least one screen tall: the pass sits in the middle, the mini footer at the bottom */
.p-gate { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.p-gate > main { flex: 1; display: grid; }
.p-gate .foot--mini { margin-top: 0; }
.p-gate .foot--mini .wrap { max-width: calc(var(--max) + 2 * var(--g)); } /* line up with the full header here, not the order sheet */
.foot--mini .foot__copy { align-items: center; }
.gate { display: grid; place-items: center; padding-block: 32px 48px; }
.gate__sheet { width: min(100%, 520px); background: var(--ticket); border-radius: var(--r); filter: drop-shadow(var(--sheet-edge)) drop-shadow(0 22px 26px rgba(var(--sh), .13)); }
.gate__body { display: grid; gap: 16px; padding: 24px 20px 26px; }
.gate__h1 { font-size: clamp(34px, 9vw, 48px); }
.gate__text { color: var(--ink-2); }
.gate__help { font-size: 14px; color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--rule); }
.gate__help a { font-weight: 600; color: var(--ink); }
.gate .btn-go { margin-top: 4px; }
.gate .route { --route-max: 40px; margin-top: 2px; }
@media (min-width: 760px) { .gate__body { padding: 30px 32px 32px; } }
/* while the bank page loads, the plane shuttles along the arc (transform only; static with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .gate__route--wait .route__plane { animation: gate-fly 1.4s var(--ease-drift) infinite alternate; }
  @keyframes gate-fly { from { transform: translateX(-260%); } to { transform: translateX(160%); } }
}

/* ==========================================================================
   ORDER PAGE — the states the prototype did not draw (delivery.html)
   Same issued pass: waiting for payment, issuing, delayed, manual issue, unpaid; the live states after install
   (installed / in use / used up / expired / deleted / cancelled); no destination (plain pass, no art column);
   the English page («HOME» in the route). Pastel chips print with --ink, which stays readable on the night tints.
   ========================================================================== */
.chip--wait { background: var(--sand); color: var(--ink); }
.chip--warn { background: var(--peach); color: var(--ink); }
.chip--bad { background: var(--rose); color: var(--ink); }
.chip--bad::before { background: var(--act-ink); }
.chip--off { background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-2); }

/* the stub's step mark: a ring that turns while we wait (static with reduced motion), «!» when it needs the buyer */
.step__n--wait { position: relative; border-color: var(--rule-2); }
.step__n--wait::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--ink); }
.step__n--warn { background: var(--ink); color: var(--ticket); }
.opass__state { display: grid; gap: 10px; }
.opass__text { color: var(--ink-2); font-size: 15.5px; }
.opass__stub .details { margin-top: 2px; }

/* long titles: the stamp sits on the painting / window corner (it would cover the full-width title row) */
.opass .opass__art > .stamp { top: -10px; right: -6px; }
@media (min-width: 1000px) { .opass .opass__art > .stamp { top: 8px; right: -14px; } }
/* long titles on phones and tablets: the longest word («Таджикистана», «Азербайджана») is 9.4 em, and the column
   is the viewport minus the gutters and the pass padding, so the size follows the column (26 px at 320, 33 px at 390) */
@media (max-width: 999px) { .opass--long .opass__h1 { font-size: clamp(24px, calc((100vw - 72px) / 9.6), 56px); } }
/* «3,8 ГБ» / «3.8 GB» left: 56 px from 386 px up, smaller on narrow phones so it stays inside the stub */
.big-left b { font-size: min(56px, 14.5vw); }

/* barcode shimmer: the pass is being printed. A paper-light sheen sweeps across; without motion a quiet barcode */
.scan { position: relative; overflow: hidden; border-radius: 2px; }
.scan .barcode { display: block; height: 40px; opacity: .3; }
.scan::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 45%; background: linear-gradient(90deg, transparent, var(--ticket) 50%, transparent); opacity: 0; }

/* no destination (the product is not in the catalog any more): the pass without the art column */
.opass--bare .opass__main { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
.opass--bare .opass__main > * { grid-area: auto; }

/* the QR is a PNG from /order/<code>/qr.png (black on white, its own quiet zone), never styled or faded */
.qr__plate img { display: block; width: 100%; height: auto; image-rendering: pixelated; }

/* help panel: chat + review (Plati) sit together; on wide sheets they take the right column */
.panel__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.panel--help .panel__acts .btn-line { justify-self: auto; }
.copyrow--apn { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule); }
.copyrow--apn .panel__sub { margin-top: -2px; }
@media (min-width: 760px) {
  .panel--help .panel__acts { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-self: center; }
  .panel--help:has(> p + p + .panel__acts) .panel__acts { grid-row: 1 / span 4; } /* Plati: + «Всё заработало? Отзыв…» */
  .panel--help .panel__acts .btn-line { grid-column: auto; grid-row: auto; }
}

/* short states (waiting for payment, issuing): the page is at least one screen tall, the dark mini footer at the bottom */
.p-order { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.p-order > main { flex: 1 0 auto; }
.p-order .order { padding-bottom: 8px; }

/* the small pass in the middle (order did not load / not an eSIM) */
.p-order.p-gate .foot--mini .wrap { max-width: 1280px; }
.gate .status { margin-bottom: -4px; }
.gate .btn-line { justify-self: start; }

/* English route: «HOME» + «OMN» measures 1.15× «ДОМ» + «OMN» (5.36 against 4.65 em, both stretches), so the
   design's 9.3 / 8.3 scale to 10.7 / 9.5 and every code keeps the same share of the route */
.route--wide { --route-k: 10.7; }
@media (max-width: 379px) { .route--wide { --route-k: 9.5; } }

@media (prefers-reduced-motion: no-preference) {
  .is-live .step__n--wait::after, .step__n--wait::after { animation: spin 1.1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .scan::after { opacity: .92; animation: sheen 1.8s var(--ease-drift) infinite; }
  @keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(230%); } }
  .chip--wait::before { animation: blink 1.2s var(--ease-drift) infinite alternate; }
  @keyframes blink { to { opacity: .25; } }
  .is-hidden .scan::after, .is-hidden .step__n--wait::after, .is-hidden .chip--wait::before { animation-play-state: paused; }
  /* pages that reload themselves every 4–30 s: no entrance (pass, arc, plane, shade) on each reload; the spinner and
     the shimmer say «alive». When the eSIM is ready the full entrance and the stamp play once. */
  .p-order--poll .opass__sheet, .p-order--poll .gate__sheet, .p-order--poll .route__arc, .p-order--poll .route__plane,
  .p-order--poll .porthole__shade { animation: none; }
}

/* ==========================================================================
   BLOG — «Бортовой журнал» (/blog, /blog/<slug>; templates site/blog_index.html, article.html, _blog.html)
   The in-flight magazine from the seat pocket, printed on the same paper as the tickets.
   · Index: masthead (H1 + a facts strip cut like the home search pass) | the latest article as the cover;
     older articles as post cards; popular destinations as tickets.
   · Article: kicker, H1, lead and pass fields beside the window seat (porthole of the destination);
     the text column + a right «stub» (TOC as route stops + a mini ticket, sticky from 1000 px);
     sales blocks inside the text are paper objects (boarding pass, fare grid, tickets, seat-pocket card,
     install route); FAQ; related destinations and articles; the phone sticky bar (.buybar.postbar).
   Tokens only (white text on vermilion follows the existing CTA rule). Motion: guard at the end of the section.
   ========================================================================== */
.p-post, .p-blog { --rail: 272px; --rail-gap: 48px; }
@media (min-width: 1240px) { .p-post, .p-blog { --rail: 300px; --rail-gap: 72px; } }

/* header nav: the 5th link («Журнал») must fit next to the toggle and the action at 1000–1199 */
@media (min-width: 1000px) and (max-width: 1199px) { .nav a { padding: 0 8px; } }
.nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }

/* footer: the magazine link under the brand line */
.foot__mag { margin-top: 14px; }
.foot__mag a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.foot__mag a > span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.foot__mag a:hover > span:last-child { text-decoration-thickness: 2px; }
.foot .foot__mag .lbl { color: var(--on-deep); padding: 3px 6px 2px; border: 1.5px solid currentColor; border-radius: 3px; font-size: 11px; }

/* ---------- index: masthead ---------- */
.mag { padding: 6px 0 44px; }
.mag__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.mag__text { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
/* «Бортовой / журнал»: two words, two lines, the loudest type on the site after the home H1 */
.mag__h1 { font-size: clamp(46px, 15.4vw, 128px); font-size: clamp(46px, 20.5cqi, 128px); line-height: .88; } /* «Бортовой» is 4.7 em: sized by its column */
.mag__h1 .h1__kicker { margin-bottom: .5em; }
.mag__pass { position: relative; background: var(--ticket); border: 1px solid var(--rule-2); border-radius: var(--r); box-shadow: 0 1px 0 rgba(var(--sh), .04), 0 18px 36px -24px rgba(var(--sh), .35); }
.mag__band { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 12px 16px 11px; font: 650 12px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.mag__band-r .barcode { display: block; width: 84px; height: 15px; opacity: .45; }
.mag__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; padding: 14px 16px; }
.mag__facts > div { display: grid; gap: 5px; }
.mag__facts dd { font-size: 15px; font-weight: 600; white-space: nowrap; }
.mag__soon { padding: 14px 16px; font-size: 15px; color: var(--ink-2); }
.mag__label { margin-bottom: 10px; }
@media (max-width: 419px) { .mag__band-x { display: none; } }
/* 320–359: the three facts stack into rows, like the search pass facts on the home page */
@media (max-width: 359px) {
  .mag__facts { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 16px 6px; }
  .mag__facts > div { grid-template-columns: 6.6em minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
  .mag__facts > div:last-child { border-bottom: 0; }
}
@media (max-width: 359px) { .mag__band-r .barcode { width: 52px; } }
@media (min-width: 1000px) {
  .mag { padding: 20px 0 64px; }
  .mag__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 64px; align-items: start; }
  .mag__text { padding-top: 34px; }
  .mag__text { gap: 26px; padding-bottom: 4px; }
  .mag__pass { max-width: 560px; }
}

/* empty state: issue No 1 is still at the printer */
.mag__empty { background: var(--ticket); border: 1px dashed var(--rule-2); border-radius: var(--r); }
.mag__empty-band { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px 11px; font: 650 12px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px dashed var(--rule-2); }
.mag__empty-in { display: grid; gap: 14px; padding: 20px 18px 12px; }
.mag__empty-h { font: 780 clamp(32px, 8vw, 48px)/.98 var(--f-d); font-stretch: 60%; text-wrap: balance; }
.mag__empty-in > p { color: var(--ink-2); }
.mag__empty-list { display: grid; }
.mag__empty-list li { border-top: 1px solid var(--rule); }
.mag__empty-list a { font-weight: 600; width: 100%; }

/* ---------- post card (index, «Читайте также») ----------
   Phones: a compact row — the window on the left, the printed part on the right. From 700 px: a ticket — the
   window on top dissolving into paper (at night a crisp edge + hairline, like .tkt). */
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.pcard {
  position: relative; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); min-width: 0;
  background: var(--ticket); color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 1px 0 rgba(var(--sh), .05), 0 18px 32px -26px rgba(var(--sh), .5);
  transition: box-shadow var(--t-med) var(--ease-out);
}
.pcard__win { position: relative; display: block; min-height: 132px; overflow: hidden; }
.pcard__win > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fy, 55%); filter: var(--art-filter); }
.pcard__win .twin { padding: 12px 10px 14px; }
.pcard__win .twin__place { font-size: clamp(13px, 11.5cqi, 19px); }
.pcard__type { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; background: linear-gradient(172deg, #D4C7F2 8%, #F4CFBE 92%); color: var(--on-pastel); filter: var(--pastel-filter); }
.pcard__type span { font: 800 22px/1 var(--f-d); font-stretch: 66%; }
.pcard__body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 7px; min-width: 0; padding: 13px 14px 12px 15px; }
.pcard__kick { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pcard__kick .flag { width: 20px; }
.pcard__kick .lbl { font-size: 11px; color: var(--ink-2); }
.pcard__title { font: 750 21px/1.06 var(--f-d); font-stretch: 72%; text-wrap: balance; overflow-wrap: break-word; }
.pcard__desc { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pcard__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding-top: 10px; margin-top: 2px; background: repeating-linear-gradient(90deg, var(--perf) 0 5px, transparent 0 11px) top left / 100% 1.5px no-repeat; }
.pcard__foot .val { font-size: 14px; font-weight: 600; white-space: nowrap; }
.pcard__route { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font: 800 13px/1 var(--f-d); font-stretch: 170%; color: var(--ink-3); align-self: center; }
.pcard__route i { flex: 1; min-width: 12px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--perf) 0 2px, transparent 0 7px); }
.pcard__route b { font-size: 22px; font-weight: 800; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { box-shadow: 0 1px 0 rgba(var(--sh), .05), 0 30px 44px -28px rgba(var(--sh), .6); }
  .pcard:hover .pcard__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .14em; }
}
/* narrow phones: the description would make a 5-line row; the title and the fields carry the card */
@media (max-width: 419px) { .pcard:not(.pcard--feature) .pcard__desc { display: none; } }
@media (min-width: 700px) {
  .pcard { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .pcard__win { aspect-ratio: 16 / 10; min-height: 0; }
  .pcard__win:has(> .art)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 1px; background: var(--ring); }
  .pcard__win > .art { height: calc(100% + var(--mist-crop)); object-position: 50% 70%; -webkit-mask-image: linear-gradient(#000 calc(66% + var(--fade-lift)), transparent 99%); mask-image: linear-gradient(#000 calc(66% + var(--fade-lift)), transparent 99%); }
  .pcard__body { padding: 8px 18px 16px; gap: 8px; }
  .pcard__title { font-size: 25px; }
  .pcard__type span { font-size: 34px; }
}
/* the cover: always a tall ticket, the title set like a section head */
.pcard--feature { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.pcard--feature .pcard__win { aspect-ratio: 16 / 11; min-height: 0; }
.pcard--feature .pcard__win > .art { height: calc(100% + var(--mist-crop)); object-position: 50% 62%; -webkit-mask-image: linear-gradient(#000 calc(64% + var(--fade-lift)), transparent 99%); mask-image: linear-gradient(#000 calc(64% + var(--fade-lift)), transparent 99%); }
.pcard--feature .pcard__win:has(> .art)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 1px; background: var(--ring); }
.pcard--feature .pcard__body { padding: 6px 18px 18px; gap: 10px; }
.pcard--feature .pcard__title { font: 800 clamp(32px, 9vw, 52px)/.96 var(--f-d); font-stretch: 58%; }
.pcard--feature .pcard__desc { font-size: 15.5px; }
.pcard--feature .pcard__foot { gap: 18px; padding-top: 14px; }
@media (min-width: 760px) { .pcard--feature .pcard__body { padding: 8px 26px 22px; } .pcard--feature .pcard__desc { font-size: 16.5px; max-width: 32em; } }
@media (min-width: 700px) and (max-width: 999px) {
  .pcard--feature { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); grid-template-rows: none; }
  .pcard--feature .pcard__win { aspect-ratio: auto; min-height: 380px; }
  .pcard--feature .pcard__win > .art { height: 100%; object-position: 50% var(--fy, 45%); -webkit-mask-image: linear-gradient(90deg, #000 calc(72% + var(--fade-lift)), transparent 99%); mask-image: linear-gradient(90deg, #000 calc(72% + var(--fade-lift)), transparent 99%); }
  .pcard--feature .pcard__win:has(> .art)::after { left: auto; top: 0; width: 1px; height: auto; }
  .pcard--feature .pcard__body { padding: 22px 24px 20px 10px; align-content: start; }
}
@media (min-width: 1000px) { .pcard--feature .pcard__win { aspect-ratio: 16 / 10; } }
/* the cover's ДОМ → CHN only where its body has room for it beside the two fields */
.pcard--feature .pcard__body { container-type: inline-size; }
.pcard__route { display: none; }
@container (min-width: 460px) { .pcard__route { display: flex; } }

/* ---------- article: the draft proof (preview only) ---------- */
.proof { background: color-mix(in srgb, var(--stamp) 9%, var(--paper)); border-bottom: 1.5px dashed var(--stamp); }
.proof__in { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "stamp text" "go go"; gap: 14px 16px; align-items: center; padding-block: 14px 16px; }
.proof .stamp { grid-area: stamp; width: 78px; height: 78px; opacity: 1; }
.proof__text { grid-area: text; display: grid; gap: 4px; }
.proof__h { font: 750 22px/1.1 var(--f-d); font-stretch: 72%; color: var(--stamp); }
.proof__text p:last-child { font-size: 14.5px; color: var(--ink-2); max-width: 44em; }
.proof__go { grid-area: go; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: var(--r); background: var(--stamp); color: var(--paper); font: 700 18px/1.1 var(--f-t); text-decoration: none; box-shadow: 0 3px 0 color-mix(in srgb, var(--stamp) 60%, var(--ink)); }
.proof__go:hover { background: color-mix(in srgb, var(--stamp) 86%, var(--ink)); }
.proof__go:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--stamp) 60%, var(--ink)); }
.proof__go .ico { width: 20px; height: 20px; transform: rotate(-90deg); }
.proof__go:focus-visible { outline-color: var(--ink); }
@media (min-width: 760px) {
  .proof__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "stamp text go"; gap: 20px 28px; }
  .proof .stamp { width: 92px; height: 92px; }
}

/* ---------- article: header ---------- */
.post__head { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "fields"; gap: 24px 18px; padding-top: 8px; padding-bottom: 28px; }
.post__head--seat { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-areas: "intro intro" "seat fields"; align-items: center; }
.post__head--hero { grid-template-areas: "intro" "fields" "hero"; }
.post__intro { grid-area: intro; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.post__kick { display: flex; align-items: center; gap: 10px; }
.post__kick .flag { width: 22px; }
.post__kick .lbl { color: var(--ink-2); }
/* the H1 never breaks inside a word: --lw (letters in its longest word, set by the template) caps the size so that
   word fits the column — Furfur Gothic 800 at 56 % is ≤ .66 em per letter («Шэньчжэнь» .66, «путешествия» .60).
   Long headlines (> 42 characters) step down so they stay within four lines on phones. */
.post__h1 { font-size: clamp(40px, 11.2vw, 92px); font-size: min(clamp(40px, 11.2vw, 92px), 100cqi / (var(--lw, 8) * .66)); line-height: .92; max-width: 11em; }
.post__h1--long { font-size: clamp(32px, 8.6vw, 60px); font-size: min(clamp(32px, 8.6vw, 60px), 100cqi / (var(--lw, 8) * .66)); max-width: 16em; line-height: .95; }
.post__lead { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.post__seat { grid-area: seat; min-width: 0; }
.post__seat .porthole { width: 100%; }
.post__twin { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.post__twin .twin { padding: 12px 10px 14px; }
.post__twin .twin__place { font-size: clamp(13px, 12cqi, 21px); }
.post__twin .twin__sticker { display: none; } /* the flag is already in the kicker; here it would sit on the names */
.post__fields { grid-area: fields; display: grid; align-self: center; min-width: 0; }
.post__fields .fld { gap: 4px; padding: 10px 0 11px; border-top: 1px solid var(--rule); }
.post__fields .fld:last-child { border-bottom: 1px solid var(--rule); }
.post__fields dd { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
/* the destination link keeps the field's height; its hit area grows to 44 px around the text */
.post__dest { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-block: -12px; }
.post__dest .ico { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease-out); }
.post__hero { grid-area: hero; margin: 0; padding: 8px; background: var(--ticket); border-radius: 4px; box-shadow: 0 0 0 1px var(--rule), 0 26px 40px -30px rgba(var(--sh), .6); }
.post__hero img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 2px; filter: var(--art-filter); }
@media (min-width: 1000px) { .post__hero img { aspect-ratio: 2.15 / 1; } }
@media (max-width: 379px) { .post__head--seat { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: 14px; } .post__fields dd { font-size: 14.5px; } }
@media (min-width: 560px) and (max-width: 999px) { .post__head--seat { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: 32px; } }
@media (min-width: 1000px) {
  .post__head { grid-template-columns: minmax(0, 1fr) var(--rail); column-gap: var(--rail-gap); row-gap: 28px; padding-top: 18px; padding-bottom: 48px; }
  .post__head--seat { grid-template-areas: "intro seat" "fields seat"; align-items: end; }
  .post__head--hero { grid-template-areas: "intro ." "fields ." "hero hero"; }
  .post__head:not(.post__head--seat):not(.post__head--hero) { grid-template-areas: "intro ." "fields ."; }
  .post__intro { gap: 20px; }
  .post__h1 { font-size: min(clamp(64px, 6.6vw, 96px), 100cqi / (var(--lw, 8) * .66)); }
  .post__h1--long { font-size: min(clamp(52px, 4.8vw, 68px), 100cqi / (var(--lw, 8) * .66)); }
  .post__lead { font-size: 20px; }
  .post__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .post__fields .fld:last-child { border-bottom: 0; }
  .post__fields .fld { border-top: 1.5px solid var(--ink); }
}

/* ---------- article: text column + the right stub ---------- */
.post__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.post__rail, .post__col { min-width: 0; }
@media (min-width: 1000px) {
  .post__grid { grid-template-columns: minmax(0, 1fr) var(--rail); column-gap: var(--rail-gap); align-items: start; }
  .post__col { grid-column: 1; grid-row: 1; }
  .post__rail { grid-column: 2; grid-row: 1; }
}
/* sticky only where the whole stub fits the screen */
@media (min-width: 1000px) and (min-height: 720px) { .post__rail { position: sticky; top: 80px; } }

/* table of contents: route stops. Phones and tablets: folded under the header (open without JS). */
.toc { border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.toc__sum { display: flex; align-items: center; gap: 12px; min-height: 54px; cursor: pointer; list-style: none; }
.toc__sum::-webkit-details-marker { display: none; }
.toc__s { font: 750 20px/1.1 var(--f-d); font-stretch: 76%; }
.toc__count { font-size: 14px; color: var(--ink-2); }
.toc__x { position: relative; width: 16px; height: 16px; margin-left: auto; flex: none; }
.toc__x::before, .toc__x::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--ink); }
.toc__x::after { transform: rotate(90deg); transition: transform var(--t-fast) var(--ease-out); }
.toc[open] .toc__x::after { transform: rotate(0); }
.toc__h { display: none; }
.toc__list { position: relative; display: grid; padding: 2px 0 12px; }
.toc__list::before { content: ""; position: absolute; left: 11px; top: 18px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, var(--ink-3) 0 3px, transparent 0 9px); opacity: .6; }
.toc__list a { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 44px; padding: 8px 0; color: var(--ink-2); text-decoration: none; font-size: 15px; line-height: 1.35; }
.toc__n { display: grid; place-items: center; width: 24px; height: 24px; margin-top: -2px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink-3); font: 800 11px/1 var(--f-d); font-stretch: 110%; color: var(--ink-2); font-feature-settings: "tnum"; }
.toc__t { padding-top: 1px; }
.toc__list a:hover { color: var(--ink); }
.toc__list a:hover .toc__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.toc__list a.is-past .toc__n { border-color: var(--ink); color: var(--ink); }
.toc__list a[aria-current] { color: var(--ink); font-weight: 600; }
.toc__list a[aria-current] .toc__n { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); }
@media (min-width: 1000px) {
  .toc { border-bottom: 0; margin-bottom: 0; }
  .toc__sum { display: none; }
  .toc__h { display: block; padding: 14px 0 8px; }
  .toc__list { padding-bottom: 6px; }
  .toc__list a { font-size: 14.5px; }
}

/* the stub's mini ticket (desktop; phones get the sticky bar) */
.post__ticket { display: none; }
@media (min-width: 1000px) {
  .post__ticket {
    display: grid; gap: 10px; margin-top: 16px; padding-bottom: 16px; background: var(--ticket); color: var(--ink);
    text-decoration: none; border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden;
    box-shadow: 0 1px 0 rgba(var(--sh), .05), 0 22px 34px -26px rgba(var(--sh), .55); transition: box-shadow var(--t-med) var(--ease-out);
  }
  .post__tband { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px 9px; border-bottom: 1px solid var(--rule); }
  .post__tband .lbl { font-size: 11px; }
  .post__tband .flag { width: 22px; }
  .post__troute { display: flex; align-items: center; gap: 8px; padding: 4px 16px 0; font: 800 13px/1 var(--f-d); font-stretch: 170%; color: var(--ink-3); }
  .post__troute i { flex: 1; min-width: 14px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--perf) 0 2px, transparent 0 7px); }
  .post__troute b { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
  .post__tname { padding: 0 16px; font: 750 21px/1.08 var(--f-d); font-stretch: 72%; }
  .post__tfoot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 2px 16px 0; padding-top: 12px; background: repeating-linear-gradient(90deg, var(--perf) 0 5px, transparent 0 11px) top left / 100% 1.5px no-repeat; }
  .post__tfoot .fld:first-child .val { font-size: 14px; color: var(--ink-2); }
  .post__tgo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; margin: 4px 16px 0; padding: 0 16px; border-radius: var(--r); background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); font-weight: 600; }
  .post__ticket:hover .post__tgo { background: var(--act); color: #fff; box-shadow: none; }
  .post__ticket:hover { box-shadow: 0 1px 0 rgba(var(--sh), .05), 0 30px 44px -28px rgba(var(--sh), .6); }
  .post__ticket:focus-visible { outline-offset: 4px; border-radius: var(--r); }
}

/* ---------- article: the long read ----------
   Onest 17/18 px, 1.65 leading, a 38 em measure. Every h2 opens on a 1.5 px ink rule with its stop number
   (the same number as in the TOC), like the sections of the storefront. Sales blocks may run wider than the
   measure. Direct-child selectors only: the blocks keep their own type. */
.post__prose { container-type: inline-size; counter-reset: post-h2; font-size: 17px; line-height: 1.65; padding-top: 6px; }
.post__prose > * { max-width: 38em; }
.post__prose > * + * { margin-top: 1.1em; }
.post__prose > p, .post__prose > ul > li, .post__prose > ol > li { text-wrap: pretty; }
.post__prose > h2, .post__h2 { counter-increment: post-h2; max-width: none; margin-top: 2.3em; padding-top: 14px; border-top: 1.5px solid var(--ink); font: 780 clamp(32px, 8.6vw, 46px)/.98 var(--f-d); font-stretch: 60%; letter-spacing: 0; text-wrap: balance; }
.post__prose > h2::before, .post__n { content: counter(post-h2, decimal-leading-zero); display: block; margin-bottom: 14px; font: 650 12px/1 var(--f-d); font-stretch: 100%; letter-spacing: .1em; color: var(--ink-3); }
.post__prose > h3 { margin-top: 1.9em; font: 750 24px/1.12 var(--f-d); font-stretch: 76%; text-wrap: balance; }
.post__prose > h2 + *, .post__prose > h3 + * { margin-top: .7em; }
.post__prose > h2 + h3 { margin-top: 1.2em; }
.post__prose strong { font-weight: 650; }
.post__prose > p > a, .post__prose > ul a, .post__prose > ol a, .post__prose td a, .post__prose blockquote a { font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.post__prose > p > a:hover, .post__prose > ul a:hover, .post__prose > ol a:hover, .post__prose td a:hover, .post__prose blockquote a:hover { text-decoration-thickness: 2px; }
/* the first paragraph is the lead: a size up, like a magazine standfirst (the gothic drop cap read as a black
   block, owner 29.09 — no initial letter) */
.post__prose > p:first-child { font-size: 1.1em; line-height: 1.6; color: var(--ink); }
/* lists: rings like the stub's trust lines; numbers in punched circles like the form steps */
.post__prose > ul, .post__prose > ol, .post__prose blockquote ul, .post__prose blockquote ol { display: grid; gap: .5em; }
.post__prose > ul > li, .post__prose blockquote ul > li { position: relative; padding-left: 26px; }
.post__prose > ul > li::before, .post__prose blockquote ul > li::before { content: ""; position: absolute; left: 4px; top: .64em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-2); }
.post__prose > ol, .post__prose blockquote ol { counter-reset: post-li; }
.post__prose > ol > li, .post__prose blockquote ol > li { position: relative; min-height: 26px; padding-left: 40px; counter-increment: post-li; }
.post__prose > ol > li::before, .post__prose blockquote ol > li::before { content: counter(post-li); position: absolute; left: 0; top: .08em; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); font: 800 12px/1 var(--f-d); font-stretch: 120%; }
/* a note on a torn-off slip: ticket paper, a perforated left edge */
.post__prose > blockquote { position: relative; margin: 1.6em 0 0; padding: 16px 18px 16px 34px; background: var(--ticket); border: 1px solid var(--rule-2); border-radius: var(--r); font-size: 16px; line-height: 1.55; }
.post__prose > blockquote::before { content: ""; position: absolute; left: 16px; top: 14px; bottom: 14px; width: 1.5px; background: repeating-linear-gradient(180deg, var(--perf) 0 4px, transparent 0 9px); }
.post__prose > blockquote > * + * { margin-top: .6em; }
.post__prose > hr { height: 1.5px; margin-block: 2.4em; border: 0; background: repeating-linear-gradient(90deg, var(--perf) 0 5px, transparent 0 11px); }
.post__prose > p > img, .post__prose > img, .post__prose > figure img { width: 100%; height: auto; padding: 8px; background: var(--ticket); border-radius: 3px; box-shadow: 0 0 0 1px var(--rule), 0 22px 34px -28px rgba(var(--sh), .55); filter: var(--art-filter); }
.post__prose > figure { margin: 1.6em 0 0; }
.post__prose figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.post__prose code { font: 14.5px/1.4 var(--f-m); background: var(--tint); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere; }
/* tables: a spec sheet — header in the label face (no caps: authors write «eSIM» in headers), hairline rows.
   site.js wraps each table (.post__tbl), labels the cells from the header and marks the FurFur column / row. */
.post__prose > table, .post__tbl { max-width: none; margin-top: 1.6em; }
.post__tbl { overflow-x: auto; }
.post__prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.4; }
.post__prose th { padding: 0 14px 10px 0; text-align: left; vertical-align: bottom; font: 700 13.5px/1.25 var(--f-d); font-stretch: 100%; letter-spacing: .02em; color: var(--ink-2); border-bottom: 1.5px solid var(--ink); }
.post__prose td { padding: 12px 14px 12px 0; vertical-align: top; color: var(--ink-2); border-bottom: 1px solid var(--rule); overflow-wrap: break-word; }
.post__prose td:first-child { color: var(--ink); font-weight: 600; }
.post__prose :is(th, td).is-us { padding-inline: 12px; background: var(--peach); color: var(--ink); font-weight: 600; }
.post__prose tr.is-us > td { background: var(--peach); color: var(--ink); font-weight: 600; }
.post__prose tr.is-us > td:first-child { padding-left: 12px; }
@container (max-width: 559px) {
  .post__prose table.is-stack, .is-stack > tbody, .is-stack > tbody > tr, .is-stack > tbody > tr > td { display: block; width: auto; }
  .post__prose table.is-stack { border-top: 1.5px solid var(--ink); }
  .is-stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .is-stack > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .post__prose .is-stack td { padding: 0; border: 0; font-size: 15px; }
  .post__prose .is-stack td:first-child { grid-column: 1 / -1; font: 750 21px/1.1 var(--f-d); font-stretch: 76%; }
  .is-stack td:not(:first-child)::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
  .post__prose .is-stack td.is-us { grid-column: 1 / -1; padding: 8px 12px 9px; border-radius: 3px; }
  .post__prose .is-stack tr.is-us { padding-inline: 12px; background: var(--peach); border-radius: 3px; }
  .post__prose .is-stack tr.is-us > td { background: none; padding-left: 0; }
  .is-stack td.is-us::before, .is-stack tr.is-us td::before { color: var(--ink-2); }
}
/* the sales blocks inside the text: their own type, air above and below, and the column's full width */
.post__prose > [data-blog-block] { max-width: none; margin-block: 40px; font-size: 16px; line-height: 1.45; }
.post__prose > [data-blog-block] + * { margin-top: 40px; }
.post__prose > [data-blog-block] + h2 { margin-top: 64px; }
.post__prose > .bfare { max-width: 720px; }
.post__prose > .bphone { max-width: 820px; }

@media (min-width: 1000px) {
  .post__prose { font-size: 18px; line-height: 1.66; padding-top: 0; }
  .post__prose > h2, .post__h2 { font-size: clamp(40px, 3.6vw, 50px); }
  .post__prose > h3 { font-size: 26px; }
  .post__prose > blockquote { font-size: 17px; }
  .post__prose > [data-blog-block] { margin-block: 48px; }
  .post__prose > [data-blog-block] + * { margin-top: 48px; }
  .post__prose > [data-blog-block] + h2 { margin-top: 80px; }
}

/* FAQ and the sign-off under the text */
.post__faq { margin-top: 64px; }
.post__faq .post__h2 { margin: 0 0 18px; }
.post__faq .qa-list { border-top: 0; }
.post__sign { display: grid; gap: 6px; margin-top: 44px; padding-top: 16px; border-top: 1px dashed var(--rule-2); max-width: 40em; font-size: 14.5px; color: var(--ink-2); }
.post__sign a { font-weight: 600; color: var(--ink); }
@media (min-width: 1000px) { .post__faq { margin-top: 80px; } }

/* related destinations: the storefront rail; the band of related articles below */
.post__more { padding-bottom: 40px; }
@media (min-width: 760px) { .post__more { padding-bottom: 64px; } }

/* ---------- sales block 1: the boarding pass (.bcta) ----------
   Stacked below 660 px of its own width (stub under a perforation with side notches), side by side above it
   (stub on the right, notches top and bottom), exactly like the destination pass. The whole pass is one link;
   the ink «Купить eSIM …» turns vermilion on hover, like the header CTA. */
.bcta { container-type: inline-size; --notch-bg: var(--paper); }
.bcta__sheet {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); color: var(--ink); text-decoration: none;
  background: var(--ticket); border: 1px solid var(--rule-2); border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(var(--sh), .05), 0 24px 38px -30px rgba(var(--sh), .6); transition: box-shadow var(--t-med) var(--ease-out);
}
.bcta__sheet:focus-visible { outline-offset: 4px; border-radius: var(--r); }
.bcta__body { min-width: 0; }
.bcta__band { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 12px 16px 11px; font: 650 12px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.bcta__band-r { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.bcta__band-r .flag { width: 22px; }
.bcta__main { display: grid; gap: 14px; padding: 16px 16px 18px; }
.bcta .route { --route-max: 50px; }
.bcta__h { display: block; font: 780 clamp(25px, 7.6cqi, 38px)/1 var(--f-d); font-stretch: 60%; text-wrap: balance; }
.bcta__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.2em, 1fr)); gap: 0 14px; }
.bcta__fields .fld { gap: 4px; padding: 9px 0 2px; border-top: 1px solid var(--rule); }
.bcta__fields .lbl { letter-spacing: .08em; white-space: nowrap; }
.bcta__fields .val { font-size: 15px; font-weight: 600; white-space: nowrap; }
.bcta__fields .fld--inv .val { align-self: flex-start; padding: 2px 8px 3px; margin-left: -8px; border-radius: 2px; background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); }
.bcta__stub { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 16px 18px; background: repeating-linear-gradient(90deg, var(--perf) 0 5px, transparent 0 11px) top left / 100% 1.5px no-repeat; }
/* notches where the perforation meets the edge (the page colour shows through) */
.bcta__stub::before, .bcta__stub::after { content: ""; position: absolute; top: 0; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--notch-bg); border: 1px solid var(--rule-2); }
.bcta__stub::before { left: -10px; clip-path: inset(0 0 0 50%); }
.bcta__stub::after { right: -10px; clip-path: inset(0 50% 0 0); }
.bcta__price { display: grid; gap: 5px; }
.bcta__price b { font: 800 42px/.9 var(--f-d); font-stretch: 125%; font-feature-settings: "tnum"; white-space: nowrap; letter-spacing: -.01em; }
.bcta__for { font-size: 13.5px; color: var(--ink-2); }
.bcta__go { flex: 1 1 15em; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 10px 16px 10px 18px; border-radius: var(--r); background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); font-weight: 600; font-size: 16.5px; line-height: 1.2; }
.bcta__go > span { text-wrap: balance; }
.bcta__go .ico { width: 20px; height: 20px; }
.bcta__sheet:hover .bcta__go { background: var(--act); color: #fff; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .bcta__sheet:hover { box-shadow: 0 1px 0 rgba(var(--sh), .05), 0 32px 46px -30px rgba(var(--sh), .65); } }
@container (min-width: 660px) {
  .bcta__sheet { grid-template-columns: minmax(0, 1fr) minmax(16em, 36%); }
  .bcta__band { padding: 13px 22px 12px; }
  .bcta__main { padding: 18px 24px 22px; gap: 16px; }
  .bcta__stub { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 18px; padding: 22px 22px 22px 26px;
    background: repeating-linear-gradient(180deg, var(--perf) 0 5px, transparent 0 11px) top left / 1.5px 100% no-repeat; }
  .bcta__stub::before, .bcta__stub::after { top: auto; left: 0; right: auto; margin: 0 0 0 -8.25px; }
  .bcta__stub::before { top: -10px; clip-path: inset(50% 0 0 0); }
  .bcta__stub::after { bottom: -10px; clip-path: inset(0 0 50% 0); }
  .bcta__price b { font-size: 48px; }
  .bcta__go { flex: none; }
}

/* ---------- sales block 2: the fare grid (.bfare) ---------- */
.bfare { background: var(--ticket); border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 0 rgba(var(--sh), .05), 0 22px 34px -28px rgba(var(--sh), .5); }
.bfare__band { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 12px 16px 11px; font: 650 12px/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.bfare__band-r { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.bfare__band-r .flag { width: 22px; }
.bfare__in { padding: 16px 16px 16px; }
.bfare__h { font: 780 clamp(26px, 7vw, 34px)/1 var(--f-d); font-stretch: 60%; text-wrap: balance; margin-bottom: 16px; }
.bfare__cols { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.bfare__cols .lbl { letter-spacing: .08em; }
.bfare__list { display: grid; }
.bfare__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "main cost go" "hint cost go"; align-items: center; gap: 3px 14px; min-height: 60px; padding: 12px 10px; margin: 0 -10px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); border-radius: 3px; transition: background var(--t-fast); }
.bfare__row:hover { background: var(--tint); }
.bfare__row:focus-visible { outline-offset: -2px; }
.bfare__main { grid-area: main; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.bfare__gb { font: 750 21px/1 var(--f-d); font-stretch: 118%; white-space: nowrap; }
.bfare__days { font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.bfare__hint { grid-area: hint; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.bfare__cost { grid-area: cost; display: grid; justify-items: end; gap: 4px; }
.bfare__price { font: 750 20px/1 var(--f-d); font-stretch: 115%; font-feature-settings: "tnum"; white-space: nowrap; }
.bfare__per { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.bfare__row > .ico { grid-area: go; width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--t-fast) var(--ease-out), color var(--t-fast); }
.bfare__row:hover > .ico { color: var(--act-ink); }
.bfare__row.is-pick { background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); border-bottom-color: transparent; --focus: var(--focus-inv); }
.bfare__row.is-pick :is(.bfare__days, .bfare__hint, .bfare__per) { color: var(--inv-2); }
.bfare__row.is-pick > .ico { color: var(--act-on-ink); }
.bfare__punch { align-self: center; width: 12px; height: 12px; margin-right: -2px; border-radius: 50%; background: var(--act-on-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--act-on-ink) 28%, transparent); }
.bfare__foot { padding-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 379px) { .bfare__x { display: none; } }
@media (max-width: 379px) { .bfare__gb { font-size: 19px; } .bfare__price { font-size: 18px; } .bfare__row { column-gap: 10px; } }
@media (min-width: 760px) { .bfare__band { padding-inline: 22px; } .bfare__in { padding: 20px 22px 18px; } .bfare__row { padding-inline: 12px; margin-inline: -12px; } }

/* ---------- sales block 3: tickets (.bdests) — a rail on phones, a grid from 660 px of block width ---------- */
.bdests { container-type: inline-size; }
.bdests__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; padding-top: 12px; border-top: 1.5px solid var(--ink); }
.bdests__t { font: 780 clamp(26px, 7vw, 34px)/1 var(--f-d); font-stretch: 60%; text-wrap: balance; }
.bdests__row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--g)); padding: 6px var(--g) 24px; scroll-padding-inline: var(--g); scrollbar-width: none; overscroll-behavior-x: contain; }
.bdests__row::-webkit-scrollbar { display: none; }
.bdests__row > .tkt { flex: 0 0 min(72vw, 270px); scroll-snap-align: start; }
@media (min-width: 1000px) { .bdests__row { margin-inline: 0; padding-inline: 2px; scroll-padding-inline: 2px; } }
@container (min-width: 660px) {
  .bdests__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; overflow: visible; margin: 0; padding: 4px 0 6px; }
  .bdests__row > .tkt { flex: none; }
}

/* ---------- sales block 4: the seat-pocket card (.bphone) ---------- */
.bphone { container-type: inline-size; }
.bphone__in { display: grid; gap: 18px; padding: 20px 18px 16px; background: var(--paper-2); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--rule); }
.bphone__keys { display: flex; gap: 7px; }
.bphone__keys kbd { display: grid; place-items: center; width: clamp(40px, 12cqi, 58px); aspect-ratio: 1; border-radius: 50%; background: var(--ticket); border: 1.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 700 clamp(19px, 5.4cqi, 26px)/1 var(--f-d); font-stretch: 110%; }
.bphone__text { display: grid; gap: 8px; min-width: 0; }
.bphone__h { font: 780 clamp(26px, 7vw, 34px)/1 var(--f-d); font-stretch: 60%; text-wrap: balance; }
.bphone__p { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.bphone__p b { color: var(--ink); }
.bphone__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 6px; }
.bbtn { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 18px; border-radius: var(--r); background: var(--inv-bg); color: var(--inv-fg); box-shadow: inset 0 0 0 1.5px var(--inv-edge); font-weight: 600; text-decoration: none; }
.bbtn .ico { width: 20px; height: 20px; }
.bbtn:hover { background: var(--act); color: #fff; box-shadow: none; }
.blink { font-weight: 600; color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.blink:hover { text-decoration-thickness: 2px; }
@container (min-width: 560px) {
  .bphone__in { grid-template-columns: auto minmax(0, 1fr); gap: 30px; padding: 26px 28px 22px; align-items: center; }
  .bphone__keys { flex-wrap: wrap; width: calc(3 * 58px + 2 * 7px); justify-content: center; }
  .bphone__keys kbd { width: 58px; font-size: 26px; }
}

/* ---------- sales block 5: the install route (.binstall) — the storefront journey, re-laid for a column ---------- */
.binstall { container-type: inline-size; padding: 24px var(--g) 22px; margin-inline: calc(-1 * var(--g)); background: var(--paper-2); }
.binstall__h { display: grid; gap: 8px; margin-bottom: 22px; }
.binstall__t { font: 780 clamp(30px, 8cqi, 42px)/1 var(--f-d); font-stretch: 60%; text-wrap: balance; }
.binstall .journey { grid-template-columns: minmax(0, 1fr); gap: 0; }
.binstall .journey::before { left: 11px; right: auto; top: 14px; bottom: 30px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--ink-3) 0 3px, transparent 0 9px); }
.binstall .stop { padding: 0 0 24px 44px; }
.binstall .stop--go h3 { margin-left: -10px; }
.binstall__foot { padding-top: 16px; border-top: 1px solid var(--rule-2); font-size: 15px; color: var(--ink-2); }
@container (min-width: 700px) {
  .binstall .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 36px; }
  .binstall .journey::before { display: none; }
  .binstall .stop--go h3 { margin-left: 0; }
}
@media (min-width: 760px) { .binstall { margin-inline: 0; padding: 28px 30px 24px; border-radius: var(--r); } }

/* ---------- phones: the sticky bar (shares .buybar; site.js drives it) ---------- */
.postbar__sum { display: flex; align-items: center; gap: 12px; min-width: 0; }
.postbar__sum > span { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.postbar__sum b { font: 750 18px/1.1 var(--f-d); font-stretch: 76%; }
.postbar__sum > span > span { font-size: 13px; color: var(--on-deep-2); }
.postbar .flag { width: 24px; box-shadow: 0 0 0 1px var(--raise-edge); }
.postbar .buybar__go { flex: none; }
@media (max-width: 359px) { .postbar__sum > .flag { display: none; } }

/* phones: the band keeps only «Посадочный талон» / «Тарифы» (the · eSIM tail drops, like on the pass) */
@media (max-width: 419px) { .bcta__band .nocase, .bfare__band .nocase { display: none; } .bcta__band, .bfare__band { letter-spacing: .07em; font-size: 11.5px; } }
/* a section note that ends in a 44 px link: the link takes its own line, the text keeps its leading */
.sec__link { display: flex; width: fit-content; }
/* phones: the crumbs stop at «Журнал» — the article title is the H1 right below */
.crumbs__cur { display: contents; }
.crumbs__cur > span[aria-current] { color: var(--ink); font-weight: 500; }
@media (max-width: 559px) { .crumbs__cur { display: none; } }

/* ---------- blog motion (opt-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pcard { transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
  .pcard__win > img { transition: transform 600ms var(--ease-out); }
  .pcard:active, .bcta__sheet:active, .post__ticket:active { transform: scale(.985); }
  .bcta__sheet, .post__ticket { transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
  .bcta__go, .post__tgo, .bbtn { transition: background-color var(--t-fast), color var(--t-fast); }
  .toc__n { transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .pcard:hover { transform: translateY(-4px) rotate(-.4deg); }
    .pcard:hover .pcard__win > img { transform: scale(1.04); }
    .bcta__sheet:hover, .post__ticket:hover { transform: translateY(-3px); }
    .bcta__sheet:hover .bcta__go .ico, .post__ticket:hover .post__tgo .ico, .bbtn:hover .ico, .bfare__row:hover > .ico, .post__dest:hover .ico { transform: translateX(3px); }
  }
  @supports (animation-timeline: view()) {
    .pcard, .bcta, .bfare, .bdests, .bphone, .binstall { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}

/* Источники статьи: первоисточники из текста с издателем и месяцем проверки — мелкой печатью, как сноски в журнале */
.post__src { margin-top: 48px; padding-top: 14px; border-top: 1.5px solid var(--ink); }
.post__src-h { display: block; margin: 0 0 10px; }
.post__src-list { margin: 0; padding: 0; list-style: none; counter-reset: src; display: grid; gap: 10px; }
.post__src-list li { counter-increment: src; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; font-size: 14px; line-height: 1.45; }
.post__src-list li::before { content: counter(src, decimal-leading-zero); grid-row: span 2; font: 700 12px/1.6 var(--f-d); font-stretch: 120%; color: var(--ink-3); }
.post__src-list a { overflow-wrap: anywhere; }
.post__src-meta { color: var(--ink-3); font-size: 13px; }