/* Article-scoped styles for /journal/google-ai-mode/.
   Everything else on the page is the Journal's own components.

   Two borrowed treatments, both already used on recent articles and copied
   rather than shared so no article can quietly restyle another:

     1. the dark stat pull-quote (as on the mobile speed and social articles);
     2. a numbered heading badge for "Three places to start", in the same
        language as .bw-takeaways li::before in journal.css. These are three
        short headings inside one section, so they take the badge alone rather
        than the full card used for the five steps in the dependency article —
        the page already carries three pull-quotes and shouldn't read as a
        wall of cards.

   The h3 rule is here because journal.css gives scroll-margin-top to h2 only,
   and the contents navigation links to these headings. */

.bw-prose h3[id] { scroll-margin-top: 100px; }

/* ---- stat pull-quote ------------------------------------------------------ */
.bw-prose blockquote.ai-pull {
  background: var(--bw-ink, #0C2A1C);
  border-left: 4px solid var(--bw-accent-mid, #7FC98B);
  border-radius: var(--bw-r-md, 18px);
  padding: 30px 32px; margin: 30px 0 28px;
}
.bw-prose blockquote.ai-pull p {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; letter-spacing: -0.015em;
  font-weight: 600; color: var(--bw-cream, #F2F6EE); margin: 0;
}
.bw-prose blockquote.ai-pull strong { color: var(--bw-accent-soft, #9FDCA9); font-weight: 800; }
.bw-prose blockquote.ai-pull .ai-pull__detail {
  display: block; margin-top: 12px;
  font-family: 'Karla', system-ui, sans-serif; font-size: 16px; font-weight: 400;
  line-height: 1.55; letter-spacing: 0; color: rgba(242, 246, 238, 0.82);
}
.bw-prose blockquote.ai-pull .ai-pull__src {
  display: block; margin-top: 10px;
  font-family: 'Karla', system-ui, sans-serif; font-size: 15px; font-weight: 500;
  letter-spacing: 0; color: rgba(242, 246, 238, 0.7);
}
/* .bw-prose a (0,1,1) would paint a link dark green on this dark ground */
.bw-prose blockquote.ai-pull a {
  color: var(--bw-white, #FFFFFF); font-weight: 700;
  border-bottom: 1.5px solid rgba(159, 220, 169, 0.6);
}
.bw-prose blockquote.ai-pull a:hover,
.bw-prose blockquote.ai-pull a:focus-visible {
  color: var(--bw-accent-soft, #9FDCA9); border-bottom-color: var(--bw-accent-soft, #9FDCA9);
}

/* ---- numbered headings ---------------------------------------------------- */
/* .bw-prose h3 (0,1,1) owns the size and margins; restated at (0,2,1). */
.bw-prose .ai-step h3 {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: center;
  margin: 34px 0 12px;
}
.ai-step__n {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1.5px solid var(--bw-accent, #3E8E4F); color: var(--bw-accent, #3E8E4F);
  font-family: 'Karla', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .04em;
}

@media (max-width: 560px) {
  .bw-prose blockquote.ai-pull { padding: 24px 20px; border-radius: var(--bw-r-sm, 12px); }
  .bw-prose blockquote.ai-pull p { font-size: 18px; }
  .bw-prose .ai-step h3 { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .ai-step__n { width: 38px; height: 38px; font-size: 13px; }
}

/* Closing CTA measure — the approved treatment from the two previous articles:
   in a stacked in-article card the component's 46ch leaves a third of the dark
   panel empty. Scoped by id; the component default is untouched elsewhere. */
#ai-mode-ready-form .pgform__lede { max-width: 64ch; }