/* AI-specific opening style. Shared order controls use build-page.css. */
.bp-ai-opening {
  background: linear-gradient(180deg, #f0f1ff, #f7faff 480px, #f9fbff);
}
.bp-ai-opening .bp-hero {
  background: radial-gradient(ellipse at 83% 50%, #d3c8ff78, transparent 65%);
}
.bp-ai-opening .bp-hero h1 {
  font-size: clamp(26px, 3vw, 35px);
}
.bp-ai-opening .bp-hero > div > p {
  max-width: 600px;
  line-height: 1.9;
}
.bp-ai-opening .bp-steps li:first-child b {
  background: linear-gradient(135deg, #729aff, #8661ef);
}
.bp-ai-explainer {
  padding: 23px 17px;
  border: 1px solid #e6e5ff;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0f5ff, #f4efff);
  margin-bottom: 17px;
}
.bp-ai-explainer > b {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 15px;
  border-radius: 14px;
  color: #fff;
  font-size: 24px;
  background: linear-gradient(135deg, #7faaff, #9275ee);
  box-shadow: 0 7px 17px #a9a1e832;
}
.bp-ai-explainer strong {
  display: block;
  font-size: 15px;
  color: #596390;
  line-height: 1.8;
}
.bp-ai-explainer p {
  color: #8c97b3;
  font-size: 12px;
  line-height: 1.9;
  margin: 10px 0 0;
}
@media (max-width: 550px) {
  .bp-ai-opening .bp-hero h1 {
    max-width: 330px;
    font-size: 26px;
  }
  .bp-ai-opening .bp-steps {
    gap: 8px;
  }
  .bp-ai-explainer {
    padding: 19px 16px;
  }
}