@font-face {
  font-family: "SN Pro";
  src: url("/fonts/SNPro-VariableRegular.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: oblique 0deg 14deg;
}

:root {
  --font-family: "SN Pro", sans-serif;
  --color-pastel-green: #a1eebd;
  --color-pastel-green-dark: #35b29d;
  --color-pastel-blue: #b4e4ff;
  --color-pastel-red: #ffb2bf;
  --color-pastel-purple: #ab8ae5;
  --color-pastel-brown: #bf8e73;
  --color-turquoise: #7acccc;
  --color-black: #000000;
  --color-red: #d91657;
  --color-brown: #993d4d;
  --color-dialog-bg: #fff7;
  --bold: 600;
  --shadow: -6px 6px 0px 0px #0000001a;
  --shadow-hover: -6px 6px 4px 2px #0000001a;
  --radius: 4px;

  /* @link https://utopia.fyi/type/calculator/?c=320,16,1.125,1240,16,1.25,5,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --size--1: 0.85rem;
  --size-0: clamp(1rem, 1rem + 0vw, 1rem);
  --size-1: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --size-2: clamp(1.2656rem, 1.1624rem + 0.5163vw, 1.5625rem);
  --size-3: clamp(1.4238rem, 1.2397rem + 0.9205vw, 1.9531rem);
  --size-4: clamp(1.6018rem, 1.3098rem + 1.4602vw, 2.4414rem);
  --size-5: clamp(1.802rem, 1.3673rem + 2.1734vw, 3.0518rem);
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--size-0);
  line-height: 1.5;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button {
  font-family: inherit;
}
b, strong {
  font-weight: var(--bold);
}

.landing-grid {
  margin: 0;
  display: grid;
  min-height: 100vh;
  justify-content: center;
  grid-template-rows:
    60px [bg-start] auto [menu-end] 1fr [bg-end] 20px [footer-start] auto [footer-end] 20px;
  grid-template-columns:
    50px [bg-start] 30px [content-start] minmax(0, 1200px) [bg-end] 80px;

  @media (width < 600px) {
    grid-template-columns:
      [bg-start] 30px [content-start] minmax(
      0,
      1200px
    ) [content-end] 30px [bg-end];
    grid-template-rows:
      [bg-start] auto [menu-end] 1fr [footer-start] auto [footer-end] 20px [bg-end];
  }
}

/* Navbar */
.landing-navbar {
  grid-area: bg-start / bg-start / menu-end / bg-end;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 2rem;
}

.landing-navbar-menu {
  display: flex;
  list-style: none;
  gap: 1rem;
  margin: 0 2rem;
}

/* Main content */
.landing-main {
  grid-area: bg-start / bg-start / bg-end / bg-end;
  background-color: var(--color-pastel-green);
  display: grid;
  align-items: center;
  align-content: center;
  justify-content: center;
  grid-template-columns: 2rem minmax(0, 500px) 2rem;
  padding: 80px 0;
  text-align: center;

  @media (min-width: 600px) {
    background-image: url("./favicon.svg");
    background-repeat: no-repeat;
    background-position: bottom 0 right 20px;
    background-size: 64px 64px;
  }

  > * {
    grid-column: 2;
  }

  h1 {
    font-size: var(--size-5);
    font-weight: var(--bold);
    color: var(--color-black);
    margin: 0 0 1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  p {
    font-size: var(--size-1);
    color: var(--color-black);
    margin: 0 0 2rem;
  }
}

/* Footer */
.landing-footer {
  grid-area: footer-start / bg-start / footer-end / bg-end;
  padding: 0 2rem;
}
.landing-footer-copy {
  text-align: center;
  font-size: var(--size--1);
  a {
    color: #2563eb;
    &:hover {
      color: black;
    }
  }
}

#lead-generation-widget {
  border-color: var(--color-pastel-green-dark) !important;
  margin: 0 auto;
  text-align: left;
  min-height: auto !important;
  box-shadow: -10px 10px 0px 0px var(--color-pastel-green-dark);
}