/* Landing Page Styles - QA Course Platform */
/* REFINED TYPOGRAPHY: Using smaller, more sophisticated sizing */

/* ============================================ */
/* HERO SECTION */
/* ============================================ */
.hero {
    padding: var(--space-2) 0 var(--space-2);
    margin-top: var(--space-16);
    position: relative;
}

.hero-content {
    text-align: center;
}

.hero-title {
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.hero-signature {
    font-family: var(--font-signature);
    color: var(--color-accent-purple);
    font-weight: 600;
    font-style: italic;
}

.hero-subtitle {
    font-size: var(--text-base);        /* REFINED: 16px instead of 18px */
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    font-weight: 500;
}

.hero-intro {
    font-size: var(--text-base);        /* REFINED: 16px instead of 18px */
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.intro-link {
    color: var(--color-accent-purple);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.intro-link:hover {
    border-bottom-color: var(--color-accent-purple);
}

/* Personal profile photo */
.author-intro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.author-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--color-accent-purple);
    object-fit: cover;
}

.author-text {
    flex: 1;
}

/* Personal comment blocks */
.author-comment {
    background: var(--color-bg-secondary);
    border-radius: 12px;
    padding: var(--space-6);
    margin: var(--space-12) 0;
    position: relative;
    font-style: italic;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-bg-tertiary);
}

.author-comment::before {
    content: '';
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 6px;
    height: 6px;
    background: var(--color-bright-cyan);
    border-radius: 50%;
}

.author-comment p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);          /* REFINED: 14px instead of 16px */
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

/* Button System */
.hero-cta {
    margin-bottom: var(--space-12);
}

/* ============================================ */
/* COURSE FOCUS CARDS */
/* ============================================ */
.course-focus {
    margin-top: var(--space-4);
}

.course-focus h2 {
    font-size: var(--text-xl);          /* REFINED: 20px instead of 24px */
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--space-6);      /* TIGHTER: reduced spacing */
}

/* Focus intro text (curriculum link) */
.focus-intro {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    font-weight: 500;
}

.focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.focus-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-bg-tertiary);
    border-radius: 12px;
    padding: var(--space-8);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card color theming */
.focus-card.purple { border-color: var(--color-bright-purple); }
.focus-card.cyan { border-color: var(--color-bright-cyan); }
.focus-card.green { border-color: var(--color-bright-green); }
.focus-card.pink { border-color: var(--color-bright-pink); }
.focus-card.orange { border-color: var(--color-bright-orange); }
.focus-card.yellow { border-color: var(--color-bright-yellow); }

.focus-card.purple:hover { border-color: var(--color-bright-purple); box-shadow: 0 4px 20px rgba(189, 147, 249, 0.2); }
.focus-card.cyan:hover { border-color: var(--color-bright-cyan); box-shadow: 0 4px 20px rgba(139, 233, 253, 0.2); }
.focus-card.green:hover { border-color: var(--color-bright-green); box-shadow: 0 4px 20px rgba(80, 250, 123, 0.2); }
.focus-card.pink:hover { border-color: var(--color-bright-pink); box-shadow: 0 4px 20px rgba(255, 121, 198, 0.2); }
.focus-card.orange:hover { border-color: var(--color-bright-orange); box-shadow: 0 4px 20px rgba(255, 184, 108, 0.2); }
.focus-card.yellow:hover { border-color: var(--color-bright-yellow); box-shadow: 0 4px 20px rgba(241, 250, 140, 0.2); }

.focus-card.purple .focus-examples h4 { color: var(--color-bright-purple); }
.focus-card.cyan .focus-examples h4 { color: var(--color-bright-cyan); }
.focus-card.green .focus-examples h4 { color: var(--color-bright-green); }
.focus-card.pink .focus-examples h4 { color: var(--color-bright-pink); }
.focus-card.orange .focus-examples h4 { color: var(--color-bright-orange); }
.focus-card.yellow .focus-examples h4 { color: var(--color-bright-yellow); }
.focus-card.purple .focus-examples li::before { color: var(--color-bright-purple); }
.focus-card.cyan .focus-examples li::before { color: var(--color-bright-cyan); }
.focus-card.green .focus-examples li::before { color: var(--color-bright-green); }
.focus-card.pink .focus-examples li::before { color: var(--color-bright-pink); }
.focus-card.orange .focus-examples li::before { color: var(--color-bright-orange); }
.focus-card.yellow .focus-examples li::before { color: var(--color-bright-yellow); }

/* Anti-pattern card theming */
.focus-card.anti { border-color: var(--color-bright-pink); }
.focus-card.anti:hover {
    border-color: var(--color-bright-pink);
    box-shadow: 0 4px 20px rgba(255, 121, 198, 0.2);
}
.focus-card.anti .focus-examples h4 { color: var(--color-bright-pink); }
.focus-card.anti .focus-examples li::before { color: var(--color-bright-pink); }

.focus-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* UNIFIED CARD TYPOGRAPHY - All cards use same refined sizes */
.focus-card h3 {
    font-size: var(--text-base);        /* REFINED: 16px - consistent for ALL cards */
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.2;                   /* Tighter line height */
}

.focus-card p {
    color: var(--color-text-muted);
    line-height: 1.5;                   /* REFINED: tighter line height */
    margin-bottom: var(--space-4);
    flex-grow: 1;
    font-size: var(--text-xs);          /* REFINED: 12px - consistent for ALL cards */
}

.focus-examples {
    background: var(--color-bg-primary);
    border-radius: 6px;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    margin-top: auto;
}

.focus-examples h4 {
    font-size: var(--text-xs);          /* REFINED: 12px instead of 14px */
    font-weight: 600;
    color: var(--color-accent-purple);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.focus-examples ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.focus-examples li {
    font-size: var(--text-xs);          /* REFINED: consistent 12px */
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
    position: relative;
    padding-left: var(--space-4);
    line-height: 1.4;                   /* Better line height for lists */
}

.focus-examples li::before {
    content: '•';
    color: var(--color-accent-purple);
    position: absolute;
    left: 0;
}

/* ============================================ */
/* ANTI-PATTERN SECTION */
/* ============================================ */
.anti-patterns {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.anti-patterns h2 {
    font-size: var(--text-xl);          /* REFINED: 20px instead of 24px */
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--space-6);      /* TIGHTER: reduced spacing */
}

.anti-summary {
    text-align: center;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-bg-tertiary);
    margin-top: var(--space-8);
}

.anti-summary p {
    font-size: var(--text-base);        /* REFINED: 16px instead of 18px */
    color: var(--color-text-secondary);
    font-weight: 500;
    margin: 0;
}

/* ============================================ */
/* PARTICIPANT PROFILES SECTION */
/* ============================================ */
.participant-profiles {
    margin-top: var(--space-16);
    margin-bottom: var(--space-16);
    background: var(--color-bg-secondary);
    padding: var(--space-6) 0;
}

.participant-profiles h2 {
    font-size: var(--text-xl);          /* REFINED: 20px instead of 24px */
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--space-6);      /* TIGHTER: reduced spacing */
}

.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.profile-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.profile-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 12px;
}

.profile-bullet.purple { background: var(--color-bright-purple); }
.profile-bullet.cyan { background: var(--color-bright-cyan); }
.profile-bullet.green { background: var(--color-bright-green); }
.profile-bullet.pink { background: var(--color-bright-pink); }
.profile-bullet.orange { background: var(--color-bright-orange); }

.profile-content h3 {
    font-size: var(--text-base);        /* REFINED: 16px - matches card titles */
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.profile-content p {
    color: var(--color-text-muted);
    line-height: 1.5;                   /* TIGHTER: better line height */
    margin: 0;
    font-size: var(--text-xs);          /* REFINED: 12px - matches card content */
}

.profiles-summary {
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-bg-tertiary);
}

.profiles-summary p {
    font-size: var(--text-base);        /* REFINED: 16px instead of 18px */
    color: var(--color-text-secondary);
    font-weight: 500;
    margin: 0;
    max-width: 800px;
    margin: 0 auto;
}

/* ============================================ */
/* PRICING SECTION */
/* ============================================ */
.pricing-section {
    margin-top: var(--space-16);
    margin-bottom: var(--space-8);      /* REDUCED: was space-16 */
    background: var(--color-bg-secondary);
    padding: var(--space-6) 0;
}

.pricing-section h2 {
    font-size: var(--text-xl);          /* REFINED: 20px instead of 24px */
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--space-6);      /* TIGHTER: reduced spacing */
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.pricing-card {
    background: var(--color-bg-primary);
    border: 2px solid var(--color-bg-tertiary);
    border-radius: 16px;
    padding: var(--space-8);
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-purple);
    box-shadow: 0 8px 25px rgba(138, 124, 168, 0.2);
}

.pricing-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.pricing-header h3 {
    font-size: var(--text-lg);          /* REFINED: 18px - reduced from larger */
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.price {
    font-size: var(--text-2xl);         /* REFINED: 24px instead of 30px */
    font-weight: 700;
    color: var(--color-accent-purple);
    margin-bottom: var(--space-2);
}

.pricing-features {
    flex-grow: 1;
    margin-bottom: var(--space-6);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);          /* REFINED: 12px instead of 14px */
    line-height: 1.4;
    color: var(--color-text-secondary);
}

/* Using muted accent instead of bright green for checkmarks */
.feature-check {
    width: 20px;
    height: 20px;
    background: var(--color-accent-purple);
    color: var(--color-text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 2px;
}

.pricing-cta {
    text-align: center;
}

.btn-pricing {
    display: inline-block;
    width: 100%;
    background: var(--color-accent-purple);
    color: var(--color-text-primary);
    border: 2px solid var(--color-accent-purple);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-pricing:hover {
    background: var(--color-accent-purple-dark);
    border-color: var(--color-accent-purple-dark);
    transform: translateY(-1px);
    color: var(--color-text-primary);
}

.pricing-note {
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-bg-tertiary);
}

.pricing-note p {
    font-size: var(--text-xs);          /* REFINED: 12px instead of 14px */
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

/* ============================================ */
/* WORKFLOW SECTION - Interactive Learning Path */
/* ============================================ */
.workflow-section {
    margin-top: var(--space-8);         /* REDUCED: from space-16 */
    margin-bottom: var(--space-8);      /* REDUCED: from space-16 */
    padding: var(--space-8) 0;          /* REDUCED: from space-16 */
}

.workflow-section h2 {
    font-size: var(--text-xl);          /* REFINED: 20px instead of 24px */
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--space-3);
}

.workflow-subtitle {
    text-align: center;
    font-size: var(--text-base);        /* REFINED: 16px instead of 18px */
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);      /* TIGHTER: reduced spacing */
}

/* Format Selector Tabs */
.format-selector {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.format-tab {
    padding: var(--space-3) var(--space-6);
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-bg-tertiary);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: var(--text-sm);          /* REFINED: 14px instead of 16px */
    color: var(--color-text-muted);
    position: relative;
}

.format-tab:hover {
    border-color: var(--color-accent-purple);
    color: var(--color-text-secondary);
}

.format-tab.active {
    background: var(--color-accent-purple);
    border-color: var(--color-accent-purple);
    color: var(--color-text-primary);
}

.format-tab.active::after {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 6px;
    height: 6px;
    background: var(--color-bright-green);
    border-radius: 50%;
}

/* Timeline Container */
.timeline-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-radius: 20px;
    border: 1px solid var(--color-bg-tertiary);
}

/* Timeline Content - Hidden by default */
.timeline-content {
    display: none;
}

.timeline-content.active {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);                /* TIGHTER: reduced gap */
}

.timeline-item {
    display: grid;
    grid-template-columns: 140px 20px 1fr;
    gap: var(--space-6);
    min-height: 100px;                  /* REDUCED: from 120px */
    align-items: start;
    margin-bottom: 0;
    position: relative;
    padding-top: var(--space-1);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding-top: var(--space-2);
}

.timeline-step-title {
    font-size: var(--text-xs);          /* REFINED: 12px instead of 14px */
    font-weight: 600;
    color: var(--color-accent-purple);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-step-duration {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    margin-top: var(--space-1);
}

.timeline-marker {
    position: relative;
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-top: var(--space-3);
}

.timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent-purple);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.timeline-dot.hollow {
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-accent-purple);
    box-sizing: border-box;
}

.timeline-line {
    position: absolute;
    top: 16px;
    bottom: -24px;                      /* ADJUSTED: for tighter gap */
    width: 6px;
    background: var(--color-bg-tertiary);
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item:last-child .timeline-line {
    display: none;
}

.timeline-description {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 80px;                   /* REDUCED: from 100px */
    padding-top: var(--space-1);
}

.timeline-description h4 {
    font-size: var(--text-sm);          /* REFINED: 14px instead of 16px */
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.timeline-description p {
    color: var(--color-text-muted);
    line-height: 1.5;                   /* REFINED: tighter line height */
    margin: 0 0 var(--space-2) 0;
    flex-grow: 1;
    font-size: var(--text-xs);          /* REFINED: 12px instead of 14px */
}

.timeline-description ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.timeline-description li {
    color: var(--color-text-muted);
    font-size: var(--text-xs);          /* REFINED: consistent 12px */
    margin-bottom: var(--space-1);
    padding-left: var(--space-4);
    position: relative;
    line-height: 1.4;
}

.timeline-description li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-accent-purple);
}

/* Module Release Info */
.module-info {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-accent-purple);
    border-radius: 12px;
    padding: var(--space-6);
    margin-top: var(--space-8);
    text-align: center;
}

.module-info h4 {
    font-size: var(--text-base);        /* REFINED: 16px instead of 18px */
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.module-info p {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);          /* REFINED: 12px instead of 14px */
    line-height: 1.5;
    margin: 0;
}

/* ============================================ */
/* COURSE CURRICULUM SECTION */
/* ============================================ */
.course-curriculum {
    margin-top: var(--space-4);         /* REDUCED: was space-8 */
    margin-bottom: var(--space-16);
    padding: var(--space-8) 0;          /* REDUCED: was space-12 */
}

.course-curriculum h2 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--space-3);
}

.curriculum-intro {
    text-align: center;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-12);
    font-weight: 500;
}

/* Learning Journey Roadmap */
.learning-roadmap {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* Step Block */
.step-section {
    display: flex;
    align-items: stretch;
    margin-bottom: var(--space-8);
    position: relative;
}

.step-section:last-child {
    margin-bottom: 0;
}

/* Step Info (Left Side) - MUTED DESIGN */
.step-info {
    width: 200px;
    background: var(--color-bg-secondary);
    border: 2px solid var(--step-color);
    border-radius: 12px;
    padding: var(--space-4);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    text-align: center;
}

.step-number {
    background: var(--step-color);
    color: var(--color-text-primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-base);
    margin: 0 auto var(--space-2);
}

.step-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

/* Step Colors - MUCH MORE MUTED progression matching page sophistication */
.step-section.step-1 {
    --step-color: var(--color-accent-purple);
}

.step-section.step-2 {
    --step-color: var(--color-accent-blue);
}

.step-section.step-3 {
    --step-color: #6d8a93;
}

.step-section.step-4 {
    --step-color: #6d937a;
}

.step-section.step-5 {
    --step-color: #6d9365;
}

.step-section.step-6 {
    --step-color: #938a65;
}

.step-section.step-7 {
    --step-color: #937e65;
}

.step-section.step-8 {
    --step-color: #936055;
}

/* Connection Line */
.step-connector {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.connector-line {
    width: 3px;
    height: 40px;
    background: linear-gradient(to bottom, var(--step-color), var(--next-step-color, var(--step-color)));
    border-radius: 2px;
}

.connector-circle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-bg-primary);
    border: 2px solid var(--step-color);
    border-radius: 50%;
}

/* Modules Content (Right Side) - Reusing card patterns from focus cards */
.modules-content {
    flex: 1;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--color-bg-tertiary);
    padding: var(--space-6);
    position: relative;
}

.modules-content::before {
    content: '';
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 6px;
    height: 6px;
    background: var(--step-color);
    border-radius: 50%;
}

/* Module Pair */
.module-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

/* Module Block - Similar to focus-card but adapted for curriculum */
.module-block {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-bg-tertiary);
    border-radius: 8px;
    padding: var(--space-4);
    transition: all 0.2s ease;
}

.module-block:hover {
    border-color: var(--step-color);
    transform: translateY(-1px);
}

.module-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.module-number {
    background: var(--step-color);
    color: var(--color-text-primary);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.module-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.module-description {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: var(--space-3);
}

.module-topics {
    list-style: none;
    padding: 0;
    margin: 0;
}

.module-topics li {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-bottom: var(--space-1);
    padding-left: var(--space-3);
    position: relative;
}

.module-topics li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--step-color);
    font-weight: 600;
}

.module-topics li:last-child {
    margin-bottom: 0;
}

/* Course Summary - Reusing pricing card pattern */
.course-summary {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-accent-purple);
    border-radius: 12px;
    padding: var(--space-8);
    text-align: center;
    max-width: 700px;
    margin: var(--space-12) auto 0;
    position: relative;
}

.course-summary::before {
    content: '';
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 6px;
    height: 6px;
    background: var(--color-bright-cyan);
    border-radius: 50%;
}

.course-summary h3 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.course-summary p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ============================================ */
/* FOOTER */
/* ============================================ */
.site-footer {
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-bg-tertiary);
    padding: var(--space-16) 0 var(--space-8);
    margin-top: var(--space-16);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.footer-title {
    font-size: var(--text-xl);          /* REFINED: 20px instead of 24px */
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.footer-signature {
    font-family: var(--font-signature);
    color: var(--color-accent-purple);
    font-weight: 600;
    font-style: italic;
}

.footer-description {
    font-size: var(--text-sm);          /* REFINED: 14px instead of 16px */
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

.footer-links {
    display: flex;
    gap: var(--space-8);
}

.footer-section h4 {
    font-size: var(--text-sm);          /* REFINED: 14px instead of 16px */
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin-bottom: var(--space-2);
}

.footer-section a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-xs);          /* REFINED: 12px instead of 14px */
    transition: color 0.2s ease;
}

.footer-section a:hover {
    color: var(--color-accent-purple);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-bg-tertiary);
}

.footer-copyright p {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    margin: 0;
    line-height: 1.4;
}

.footer-legal {
    margin-top: var(--space-1);
}

.footer-accent {
    display: flex;
    gap: var(--space-2);
}

/* ============================================ */
/* RESPONSIVE DESIGN */
/* ============================================ */
@media (max-width: 768px) {
    .hero {
        padding: var(--space-6) 0 var(--space-8);
    }

    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-intro {
        font-size: var(--text-sm);      /* REFINED: 14px on mobile */
        text-align: center;
    }

    .author-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-3);
    }

    .author-photo {
        width: 56px;
        height: 56px;
    }

    .author-comment {
        margin: var(--space-6) 0;
        padding: var(--space-4);
    }

    .author-comment p {
        font-size: var(--text-xs);      /* REFINED: 12px on mobile */
    }

    .focus-grid, .profiles-grid {
        grid-template-columns: 1fr;
    }

    .participant-profiles {
        padding: var(--space-12) 0;
        margin-top: var(--space-12);
        margin-bottom: var(--space-12);
    }

    .profile-item {
        gap: var(--space-3);
    }

    .profile-content h3 {
        font-size: var(--text-sm);      /* REFINED: 14px on mobile */
        line-height: 1.4;
    }

    .profile-bullet {
        margin-top: 8px;
    }

    .focus-card h3 {
        font-size: var(--text-sm);      /* REFINED: 14px on mobile */
    }

    /* Pricing responsive */
    .pricing-section {
        padding: var(--space-6) 0;
        margin-top: var(--space-12);
        margin-bottom: var(--space-12);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .pricing-card {
        padding: var(--space-6);
    }

    .pricing-header h3 {
        font-size: var(--text-base);    /* REFINED: 16px on mobile */
    }

    .price {
        font-size: var(--text-xl);      /* REFINED: 20px on mobile */
    }

    /* Footer responsive */
    .site-footer {
        padding: var(--space-6) 0 var(--space-6);
        margin-top: var(--space-12);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        margin-bottom: var(--space-8);
    }

    .footer-links {
        flex-direction: column;
        gap: var(--space-6);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    .footer-title {
        font-size: var(--text-lg);      /* REFINED: 18px on mobile */
    }

    /* Workflow responsive */
    .format-selector {
        gap: var(--space-2);
    }

    .format-tab {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);      /* REFINED: 12px on mobile */
    }

    .timeline-container {
        padding: var(--space-4);
    }

    .timeline-item {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        min-height: auto;
        grid-template-columns: none;
    }

    .timeline-description {
        min-height: auto;
    }

    .timeline-marker {
        display: none;
    }

    .timeline-step {
        width: auto;
        text-align: left;
    }

    /* Curriculum responsive - Timeline specific */
    .course-curriculum {
        padding: var(--space-6) 0;
        margin-top: var(--space-12);
        margin-bottom: var(--space-12);
    }

    .curriculum-intro {
        margin-bottom: var(--space-8);
    }

    .step-section {
        flex-direction: column;
        gap: var(--space-4);
    }

    .step-info {
        width: 100%;
    }

    .step-connector {
        display: none;
    }

    .module-pair {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .module-block {
        padding: var(--space-3);
    }

    .course-summary {
        padding: var(--space-6);
        margin: var(--space-8) auto 0;
    }
}