/* Experimental ending only. Remove this stylesheet and the canvas module to revert. */
.vision {
  padding-block: clamp(3rem, 5vw, 5rem) clamp(4rem, 7vw, 7rem);
  color: var(--alignd-text);
  background: var(--alignd-white);
}
.vision-layout {
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  border-top: var(--border);
  padding-top: var(--space-8);
}
.vision-copy { padding: var(--space-8) 0; }
.vision-copy .eyebrow { color: var(--alignd-purple); }
.vision-copy > p:not(.eyebrow) { max-width: 27rem; }
.vision-cross {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: var(--border);
  color: var(--alignd-purple);
  font-size: 2rem;
}
.vision-image {
  margin: 0;
  border-left: 1px solid var(--alignd-purple);
  border-bottom: 1px solid var(--alignd-purple);
}

.early-access {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 7vw, 7rem);
  color: var(--alignd-white);
  /* The static background remains complete without the optional canvas module. */
  background: linear-gradient(115deg, var(--alignd-blue), var(--alignd-purple));
}
.cta-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -2; }
/* Constant darkening keeps small white copy above 4.5:1 across the gradient. */
.early-access::before { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / 16%); pointer-events: none; z-index: -1; }
.early-access .access-layout { position: relative; align-items: center; border-top-color: rgb(255 255 255 / 40%); }
.early-access .access-copy { border-color: rgb(255 255 255 / 40%); }
.early-access input:focus-visible { outline-color: var(--alignd-white); }
.early-access input[aria-invalid="true"] { outline: 2px solid var(--alignd-white); outline-offset: 3px; }
.early-access .form-note { max-width: 27rem; }

@media (max-width: 767px) {
  .vision { padding-block: var(--space-8) var(--space-16); }
  .vision-layout { grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-8); }
  .vision-copy { padding: 0; }
  .vision-copy > p:not(.eyebrow) { margin-top: var(--space-6); }
  .vision-cross { margin-top: var(--space-6); }
  .vision-image { width: 100%; margin: 0; }
  .early-access { padding-block: var(--space-16); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-atmosphere { display: none; }
}