/* D4L page styles */
.d4l-hero { background: #14161C; }
.d4l-hero .hero-tagline {
  font-size: 1.05rem; color: rgba(255,255,255,0.65);
  max-width: 540px; margin-bottom: 1.75rem; line-height: 1.7;
}
.d4l-hero-img {
  width: 100%; max-width: 620px;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}
.app-section.dark.d4l-system { background: #14161C; }
.d4l-system .feature-card { background: #1B1E26; }

/* The architecture diagram — full-width feature, not a sidebar */
.d4l-diagram-wrap { display: flex; justify-content: center; margin: 3rem 0 1rem; }
.d4l-diagram { width: 100%; max-width: 780px; height: auto; }

/* Example queries */
.queries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.query-card {
  background: #1B1E26;
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid #C0392B;
  border-radius: 12px;
  padding: 1.5rem;
}
.query-card p.q {
  font-size: 1.02rem; font-weight: 600; line-height: 1.5;
  color: #fff; margin-bottom: 0.75rem;
}
.query-card p.a { font-size: 0.875rem; color: rgba(255,255,255,0.5); }

/* Light variant of the feature grid for the standards section */
.standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.standard-card {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  padding: 1.5rem;
}
.standard-card h3 {
  font-size: 0.95rem; font-weight: 700;
  color: #111; margin-bottom: 0.5rem;
}
.standard-card p { font-size: 0.875rem; color: #666; }

@media (max-width: 768px) {
  .d4l-diagram-wrap { margin: 2rem 0 0.5rem; }
}