@layer components {
  .prelaunch { display: flex; flex-direction: column; font-size: 1.0625rem; line-height: var(--leading-normal); }

  .prelaunch-header { border-bottom: var(--xf-border); background: var(--xf-paper); }
  .prelaunch-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4.5rem; }
  .prelaunch-header__logo { width: auto; height: 1.5rem; }
  .prelaunch-header__home:focus-visible { outline: var(--xf-focus-ring); outline-offset: var(--xf-focus-offset); }

  .prelaunch-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  .prelaunch-link:hover { color: var(--xf-ink-hover); }
  .prelaunch-link:focus-visible { outline: var(--xf-focus-ring); outline-offset: var(--xf-focus-offset); }

  .prelaunch-signup__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0.875rem var(--space-md); border-bottom: var(--xf-border); }
  .prelaunch-signup__body { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-md); }
  .prelaunch-signup__title { font-size: var(--text-xl); }
  .prelaunch-signup__honeypot { position: absolute; left: -10000px; }
  .prelaunch-signup__promise { margin-top: calc(var(--space-sm) * -1); font-size: var(--text-sm); font-weight: 600; text-align: center; }
  .prelaunch-signup__consent { padding-top: var(--space-md); border-top: 2px dashed var(--xf-ink); color: var(--xf-ink-soft); font-size: var(--text-sm); }

  .prelaunch-success { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border: var(--xf-border); border-radius: var(--xf-radius-sm); background: var(--xf-green-soft); }
  .prelaunch-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: var(--xf-border); border-radius: 50%; background: var(--xf-surface); color: var(--xf-green); }
  .prelaunch-success__icon .icon { width: 1.5rem; height: 1.5rem; }
  .prelaunch-success__title { font-size: var(--text-xl); }
  .prelaunch-success__email { font-family: var(--xf-font-mono); font-weight: 600; overflow-wrap: anywhere; }
  .prelaunch-success__note { color: var(--xf-ink-soft); font-size: var(--text-sm); }

  .prelaunch-features { padding-block: var(--space-2xl); border-top: var(--xf-border); }
  .prelaunch-features__inner { display: flex; flex-direction: column; gap: var(--space-lg); }
  .prelaunch-features__title { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.05; letter-spacing: var(--tracking-tight); text-wrap: balance; }
  .prelaunch-features__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .prelaunch-features__cta { align-self: flex-start; }
  .prelaunch-feature { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg) var(--space-md); }
  .prelaunch-feature__number { align-self: flex-start; padding: 0.125rem var(--space-sm); border: var(--xf-border-thin); border-radius: var(--xf-radius-sm); background: var(--xf-amber); }
  .prelaunch-feature__title { font-size: 1.375rem; }
  .prelaunch-feature__text { color: var(--xf-ink-soft); }

  .prelaunch-footer { margin-top: auto; padding-block: 1.75rem; border-top: var(--xf-border); background: var(--xf-paper); color: var(--xf-ink-soft); font-size: var(--text-sm); }
  .prelaunch-footer__inner { display: flex; flex-direction: column; gap: var(--space-sm); }
  .prelaunch-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
  .prelaunch-footer__logo { width: auto; height: 1.125rem; }
  .prelaunch-footer__legal { overflow-wrap: anywhere; }

  @media (min-width: 40rem) {
    .prelaunch-signup__header { padding-inline: var(--space-lg); }
    .prelaunch-signup__body { padding: var(--space-lg); }
    .prelaunch-features__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .prelaunch-feature { padding-inline: var(--space-lg); }
  }
}

@layer modules {
  .prelaunch-hero__intro { gap: var(--space-md); }
  .prelaunch-hero__subtitle { max-width: 34rem; font-size: 1.125rem; }

  .prelaunch-signup { scroll-margin-top: var(--space-md); border-radius: var(--xf-radius-lg); }

  @media (min-width: 64rem) {
    .prelaunch-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .prelaunch-signup { box-shadow: var(--xf-shadow-xl); }
  }
}