@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600; /* SemiBold */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter_24pt-Bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
  font-display: swap;
}

body {
    background: #F6F6F6;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Regular */
    color: rgba(0, 0, 0, 0.80);
    font-size: 17px;
    line-height: 22px;
    /*letter-spacing: -0.43px;*/
}

a, a:link, a:visited, a:hover, a:active, a:focus {
    color: rgba(0, 0, 0, 0.80);
}

/* Component styling */

.page-wrapper {
    max-width: 800px;
    width: calc(100%-48px);
    padding: 0 24px;
    margin-left: auto;
    margin-right: auto;
}

.page-wrapper > * {
    width: 100%;
}

.full-image {
    max-width: 100%;
    height: auto;
}

.logo-large {
    max-width: 288px;
    height: auto;
}

.logo-small {
    max-width: 204px;
    height: auto;
    margin-left: -16px;
}

.logo-small-vertical {
    max-width: 160px;
    height: auto;
}

.logo-extra-small {
    max-width: 16px;
    max-height: 16px;
    border-radius: 3.75px;
    box-shadow: 0.5px 1px 4px rgba(0, 0, 0, 0.10);
    vertical-align: middle;
    object-fit: contain;
    margin-right: 4px;
    margin-bottom: 2px;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.10);
    border-radius: 1px;
}

.card {
    width: calc(100% - 64px);
    background: rgba(255, 255, 255, 0.50);
    border-radius: 20px;
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.03),
        0 0 8px white inset;
    padding: 32px;
}

.text {
    width: calc(100% - 64px);
    padding: 0 32px;
}

.app-store-badge {
    width: 120px;
}

.icon {
    width: 22px;
    height: 22px;
}

h1.large-title {
    font-weight: 700;
    font-size: 34px;
    line-height: 41px;
    /*letter-spacing: 0.4px;*/
}

h1, .title1 {
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    /*letter-spacing: 0.38px;*/
}

h2, .title2 {
    font-weight: 700;
    font-size: 22px;
    line-height: 38px;
    /*letter-spacing: -0.26px;*/
}

h3, .title3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
    /*letter-spacing: -0.45px;*/
}



/* Utility classes */

.semibold {
  font-family: 'Inter', sans-serif;
  font-weight: 600; /* SemiBold */
}

.underline {
    text-decoration: underline;
}

.caption {
    font-size: 12px;
    line-height: 16px;
}

.flex {
    display: flex;
}

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

.justify-between {
    justify-content: space-between;
}

.items-start { align-items: start }
.items-center { align-items: center; }
.items-end { align-items: end; }

.justify-center {
    justify-content: center;
}

.cursor-pointer {
    cursor: pointer;
}

.text-center { text-align: center; }
.lg-text-right { text-align: right; }

.m-0 { margin: 0 }

.mb-64 { margin-bottom: 64px; }
.mb-48 { margin-bottom: 48px; }
.mb-32 { margin-bottom: 32px; }
.mb-24 { margin-bottom: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-12 { margin-bottom: 12px; }
.mb-8 { margin-bottom: 8px; }

.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-32 { margin-top: 32px; }
.mt-64 { margin-top: 64px; }

.mv-32 { margin-top: 32px; margin-bottom: 32px }

.lg-mr--32 { margin-right: -32px; }
.lg-ml--32 { margin-left: -32px; }

.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

.black-40 { color: rgba(0, 0, 0, 0.40); }
.black-80 { color: rgba(0, 0, 0, 0.80); }

.w-100 { width: 100%; }
.h-auto { height: auto; }

.lg-w-50 { width: 50%; }

.max-width-600 { max-width: 600px; }
.max-width-400 { max-width: 400px; }

.max-width-318 { max-width: 318px; }
.max-width-335 { max-width: 335px; }
.max-width-348 { max-width: 348px; }
.max-width-372 { max-width: 372px; }
.max-width-434 { max-width: 434px; }
.max-width-662 { max-width: 662px; }

@media (max-width: 800px) {
    .page-wrapper { max-width: 400px; }
    .sm-flex-column { flex-direction: column }
    .sm-justify-start { justify-content: start }
    .sm-items-start { align-items: start }
    .sm-items-center { align-items: center }
    .sm-order-1 { order: 1; }
    .sm-order-2 { order: 2; }
    .sm-gap-0 { gap: 0; }
    .sm-gap-16 { gap: 16px; }
    .sm-mb-8 { margin-bottom: 8px; }
    .lg-mr--32 { margin-right: 0; }
    .lg-ml--32 { margin-left: 0; }
    .lg-w-50 { width: auto; }
    .lg-text-right { text-align: left; }
}