/* 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 — dialog styles.
 *
 * 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;
  }
}