/* The expert-review landing page: what it adds to the earlier page's styles
   (hero.css, mobile.css). The phone's nav on desktop, the hero's side phones, the How it works
   section. */

/* ---------- Typeface: Manrope ---------- */

/* In English and Russian alike. The phones' chats keep the system font,
   like a real iPhone */
body {
  font-family: 'Manrope', 'Geist', 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Hero: a larger title and a longer subtitle on wide screens ---------- */

/* Phones get a shorter subtitle. On every screen its first sentence is
   bold and black */
.hero-subtitle-long {
  display: none;
}

.hero-subtitle b {
  font-weight: 700;
  color: #111;
}

/* The title's size and ink are set in the page's head
   (src/templates/index.html). The copy, from the top of the frame to the
   top of the phone, takes about 474px, and the phone shows 1.29 times its
   width, so it is sized for the room that is left and may shrink to 220px
   on a short screen: the frame then
   still ends above the bottom of the screen */
@media (min-width: 769px) {
  /* Room for the title on one line */
  .hero {
    max-width: 1100px;
  }

  .hero-subtitle-short {
    display: none;
  }

  .hero-subtitle-long {
    display: inline;
  }

  /* Grey, with its first sentences in black */
  /* Two lines */
  .hero-subtitle {
    max-width: 1060px;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.5;
    color: #3f3f45;
    text-wrap: balance;
  }

  .hero-subtitle b {
    font-weight: 700;
    color: #111;
  }

  .hero-phone-mock {
    --phone-width: clamp(220px, (100dvh - 474px) / 1.29, 440px);
  }
}

/* ---------- Nav: the phone's nav on every screen ---------- */

/* The menu behind the dots on wide screens too (public/css/hero.css hides
   it there, for a centred row of links this page no longer has) */
@media (min-width: 769px) {
  .hero-mobile-nav .site-menu {
    display: inline-flex;
  }
}

/* ---------- Hero: promises, a second button and the small print, on wide screens ---------- */

/* The count is a link down to the reviews, and the refund promise a link
   down to the pricing: the text's own colour and weight, with a quiet
   underline */
.hero-social-proof-text a,
.hero-refund a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.3);
  text-underline-offset: 3px;
}

.hero-social-proof-text a:hover,
.hero-refund a:hover {
  text-decoration-color: currentColor;
}

/* Phones keep the short hero: one button, the count over the faces */
.hero-trust,
.hero-chat-action--ghost,
.hero-chat-action-arrow,
.hero-refund,
.hero-terms {
  display: none;
}

@media (min-width: 769px) {
  /* Less room above the title, now that the nav is quiet, and tighter steps
     between the parts, so the whole hero fits the screen */
  .hero {
    padding-top: 50px;
    gap: 1rem;
  }

  /* Three promises in a row, each behind its icon */
  .hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 30px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: #2c2c31;
    animation: hero-blur-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
  }

  .hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .hero-trust svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.9;
  }

  /* Two buttons side by side: Telegram in black, Learn More in white */
  .hero-chat-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
  }

  /* Both the same height, whatever is inside */
  .hero-chat-actions > .hero-chat-action {
    width: auto;
    height: 50px;
    padding: 0 1.6rem;
  }

  /* An arrow after the words on the Telegram button */
  .hero-chat-action-arrow {
    display: block;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    transition: transform 0.2s ease;
  }

  .hero-chat-action:hover .hero-chat-action-arrow {
    transform: translateX(3px);
  }

  .hero-chat-action--ghost,
  .hero-chat-action--ghost:hover {
    display: inline-flex;
    border-color: #e0e0e4;
    background: #fff;
    color: #111;
  }

  .hero-chat-action--ghost:hover {
    border-color: #c9c9cf;
  }

  /* No shine on the quiet button */
  .hero-chat-actions .hero-chat-action--ghost::after {
    content: none;
  }

  /* One line: the faces, the count, then the refund promise */
  .hero-social-proof {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
  }

  .hero-social-proof-avatars {
    order: -1;
  }

  .hero-social-proof-avatars img {
    width: 26px;
    height: 26px;
  }

  .hero-social-proof-avatars img + img {
    margin-left: -13px;
  }

  .hero-social-proof-text,
  .hero-refund {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: #2c2c31;
  }

  .hero-refund {
    display: block;
    animation: hero-blur-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
  }

  /* A dot between the count and the promise */
  .hero-refund::before {
    content: '·';
    margin-right: 10px;
    color: #9a9aa0;
  }

  .hero-terms {
    display: block;
    margin: -6px 0 0;
    font-size: 0.8rem;
    color: #8e8e96;
    animation: hero-blur-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s backwards;
  }

  .hero-terms a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .hero-terms a:hover {
    color: #111;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-trust,
  .hero-refund,
  .hero-terms {
    animation: none;
  }
}

/* ---------- Hero: two smaller phones beside the main one ---------- */

/* Each shows a still chat (src/data/heroChat.js sideChatHtml). They stand
   behind the main phone, half hidden by it, and lean outwards like a fan;
   the frame cuts them like the main phone */
.hero-phone-side {
  display: none;
}

@media (min-width: 1100px) {
  .hero-wrapper {
    --hero-phone: clamp(220px, calc((100dvh - 474px) / 1.29), 440px);
    /* The side phones' screens, as a share of an iPhone's 393 points */
    --hero-side-scale: 0.45;
  }

  .hero-phone-side {
    --phone-screen: calc(393px * var(--hero-side-scale));
    --hero-chat-scale: var(--hero-side-scale);
    position: absolute;
    /* Behind the hero's copy and main phone, above the stamps */
    z-index: 0;
    display: block;
    /* The main phone shows about 1.29 times its width above the frame's
       bottom edge; these start 56px lower */
    top: calc(100% - var(--hero-phone) * 1.29 + 75px);
    width: calc(var(--phone-screen) + 24px);
    transform-origin: 50% 70%;
    animation: hero-phone-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.75s backwards;
  }

  /* A third of each hides behind the main phone */
  .hero-phone-side--left {
    right: calc(50% + var(--hero-phone) / 2 - var(--phone-screen) * 0.34);
    rotate: -11deg;
  }

  .hero-phone-side--right {
    left: calc(50% + var(--hero-phone) / 2 - var(--phone-screen) * 0.34);
    rotate: 11deg;
  }

  /* Side buttons set into the band, placed like the main phone's
     (public/css/hero.css): the action button and the two volume keys on
     the left as one strip with gaps, the side button on the right. --button
     is their metal, each phone's own */
  .hero-phone-side::before,
  .hero-phone-side::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 4px;
    border-radius: 2px;
  }

  .hero-phone-side::before {
    --w: var(--phone-screen);
    left: -2px;
    top: calc(var(--w) * 0.5);
    height: calc(var(--w) * 0.555);
    background: linear-gradient(
      to bottom,
      var(--button) 0,
      var(--button) calc(var(--w) * 0.1),
      transparent calc(var(--w) * 0.1),
      transparent calc(var(--w) * 0.2),
      var(--button) calc(var(--w) * 0.2),
      var(--button) calc(var(--w) * 0.355),
      transparent calc(var(--w) * 0.355),
      transparent calc(var(--w) * 0.4),
      var(--button) calc(var(--w) * 0.4)
    );
  }

  .hero-phone-side::after {
    right: -2px;
    top: calc(var(--phone-screen) * 0.73);
    height: calc(var(--phone-screen) * 0.24);
    background: var(--button);
  }

  .hero-phone-side--left {
    --button: #b3932f;
  }

  .hero-phone-side--right {
    --button: #5c7dae;
  }

  /* Their bands in colour, as wide, as light and as dark as the main
     phone's titanium: yellow on the left, blue on the right */
  .hero-phone-side--left .hero-phone-mock-frame {
    background:
      linear-gradient(#0b0b0c, #0b0b0c) padding-box,
      linear-gradient(140deg, #f3e2a0 0%, #b3932f 14%, #e4cc74 30%, #8c7020 52%, #cfb455 74%, #7a611c 88%, #ead58a 100%) border-box;
  }

  .hero-phone-side--right .hero-phone-mock-frame {
    background:
      linear-gradient(#0b0b0c, #0b0b0c) padding-box,
      linear-gradient(140deg, #cbdaf0 0%, #5c7dae 14%, #a8c0e2 30%, #3d5b8a 52%, #86a4d0 74%, #334e7a 88%, #bccdea 100%) border-box;
  }
}

/* About four fifths of the main phone, which grows with the screen's
   height: a step every 50px */
@media (min-width: 1100px) and (min-height: 850px) {
  .hero-wrapper {
    --hero-side-scale: 0.53;
  }
}

@media (min-width: 1100px) and (min-height: 900px) {
  .hero-wrapper {
    --hero-side-scale: 0.62;
  }
}

@media (min-width: 1100px) and (min-height: 950px) {
  .hero-wrapper {
    --hero-side-scale: 0.7;
  }
}

@media (min-width: 1100px) and (min-height: 1000px) {
  .hero-wrapper {
    --hero-side-scale: 0.79;
  }
}

@media (min-width: 1100px) and (min-height: 1050px) {
  .hero-wrapper {
    --hero-side-scale: 0.87;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-phone-side {
    animation: none;
  }
}

/* ---------- How it works ---------- */

.m-how {
  padding-bottom: 48px;
}

.m-how .m-section-head {
  max-width: 420px;
}

.m-how-steps {
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 40px;
}

/* The demo: a HyperFrames film on the same grey as its own background */
.m-how-demo {
  border-radius: var(--m-radius);
  overflow: hidden;
  background: #f5f5f7;
  aspect-ratio: 4 / 3;
}

.m-how-demo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-how-body {
  padding: 18px 4px 0;
}

.m-how-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--m-faint);
}

.m-how-number {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--m-ink);
  color: #fff;
  font-size: 0.75rem;
  line-height: 22px;
  text-align: center;
  letter-spacing: 0;
}

.m-how-title {
  margin: 10px 0 8px;
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

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

.m-js .m-how-step:nth-child(2) {
  transition-delay: 0.1s;
}

.m-js .m-how-step:nth-child(3) {
  transition-delay: 0.2s;
}

@media (min-width: 769px) {
  .m-how {
    padding-top: 54px;
    padding-bottom: 64px;
  }

  .m-how .m-section-head {
    max-width: 640px;
  }

  .m-how-steps {
    max-width: 1120px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }

  .m-how-body {
    padding: 22px 6px 0;
  }
}

/* Two columns would leave one step alone: stay stacked, demo beside copy */
@media (min-width: 769px) and (max-width: 999px) {
  .m-how-steps {
    max-width: 720px;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .m-how-step {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 32px;
  }

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

/* ---------- Features: a heading above the first band ---------- */

/* The heading's own section; the features under it keep their top padding */
.m-features-head {
  padding-top: 24px;
}

.m-features-head .m-section-head {
  margin-bottom: 0;
}

.m-features-head + .m-features {
  padding-top: 40px;
}

@media (min-width: 769px) {
  .m-features-head {
    padding-top: 0;
  }

  .m-features-head .m-section-head {
    max-width: 640px;
  }

  .m-features-head + .m-features {
    padding-top: 32px;
  }
}

/* ---------- Countries: every Schengen flag, drifting in two rows ---------- */

.m-countries {
  padding-bottom: 48px;
  overflow-x: clip;
}

.m-countries .m-section-head {
  max-width: 420px;
  margin-bottom: 32px;
}

/* Edge to edge, fading out at both sides like the reviews. The row cuts
   what leaves it, so the track keeps room above and below its chips for a
   hovered chip's lift and shadow (padding), and the row gives that room
   back (negative margins) */
.m-countries-row {
  margin: -8px -20px -26px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.m-countries-track {
  display: flex;
  gap: 10px;
  width: max-content;
  margin: 0;
  padding: 12px 5px 26px;
  list-style: none;
}

/* Each row holds its countries twice, so the drift loops without a seam */
.m-countries-row--left .m-countries-track {
  animation: m-reviews-left 60s linear infinite;
}

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

/* A pointer or a finger on a row holds it still */
.m-countries-row:hover .m-countries-track,
.m-countries-row:active .m-countries-track {
  animation-play-state: paused;
}

/* A chip: the flag, round, then the country */
.m-country {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 7px;
  border: 1px solid var(--m-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    transform 0.25s var(--m-ease),
    box-shadow 0.25s ease;
}

.m-country img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08);
}

@media (hover: hover) {
  .m-country:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
  }
}

.m-countries-who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* 24px under the chips: the last row's spare room and its negative
     margin cancel out */
  margin: 24px auto 0;
  max-width: 420px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--m-muted);
  text-align: center;
}

.m-countries-who svg {
  flex: none;
  width: 16px;
  height: 16px;
}

@media (min-width: 769px) {
  .m-countries {
    /* The last feature above keeps 56px of its own */
    padding-top: 16px;
    padding-bottom: 40px;
  }

  .m-countries .m-section-head {
    max-width: 640px;
    margin-bottom: 40px;
  }

  .m-countries-row {
    max-width: 1120px;
    margin: -8px auto -24px;
  }

  .m-country {
    padding: 8px 18px 8px 8px;
    font-size: 1rem;
  }

  .m-country img {
    width: 30px;
    height: 30px;
  }

  .m-countries-who {
    max-width: none;
    margin-top: 26px;
    font-size: 0.95rem;
  }
}

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

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

/* ---------- Pricing: three plans and the refund guarantee ---------- */

/* The plan's icon, where a country's flag used to be */
.m-plan-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.07);
}

.m-plan-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

/* All three stand in view on desktop: the side plans are plans, not buttons
   that spin the row, and the dots have nothing to move */
@media (min-width: 1100px) and (hover: hover) {
  .m-plans-stage[data-plans-static] .m-plan {
    cursor: auto;
  }

  .m-plans-stage[data-plans-static] + .m-plans-dots {
    display: none;
  }
}

/* A soft green card, like the hero's badge */
.m-guarantee {
  display: flex;
  gap: 14px;
  max-width: 420px;
  margin: 28px auto 0;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #d4e8da;
  border-radius: var(--m-radius);
  background: #f0faf3;
}

.m-guarantee-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #4aba6e;
  color: #fff;
}

.m-guarantee-icon svg {
  width: 21px;
  height: 21px;
}

.m-guarantee-title {
  margin: 0 0 6px;
  font-size: 1.1rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1f5132;
  text-wrap: balance;
}

.m-guarantee-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #2f6b45;
}

.m-guarantee-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #5b8f6d;
}

@media (min-width: 769px) {
  .m-guarantee {
    align-items: center;
    gap: 18px;
    max-width: 760px;
    margin-top: 40px;
    padding: 22px 26px;
  }

  .m-guarantee-icon {
    width: 48px;
    height: 48px;
  }

  .m-guarantee-icon svg {
    width: 24px;
    height: 24px;
  }

  .m-guarantee-title {
    font-size: 1.25rem;
  }
}

/* ---------- Less room between sections on wide screens ---------- */

/* About 64px to 72px above each section's title, down from 96px and more
   (public/css/mobile.css) */
@media (min-width: 769px) {
  .m-compare,
  .m-reviews {
    padding-top: 64px;
  }

  /* Under the last row of reviews, which keeps 12px of its own */
  .m-faq {
    padding-top: 56px;
  }
}

/* ---------- Nav: a bolder wordmark ---------- */

/* In the nav and in the footer */
.hero-mobile-nav-brand,
.m-footer-brand {
  font-weight: 800;
}

/* ---------- FAQ: bolder questions ---------- */

.m-faq-q {
  font-weight: 700;
}

/* ---------- Pricing: an arrow on Chat Now, and a hover ---------- */

/* Like the hero's Telegram button: the arrow slides on, the button lifts */
a.m-plan-cta {
  transition:
    transform 0.2s var(--m-ease),
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.m-plan-cta-arrow {
  transition: transform 0.2s var(--m-ease);
}

@media (hover: hover) {
  a.m-plan-cta:hover {
    transform: translateY(-2px);
    background: #000;
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.22);
  }

  a.m-plan-cta:hover .m-plan-cta-arrow {
    transform: translateX(4px);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  a.m-plan-cta,
  .m-plan-cta-arrow {
    transition: none;
  }
}