/* Accounting presentation: scoped to homepage custom work and accounting hero. */
.ayai-home #custom-development {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-areas:
    "eyebrow image"
    "title image"
    "description image"
    "details image"
    "action image";
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 8px;
  align-items: center;
}
.ayai-home .custom-development-content { display: contents; }
.ayai-home #custom-development h2 { grid-area: eyebrow; margin: 0; }
.ayai-home #custom-development h3 { grid-area: title; margin: 0; }
.ayai-home #custom-development p { grid-area: description; margin: 4px 0; }
.ayai-home .custom-development-details { grid-area: details; }
.ayai-home .custom-development-image { grid-area: image; }
.ayai-home .custom-development-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-4);
  border: 1px solid var(--border);
}
.ayai-home #custom-development > .button {
  grid-area: action;
  justify-self: start;
  margin-top: 8px;
}
.ayai-accounting .hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  max-width: 1248px;
  margin-inline: auto;
  padding: 56px 24px 64px;
  text-align: right;
}
.ayai-accounting .accounting-hero-copy { min-width: 0; }
.ayai-accounting .hero-content h1 {
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 1.55;
  margin: 0 0 18px;
  color: #fff;
}
.ayai-accounting .hero-content h2 {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.9;
  margin: 0 0 24px;
  color: var(--on-dark-muted);
}
.ayai-accounting .product-hero-image { margin: 0; }
.ayai-accounting .product-hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
@media (max-width: 768px) {
  .ayai-home #custom-development {
    grid-template-columns: minmax(0, 1fr) 116px;
    grid-template-areas:
      "eyebrow image"
      "title image"
      "description description"
      "details details"
      "action action";
    column-gap: 16px;
    row-gap: 12px;
  }
  .ayai-home #custom-development > .button { justify-self: stretch; }
  .ayai-accounting .hero-content {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 20px 40px;
  }
  .ayai-accounting .hero-content h1 { font-size: clamp(1.65rem, 5.5vw, 2.2rem); }
  .ayai-accounting .hero-content h2 { margin-bottom: 20px; }
  .ayai-accounting .product-hero-image {
    width: min(100%, 340px);
    justify-self: center;
  }
}