/* -------------------------
   RESET
-------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #fafaf8;
  color: #171717;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
}



/* -------------------------
   HERO
-------------------------- */

.hero {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 40px 24px 100px;

  text-align: center;
}


.hero-copy {
  width: 100%;
  max-width: 760px;
}


.mascot-wrap {
  margin-bottom: 32px;

  animation: mascotFloat 4s ease-in-out infinite;
}


.mascot {
  display: block;

  width: 150px;
  max-width: 34vw;

  height: auto;
}


@keyframes mascotFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-10px)
      rotate(1deg);
  }

}



/* -------------------------
   HERO TEXT
-------------------------- */

h1 {
  margin: 0;

  font-size: clamp(4rem, 10vw, 7.5rem);
  line-height: 0.92;

  font-weight: 850;

  letter-spacing: -0.075em;
}


h1 span {
  display: block;
}


.didzo-line {
  margin-top: 7px;
}


.check {
  display: inline;

  margin-left: 6px;

  color: #8dff6e;

  font-size: 0.56em;

  vertical-align: 18%;
}


.intro {
  margin: 36px 0 0;

  color: #555;

  font-size: clamp(
    1.2rem,
    3vw,
    1.55rem
  );
}



/* -------------------------
   SIGNUP
-------------------------- */

.signup {
  width: 100%;
  max-width: 570px;

  margin:
    58px
    auto
    0;
}


.signup h2 {
  margin: 0;

  font-size:
    clamp(
      1.7rem,
      4vw,
      2.3rem
    );

  letter-spacing: -0.045em;
}


.signup-intro {
  max-width: 460px;

  margin:
    12px
    auto
    24px;

  color: #676767;

  font-size: 0.75rem;
  line-height: 1.55;
}



/* -------------------------
   KIT FORM
-------------------------- */

.formkit-form[data-uid="6db4037927"] {
  width: 100% !important;
  max-width: 570px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  background: transparent !important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  -webkit-font-smoothing: antialiased;
}


.formkit-form[data-uid="6db4037927"] * {
  box-sizing: border-box;
}



/* remove internal Kit padding */

.formkit-form[data-uid="6db4037927"]
[data-style="clean"] {
  width: 100% !important;

  padding: 0 !important;
}



/* fields row */

.formkit-form[data-uid="6db4037927"]
.formkit-fields {
  display: flex !important;

  flex-wrap: nowrap !important;

  gap: 10px !important;

  width: 100% !important;

  margin: 0 !important;
}



/* input container */

.formkit-form[data-uid="6db4037927"]
.formkit-field {
  flex:
    1
    1
    auto !important;

  margin: 0 !important;
}



/* input */

.formkit-form[data-uid="6db4037927"]
.formkit-input {
  width: 100% !important;

  margin: 0 !important;

  padding:
    17px
    20px !important;

  border:
    1.5px
    solid
    #d9d9d3 !important;

  border-radius:
    999px !important;

  outline: none !important;

  background:
    #ffffff !important;

  color:
    #171717 !important;

  font-family: inherit !important;

  font-size:
    1rem !important;

  line-height:
    1.2 !important;

  box-shadow:
    none !important;

  transition:
    border-color
      0.2s
      ease,
    box-shadow
      0.2s
      ease !important;
}


.formkit-form[data-uid="6db4037927"]
.formkit-input:focus {
  border-color:
    #171717 !important;

  box-shadow:
    0
    0
    0
    4px
    rgba(
      20,
      20,
      20,
      0.05
    ) !important;
}


.formkit-form[data-uid="6db4037927"]
.formkit-input::placeholder {
  color:
    #aaa !important;

  opacity: 1 !important;
}



/* submit button */

.formkit-form[data-uid="6db4037927"]
.formkit-submit {
  flex:
    0
    0
    auto !important;

  width:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    999px !important;

  background:
    #171717 !important;

  color:
    #ffffff !important;

  font-family:
    inherit !important;

  font-size:
    1rem !important;

  font-weight:
    750 !important;

  cursor:
    pointer !important;

  overflow:
    hidden !important;

  transition:
    transform
      0.18s
      ease,
    background
      0.18s
      ease !important;
}


.formkit-form[data-uid="6db4037927"]
.formkit-submit > span {
  display: block;

  padding:
    17px
    27px !important;

  white-space: nowrap;
}


.formkit-form[data-uid="6db4037927"]
.formkit-submit:hover {
  transform:
    translateY(-2px);

  background:
    #292929 !important;
}


.formkit-form[data-uid="6db4037927"]
.formkit-submit:active {
  transform:
    translateY(0);
}



/* spinner */

.formkit-form[data-uid="6db4037927"]
.formkit-spinner {
  display: flex;

  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  justify-content: center;
  align-items: center;

  pointer-events: none;
}



/* errors */

.formkit-form[data-uid="6db4037927"]
.formkit-alert {
  width: 100% !important;

  margin:
    12px
    0 !important;

  padding:
    13px
    16px !important;

  border-radius:
    18px !important;

  text-align:
    center !important;

  font-size:
    0.9rem !important;

  line-height:
    1.4 !important;
}


.formkit-form[data-uid="6db4037927"]
.formkit-alert:empty {
  display:
    none !important;
}


.formkit-form[data-uid="6db4037927"]
.formkit-alert-success {
  border:
    0 !important;

  background:
    #eaffea !important;

  color:
    #171717 !important;

  font-weight:
    650 !important;
}


.formkit-form[data-uid="6db4037927"]
.formkit-alert-error {
  border:
    1px
    solid
    #f2c9be !important;

  background:
    #fff3ef !important;

  color:
    #7b3323 !important;
}



/* Kit branding */

.formkit-form[data-uid="6db4037927"]
.formkit-powered-by-convertkit-container {
  display: flex !important;

  justify-content:
    center !important;

  width:
    100% !important;

  margin:
    10px
    0
    0 !important;

  opacity:
    0.45;
}


.formkit-form[data-uid="6db4037927"]
.formkit-powered-by-convertkit {
  display:
    block !important;

  width:
    133px !important;

  height:
    36px !important;

  margin:
    0 auto !important;

  border:
    0 !important;

  background-color:
    transparent !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center !important;

  color:
    transparent !important;

  text-indent:
    100% !important;

  white-space:
    nowrap !important;

  overflow:
    hidden !important;
}



/* privacy */

.privacy-note {
  margin:
    25px
    0
    40px;

  color:
    #999;

  font-size:
    0.78rem;
}


.privacy-note a {
  margin-left:
    5px;

  color:
    #777;

  text-decoration:
    none;
}



/* -------------------------
   DARK TEASER
-------------------------- */

.teaser {
  min-height:
    75vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    110px
    24px;

  background:
    #171717;

  color:
    #ffffff;

  text-align:
    center;
}


.teaser-inner {
  width:
    100%;

  max-width:
    900px;
}


.eyebrow {
  margin:
    0
    0
    28px;

  color:
    #8dff6e;

  font-size:
    0.95rem;

  font-weight:
    750;

  letter-spacing:
    0.04em;
}


.teaser h2 {
  margin: 0;

  font-size:
    clamp(
      2.8rem,
      7vw,
      5.8rem
    );

  line-height:
    1.02;

  letter-spacing:
    -0.065em;
}


.teaser h2 span {
  color:
    #777;
}


.didzo-word {
  margin:
    54px
    0
    0;

  font-size:
    1.25rem;

  font-weight:
    800;
}



/* -------------------------
   STILL HERE
-------------------------- */

.still-here {
  min-height:
    65vh;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    100px
    24px;

  text-align:
    center;
}


.tiny-mascot {
  margin-bottom:
    22px;
}


.tiny-mascot img {
  width:
    76px;

  animation:
    mascotWobble
    6s
    ease-in-out
    infinite;
}


@keyframes mascotWobble {

  0%,
  100% {
    transform:
      rotate(0deg)
      scale(1);
  }

  25% {
    transform:
      rotate(-4deg)
      scale(1.03);
  }

  70% {
    transform:
      rotate(3deg)
      scale(0.98);
  }

}


.still-here h2 {
  margin:
    0;

  font-size:
    clamp(
      2.5rem,
      6vw,
      4.8rem
    );

  letter-spacing:
    -0.06em;
}


.still-here p {
  margin:
    12px
    0
    0;

  font-size:
    1.3rem;
}


.still-here .soon {
  margin-top:
    4px;

  color:
    #777;
}



/* -------------------------
   FOOTER
-------------------------- */

footer {
  padding:
    45px
    24px
    35px;

  border-top:
    1px
    solid
    #e6e6e1;

  text-align:
    center;
}


.follow {
  margin:
    0
    0
    18px;

  font-weight:
    750;
}


.social-links {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    8px
    20px;

  max-width:
    700px;

  margin:
    0
    auto;
}


.social-links a {
  color:
    #777;

  font-size:
    0.88rem;

  text-decoration:
    none;

  transition:
    color
    0.2s
    ease;
}


.social-links a:hover {
  color:
    #171717;
}


.footer-bottom {
  display:
    flex;

  justify-content:
    space-between;

  max-width:
    950px;

  margin:
    50px
    auto
    0;

  color:
    #aaa;

  font-size:
    0.72rem;
}


.footer-bottom p {
  margin:
    0;
}



/* -------------------------
   MOBILE
-------------------------- */

@media (max-width: 600px) {

  .hero {
    min-height:
      auto;

    padding:
      80px
      20px
      100px;
  }


  .mascot {
    width:
      125px;
  }


  h1 {
    font-size:
      clamp(
        4rem,
        22vw,
        6rem
      );
  }


  .intro {
    margin-top:
      28px;
  }


  .signup {
    margin-top:
      50px;
  }


  .formkit-form[data-uid="6db4037927"]
  .formkit-fields {
    flex-direction:
      column !important;
  }


  .formkit-form[data-uid="6db4037927"]
  .formkit-field,
  .formkit-form[data-uid="6db4037927"]
  .formkit-submit {
    width:
      100% !important;
  }


  .formkit-form[data-uid="6db4037927"]
  .formkit-submit > span {
    width:
      100% !important;

    padding:
      17px
      22px !important;
  }


  .teaser {
    min-height:
      72vh;

    padding:
      90px
      20px;
  }


  .footer-bottom {
    flex-direction:
      column;

    gap:
      8px;
  }

}



/* -------------------------
   ACCESSIBILITY
-------------------------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  .mascot-wrap,
  .tiny-mascot img {
    animation:
      none;
  }

}


/* -------------------------
   SIMPLE / THANK YOU PAGE
-------------------------- */

.simple-page,
.legal-body {
  min-height: 100vh;
  background: #fafaf8;
}


.thanks-page {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  max-width: 720px;

  margin: 0 auto;

  padding: 80px 24px;

  text-align: center;
}


.thanks-mascot {
  margin-bottom: 26px;

  animation: mascotFloat 4s ease-in-out infinite;
}


.thanks-mascot img {
  width: 115px;
  height: auto;
}


.thanks-eyebrow {
  margin: 0 0 12px;

  color: #777;

  font-size: 0.95rem;
  font-weight: 750;
}


.thanks-title {
  margin: 0;

  font-size: clamp(3.7rem, 10vw, 7rem);
  line-height: 0.95;

  font-weight: 850;

  letter-spacing: -0.07em;
}


.thanks-check {
  margin-left: 8px;

  color: #8dff6e;

  font-size: 0.58em;

  vertical-align: 18%;
}


.thanks-lead {
  margin: 28px 0 0;

  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 750;
}


.thanks-copy {
  max-width: 500px;

  margin: 13px auto 0;

  color: #666;

  font-size: 1rem;
  line-height: 1.65;
}


.didzo-button {
  display: inline-block;

  margin-top: 34px;

  padding: 16px 27px;

  border-radius: 999px;

  background: #171717;

  color: #fff;

  font-weight: 750;

  text-decoration: none;

  transition:
    transform 0.18s ease,
    background 0.18s ease;
}


.didzo-button:hover {
  transform: translateY(-2px);

  background: #292929;
}


.thanks-small {
  margin-top: 34px;

  color: #999;

  font-size: 0.85rem;
}



/* -------------------------
   LEGAL PAGES
-------------------------- */

.legal-page {
  width: calc(100% - 48px);
  max-width: 760px;

  margin: 0 auto;

  padding: 70px 0 110px;
}


.back-link {
  display: inline-block;

  color: #171717;

  font-size: 0.9rem;
  font-weight: 750;

  text-decoration: none;
}


.back-link:hover {
  opacity: 0.65;
}


.legal-kicker {
  margin: 70px 0 12px;

  color: #777;

  font-size: 0.9rem;
  font-weight: 750;
}


.legal-page > h1 {
  margin: 0;

  font-size: clamp(3.4rem, 9vw, 6rem);
  line-height: 0.95;

  letter-spacing: -0.065em;
}


.legal-updated {
  margin: 20px 0 60px;

  color: #999;

  font-size: 0.85rem;
}


.legal-intro {
  margin: 24px 0 55px;

  color: #555;

  font-size: 1.15rem;
  line-height: 1.7;
}


.legal-page section {
  margin-top: 48px;
}


.legal-page section h2 {
  margin: 0 0 15px;

  font-size: 1.35rem;

  letter-spacing: -0.025em;
}


.legal-page section p,
.legal-page section li {
  color: #555;

  font-size: 1rem;
  line-height: 1.75;
}


.legal-page section p {
  margin: 12px 0;
}


.legal-page ul {
  padding-left: 23px;
}


.legal-page a {
  color: #171717;

  text-underline-offset: 3px;
}


.legal-footer-links {
  display: flex;

  gap: 22px;

  margin-top: 70px;
  padding-top: 28px;

  border-top: 1px solid #e3e3de;

  font-size: 0.85rem;
  font-weight: 700;
}


.legal-footer-links a {
  text-decoration: none;
}



/* -------------------------
   LEGAL MOBILE
-------------------------- */

@media (max-width: 600px) {

  .legal-page {
    width: calc(100% - 40px);

    padding-top: 45px;
    padding-bottom: 80px;
  }


  .legal-kicker {
    margin-top: 55px;
  }


  .legal-page section {
    margin-top: 40px;
  }


  .thanks-page {
    padding: 60px 20px;
  }

}


.footer-legal {
  display: flex;
  justify-content: center;

  gap: 8px;

  margin-top: 30px;
}


.footer-legal a {
  color: #999;
  font-size: 0.7rem;
  text-decoration: none;
}


.footer-legal a:hover {
  color: #171717;
}