/* Fonts */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Benzin";
  src: url("assets/fonts/Benzin-Semibold.woff2") format("woff2"),
       url("assets/fonts/Benzin-Semibold.woff") format("woff"),
       url("assets/fonts/Benzin-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* The design specifies SF Pro Display, which we can't license for the web. Inter is
     shipped instead so every OS renders the same; it runs a few px wider per label. */
  --font-body: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Benzin", var(--font-body);
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: #fff;
  background: #1e74ff;
}

img {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Hero shell */
/* Every block is pinned to the frame coordinates from Figma, so the hero keeps
   the frame height and clips whatever bleeds past it — same as the Figma frame. */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Shared component looks */
.pills {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

.pill img {
  flex-shrink: 0;
}

/* Figma anchors text by its baseline, the browser centres the glyph in the line box,
   so Benzin lands ~15% of the font size too high. Each `top` below is the Figma
   coordinate plus that compensation, measured per breakpoint against the Figma render. */
.headline {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: #fff;
}

.plane {
  position: absolute;
  height: auto;
  pointer-events: none;
}

.stores {
  position: absolute;
  display: flex;
  gap: 12px;
}

/* The invitation page reuses every .store rule below and pins the buttons at one size, so
   these stay outside the breakpoints. Only .stores above is this page's own. */
.store {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 16px;
  background: #000;
  border-radius: 46px;
  color: #fff;
}

.store--play {
  gap: 7px;
}

.store--apple {
  gap: 8px;
}

.store__icon {
  width: 21px;
  height: 24px;
}

.store__icon--apple {
  width: 20px;
}

.store__text {
  display: flex;
  flex-direction: column;
}

.store--play .store__text {
  gap: 3px;
}

/* Figma's box is exactly 78px; grow it if the shipped font needs more so "App Store"
   never wraps. */
.store--apple .store__text {
  min-width: 78px;
}

.store__small {
  font-size: 10px;
  line-height: normal;
  text-transform: uppercase;
}

.store__small--apple {
  font-size: 9px;
  line-height: 9px;
  font-weight: 500;
  text-transform: none;
}

.store__wordmark {
  width: 74px;
  height: 15px;
}

.store__big {
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.47px;
  font-weight: 500;
  white-space: nowrap;
}

.promo {
  position: absolute;
  gap: 22px;
}

.promo-text {
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  flex-shrink: 0;
}

.qr {
  flex-shrink: 0;
}

.qr canvas,
.qr img {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.logo-inline {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 12.292px;
}

.device {
  position: absolute;
}

.device__phone {
  width: 100%;
  height: auto;
}

.badge {
  position: absolute;
}

/* Mobile — 390 (base) */
/* The whole composition sits 43px above its Figma coordinates: the 852px frame
   assumes a full-screen phone, while Safari's chrome eats ~180px of real viewport,
   so the designed top margin reads as a gap on device. Internal spacing is unchanged. */
.hero {
  min-height: max(852px, 100vh);
  background: linear-gradient(154.916deg, #0f3faf 5.142%, #1e74ff 43.567%, #6fb1ff 92.665%);
}

.pills {
  left: 16px;
  top: 43px;
  width: 302px;
}

.pill {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.28px;
}

.pill img {
  width: 16px;
  height: 16px;
}

.headline {
  left: 16px;
  top: 150px;   /* Figma 190 + 3, then -43 */
  width: 358px;
  font-size: 23px;
}

.plane {
  left: 254px;
  top: 143px;
  width: 38px;
  height: 23px;
}

.stores {
  left: 16px;
  top: 307px;
}

.promo {
  display: none;
}

.device {
  left: 50%;
  transform: translateX(-50%);
  top: 403px;
  width: 274.37px;
}

/* Anchored to the centred device rather than the viewport edge, so the badge keeps
   sitting on the phone's corner between breakpoints. At 390 this resolves to Figma's 284px. */
.badge {
  left: calc(50% + 89px);
  top: 641px;
  width: 82px;
  height: 82px;
  border-radius: 12.292px;
}

/* Tablet — 834 */
@media (min-width: 700px) and (max-width: 999px) {
  .hero {
    min-height: max(1194px, 100vh);
    background: linear-gradient(167.5deg, #0f3faf 1.214%, #1e74ff 25.917%, #6fb1ff 84.982%);
  }

  .m-br {
    display: none;
  }

  /* Figma fits the row in 445px with its own SF Pro Display metrics; the shipped font
     is a few px wider per label, so hold the single row rather than the exact width. */
  .pills {
    left: 40px;
    top: 80px;
    width: auto;
    flex-wrap: nowrap;
  }

  .headline {
    left: 40px;
    top: 144px;   /* Figma 138 + 6 */
    width: 670px;
    font-size: 42px;
  }

  .plane {
    display: none;
  }

  .stores {
    left: 40px;
    top: 339px;
  }

  .promo {
    display: flex;
    align-items: center;
    left: 40px;
    top: 430px;
  }

  .promo-text {
    width: 327px;
  }

  .qr {
    width: 71px;
    height: 71px;
  }

  .logo-inline {
    display: none;
  }

  .device {
    left: 50%;
    transform: translateX(-50%);
    top: 566px;
    width: 378.32px;
  }

  /* resolves to Figma's 551.29px at 834 */
  .badge {
    left: calc(50% + 134.289px);
    top: 895.8px;
    width: 175.711px;
    height: 175.711px;
    border-radius: 24.826px;
  }
}

/* Laptop — 1280 */
@media (min-width: 1000px) and (max-width: 1365px) {
  .hero {
    min-height: max(800px, 100vh);
    background: linear-gradient(172.373deg, #0f3faf 5.142%, #1e74ff 43.567%, #6fb1ff 92.665%);
  }

  .m-br {
    display: none;
  }

  .pills {
    left: 55px;
    top: 115px;
    width: auto;
    flex-wrap: nowrap;
  }

  .headline {
    left: 55px;
    top: 179px;   /* Figma 173 + 6 */
    width: 670px;
    font-size: 42px;
  }

  .plane {
    display: none;
  }

  .stores {
    left: 55px;
    top: 374px;
  }

  .promo {
    display: flex;
    align-items: center;
    left: 55px;
    top: 515px;
  }

  .promo-text {
    width: 327px;
  }

  .qr {
    width: 71px;
    height: 71px;
  }

  .device {
    left: auto;
    transform: none;
    right: 116.68px;
    top: 105px;
    width: 378.32px;
  }

  .badge {
    display: none;
  }
}

/* Below the 1280 frame the layout has nowhere to reflow to — every block sits on a fixed
   frame coordinate, and the right-anchored phone would ride over the left-anchored
   headline. Render the frame at its design width and scale it down instead, which keeps
   the 1280 proportions intact. `zoom` rather than `transform` so the box actually shrinks
   and no dead strip is left under the hero. */
/* Gated on zoom support: without it the 1280px width would stand unscaled and force a
   horizontal scrollbar, which is worse than the overlap it fixes. */
@media (min-width: 1000px) and (max-width: 1279px) {
  @supports (zoom: 1) {
    .hero {
      --frame-scale: calc(100vw / 1280px);
      width: 1280px;
      min-height: max(800px, calc(100vh / var(--frame-scale)));
      zoom: var(--frame-scale);
    }
  }
}

/* Desktop — 1440 */
@media (min-width: 1366px) {
  .hero {
    min-height: max(820px, 100vh);
    background: linear-gradient(173.044deg, #0f3faf 5.142%, #1e74ff 43.567%, #6fb1ff 92.665%);
  }

  .m-br {
    display: none;
  }

  .pills {
    left: 80px;
    top: 160px;
    width: auto;
    flex-wrap: nowrap;
  }

  .pill {
    padding: 8px 16px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.36px;
  }

  .pill img {
    width: 20px;
    height: 20px;
  }

  .headline {
    left: 80px;
    top: 236px;   /* Figma 230 + 6 */
    width: 699px;
    font-size: 42px;
  }

  .plane {
    left: 689px;
    top: 230px;
    width: 76px;
    height: 46px;
  }

  .stores {
    left: 80px;
    top: 447px;
  }

  .promo {
    display: flex;
    align-items: flex-start;
    left: 77px;
    top: 665px;
  }

  .promo-text {
    width: 350px;
  }

  /* Figma puts the QR after the logo on 1440 and before it on 1280 */
  .qr {
    order: 1;
    width: 70px;
    height: 70px;
  }

  .device {
    left: auto;
    transform: none;
    right: 147.25px;
    top: 142.56px;
    width: 370.5px;
  }

  .badge {
    display: none;
  }
}