:root {
    /* Theme Colors */
    --bg-page: #F5F5F5; /* Very light gray */
    --bg-slide: #FFFFFF; /* White canvas */
    --text-primary: #1A1A1A;
    --text-secondary: #555555;
    --accent-blue: #0076CE; /* Pega-inspired blue */
    --border-light: #E0E0E0;
    --border-accent: #B3D8F4;

    /* Typography Hierarchy */
    --font-heading: 'Georgia', serif;
    --font-body: 'Georgia', serif;
    --font-secondary: 'Times New Roman', serif;
    --font-tech: 'Courier New', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

/* Typography Base */
h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--text-primary);
}

h1 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    color: var(--accent-blue);
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0.5rem;
    display: inline-block;
}

h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.secondary {
    font-family: var(--font-secondary);
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-style: italic;
}

.tech-text {
    font-family: var(--font-tech);
    color: var(--accent-blue);
    font-size: 1.15rem;
    background: #F0F6FB;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-accent);
}

.large-text {
    font-size: 1.15rem;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: var(--border-light);
    margin: 2rem 0;
}

/* Presentation Wrapper — flex column: deck on top, controls bar below */
.presentation-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* The 16:9 Deck — takes available space above controls */
.deck {
    position: relative;
    width: 100%;
    max-width: calc((100vh - 50px) * (16 / 9));
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-slide);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

/* Slides — fill the entire deck */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 4rem;
    display: none;  /* hidden by default */
    flex-direction: column;
    overflow: hidden;
}

.slide.active {
    display: flex; /* shown when active */
}

.slide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.slide-content.center-flex {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Hidden elements */
.notes {
    display: none;
}

/* UI Controls Overlays */
/* Controls bar — sits below the deck, full width of the deck */
.presentation-ui {
    width: 100%;
    max-width: calc((100vh - 50px) * (16 / 9));
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 100;
}

.progress-container {
    width: 100%;
    height: 4px;
    background-color: var(--border-light);
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--accent-blue);
    transition: width 0.3s ease;
}

.controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--border-light);
}

.slide-counter {
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.nav-dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-light);
    cursor: pointer;
    transition: background-color 0.2s;
}

.dot.active {
    background-color: var(--accent-blue);
}

.control-buttons {
    display: flex;
    gap: 10px;
}

.btn {
    font-family: var(--font-secondary);
    background: transparent;
    border: 1px solid var(--border-light);
    padding: 4px 10px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.2rem;
    transition: all 0.2s;
}

.btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.icon-btn {
    font-size: 1.4rem;
    padding: 2px 8px;
}

/* Presenter Notes Panel */
.notes-panel {
    position: fixed;
    bottom: 60px;
    right: 20px;
    width: 300px;
    background: #FFF;
    border: 1px solid var(--border-accent);
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: none;
    z-index: 200;
}
.notes-panel.visible {
    display: block;
}
.notes-panel h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    color: var(--accent-blue);
}
.notes-panel p {
    font-size: 1.15rem;
}

/* --- Specific Components --- */

/* Cards */
.card {
    background-color: #FAFAFA;
    border: 1px solid var(--border-light);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.highlight-card {
    border-left: 4px solid var(--accent-blue);
    background-color: #F8FBFF;
}

/* Grids */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    flex: 1;
}

/* Lists */
.overview-list {
    list-style: none;
}
.overview-list li {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}
.overview-list .label {
    font-weight: bold;
    display: inline-block;
    width: 180px;
    color: var(--accent-blue);
}

.feature-list {
    padding-left: 1.5rem;
}
.feature-list li {
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

.skills-list {
    list-style: square;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}
.skills-list li {
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}
.timeline-row {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.5rem;
}
.timeline-row span:first-child {
    min-width: 80px;
}

/* Labs List */
.lab-list {
    margin-top: 1rem;
    padding-left: 1.5rem;
}
.lab-list li {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}

/* Flow Diagram */
.flow-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.flow-step {
    border: 1px solid var(--accent-blue);
    padding: 1rem 1.5rem;
    background-color: #FFF;
    font-family: var(--font-tech);
    font-weight: bold;
    color: var(--accent-blue);
}
.flow-arrow {
    color: var(--border-light);
    font-size: 0.95rem;
}

/* Architecture Diagram */
.architecture-diagram {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}
.arch-box {
    flex: 1;
    border: 1px solid var(--border-light);
    background-color: #FAFAFA;
    padding: 1.5rem;
    text-align: center;
    position: relative;
}
.arch-box::after {
    content: '↓';
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    color: var(--border-light);
    font-size: 1.05rem;
}
.arch-box:last-child::after {
    display: none;
}
.arch-box p {
    margin-top: 0.5rem;
    font-weight: bold;
}

/* Metrics Row */
.metrics-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}
.metric {
    flex: 1;
    border: 1px solid var(--border-light);
    padding: 1.5rem;
    text-align: center;
    background-color: #FAFAFA;
}
.metric .number {
    display: block;
    font-family: var(--font-tech);
    font-size: 3.6rem;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}
.metric .label {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Cover Slide Styles */
.slide-content.cover {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 2rem 4rem;
    position: relative;
    /* Subtle technical grid background */
    background-image: 
        linear-gradient(rgba(224, 224, 224, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224, 224, 224, 0.4) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center center;
}

.cover-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family: var(--font-tech);
    font-size: 1.2rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
}

.cover-header .brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cover-header .brand .line {
    width: 60px;
    height: 1px;
    background-color: var(--accent-blue);
}

.cover-header .program-info {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.cover-middle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
    margin-bottom: auto;
}

.cover-main {
    flex: 1;
}

.main-title {
    font-family: var(--font-heading);
    font-size: 4.7rem;
    font-weight: normal;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    border: none;
    padding: 0;
}

.tech-subtitle {
    font-family: var(--font-secondary);
    font-size: 1.55rem;
    color: var(--text-secondary);
    font-style: italic;
    border-left: 2px solid var(--accent-blue);
    padding-left: 1.2rem;
}

.cover-side-panel {
    width: 360px;
    height: 270px;
    border: 1px solid var(--border-light);
    background-color: #ffffff;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.side-panel-num {
    font-family: var(--font-tech);
    color: var(--accent-blue);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.side-panel-title {
    font-family: var(--font-tech);
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.side-panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.cover-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
}

.cover-candidate-box {
    border: 1px solid var(--border-light);
    padding: 1.5rem 2rem;
    background-color: var(--bg-slide);
    width: 340px;
}

.candidate-label {
    font-family: var(--font-tech);
    font-size: 0.85rem;
    color: var(--accent-blue);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.8rem;
}

.candidate-name {
    font-family: var(--font-heading);
    font-size: 2.38rem;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
    font-weight: normal;
}

.candidate-role {
    font-family: var(--font-secondary);
    font-size: 1.61rem;
    color: var(--text-secondary);
}

.cover-date {
    font-family: var(--font-tech);
    font-size: 1.38rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
}

.cover-footer {
    border-top: 1px solid var(--border-light);
    padding-top: 1.5rem;
    text-align: center;
}

.tech-labels {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--accent-blue);
    letter-spacing: 2px;
    word-spacing: 4px;
}
/* Internal Slide Common Styles */
.slide-content.slide-internal {
    display: flex;
    flex-direction: column;
    padding: 2rem 4rem;
    height: 100%;
}

.slide-header {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-tech);
    color: var(--text-secondary);
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}

.internal-title {
    font-family: var(--font-heading);
    font-size: 2.88rem;
    font-weight: normal;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.5rem;
    border: none;
    padding: 0;
}

.intro-text {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.5;
}

/* Info Grid (Slide 2) */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.info-panel {
    border: 1px solid var(--border-light);
    background-color: var(--bg-slide);
    padding: 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.panel-label {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--accent-blue);
    letter-spacing: 1px;
    margin-bottom: 1rem;
    font-weight: normal;
}

.panel-value {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.progress-panel .panel-value.large-progress {
    font-size: 1.15rem;
    color: var(--accent-blue);
}

.learning-journey-footer {
    margin-top: auto;
}

.journey-label {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    font-weight: normal;
}

.journey-timeline {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.journey-timeline .date {
    font-family: var(--font-tech);
    font-size: 1.2rem;
    color: var(--text-primary);
}

.journey-timeline .timeline-line {
    flex: 1;
    height: 1px;
    background-color: var(--border-light);
}

.journey-components {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--accent-blue);
    letter-spacing: 2px;
}

/* ============================================================
   SLIDE 3 — LEARNING JOURNEY
   ============================================================ */

/* Tighter padding for this dense slide */
.s3-layout {
    padding: 1.5rem 3rem 1rem;
    gap: 0;
}

.s3-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-bottom: 0.4rem;
}

/* --- Horizontal timeline --- */
.s3-timeline-wrap {
    margin: 0.5rem 0 0.8rem;
}

.s3-tl-dates {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-tech);
    font-size: 0.95rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

.s3-tl-mid {
    color: var(--accent-blue);
    font-weight: bold;
}

.s3-tl-track {
    position: relative;
    height: 20px;
}

.s3-tl-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-light);
    transform: translateY(-50%);
}

.s3-tl-node {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--bg-slide);
    border: 2px solid var(--accent-blue);
    transform: translate(-50%, -50%);
    cursor: default;
}

.s3-tl-node--key {
    width: 14px;
    height: 14px;
    background-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 118, 206, 0.15);
}

/* --- Phase cards --- */
.s3-phases {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.8rem;
    flex: 1;
    min-height: 0;
}

.s3-phase {
    border: 1px solid var(--border-light);
    padding: 0.8rem 0.75rem;
    background-color: var(--bg-slide);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 0;
}

.s3-phase--key {
    border-color: var(--accent-blue);
    background-color: #F0F7FD;
}

.s3-phase-num {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--accent-blue);
    letter-spacing: 2px;
}

.s3-phase-title {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    font-weight: bold;
    line-height: 1.2;
}

.s3-phase-dates {
    font-family: var(--font-secondary);
    font-size: 1.15rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 0.3rem;
}

.s3-phase-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.s3-phase-items li {
    font-family: var(--font-secondary);
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.3;
    padding-left: 0.6rem;
    position: relative;
}

.s3-phase-items li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
}

/* --- Metric strip + mode strip --- */
.s3-bottom {
    margin-top: 0.7rem;
    border-top: 1px solid var(--border-light);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.s3-metrics {
    display: flex;
    gap: 2rem;
}

.s3-metric {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.s3-metric-num {
    font-family: var(--font-heading);
    font-size: 3.0rem;
    color: var(--accent-blue);
    line-height: 1;
}

.s3-metric-label {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    line-height: 1.3;
}

.s3-modes {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--accent-blue);
    letter-spacing: 2px;
}

/* --- Staggered entrance animations --- */
@keyframes s3FadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.s3-anim {
    opacity: 0;
}

/* When the slide becomes active, trigger animations on children */
#slide-3.active .s3-anim-1 { animation: s3FadeUp 0.4s ease forwards 0.05s; }
#slide-3.active .s3-anim-2 { animation: s3FadeUp 0.4s ease forwards 0.15s; }
#slide-3.active .s3-anim-3 { animation: s3FadeUp 0.4s ease forwards 0.3s;  }
#slide-3.active .s3-anim-4 { animation: s3FadeUp 0.5s ease forwards 0.45s; }
#slide-3.active .s3-anim-5 { animation: s3FadeUp 0.4s ease forwards 0.65s; }

/* ============================================================
   SLIDE 4 — TECHNICAL TRAINING
   ============================================================ */

.s4-layout {
    padding: 1.5rem 3rem 1rem;
    gap: 0;
}

/* Top row: title block + badge */
.s4-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 0.8rem;
}

.s4-title-block {
    flex: 1;
}

.s4-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.2rem;
}

/* Course completion badge */
.s4-badge {
    border: 1px solid var(--accent-blue);
    background: #F0F7FD;
    padding: 0.7rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    min-width: 160px;
    flex-shrink: 0;
}

.s4-badge-duration {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--accent-blue);
    line-height: 1;
}

.s4-badge-title {
    font-family: var(--font-tech);
    font-size: 0.85rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-align: right;
    line-height: 1.5;
}

.s4-badge-completion {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--accent-blue);
    letter-spacing: 1px;
    font-weight: bold;
}

/* 7-card grid — 4 cols, wraps into 2 rows of 4 + 1 pipeline spanning full width */
.s4-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    flex: 1;
    min-height: 0;
}

.s4-cap {
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--accent-blue);
    background: var(--bg-slide);
    padding: 0.75rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: default;
    min-height: 0;
}

.s4-cap:hover {
    box-shadow: 0 3px 12px rgba(0, 118, 206, 0.1);
    border-left-color: var(--accent-blue);
    border-top-color: var(--border-accent);
    border-right-color: var(--border-accent);
    border-bottom-color: var(--border-accent);
}

.s4-cap--accent {
    background: #F7FBFF;
    border-left-color: var(--accent-blue);
}

.s4-cap-num {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--accent-blue);
    letter-spacing: 2px;
}

.s4-cap-title {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.s4-cap-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.s4-cap-items li {
    font-family: var(--font-secondary);
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.3;
    padding-left: 0.6rem;
    position: relative;
}

.s4-cap-items li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
}

/* Pipeline footer — spans full grid width */
.s4-pipeline {
    grid-column: 1 / -1;
    border: 1px solid var(--border-light);
    border-top: 2px solid var(--accent-blue);
    background: #FAFCFE;
    padding: 0.6rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.s4-pipeline-label {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
}

.s4-pipeline-flow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.s4-arrow {
    color: var(--accent-blue);
    font-size: 0.95rem;
}

.s4-pipeline-end {
    color: var(--accent-blue);
    font-weight: bold;
}

/* Slide 4 entrance animations */
@keyframes s4FadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.s4-anim { opacity: 0; }

#slide-4.active .s4-anim-1 { animation: s4FadeUp 0.35s ease forwards 0.05s; }
#slide-4.active .s4-anim-2 { animation: s4FadeUp 0.35s ease forwards 0.2s;  }
#slide-4.active .s4-anim-3 { animation: s4FadeUp 0.4s  ease forwards 0.35s; }
#slide-4.active .s4-anim-5 { animation: s4FadeUp 0.4s  ease forwards 0.55s; }

/* ============================================================
   SLIDE 5 — HANDS-ON LABS (NEW LAYOUT)
   ============================================================ */

.s5-layout {
    padding: 1rem 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.s5-top-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.2rem;
}

.s5-title-wrap {
    flex: 1;
}

.s5-subtitle {
    font-family: var(--font-tech);
    font-size: 1.2rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.2rem;
    margin-bottom: 0.6rem;
}

.s5-metrics {
    display: flex;
    gap: 2rem;
}

.s5-metric-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.s5-metric-num {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    color: var(--accent-blue);
    font-weight: bold;
    line-height: 1;
}

.s5-metric-text {
    font-family: var(--font-tech);
    font-size: 1rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

/* Roadmap Container */
.s5-roadmap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.s5-row {
    display: flex;
    align-items: center;
}

/* Row 2 — same left edge as Row 1, numbering establishes sequence */
.s5-row2 {
    padding-left: 0;
}

/* Lab node card */
.s5-node {
    width: 190px;
    height: 115px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.s5-node-visible,
.s5-node-hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.6rem 0.5rem;
    background: #FFF;
    border: 1px solid var(--border-light);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.s5-node-hover {
    opacity: 0;
    background: var(--accent-blue);
    color: #FFF;
    z-index: 2;
    transform: translateY(8px);
}

.s5-node:hover .s5-node-visible { opacity: 0; }
.s5-node:hover .s5-node-hover {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 6px 20px rgba(0, 118, 206, 0.18);
}

.s5-num {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.s5-node:hover .s5-num { color: rgba(255,255,255,0.75); }

.s5-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.s5-hover-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 0.35rem;
    line-height: 1.2;
}

.s5-hover-desc {
    font-family: var(--font-label);
    font-size: 1rem;
    line-height: 1.35;
}

/* CSS connector line between nodes */
.s5-conn-line {
    flex: 1;
    height: 1px;
    background: var(--border-accent);
    min-width: 24px;
    position: relative;
}
.s5-conn-line::before,
.s5-conn-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
}
.s5-conn-line::before { left: -3px; }
.s5-conn-line::after  { right: -3px; }

/* Practical Progression Bar */
.s5-progression-bar {
    border: 1px solid var(--border-light);
    padding: 0.65rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: #FAFAFA;
    margin-bottom: 1rem;
}

.s5-progression-title {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.s5-prog-divider {
    font-family: var(--font-tech);
    color: var(--border-accent);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.s5-progression-path {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-primary);
}

.s5-arrow-small {
    color: var(--accent-blue);
    margin: 0 0.4rem;
}

/* Capstone Connection */
.s5-capstone-conn {
    text-align: center;
}

.s5-capstone-text {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    margin-bottom: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.s5-capstone-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.s5-capstone-box {
    font-family: var(--font-tech);
    font-size: 1.1rem;
    padding: 0.45rem 1.4rem;
    border: 1px solid var(--border-light);
    background: #FFF;
}

.s5-capstone-highlight {
    background: var(--accent-blue);
    color: #FFF;
    border-color: var(--accent-blue);
    font-weight: bold;
    font-size: 1.15rem;
    padding: 0.55rem 2rem;
    letter-spacing: 0.5px;
}

.s5-arrow-vert {
    color: var(--accent-blue);
    font-size: 1.1rem;
    line-height: 1;
}

/* Slide 5 entrance animations */
@keyframes s5FadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.s5-anim { opacity: 0; }

#slide-5.active .s5-anim-title   { animation: s5FadeIn 0.3s ease forwards 0.05s; }
#slide-5.active .s5-anim-row1    { animation: s5FadeIn 0.4s ease forwards 0.2s; }
#slide-5.active .s5-anim-row2    { animation: s5FadeIn 0.4s ease forwards 0.35s; }
#slide-5.active .s5-anim-prog    { animation: s5FadeIn 0.4s ease forwards 0.5s; }
#slide-5.active .s5-anim-capstone { animation: s5FadeIn 0.4s ease forwards 0.65s; }

/* ============================================================
   SLIDE 6 — LEARNING TO PROJECT
   ============================================================ */

.s6-layout {
    padding: 1rem 3rem;
    display: flex;
    flex-direction: column;
}

.s6-top-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.s6-title-wrap {
    flex: 1;
}

.s6-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.2rem;
    margin-bottom: 0.8rem;
}

.s6-milestone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: #FAFAFA;
    border: 1px solid var(--border-light);
    border-right: 4px solid var(--accent-blue);
    padding: 0.8rem 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.s6-milestone-date {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--accent-blue);
    font-weight: bold;
    margin-bottom: 0.2rem;
}

.s6-milestone-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.s6-milestone-flow {
    font-family: var(--font-label);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.s6-arrow-inline {
    color: var(--accent-blue);
    margin: 0 0.3rem;
    font-weight: bold;
}

/* Grid Layout */
.s6-grid-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-light);
    background: #FFF;
}

.s6-grid-headers {
    display: flex;
    background: #F4F9FD;
    border-bottom: 1px solid var(--border-light);
    padding: 0.8rem 0;
}

.s6-col-header {
    flex: 1;
    text-align: center;
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.s6-grid-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    padding: 0.8rem 0;
    transition: background-color 0.2s ease;
}

.s6-grid-row:hover {
    background-color: #FAFAFA;
}

.s6-grid-row:last-child {
    border-bottom: none;
}

.s6-cell {
    flex: 1;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-primary);
}

.s6-concept {
    color: var(--text-muted);
}

.s6-impl {
    font-weight: bold;
}

.s6-outcome {
    color: var(--accent-blue);
}

.s6-cell-arrow {
    width: 40px;
    text-align: center;
    color: var(--border-accent);
    font-size: 1.15rem;
}

/* Pipeline Layout */
.s6-pipeline {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FAFAFA;
    border: 1px solid var(--border-light);
    padding: 1rem;
    gap: 1rem;
}

.s6-pipe-stage {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.s6-pipe-arrow {
    color: var(--border-accent);
    transform: rotate(-90deg);
}

.s6-pipe-build {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.s6-pipe-label {
    color: var(--accent-blue);
    font-weight: bold;
}

.s6-pipe-box {
    background: #FFF;
    border: 1px solid var(--accent-blue);
    padding: 0.5rem 1rem;
    text-align: center;
    color: var(--accent-blue);
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 118, 206, 0.1);
}

/* Slide 6 entrance animations */
@keyframes s6FadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.s6-anim { opacity: 0; }

#slide-6.active .s6-anim-1 { animation: s6FadeIn 0.3s ease forwards 0.05s; }
#slide-6.active .s6-anim-2 { animation: s6FadeIn 0.4s ease forwards 0.2s; }
#slide-6.active .s6-anim-3 { animation: s6FadeIn 0.4s ease forwards 0.35s; }

/* ============================================================
   SLIDE 7 — CAPSTONE PROJECT
   ============================================================ */

.s7-layout {
    display: flex;
    flex-direction: column;
    padding: 1rem 3rem;
}

.s7-top-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.s7-title-wrap {
    flex: 1;
}

.s7-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.s7-metrics {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.s7-metric-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.s7-metric-num {
    font-family: var(--font-tech);
    font-size: 3.0rem;
    color: var(--accent-blue);
    font-weight: bold;
    line-height: 1;
}

.s7-metric-small {
    font-size: 1.4rem;
}

.s7-metric-text {
    font-family: var(--font-label);
    font-size: 1.15rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-top: 0.3rem;
    text-transform: uppercase;
}

.s7-main {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 2rem;
    gap: 2rem;
}

.s7-panel {
    flex: 1;
    background: #FAFAFA;
    border: 1px solid var(--border-light);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.s7-panel-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--accent-blue);
    display: inline-block;
    padding-bottom: 0.3rem;
}

.s7-panel-text {
    font-family: var(--font-label); /* Times New Roman per instructions */
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.s7-center {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s7-center-title {
    font-family: var(--font-tech);
    font-size: 1.2rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.s7-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.s7-flow-step {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    background: #FFF;
    border: 1px solid var(--border-accent);
    padding: 0.5rem 1.5rem;
    text-align: center;
    width: 80%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.s7-flow-arrow {
    color: var(--accent-blue);
    font-size: 0.95rem;
    margin: 0.3rem 0;
}

.s7-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    border-top: 1px solid var(--border-light);
    padding-top: 1.5rem;
}

.s7-building-blocks {
    display: flex;
    flex-direction: column;
}

.s7-bb-title {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

.s7-bb-items {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    font-weight: bold;
}

.s7-milestone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: #F4F9FD;
    border-right: 3px solid var(--accent-blue);
    padding: 0.5rem 1rem;
}

.s7-milestone-date {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--accent-blue);
    font-weight: bold;
}

.s7-milestone-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-primary);
}

.s7-milestone-flow {
    font-family: var(--font-tech);
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

/* Slide 7 entrance animations */
@keyframes s7FadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.s7-anim { opacity: 0; }

#slide-7.active .s7-anim-1 { animation: s7FadeIn 0.3s ease forwards 0.05s; }
#slide-7.active .s7-anim-2 { animation: s7FadeIn 0.4s ease forwards 0.15s; }
#slide-7.active .s7-anim-3 { animation: s7FadeIn 0.4s ease forwards 0.25s; }
#slide-7.active .s7-anim-4 { animation: s7FadeIn 0.4s ease forwards 0.35s; }
#slide-7.active .s7-anim-5 { animation: s7FadeIn 0.4s ease forwards 0.45s; }
#slide-7.active .s7-anim-6 { animation: s7FadeIn 0.4s ease forwards 0.55s; }

/* ============================================================
   SLIDE 8 — APPLICATION ARCHITECTURE
   ============================================================ */

#slide-8 {
    padding: 2rem 4rem 1rem 4rem;
}

.s8-layout {
    display: flex;
    flex-direction: column;
    padding: 0 3rem 0;
    height: 100%;
    justify-content: space-between;
}

.s8-title-block {
    margin-bottom: 0;
}
.s8-title-block h1 {
    margin-bottom: 0.2rem;
    padding-bottom: 0.2rem;
}

.s8-subtitle {
    font-family: var(--font-tech);
    font-size: 1.2rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.2rem;
}

.s8-arch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    width: 72%;
    margin: 0 auto;
}

/* Arrows */
.s8-arrow-down {
    color: var(--accent-blue);
    font-size: 0.95rem;
    line-height: 1;
    margin: 0;
}

/* Node styles */
.s8-node-user, .s8-node-result {
    text-align: center;
}

.s8-node-text {
    font-family: var(--font-tech);
    font-size: 1.1rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.s8-result-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.s8-result-desc {
    font-family: var(--font-tech);
    font-size: 1rem;
    color: var(--text-secondary);
}

.s8-node-case {
    background: #FFF;
    border: 2px solid var(--accent-blue);
    padding: 0.4rem 2rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 118, 206, 0.1);
    width: 320px;
}

.s8-case-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--accent-blue);
    margin-bottom: 0.2rem;
}

.s8-case-desc {
    font-family: var(--font-label);
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.s8-case-label {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    background: #FAFAFA;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border-light);
}

/* Branching Connector */
.s8-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.s8-branch-stem {
    width: 1px;
    height: 6px;
    background: var(--border-accent);
}

.s8-branch-crossbar {
    width: calc(100% - 30%); /* Aligns precisely with centers of outer pillars */
    height: 1px;
    background: var(--border-accent);
}

.s8-branch-drops {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 30%);
}

.s8-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s8-drop::before {
    content: '';
    width: 1px;
    height: 6px;
    background: var(--border-accent);
}

/* Three Pillars Row */
.s8-pillars {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.s8-pillar {
    background: #FFF;
    border: 1px solid var(--border-light);
    width: 30%;
    text-align: center;
    padding: 0.6rem 0.4rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.s8-pillar-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--accent-blue);
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.s8-pillar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.s8-pillar-item {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Merging Connector */
.s8-merge {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.s8-merge-rises {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 30%);
}

.s8-rise {
    width: 1px;
    height: 6px;
    background: var(--border-accent);
}

.s8-merge-crossbar {
    width: calc(100% - 30%);
    height: 1px;
    background: var(--border-accent);
}

.s8-merge-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s8-merge-stem::before {
    content: '';
    width: 1px;
    height: 6px;
    background: var(--border-accent);
}

/* Workflow & Automation Node */
.s8-node-workflow {
    background: #FAFAFA;
    border: 1px solid var(--border-light);
    padding: 0.4rem 2rem;
    text-align: center;
    width: 320px;
}

.s8-workflow-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0;
}

/* Footer Strip (Learned -> Applied) */
.s8-footer-strip {
    background: #FAFAFA;
    border: 1px solid var(--border-light);
    padding: 0.4rem 2rem;
    margin-top: 0;
    font-family: var(--font-tech);
    font-size: 0.9rem;
}

.s8-strip-header {
    display: flex;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.1rem;
    color: var(--text-muted);
    font-weight: bold;
}

.s8-strip-row {
    display: flex;
    margin-bottom: 0.15rem;
    color: var(--text-secondary);
}

.s8-strip-row:last-child {
    margin-bottom: 0;
}

.s8-col {
    flex: 1;
}

.s8-col.left { text-align: left; }
.s8-col.center { 
    text-align: center; 
    color: var(--border-accent);
    flex: 0.3;
    letter-spacing: -1.5px;
}
.s8-col.right { text-align: right; color: var(--text-primary); font-family: var(--font-label); }

/* Slide 8 entrance animations */
@keyframes s8FadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.s8-anim { opacity: 0; }

#slide-8.active .s8-anim-1 { animation: s8FadeIn 0.3s ease forwards 0.05s; }
#slide-8.active .s8-anim-2 { animation: s8FadeIn 0.25s ease forwards 0.2s; }
#slide-8.active .s8-anim-3 { animation: s8FadeIn 0.4s ease forwards 0.35s; }
#slide-8.active .s8-anim-4 { animation: s8FadeIn 0.35s ease forwards 0.5s; }
#slide-8.active .s8-anim-5 { animation: s8FadeIn 0.35s ease forwards 0.65s; }
#slide-8.active .s8-anim-6 { animation: s8FadeIn 0.4s ease forwards 0.8s; }

/* ============================================================
   SLIDE 9 — CASE LIFECYCLE
   ============================================================ */

#slide-9 {
    padding: 2rem 4rem 1rem 4rem;
}

.s9-layout {
    display: flex;
    flex-direction: column;
    padding: 0 3rem;
    height: 100%;
}

.s9-title-block {
    margin-bottom: 0.5rem;
}

.s9-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.2rem;
}

.s9-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 0;
}

.s9-columns {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex: 1;
}

/* Left Rail: Status */
.s9-left-rail {
    flex: 0 0 18%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 1rem;
}

.s9-rail-title {
    font-family: var(--font-tech);
    font-size: 0.95rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.2rem;
    width: 100%;
}

.s9-status-item {
    font-family: var(--font-tech);
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    padding-left: 0.2rem;
    transition: color 0.3s ease;
}

.s9-status-item.active {
    color: var(--accent-blue);
    font-weight: bold;
}

.s9-status-arrow {
    color: var(--border-light);
    font-size: 0.8rem;
    line-height: 1;
    margin: 0.2rem 0 0.2rem 0.5rem;
    text-align: center;
}

/* Center Flow */
.s9-center-flow {
    flex: 0 0 52%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s9-flow-head-large {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: bold;
    background: #F4F9FD;
    padding: 0.4rem 1.5rem;
    border: 1px solid var(--border-light);
}

.s9-flow-arrow-head {
    color: var(--accent-blue);
    font-size: 0.85rem;
    line-height: 1;
    margin: 0.1rem 0;
}

.s9-flow-arrow {
    color: var(--border-accent);
    font-size: 0.85rem;
    line-height: 1;
    margin: 0;
}

.s9-flow-arrow-top {
    color: var(--border-accent);
    font-size: 0.85rem;
    line-height: 1;
    margin: 0;
}

.s9-flow-arrow-short {
    color: var(--border-accent);
    font-size: 0.85rem;
    line-height: 1;
    margin: 0;
}

.s9-stage-box {
    background: #FFF;
    border: 1px solid var(--border-light);
    width: 260px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    overflow: hidden;
}

.s9-stage-header {
    background: #FAFAFA;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.s9-stage-num {
    font-family: var(--font-tech);
    font-size: 0.85rem;
    color: var(--accent-blue);
}

.s9-stage-name {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--text-primary);
}

.s9-stage-desc {
    font-family: var(--font-tech);
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.2rem;
    line-height: 1.2;
}

/* Decision block */
.s9-decision-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    position: relative;
    width: 100%;
}

.s9-decision-diamond {
    background: #FAFAFA;
    border: 1px dashed var(--accent-blue);
    padding: 0.2rem 1rem;
    text-align: center;
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--accent-blue);
    margin-bottom: 0;
}

.s9-decision-branches {
    display: flex;
    justify-content: center;
    gap: 3rem;
    width: 100%;
    margin-top: 0;
}

.s9-fork-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.s9-fork-stem {
    width: 1px;
    height: 10px;
    background-color: var(--border-accent);
}

.s9-fork-arms {
    width: 228px;
    height: 10px;
    box-sizing: border-box;
    border-top: 1px solid var(--border-accent);
    border-left: 1px solid var(--border-accent);
    border-right: 1px solid var(--border-accent);
}

.s9-branch-yes, .s9-branch-no {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
}

.s9-branch-yes .s9-stage-box {
    width: 180px;
}

.s9-branch-no .s9-stage-box {
    width: 140px;
}

.s9-path-label {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.s9-return-text {
    font-family: var(--font-tech);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.2;
    text-align: left;
    margin-top: 0;
    white-space: pre;
    align-self: flex-start;
    margin-left: 50%;
}

/* Right Rail: Callout */
.s9-right-rail {
    flex: 0 0 24%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 1rem;
}

.s9-callout-card {
    background: #F4F9FD;
    border-right: 3px solid var(--accent-blue);
    padding: 1rem;
    width: 100%;
}

.s9-callout-title {
    font-family: var(--font-tech);
    font-size: 0.95rem;
    color: var(--accent-blue);
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
}

.s9-callout-flow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
}

.s9-cflow-arrow {
    color: var(--border-accent);
    font-size: 0.85rem;
    margin: 0;
}

.s9-callout-divider {
    width: 100%;
    height: 1px;
    background: var(--border-light);
    margin: 0.8rem 0;
}

.s9-callout-text {
    font-family: var(--font-label);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Bottom summary */
.s9-bottom-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FAFAFA;
    border-top: 1px solid var(--border-light);
    padding: 0.8rem 2rem;
    margin-top: auto;
    margin-bottom: 0.5rem;
}

.s9-bottom-title {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--accent-blue);
    font-weight: bold;
    letter-spacing: 1px;
}

.s9-bottom-flow {
    font-family: var(--font-tech);
    font-size: 0.95rem;
    color: var(--text-primary);
    letter-spacing: 1px;
}

/* Slide 9 entrance animations */
@keyframes s9FadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.s9-anim { opacity: 0; }

#slide-9.active .s9-anim-1 { animation: s9FadeIn 0.3s ease forwards 0.05s; }
#slide-9.active .s9-anim-2 { animation: s9FadeIn 0.3s ease forwards 0.15s; }
#slide-9.active .s9-anim-3 { animation: s9FadeIn 0.3s ease forwards 0.25s; }
#slide-9.active .s9-anim-4 { animation: s9FadeIn 0.3s ease forwards 0.35s; }
#slide-9.active .s9-anim-5 { animation: s9FadeIn 0.3s ease forwards 0.45s; }
#slide-9.active .s9-anim-6 { animation: s9FadeIn 0.3s ease forwards 0.55s; }
#slide-9.active .s9-anim-7 { animation: s9FadeIn 0.3s ease forwards 0.65s; }
#slide-9.active .s9-anim-8 { animation: s9FadeIn 0.3s ease forwards 0.75s; }

/* ============================================================
   SLIDE 10 — BUSINESS RULES & AUTOMATION
   ============================================================ */

#slide-10 {
    padding: 1.5rem 4rem 1rem 4rem;
}

.s10-layout {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    height: 100%;
}

.s10-title-block {
    margin-bottom: 0.2rem;
}

.s10-subtitle {
    font-family: var(--font-tech);
    font-size: 1.1rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0;
}

.s10-main {
    display: flex;
    justify-content: center;
    flex: 1;
    gap: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem; /* Add safety margin */
}

/* Columns */
.s10-col {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.s10-col-bridge {
    flex: 0 0 16%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.s10-col-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-primary);
    text-align: center;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0.2rem;
    margin-bottom: 0;
}

.s10-col-desc {
    font-family: var(--font-tech);
    font-size: 0.95rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 0.2rem;
}

.s10-core-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-tech);
    font-size: 0.95rem;
    color: var(--accent-blue);
    margin: 0;
}

.s10-core-flow span {
    font-weight: bold;
}

.s10-arrow-down {
    color: var(--border-accent);
    font-size: 0.85rem;
    margin: 0.1rem 0;
}

/* Cards */
.s10-card {
    background: #FAFBFC;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
    flex: 1; /* Stretch all cards evenly */
}

.s10-card-header {
    background: #FFF;
    border-bottom: 1px solid var(--border-light);
    padding: 0.2rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.s10-card-num {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--accent-blue);
}

.s10-card-name {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--text-primary);
}

.s10-card-body {
    padding: 0.3rem 0.5rem;
    font-family: var(--font-tech);
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.s10-flow-concept {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.1;
    width: 100%;
}

.s10-diamond-small {
    border: 1px dashed var(--accent-blue);
    padding: 0.1rem 0.3rem;
    font-size: 0.85rem;
    margin: 0.1rem 0;
}

.s10-split-paths {
    display: flex;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin-top: 0.1rem;
}

.s10-path-y, .s10-path-n {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.85rem;
}

.s10-tree-branch {
    text-align: left;
    align-self: flex-start;
    margin-left: 15%;
    line-height: 1.1;
    color: var(--text-muted);
}

/* Slide 10 animations */
.s10-anim { opacity: 0; }

#slide-10.active .s10-anim-1 { animation: s9FadeIn 0.3s ease forwards 0.05s; }
#slide-10.active .s10-anim-2 { animation: s9FadeIn 0.4s ease forwards 0.2s; } /* Left col */
#slide-10.active .s10-anim-3 { animation: s9FadeIn 0.4s ease forwards 0.35s; } /* Right col */
#slide-10.active .s10-anim-4 { animation: s9FadeIn 0.4s ease forwards 0.5s; } /* Center flow */

/* ============================================================
   SLIDE 11 — TESTING & DEBUGGING
   ============================================================ */

.s11-layout {
    display: flex;
    flex-direction: column;
    padding: 1rem 3rem;
    height: 100%;
}

.s11-title-block {
    margin-bottom: 0.5rem;
}

.s11-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.2rem;
}

/* Hero Metrics */
.s11-metrics-row {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 1rem;
}

.s11-metric-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border: 1px solid var(--border-light);
    width: 140px;
    height: 100px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.s11-metric-box.s11-hoverable:hover {
    transform: translateY(-5px);
    border-color: var(--accent-blue);
}

.s11-metric-num {
    font-family: var(--font-heading);
    font-size: 3.0rem;
    font-weight: bold;
    color: var(--accent-blue);
    line-height: 1;
    margin-bottom: 0.2rem;
}

.s11-metric-label {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.s11-metrics-caption {
    text-align: center;
    font-family: var(--font-label);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

/* Hover Reveals */
.s11-hover-reveal {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    padding: 0.5rem;
    line-height: 1.3;
}

.s11-metric-box.s11-hoverable:hover .s11-hover-reveal {
    opacity: 1;
}

.s11-hr-title {
    font-weight: bold;
    color: var(--accent-blue);
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.2rem;
    width: 100%;
}

/* Main Two Columns */
.s11-main {
    display: flex;
    justify-content: space-around;
    flex: 1;
    gap: 3rem;
    margin-bottom: 1rem;
}

.s11-col-left, .s11-col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s11-col-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    text-align: center;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0.3rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Testing Process Flow */
.s11-process-flow, .s11-debug-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.s11-node {
    border: 1px solid var(--border-light);
    background: #FAFBFC;
    padding: 0.5rem 1rem;
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--text-primary);
    text-align: center;
    width: 180px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.s11-arrow-down {
    color: var(--border-accent);
    font-size: 0.95rem;
    margin: 0.2rem 0;
}

.s11-node-split {
    border: 1px solid var(--border-light);
    background: #FAFBFC;
    padding: 0.3rem 0;
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    text-align: center;
    width: 180px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

/* Debugging Flow */
.s11-debug-node {
    border: 1px solid var(--border-light);
    background: #FAFBFC;
    padding: 0.5rem;
    text-align: center;
    width: 240px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.s11-dnode-title {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.s11-dnode-tech {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--accent-blue);
    font-weight: bold;
}

.s11-dnode-desc {
    font-family: var(--font-label);
    font-size: 1.15rem;
    color: var(--text-primary);
}

.s11-debug-node.s11-hoverable:hover .s11-hover-reveal {
    opacity: 1;
}

.s11-hr-tech {
    font-size: 1.05rem;
    line-height: 1.5;
}

.s11-debug-tail {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--accent-blue);
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 0.2rem;
}

/* Result Pipeline */
.s11-result-pipeline {
    margin-top: auto;
    width: 100%;
}

.s11-pipeline-title {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    display: block;
}

.s11-pipeline-bar {
    background: #FAFBFC;
    border: 1px solid var(--border-light);
    padding: 0.8rem;
    text-align: center;
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.s11-validated {
    color: var(--accent-blue);
    font-weight: bold;
}

/* Slide 11 animations */
.s11-anim { opacity: 0; }

@keyframes s11FadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

#slide-11.active .s11-anim-1 { animation: s11FadeIn 0.3s ease forwards 0.05s; }
#slide-11.active .s11-anim-2 { animation: s11FadeIn 0.4s ease forwards 0.2s; } /* Metrics */
#slide-11.active .s11-anim-3 { animation: s11FadeIn 0.4s ease forwards 0.4s; } /* Process */
#slide-11.active .s11-anim-4 { animation: s11FadeIn 0.4s ease forwards 0.6s; } /* Debugging */
#slide-11.active .s11-anim-5 { animation: s11FadeIn 0.3s ease forwards 0.8s; } /* Pipeline */

/* ============================================================
   SLIDE 12 — SKILLS ACQUIRED
   ============================================================ */

.s12-layout {
    display: flex;
    flex-direction: column;
    padding: 1rem 3rem 0.8rem;
    height: 100%;
    box-sizing: border-box;
}

.s12-title-block { margin-bottom: 0.4rem; }

.s12-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.15rem;
}

/* Two columns */
.s12-main-cols {
    display: flex;
    gap: 2.5rem;
    flex: 1;
    min-height: 0;
}

.s12-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.s12-col-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.3rem;
    margin-bottom: 0.2rem;
}

/* Skill cards */
.s12-skill-card {
    background: #FAFBFC;
    border: 1px solid var(--border-light);
    padding: 0.55rem 0.8rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    flex: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.s12-skill-card.s12-hoverable:hover {
    transform: translateX(4px);
    border-color: var(--accent-blue);
    box-shadow: 0 3px 10px rgba(0,100,200,0.06);
}

.s12-skill-title {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: normal;
    margin: 0 0 0.2rem;
}

.s12-skill-desc {
    font-family: var(--font-label);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Hover reveal overlay */
.s12-hover-reveal {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 0.4rem;
}

.s12-skill-card.s12-hoverable:hover .s12-hover-reveal { opacity: 1; }

.s12-hr-title {
    font-weight: bold;
    color: var(--accent-blue);
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.2rem;
    width: 80%;
    text-align: center;
}

/* Bottom pipeline + metrics */
.s12-bottom-area {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.s12-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-top: 1px solid var(--border-light);
    padding-top: 0.5rem;
}

.s12-pipe-node {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    background: #FAFBFC;
    border: 1px solid var(--border-light);
    padding: 0.3rem 0.8rem;
}

.s12-pipe-arrow {
    font-size: 1.15rem;
    color: var(--border-accent);
    padding: 0 0.3rem;
}

/* Metrics strip */
.s12-metrics-strip {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 0.4rem 0;
}

.s12-mstrip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.s12-mstrip-num {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--accent-blue);
    line-height: 1;
}

.s12-mstrip-lbl {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* Slide 12 animations */
.s12-anim { opacity: 0; }

@keyframes s12FadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes s12FadeRight {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

#slide-12.active .s12-anim-1 { animation: s12FadeUp   0.35s ease forwards 0.05s; }
#slide-12.active .s12-anim-2 { animation: s12FadeUp   0.3s  ease forwards 0.2s;  }
#slide-12.active .s12-anim-3 { animation: s12FadeRight 0.35s ease forwards 0.35s; }
#slide-12.active .s12-anim-4 { animation: s12FadeRight 0.35s ease forwards 0.5s;  }
#slide-12.active .s12-anim-5 { animation: s12FadeRight 0.35s ease forwards 0.65s; }
#slide-12.active .s12-anim-6 { animation: s12FadeRight 0.35s ease forwards 0.8s;  }
#slide-12.active .s12-anim-7 { animation: s12FadeUp   0.3s  ease forwards 1.0s;  }

/* ============================================================
   SLIDE 13 — LEARNING OUTCOMES
   ============================================================ */

.s13-layout {
    display: flex;
    flex-direction: column;
    padding: 1rem 3rem 0.8rem;
    height: 100%;
    box-sizing: border-box;
}

.s13-title-block { margin-bottom: 0.3rem; }

.s13-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.15rem;
}

/* Column labels BEFORE / AFTER */
.s13-transform-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0.35rem;
}

.s13-col-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
}

.s13-col-label {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    width: 42%;
    text-align: center;
}

.s13-col-spacer {
    width: 10%;
    text-align: center;
}

/* Transformation rows */
.s13-transform-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.s13-before-card,
.s13-after-card {
    flex: 1;
    background: #FAFBFC;
    border: 1px solid var(--border-light);
    padding: 0.5rem 0.8rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.s13-before-card.s13-hoverable:hover,
.s13-after-card.s13-hoverable:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 3px 10px rgba(0,100,200,0.06);
}

.s13-after-card {
    background: #F7F9FC;
}

.s13-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    flex-shrink: 0;
    font-size: 0.95rem;
    color: var(--border-accent);
    font-family: var(--font-tech);
}

.s13-card-stage {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--accent-blue);
    margin: 0 0 0.2rem;
    letter-spacing: 1px;
}

.s13-card-body {
    font-family: var(--font-label);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Hover reveals */
.s13-hover-reveal {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 0.4rem;
}

.s13-before-card.s13-hoverable:hover .s13-hover-reveal,
.s13-after-card.s13-hoverable:hover .s13-hover-reveal { opacity: 1; }

.s13-hr-title {
    font-weight: bold;
    color: var(--accent-blue);
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.2rem;
    width: 80%;
    text-align: center;
}

/* Big takeaway */
.s13-takeaway {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 0.5rem 0.8rem;
    margin-top: 0.5rem;
    background: #F7F9FC;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.s13-takeaway-label {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    white-space: nowrap;
    border-right: 1px solid var(--border-light);
    padding-right: 1rem;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.s13-takeaway-body {
    font-family: var(--font-body);
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}

.s13-keyword {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--accent-blue);
    font-weight: bold;
}

/* Bottom pipeline */
.s13-pipeline-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
    gap: 0;
}

.s13-pipe {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    background: #FAFBFC;
    border: 1px solid var(--border-light);
    padding: 0.25rem 0.6rem;
}

.s13-pipe-arr {
    font-size: 1.15rem;
    color: var(--border-accent);
    padding: 0 0.25rem;
}

/* Slide 13 animations */
.s13-anim { opacity: 0; }

@keyframes s13FadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes s13SlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

#slide-13.active .s13-anim-1 { animation: s13FadeUp  0.35s ease forwards 0.05s; }
#slide-13.active .s13-anim-2 { animation: s13FadeUp  0.3s  ease forwards 0.2s;  }
#slide-13.active .s13-anim-3 { animation: s13SlideIn 0.35s ease forwards 0.35s; }
#slide-13.active .s13-anim-4 { animation: s13SlideIn 0.35s ease forwards 0.5s;  }
#slide-13.active .s13-anim-5 { animation: s13SlideIn 0.35s ease forwards 0.65s; }
#slide-13.active .s13-anim-6 { animation: s13FadeUp  0.4s  ease forwards 0.85s; }
#slide-13.active .s13-anim-7 { animation: s13FadeUp  0.3s  ease forwards 1.1s;  }

/* Print / PDF Media Query */

/* ============================================================
   SLIDE 14 — CURRENT PROGRESS
   ============================================================ */

.s14-layout {
    display: flex;
    flex-direction: column;
    padding: 0.8rem 2.5rem 0.6rem;
    height: 100%;
    box-sizing: border-box;
}

.s14-title-block { margin-bottom: 0.3rem; }

.s14-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.15rem;
}

/* ── Hero: two progress bars ── */
.s14-hero {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-light);
}

.s14-track-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: relative;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-light);
    background: #FAFBFC;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.s14-track-block.s14-hoverable:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 3px 12px rgba(0,100,200,0.06);
}

.s14-track-pct {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: bold;
    color: var(--accent-blue);
    line-height: 1;
}

.s14-track-label {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
}

.s14-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.3rem 0 0.2rem;
}

.s14-bar-bg {
    height: 10px;
    background: #E8EDF2;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.s14-bar-fill {
    height: 100%;
    background: var(--accent-blue);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.85;
}

.s14-bar-capstone {
    background: #1A3A6C;
}

.s14-bar-ends {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.s14-track-desc {
    font-family: var(--font-label);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Track divider */
.s14-track-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    flex-shrink: 0;
}

.s14-divider-label {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.5;
    border: 1px dashed var(--border-light);
    padding: 0.3rem 0.4rem;
}

/* Hover reveals on track blocks */
.s14-hover-reveal {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 0.5rem;
}

.s14-track-block.s14-hoverable:hover .s14-hover-reveal { opacity: 1; }

.s14-hr-title {
    font-weight: bold;
    color: var(--accent-blue);
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.2rem;
    width: 80%;
    text-align: center;
}

/* ── Main 3-column area ── */
.s14-main {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 1rem;
    padding-top: 0.5rem;
}

.s14-col-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Completed rail (left) */
.s14-col-done {
    width: 28%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.s14-rail {
    display: flex;
    flex-direction: column;
}

.s14-rail-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-label);
    font-size: 1.15rem;
    color: var(--text-primary);
}

.s14-tick {
    font-family: var(--font-tech);
    font-size: 0.95rem;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.s14-rail-connector {
    width: 1px;
    height: 6px;
    background: var(--border-light);
    margin-left: 7px;
}

/* Center position block */
.s14-position-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s14-journey-strip {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
    margin-bottom: 0.3rem;
}

.s14-jnode {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--text-muted);
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border-light);
    white-space: nowrap;
}

.s14-jnode-active {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background: #F0F5FF;
    font-weight: bold;
}

.s14-jarr {
    font-size: 0.95rem;
    color: var(--border-accent);
    padding: 0 0.1rem;
}

.s14-here-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.s14-arrow-up {
    font-size: 1.15rem;
    color: var(--accent-blue);
    line-height: 1;
}

.s14-here-label {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--accent-blue);
    letter-spacing: 1px;
}

/* Requirements (right) */
.s14-col-req {
    width: 28%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.s14-req-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.s14-req-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    background: #FAFBFC;
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
    flex: 1;
    transition: border-color 0.25s ease;
}

.s14-req-item.s14-hoverable:hover {
    border-color: var(--accent-blue);
}

.s14-req-num {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--accent-blue);
    flex-shrink: 0;
    font-weight: bold;
}

.s14-req-text {
    font-family: var(--font-label);
    font-size: 1.15rem;
    color: var(--text-primary);
}

.s14-req-reveal {
    font-size: 0.9rem;
    line-height: 1.5;
}

.s14-req-item.s14-hoverable:hover .s14-hover-reveal { opacity: 1; }

/* Status bar */
.s14-status-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-top: 1px solid var(--border-light);
    padding-top: 0.4rem;
    margin-top: auto;
    flex-wrap: wrap;
}

.s14-status-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-muted);
}

.s14-status-note {
    font-family: var(--font-label);
    font-size: 0.9rem;
    color: var(--text-secondary);
    flex: 1;
}

.s14-status-sep {
    font-size: 1.15rem;
    color: var(--border-light);
}

.s14-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3AAA35;
    display: inline-block;
    flex-shrink: 0;
}

/* Slide 14 animations */
.s14-anim { opacity: 0; }

@keyframes s14FadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

#slide-14.active .s14-anim-1 { animation: s14FadeUp 0.3s  ease forwards 0.05s; }
#slide-14.active .s14-anim-2 { animation: s14FadeUp 0.4s  ease forwards 0.2s;  }
#slide-14.active .s14-anim-3 { animation: s14FadeUp 0.35s ease forwards 0.45s; }
#slide-14.active .s14-anim-4 { animation: s14FadeUp 0.35s ease forwards 0.55s; }
#slide-14.active .s14-anim-5 { animation: s14FadeUp 0.35s ease forwards 0.65s; }
#slide-14.active .s14-anim-6 { animation: s14FadeUp 0.3s  ease forwards 0.85s; }

/* ============================================================
   SLIDE 15 — NEXT PHASE
   ============================================================ */

.s15-layout {
    display: flex;
    flex-direction: column;
    padding: 1.2rem 3rem 1rem;
    height: 100%;
    box-sizing: border-box;
}

.s15-title-block { margin-bottom: 1.5rem; }

.s15-subtitle {
    font-family: var(--font-tech);
    font-size: 1.35rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-top: 0.15rem;
}

/* Grid */
.s15-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

/* Card */
.s15-card {
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: row;
    padding: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.s15-card-rule {
    width: 4px;
    background: var(--accent-blue);
    flex-shrink: 0;
}

.s15-card-inner {
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.s15-card-num {
    font-family: var(--font-tech);
    font-size: 1.4rem;
    color: var(--text-muted);
    font-weight: bold;
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    opacity: 0.5;
}

.s15-card-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    letter-spacing: 1.5px;
    margin: 0 0 0.4rem 0;
    text-transform: uppercase;
}

.s15-card-sub {
    font-family: var(--font-label);
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 0.6rem 0;
    font-weight: bold;
}

.s15-card-body {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Bottom Direction */
.s15-direction {
    margin-top: 1.5rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.s15-dir-label {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    background: var(--bg-surface);
    padding: 0 0.5rem;
    margin-top: -1.2rem;
}

.s15-dir-pipeline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.s15-dir-node {
    font-family: var(--font-tech);
    font-size: 1.05rem;
    color: var(--accent-blue);
    font-weight: bold;
    letter-spacing: 1px;
}

.s15-dir-arr {
    font-size: 0.95rem;
    color: var(--border-accent);
}

.s15-tech-focus {
    margin-top: 0.8rem;
    text-align: center;
}

.s15-tech-label {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-right: 0.5rem;
}

.s15-tech-items {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
}

/* Slide 15 animations */
.s15-anim { opacity: 0; }

@keyframes s15FadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes s15SlideInRight {
    from { opacity: 0; transform: translateX(-15px); }
    to   { opacity: 1; transform: translateX(0); }
}

#slide-15.active .s15-anim-1 { animation: s15FadeUp 0.35s ease forwards 0.05s; }
#slide-15.active .s15-anim-2 { animation: s15SlideInRight 0.35s ease forwards 0.2s; }
#slide-15.active .s15-anim-3 { animation: s15SlideInRight 0.35s ease forwards 0.3s; }
#slide-15.active .s15-anim-4 { animation: s15SlideInRight 0.35s ease forwards 0.4s; }
#slide-15.active .s15-anim-5 { animation: s15SlideInRight 0.35s ease forwards 0.5s; }
#slide-15.active .s15-anim-6 { animation: s15FadeUp 0.4s ease forwards 0.7s; }
#slide-15.active .s15-anim-7 { animation: s15FadeUp 0.4s ease forwards 0.9s; }

/* ============================================================
   SLIDE 16 — CLOSING / KEY TAKEAWAY
   ============================================================ */

.s16-layout {
    display: flex;
    flex-direction: column;
    padding: 3rem 4rem;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: space-between;
}

/* Top: Eyebrow */
.s16-top {
    margin-bottom: 2rem;
}

.s16-eyebrow {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 2.5px;
    line-height: 1.6;
    text-transform: uppercase;
}

/* Center: Title & Takeaway */
.s16-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2rem;
}

.s16-main-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    color: var(--text-primary);
    letter-spacing: 3px;
    margin: 0 0 1.5rem 0;
}

.s16-takeaway-block {
    position: relative;
    padding: 1.5rem 2rem;
    background: #F7F9FC;
    border: 1px solid var(--border-light);
    margin: 0 auto;
    max-width: 850px;
}

.s16-quote-mark {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--border-accent);
    line-height: 0;
    position: absolute;
    opacity: 0.6;
}
.s16-quote-mark:first-child {
    top: 1rem;
    left: 1rem;
}
.s16-quote-mark:last-child {
    bottom: 0rem;
    right: 1rem;
}

.s16-takeaway-text {
    font-family: var(--font-body);
    font-size: 1.8rem;
    color: var(--accent-blue);
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

/* Middle: Metrics */
.s16-metrics {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
}

.s16-metric-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.s16-metric-divider {
    width: 1px;
    height: 50px;
    background: var(--border-light);
    margin-top: 0.5rem;
}

.s16-metric-val {
    font-family: var(--font-heading);
    font-size: 3.8rem;
    color: var(--text-primary);
    line-height: 1;
    font-weight: bold;
}

.s16-metric-pct {
    font-size: 2.2rem;
    color: var(--accent-blue);
}

.s16-metric-label {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 2px;
}

.s16-metric-sub {
    font-family: var(--font-tech);
    font-size: 0.9rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-top: 0.3rem;
    background: #FAFBFC;
    border: 1px solid var(--border-light);
    padding: 0.2rem 0.6rem;
}

/* Bottom: Footer */
.s16-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.s16-capabilities {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-primary);
    letter-spacing: 2px;
    border-top: 1px dashed var(--border-light);
    border-bottom: 1px dashed var(--border-light);
    padding: 0.6rem 2rem;
}

.s16-thank-you h2 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    letter-spacing: 3px;
    margin: 0 0 0.5rem 0;
}

.s16-footer-info {
    font-family: var(--font-tech);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0;
    letter-spacing: 1.5px;
}

/* Slide 16 animations */
.s16-anim { opacity: 0; }

@keyframes s16FadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#slide-16.active .s16-anim-1 { animation: s16FadeUp 0.5s ease forwards 0.1s; }
#slide-16.active .s16-anim-2 { animation: s16FadeUp 0.5s ease forwards 0.3s; }
#slide-16.active .s16-anim-3 { animation: s16FadeUp 0.5s ease forwards 0.5s; }
#slide-16.active .s16-anim-4 { animation: s16FadeUp 0.5s ease forwards 0.8s; }
#slide-16.active .s16-anim-5 { animation: s16FadeUp 0.5s ease forwards 1.1s; }
#slide-16.active .s16-anim-6 { animation: s16FadeUp 0.5s ease forwards 1.3s; }

@media print {

        overflow: visible;
        background-color: #FFF;
        display: block;
        height: auto;
    }
    .presentation-ui, .notes-panel {
        display: none !important;
    }
    .presentation-wrapper {
        display: block;
    }
    .deck {
        max-width: none;
        max-height: none;
        box-shadow: none;
        border: none;
        aspect-ratio: auto;
    }
    .slide {
        position: relative;
        opacity: 1;
        visibility: visible;
        page-break-after: always;
        height: 100vh;
        border: 1px solid #CCC;
        margin-bottom: 1rem;
    }
}