/*
  Agenz Foundation V102
  Final light editorial pass for Academy, AI Tools, and Insights.
  Photography may contain dark pixels; interface surfaces remain white,
  pale blue, or translucent blue with explicit readable text colors.
*/

:root {
  --v102-ink: #101b38;
  --v102-copy: #52617c;
  --v102-muted: #77849a;
  --v102-blue: #1764d8;
  --v102-blue-deep: #0c4ba3;
  --v102-blue-soft: #eaf3ff;
  --v102-blue-pale: #f6f9ff;
  --v102-paper: #ffffff;
  --v102-line: rgba(22, 82, 167, .14);
  --v102-line-strong: rgba(23, 100, 216, .24);
  --v102-shadow: 0 24px 70px rgba(39, 82, 148, .12), 0 3px 12px rgba(39, 82, 148, .05);
  --v102-shadow-soft: 0 14px 40px rgba(39, 82, 148, .09), 0 2px 7px rgba(39, 82, 148, .04);
}

html body:is(.academy-page, .design-ai-page, .insights-page),
html body:is(.academy-page, .design-ai-page, .insights-page) :where(button, input, select, textarea) {
  font-family: Manrope, Inter, Arial, sans-serif !important;
}

html body:is(.academy-page, .design-ai-page, .insights-page) :where(
  .eyebrow,
  .tag,
  .article-meta,
  .course-label,
  .academy-path-copy > span,
  .analysis-state
) {
  color: var(--v102-blue-deep) !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:is(.academy-page, .design-ai-page, .insights-page) :where(
  .academy-heading,
  .section-heading,
  .insights-index-section
) :where(h1, h2, h3, strong) {
  color: var(--v102-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:is(.academy-page, .design-ai-page, .insights-page) :where(
  .academy-heading,
  .section-heading,
  .insights-index-section
) :where(p, li, small) {
  color: var(--v102-copy) !important;
}

/* Academy — compact, bright learning rail */
html body.agenz-unified-v96.academy-page main > #paths.academy-section.academy-soft {
  color: var(--v102-ink) !important;
  border-color: var(--v102-line) !important;
  background-color: #f2f7ff !important;
  background-image:
    radial-gradient(circle at 90% 12%, rgba(70, 144, 240, .10), transparent 27rem),
    linear-gradient(180deg, #f8fbff, #eef5ff) !important;
}

html body.academy-page .academy-visual-paths {
  gap: 18px !important;
  padding: 8px 3px 34px !important;
}

html body.academy-page .academy-visual-paths > .academy-path-card {
  flex: 0 0 clamp(300px, 29vw, 370px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  color: var(--v102-ink) !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--v102-shadow-soft) !important;
  backdrop-filter: blur(14px) !important;
  transform: translateZ(0);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

html body.academy-page .academy-visual-paths > .academy-path-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--v102-line-strong) !important;
  box-shadow: var(--v102-shadow) !important;
}

html body.academy-page .academy-path-media {
  height: 300px !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--v102-line) !important;
  background: var(--v102-blue-soft) !important;
}

html body.academy-page .academy-path-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s ease !important;
}

html body.academy-page .academy-path-card:hover .academy-path-media img {
  transform: scale(1.025) !important;
}

html body.academy-page .academy-path-media > span {
  top: 16px !important;
  left: 16px !important;
  padding: 8px 11px !important;
  color: var(--v102-blue-deep) !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 9px 24px rgba(26, 65, 125, .11) !important;
  backdrop-filter: blur(12px) !important;
  font: 800 .57rem/1 Manrope, sans-serif !important;
  letter-spacing: .075em !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page .academy-path-copy {
  min-height: 245px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  color: var(--v102-ink) !important;
  background: transparent !important;
}

html body.academy-page .academy-path-copy > span {
  width: fit-content !important;
  padding: 7px 10px !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 999px !important;
  background: var(--v102-blue-pale) !important;
  font-size: .54rem !important;
}

html body.academy-page .academy-path-card.is-live .academy-path-copy > span {
  color: #fff !important;
  border-color: var(--v102-blue) !important;
  background: var(--v102-blue) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page .academy-path-copy h3 {
  margin: 20px 0 10px !important;
  color: var(--v102-ink) !important;
  font: 800 clamp(1.35rem, 2vw, 1.75rem)/1.15 Manrope, sans-serif !important;
  letter-spacing: -.04em !important;
}

html body.academy-page .academy-path-copy p {
  margin: 0 0 22px !important;
  color: var(--v102-copy) !important;
  font-size: .82rem !important;
  line-height: 1.7 !important;
}

html body.academy-page .academy-path-copy :where(a, small) {
  margin-top: auto !important;
  color: var(--v102-blue-deep) !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: .035em !important;
}

html body.academy-page .academy-visual-paths + *,
html body.academy-page #paths .showcase-rail-controls {
  color: var(--v102-copy) !important;
}

html body.academy-page #paths .showcase-rail-controls {
  padding: 12px 14px !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: var(--v102-shadow-soft) !important;
  backdrop-filter: blur(12px) !important;
}

html body.academy-page #paths .showcase-rail-controls button {
  color: var(--v102-blue-deep) !important;
  border: 1px solid var(--v102-line-strong) !important;
  background: #fff !important;
}

/* Academy — responsible practice is a pale-blue trust panel, never a dark block */
html body.agenz-unified-v96.academy-page main > #responsible-practice.academy-section.academy-dark {
  color: var(--v102-ink) !important;
  border-block: 1px solid var(--v102-line) !important;
  background-color: #eef5ff !important;
  background-image:
    radial-gradient(circle at 86% 18%, rgba(51, 126, 226, .13), transparent 28rem),
    linear-gradient(135deg, #f8fbff 0%, #eaf3ff 100%) !important;
}

html body.academy-page .academy-section.academy-dark::before {
  opacity: .42 !important;
  background:
    linear-gradient(rgba(23, 100, 216, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 100, 216, .055) 1px, transparent 1px) !important;
  background-size: 54px 54px !important;
}

html body.academy-page .academy-dark .academy-split {
  position: relative !important;
  z-index: 1 !important;
  align-items: center !important;
  gap: clamp(36px, 6vw, 84px) !important;
}

html body.academy-page .academy-dark :where(h2, h3, strong, b, span, a) {
  color: var(--v102-ink) !important;
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page .academy-dark h2 span,
html body.academy-page .academy-dark .eyebrow {
  color: var(--v102-blue-deep) !important;
}

html body.academy-page .academy-dark p {
  color: var(--v102-copy) !important;
}

html body.academy-page .academy-dark .academy-outline.light {
  color: var(--v102-blue-deep) !important;
  border-color: var(--v102-line-strong) !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 9px 25px rgba(36, 78, 143, .08) !important;
}

html body.academy-page .academy-dark .academy-outline.light:hover {
  color: #fff !important;
  background: var(--v102-blue) !important;
}

html body.academy-page .responsibility-list {
  padding: 10px !important;
  overflow: hidden !important;
  color: var(--v102-ink) !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow: var(--v102-shadow) !important;
  backdrop-filter: blur(18px) !important;
}

html body.academy-page .responsibility-list span {
  min-height: 62px !important;
  padding: 14px 16px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  color: var(--v102-ink) !important;
  border-bottom: 1px solid var(--v102-line) !important;
  background: transparent !important;
  font-size: .8rem !important;
  line-height: 1.5 !important;
}

html body.academy-page .responsibility-list span:last-child {
  border-bottom: 0 !important;
}

html body.academy-page .responsibility-list b {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--v102-blue-deep) !important;
  border: 1px solid var(--v102-line-strong) !important;
  border-radius: 11px !important;
  background: var(--v102-blue-soft) !important;
  font-size: .61rem !important;
}

/* AI Tools — guided brief and analysis */
html body.agenz-unified-v96.design-ai-page main > #design-workspace.design-workspace-section {
  color: var(--v102-ink) !important;
  border-block: 1px solid var(--v102-line) !important;
  background-color: #f1f7ff !important;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(73, 145, 239, .09), transparent 25rem),
    linear-gradient(180deg, #f8fbff, #eef5ff) !important;
}

html body.design-ai-page .design-workspace {
  gap: 20px !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body.design-ai-page :where(.design-intake, .analysis-panel) {
  color: var(--v102-ink) !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--v102-shadow) !important;
  backdrop-filter: blur(16px) !important;
}

html body.design-ai-page .design-intake {
  padding: clamp(22px, 3vw, 34px) !important;
}

html body.design-ai-page .analysis-panel {
  min-height: 100% !important;
  padding: clamp(24px, 3.4vw, 40px) !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(64, 136, 232, .11), transparent 18rem),
    rgba(255, 255, 255, .9) !important;
}

html body.design-ai-page .analysis-panel::before {
  border-color: rgba(23, 100, 216, .13) !important;
  box-shadow: none !important;
}

html body.design-ai-page .upload-zone {
  min-height: 210px !important;
  overflow: hidden !important;
  color: var(--v102-ink) !important;
  border: 1px dashed rgba(23, 100, 216, .38) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(234, 243, 255, .9), rgba(255, 255, 255, .96)) !important;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .6) !important;
}

html body.design-ai-page .upload-zone:hover {
  border-color: var(--v102-blue) !important;
  background: linear-gradient(145deg, #e7f1ff, #fff) !important;
}

html body.design-ai-page .upload-zone input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
}

html body.design-ai-page .upload-icon {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--v102-blue-deep) !important;
  border: 1px solid var(--v102-line-strong) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 10px 25px rgba(36, 78, 143, .1) !important;
  font-size: 1.5rem !important;
}

html body.design-ai-page .upload-zone :where(strong, small),
html body.design-ai-page .design-intake label > span,
html body.design-ai-page .consent-row span,
html body.design-ai-page .analysis-panel :where(h3, p) {
  color: var(--v102-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.design-ai-page .upload-zone small,
html body.design-ai-page .consent-row span,
html body.design-ai-page .analysis-panel p {
  color: var(--v102-copy) !important;
}

html body.design-ai-page .design-intake :where(input:not([type="checkbox"]), select, textarea) {
  color: var(--v102-ink) !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 13px !important;
  background: #f8faff !important;
  box-shadow: inset 0 1px 2px rgba(39, 82, 148, .03) !important;
}

html body.design-ai-page .design-intake :where(input:not([type="checkbox"]), select, textarea):focus {
  border-color: var(--v102-blue) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 4px rgba(23, 100, 216, .1) !important;
}

html body.design-ai-page .consent-row {
  align-items: flex-start !important;
  gap: 11px !important;
  color: var(--v102-copy) !important;
}

html body.design-ai-page .consent-row input[type="checkbox"] {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 !important;
  accent-color: var(--v102-blue) !important;
}

html body.design-ai-page .analysis-state {
  width: fit-content !important;
  padding: 8px 11px !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .75) !important;
}

html body.design-ai-page .analysis-state i {
  background: var(--v102-blue) !important;
  box-shadow: 0 0 0 5px rgba(23, 100, 216, .1) !important;
}

html body.design-ai-page .scan-product {
  color: var(--v102-blue) !important;
  border-color: var(--v102-line-strong) !important;
  background: var(--v102-blue-soft) !important;
  box-shadow: 0 18px 42px rgba(39, 82, 148, .11) !important;
}

html body.design-ai-page .privacy-notice {
  color: var(--v102-copy) !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 16px !important;
  background: rgba(234, 243, 255, .72) !important;
}

html body.design-ai-page .privacy-notice :where(strong, code, a) {
  color: var(--v102-blue-deep) !important;
}

/* The recommended package keeps emphasis through blue depth, not a dark card. */
html body.design-ai-page .package-grid article.featured {
  color: var(--v102-ink) !important;
  border: 1px solid var(--v102-line-strong) !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(64, 136, 232, .13), transparent 15rem),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(226, 239, 255, .96)) !important;
  box-shadow: var(--v102-shadow) !important;
}

html body.design-ai-page .package-grid article.featured :where(h3, strong) {
  color: var(--v102-ink) !important;
}

html body.design-ai-page .package-grid article.featured :where(p, li) {
  color: var(--v102-copy) !important;
  border-color: var(--v102-line) !important;
}

html body.design-ai-page .package-grid article.featured :where(span, a) {
  color: var(--v102-blue-deep) !important;
}

/* AI Tools — connected workflow cards */
html body.design-ai-page .generation-flow {
  color: var(--v102-ink) !important;
  background: #fff !important;
}

html body.design-ai-page .generation-flow .flow-cards {
  gap: 16px !important;
  background: transparent !important;
}

html body.design-ai-page .generation-flow .flow-cards article {
  min-height: 250px !important;
  padding: 22px !important;
  color: var(--v102-ink) !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(237, 245, 255, .86)) !important;
  box-shadow: var(--v102-shadow-soft) !important;
}

html body.design-ai-page .generation-flow .flow-cards span {
  color: var(--v102-blue-deep) !important;
  border-color: var(--v102-line-strong) !important;
  background: rgba(255, 255, 255, .84) !important;
}

html body.design-ai-page .generation-flow .flow-cards h3 {
  color: var(--v102-ink) !important;
}

html body.design-ai-page .generation-flow .flow-cards p {
  color: var(--v102-copy) !important;
}

/* Insights — bright editorial cards with blue transparent depth */
html body.agenz-unified-v96.insights-page main > #latest-stories.insights-index-section {
  color: var(--v102-ink) !important;
  border-color: var(--v102-line) !important;
  background-color: #f6f9ff !important;
  background-image:
    radial-gradient(circle at 88% 8%, rgba(64, 136, 232, .09), transparent 28rem),
    linear-gradient(180deg, #fff, #f5f9ff) !important;
}

html body.insights-page .insights-discovery {
  color: var(--v102-ink) !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: var(--v102-shadow-soft) !important;
  backdrop-filter: blur(14px) !important;
}

html body.insights-page .article-grid {
  gap: 18px !important;
  padding: 8px 3px 34px !important;
}

html body.insights-page .article-grid > .article-card {
  flex: 0 0 clamp(300px, 31vw, 390px) !important;
  min-height: 520px !important;
  overflow: hidden !important;
  color: var(--v102-ink) !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: var(--v102-shadow-soft) !important;
  transform: translateZ(0);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

html body.insights-page .article-grid > .article-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--v102-line-strong) !important;
  box-shadow: var(--v102-shadow) !important;
}

html body.insights-page .article-thumb {
  height: 245px !important;
  border-bottom: 1px solid var(--v102-line) !important;
  background: var(--v102-blue-soft) !important;
}

html body.insights-page .article-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body.insights-page .article-card-content {
  min-height: 275px !important;
  padding: 23px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  color: var(--v102-ink) !important;
  background: transparent !important;
}

html body.insights-page .article-card .tag {
  width: fit-content !important;
  padding: 7px 10px !important;
  border: 1px solid var(--v102-line) !important;
  border-radius: 999px !important;
  background: var(--v102-blue-pale) !important;
  font-size: .53rem !important;
}

html body.insights-page .article-meta {
  width: 100% !important;
  margin: 14px 0 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: var(--v102-muted) !important;
  font-size: .54rem !important;
}

html body.insights-page .article-card-content h2 {
  margin: 18px 0 11px !important;
  color: var(--v102-ink) !important;
  font: 800 clamp(1.3rem, 2vw, 1.65rem)/1.2 Manrope, sans-serif !important;
  letter-spacing: -.04em !important;
}

html body.insights-page .article-card-content p {
  margin: 0 0 22px !important;
  color: var(--v102-copy) !important;
  font-size: .79rem !important;
  line-height: 1.7 !important;
}

html body.insights-page .article-card-content a {
  margin-top: auto !important;
  color: var(--v102-blue-deep) !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
}

html body.insights-page .article-body.is-open {
  color: var(--v102-ink) !important;
  border-color: var(--v102-line) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: var(--v102-shadow) !important;
}

html body.insights-page .article-body.is-open :where(h2, h3, h4, strong, b) {
  color: var(--v102-ink) !important;
}

html body.insights-page .article-body.is-open :where(p, li, figcaption) {
  color: var(--v102-copy) !important;
}

@media (max-width: 760px) {
  html body.academy-page .academy-visual-paths > .academy-path-card,
  html body.insights-page .article-grid > .article-card {
    flex-basis: min(86vw, 350px) !important;
  }

  html body.academy-page .academy-path-media,
  html body.insights-page .article-thumb {
    height: 238px !important;
  }

  html body.academy-page .academy-path-copy {
    min-height: 235px !important;
    padding: 21px !important;
  }

  html body.academy-page .academy-dark .academy-split {
    gap: 32px !important;
  }

  html body.design-ai-page .design-workspace {
    gap: 14px !important;
  }

  html body.design-ai-page :where(.design-intake, .analysis-panel) {
    border-radius: 20px !important;
  }

  html body.design-ai-page .generation-flow .flow-cards article {
    min-height: 0 !important;
  }

  html body.insights-page .article-card-content {
    min-height: 280px !important;
    padding: 21px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.academy-page .academy-path-card,
  html body.insights-page .article-card {
    transition: none !important;
  }
}