@font-face {
  font-family: Petale;
  font-style: italic;
  font-weight: 100;
  font-display: block;
  src: url(../assets/fonts/Petale-Thin-Italic.otf) format('opentype');
}

.web-hero .hero-content {
  min-width: 0;
  padding-block: clamp(54px, 7vw, 98px);
}

.web-hero .hero-title {
  margin-top: 0;
  font-size: clamp(37px, 4.35vw, 67px);
  line-height: 1;
}

.demo-hero-callout {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  container-type: inline-size;
  padding: clamp(38px, 5vw, 70px) 0 12px;
}

.demo-hero-orbits {
  position: absolute;
  z-index: -1;
  inset: -6% -3% 15%;
  pointer-events: none;
  mask-image:
    linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent),
    linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
  background:
    radial-gradient(circle at 22% 69%, #ffc4d8 0 1px, #ff6a9e7a 2px, transparent 6px),
    radial-gradient(circle at 73% 13%, #f99cbf 0 1px, #f2719f60 2px, transparent 5px),
    radial-gradient(circle at 91% 38%, #ffc7dd 0 1px, #ff6a9e83 2px, transparent 7px),
    radial-gradient(ellipse at 61% 52%, #c9336b38, transparent 64%),
    radial-gradient(ellipse at 77% 43%, #f26c9f21, transparent 44%);
}

.demo-hero-orbits::before,
.demo-hero-orbits::after {
  position: absolute;
  content: '';
  border: 1px solid;
  border-radius: 50%;
}

.demo-hero-orbits::before {
  inset: 22% 3% 16% 4%;
  border-color: #fa9abb68 #fb8bb75b #e764912b #e7649122;
  box-shadow: 0 -4px 24px #f6548e18, inset 0 3px 24px #f6548e15;
  transform: rotate(-24deg);
}

.demo-hero-orbits::after {
  inset: 28% 9% 22% 10%;
  border-color: #df749e3d #df749e52 #df749e28 #df749e14;
  transform: rotate(-12deg);
}

.demo-hero-lettering {
  color: #ffd7e4;
  font: italic 100 clamp(34px, 4.85vw, 78px)/.96 Petale, Georgia, serif;
  font-size: min(clamp(34px, 4.85vw, 78px), 9.7cqi);
  letter-spacing: -.048em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 25px #e3467870;
  transform: rotate(-22deg);
}

.demo-hero-lettering span {
  display: block;
  margin-top: .08em;
  padding-left: 29%;
}

.demo-hero-arrow {
  width: clamp(108px, 13vw, 179px);
  margin-top: clamp(7px, 1.3vw, 20px);
  margin-left: 30%;
  color: #fba5bd;
  border-radius: 24px;
  transition: color .18s ease, transform .18s ease;
}

.demo-hero-arrow:hover,
.demo-hero-arrow:focus-visible {
  color: #ffe1eb;
}

.demo-hero-arrow svg {
  display: block;
  width: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px #ec527660);
}

@media (prefers-reduced-motion: no-preference) {
  .demo-hero-arrow:hover {
    transform: translateY(4px);
  }
}

.capabilities {
  padding-block: clamp(40px, 5.7vw, 76px) 12px;
}

.capabilities .section-head {
  margin-bottom: 17px;
}

.capabilities .section-title {
  font-size: clamp(28px, 3.4vw, 45px);
}

.capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 6vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 4px clamp(11px, 1.5vw, 19px);
  padding: clamp(12px, 1.55vw, 20px) 0;
  border-bottom: 1px solid #432637;
}

.capability-icon {
  grid-row: span 2;
  align-self: start;
  width: 25px;
  height: 25px;
  color: #fa93b0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capability-list h3 {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.28;
}

.capability-list p {
  color: var(--muted);
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.52;
}

@media (max-width: 760px) {
  .web-hero .hero-content {
    padding-block: 42px 0;
  }

  .web-hero .hero-title {
    font-size: clamp(37px, 9.1vw, 61px);
  }

  .demo-hero-callout {
    padding: clamp(38px, 8vw, 62px) 0 24px;
  }

  .demo-hero-orbits {
    inset: 0 -1% 17%;
    opacity: .85;
  }

  .demo-hero-lettering {
    font-size: clamp(23px, 7.1vw, 57px);
    font-size: clamp(23px, 9.1cqi, 57px);
    transform: rotate(-18deg);
  }

  .demo-hero-arrow {
    margin-top: 5px;
  }
}

@media (max-width: 590px) {
  .capability-list {
    grid-template-columns: minmax(0, 1fr);
  }
}