/*
  Agenz Foundation V105
  Precision fixes for the Portfolio outcome panel, Academy learning/pricing/
  responsibility/CTA sections, and Design Intelligence output packages.
*/

:root {
  --v105-ink: #101b38;
  --v105-copy: #52617c;
  --v105-blue: #1764d8;
  --v105-blue-deep: #0c4ba3;
  --v105-blue-soft: #eaf3ff;
  --v105-blue-pale: #f7faff;
  --v105-paper: rgba(255, 255, 255, .94);
  --v105-line: rgba(23, 100, 216, .16);
  --v105-line-strong: rgba(23, 100, 216, .28);
  --v105-shadow: 0 24px 70px rgba(39, 82, 148, .13), 0 4px 14px rgba(39, 82, 148, .05);
  --v105-shadow-soft: 0 14px 38px rgba(39, 82, 148, .1), 0 2px 8px rgba(39, 82, 148, .04);
}

/* Portfolio — reviewable outcomes use a bright, readable glass panel. */
html body.portfolio-page .ther-case-outcome {
  color: var(--v105-ink) !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(64, 136, 232, .15), transparent 20rem),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(232, 242, 255, .92)) !important;
  box-shadow: var(--v105-shadow) !important;
  backdrop-filter: blur(18px) !important;
}

html body.portfolio-page .ther-case-outcome .eyebrow {
  color: var(--v105-blue-deep) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.portfolio-page .ther-case-outcome h3 {
  color: var(--v105-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.portfolio-page .ther-case-outcome li {
  min-height: 128px !important;
  padding: 18px 15px !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 10px 26px rgba(39, 82, 148, .07) !important;
}

html body.portfolio-page .ther-case-outcome li strong {
  color: var(--v105-blue) !important;
}

html body.portfolio-page .ther-case-outcome li span,
html body.portfolio-page .ther-case-outcome > p {
  color: var(--v105-copy) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.portfolio-page .ther-case-outcome > a.button-primary {
  min-height: 50px !important;
  color: #fff !important;
  border: 1px solid var(--v105-blue) !important;
  border-radius: 12px !important;
  background: var(--v105-blue) !important;
  box-shadow: 0 14px 30px rgba(23, 100, 216, .2) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Academy — remove legacy dark/pill treatment from the learning carousel. */
html body.academy-page #paths {
  color: var(--v105-ink) !important;
  background:
    radial-gradient(circle at 90% 8%, rgba(74, 145, 239, .1), transparent 25rem),
    linear-gradient(180deg, #fbfdff, #eef5ff) !important;
}

html body.academy-page #paths .showcase-rail-controls {
  margin: 28px 0 18px !important;
  padding: 15px 16px !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: var(--v105-shadow-soft) !important;
  backdrop-filter: blur(14px) !important;
}

html body.academy-page #paths .showcase-rail-controls > span {
  color: var(--v105-blue-deep) !important;
  font: 800 .62rem/1.45 Manrope, Inter, Arial, sans-serif !important;
  letter-spacing: .07em !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page #paths .showcase-rail-controls button {
  width: 44px !important;
  height: 44px !important;
  color: var(--v105-blue-deep) !important;
  border: 1px solid var(--v105-line-strong) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(39, 82, 148, .08) !important;
}

html body.academy-page #paths .academy-path-card {
  color: var(--v105-ink) !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 22px !important;
  background: var(--v105-paper) !important;
  box-shadow: var(--v105-shadow-soft) !important;
}

html body.academy-page #paths .academy-path-media {
  color: var(--v105-ink) !important;
  background: var(--v105-blue-soft) !important;
}

html body.academy-page #paths .academy-path-media > span,
html body.academy-page #paths .academy-path-copy > span {
  width: fit-content !important;
  max-width: calc(100% - 32px) !important;
  padding: 8px 10px !important;
  color: var(--v105-blue-deep) !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 8px 20px rgba(39, 82, 148, .08) !important;
  font-family: Manrope, Inter, Arial, sans-serif !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: currentColor !important;
}

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

html body.academy-page #paths .academy-path-copy {
  color: var(--v105-ink) !important;
  background: rgba(255, 255, 255, .98) !important;
}

html body.academy-page #paths .academy-path-copy :where(h3, p, small, a) {
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page #paths .academy-path-copy h3 {
  color: var(--v105-ink) !important;
}

html body.academy-page #paths .academy-path-copy p {
  color: var(--v105-copy) !important;
}

html body.academy-page #paths .academy-path-copy :where(a, small) {
  color: var(--v105-blue-deep) !important;
}

/* Academy pricing — keep Recommended inside its card with reserved space. */
html body.academy-page .academy-pricing {
  gap: 18px !important;
}

html body.academy-page .academy-pricing .price-card {
  padding: 30px 24px !important;
  color: var(--v105-ink) !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--v105-shadow-soft) !important;
}

html body.academy-page .academy-pricing .price-card.is-popular {
  padding-top: 72px !important;
  border-color: var(--v105-line-strong) !important;
  background:
    radial-gradient(circle at 90% 4%, rgba(63, 137, 234, .13), transparent 14rem),
    linear-gradient(145deg, #fff, #edf5ff) !important;
  box-shadow: var(--v105-shadow) !important;
  transform: translateY(-8px) !important;
}

html body.academy-page .academy-pricing .popular-tag {
  top: 22px !important;
  right: 22px !important;
  padding: 8px 10px !important;
  color: #fff !important;
  border: 1px solid var(--v105-blue) !important;
  border-radius: 10px !important;
  background: var(--v105-blue) !important;
  box-shadow: 0 10px 24px rgba(23, 100, 216, .2) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page .academy-pricing .price-card :where(h3, strong) {
  color: var(--v105-ink) !important;
}

html body.academy-page .academy-pricing .price-card :where(p, li) {
  color: var(--v105-copy) !important;
}

html body.academy-page .academy-pricing .price-card > span,
html body.academy-page .academy-pricing .price-card li::before {
  color: var(--v105-blue-deep) !important;
}

/* Responsible Practice — every text layer gets an explicit light-theme color. */
html body.academy-page #responsible-practice {
  color: var(--v105-ink) !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(64, 136, 232, .14), transparent 26rem),
    linear-gradient(135deg, #f9fcff, #e9f3ff) !important;
}

html body.academy-page #responsible-practice :where(h2, h3, strong, b) {
  color: var(--v105-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page #responsible-practice :where(.eyebrow, h2 span) {
  color: var(--v105-blue-deep) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page #responsible-practice p {
  color: var(--v105-copy) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page #responsible-practice .responsibility-list {
  border: 1px solid var(--v105-line) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: var(--v105-shadow) !important;
}

html body.academy-page #responsible-practice .responsibility-list span {
  color: var(--v105-ink) !important;
  border-color: var(--v105-line) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page #responsible-practice .responsibility-list b {
  color: var(--v105-blue-deep) !important;
  background: var(--v105-blue-soft) !important;
}

/* Academy closing CTA — contained, centered, and comfortably inset. */
html body.academy-page .academy-cta {
  width: min(1320px, calc(100% - 64px)) !important;
  margin: 72px auto 96px !important;
  padding: clamp(46px, 6vw, 78px) !important;
  color: var(--v105-ink) !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 90% 18%, rgba(64, 136, 232, .15), transparent 22rem),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(231, 242, 255, .9)) !important;
  box-shadow: var(--v105-shadow) !important;
}

html body.academy-page .academy-cta :where(h2, strong) {
  color: var(--v105-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page .academy-cta :where(.eyebrow, h2 span) {
  color: var(--v105-blue-deep) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.academy-page .academy-cta p:not(.eyebrow) {
  color: var(--v105-copy) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Design Intelligence — all three plans use bright transparent surfaces. */
html body.design-ai-page .package-section {
  color: var(--v105-ink) !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(64, 136, 232, .1), transparent 25rem),
    linear-gradient(180deg, #fbfdff, #f0f6ff) !important;
}

html body.design-ai-page .package-grid {
  gap: 20px !important;
  align-items: stretch !important;
}

html body.design-ai-page .package-grid article,
html body.design-ai-page .package-grid article.featured {
  min-height: 470px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  color: var(--v105-ink) !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 90% 5%, rgba(64, 136, 232, .1), transparent 14rem),
    rgba(255, 255, 255, .9) !important;
  box-shadow: var(--v105-shadow-soft) !important;
  backdrop-filter: blur(16px) !important;
  transform: none !important;
}

html body.design-ai-page .package-grid article.featured {
  border-color: var(--v105-line-strong) !important;
  background:
    radial-gradient(circle at 86% 8%, rgba(53, 126, 226, .16), transparent 15rem),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(227, 240, 255, .94)) !important;
  box-shadow: var(--v105-shadow) !important;
}

html body.design-ai-page .package-grid article :where(h3, strong) {
  color: var(--v105-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.design-ai-page .package-grid article :where(li, p) {
  color: var(--v105-copy) !important;
  border-color: var(--v105-line) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.design-ai-page .package-grid article > span {
  width: fit-content !important;
  padding: 7px 9px !important;
  color: var(--v105-blue-deep) !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 9px !important;
  background: var(--v105-blue-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.design-ai-page .package-grid article > a {
  width: fit-content !important;
  min-height: 46px !important;
  margin-top: auto !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--v105-blue-deep) !important;
  border: 1px solid var(--v105-line-strong) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 9px 22px rgba(39, 82, 148, .08) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.design-ai-page .package-grid article.featured > a {
  color: #fff !important;
  border-color: var(--v105-blue) !important;
  background: var(--v105-blue) !important;
}

@media (max-width: 1120px) {
  html body.academy-page .academy-pricing .price-card.is-popular {
    transform: none !important;
  }
}

@media (max-width: 760px) {
  html body.portfolio-page .ther-case-outcome {
    gap: 24px !important;
    border-radius: 22px !important;
  }

  html body.academy-page #paths .showcase-rail-controls {
    align-items: center !important;
    gap: 12px !important;
  }

  html body.academy-page #paths .showcase-rail-controls > span {
    max-width: calc(100% - 108px) !important;
    font-size: .54rem !important;
  }

  html body.academy-page .academy-cta {
    width: calc(100% - 32px) !important;
    margin: 48px auto 64px !important;
    padding: 34px 22px !important;
    border-radius: 22px !important;
  }

  html body.design-ai-page .package-grid article,
  html body.design-ai-page .package-grid article.featured {
    min-height: 430px !important;
    padding: 26px 22px !important;
  }
}