/* Global Styles */
:root {
  --color-primary-main: #005eb8;
  --color-primary-light: #5cafff;
  --color-primary-lighter: #d6ebff;
  --color-primary-dark: #004e98;
  --color-primary-darker: #002d59;
  --color-primary-8: rgba(0, 94, 184, 0.08);
  --color-primary-24: rgba(0, 94, 184, 0.24);
  --color-primary-40: rgba(0, 94, 184, 0.4);
  --color-primary-48: rgba(0, 94, 184, 0.48);
  --color-error-main: #ff5630;
  --color-error-darker: #7a0916;
  --color-error-lighter: #ffe9d5;
  --color-info-lighter: #cafdf5;
  --color-info-darker: #003768;
  --color-info-48: rgba(0, 184, 217, 0.48);
  --color-success-lighter: #d3fcd2;
  --color-success-darker: #065e49;
  --color-success-48: rgba(34, 197, 94, 0.48);
  --color-warning-lighter: #fff5cc;
  --color-warning-darker: #7a4100;
  --color-warning-48: rgba(255, 171, 0, 0.48);
  --color-text-primary: #1c252e;
  --color-text-secondary: #637381;
  --color-white-main: #fff;
  --color-grey-8: rgba(145, 158, 171, 0.08);
  --color-grey-200: #f4f6f8;
  --color-component-divider: rgba(145, 158, 171, 0.2);
  --color-background-neutral: #f4f6f8;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Lato", sans-serif;
  line-height: 1.6;
  color: var(--color-text-secondary);
  background-color: var(--color-white);
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1,
h2,
h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin: 0;
}

h1 {
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 120%;
  color: var(--color-primary-main);
}

h2 {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-primary-main);
  text-align: center;
}

h3 {
  font-size: 1.5rem;
  line-height: 1;
}

ul,
ol {
  padding: 0 0 0 1rem;
  margin: 1.5rem 0;
}

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

.table-wrapper {
  border-radius: 0.5rem;
  border: 1px solid var(--color-component-divider);
  margin-bottom: 2rem;
}

table {
  border-collapse: collapse;
  font-size: 0.875rem;
}

th {
  background-color: var(--color-background-neutral);
  white-space: nowrap;
}

th,
td {
  padding: 1rem;
  vertical-align: top;
}

td a {
  text-decoration: none;
}

a {
  color: var(--color-primary-main);
}

.icon-wrapper {
  display: flex;
  width: 80px;
  height: 80px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: var(--primary-8, rgba(0, 94, 184, 0.08));
}

.btn-primary,
.btn-secondary,
.btn-text {
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.btn-primary {
  background: var(--color-primary-main);
  color: var(--color-white-main);
}

.btn-secondary {
  background: var(--color-grey-8);
  color: var(--color-text-primary);
}

.btn-text {
  background: none;
  color: var(--color-primary-main);
}

.btn-small {
  border-radius: 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5rem;
  padding: 0.25rem 0.75rem;
}

.btn-med {
  border-radius: 1.5rem;
  font-size: 0.9375;
  font-weight: 700;
  line-height: 1.625rem;
  padding: 0.5rem 1rem;
}

.btn-large {
  border-radius: 1.875rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
  padding: 1rem 1.5rem;
}

.inner {
  max-width: 85rem; /* 1360px */
  width: 100%;
  display: flex;
  justify-content: space-between;
}

nav {
  border-bottom: 1px solid var(--color-component-divider);
  padding: 0.875rem 0.875rem 0.875rem 1rem;
  margin-bottom: 3.25rem;
  display: flex;
  justify-content: center;
  position: sticky;
  background: var(--color-white-main);
  top: 0;
  z-index: 100;
}

nav .logo {
  width: 6.6875rem; /* 107px */
  display: flex;
}

nav .buttons {
  display: flex;
  gap: 0.5rem;
}

footer {
  display: flex;
  justify-content: center;
  padding: 2.5rem;
}

footer p {
  max-width: 23rem;
  font-size: 0.875rem;
  margin-top: 1rem;
}

footer .logo {
  display: flex;
  gap: 1rem;
  align-items: center;
}

footer .logo img {
  width: 6.6875rem; /* 107px */
  display: block;
}

footer .logo p {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary-main);
}

footer ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

footer a {
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--color-primary-main);
}

.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 7.5rem;
  margin-top: 3.25rem;
  padding: 0 1rem;
  background-image: url("/images/hero-bg-1.svg"), url("/images/hero-bg-2.svg"),
    url("/images/hero-bg-3.svg"), url("/images/hero-bg-4.svg"),
    url("/images/hero-bg-5.svg"), url("/images/hero-bg-6.svg"),
    url("/images/hero-bg-7.svg"), url("/images/hero-bg-8.svg");
  background-position: 32% 10%, 10% 60%, 70% 35%, 5% 8%, 80% 90%, 90% 3%,
    32% 90%, 95% 75%;
  background-repeat: no-repeat;
}

.hero .logo {
  max-width: 13.375rem; /* 214px */
}

.hero h1 {
  max-width: 40rem; /* 640px */
  text-align: center;
}

.hero-highlights {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem 2rem;
}

.hero-highlight {
  display: flex;
  width: 100%;
  padding: 1.5rem;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  color: var(--color-primary-dark);
  border-radius: 1rem;
  background: var(--color-white-main);

  /* shadow/card */
  box-shadow: 0 0 2px 0 rgba(145, 158, 171, 0.2),
    0 12px 24px -4px rgba(145, 158, 171, 0.12);
}

.hero-highlight h2 {
  color: var(--color-primary-darker);
}

.video-highlights {
  padding: 7.5rem 1rem 5.5rem;
  background-image: url("/images/highlight-pill-2.svg"),
    url("/images/highlight-pill-1.svg"),
    linear-gradient(to bottom, white 0%, #fff8eb 25%, #fff8eb 75%, white 100%);
  background-position: top left, bottom right, top;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.intro-video {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.video-holder {
  margin: 3rem 0 7.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-component-divider);

  /* shadow/z16 */
  box-shadow: 0 16px 32px -4px rgba(145, 158, 171, 0.16);
  overflow: hidden;
  position: relative;
}

.video-holder img {
  display: block;
}

.video-holder img.play-button {
  position: absolute;
  left: calc(50% - 44px);
  top: calc(50% - 44px);
  opacity: 0.7;
}

.video-holder a:hover img.play-button {
  opacity: 1;
}

.video-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.video-overlay.active {
  display: flex;
}

.video-player-modal {
  position: relative;
  width: 90%;
  max-width: 960px;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.close-button {
  position: absolute;
  top: -40px;
  right: -40px;
  background: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  z-index: 1001;
}

.close-button:hover {
  background: #e0e0e0;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.callouts {
  width: 960px;
  height: 540px;
  position: absolute;
  top: 3rem;
  display: none;
}

.callouts img {
  position: absolute;
}

.callout-1 {
  z-index: 50;
  position: absolute;
  top: 80px;
  left: -80px;
  width: 368px;
  height: 186px;
  display: inline-block;
}

.callout-1 img:nth-child(1) {
  top: 0;
  left: 0;
}

.callout-1 img:nth-child(2) {
  top: 35px;
  left: 45px;
}

.callout-1 img:nth-child(3) {
  top: 108px;
  left: 150px;
}

.callout-2 {
  z-index: 50;
  position: absolute;
  top: 465px;
  left: 280px;
  width: 368px;
  height: 186px;
  display: inline-block;
}

.callout-2 img:nth-child(1) {
  top: 0;
  left: 0;
}
.callout-2 img:nth-child(2) {
  top: 95px;
  left: 165px;
}

.callout-3 {
  z-index: 50;
  position: absolute;
  top: 235px;
  right: -120px;
  width: 368px;
  height: 186px;
  display: inline-block;
}

.callout-3 img:nth-child(1) {
  top: 75px;
  left: 30px;
}

.callout-3 img:nth-child(2) {
  top: 45px;
  left: 15px;
}

.callout-3 img:nth-child(3) {
  top: 0;
  left: 0;
}

.highlights {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
  padding: 0 1.5rem;
}

.highlight {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 1rem;
}

.highlight h3 {
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.highlight p:last-of-type {
  margin-top: 1rem;
}

.bento {
  max-width: 75rem; /* 1200 */
  margin: 0 auto 7.5rem;
  padding: 0 1.5rem;
}

.bento .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.bento .cards .card {
  border-radius: 1rem;
  padding: 1.5rem;
}

.bento .cards .card h3 {
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.bento .cards .card .btn-secondary {
  margin-top: 1rem;
}

.cards > .card:nth-child(1) {
  border: 0.5px solid var(--color-error-main);
  background: var(--color-error-lighter);
  color: var(--color-error-darker);
}

.cards > .card:nth-child(2) {
  width: 100%;
  border: 1px solid var(--color-info-48);
  background: var(--color-info-lighter);
  background-image: url("/images/bento-pill.svg");
  background-repeat: no-repeat;
  color: var(--color-info-darker);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.cards > .card:nth-child(2) h3 {
  font-size: 6rem;
  line-height: 1;
  padding: 0 3rem;
}

.cards > .card:nth-child(2) h3 em {
  font-size: 2rem;
  font-style: normal;
}

.cards > .card:nth-child(2) h3 span {
  font-size: 1.5rem;
  line-height: 1;
  display: block;
}
.cards > .card:nth-child(3) {
  border: 1px solid var(--color-primary-48);
  background: var(--color-primary-lighter);
  color: var(--color-primary-darker);
}

.cards > .card:nth-child(4) {
  border: 1px solid var(--color-success-48);
  background: var(--color-success-lighter);
  color: var(--color-success-darker);
}

.cards > .card:nth-child(5) {
  border: 1px solid var(--color-warning-48);
  background: var(--color-warning-lighter);
  color: var(--color-warning-darker);
}

.testimonials {
  padding: 0 2rem 3.25rem;
  background: linear-gradient(
      0deg,
      rgba(0, 94, 184, 0.08) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #fff;
  position: relative;
}

.testimonials .quotemark {
  margin: 0 auto;
  display: block;
  margin-bottom: 3rem;
}

.testimonials .slideshow {
  position: relative;
  max-width: 60rem; /* 960px */
  min-height: 15rem;
  margin: 0 auto;
}

.testimonial {
  max-width: 60rem; /* 960px */
  margin: 0 auto;
  text-align: center;
  position: absolute;
  opacity: 0;
  animation: fade 30s infinite;
}

.slideshow .testimonial:nth-child(1) {
  animation-delay: 0s;
}

.slideshow .testimonial:nth-child(2) {
  animation-delay: 10s;
}

.slideshow .testimonial:nth-child(3) {
  animation-delay: 20s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  6.66% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.testimonial p {
  font-size: 1.4rem;
  color: var(--color-primary-darker);
}

.testimonial em {
  font-style: normal;
  font-weight: 700;
  border-bottom: 4px solid var(--color-primary-light);
}

.testimonial cite {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-style: normal;
  margin-top: 1rem;
}

.closer {
  padding-top: 3.25rem;
  background: var(--color-primary-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

.closer .screenshot {
  max-width: 82.5rem;
  margin: 1rem auto 0;
  padding: 0.875rem 0.875rem 0;
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--color-grey-200);
  box-shadow: 0 -8px 64px 0 var(--color-primary-24);
}

.closer .screenshot img {
  display: block;
}

.closer .screenshot-overlay {
  height: 115px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(
    0deg,
    var(--color-primary-40) 0%,
    rgba(0, 94, 184, 0) 100%
  );
}

.legal-content {
  max-width: 47rem;
  margin: 0 auto 7.5rem;
  padding: 0 1rem;
}

.terms .hero,
.privacy-policy .hero {
  padding: 7.5rem 0;
  margin-bottom: 0;
}

.legal-content h2 {
  font-size: 2rem;
  color: var(--color-text-primary);
  margin: 2rem 0 1.5rem;
}

.legal-content h3 {
  color: var(--color-text-primary);
  margin: 2rem 0 1.5rem;
}

.legal-content p {
  margin-bottom: 1.2rem;
}

.legal-content address {
  font-style: normal;
}

.legal-content address h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: normal;
  font-family: "Lato", sans-serif;
}

@media (min-width: 768px) {
  .hero-highlights {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
  }

  .hero-highlight {
    max-width: 368px;
  }

  .hero-highlights > .hero-highlight:nth-child(1) {
    transform: rotate(-5deg);
    z-index: 1;
    margin-right: -0.5rem;
    margin-top: 1.5rem;
  }

  .hero-highlights > .hero-highlight:nth-child(2) {
    z-index: 2;
    margin-bottom: 1.5rem;
  }

  .hero-highlights > .hero-highlight:nth-child(3) {
    transform: rotate(5deg);
    z-index: 1;
    margin-left: -0.5rem;
    margin-top: 1.5rem;
  }

  .highlights {
    flex-direction: row;
  }

  .highlight {
    min-height: 14rem;
  }

  .highlight p:last-of-type {
    margin-top: auto;
  }

  .cards > .card:nth-child(-n + 3) {
    flex: 0 0 calc(33.333% - 16px);
  }

  .cards > .card:nth-child(2) {
    width: auto;
  }

  .cards > .card:nth-child(4) {
    flex: 0 0 calc(60% - 12px);
  }

  .cards > .card:nth-child(5) {
    flex: 0 0 calc(40% - 12px);
  }

  .testimonial p {
    font-size: 2rem;
  }
}

@media (min-width: 800px) {
  .cards > .card:nth-child(4) {
    background-image: url("/images/bento-illustration.svg");
    background-repeat: no-repeat;
    background-position: 95% 100%;
    padding-right: 15rem;
  }
}

@media (min-width: 940px) {
  h1 {
    font-size: 4rem;
    padding: 0;
  }

  .legal-content h2 {
    font-size: 3rem;
  }
}

@media (min-width: 1145px) {
  .cards > .card:nth-child(4) {
    background-position: 75% 100%;
    padding-right: 22rem;
  }

  .hero-highlights {
    padding-left: 0;
    padding-right: 0;
  }

  .highlights {
    margin-top: 6.5rem;
  }
}

@media (min-width: 1200px) {
  .callouts {
    display: block;
  }
}