.logos-demo-dialog {
  width: min(92vw, 68rem);
  max-width: 68rem;
  max-height: min(92svh, 55rem);

  overflow: hidden;

  border:
    1px solid rgba(0, 95, 67, 0.17);
  border-radius: var(--logos-radius-xl);

  background:
    rgba(248, 253, 251, 0.97);

  box-shadow:
    0 40px 150px rgba(0, 40, 28, 0.33);

  opacity: 0;
  transform:
    translateY(1.5rem)
    scale(0.975);

  transition:
    opacity var(--logos-duration-normal)
      var(--logos-ease),
    transform var(--logos-duration-slow)
      var(--logos-ease);
}

.logos-demo-dialog[open] {
  opacity: 1;
  transform:
    translateY(0)
    scale(1);
}

.logos-demo-dialog::backdrop {
  background:
    rgba(4, 31, 23, 0.38);
  backdrop-filter:
    blur(0.9rem)
    saturate(0.8);
}

.logos-demo-dialog__shell {
  display: grid;
  min-height: min(82svh, 49rem);
  grid-template-columns:
    minmax(16rem, 0.72fr)
    minmax(0, 1.28fr);
}

.logos-demo-dialog__visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;

  color: var(--logos-white);

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(0, 216, 137, 0.25),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #021c14,
      #063f2e 60%,
      #005f43
    );
}

.logos-demo-dialog__visual-grid {
  position: absolute;
  inset: 0;
  opacity: 0.15;

  background-image:
    linear-gradient(
      rgba(143, 255, 214, 0.14) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(143, 255, 214, 0.14) 1px,
      transparent 1px
    );

  background-size: 2.6rem 2.6rem;
}

.logos-demo-dialog__visual-glow {
  position: absolute;
  left: 50%;
  top: 38%;

  width: 21rem;
  height: 21rem;

  border-radius: 50%;

  background:
    rgba(0, 216, 137, 0.22);

  filter: blur(4rem);

  transform:
    translate(-50%, -50%);
}

.logos-demo-dialog__visual-core {
  position: absolute;
  left: 50%;
  top: 39%;

  display: grid;
  width: min(70%, 18rem);
  aspect-ratio: 1;
  place-items: center;

  transform:
    translate(-50%, -50%);
}

.logos-demo-dialog__visual-ring {
  position: absolute;
  left: 50%;
  top: 50%;

  border:
    1px solid rgba(136, 255, 211, 0.22);
  border-radius: 50%;

  transform:
    translate(-50%, -50%);
}

.logos-demo-dialog__visual-ring--one {
  width: 100%;
  aspect-ratio: 1.6;
}

.logos-demo-dialog__visual-ring--two {
  width: 75%;
  aspect-ratio: 1.55;
  border-style: dashed;
}

.logos-demo-dialog__visual-ring--three {
  width: 49%;
  aspect-ratio: 1.5;
}

.logos-demo-dialog__visual-mark {
  position: relative;
  z-index: 2;

  display: grid;
  width: 5.8rem;
  height: 5.8rem;
  place-items: center;

  border:
    1px solid rgba(172, 255, 224, 0.36);
  border-radius: 1.8rem;

  color: #b8ffe2;

  background:
    linear-gradient(
      135deg,
      rgba(0, 216, 137, 0.27),
      rgba(255, 255, 255, 0.04)
    );

  box-shadow:
    inset 0 0 2.5rem rgba(0, 216, 137, 0.12),
    0 0 3.5rem rgba(0, 216, 137, 0.25);

  font-family: var(--logos-font-en);
  font-size: 3.4rem;
  font-weight: 300;

  backdrop-filter: blur(0.8rem);
}

.logos-demo-dialog__visual-copy {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
}

.logos-demo-dialog__visual-copy span {
  display: block;
  color: #78eebd;
  font-family: var(--logos-font-en);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.logos-demo-dialog__visual-copy strong {
  display: block;
  margin-top: 0.65rem;

  color: var(--logos-white);

  font-size:
    clamp(1.35rem, 2vw, 2rem);

  font-weight: 900;
  line-height: 1.55;
}

.logos-demo-dialog__content {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  padding:
    clamp(1.4rem, 2.5vw, 2.2rem);
}

.logos-demo-dialog__close {
  position: absolute;
  top: 1rem;
  left: 1rem;

  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;

  border:
    1px solid var(--logos-line);
  border-radius: 0.8rem;

  color: var(--logos-ink-muted);
  background: rgba(255, 255, 255, 0.75);

  transition:
    color var(--logos-duration-fast)
      ease,
    background var(--logos-duration-fast)
      ease,
    transform var(--logos-duration-fast)
      ease;
}

.logos-demo-dialog__close:hover {
  color: var(--logos-deep);
  background: var(--logos-white);
  transform: rotate(4deg);
}

.logos-demo-dialog__close svg {
  width: 1.2rem;
  height: 1.2rem;
}

.logos-demo-dialog__header {
  max-width: 34rem;
  padding-left: 2.8rem;
}

.logos-demo-dialog__eyebrow {
  display: block;
  color: var(--logos-mint);
  font-family: var(--logos-font-en);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.logos-demo-dialog__header h2 {
  margin-top: 0.6rem;
  color: var(--logos-ink);
  font-size:
    clamp(1.5rem, 2.4vw, 2.3rem);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1.3;
}

.logos-demo-dialog__header p {
  margin-top: 0.65rem;
  color: var(--logos-ink-3);
  font-size: 0.78rem;
  line-height: 1.9;
}

.logos-demo-form {
  margin-top: 1.35rem;
}

.logos-demo-form__global-error {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;

  border:
    1px solid rgba(214, 60, 85, 0.2);
  border-radius: var(--logos-radius-sm);

  color: var(--logos-danger);
  background: var(--logos-danger-soft);

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.8;
}

.logos-demo-form__grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.logos-form-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.logos-form-field--wide {
  grid-column: 1 / -1;
}

.logos-form-field label {
  color: var(--logos-ink-2);
  font-size: 0.69rem;
  font-weight: 800;
}

.logos-form-field label span {
  color: var(--logos-danger);
}

.logos-form-field
:is(
  input,
  select,
  textarea
) {
  min-height: 3rem;
  padding: 0.7rem 0.8rem;

  border:
    1px solid var(--logos-line);
  border-radius: var(--logos-radius-sm);

  color: var(--logos-ink);

  background: rgba(255, 255, 255, 0.76);

  box-shadow:
    inset 0 1px 2px rgba(0, 58, 41, 0.025);

  font-size: 0.77rem;
  font-weight: 550;

  transition:
    border-color var(--logos-duration-fast)
      ease,
    box-shadow var(--logos-duration-fast)
      ease,
    background var(--logos-duration-fast)
      ease;
}

.logos-form-field textarea {
  min-height: 6.3rem;
  line-height: 1.8;
}

.logos-form-field select {
  padding-left: 2.5rem;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--logos-deep) 50%
    ),
    linear-gradient(
      135deg,
      var(--logos-deep) 50%,
      transparent 50%
    );

  background-position:
    calc(0% + 1.05rem) 51%,
    calc(0% + 0.72rem) 51%;

  background-size:
    0.34rem 0.34rem,
    0.34rem 0.34rem;

  background-repeat: no-repeat;
}

.logos-form-field
:is(
  input,
  select,
  textarea
):hover {
  border-color:
    rgba(0, 95, 67, 0.25);
  background: rgba(255, 255, 255, 0.92);
}

.logos-form-field
:is(
  input,
  select,
  textarea
):focus {
  border-color: var(--logos-mint);
  background: var(--logos-white);
  box-shadow:
    0 0 0 0.22rem rgba(0, 201, 133, 0.11);
  outline: none;
}

.logos-form-field
:is(
  input,
  textarea
)::placeholder {
  color: rgba(82, 112, 103, 0.55);
}

.logos-form-field__counter {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  color: var(--logos-ink-muted);
  font-family: var(--logos-font-en);
  font-size: 0.52rem;
}

.logos-form-field__error {
  min-height: 0.9rem;
  color: var(--logos-danger);
  font-size: 0.59rem;
  font-weight: 650;
  line-height: 1.5;
}

.logos-form-field.has-error
:is(
  input,
  select,
  textarea
) {
  border-color:
    rgba(214, 60, 85, 0.55);
  background: rgba(255, 241, 243, 0.58);
}

.logos-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.logos-demo-form__consent {
  margin-top: 0.9rem;
}

.logos-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.logos-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.logos-checkbox__visual {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  place-items: center;

  border:
    1px solid var(--logos-line-strong);
  border-radius: 0.38rem;

  color: var(--logos-white);
  background: rgba(255, 255, 255, 0.78);

  transition:
    border-color var(--logos-duration-fast)
      ease,
    background var(--logos-duration-fast)
      ease,
    box-shadow var(--logos-duration-fast)
      ease;
}

.logos-checkbox__visual svg {
  width: 0.82rem;
  height: 0.82rem;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--logos-duration-fast)
      ease,
    transform var(--logos-duration-fast)
      ease;
}

.logos-checkbox input:checked
+ .logos-checkbox__visual {
  border-color: var(--logos-mint);
  background: var(--logos-mint);
  box-shadow:
    0 0 0 0.2rem rgba(0, 201, 133, 0.1);
}

.logos-checkbox input:checked
+ .logos-checkbox__visual svg {
  opacity: 1;
  transform: scale(1);
}

.logos-checkbox input:focus-visible
+ .logos-checkbox__visual {
  box-shadow:
    0 0 0 0.25rem rgba(0, 201, 133, 0.16);
}

.logos-checkbox__label {
  color: var(--logos-ink-3);
  font-size: 0.67rem;
  font-weight: 600;
  line-height: 1.75;
}

.logos-demo-form__actions {
  display: flex;
  margin-top: 1rem;
  align-items: center;
  gap: 0.8rem;
}

.logos-demo-form__submit {
  min-width: 12rem;
}

.logos-demo-form__cancel {
  padding: 0.7rem;
  color: var(--logos-ink-muted);
  background: transparent;
  font-size: 0.69rem;
  font-weight: 750;
}

.logos-demo-form__cancel:hover {
  color: var(--logos-deep);
}

.logos-button__loader {
  position: relative;
  z-index: 3;

  width: 1.1rem;
  height: 1.1rem;

  border:
    2px solid rgba(255, 255, 255, 0.28);
  border-top-color: var(--logos-white);
  border-radius: 50%;
}

.logos-demo-form__status {
  margin-top: 0.8rem;
  color: var(--logos-ink-3);
  font-size: 0.67rem;
  line-height: 1.7;
}

.logos-demo-success {
  display: flex;
  min-height: 34rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  padding: 2rem;

  text-align: center;
}

.logos-demo-success:not([hidden]) {
  display: flex;
}

.logos-demo-success__icon {
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;

  border:
    1px solid rgba(0, 201, 133, 0.26);
  border-radius: 1.5rem;

  color: var(--logos-mint);

  background: var(--logos-success-soft);

  box-shadow:
    0 0 3rem rgba(0, 201, 133, 0.14);
}

.logos-demo-success__icon svg {
  width: 2.8rem;
  height: 2.8rem;
}

.logos-demo-success__eyebrow {
  margin-top: 1.2rem;
  color: var(--logos-mint);
  font-family: var(--logos-font-en);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.logos-demo-success h2 {
  margin-top: 0.6rem;
  color: var(--logos-ink);
  font-size: 2rem;
  font-weight: 950;
}

.logos-demo-success p {
  max-width: 27rem;
  margin-top: 0.8rem;
  color: var(--logos-ink-3);
  font-size: 0.8rem;
  line-height: 1.9;
}

.logos-demo-success
.logos-button {
  margin-top: 1.4rem;
}