/* NomadPost landing — built from Figma frames L/Home 1920 / 1440 / 1024 / 400.
   Each design applies from its own width up to the next one:
   >=1920 → 1920 · 1440–1919 → 1440 · 1024–1439 → 1024 · <1024 → 400 (fluid).
   Text containers grow with their content so DE / RU copy never clips. */

/* Self-hosted fonts (subset: Latin, Latin Extended-A, Cyrillic) - no requests to third-party servers. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/outfit-var.woff2") format("woff2"); }

:root {
  /* Typography — Figma collection "Typography", mode 1920 */
  --fs-display: 80px;  --lh-display: 88px;  --ls-display: -0.8px;
  --fs-h1: 64px;       --lh-h1: 72px;       --ls-h1: -0.64px;
  --fs-h3: 40px;       --lh-h3: 48px;       --ls-h3: -0.4px;
  --fs-subtitle: 28px; --lh-subtitle: 36px; --ls-subtitle: -0.28px;
  --fs-body-emph: 20px; --lh-body-emph: 28px;
  --fs-body: 18px;     --lh-body: 28px;     --ls-body: -0.18px;
  --fs-body-sm: 16px;  --lh-body-sm: 24px;
  --fs-caption: 14px;  --lh-caption: 20px;

  --gutter: 96px;
  --header-h: 80px;
  --ink: #ebeff4;
  --accent-grad: linear-gradient(90deg, #eac382 0%, #f4b751 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #000; color: #fff; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, picture { display: block; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
hr { border: 0; margin: 0; height: 1px; width: 100%; }
:focus-visible { outline: 2px solid #f4b751; outline-offset: 3px; }

.page { max-width: 1920px; margin: 0 auto; background: #000; position: relative; }
[hidden] { display: none !important; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 40; padding: 12px 20px; border-radius: 999px; background: #fff; color: #000; font-weight: 500; transition: top .15s ease-out; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.t-display  { font-weight: 700; font-size: var(--fs-display);  line-height: var(--lh-display);  letter-spacing: var(--ls-display); overflow-wrap: break-word; }
.t-h1       { font-weight: 700; font-size: var(--fs-h1);       line-height: var(--lh-h1);       letter-spacing: var(--ls-h1); overflow-wrap: break-word; }
.t-h3       { font-weight: 600; font-size: var(--fs-h3);       line-height: var(--lh-h3);       letter-spacing: var(--ls-h3); overflow-wrap: break-word; }
.t-subtitle { font-weight: 500; font-size: var(--fs-subtitle); line-height: var(--lh-subtitle); letter-spacing: var(--ls-subtitle); }
.t-body-emph{ font-weight: 500; font-size: var(--fs-body-emph);line-height: var(--lh-body-emph); letter-spacing: 0; }
.t-body     { font-weight: 400; font-size: var(--fs-body);     line-height: var(--lh-body);     letter-spacing: var(--ls-body); }
.t-body-sm  { font-weight: 400; font-size: var(--fs-body-sm);  line-height: var(--lh-body-sm);  letter-spacing: 0; }
.t-caption  { font-weight: 400; font-size: var(--fs-caption);  line-height: var(--lh-caption);  letter-spacing: 0; }
.muted { color: #848b93; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: 999px; text-align: center; white-space: nowrap; font-weight: 500; font-size: var(--fs-body-emph); line-height: var(--lh-body-emph); transition: filter .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out; }
.btn--accent { background: var(--accent-grad); color: #000; box-shadow: inset 0 -2px 0 0 #8b6423; }
.btn--glass  { background: rgba(255, 255, 255, .3); color: #fff; }
.btn--white  { background: #fff; color: #000; box-shadow: inset 0 -2px 0 0 #ebebeb; }
.btn--black  { background: #000; color: #fff; box-shadow: inset 0 -2px 0 0 #222; }
.btn--block  { display: flex; width: 100%; }

/* hover only where a real pointer exists, so touch screens never get a stuck state */
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: inset 0 -2px 0 0 #8b6423, 0 10px 28px -8px rgba(244, 183, 81, .65); }
  .btn--glass:hover  { background-color: rgba(255, 255, 255, .45); }
  .btn--white:hover  { transform: translateY(-1px); box-shadow: inset 0 -2px 0 0 #ebebeb, 0 10px 24px -10px rgba(0, 0, 0, .4); }
  .btn--black:hover  { background-color: #1f1f1f; transform: translateY(-1px); box-shadow: inset 0 -2px 0 0 #222, 0 10px 24px -10px rgba(0, 0, 0, .5); }
  .hero__toggle:hover { background: rgba(0, 0, 0, .65); }
  .lang a { transition: color .18s ease-out; }
  .lang a:hover { color: #fff; }
}
.btn:active { transform: translateY(1px); filter: brightness(.96); }

/* ---------- header ---------- */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; background-color: #000; transition: background-color .25s ease-out; }
/* scrolled: frosted glass over whatever passes underneath */
.header.is-scrolled { background-color: rgba(10, 10, 10, .68); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-scrolled { background-color: rgba(0, 0, 0, .92); }
}
.header__left { display: flex; align-items: center; gap: 76px; }
.header__right { display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: #fff; font-family: "Outfit", "Inter", system-ui, sans-serif; font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.brand img { width: 40px; height: auto; filter: invert(1) brightness(1.06); }
.brand--lg { gap: 18px; font-size: 22px; }
.brand--lg img { width: 54px; }
.nav { display: flex; align-items: center; gap: 32px; color: var(--ink); font-weight: 500; font-size: var(--fs-body-emph); line-height: var(--lh-body-emph); white-space: nowrap; }
.nav a:hover { color: #fff; }

/* ---------- hero ---------- */
/* First screen: video covers the viewport below the sticky black header on every size. */
.hero { position: relative; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 560px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__poster,
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero__video { opacity: 0; transition: opacity .4s ease-out; }
.hero__video.is-playing { opacity: 1; }
.hero__copy { position: absolute; left: 96px; bottom: 116px; width: max-content; max-width: 1100px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__text { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.hero__text p { width: 0; min-width: 100%; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 12px; }
.hero__stats div { display: flex; flex-direction: column; gap: 2px; }

.hero[data-hero] { cursor: pointer; }
.hero[data-hero] a, .hero[data-hero] button { cursor: pointer; }
.hero__toggle { position: absolute; top: 24px; right: var(--gutter); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .45); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .18s ease-out; }
.hero__toggle .icon-play { display: none; }
.hero__toggle.is-paused .icon-pause { display: none; }
.hero__toggle.is-paused .icon-play { display: block; }

/* "Coming soon" card (replaces the store QR code until the app is published) */
.soon { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px; border-radius: 16px; text-align: center; }
.soon__label { padding: 4px 12px; border-radius: 999px; font-weight: 600; letter-spacing: .08em; background: rgba(244, 183, 81, .18); color: #8b6423; }
.soon--hero { position: absolute; right: 100px; bottom: 116px; width: 320px; background: #fff; color: #000; }
.soon--hero .t-h3 { font-size: 28px; line-height: 36px; letter-spacing: -.28px; }
.soon--hero .t-body-sm { color: #4a4a4a; }
.soon--download { position: absolute; right: 94px; top: 52px; width: 320px; background: #000; color: #fff; }
.soon--download .soon__label { background: rgba(244, 183, 81, .2); color: #f4b751; }
.soon--download .t-h3 { font-size: 28px; line-height: 36px; letter-spacing: -.28px; }
.soon--download .t-body-sm { color: #aeaeae; }

/* ---------- inside the app ---------- */
.inside { position: relative; min-height: 1140px; padding: 120px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 40px; overflow: hidden; }
.inside__head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.inside__head p { color: var(--ink); }
.inside__phone { position: relative; flex: none; width: 390px; height: 785px; }
.inside__poster, .inside__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inside__video { opacity: 0; transition: opacity .4s ease-out; }
.inside__video.is-playing { opacity: 1; }
.deco { position: absolute; display: flex; align-items: center; justify-content: center; mix-blend-mode: difference; pointer-events: none; }
.deco img { flex: none; width: 221px; height: 221px; max-width: none; }
.deco--a { width: 290.381px; height: 290.381px; }
.deco--a img { transform: rotate(-23.29deg); }
.deco--b { width: 273.547px; height: 273.547px; }
.deco--b img { transform: rotate(16.07deg); }
.deco--package    { left: 176.31px;  top: 328.31px; }
.deco--check      { right: 222.62px; top: 274px; }
.deco--crosshairs { right: -16.55px; top: 59px; }
.deco--route      { left: 227px;     top: 739px; }
.deco--track      { left: -47px;     top: -45px; }
.deco--suitcase   { right: 247.45px; top: 724px; }

/* ---------- only route ---------- */
.only { min-height: 906px; padding: 100px var(--gutter); display: flex; align-items: center; justify-content: center; background: #000; text-align: center; }
.only__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.only__inner p { width: 1450px; max-width: 100%; }

/* ---------- cheaper than courier ---------- */
.cheaper { padding: 100px 240px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; background: #fff; color: #000; overflow: hidden; }
.cheaper__head { display: flex; flex-direction: column; gap: 8px; max-width: 1100px; }
.cheaper__head p { color: #4a4a4a; }
.cheaper__note { max-width: 1100px; color: #6b6b6b; }
.cheaper__row { display: flex; align-items: stretch; gap: 20px; width: 1442px; max-width: 100%; }
.price { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 40px; border-radius: 24px; overflow: hidden; }
.price--nomad   { flex: 709 1 0; background: var(--accent-grad); }
.price--courier { flex: 712 1 0; background: #f5f5f5; }
.price__line { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.price__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.price__top .t-caption { text-align: right; }
.price--nomad .t-h1 { color: #0d0d0d; }
.price--nomad .t-caption { color: #262626; }
.price--nomad hr { background: #000; }
.price--courier hr { background: #272727; }
.bullets { display: flex; flex-direction: column; gap: 7px; }
.bullets--tint { width: 100%; background: rgba(245, 188, 93, .12); }
.bullets li { display: flex; align-items: center; gap: 10px; }
.bullets li img { flex: none; width: 28px; height: 28px; }
.price--nomad .bullets span { color: rgba(38, 38, 38, .85); }

/* ---------- for travelers ---------- */
.travelers { padding: 100px var(--gutter); display: flex; justify-content: center; background: #fff; color: #000; }
.travelers__row { display: flex; gap: 20px; }
.travelers__copy { width: 707px; min-height: 639px; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.travelers__text { display: flex; flex-direction: column; gap: 40px; }
.travelers__photo { flex: none; width: 707px; height: 639px; }
.travelers__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }

/* ---------- how it works ---------- */
.how { padding: 100px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 40px; background: #fff; color: #000; }
.how > h2 { width: 100%; text-align: center; }
.how__row { width: 1332px; max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.how__steps { width: 646px; display: flex; flex-direction: column; gap: 40px; }
.step { min-height: 200px; display: flex; flex-direction: column; gap: 8px; color: #828282; }
.step--active { min-height: 228px; color: #000; }
.step__bar { display: block; flex: none; width: 100%; height: 8px; margin-top: auto; background: #e5e7eb; }
.step__bar i { display: block; width: 270px; max-width: 100%; height: 8px; background: #000; }
.how__phone { flex: none; width: 613px; height: 707px; }
.how__phone img { width: 100%; height: 100%; }

/* ---------- three-way lock ---------- */
.lock { padding: 120px; display: flex; flex-direction: column; align-items: center; gap: 64px; background: #fff; color: #000; }
.lock__head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.lock__head h2 { width: 900px; max-width: 100%; }
.lock__head p { width: 720px; max-width: 100%; }
.lock__cards { display: flex; align-items: stretch; gap: 16px; }
.lock-card { width: 420px; padding: 48px 40px; display: flex; flex-direction: column; align-items: center; gap: 20px; border-radius: 16px; background: #000; color: #fff; text-align: center; overflow: hidden; }
.lock-card--accent { background: var(--accent-grad); color: #000; box-shadow: 0 3px 32px -5px #eebe6e; }
.lock-card p { flex: none; width: 340px; max-width: 100%; }
.lock__note { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.lock__note img { flex: none; }

/* ---------- FAQ ---------- */
.faq { padding: 64px var(--gutter); display: flex; justify-content: center; background: #000; color: #fff; }
.faq__panel { width: 860px; max-width: 100%; border-top: 1px solid #262626; border-bottom: 1px solid #262626; }
.faq__toggle, .faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; cursor: pointer; color: #fff; }
.faq__toggle::-webkit-details-marker, .faq__list summary::-webkit-details-marker { display: none; }
.faq__toggle { padding: 24px 0; }
.faq__toggle h2 { font-weight: 600; font-size: var(--fs-subtitle); line-height: var(--lh-subtitle); letter-spacing: var(--ls-subtitle); }
.faq__toggle::after { content: ""; flex: none; width: 10px; height: 10px; margin: 0 8px; border-right: 2px solid #f4b751; border-bottom: 2px solid #f4b751; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease-out; }
.faq__panel[open] > .faq__toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__list { border-top: 1px solid #262626; }
.faq__list details { border-bottom: 1px solid #262626; }
.faq__list details:last-child { border-bottom: 0; }
.faq__list summary { padding: 16px 0; font-weight: 500; font-size: var(--fs-body); line-height: var(--lh-body); }
.faq__list summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #3a3a3a; font-weight: 400; font-size: 18px; line-height: 1; color: #f4b751; }
.faq__list details[open] summary::after { content: "–"; background: rgba(244, 183, 81, .14); }
.faq__list details > p { padding: 0 52px 20px 0; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: #aeaeae; }
.faq__more { padding: 4px 0 24px; }
.faq__more a { color: #f4b751; border-bottom: 1px solid rgba(244, 183, 81, .4); }
.faq__more a:hover { color: #fff; border-bottom-color: #fff; }

/* ---------- download ---------- */
.download { position: relative; min-height: 479px; padding: 40px 418px 40px 735px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: #fff; color: #000; overflow: hidden; }
.download__head { max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.download__head p { width: 720px; max-width: 100%; }
.download__badges { display: flex; gap: 8px; justify-content: center; }
.download__badges img { height: 40px; width: auto; }
.badge { display: block; opacity: .4; filter: grayscale(1); }
.download__soon { color: #4a4a4a; text-align: center; }
.download__phones { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; }
.download__phones img { height: 479px; width: auto; max-width: none; }

/* ---------- footer ---------- */
.footer { --fs-caption: 14px; --lh-caption: 20px; padding: 72px var(--gutter) 40px; display: flex; flex-direction: column; gap: 48px; }
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; }
.lang { display: flex; align-items: center; border-radius: 6.56px; background: #121212; overflow: hidden; font-size: var(--fs-caption); line-height: var(--lh-caption); }
.lang a { width: 56px; padding: 6.56px; color: #7b7b7b; text-align: center; }
.lang a:nth-child(2) { width: 57px; }
.lang a.is-active { background: rgba(255, 255, 255, .14); color: #fff; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
.footer__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; color: #828282; }
.footer__trust li { display: flex; align-items: center; gap: 9px; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.footer__links a { color: #aeaeae; }
.footer__links a:hover { color: #fff; }

/* ---------- error pages (404 / 50x) ---------- */
.page--error { min-height: 100vh; display: flex; flex-direction: column; }
.error { flex: 1; padding: 120px var(--gutter); display: flex; align-items: center; justify-content: center; text-align: center; }
.error__block { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 720px; }
.error__code { font-weight: 700; font-size: 160px; line-height: 1; letter-spacing: -2px; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error__block p.t-subtitle { color: var(--ink); }
.error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }

/* ---------- legal notice page ---------- */
.legal { padding: 80px var(--gutter) 120px; display: flex; justify-content: center; }
.legal__inner { width: 760px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.legal__inner h1 { margin-bottom: 4px; }
.legal__inner .legal__lead { margin-bottom: 20px; font-weight: 500; font-size: var(--fs-subtitle); line-height: var(--lh-subtitle); letter-spacing: var(--ls-subtitle); color: var(--ink); }
.legal__inner h2 { margin-top: 28px; font-weight: 600; font-size: var(--fs-body-emph); line-height: var(--lh-body-emph); color: #fff; }
.legal__inner p, .legal__inner address { font-style: normal; font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: #aeaeae; overflow-wrap: anywhere; }
.legal__inner h3 { margin-top: 12px; font-weight: 600; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: #fff; }
.legal__inner strong { font-weight: 600; color: #fff; }
.legal__inner hr { margin: 16px 0 4px; background: #262626; }
.legal__inner code { padding: 1px 6px; border-radius: 4px; background: #181818; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.legal__inner ul, .legal__inner ol { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: #aeaeae; }
.legal__inner ul { list-style: disc; }
.legal__inner ol { list-style: decimal; }
.legal__inner li::marker { color: #828282; }
.legal__inner a { color: #f4b751; border-bottom: 1px solid rgba(244, 183, 81, .35); transition: border-color .18s ease-out, color .18s ease-out; }
.legal__inner a:hover { color: #fff; border-bottom-color: #fff; }

/* =====================================================================
   1440 design
   ===================================================================== */
@media (max-width: 1919px) {
  :root {
    --fs-display: 72px;  --lh-display: 80px;  --ls-display: -0.72px;
    --fs-h1: 56px;       --lh-h1: 64px;       --ls-h1: -0.56px;
    --fs-h3: 36px;       --lh-h3: 44px;       --ls-h3: -0.36px;
    --fs-subtitle: 24px; --lh-subtitle: 32px; --ls-subtitle: -0.24px;
    --fs-body-emph: 18px;
    --gutter: 80px;
  }
  .hero__copy { left: 92px; bottom: 60px; max-width: 900px; }
  .soon--hero { right: 92px; bottom: 60px; width: 300px; }
  .soon--download { right: 94px; width: 300px; }

  .deco--package    { left: 176px;      top: 328.6px; }
  .deco--check      { right: -257.38px; top: 273.6px; }
  .deco--crosshairs { right: -65.3px; }
  .deco--route      { left: 226.8px; }
  .deco--suitcase   { right: 132.7px; }

  .only__inner p { width: 1100px; }

  .download { padding-inline: 464px 418px; }

  .cheaper { padding: 100px 120px; }
  .price--nomad > p { font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-caption); }
  .cheaper__row { width: 100%; }
  .price--nomad, .price--courier { flex: 1 1 0; }

  .travelers__copy, .travelers__photo { width: 630px; }

  .how__row { width: 100%; }

  .lock { padding: 120px 96px; }
  .lock-card { width: 405px; }

}

/* =====================================================================
   1024 design
   ===================================================================== */
@media (max-width: 1439px) {
  :root {
    --fs-display: 56px;  --lh-display: 64px;  --ls-display: -0.56px;
    --fs-h1: 48px;       --lh-h1: 56px;       --ls-h1: -0.48px;
    --fs-h3: 32px;       --lh-h3: 40px;       --ls-h3: -0.32px;
    --fs-subtitle: 22px; --lh-subtitle: 30px; --ls-subtitle: -0.22px;
    --fs-body-emph: 17px; --lh-body-emph: 24px;
    --fs-body: 16px;     --lh-body: 24px;     --ls-body: -0.16px;
    --fs-body-sm: 15px;  --lh-body-sm: 22px;
    --fs-caption: 13px;  --lh-caption: 18px;
    --gutter: 48px;
  }
  .header__left { gap: 40px; }
  .hero__copy { left: 48px; bottom: 48px; width: 560px; }
  .hero__text p { width: auto; min-width: 0; }
  .soon--hero { right: 48px; bottom: 48px; }
  .soon--hero, .soon--download { gap: 10px; padding: 24px 20px; }

  .deco--package    { left: 56px;       top: 348.6px; }
  .deco--check      { right: -267.38px; }
  .deco--crosshairs { right: -107.3px; }
  .deco--route      { left: 55.8px;     top: 800px; }
  .deco--suitcase   { right: 32.7px; }

  .only { min-height: 707px; }
  .only__inner p { width: 800px; }

  .cheaper { padding: 100px 64px; }

  .travelers__copy, .travelers__photo { width: 454px; }

  .how__steps { width: 392px; }
  .how__phone { width: 440px; }

  .lock { padding: 120px 64px; }
  .lock__head h2 { width: 860px; }
  .lock-card { width: 288px; padding: 48px 24px; }
  .lock-card p { width: 100%; }


  .download { min-height: 407px; padding-inline: 404px 330px; }
  .download__phones img { height: 407px; }
  .soon--download { right: 48px; top: 40px; width: 260px; }
  .soon--hero .t-h3, .soon--download .t-h3 { font-size: 24px; line-height: 32px; }

  .footer__trust { gap: 8px 16px; }
}

/* =====================================================================
   400 design (fluid below 1024)
   ===================================================================== */
@media (max-width: 1023px) {
  :root {
    --fs-display: 36px;  --lh-display: 44px;  --ls-display: -0.36px;
    --fs-h1: 32px;       --lh-h1: 40px;       --ls-h1: -0.32px;
    --fs-h3: 24px;       --lh-h3: 32px;       --ls-h3: -0.24px;
    --fs-subtitle: 18px; --lh-subtitle: 24px; --ls-subtitle: -0.18px;
    --fs-body-emph: 16px;
    --fs-body-sm: 14px;  --lh-body-sm: 20px;
    --fs-caption: 12px;  --lh-caption: 16px;
    --gutter: 20px;
  }
  .header { padding: 0 20px; }
  .header__right { gap: 12px; }
  .lang a, .lang a:nth-child(2) { width: 38px; padding-inline: 0; }
  .nav { display: none; }
  .btn { white-space: normal; padding-inline: 20px; }

  .hero { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 480px; padding: 32px 20px; display: flex; align-items: flex-end; }
  .hero__copy { position: relative; left: auto; bottom: auto; width: 100%; max-width: none; }
  .hero__ctas { align-self: stretch; }
  .hero__ctas .btn { flex: 1 1 140px; }
  .soon--hero { display: none; }
  .hero__toggle { top: 16px; right: 20px; }

  .inside { min-height: 0; padding: 24px 20px; gap: 20px; }
  .inside__phone { width: 280px; height: 564px; }
  .deco--check, .deco--crosshairs, .deco--route, .deco--suitcase { display: none; }

  .only { min-height: 354px; padding: 32px 20px; }
  .only__inner p { width: 100%; }

  .cheaper { padding: 32px 20px; }
  .cheaper__row { flex-direction: column; gap: 16px; }
  .price { padding: 40px 24px; align-self: stretch; }
  .price--nomad, .price--courier { flex: none; }

  .travelers { padding: 32px 20px; }
  .travelers__row { width: 100%; flex-direction: column; }
  .travelers__copy { width: 100%; min-height: 406px; gap: 32px; }
  .travelers__text { gap: 16px; }
  .travelers__photo { width: 100%; height: auto; aspect-ratio: 360 / 240; }

  .how { padding: 32px 20px; gap: 20px; }
  .how__row { flex-direction: column; gap: 24px; }
  .how__phone { order: -1; width: 100%; max-width: 360px; height: auto; aspect-ratio: 360 / 420; }
  .how__steps { width: 100%; }
  .step, .step--active { min-height: 0; }

  .lock { padding: 36px 20px; gap: 32px; }
  .lock__cards { align-self: stretch; flex-direction: column; gap: 12px; }
  .lock-card { width: 100%; }
  .lock__note { text-align: left; }


  .download { min-height: 0; padding: 32px 20px; }
  .download__head { width: fit-content; }
  .download__head p { width: 0; min-width: 100%; }
  .download__phones { display: none; }
  .soon--download { position: static; width: 100%; max-width: 360px; margin-top: 8px; }
  .faq { padding: 32px 20px; }
  .faq__toggle { padding: 20px 0; }
  .faq__list summary { gap: 16px; }
  .faq__list details > p { padding-right: 0; }
  .error { padding: 64px 20px; }
  .error__code { font-size: 96px; }

  .footer { padding: 24px 20px; gap: 20px; }
  .footer__top { flex-direction: column; gap: 16px; }
  .brand--lg { gap: 12px; font-size: 16px; }
  .brand--lg img { width: 36px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 24px; }
  .footer__trust { flex-direction: column; align-items: flex-start; gap: 4px; }

  .legal { padding: 32px 20px 64px; }
  .legal__inner h2 { margin-top: 20px; }
}

@media (max-width: 640px) {
  .header__right .btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .header, .hero__video, .inside__video, .hero__toggle, .faq__toggle::after, .skip { transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .hero__video, .inside__video, .hero__toggle { display: none; }
}