@font-face {
  font-family: Inter;
  src: url("assets/inter-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("assets/inter-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root { font-family: Inter, Arial, sans-serif; color: #000; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; }
.coming-soon { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.hero { position: relative; overflow: hidden; flex: 1; min-height: 560px; height: calc(100svh - 86px); background: #f4f7fd; }
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-art > img { position: absolute; width: 112.916667%; height: 121.352785%; left: -12.916667%; top: -8.628117%; object-fit: cover; }
.edge-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, #f4f7fd, transparent 112.875px), linear-gradient(to right, #f4f7fd, transparent 113.75px), linear-gradient(to left, #f4f7fd, transparent 113.75px); }
.announcement { position: absolute; top: 20.159151%; left: 10.176493%; width: 461.262px; display: flex; flex-direction: column; align-items: center; gap: 38.474px; }
.brand { width: 461.262px; height: 97.825px; padding: 18.116px 27.175px 18.116px 18.116px; border: 1.812px solid #fff; border-radius: 27.175px; background: rgba(161,151,255,.04); display: flex; align-items: center; gap: 16.098px; }
.brand picture { display: block; flex: none; }
.message { display: flex; flex-direction: column; align-items: center; gap: 15px; }
h1 { margin: 0; font-size: 28.565px; font-weight: 600; line-height: 1; letter-spacing: 0; text-align: center; }
/* Figma trims the cap-height of the heading and tagline. */
.message h1 { margin-top: -3px; margin-bottom: -4.565px; }
.divider { display: block; }
.tagline { margin: -4px 0 -4px; display: flex; align-items: center; justify-content: center; gap: 8.926px; font-size: 20.084px; font-weight: 400; line-height: 23px; white-space: nowrap; }
.tagline picture { flex: none; }
.benefits { position: relative; flex: none; min-height: 86px; padding: 20px 24px; border-top: 1px solid #dde2ee; background: #fff; color: #101828; }
.benefits ul { padding: 0; margin: 0 auto; max-width: 896px; display: flex; justify-content: center; align-items: flex-start; gap: 50px; list-style: none; }
.benefits li { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1100px) {
  .announcement { left: 5%; transform: scale(.78); transform-origin: top left; }
}
@media (min-width: 1800px) {
  .announcement { transform: scale(1.2); transform-origin: top left; }
}
@media (max-width: 1023px) {
  .coming-soon { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .hero { height: auto; min-height: 0; }
  .hero-art > img { width: 112.21374%; height: 132.271468%; left: -6.10687%; top: -32.271468%; object-fit: cover; }
  .edge-fade { display: none; }
  .announcement { top: clamp(20px, 6.63svh, 52px); left: 50%; width: 325.615px; transform: translateX(-50%); gap: 30px; }
  .brand { width: 325.615px; height: 69.057px; padding: 12.789px 19.183px 12.789px 12.789px; border-width: 1.279px; border-radius: 19.183px; gap: 11.3735px; }
  .message { gap: 10px; }
  .message h1 { font-size: 20.164px; line-height: 24px; margin: -4px 0 -5px; }
  .tagline { font-size: 14px; line-height: 23.039px; gap: 6.301px; margin-top: -7px; }
  .benefits { min-height: 62px; padding: 15px 10px; padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)); border: 0; }
  .benefits ul { gap: 12px; }
  .benefits li { font-size: 8px; line-height: 11.251px; gap: 3.516px; }
}
@media (max-width: 359px) {
  .announcement { transform: translateX(-50%) scale(.9); transform-origin: top center; }
  .benefits ul { justify-content: space-between; gap: 5px; }
  .benefits li { font-size: 7px; }
}