/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * FormModal — same visual language as AppDownloadModal.
 *
 * Class naming: no BEM `__`; the backdrop IS the block (`.form-modal`), with
 * dialog/close/title/content nested under it. Keyframes keep the block prefix
 * (still global): `form-modal-fade-in` / `form-modal-pop-in`.
 *
 * Tokens: white #ffffff · neutral.90 #1f2d27 · neutral.20 #d6dcd9
 */
:host,
.form-modal {
  display: block;
}

.form-modal,
.form-modal *,
.form-modal *::before,
.form-modal *::after {
  box-sizing: border-box;
}

@keyframes form-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes form-modal-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* The overlay is a native <dialog> opened with showModal() → it renders in
 * the browser top layer, above the sticky navbar and everything else. We
 * reset the UA dialog box (border/margin/max-size) so it fills the viewport
 * and centers its card, and blank the default ::backdrop since the dialog
 * itself provides the dim/blur layer. */
.form-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border: none;
  /* Not shown until showModal() sets [open]; overridden below. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31, 45, 39, 0.5);
  backdrop-filter: blur(2px);
  color: inherit;
}

.form-modal[open] {
  display: flex;
  animation: form-modal-fade-in 160ms ease-out;
}

.form-modal::backdrop {
  background: transparent;
}

.form-modal .dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 20px;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 48px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08), 0 12px 12px rgba(0, 0, 0, 0.08);
    outline: none;
    animation: form-modal-pop-in 220ms cubic-bezier(0.16, 1, 0.3, 1);

    .close {
      position: absolute;
      top: 20px;
      right: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #1f2d27;
      cursor: pointer;
      transition: background-color 0.15s ease;

      &:hover {
        background: #edf0ef;
      }

      &:focus-visible {
        outline: 2px solid #1f2d27;
        outline-offset: 2px;
      }
    }

    .title {
      margin: 0 0 20px;
      padding-right: 32px;
      font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      color: #1f2d27;
    }

    .content {
      display: block;
    }
}