/* ========================================
   PAGE SECTIONS - features, pricing, FAQ and footer below the hero
   (src/components/MobileSections.astro). Written for phones first; wider
   screens get a roomier layout at the end of this file.
   ======================================== */

/* Bilingual copy: both languages are rendered, html[lang] shows one */
[data-l='ru'] {
  display: none;
}

html[lang='ru'] [data-l='ru'] {
  display: inline;
}

html[lang='ru'] [data-l='en'] {
  display: none;
}

/* An explicit page colour, so no browser or embedding view shows through */
body {
  background: #fff;
}

.m-page,
.m-footer {
  --m-ink: #111;
  --m-muted: #6b6b70;
  --m-faint: #9a9aa0;
  --m-line: #ebebed;
  --m-card: #fff;
  --m-radius: 22px;
  --m-ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  color: var(--m-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Section scaffolding ---------- */

.m-section {
  padding: 48px 20px 0;
}

/* The last band's own 48px is the space above the pricing */
.m-pricing {
  padding-top: 0;
}

.m-section-head {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 360px;
}

/* The hero's and footer's title size (26px on phones) */
.m-section-title {
  margin: 0 0 12px;
  font-size: var(--text-3xl);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  /* Two even lines, never one word alone on the second */
  text-wrap: balance;
}

/* A shorter FAQ title that fits one line */
.m-faq .m-section-title {
  font-size: 1.5rem;
}

.m-section-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--m-muted);
}

/* ---------- Reveal on scroll (only once mobile.js is running) ---------- */

.m-js .m-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.8s var(--m-ease);
}

.m-js .m-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Features ---------- */

/* Each feature is a band; the bands alternate white and light grey,
   starting with white, so each chat reads with the copy in its own band.
   Centred in its band: 48px above the title, and 48px under the last
   bubble (the stack's 4px, the chat's 8px of room and these 36px) */
.m-feature {
  max-width: 420px;
  margin: 0 auto;
  padding: 48px 0 36px;
}

/* The first band continues the white under the hero, below the
   section's own 48px */
.m-feature:first-of-type {
  padding-top: 0;
}

/* Grey from edge to edge of the screen, while the content keeps its
   column: the shadow paints the sides and clip-path keeps it level */
.m-feature:nth-of-type(even) {
  background: #f5f5f7;
  box-shadow: 0 0 0 100vmax #f5f5f7;
  clip-path: inset(0 -100vmax);
}

.m-feature-body {
  padding: 0 4px 32px;
  transition-delay: 0.08s;
}

/* A step smaller than the section titles */
.m-feature-title {
  margin: 0 0 10px;
  font-size: var(--text-2xl);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}

/* One key word per title sits on a hand-drawn marker stroke, which draws
   in from the left once the feature scrolls into view */
.m-feature-title mark {
  margin: 0 -0.08em;
  padding: 0 0.08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12C40 6 90 4 130 6s55 2 67 1l-1 9c-46 2-96 1-136 2S15 19 4 17z' fill='%23ffd84d'/%3E%3C/svg%3E") no-repeat 0 92% / 100% 0.5em;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.m-js .m-feature-body:not(.is-visible) .m-feature-title mark {
  background-size: 0 0.5em;
}

.m-feature-text {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.6;
  color: #4a4a4f;
}

/* An icon above the title, for wider screens only */
.m-feature-icon {
  display: none;
}

/* A longer second paragraph, for wider screens only */
.m-feature-more {
  display: none;
}

.m-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-ink);
  text-decoration: none;
}

.m-feature-link svg {
  width: 17px;
  height: 17px;
  transition: transform 0.25s var(--m-ease);
}

.m-feature-link:active svg {
  transform: translateX(4px);
}

/* ---------- Chat (bubbles only, straight on the page) ---------- */

/* Bubbles straight on the white page, no box */
.m-chat {
  position: relative;
}

/* A landmark engraving, faint behind the whole chat and fading out on every
   side. It is grey on white, so multiply lets it sit on a grey band too */
.m-chat--art {
  isolation: isolate;
}

.m-chat--art::before {
  content: "";
  position: absolute;
  inset: -16px -20px;
  z-index: -1;
  background: var(--m-chat-art) center 70% / 170% auto no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.17;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
  mask-composite: intersect;
}

/* Not fetched until its chat nears the screen (public/mobile.js) */
.m-js .m-chat--art:not(.is-near)::before {
  background-image: none;
}

/* mobile.js fits the height to one run of the conversation (this is the
   fallback) */
.m-chat-body {
  position: relative;
  height: 424px;
  overflow: hidden;
}

/* An invisible copy of the conversation, laid out to measure its height */
/* Doubled class: outranks .m-chat-stack's max-height below */
.m-chat-stack.m-chat-measure {
  max-height: none;
  visibility: hidden;
  pointer-events: none;
}

.m-chat-measure .m-msg,
.m-chat-measure .m-msg-inner {
  transition: none;
}

/* Starts at the top and grows down like a fresh chat. When a run ends the
   whole conversation fades out (is-clearing) and the next starts empty */
.m-chat-stack {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 4px;
  transition: opacity 0.5s ease;
}

.m-chat-stack.is-clearing {
  opacity: 0;
}

/* Messages vanish at once while cleared, so the next run starts empty */
.m-chat-stack.is-clearing .m-msg,
.m-chat-stack.is-clearing .m-msg-inner {
  transition: none;
}

.m-msg {
  display: grid;
  grid-template-rows: 1fr;
  flex-shrink: 0;
}

.m-msg-inner {
  min-height: 0;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.m-msg--user .m-msg-inner {
  align-items: flex-end;
}

/* Equal space around the line: 16px above, 4px + the next message's 12px
   below */
.m-msg--skip .m-msg-inner {
  align-items: stretch;
  padding: 16px 0 4px;
}

.m-msg--typing {
  display: none;
}

/* Hidden until the chat plays (mobile.js); rows collapse so the
   conversation slides up smoothly as each message arrives */
.m-js .m-msg {
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.45s var(--m-ease),
    opacity 0.3s ease;
}

.m-js .m-msg .m-msg-inner {
  overflow: hidden;
  padding-top: 0;
  transform: translateY(10px);
  transition:
    transform 0.5s var(--m-ease),
    padding-top 0.45s var(--m-ease);
}

.m-js .m-msg--typing {
  display: grid;
}

.m-js .m-msg.is-shown {
  grid-template-rows: 1fr;
  opacity: 1;
}

.m-js .m-msg.is-shown .m-msg-inner {
  padding-top: 12px;
  transform: none;
  overflow: visible;
}

/* The first bubble starts at the very top of the chat */
.m-msg:first-child .m-msg-inner,
.m-js .m-msg.is-shown:first-child .m-msg-inner {
  padding-top: 0;
}

.m-js .m-msg--skip.is-shown .m-msg-inner {
  padding-top: 16px;
}

.m-bubble {
  max-width: 80%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

.m-msg--bot .m-bubble {
  border-radius: 18px 18px 18px 2px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e4e4e7;
  color: #111;
}

.m-msg--user .m-bubble {
  border-radius: 18px 18px 2px 18px;
  background: #111;
  color: #fff;
}

.m-bubble small {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--m-muted);
}

.m-bubble b {
  font-weight: 600;
}

/* "2 days later": a quiet divider across the conversation */
.m-skip {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--m-muted);
  font-size: 0.75rem;
}

/* Dark enough to read over a landmark engraving */
.m-skip::before,
.m-skip::after {
  content: '';
  flex: 1;
  border-top: 1px dashed #c4c4c9;
}

/* A file, ticket or policy: one line under a hairline, no card */
/* The line above runs from edge to edge of the bubble: the row reaches
   into the bubble's side padding and pads its content back in. It is the
   colour of the band behind the chat, so it reads as a cut */
.m-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px -14px 0;
  padding: 8px 14px 0;
  border-top: 1px solid #e4e4e7;
}

.m-attach svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--m-muted);
  stroke-width: 1.75;
}

.m-attach-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.m-attach-title {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-attach-meta {
  font-size: 0.75rem;
  color: var(--m-muted);
}

/* A message that is only an attachment (photos sent without a word):
   the attachment fills the bubble, with no line above it */
.m-bubble--attach-only .m-attach {
  margin: 0;
  padding: 0;
  border-top: 0;
}

/* An attachment the user sends sits on their black bubble */
.m-msg--user .m-attach svg,
.m-msg--user .m-attach-meta {
  color: rgba(255, 255, 255, 0.65);
}

.m-typing {
  display: inline-flex;
  gap: 4px;
  padding: 13px 14px;
}

.m-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a6a6ac;
  animation: m-typing 1.2s ease-in-out infinite;
}

.m-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.m-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes m-typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
  }
  30% {
    opacity: 1;
  }
}

/* ---------- Results ---------- */

/* One sentence between the reviews and the FAQ, with 96px above (the
   last row's 12px and these 84px) and below (these 48px and the FAQ's) */
.m-stats {
  padding-top: 84px;
  padding-bottom: 48px;
}

/* Grey words with each figure in black, so the numbers carry it */
.m-stats-sentence {
  max-width: 420px;
  margin: 0 auto;
  font-size: 1.45rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: pretty;
  color: #a1a1aa;
}

.m-stats-sentence b {
  font-weight: 700;
  color: var(--m-ink);
}

/* Like the reviews title: once the sentence scrolls into view
   (.is-visible, public/mobile.js) it fades in from a blur (hero-blur-in,
   public/css/hero.css), without the usual rise */
.m-js .m-stats-sentence.m-reveal {
  transform: none;
}

.m-js .m-stats-sentence:not(.is-visible) {
  opacity: 0;
}

.m-stats-sentence.is-visible {
  animation: hero-blur-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .m-stats-sentence.is-visible {
    animation: none;
  }
}

/* ---------- Pricing ---------- */

/* The cards slide sideways when the country changes: never past the page */
.m-pricing {
  overflow-x: clip;
}

.m-pricing .m-section-head {
  margin-bottom: 28px;
}

/* The cards in the desktop ring's order (--pos), Italy in the middle, each
   one snapping to the centre of the screen; public/mobile.js starts on Italy */
.m-plans {
  display: flex;
  gap: 14px;
  margin: 0 -20px;
  padding: 6px calc((100vw - min(84vw, 340px)) / 2) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.m-plans::-webkit-scrollbar {
  display: none;
}

/* Like mobbin.com's plans: one grey box, a big price, one list */
.m-plan {
  flex: 0 0 min(84vw, 340px);
  order: var(--pos);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: 26px 20px 20px;
  box-sizing: border-box;
  border-radius: 28px;
  background: #f4f4f5;
}

.m-plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.m-plan-flag {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08);
}

/* A country that is coming soon: its flag in grey */
.m-plan-flag--soon {
  filter: grayscale(1);
  opacity: 0.55;
}

.m-plan-country {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: left;
}

/* An outlined pill: Popular */
.m-plan-pill {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1.5px solid var(--m-ink);
  border-radius: 999px;
  background: none;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--m-ink);
}

.m-plan-sub {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--m-muted);
}

.m-plan-price {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 24px;
}

.m-plan-amount {
  font-size: 3.25rem;
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.04em;
}

/* Two short lines beside the price */
.m-plan-extra {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--m-muted);
}

/* Labels over the two columns: everything comes with the price, and each
   service also has its own price */
.m-plan-list-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 12px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-faint);
}

.m-plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.m-plan-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.3;
}

.m-plan-list svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.07);
  color: var(--m-ink);
  stroke-width: 3;
}

.m-plan-service {
  flex: 1;
  min-width: 0;
  color: #3a3a3f;
}

/* The service on its own, in a small grey pill */
.m-plan-service-price {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.07);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: #3a3a3f;
}

/* No line height of its own, so the row keeps its height */
.m-plan-note-mark {
  line-height: 0;
  font-size: 0.8em;
  color: var(--m-muted);
}

/* What the starred services mean: we pay the fee, the fee is extra */
.m-plan-note {
  margin: 16px 0 22px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--m-muted);
}

.m-plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: auto;
  padding: 14px;
  border: 0;
  border-radius: 999px;
  background: #e4e4e7;
  color: #9a9aa0;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: not-allowed;
}

.m-plan-cta svg {
  width: 16px;
  height: 16px;
}

/* A country the bot serves today: a live link to the chat */
a.m-plan-cta {
  box-sizing: border-box;
  background: #111;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

a.m-plan-cta:active {
  transform: scale(0.98);
}

a.m-plan-cta img {
  width: 18px;
  height: 18px;
  /* The dark Telegram glyph, white on the black button */
  filter: brightness(0) invert(1);
}

.m-plans-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.m-plans-dot {
  order: var(--pos);
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d4d4d8;
  transition:
    width 0.3s var(--m-ease),
    background 0.3s ease;
}

.m-plans-dot.is-active {
  width: 20px;
  background: var(--m-ink);
}

/* The arrows that spin the plans on desktop; phones swipe instead */
.m-plans-arrow {
  display: none;
}

/* ---------- Reviews ---------- */

/* More room above than usual, so the reviews open a new part of the page */
.m-reviews {
  padding-top: 72px;
}

.m-reviews .m-section-head {
  margin-bottom: 28px;
}

/* The hero's five faces and order (32px, 18px overlap, 2px ring) at 1.5
   times the size, over the title */
.m-reviews-faces {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.m-reviews-face {
  position: relative;
  width: 48px;
  height: 48px;
  margin-left: -27px;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #e4e4e7;
}

.m-reviews-face:first-child {
  margin-left: 0;
}

/* Like the hero: once the heading scrolls into view (.is-visible,
   public/mobile.js) each face, then the title, fades in from a blur
   (hero-blur-in, public/css/hero.css). The heading itself skips the
   usual rise, so only its parts move */
.m-js .m-reviews-head.m-reveal {
  opacity: 1;
  transform: none;
}

.m-js .m-reviews-head:not(.is-visible) .m-reviews-face,
.m-js .m-reviews-head:not(.is-visible) .m-section-title {
  opacity: 0;
}

/* The shorthand resets the delay, so each delay below repeats this
   selector (and adds to it) to win */
.m-reviews-head.is-visible .m-reviews-face,
.m-reviews-head.is-visible .m-section-title {
  animation: hero-blur-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.m-reviews-head.is-visible .m-reviews-face:nth-child(1) {
  animation-delay: 0.05s;
}

.m-reviews-head.is-visible .m-reviews-face:nth-child(2) {
  animation-delay: 0.1s;
}

.m-reviews-head.is-visible .m-reviews-face:nth-child(3) {
  animation-delay: 0.15s;
}

.m-reviews-head.is-visible .m-reviews-face:nth-child(4) {
  animation-delay: 0.2s;
}

.m-reviews-head.is-visible .m-reviews-face:nth-child(5) {
  animation-delay: 0.25s;
}

.m-reviews-head.is-visible .m-section-title {
  animation-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .m-reviews-head .m-reviews-face,
  .m-reviews-head .m-section-title {
    animation: none;
  }
}

/* Three rows from edge to edge of the screen (out past the section's 20px
   padding), fading out at both sides. Each holds its cards twice, so
   sliding by half its width loops without a seam */
.m-reviews-row {
  margin: 0 -20px 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.m-reviews-track {
  display: flex;
  width: max-content;
}

/* The middle row drifts the other way, and each row at its own pace */
.m-reviews-row--left .m-reviews-track {
  animation: m-reviews-left 70s linear infinite;
}

.m-reviews-row--right .m-reviews-track {
  animation: m-reviews-right 85s linear infinite;
}

.m-reviews-row:nth-of-type(3) .m-reviews-track {
  animation-duration: 78s;
}

/* A finger on a row holds it still to read */
.m-reviews-row:active .m-reviews-track {
  animation-play-state: paused;
}

@keyframes m-reviews-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes m-reviews-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* Without motion the rows stand still and scroll by hand */
@media (prefers-reduced-motion: reduce) {
  .m-reviews-track {
    animation: none;
  }

  .m-reviews-row {
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* The right margin (not a gap) keeps both copies the same width */
.m-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 272px;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0 12px 0 0;
  padding: 16px 18px 18px;
  border-radius: var(--m-radius);
  background: #f4f4f5;
}

.m-review-who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.m-review-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: #e4e4e7;
}

.m-review-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.m-review-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.m-review-visa {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--m-muted);
  white-space: nowrap;
}

.m-review-flag {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.m-review-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #2a2a2e;
}

/* ---------- Comparison ---------- */

.m-compare .m-section-head {
  margin-bottom: 28px;
}

/* Criteria on the left, then Consul Bot, an agency and doing it yourself.
   A thin line runs under every row; the Consul Bot column is one grey
   rounded column on top of it */
.m-compare-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 82px 56px;
  max-width: 420px;
  margin: 0 auto;
}

.m-compare-head,
.m-compare-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.m-compare-head {
  padding: 16px 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--m-muted);
}

.m-compare-label,
.m-compare-cell {
  min-height: 52px;
  border-top: 1px solid var(--m-line);
}

.m-compare-label {
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 0;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* A value never breaks over two lines */
.m-compare-cell {
  padding: 0 4px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.m-compare-cell svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

/* A cross is quieter than a tick */
.m-compare-cell:not(.is-ours) svg[data-lucide='x'],
.m-compare-cell:not(.is-ours) .lucide-x {
  color: #c7c7cc;
}

.m-compare-head.is-ours,
.m-compare-cell.is-ours {
  background: #f4f4f5;
  color: var(--m-ink);
  border-top-color: rgba(17, 17, 17, 0.06);
}

.m-compare-head.is-ours {
  border-radius: 16px 16px 0 0;
}

/* Consul Bot's column is headed by the logo mark alone */
.m-compare-logo {
  width: 30px;
  height: 30px;
}

.m-compare-cell.is-ours.is-last {
  border-radius: 0 0 16px 16px;
}

/* Read out to screen readers, never shown */
.m-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Do it yourself ---------- */

.m-diy-card {
  max-width: 420px;
  margin: 0 auto;
  padding: 26px 22px 22px;
  background: #f4f4f5;
  border-radius: var(--m-radius);
}

.m-diy-title {
  margin: 0 0 8px;
  font-size: var(--text-2xl);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.m-diy-text {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.55;
  color: #4a4a4f;
}

.m-diy-list {
  margin-bottom: 18px;
}

/* On the grey card the ticks sit on white */
.m-diy-list svg {
  background: #fff;
}

/* ---------- FAQ ---------- */

/* Like mobbin.com's FAQ: each question in its own soft grey box, the
   same grey as the pricing cards, with a dark chevron */
.m-faq-list {
  display: grid;
  gap: 12px;
}

.m-faq-item {
  border-radius: 24px;
  background: #f4f4f5;
}

.m-faq-q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  list-style: none;
  cursor: pointer;
  font-size: 0.98rem;
  line-height: 1.4;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

.m-faq-q::-webkit-details-marker {
  display: none;
}

.m-faq-q-text {
  flex: 1;
}

/* Points down; turns to point up while the answer is open */
/* Larger than its 22px markup, like mobbin.com's, with the same line weight */
.m-faq-chevron {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
  color: var(--m-ink);
  transition: transform 0.35s var(--m-ease);
}

.m-faq-item[open] .m-faq-chevron {
  transform: rotate(180deg);
}

.m-faq-a-inner {
  margin-top: -6px;
  padding: 0 24px 22px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: #4a4a4f;
}

.m-faq-a-inner p {
  margin: 0;
}

.m-faq-a-inner p + p {
  margin-top: 10px;
}

.m-faq-item[open] .m-faq-a-inner {
  animation: m-faq-open 0.4s var(--m-ease);
}

@keyframes m-faq-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Footer ---------- */

/* global.css gives every footer a top line and margin: none here */
.m-footer {
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
  overflow: hidden;
}

/* The hero's visa stamps behind the whole footer: the same texture,
   opacity and slow drift as .hero-wrapper::before (public/css/hero.css),
   faded in from the top so the FAQ above blends into it */
.m-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/images/visa-stamps-bg.webp');
  background-repeat: repeat;
  background-size: 300px;
  opacity: 0.07;
  filter: grayscale(100%);
  pointer-events: none;
  animation: bg-scroll 80s linear infinite;
  /* No edge under the FAQ: the stamps fade in over the footer's top */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 220px);
  mask-image: linear-gradient(to bottom, transparent, #000 220px);
}

.m-footer > * {
  position: relative;
  z-index: 1;
}

/* Like the desktop hero: the stamps in full colour, shown only in a soft
   circle around the finger or the mouse (--lens-x/--lens-y, set by
   mobile.js). The hero's own colour layer comes back on phones, drifting at
   the phone pace of its grey stamps so the colours line up... */
.m-js .hero-color-lens {
  display: block;
  animation-duration: 80s;
}

/* A little stronger than the desktop on a phone screen: a wider circle,
   a bit more colour and a fuller centre. Colourless until lit
   (.is-lit, set by mobile.js): the colour fades in, and out again where
   the finger let go */
.m-js .hero-wrapper.hero-bg-ready .hero-color-lens {
  opacity: 0;
  transition: opacity 0.9s ease;
  -webkit-mask-image: radial-gradient(
    circle 155px at var(--lens-x, -200px) var(--lens-y, -200px),
    #000 0%,
    rgba(0, 0, 0, 0.5) 45%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 155px at var(--lens-x, -200px) var(--lens-y, -200px),
    #000 0%,
    rgba(0, 0, 0, 0.5) 45%,
    transparent 100%
  );
}

.m-js .hero-wrapper.hero-bg-ready .hero-color-lens.is-lit {
  opacity: 0.42;
  transition-duration: 0.6s;
}

/* ...and the footer gets one over its stamps */
.m-footer > .m-color-lens {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/images/visa-stamps-bg.webp');
  background-repeat: repeat;
  background-size: 300px;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
  animation: bg-scroll 80s linear infinite;
  /* The circle, and the same fade from the top as the grey stamps */
  -webkit-mask-image:
    radial-gradient(
      circle 155px at var(--lens-x, -200px) var(--lens-y, -200px),
      #000 0%,
      rgba(0, 0, 0, 0.5) 45%,
      transparent 100%
    ),
    linear-gradient(to bottom, transparent, #000 220px);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(
      circle 155px at var(--lens-x, -200px) var(--lens-y, -200px),
      #000 0%,
      rgba(0, 0, 0, 0.5) 45%,
      transparent 100%
    ),
    linear-gradient(to bottom, transparent, #000 220px);
  mask-composite: intersect;
}

.m-footer > .m-color-lens.is-lit {
  opacity: 0.42;
  transition-duration: 0.6s;
}

/* The page ends on a title, a subtitle and the hero's Chat on Telegram
   button (.hero-chat-action, public/css/hero.css), with room above and
   below */
.m-end {
  padding: 140px 20px 88px;
  text-align: center;
}

.m-end-title {
  margin: 0 auto 14px;
  max-width: 340px;
  font-size: var(--text-3xl);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Sized and coloured like the hero's subtitle */
.m-end-sub {
  margin: 0 auto 24px;
  max-width: 320px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #444;
}

.m-end-cta {
  display: inline-flex;
  text-decoration: none;
}

/* The black logo, centred, the copyright under it, a little room below */
.m-footer-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 20px 28px;
}

.m-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--m-ink);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
}

.m-footer-brand img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.m-footer-copy {
  margin: 0;
  font-size: 0.78rem;
  color: var(--m-faint);
  text-align: center;
}

/* Terms and privacy between the logo and the copyright, small and muted, one line */
.m-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.8rem;
}

/* A long (Russian) pair wraps between the links, never inside one */
.m-footer-links a {
  color: var(--m-muted);
  text-decoration: none;
  white-space: nowrap;
}

.m-footer-links a:hover {
  color: var(--m-ink);
}

.m-footer-dot {
  color: var(--m-faint);
}

@media (prefers-reduced-motion: reduce) {
  .m-js .m-reveal,
  .m-js .m-msg,
  .m-js .m-msg .m-msg-inner {
    transition: none;
  }

  .m-typing span,
  .m-footer::before,
  .m-color-lens {
    animation: none;
  }
}

/* ---------- Wider screens ---------- */

/* The same page, with more room: wider columns, larger titles, and each
   feature's copy beside its chat instead of above it */
@media (min-width: 769px) {
  .m-section {
    padding: 96px 40px 0;
  }

  /* Less room above the features (right under the hero) and above the
     pricing (the last feature's own padding is most of it) */
  .m-features {
    padding-top: 40px;
  }

  .m-pricing {
    padding-top: 24px;
  }

  .m-section-head {
    max-width: 560px;
    margin-bottom: 56px;
  }

  .m-section-title {
    font-size: 2.5rem;
  }

  .m-faq .m-section-title {
    font-size: 2.25rem;
  }

  .m-section-sub {
    font-size: 1.125rem;
  }

  /* Copy on one side, the chat on the other; the side swaps band by band */
  .m-feature {
    position: relative;
    max-width: 960px;
    display: grid;
    /* Two equal columns, so the vertical line between copy and chat runs
       down the middle of every feature */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: 80px;
    padding: 56px 0;
  }

  .m-feature:first-of-type {
    padding-top: 32px;
  }

  /* Hairlines: one between two features that fades out at both ends, and
     one down the middle of the whole section between copy and chat,
     fading in at the top and out at the bottom */
  .m-feature + .m-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #efeff1 25%, #efeff1 75%, transparent);
  }

  .m-features {
    position: relative;
  }

  .m-features::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #efeff1 8%, #efeff1 92%, transparent);
  }

  /* On a wide screen the review rows stop about where the features do,
     fading out over a longer stretch at each side */
  .m-reviews-row {
    max-width: 1040px;
    margin: 0 auto 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  }

  .m-feature:nth-of-type(even) .m-feature-body {
    order: 2;
  }

  .m-feature-body {
    padding: 0;
  }

  .m-feature-title {
    font-size: 2rem;
    margin-bottom: 14px;
  }

  .m-feature-text {
    font-size: 1.125rem;
  }

  /* Side by side, the copy and its chat read as a pair on their own: every
     feature on white */
  .m-feature:nth-of-type(even) {
    background: none;
    box-shadow: none;
    clip-path: none;
  }

  .m-feature-more {
    display: block;
  }

  .m-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: #f4f4f5;
    color: var(--m-ink);
  }

  .m-feature-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
  }

  /* Wider than it is tall beside the copy: the engraving covers the chat and
     can be a touch fainter */
  .m-chat--art::before {
    inset: -36px;
    background-size: cover;
    opacity: 0.13;
  }

  /* The cards line up with the page's column and still slide sideways */
  .m-plans {
    margin: 0 -40px;
    padding: 6px calc(50vw - 160px) 24px;
  }

  .m-plan {
    flex-basis: 320px;
  }

  .m-compare-table {
    grid-template-columns: minmax(0, 1fr) 110px 110px 110px;
    max-width: 720px;
  }

  .m-diy-card {
    max-width: 720px;
    padding: 40px 44px 36px;
  }

  .m-diy-title {
    font-size: 2rem;
  }

  .m-stats {
    padding-top: 120px;
    padding-bottom: 24px;
  }

  .m-stats-sentence {
    max-width: 720px;
    font-size: 2rem;
  }

  .m-faq-list {
    max-width: 760px;
    margin: 0 auto;
  }

  .m-end-title {
    max-width: 560px;
    font-size: 2.75rem;
  }

  .m-end-sub {
    max-width: 480px;
    font-size: 1.125rem;
  }
}

/* Desktop with a mouse: the plans form a ring and three show at a time,
   the centre one full size and its neighbours smaller at its sides. Every
   card sits in the same grid cell and moves to its slot (--slot and
   data-slot, set in MobileSections.astro and by public/mobile.js); cards
   further round wait out of sight at -2 and 2. The chevrons, the dots and a
   click on a side card spin the ring */
@media (min-width: 1100px) and (hover: hover) {
  .m-plans-stage {
    position: relative;
  }

  .m-plans {
    display: grid;
    justify-items: center;
    align-items: center;
    margin: 0;
    padding: 6px 0 24px;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* A side card's centre is 359px from the middle: half of the centre card,
     a 24px gap and half of a side card (360px at 0.86) */
  .m-plan {
    grid-area: 1 / 1;
    order: 0;
    width: 360px;
    transform: translateX(calc(var(--slot) * 359px)) scale(0.86);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.55s var(--m-ease),
      opacity 0.4s ease;
  }

  .m-plan[data-slot='-1'],
  .m-plan[data-slot='1'] {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
  }

  .m-plan[data-slot='0'] {
    z-index: 1;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* Quiet: a small grey circle like the cards, the chevron in grey until
     hovered */
  .m-plans-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f4f4f5;
    color: var(--m-faint);
    cursor: pointer;
    transition:
      transform 0.2s var(--m-ease),
      background 0.2s ease,
      color 0.2s ease;
  }

  .m-plans-arrow:hover {
    background: #e4e4e7;
    color: var(--m-ink);
  }

  .m-plans-arrow:active {
    transform: scale(0.94);
  }

  .m-plans-arrow svg {
    width: 18px;
    height: 18px;
  }

  /* Just outside the side cards, never past the page */
  .m-plans-arrow--prev {
    left: max(4px, calc(50% - 580px));
  }

  .m-plans-arrow--next {
    right: max(4px, calc(50% - 580px));
  }

  /* The dots in the ring's order, so the active one moves with the spin */
  .m-plans-dot {
    order: var(--pos);
    cursor: pointer;
  }
}

@media (min-width: 1100px) and (hover: hover) and (prefers-reduced-motion: reduce) {
  .m-plan,
  .m-plans-arrow {
    transition: none;
  }
}