@charset "UTF-8";
/* "Drops into what you run" — Figma "VIVA 2.5 LP / Desktop 1440".
   Three integration steps on the left, an ecosystem diagram on the right. */
.drop_in {
  padding: 0 0 120px;
  background: #ffffff;
}
.drop_in * {
  color: inherit;
}
.drop_in__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #614efa;
}
.drop_in__title {
  margin: 16px 0 0;
  font-family: "Plus Jakarta Sans";
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #1a1a22;
}
.drop_in__subtitle {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #434351;
}
.drop_in__body {
  display: grid;
  grid-template-columns: 1fr 680px;
  gap: 40px;
  align-items: center;
  margin-top: 64px;
}
.drop_in {
  /* ---- steps ----
     The highlight follows the pointer; the rest state marks step 01. Hovering
     any step suppresses the rest-state highlight so only one reads active. */
  /* No gap between the steps: the left rules meet to read as one continuous
     rail, and the 24px paddings do the separating. Only the last step
     carries spacing, to stand the rail off the disclosure below it. */
}
.drop_in__steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop_in__step {
  display: flex;
  gap: 16px;
  padding: 24px;
  /* Both states reserve 2px so the copy does not shift on hover. */
  border-left: 2px solid #e7e7ea;
  transition: border-color 0.2s ease;
}
.drop_in__step--on {
  border-left-color: #4a3bbe;
}
.drop_in__step:last-child {
  margin-bottom: 32px;
}
.drop_in__steps:hover .drop_in__step--on {
  border-left-color: #e7e7ea;
}
.drop_in__steps .drop_in__step:hover {
  border-left-color: #4a3bbe;
}
.drop_in__step-num {
  flex: 0 0 28px;
  width: 28px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #434351;
  transition: color 0.2s ease;
}
.drop_in__step--on .drop_in__step-num {
  font-weight: 700;
  color: #4a3bbe;
}
.drop_in__steps:hover .drop_in__step--on .drop_in__step-num {
  font-weight: 500;
  color: #434351;
}
.drop_in__steps .drop_in__step:hover .drop_in__step-num {
  font-weight: 700;
  color: #4a3bbe;
}
.drop_in__step-body {
  display: block;
  min-width: 0;
}
.drop_in__step-title {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: #1a1a22;
}
.drop_in__step-code {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 20px;
  color: #434351;
  /* base_new sets `body * { font-family: … !important }`, which hits the
     inner spans too — so the override has to name them. */
}
.drop_in__step-code,
.drop_in__step-code * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
.drop_in__step-code .di_str {
  color: #614efa;
}
.drop_in__step-code .di_com {
  color: #9292ab;
}
.drop_in {
  /* ---- diagram ----
     Animated SVG export; it carries its own motion. */
}
.drop_in__diagram {
  display: block;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 660/315;
  border: 0;
  pointer-events: none;
  justify-self: end;
}
.drop_in {
  /* ---- disclosure ---- */
}
.drop_in__more {
  border-top: 1px solid #eaeaed;
  border-bottom: 1px solid #eaeaed;
}
.drop_in__more summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  color: #1a1a22;
  cursor: pointer;
  list-style: none;
}
.drop_in__more summary::-webkit-details-marker {
  display: none;
}
.drop_in__more[open] .drop_in__more-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.drop_in__more-icon {
  position: relative;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
}
.drop_in__more-icon::before, .drop_in__more-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.6px;
  border-radius: 1px;
  background: #614efa;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.drop_in__more-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.drop_in__more-body {
  padding: 0 0 24px 24px;
  font-size: 15px;
  line-height: 24px;
  color: #434351;
}
.drop_in {
  /* ---- model-swap banner ---- */
}
.drop_in__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
  padding: 24px 32px;
  border-radius: 20px;
  background: linear-gradient(120deg, #6250f7 0%, #5531d7 52%, #4b1fc2 100%);
}
.drop_in__banner-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: #ffffff;
}
.drop_in__banner-desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.78);
}
.drop_in__banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  background: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: #614efa;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.drop_in__banner-btn:hover {
  transform: translateY(-1px);
  color: #614efa;
}

/* ---- responsive ---- */
@media screen and (max-width: 1280px) {
  .drop_in__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
}
@media screen and (max-width: 1024px) {
  .drop_in__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  /* Keep the diagram legible once it no longer has half the row. */
  .drop_in__diagram {
    margin: 0 auto;
    justify-self: center;
  }
}
@media screen and (max-width: 768px) {
  .drop_in {
    padding-bottom: 72px;
  }
  .drop_in__title {
    font-size: 32px;
    line-height: 40px;
  }
  .drop_in__subtitle {
    font-size: 15px;
  }
  .drop_in__body {
    margin-top: 40px;
  }
  .drop_in__step {
    gap: 20px;
    padding: 22px 0 22px 20px;
  }
  .drop_in__step-title {
    font-size: 16px;
    line-height: 24px;
  }
  .drop_in__step-code {
    font-size: 13px;
    /* Long call signatures must wrap rather than run off the screen. */
    overflow-wrap: anywhere;
  }
  .drop_in__core {
    gap: 12px;
    padding: 0 16px;
    min-width: 150px;
    min-height: 56px;
  }
  .drop_in__core img {
    width: 54px;
  }
  .drop_in__banner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 40px;
    padding: 24px;
  }
  .drop_in__banner-btn {
    justify-content: center;
  }
}
@media screen and (max-width: 560px) {
  .drop_in {
    /* At phone widths the constellation collapses into unreadable chips. */
  }
  .drop_in__diagram {
    display: none;
  }
  .drop_in__body {
    gap: 0;
  }
  .drop_in__more-body {
    padding-left: 0;
  }
}