@layer components{.services-hero {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 55%);
      opacity: .65;
    }

    & > .container {
      position: relative;
      z-index: 1;
    }
  }

  .service-grid .service-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }

  .service-card h3,
  .price-card h3 {
    word-break: break-word;
    hyphens: auto;
  }

  .service-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: .3rem;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);

    & img {
      width: 32px;
      height: 32px;
    }
  }

  .service-icon--teal { background: color-mix(in srgb, var(--brand) 12%, var(--bg-elev)); }
  .service-icon--green { background: color-mix(in srgb, #22c55e 12%, var(--bg-elev)); }
  .service-icon--rose { background: color-mix(in srgb, #f472b6 16%, var(--bg-elev)); }

  .pricing {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: stretch;
  }

  .price {
    font-weight: 800;
    font-size: var(--step-2);
    margin: .25rem 0 .7rem;

    & .price-from {
      font-weight: 650;
      font-size: var(--step--1);
      color: var(--muted);
      margin-right: .35rem;
    }
  }

  .fineprint {
    margin-top: 1rem;
    color: var(--muted);
    font-size: var(--step--1);
  }

  .testimonials {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .quote {
    & blockquote {
      margin: 0 0 .8rem 0;
      font-size: var(--step-0);
      color: color-mix(in srgb, var(--text) 92%, var(--muted));
    }

    & figcaption {
      color: var(--muted);
      font-size: var(--step--1);
    }
  }

  .cta-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    @media (min-width: 48rem) {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
}