/* ---------- Delivery: anchors, focus, no-JS ---------- */
html {
  scroll-padding-top: 96px;
}
#waitlist-form,
#waitlist-form-bottom,
#how,
#trust,
#waitlist {
  scroll-margin-top: 96px;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.logo {
  color: inherit;
  text-decoration: none;
}
.end-footer .purpose {
  margin: 0;
  max-width: 52ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(250, 249, 245, 0.45);
}
.nojs-note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-2);
  text-align: center;
}
.ending .nojs-note {
  color: #ff9868;
}
@media (max-width: 760px) {
  html.intro-on,
  html.intro-on body {
    overflow: visible;
  }
}
/* without the motion script, step descriptions stay expanded */
html:not(.motion) .p-more {
  grid-template-rows: 1fr;
}
html:not(.motion) .p-desc {
  opacity: 1;
}
/* narrow screens: the proof illustration keeps its own proportions */
@media (max-width: 520px) {
  .trust-visual.tv-proof {
    aspect-ratio: 46 / 34.5;
    padding: 0;
    display: block;
  }
}
/* hero form: never wider than the viewport */
@media (max-width: 760px) {
  .hero .hero-signup {
    width: 100%;
  }
  .hero .sd-border-beam {
    display: flex;
    width: min(460px, 100%);
    max-width: 100%;
  }
  .hero .waitlist-form {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .waitlist-form .btn {
    padding: 0 14px;
  }
}
/* without the motion script the decorative hero collage is skipped; the files appear in the Capsule illustration */
html:not(.motion) .hero-media {
  display: none;
}
.nojs-note {
  position: relative;
  z-index: 2;
  display: inline-block;
  max-width: 460px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}
.ending .nojs-note {
  background: rgba(255, 255, 255, 0.08);
}

/* Mobile keeps the existing hero and footer only. */
@media (max-width: 760px) {
  /* no line-by-line intro on phones: let the two headline lines flow as one balanced
     sentence so no line is left holding a single word */
  .hero h1 .hl,
  .hero h1 .hl-in {
    display: inline;
  }
  .hero h1 .hl + .hl::before {
    content: " ";
  }
  body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  main {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .hero {
    flex: 1;
    min-height: 0;
    padding-block: 24px;
  }
  .nav-cta,
  #pin-wrap,
  #blank-screen,
  #how,
  #trust,
  .ending .final-cta {
    display: none;
  }
  .ending {
    padding-block: 0;
  }
  html.motion .ending.reveal {
    opacity: 1;
    transform: none;
  }
  .end-footer {
    margin-top: 0;
  }
}

@media (max-width: 520px) {
  footer.end-footer {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .end-footer .socials {
    order: -1;
    align-self: center;
  }
  .end-footer .foot-brand {
    margin-right: 0;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}