/* AI Deployment Studio — green theme overrides on top of jumpstart.css */

:root {
  --studio-green: #3d7827;
  --studio-green-deep: #2f5e1d;
  --studio-green-tint: #d9eccf;
}

/* Hero badge — green tinted */
.badge--green {
  background: var(--studio-green-tint);
  color: var(--studio-green);
  border-color: rgba(61,120,39,0.25);
}

/* Eyebrows in green */
.eyebrow--green { color: var(--studio-green); }

/* Numbered rail — active node green */
.walk__num span { color: var(--studio-green); }
.walk__num--muted span { color: #8f8f91; }

/* Scope panel — green frame */
.scopes--green .scopes__panel { background: var(--studio-green); }
.scopes--green .scope-card__pill {
  background: var(--studio-green-tint);
  color: var(--studio-green);
}

.scopes__link--green { color: var(--studio-green); }

/* HOW IT WORKS */
.how { background: #fdfcf8; padding: 96px 80px; }
.how__head {
  max-width: 800px; margin: 0 auto 56px; text-align: center;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.how__split {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.how__art {
  height: 460px;
  border: 1.5px solid #000;
  border-radius: 12px;
  background: #f7f4e8;
  display: grid; place-items: center;
  padding: 32px;
}
.how__art img { width: auto; height: auto; max-width: 80%; max-height: 80%; display: block; }
.how__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 36px;
}
.how__list li { display: flex; flex-direction: column; gap: 6px; }
.how__num {
  font: 500 13px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--studio-green);
  margin-bottom: 6px;
}
.how__list h3 {
  font: 500 24px/1.25 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.01em; margin: 0; color: #000;
}
.how__list p {
  margin: 0; font: 400 16px/1.55 "Neue Montreal", system-ui, sans-serif;
  color: #656567; max-width: 48ch;
}

/* PROVED panel — green */
.proved--green .proved__panel { background: var(--studio-green); }

/* CTA primary in green */
.btn--green { background: var(--studio-green); border-color: var(--studio-green); color: #fff; }
.btn--green:hover { background: var(--studio-green-deep); border-color: var(--studio-green-deep); }

/* FAQ triangle in green */
.js-faq__list--green .js-faq__tri {
  border-left-color: var(--studio-green);
}

/* Engagement link in green */
.engagement__link { color: var(--studio-green); }

/* Closer eyebrow & lead */
.closer .eyebrow--green { color: var(--studio-green); }

/* ============================================================
   RESPONSIVE — augments the responsive rules in jumpstart.css,
   covers studio-only sections (.how) at the same breakpoints.
   ============================================================ */
@media (max-width: 1024px) {
  .how { padding-left: 48px; padding-right: 48px; }
  .how__split { grid-template-columns: 1fr; gap: 32px; }
  .how__art { height: 360px; }
}
@media (max-width: 700px) {
  .how { padding: 80px 24px; }
  .how__art { height: 280px; padding: 24px; }
  .how__list { gap: 28px; }
  .how__list h3 { font-size: 22px; }
  .how__list p { font-size: 15px; }
}
@media (max-width: 420px) {
  .how { padding: 64px 20px; }
  .how__art { height: 240px; padding: 18px; }
}