/* Digitable: schematic card surfaces. Decorative layers never cover text. */
.overview-stage { --stage-ink: var(--course-cyan); position: relative; isolation: isolate; overflow: hidden; }
.overview-stage::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .13; background: radial-gradient(ellipse at 100% 0, var(--stage-ink), transparent 65%), repeating-linear-gradient(135deg, transparent 0 18px, var(--stage-ink) 19px, transparent 20px 37px); mask-image: linear-gradient(90deg, transparent 20%, #000); }
.overview-stage__icon { color: var(--stage-ink); display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--stage-ink) 25%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--stage-ink) 8%, transparent); }
.overview-stage--foundation { --stage-ink: var(--course-blue); }
.overview-stage--languages { --stage-ink: var(--course-purple); }
.overview-stage--design { --stage-ink: var(--course-orange); }
.overview-stage--data-ai { --stage-ink: var(--course-green); }
.overview-stage--craft { --stage-ink: var(--course-blue); }
.overview-stage--product { --stage-ink: var(--course-orange); }
.overview-stage--fallacies { --stage-ink: var(--course-purple); grid-template-columns: auto minmax(0, 1fr) auto; }
.overview-now { position: relative; }
.overview-now::after { content: ''; flex: 1; min-height: 70px; max-height: 240px; margin: 30px 20px 0; opacity: .12; background: radial-gradient(circle at 50% 50%, transparent 0 30%, var(--course-cyan) 30% 31%, transparent 31% 47%, var(--course-cyan) 47% 48%, transparent 48%), linear-gradient(45deg, transparent 49.6%, var(--course-cyan) 49.8% 50.2%, transparent 50.4%), linear-gradient(135deg, transparent 49.6%, var(--course-cyan) 49.8% 50.2%, transparent 50.4%); }
@media (max-width: 1099px) { .overview-now::after { display: none; } }
@media (prefers-contrast: more) { .overview-stage::after, .overview-now::after { display: none; } }