@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap");

:root {
  color-scheme: light;
  --ink: #0d141a;
  --muted: #56585e;
  --cream: #f2f1e6;
  --green: #28823d;
  --footer: #1b1f1c;
  --content-width: 1224px;
  font-family: Montserrat, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

picture {
  display: contents;
}

picture source {
  display: none;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  padding: 15px max(16px, calc((100% - var(--content-width)) / 2 + 16px));
  color: #ffffff;
  background: #000000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 50px;
  height: 48px;
  flex: 0 0 auto;
  text-decoration: none;
}

.brand img {
  width: 50px;
  height: 48px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  padding: 8px 6px;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.site-nav a:hover {
  color: rgb(148, 148, 148);
  background: rgba(255, 255, 255, 0.07);
}

.site-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.1);
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.language-select {
  min-width: 76px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  color: #ffffff;
  background: #000000;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.language-select:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.hero {
  position: relative;
  min-height: 964px;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("../images/hero-background.png") center / cover no-repeat;
}

.hero__content {
  width: min(var(--content-width), calc(100% - 32px));
  margin: 0 auto;
  padding-top: 238px;
}

.hero h1 {
  width: min(709px, 100%);
  margin: 0 0 54px;
  color: #ffffff;
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;
  letter-spacing: 0;
}

.hero__lead {
  width: min(503px, 100%);
  margin: 0 0 32px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.hero__lead + .hero__lead {
  margin-bottom: 0;
}

.store-badges {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-top: 3px;
}

.store-badges a,
.store-badge {
  display: inline-flex;
  align-items: center;
  height: 56px;
}

.store-badges a img {
  width: 168px;
  height: 56px;
}

.store-badge img {
  width: 194px;
  height: 56px;
}

.store-badge--disabled {
  opacity: 0.58;
}

.section-inner {
  width: min(var(--content-width), calc(100% - 32px));
  margin: 0 auto;
}

.features-section {
  min-height: 887px;
  height: auto;
  padding-top: 104px;
  overflow: visible;
  background: var(--cream);
}

.section-heading {
  text-align: center;
}

.section-heading h2 {
  width: min(812px, 100%);
  margin: 0 auto;
  color: var(--ink);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.section-heading p {
  width: min(606px, 100%);
  margin: 3px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 612px) minmax(300px, 451px);
  gap: clamp(40px, 6vw, 109px);
  align-items: start;
  margin-top: 60px;
}

.app-preview {
  width: min(100%, 612px);
  height: auto;
  object-fit: contain;
  object-position: center;
}

.feature-list {
  display: grid;
  gap: 31px;
  padding-top: 71px;
}

.feature-card {
  min-height: 89px;
}

.feature-card h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.site-footer {
  min-height: 279px;
  color: #ffffff;
  background: var(--footer);
}

.footer-inner {
  position: relative;
  width: min(var(--content-width), calc(100% - 32px));
  min-height: 279px;
  margin: 0 auto;
}

.footer-contact {
  position: absolute;
  top: 82px;
  left: 0;
  width: 503px;
}

.footer-contact h2 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}

.footer-contact > a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}

.social-links {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  color: #ffffff;
  font-size: 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.social-links a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.social-links a::before {
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  content: "";
  mask: var(--social-icon) center / contain no-repeat;
  -webkit-mask: var(--social-icon) center / contain no-repeat;
}

.social-links svg {
  display: none;
}

.social-links a[href*="instagram"]::before {
  --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0027 5.84808C8.59743 5.84808 5.85075 8.59477 5.85075 12C5.85075 15.4053 8.59743 18.1519 12.0027 18.1519C15.4079 18.1519 18.1546 15.4053 18.1546 12C18.1546 8.59477 15.4079 5.84808 12.0027 5.84808ZM12.0027 15.9996C9.80212 15.9996 8.00312 14.2059 8.00312 12C8.00312 9.7941 9.79677 8.00046 12.0027 8.00046C14.2086 8.00046 16.0022 9.7941 16.0022 12C16.0022 14.2059 14.2032 15.9996 12.0027 15.9996ZM19.8412 5.59644C19.8412 6.39421 19.1987 7.03135 18.4062 7.03135C17.6085 7.03135 16.9713 6.38885 16.9713 5.59644C16.9713 4.80402 17.6138 4.16153 18.4062 4.16153C19.1987 4.16153 19.8412 4.80402 19.8412 5.59644ZM23.9157 7.05277C23.8247 5.13063 23.3856 3.42801 21.9775 2.02522C20.5747 0.622429 18.8721 0.183388 16.9499 0.0870135C14.9689 -0.0254238 9.03112 -0.0254238 7.05008 0.0870135C5.1333 0.178034 3.43068 0.617075 2.02253 2.01986C0.614389 3.42265 0.180703 5.12527 0.0843279 7.04742C-0.0281093 9.02845 -0.0281093 14.9662 0.0843279 16.9472C0.175349 18.8694 0.614389 20.572 2.02253 21.9748C3.43068 23.3776 5.12794 23.8166 7.05008 23.913C9.03112 24.0254 14.9689 24.0254 16.9499 23.913C18.8721 23.822 20.5747 23.3829 21.9775 21.9748C23.3803 20.572 23.8193 18.8694 23.9157 16.9472C24.0281 14.9662 24.0281 9.03381 23.9157 7.05277ZM21.3564 19.0728C20.9388 20.1223 20.1303 20.9307 19.0755 21.3537C17.496 21.9802 13.7481 21.8356 12.0027 21.8356C10.2572 21.8356 6.50396 21.9748 4.92984 21.3537C3.88042 20.9361 3.07195 20.1276 2.64897 19.0728C2.02253 17.4934 2.16709 13.7455 2.16709 12C2.16709 10.2546 2.02789 6.50129 2.64897 4.92717C3.06659 3.87776 3.87507 3.06928 4.92984 2.6463C6.50931 2.01986 10.2572 2.16443 12.0027 2.16443C13.7481 2.16443 17.5014 2.02522 19.0755 2.6463C20.1249 3.06392 20.9334 3.8724 21.3564 4.92717C21.9828 6.50665 21.8383 10.2546 21.8383 12C21.8383 13.7455 21.9828 17.4987 21.3564 19.0728Z'/%3E%3C/svg%3E");
}

.social-links a[href*="tiktok"]::before {
  --social-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5 9.84202C20.4357 9.84696 18.4221 9.20321 16.7435 8.00171V16.3813C16.7429 17.9333 16.2685 19.4482 15.3838 20.7233C14.499 21.9984 13.246 22.973 11.7923 23.5168C10.3387 24.0606 8.75362 24.1477 7.24914 23.7664C5.74466 23.3851 4.39245 22.5536 3.37333 21.383C2.3542 20.2125 1.71674 18.7587 1.54617 17.2161C1.3756 15.6735 1.68007 14.1156 2.41884 12.7507C3.15762 11.3858 4.2955 10.279 5.68034 9.57823C7.06517 8.87746 8.63095 8.61616 10.1683 8.82927V13.0439C9.46481 12.8227 8.70938 12.8293 8.0099 13.063C7.31041 13.2966 6.70265 13.7453 6.2734 14.345C5.84415 14.9446 5.61536 15.6646 5.6197 16.402C5.62404 17.1395 5.8613 17.8567 6.29759 18.4512C6.73387 19.0458 7.34688 19.4873 8.04906 19.7127C8.75125 19.9381 9.5067 19.9359 10.2075 19.7063C10.9084 19.4768 11.5188 19.0316 11.9515 18.4345C12.3843 17.8374 12.6173 17.1188 12.6173 16.3813V0H16.7435C16.7406 0.348435 16.7698 0.696395 16.8307 1.03948C16.9741 1.80537 17.2722 2.53396 17.7068 3.18068C18.1415 3.8274 18.7035 4.37867 19.3585 4.80075C20.2903 5.41688 21.3829 5.74528 22.5 5.74505V9.84202Z'/%3E%3C/svg%3E");
}

.subscribe-form {
  position: absolute;
  top: 108px;
  right: 0;
  display: grid;
  width: 375px;
  gap: 3px;
}

.subscribe-form label {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
}

.subscribe-form__row {
  display: grid;
  gap: 12px;
}

.subscribe-form input {
  width: 375px;
  height: 54px;
  padding: 16px 14px;
  color: var(--ink);
  border: 1px solid rgb(184, 192, 204);
  border-radius: 10px;
  background: #ffffff;
  font: inherit;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.subscribe-form button {
  width: 264px;
  min-height: 49px;
  padding: 0 16px;
  color: #ffffff;
  border: 0;
  border-radius: 50px;
  background: var(--green);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.subscribe-form input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(40, 130, 61, 0.18);
}

.subscribe-form button:hover {
  background: #2f9449;
}

.subscribe-form button:active {
  transform: translateY(1px);
}

.copyright {
  position: absolute;
  left: 0;
  bottom: 33px;
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.3;
}

@media (min-width: 921px) {
  .footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 375px);
    gap: 56px;
    padding: 72px 0 32px;
  }

  .footer-contact,
  .subscribe-form,
  .copyright {
    position: static;
  }

  .footer-contact {
    width: min(503px, 100%);
  }

  .footer-contact > a {
    position: static;
  }

  .social-links {
    position: static;
    margin-top: 18px;
  }

  .subscribe-form {
    align-self: start;
    width: 100%;
  }

  .subscribe-form input {
    width: 100%;
  }

  .copyright {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

.legal-main {
  background: #ffffff;
  padding: 56px 0 80px;
}

.legal-language-note {
  width: min(var(--content-width), 100%);
  margin: 0 auto 32px;
  padding: 0 16px;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
}

.legal-content {
  width: min(var(--content-width), 100%);
  margin: 0 auto;
  padding: 0 16px;
  color: #000000;
  overflow-wrap: anywhere;
}

.legal-content .eyebrow {
  display: none;
}

.legal-content h1 {
  margin: 0 0 40px;
  color: #000000;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
}

.legal-content h2,
.legal-content h3,
.legal-content h4 {
  margin: 56px 0 0;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.legal-content p,
.legal-content li {
  color: #000000;
  font-size: 16px;
  line-height: 24px;
}

.legal-content p {
  margin: 0;
}

.terms-legal h1 + p {
  margin-bottom: 56px;
}

.terms-legal h1 + p + p {
  margin-bottom: 56px;
}

.legal-content ul {
  margin: 0 0 24px;
  padding-left: 28px;
}

.legal-content a {
  color: #000000;
}

.legal-content a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  vertical-align: middle;
}

.live-legal {
  overflow: hidden;
  font-family: Montserrat, sans-serif;
  white-space: break-spaces;
}

.live-legal h3 {
  margin: 0 0 40px;
  color: rgb(26, 26, 26);
  font-family: Montserrat, sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
}

.live-legal p,
.live-legal li {
  margin: 0;
  color: rgb(33, 33, 33);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: normal;
  white-space: break-spaces;
}

.live-legal p:has(br) {
  margin-bottom: 32px;
}

.live-legal ul {
  margin: 0;
  padding-left: 40px;
}

@media (max-width: 920px) {
  .site-header {
    min-height: auto;
    padding: 14px 16px;
    gap: 12px;
  }

  .brand {
    width: 56px;
    height: 54px;
    margin-left: 0;
  }

  .brand img {
    width: 56px;
    height: 54px;
  }

  .site-nav {
    align-self: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 8px;
    max-width: calc(100% - 72px);
    font-size: 13px;
    text-align: right;
  }

  .site-nav a {
    min-height: 34px;
    padding: 6px;
  }

  .language-switcher {
    gap: 6px;
  }

  .language-select {
    min-width: 66px;
    height: 34px;
    font-size: 12px;
  }

  .hero {
    min-height: 678px;
    background-position: center;
  }

  .hero__content {
    width: min(328px, calc(100% - 32px));
    padding-top: 44px;
  }

  .hero h1 {
    width: 100%;
    margin-bottom: 48px;
    font-size: 36px;
    line-height: 46.8px;
  }

  .hero__lead {
    width: 100%;
    font-size: 16px;
  }

  .hero__lead + .hero__lead {
    margin-bottom: 0;
  }

  .store-badges {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: -17px;
  }

  .store-badges a,
  .store-badge {
    height: auto;
  }

  .store-badges a img {
    width: 221px;
    height: auto;
  }

  .store-badge img {
    width: 218px;
    height: auto;
  }

  .features-section {
    min-height: 1073px;
    padding: 65px 0 56px;
  }

  .section-inner {
    width: min(328px, calc(100% - 32px));
  }

  .section-heading h2,
  .section-heading p {
    width: 100%;
  }

  .section-heading h2 {
    font-size: 32px;
  }

  .feature-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 69px;
  }

  .app-preview {
    order: 2;
    width: 100%;
    height: auto;
  }

  .feature-list {
    order: 1;
    gap: 22px;
    padding-top: 0;
  }

  .site-footer {
    min-height: 404px;
  }

  .footer-inner {
    width: min(328px, calc(100% - 48px));
    min-height: 404px;
  }

  .footer-contact,
  .subscribe-form,
  .copyright {
    position: static;
  }

  .footer-contact {
    width: 100%;
    padding-top: 40px;
  }

  .footer-contact h2 {
    font-size: 32px;
  }

  .subscribe-form {
    width: 100%;
    margin-top: 40px;
  }

  .subscribe-form input {
    width: 100%;
  }

  .copyright {
    margin-top: 28px;
  }

  .legal-language-note {
    width: min(328px, calc(100% - 32px));
    padding: 0;
  }

  .legal-content {
    width: min(328px, calc(100% - 32px));
    padding: 0;
  }

  .live-legal h3 {
    font-size: 32px;
  }
}

@media (max-width: 520px) {
  .site-nav {
    flex-direction: row;
    align-items: flex-end;
    gap: 4px 8px;
  }

  .site-nav a {
    min-height: 32px;
    padding: 5px;
  }

  .language-switcher {
    margin-top: 0;
  }

  .language-switcher span {
    display: none;
  }
}

@media (max-width: 339px) {
  .features-section {
    min-height: 1085px;
  }
}