/* AI + VFX: MiQ grammar. Small label, short headline with a period, short body,
   then bullets or a pull quote. */

.ai-head__title { max-width: 13ch; }

.ai-points {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) solid var(--color-line);
}
.ai-points li {
  padding: var(--space-5) 0;
  border-bottom: var(--border-hairline) solid var(--color-line);
}
.ai-points b { display: block; margin-bottom: var(--space-2); font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-leading); font-weight: 600; }
@media (min-width: 700px) {
  .ai-points { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}

/* Navy band for panel B. */
.ai-band {
  margin-top: var(--space-section);
  padding-block: var(--space-section);
}
.ai-quote {
  position: relative;
  margin: 0;
  padding-left: clamp(var(--space-5), 3vw, var(--space-7));
  border-left: var(--border-strong) solid var(--color-accent);
}
.ai-quote p {
  font-size: var(--type-heading-2-size);
  font-stretch: 112.5%;
  font-weight: 700;
  letter-spacing: -0.008em;
  line-height: 1.12;
  max-width: 24ch;
  text-wrap: balance;
}

.ai-uses {
  display: grid;
  gap: var(--space-grid-gap);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 680px) { .ai-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ai-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ai-use {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-7);
  border: var(--border-hairline) solid var(--color-line);
  border-radius: var(--radius-panel);
  background: rgb(var(--gist-navy-rgb) / 0.35);
  transition: border-color var(--hover) var(--ease-out), background-color var(--hover) var(--ease-out);
}
.ai-use:hover { border-color: rgb(var(--gist-cream-rgb) / 0.3); background: rgb(var(--gist-navy-rgb) / 0.6); }

.ai-rules {
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) solid var(--color-line);
}
.ai-rules li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: var(--border-hairline) solid var(--color-line);
  font-size: var(--type-heading-4-size);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}
.ai-rules svg { width: 18px; height: 18px; color: var(--color-text-muted); translate: 0 3px; }
.ai-close { display: grid; gap: var(--space-5); justify-items: start; margin-top: var(--space-7); }