/* Original illustrations, sized independently from the surrounding copy. */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.hero-copy h1 { font-size: clamp(48px, 4.5vw, 80px); }
.hero-copy .eyebrow { font-size: 11px; letter-spacing: .11em; }
.hero-copy .hero-lead { font-size: 17px; }
.hero-copy .desktop-break { display: none; }
.hero-copy .hero-lead { max-width: 520px; }
.hero-illustration { margin: -5px -20px 0 -10px; min-width: 0; position: relative; }
.hero-illustration img { display: block; width: 100%; height: auto; max-height: 510px; object-fit: contain; filter: drop-shadow(0 24px 24px #7352ae15); }
.workflow-illustration {
  position: relative;
  margin: 0 0 32px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid #e9e1f4;
  background: #f5f3fb;
}
.workflow-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 1.85; object-fit: cover; object-position: center; }
.workflow-illustration figcaption { display: flex; gap: 24px; align-items: center; padding: 17px 28px; background: #ffffffc9; border-top: 1px solid #e9e1f4; font-size: 12px; font-weight: 650; color: #8d65af; }
.illustration-caption-line { flex: 1; height: 1px; background: linear-gradient(90deg,#ed6dad44,#925ed066,#2365df44); }
.feature-main { overflow: hidden; }
.brand-illustration { margin: -25px -25px 15px; height: 205px; position: relative; }
.brand-illustration img { display: block; width: 100%; height: 100%; object-fit: contain; }
.features-grid { align-items: stretch; }
@media (min-width: 1650px) {
  .hero-copy .eyebrow { font-size: 13px; }
  .hero-copy .hero-lead { font-size: 20px; }
  .hero-illustration { margin: -25px -25px -5px -10px; }
  .brand-illustration { height: 250px; }
}
@media (max-width: 1200px) and (min-width: 1001px) {
  .hero-copy h1 { font-size: 51px; }
  .hero-copy .eyebrow { font-size: 9px; }
  .hero-copy .hero-lead { font-size: 16px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { font-size: 12px; padding: 12px 15px; }
  .hero-illustration { margin-right: -12px; }
}
@media (max-width: 1000px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-copy h1 { font-size: clamp(52px, 7.5vw, 76px); }
  .hero-copy .eyebrow { font-size: 12px; }
  .hero-illustration { width: min(80%, 420px); margin: 15px auto -10px; }
  .hero-copy .hero-lead { max-width: 660px; font-size: 18px; }
  .brand-illustration { height: 225px; }
}
@media (max-width: 540px) {
  .hero-copy h1 { font-size: clamp(40px, 11.8vw, 63px); }
  .hero-copy .eyebrow { font-size: 10px; letter-spacing: .09em; }
  .hero-copy .hero-lead { font-size: 16px; }
  .hero-illustration { width: min(100%, 340px); margin: 18px auto -7px; }
  .hero .gradient-banner { margin-top: 18px; }
  .workflow-illustration { border-radius: 22px; margin-bottom: 25px; }
  .workflow-illustration img { height: auto; aspect-ratio: 1.5; object-fit: contain; }
  .workflow-illustration figcaption { padding: 14px 16px; gap: 12px; font-size: 10px; }
  .brand-illustration { height: 250px; margin: -19px -20px 18px; }
}
@media (max-width: 350px) {
  .hero-copy .eyebrow { font-size: 9px; }
  .hero-illustration { width: 100%; }
  .workflow-illustration figcaption { font-size: 9px; gap: 8px; }
}