/* Approved member covers: a scoped visual layer, without changing sales copy. */
:root {
  --cover-chatgpt: 0, 200, 221;
  --cover-claude: 217, 120, 93;
  --cover-agents: 238, 86, 142;
  --cover-notebook: 72, 133, 255;
  --cover-gemini: 158, 100, 255;
  --cover-images-chatgpt: 57, 204, 141;
}

#chatgpt-express, .hero-circuit__node--chatgpt { --course-accent: var(--cover-chatgpt); }
#claude-express, .hero-circuit__node--claude { --course-accent: var(--cover-claude); }
#agentes, .hero-circuit__node--agents { --course-accent: var(--cover-agents); }
#notebooklm, .hero-circuit__node--notebook { --course-accent: var(--cover-notebook); }
#imagens-ia { --course-accent: var(--cover-gemini); }

/* Keep the existing motion and geometry. Only the quiet light changes. */
.hero-circuit__node-card {
  border-color: rgba(var(--course-accent), .32);
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--course-accent), .14), transparent 78%), #0b0d13;
  box-shadow: 0 18px 36px -20px #000, 0 0 24px -12px rgba(var(--course-accent), .45), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-circuit__node--chatgpt img,
.hero-circuit__node--claude img { filter: brightness(0) invert(1); }
.hero-circuit__node-card > .course-mark-n8n { width: 40px; }
.course__brand-lockup--agents > .course-mark-n8n { width: 58px; height: 40px; object-fit: contain; }

.course .course__media--showcase {
  border-color: rgba(var(--course-accent), .24);
  background: radial-gradient(ellipse at 65% 32%, rgba(var(--course-accent), .17), transparent 65%), #080a10;
  box-shadow: 0 34px 90px -38px rgba(0,0,0,.95), 0 0 55px -34px rgba(var(--course-accent), .28);
}
.course .product-showcase__frame {
  border-color: rgba(var(--course-accent), .32);
}
.course .product-showcase__frame--secondary {
  box-shadow: 0 26px 70px -24px #000, 0 0 32px -22px rgba(var(--course-accent), .5);
}
.course .course__media-glow {
  background: radial-gradient(circle at 50% 45%, rgba(var(--course-accent), .12), transparent 62%);
}
.course .cs-line { background: linear-gradient(90deg, transparent, rgba(var(--course-accent), .7), transparent); }
.course .product-showcase__pill { border-color: rgba(var(--course-accent), .3); }

/* Complete 2:3 artwork. Dimensions reserve space before lazy images decode. */
.course-cover {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 7px;
  background: #050505;
}
.course-cover > img,
.course__media .course-cover > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center;
}

/* Four gently fanned covers, with readable artwork rather than hidden spines. */
.stack__bundle--covers {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 18px 18px;
  background: radial-gradient(ellipse at 20% 45%, rgba(var(--cover-chatgpt), .065), transparent 60%), radial-gradient(ellipse at 80% 60%, rgba(var(--cover-agents), .065), transparent 60%), #090a10;
}
.stack__bundle--covers .stack__bundle-stage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 7px;
  height: auto;
  min-height: 246px;
  padding: 28px 0 36px;
}
.stack__bundle--covers .bundle-case {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  filter: drop-shadow(0 16px 14px rgba(0,0,0,.5));
}
.stack__bundle--covers .bundle-case--chatgpt { transform: translateY(9px) rotate(-5deg); }
.stack__bundle--covers .bundle-case--claude { transform: translateY(-7px) rotate(-1.5deg); }
.stack__bundle--covers .bundle-case--agents { transform: translateY(-7px) rotate(1.5deg); }
.stack__bundle--covers .bundle-case--notebook { transform: translateY(9px) rotate(5deg); }
.stack__bundle--covers .bundle-case__cover {
  position: relative;
  inset: auto;
  border: 0;
  box-shadow: none;
}
.stack__bundle--covers .bundle-case__cover::before { content: none; }
.stack__bundle--covers .stack__bundle-shelf { bottom: 14px; opacity: .55; }
.stack__bundle--covers figcaption,
.images-showcase--covers .images-showcase__kicker {
  position: absolute;
  inset: auto;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Two portrait covers determine the bonus panel height, with no square crop. */
.course .course__media--images {
  aspect-ratio: auto;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  background: radial-gradient(ellipse at 22% 40%, rgba(var(--cover-gemini), .12), transparent 60%), radial-gradient(ellipse at 80% 58%, rgba(var(--cover-images-chatgpt), .1), transparent 60%), #080a10;
}
.images-showcase--covers {
  position: relative;
  inset: auto;
  padding: 8% 8% 9%;
  gap: 7%;
  align-items: start;
}
.images-showcase--covers .images-showcase__card {
  height: auto;
  padding: 0;
  overflow: visible;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.images-showcase--covers .course-cover { width: 100%; box-shadow: 0 20px 30px -15px #000; }
.images-showcase--covers .images-showcase__card--gemini { transform: rotate(-2deg); }
.images-showcase--covers .images-showcase__card--chatgpt { transform: rotate(2deg); }
.images-showcase--covers .images-showcase__card strong {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0;
}
.images-showcase--covers .images-showcase__card small { font-size: 10px; line-height: 1.4; }

@media (min-width: 981px) {
  .stack__overview { grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); gap: 28px; }
}
@media (max-width: 560px) {
  /* At phone widths a 2x2 arrangement protects the titles from becoming tiny. */
  .stack__bundle--covers { padding: 22px 20px 12px; }
  .stack__bundle--covers .stack__bundle-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
    padding: 25px 0;
  }
  .stack__bundle--covers .bundle-case:nth-child(odd) { transform: rotate(-2deg); }
  .stack__bundle--covers .bundle-case:nth-child(even) { transform: rotate(2deg); }
  .stack__bundle--covers .stack__bundle-shelf { display: none; }
  .images-showcase--covers { padding: 7% 7% 9%; gap: 6%; }
  .images-showcase--covers .images-showcase__card { gap: 5px; }
  .images-showcase--covers .images-showcase__card strong { font-size: 10px; }
  .images-showcase--covers .images-showcase__card small { font-size: 8.5px; }
  .hero-circuit__node-card > .course-mark-n8n { width: 34px; }
}