/* Applied AI teaser — Home and Works share the incumbent Home presentation.
   Page-specific copy stays in static HTML; fonts are loaded by each page.
   The old <=1100px overrides were superseded by Home's final orb rules. */
.applied-ai-teaser {
  --teaser-ink: var(--ink, #121314);
  --teaser-warm: var(--warm, #f9f8f1);
  --teaser-blue: var(--blue, #164cdf);
  --teaser-serif: var(--serif, DunbenSerif, Georgia, serif);
  --teaser-sans: var(--sans, DunbenSans, Helvetica, Arial, sans-serif);
  --teaser-muted: rgba(246, 241, 232, .7);
  --teaser-ease: var(--ease, cubic-bezier(.16, 1, .3, 1));
  --teaser-block-space: clamp(100px, 13vw, 190px);
  --teaser-inline-space: clamp(22px, 7vw, 100px);
  --teaser-gap: clamp(34px, 6vw, 100px);
  --teaser-title-size: clamp(44px, 4.9vw, 86px);
  --teaser-title-offset: 1.25rem;
  --teaser-copy-inset: clamp(1.5rem, 2.4vw, 2.5rem);
  --teaser-copy-size: 1.25rem;
  --teaser-copy-measure: 30rem;
  --teaser-button-gap: 2rem;
  --applied-ai-orb-size: clamp(17.5rem, 35vw, 34rem);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(18rem, .75fr);
  align-items: center;
  gap: var(--teaser-gap);
  padding: var(--teaser-block-space) var(--teaser-inline-space);
  overflow: hidden;
  background: var(--teaser-ink);
  color: var(--teaser-warm);
  font-family: var(--teaser-sans);
  font-size: 1rem;
  line-height: 1.5;
  /* Keep Home's font rendering when Works supplies its own body smoothing. */
  -webkit-font-smoothing: auto;
}

.applied-ai-teaser__orb {
  display: grid;
  place-items: center;
  width: min(100%, var(--applied-ai-orb-size));
  aspect-ratio: 1;
  margin-inline: auto;
  isolation: isolate;
}

.applied-ai-teaser__orb .thinking-orb {
  display: block;
  width: 100%;
  height: 100%;
}

.applied-ai-teaser__content { min-width: 0; }
.applied-ai-teaser .section-intro { max-width: 1100px; margin: 0; }
.applied-ai-teaser .section-intro h2 {
  margin: var(--teaser-title-offset) 0 0;
  font-family: var(--teaser-serif);
  font-size: var(--teaser-title-size);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.03em;
}
.applied-ai-teaser h2 em { font-style: normal; color: var(--teaser-blue); }
.applied-ai-teaser__copy { padding: var(--teaser-copy-inset) 0 0; }
.applied-ai-teaser__copy p {
  max-width: var(--teaser-copy-measure);
  margin: 0;
  color: var(--teaser-muted);
  font-size: var(--teaser-copy-size);
  line-height: 1.55;
}
.applied-ai-teaser__copy .button { margin-top: var(--teaser-button-gap); }
/* Match Works' anchor-reset specificity; the shared module still owns hover. */
.applied-ai-teaser a:where(.button--on-dark) { color: #fff; }

@media (max-width: 767px) {
  .applied-ai-teaser {
    --teaser-block-space: 5.5rem;
    --teaser-inline-space: 1.25rem;
    --teaser-gap: clamp(2.5rem, 10vw, 4rem);
    --teaser-title-size: clamp(2rem, 9.4vw, 3.625rem);
    --teaser-copy-inset: clamp(1.5rem, 7vw, 2.25rem);
    --applied-ai-orb-size: min(86vw, 23rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .applied-ai-teaser__orb { align-self: center; }
}
