/**
 * BigBen CRM — EduGrowth Interview Styles
 * Styles for interview listing and single interview pages
 */

/* ============================================
   EduGrowth Hub Header
   ============================================ */

.edugrowth-hero {
    padding: 6.5rem 0 3rem;
    text-align: center;
    background: linear-gradient(135deg, #fef6f9 0%, #f0f4ff 50%, #f5f0ff 100%);
    position: relative;
    overflow: hidden;
}

.edugrowth-hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(237, 83, 138, 0.06) 0%, transparent 70%);
    border-radius: 50%;
}

.edugrowth-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    background: rgba(237, 83, 138, 0.08);
    border: 1px solid rgba(237, 83, 138, 0.15);
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary, #ed538a);
    margin-bottom: 1.25rem;
}

.edugrowth-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.edugrowth-hero__subtitle {
    font-size: 1.125rem;
    color: var(--text-light, #6b7280);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.edugrowth-hero__speakers-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid rgba(237, 83, 138, 0.2);
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary, #ed538a);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: background 0.2s, border-color 0.2s;
}

.edugrowth-hero__speakers-link:hover {
    background: rgba(237, 83, 138, 0.06);
    border-color: rgba(237, 83, 138, 0.4);
}

.edugrowth-hero__stats {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.edugrowth-hero__stat {
    text-align: center;
}

.edugrowth-hero__stat-number {
    display: block;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 800;
    font-size: 2rem;
    color: var(--primary, #ed538a);
    line-height: 1.1;
}

.edugrowth-hero__stat-label {
    font-size: 0.8125rem;
    color: var(--text-light, #6b7280);
    margin-top: 0.25rem;
}

/* ============================================
   Topic Filter (reuses article filter pattern)
   ============================================ */

.edugrowth-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 0;
}

.edugrowth-filter__item {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-light, #6b7280);
    background-color: var(--primary-pale, #fef6f9);
    border-radius: 100px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.edugrowth-filter__item:hover {
    color: var(--primary, #ed538a);
    background-color: rgba(237, 83, 138, 0.1);
}

.edugrowth-filter__item.is-active {
    color: white;
    background-color: var(--primary, #ed538a);
}

/* ============================================
   Interview Cards Grid
   ============================================ */

.interviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
    padding-bottom: 3rem;
}

.interview-card {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(45, 49, 66, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.interview-card:hover {
    border-color: rgba(237, 83, 138, 0.25);
    box-shadow: 0 8px 32px rgba(45, 49, 66, 0.08);
    transform: translateY(-4px);
}

.interview-card__header {
    padding: 1.5rem 1.5rem 1rem;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0.25rem 1rem;
    align-items: start;
}

.interview-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    grid-column: 1;
    grid-row: 1 / 3;
}

.interview-card__avatar--photo {
    object-fit: cover;
    font-size: 0;
}

.interview-card__speaker-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.interview-card__speaker-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text, #1a1a2e);
    line-height: 1.3;
}

.interview-card__speaker-role {
    font-size: 0.8125rem;
    color: var(--text-light, #6b7280);
    margin-top: 0.125rem;
}

.interview-card__topic {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 0.125rem;
}

.interview-card__content {
    padding: 0 1.5rem;
    flex: 1;
}

.interview-card__title {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.35;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.interview-card__title a {
    color: var(--text, #1a1a2e);
    text-decoration: none;
    transition: color 0.25s ease;
}

.interview-card__title a:hover {
    color: var(--primary, #ed538a);
}

.interview-card__excerpt {
    font-size: 0.9375rem;
    color: var(--text-light, #6b7280);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.interview-card__results {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.interview-card__result {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: #ecfdf5;
    color: #059669;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
}

.interview-card__footer {
    padding: 1rem 1.5rem;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(45, 49, 66, 0.06);
    font-size: 0.8125rem;
    color: var(--text-light, #6b7280);
}

.interview-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.interview-card__link {
    font-weight: 600;
    color: var(--primary, #ed538a);
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.interview-card__link:hover {
    opacity: 0.8;
}

/* ============================================
   Single Interview Page — Speaker Card
   ============================================ */

.interview-speaker-wrap {
    background: var(--primary-pale, #fef6f9);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    overflow: hidden;
    margin-bottom: 2rem;
}

.interview-speaker {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.interview-speaker__avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.interview-speaker__avatar--photo {
    object-fit: cover;
    font-size: 0;
}

.interview-speaker__info {
    flex: 1;
}

.interview-speaker__name {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 1.1875rem;
    color: var(--text, #1a1a2e);
    margin-bottom: 0.25rem;
}

.interview-speaker__role {
    font-size: 0.9375rem;
    color: var(--text-light, #6b7280);
    margin-bottom: 0.375rem;
}

.interview-speaker__meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--text-light, #6b7280);
}

.interview-speaker__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ============================================
   Watch Interview Button
   ============================================ */

.interview-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.125rem;
    background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
    color: white;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 600;
    font-size: 0.8125rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s ease;
    margin-left: auto;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.15);
}

.interview-watch-btn:hover {
    background: linear-gradient(135deg, #006daa 0%, #005a8c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 136, 204, 0.25);
    color: white;
}

.interview-watch-btn i,
.interview-watch-btn svg {
    flex-shrink: 0;
}

/* ============================================
   Key Results Banner
   ============================================ */

.interview-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.interview-result {
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid rgba(5, 150, 105, 0.12);
    border-radius: 14px;
}

.interview-result__number {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 800;
    font-size: 1.75rem;
    color: #059669;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.interview-result__label {
    font-size: 0.8125rem;
    color: #065f46;
    line-height: 1.4;
}

/* ============================================
   Quote Block (interview-specific)
   ============================================ */

.interview-quote {
    position: relative;
    padding: 1.75rem 2rem 1.75rem 2.5rem;
    margin: 2rem 0;
    background: linear-gradient(135deg, #fef6f9 0%, #fff5f8 100%);
    border-left: 4px solid var(--primary, #ed538a);
    border-radius: 0 16px 16px 0;
}

.interview-quote::before {
    content: '\201C';
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    font-family: Georgia, serif;
    font-size: 3rem;
    color: var(--primary, #ed538a);
    opacity: 0.2;
    line-height: 1;
}

.interview-quote__text {
    font-size: 1.0625rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--text, #1a1a2e);
    margin-bottom: 0.75rem;
}

.interview-quote__author {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary, #ed538a);
}

.interview-quote__role {
    font-size: 0.8125rem;
    color: var(--text-light, #6b7280);
}

/* ============================================
   Takeaway Block
   ============================================ */

.interview-takeaway {
    padding: 1.5rem;
    margin: 2rem 0;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 16px;
}

.interview-takeaway__title {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 1.0625rem;
    color: #1e40af;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.interview-takeaway ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.interview-takeaway li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text, #1a1a2e);
}

.interview-takeaway li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #2563eb;
    font-weight: 700;
}

/* ============================================
   Related Content Links
   ============================================ */

.interview-related {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(45, 49, 66, 0.06);
}

.interview-related__title {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.interview-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.interview-related__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--primary-pale, #fef6f9);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.interview-related__link:hover {
    border-color: rgba(237, 83, 138, 0.2);
    background: #fff;
    box-shadow: 0 4px 16px rgba(45, 49, 66, 0.06);
}

.interview-related__link-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.interview-related__link-text {
    flex: 1;
}

.interview-related__link-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light, #6b7280);
}

.interview-related__link-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text, #1a1a2e);
    line-height: 1.3;
    margin-top: 0.125rem;
}

/* ============================================
   Phone Mockup (CSS-only app preview)
   ============================================ */

.phone-mockup {
    width: 320px;
    max-width: 100%;
    margin: 2rem auto;
    background: #1a1a2e;
    border-radius: 32px;
    padding: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.phone-mockup__notch {
    width: 120px;
    height: 24px;
    background: #1a1a2e;
    border-radius: 0 0 16px 16px;
    margin: 0 auto -12px;
    position: relative;
    z-index: 2;
}

.phone-mockup__screen {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
}

.phone-mockup__header {
    background: linear-gradient(135deg, var(--primary, #ed538a), #ff6b9d);
    color: white;
    padding: 2rem 1.25rem 1.25rem;
    text-align: center;
}

.phone-mockup__header-title {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.phone-mockup__header-sub {
    font-size: 0.75rem;
    opacity: 0.8;
}

.phone-mockup__body {
    padding: 1rem 1.25rem;
}

.phone-mockup__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.phone-mockup__item:last-child {
    border-bottom: none;
}

.phone-mockup__item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.phone-mockup__item-text {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text, #1a1a2e);
    line-height: 1.4;
}

.phone-mockup__item-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    white-space: nowrap;
}

/* ============================================
   Visual Timeline
   ============================================ */

.visual-timeline {
    margin: 2rem 0;
    padding: 0 0 0 0;
    list-style: none !important;
    position: relative;
    counter-reset: none;
}

.visual-timeline > li {
    list-style: none !important;
}

.visual-timeline > li::marker {
    content: none;
    display: none;
}

.visual-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--primary, #ed538a), #7c3aed);
    border-radius: 2px;
}

.visual-timeline__item {
    position: relative;
    padding-left: 52px;
    padding-bottom: 1.5rem;
    margin-bottom: 0;
}

.visual-timeline__item:last-child {
    padding-bottom: 0;
}

.visual-timeline__dot {
    position: absolute;
    left: 10px;
    top: 0.125rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary, #ed538a);
    z-index: 1;
}

.visual-timeline__item--done .visual-timeline__dot {
    background: var(--primary, #ed538a);
}

.visual-timeline__day {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--primary, #ed538a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.visual-timeline__title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text, #1a1a2e);
    margin-bottom: 0.25rem;
}

.visual-timeline__desc {
    font-size: 0.8125rem;
    color: var(--text-light, #6b7280);
    line-height: 1.5;
}

/* ============================================
   Sticker Grid (visual showcase)
   ============================================ */

.sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.sticker-card {
    text-align: center;
    padding: 1rem 0.75rem;
    background: #fff;
    border: 2px solid rgba(45, 49, 66, 0.06);
    border-radius: 14px;
    transition: all 0.25s ease;
}

.sticker-card:hover {
    border-color: rgba(237, 83, 138, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.sticker-card__icon {
    font-size: 2rem;
    margin-bottom: 0.375rem;
    line-height: 1;
}

.sticker-card__name {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text, #1a1a2e);
    margin-bottom: 0.125rem;
}

.sticker-card__desc {
    font-size: 0.6875rem;
    color: var(--text-light, #6b7280);
    line-height: 1.3;
}

.sticker-card__type {
    display: inline-block;
    margin-top: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sticker-card__type--auto {
    background: #ecfdf5;
    color: #059669;
}

.sticker-card__type--manual {
    background: #eff6ff;
    color: #2563eb;
}

/* ============================================
   Feature Highlight Block
   ============================================ */

.feature-highlight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.feature-highlight__card {
    padding: 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(45, 49, 66, 0.06);
}

.feature-highlight__card--primary {
    background: linear-gradient(135deg, #fef6f9, #fff5f8);
    border-color: rgba(237, 83, 138, 0.1);
}

.feature-highlight__card--secondary {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border-color: rgba(5, 150, 105, 0.1);
}

.feature-highlight__icon {
    margin-bottom: 0.75rem;
}

.feature-highlight__title {
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
    color: var(--text, #1a1a2e);
}

.feature-highlight__text {
    font-size: 0.875rem;
    color: var(--text-light, #6b7280);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .feature-highlight {
        grid-template-columns: 1fr;
    }

    .sticker-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Conversion Funnel (gamification results)
   ============================================ */

.conversion-funnel {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.conversion-funnel__step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 0.375rem;
}

.conversion-funnel__step:last-child {
    margin-bottom: 0;
}

.conversion-funnel__step--1 { width: 100%; background: #f87171; }
.conversion-funnel__step--2 { width: 88%; background: #fb923c; }
.conversion-funnel__step--3 { width: 74%; background: #38bdf8; }
.conversion-funnel__step--4 { width: 60%; background: #34d399; }

.conversion-funnel__number {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 800;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.conversion-funnel__label {
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0.95;
    text-align: left;
}

/* ============================================
   Mistake Cards (ошибки / антипаттерны)
   ============================================ */

.mistake-cards {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mistake-cards__item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0.25rem 1rem;
    padding: 1.25rem 1.5rem;
    background: #fef2f2;
    border-left: 3px solid #f87171;
    border-radius: 10px;
}

.mistake-cards__item > .mistake-cards__icon {
    grid-row: 1 / span 2;
    align-self: start;
}

.mistake-cards__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    border-radius: 8px;
    color: #dc2626;
}

.mistake-cards__title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #991b1b;
    margin-bottom: 0.25rem;
}

.mistake-cards__text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #44403c;
}

@media (max-width: 600px) {
    .mistake-cards__item {
        padding: 1rem;
        gap: 0.75rem;
    }
}

/* Mistake Cards — card variant (alias for __item) */
.mistake-cards__card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fef2f2;
    border-left: 3px solid #f87171;
    border-radius: 10px;
}

.mistake-cards__card--good {
    background: #ecfdf5;
    border-left-color: #34d399;
}

/* Mistake Cards — grid variant (wrong/right pairs) */
.mistake-cards__title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mistake-cards__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Card variant (icon/title/text) — vertical stack, side by side */
.mistake-cards__grid > .mistake-cards__card:not(:has(.mistake-cards__wrong)) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
}

.mistake-cards__grid > .mistake-cards__card:not(:has(.mistake-cards__wrong)) .mistake-cards__text {
    text-align: left;
    width: 100%;
}

.mistake-cards__card--good .mistake-cards__icon {
    background: #d1fae5;
    color: #059669;
}

/* Wrong/right pairs — span full width, 2-column inside */
.mistake-cards__grid > .mistake-cards__card:has(.mistake-cards__wrong) {
    grid-column: 1 / -1;
    background: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    box-shadow: none;
    border: none;
}

.mistake-cards__wrong,
.mistake-cards__right {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 0.125rem 0.625rem;
    align-content: start;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    border-radius: 12px;
}

.mistake-cards__wrong {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.mistake-cards__right {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.mistake-cards__wrong > .mistake-cards__icon,
.mistake-cards__right > .mistake-cards__icon {
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 1px;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mistake-cards__wrong > .mistake-cards__title {
    font-size: 0.9375rem;
    color: #991b1b;
    margin-bottom: 0;
}

.mistake-cards__right > .mistake-cards__title {
    font-size: 0.9375rem;
    color: #065f46;
    margin-bottom: 0;
}

.mistake-cards__wrong > .mistake-cards__text {
    color: #78350f;
}

.mistake-cards__right > .mistake-cards__text {
    color: #064e3b;
}

.mistake-cards__wrong i { color: #dc2626; flex-shrink: 0; }
.mistake-cards__right i { color: #059669; flex-shrink: 0; }

@media (max-width: 600px) {
    .mistake-cards__grid {
        grid-template-columns: 1fr;
    }
    .mistake-cards__grid > .mistake-cards__card:has(.mistake-cards__wrong) {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Format Cards (horizontal scroll)
   ============================================ */

.format-cards-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0 1rem;
    margin: 1.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.format-cards-scroll::-webkit-scrollbar { height: 4px; }
.format-cards-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 2px; }
.format-cards-scroll::-webkit-scrollbar-thumb { background: var(--primary, #ed538a); border-radius: 2px; }

.format-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    padding: 1.25rem;
    background: white;
    border: 2px solid rgba(45, 49, 66, 0.06);
    border-radius: 16px;
    transition: border-color 0.25s ease;
}

.format-card:hover { border-color: rgba(237, 83, 138, 0.2); }

.format-card__icon { margin-bottom: 0.75rem; }
.format-card__title { font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.375rem; color: var(--text); }
.format-card__audience { font-size: 0.75rem; color: var(--text-light); margin-bottom: 0.5rem; }
.format-card__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.format-card__tag {
    font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem;
    border-radius: 100px; white-space: nowrap;
}

/* Format Cards Scroll — BEM variant (format-cards-scroll__*) */
.format-cards-scroll__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.25rem 0 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.format-cards-scroll__track::-webkit-scrollbar { height: 4px; }
.format-cards-scroll__track::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 2px; }
.format-cards-scroll__track::-webkit-scrollbar-thumb { background: var(--primary, #ed538a); border-radius: 2px; }

.format-cards-scroll__card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    padding: 1.25rem;
    background: white;
    border: 2px solid rgba(45, 49, 66, 0.06);
    border-radius: 16px;
    transition: border-color 0.25s ease;
}

.format-cards-scroll__card:hover { border-color: rgba(237, 83, 138, 0.2); }

.format-cards-scroll__icon { margin-bottom: 0.75rem; color: var(--primary, #ed538a); }
.format-cards-scroll__title { font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.375rem; color: var(--text, #1a1a2e); }
.format-cards-scroll__text { font-size: 0.8125rem; line-height: 1.5; color: var(--text-light, #64748b); }

/* ============================================
   Salary Calculator
   ============================================ */

.salary-calculator {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 2px solid rgba(45, 49, 66, 0.06);
    border-radius: 16px;
}

.salary-calculator__title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
}

.salary-calculator__inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.salary-calculator__field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.salary-calculator__field input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 2px solid rgba(45, 49, 66, 0.1);
    border-radius: 10px;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    transition: border-color 0.2s;
    background: white;
}

.salary-calculator__field input:focus {
    outline: none;
    border-color: var(--primary, #ed538a);
}

.salary-calculator__results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.salary-calculator__result {
    text-align: center;
    padding: 1rem 0.75rem;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.25s;
}

.salary-calculator__result--1 { background: #fef2f2; }
.salary-calculator__result--2 { background: #fffbeb; }
.salary-calculator__result--3 { background: #ecfdf5; border-color: rgba(5, 150, 105, 0.15); }

.salary-calculator__result-label {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 0.375rem;
}

.salary-calculator__result--1 .salary-calculator__result-label { color: #dc2626; }
.salary-calculator__result--2 .salary-calculator__result-label { color: #d97706; }
.salary-calculator__result--3 .salary-calculator__result-label { color: #059669; }

.salary-calculator__result-value {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 800; font-size: 1.5rem;
}

.salary-calculator__result--1 .salary-calculator__result-value { color: #dc2626; }
.salary-calculator__result--2 .salary-calculator__result-value { color: #d97706; }
.salary-calculator__result--3 .salary-calculator__result-value { color: #059669; }

.salary-calculator__result-detail {
    font-size: 0.75rem; color: var(--text-light); margin-top: 0.25rem;
}

/* ============================================
   Data Flow Diagram
   ============================================ */

.data-flow {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.data-flow__row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.data-flow__node {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: center;
}

.data-flow__node--input { background: #eff6ff; color: #1e40af; border: 1px solid rgba(37, 99, 235, 0.15); }
.data-flow__node--process { background: var(--primary, #ed538a); color: white; font-size: 0.9375rem; padding: 1rem 2rem; border-radius: 14px; }
.data-flow__node--output { background: #ecfdf5; color: #065f46; border: 1px solid rgba(5, 150, 105, 0.15); }
.data-flow__node--decision { background: #fffbeb; color: #92400e; border: 1px solid rgba(217, 119, 6, 0.15); }

.data-flow__arrow {
    text-align: center;
    padding: 0.5rem 0;
    color: var(--text-light);
    font-size: 1.25rem;
    line-height: 1;
}

/* Data Flow — step variant (horizontal cards with icon/title/desc) */
.data-flow:has(.data-flow__step) {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}

.data-flow:has(.data-flow__step) .data-flow__arrow {
    display: flex;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
    width: 32px;
    justify-content: center;
    color: rgba(45, 49, 66, 0.25);
}

.data-flow__step {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1rem 1rem;
    background: white;
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid rgba(45, 49, 66, 0.06);
}

.data-flow__step-icon,
.data-flow__step > .data-flow__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    color: var(--primary, #ed538a);
}

.data-flow__step-title,
.data-flow__step > .data-flow__label {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: 0;
    color: var(--text-dark, #1a1a2e);
}

.data-flow__step-desc {
    font-size: 0.8125rem;
    color: var(--text-light, #6b7280);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .data-flow:has(.data-flow__step) {
        flex-direction: column;
        gap: 0;
    }
    .data-flow:has(.data-flow__step) .data-flow__arrow {
        transform: rotate(90deg);
        width: auto;
        padding: 0.125rem 0;
    }
    .data-flow__step {
        padding: 1rem;
    }
}

/* ============================================
   School Checklist (interactive)
   ============================================ */

.school-checklist {
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border: 2px solid rgba(45, 49, 66, 0.08);
    border-radius: 16px;
}

.school-checklist__title {
    font-weight: 700; font-size: 1rem; margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem; color: var(--text);
}

.school-checklist__item {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.75rem 0; border-bottom: 1px solid rgba(45, 49, 66, 0.06);
    cursor: pointer; user-select: none;
}

.school-checklist__item:last-child { border-bottom: none; }

.school-checklist__checkbox,
.school-checklist__item input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid rgba(45, 49, 66, 0.2); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; margin-top: 0.125rem;
    cursor: pointer; background: transparent;
}

.school-checklist__item.checked .school-checklist__checkbox,
.school-checklist__item.checked input[type="checkbox"] {
    background: #059669; border-color: #059669; color: white;
}

.school-checklist__item.checked input[type="checkbox"]::after {
    content: '✓'; color: white; font-size: 14px; font-weight: 700; line-height: 1;
}

.school-checklist__text { font-size: 0.9375rem; color: var(--text); line-height: 1.5; }

.school-checklist__result {
    margin-top: 1rem; padding: 1rem; border-radius: 12px; text-align: center;
    font-weight: 700; font-size: 0.9375rem; transition: all 0.3s;
}

.school-checklist__result--bad { background: #fef2f2; color: #dc2626; }
.school-checklist__result--ok { background: #fffbeb; color: #d97706; }
.school-checklist__result--good { background: #ecfdf5; color: #059669; }

/* ============================================
   Progress Milestones (horizontal bar)
   ============================================ */

.progress-milestones {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fef6f9, #fff5f8);
    border-radius: 16px;
}

.progress-milestones__bar {
    position: relative;
    height: 6px;
    background: rgba(237, 83, 138, 0.15);
    border-radius: 3px;
    margin: 2rem 0 0;
}

.progress-milestones__fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--primary, #ed538a), #7c3aed);
    border-radius: 4px;
}

.progress-milestones__marks {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: -10px;
}

.progress-milestones__mark {
    text-align: center;
    position: relative;
}

.progress-milestones__mark-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: white; border: 3px solid var(--primary, #ed538a);
    margin: 0 auto 0.5rem;
    position: relative;
    z-index: 1;
}

.progress-milestones__mark--reached .progress-milestones__mark-dot {
    background: var(--primary, #ed538a);
}

.progress-milestones__mark-coins {
    font-weight: 800; font-size: 0.75rem; color: var(--primary, #ed538a);
}

.progress-milestones__mark-prize {
    font-size: 0.6875rem; color: var(--text-light); max-width: 70px;
    line-height: 1.3; margin-top: 0.125rem;
}

/* Progress Milestones — step track variant */
.progress-milestones[data-title]::before {
    content: attr(data-title);
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 1.25rem;
}

.progress-milestones__track {
    display: flex;
    gap: 0;
    position: relative;
}

.progress-milestones__track::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 24px;
    right: 24px;
    height: 3px;
    background: rgba(237, 83, 138, 0.15);
    border-radius: 2px;
    z-index: 0;
}

.progress-milestones__step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 0.25rem;
}

.progress-milestones__marker {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.625rem;
    font-weight: 800;
    font-size: 0.875rem;
    background: #fff;
    border: 3px solid rgba(237, 83, 138, 0.25);
    color: var(--text-light, #64748b);
    transition: all 0.3s;
}

.progress-milestones__step--done .progress-milestones__marker {
    background: var(--primary, #ed538a);
    border-color: var(--primary, #ed538a);
    color: #fff;
}

.progress-milestones__step--active .progress-milestones__marker {
    background: #fff;
    border-color: var(--primary, #ed538a);
    color: var(--primary, #ed538a);
    box-shadow: 0 0 0 4px rgba(237, 83, 138, 0.15);
}

.progress-milestones__label {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--text-light, #64748b);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.progress-milestones__step--done .progress-milestones__label,
.progress-milestones__step--active .progress-milestones__label {
    color: var(--text-dark, #1a1a2e);
}

.progress-milestones__desc {
    font-size: 0.75rem;
    color: var(--text-light, #64748b);
    line-height: 1.4;
    max-width: 160px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .progress-milestones__track {
        flex-direction: column;
        gap: 0.75rem;
    }
    .progress-milestones__track::before {
        top: 0;
        bottom: 0;
        left: 18px;
        right: auto;
        width: 3px;
        height: auto;
    }
    .progress-milestones__step {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        text-align: left;
    }
    .progress-milestones__marker {
        margin: 0;
        flex-shrink: 0;
    }
    .progress-milestones__desc {
        max-width: none;
    }
}

/* Progress Milestones — Card variant */
.progress-milestones--cards .progress-milestones__track {
    gap: 1rem;
}
.progress-milestones--cards .progress-milestones__track::before {
    display: none;
}
.progress-milestones--cards .progress-milestones__step {
    background: white;
    border-radius: 14px;
    padding: 1.25rem;
    text-align: left;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid rgba(45, 49, 66, 0.06);
}
.progress-milestones--cards .progress-milestones__marker {
    margin: 0 0 0.75rem 0;
}
.progress-milestones--cards .progress-milestones__label {
    color: var(--text-dark, #1a1a2e);
    font-size: 0.9375rem;
}
.progress-milestones--cards .progress-milestones__desc {
    max-width: none;
    margin: 0;
}
@media (max-width: 600px) {
    .progress-milestones--cards .progress-milestones__track {
        flex-direction: column;
    }
    .progress-milestones--cards .progress-milestones__step {
        display: block;
        text-align: left;
    }
    .progress-milestones--cards .progress-milestones__marker {
        margin: 0 0 0.625rem 0;
    }
}

/* ============================================
   Role Tabs
   ============================================ */

.role-tabs { margin: 2rem 0; }

.role-tabs__nav {
    display: flex; gap: 0.25rem; overflow-x: auto;
    border-bottom: 2px solid rgba(45, 49, 66, 0.06);
    padding-bottom: 0; margin-bottom: 0;
}

.role-tabs__btn {
    padding: 0.625rem 1rem; border: none; background: none;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 0.8125rem; font-weight: 600; color: var(--text-light);
    cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all 0.2s;
}

.role-tabs__btn:hover { color: var(--text); }
.role-tabs__btn.active { color: var(--primary, #ed538a); border-bottom-color: var(--primary, #ed538a); }

.role-tabs__panel {
    display: none; padding: 1.25rem 0;
}

.role-tabs__panel.active { display: block; }

/* ============================================
   Prompt Card (with copy)
   ============================================ */

.prompt-card {
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    background: #1a1a2e;
    border-radius: 12px;
    color: #e2e8f0;
    position: relative;
}

.prompt-card__label {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 0.5rem;
}

.prompt-card__text {
    font-size: 0.875rem; line-height: 1.6; color: #e2e8f0;
    font-family: var(--font-body, 'Manrope', sans-serif);
}

.prompt-card__copy {
    position: absolute; top: 0.75rem; right: 0.75rem;
    padding: 0.375rem 0.75rem; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; background: rgba(255,255,255,0.05);
    color: #94a3b8; font-size: 0.6875rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    font-family: var(--font-body, 'Manrope', sans-serif);
}

.prompt-card__copy:hover { background: rgba(255,255,255,0.1); color: white; }
.prompt-card__copy.copied { background: #059669; color: white; border-color: #059669; }

/* ============================================
   Sandwich Visual (feedback principle)
   ============================================ */

.sandwich-visual {
    margin: 2rem 0;
    border-radius: 16px;
    overflow: hidden;
}

.sandwich-visual__layer {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sandwich-visual__layer--positive {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    color: #065f46;
}

.sandwich-visual__layer--negative {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #92400e;
}

.sandwich-visual__layer-icon { flex-shrink: 0; margin-top: 0.125rem; }

.sandwich-visual__layer-content { flex: 1; }

.sandwich-visual__layer-title {
    font-weight: 700; font-size: 0.875rem; margin-bottom: 0.25rem;
}

.sandwich-visual__layer-example {
    font-size: 0.875rem; line-height: 1.5; font-style: italic;
}

/* ============================================
   Feedback Cards (2x3 grid)
   ============================================ */

.feedback-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.feedback-card {
    padding: 1.25rem;
    background: white;
    border: 2px solid rgba(45, 49, 66, 0.06);
    border-radius: 14px;
    transition: border-color 0.25s;
}

.feedback-card:hover { border-color: rgba(237, 83, 138, 0.15); }

.feedback-card__header {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}

.feedback-card__icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.feedback-card__title { font-weight: 700; font-size: 0.9375rem; color: var(--text); }

.feedback-card__detail {
    font-size: 0.8125rem; color: var(--text-light); line-height: 1.5;
}

.feedback-card__meta {
    margin-top: 0.5rem; font-size: 0.6875rem; font-weight: 600;
    color: var(--text-light); display: flex; gap: 0.75rem;
}

/* ============================================
   Content Split (two-column text + visual)
   ============================================ */

.content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
    align-items: start;
}

.content-split--reverse {
    direction: rtl;
}

.content-split--reverse > * {
    direction: ltr;
}

.content-split__text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--text, #1a1a2e);
}

.content-split__text p {
    margin-bottom: 0.75rem;
}

.content-split__text p:last-child {
    margin-bottom: 0;
}

.content-split__visual {
    padding: 1.25rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 16px;
    border: 1px solid rgba(45, 49, 66, 0.06);
}

.content-split__visual--accent {
    background: linear-gradient(135deg, #fef6f9, #f5f0ff);
    border-color: rgba(237, 83, 138, 0.08);
}

.content-split__visual-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text, #1a1a2e);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.content-split__visual-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-split__visual-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    color: var(--text, #1a1a2e);
    line-height: 1.4;
    border-bottom: 1px solid rgba(45, 49, 66, 0.04);
}

.content-split__visual-list li:last-child {
    border-bottom: none;
}

.content-split__visual-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.content-split__visual-stat-number {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--primary, #ed538a);
    line-height: 1;
}

.content-split__visual-stat-label {
    font-size: 0.8125rem;
    color: var(--text-light, #6b7280);
}

@media (max-width: 768px) {
    .content-split {
        grid-template-columns: 1fr;
    }
    .content-split--reverse {
        direction: ltr;
    }
}

/* ============================================
   EduGrowth Proof Card (for embedding in blog articles)
   ============================================ */

.edugrowth-proof {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    background: linear-gradient(135deg, #fef6f9 0%, #f5f0ff 100%);
    border: 1px solid rgba(237, 83, 138, 0.12);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

.edugrowth-proof:hover {
    border-color: rgba(237, 83, 138, 0.3);
    box-shadow: 0 6px 24px rgba(237, 83, 138, 0.08);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.article__body a.edugrowth-proof,
.article__body a.edugrowth-proof:hover {
    text-decoration: none;
    color: inherit;
}

.edugrowth-proof__avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    background: var(--primary, #ed538a);
}

.edugrowth-proof__avatar--photo {
    object-fit: cover;
    font-size: 0;
    align-self: flex-start;
}

.edugrowth-proof__body {
    flex: 1;
    min-width: 0;
}

.edugrowth-proof__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary, #ed538a);
    margin-bottom: 0.25rem;
}

.edugrowth-proof__quote {
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--text, #1a1a2e);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.edugrowth-proof__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.edugrowth-proof__speaker {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text, #1a1a2e);
}

.edugrowth-proof__speaker span {
    font-weight: 400;
    color: var(--text-light, #6b7280);
}

.edugrowth-proof__cta {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary, #ed538a);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .edugrowth-proof {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ============================================
   Article body overrides for edugrowth components
   ============================================ */

.article__body .content-split__visual-list {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

.article__body .content-split__visual-list li {
    padding-left: 0;
    margin-bottom: 0;
}

.article__body ol.visual-timeline,
.article__body ul.visual-timeline {
    padding-left: 0;
    list-style: none;
    margin-bottom: 2rem;
}

.article__body .visual-timeline li {
    padding-left: 52px;
    margin-bottom: 0;
}

.article__body .visual-timeline li::marker {
    content: none;
    display: none;
    color: transparent;
}

.article__body .phone-mockup {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.article__body {
    overflow-x: hidden;
}

.article__body .feature-highlight,
.article__body .sticker-grid {
    margin-bottom: 2rem;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .interviews-grid {
        grid-template-columns: 1fr;
    }

    .edugrowth-hero__stats {
        gap: 1.5rem;
    }

    .edugrowth-hero__stat-number {
        font-size: 1.625rem;
    }

    .interview-speaker {
        flex-direction: column;
        text-align: center;
    }

    .interview-speaker__meta {
        justify-content: center;
    }

    .interview-results {
        grid-template-columns: repeat(2, 1fr);
    }

    .interview-quote {
        padding: 1.25rem 1.25rem 1.25rem 1.75rem;
    }

    .edugrowth-filter {
        gap: 0.375rem;
    }

    .edugrowth-filter__item {
        padding: 0.375rem 0.875rem;
        font-size: 0.8125rem;
    }
}

/* ============================================
   Speaker Links (in articles & cards)
   ============================================ */

.interview-speaker__name-link {
    text-decoration: none;
    color: inherit;
}

.interview-speaker__name-link:hover .interview-speaker__name {
    color: var(--primary, #ed538a);
}

.interview-card__speaker-name-link {
    text-decoration: none;
    color: inherit;
}

.interview-card__speaker-name-link:hover .interview-card__speaker-name {
    color: var(--primary, #ed538a);
}

/* ============================================
   Speakers Catalog Grid
   ============================================ */

.speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.speaker-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    gap: 0.625rem;
}

.speaker-card:hover {
    border-color: var(--primary, #ed538a);
    box-shadow: 0 4px 12px rgba(237, 83, 138, 0.08);
}

/* Top row: avatar + name/school */
.speaker-card__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.speaker-card__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.speaker-card__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary, #ed538a);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
}

.speaker-card__head {
    flex: 1;
    min-width: 0;
}

.speaker-card__name {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: nowrap;
    overflow: hidden;
}

.speaker-card__subtitle {
    font-size: 0.75rem;
    color: var(--text-light, #9ca3af);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer: topics + count */
.speaker-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
}

.speaker-card__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.speaker-card__topic-tag {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 500;
}

.speaker-card__articles-count {
    font-size: 0.75rem;
    color: var(--text-light, #9ca3af);
    white-space: nowrap;
}

/* ============================================
   Speaker Profile — Card (unified hero+bio+ach)
   ============================================ */

.sp-card {
    padding: 1.5rem 0 0;
}

.sp-card__inner {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, #fef6f9 0%, #f0f4ff 50%, #f5f0ff 100%);
    border-radius: 20px;
}

.sp-card__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sp-card__status-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.sp-card__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sp-card__avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.sp-card__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary, #ed538a);
    color: #fff;
    font-size: 3rem;
    font-weight: 600;
}

.sp-card__share {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 100px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
}

.sp-card__share:hover {
    border-color: var(--primary, #ed538a);
    color: var(--primary, #ed538a);
}

.sp-card__right {
    flex: 1;
    min-width: 0;
}

.sp-card__header {
    margin-bottom: 0.5rem;
}

.sp-card__name {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

.sp-card__role {
    font-size: 0.9375rem;
    color: var(--primary, #ed538a);
    font-weight: 500;
}

.sp-card__subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* CRM User Badge */
.sp-badge-crm {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.sp-badge-crm--sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    margin-left: 0.375rem;
}

.sp-card__meta .sp-badge-crm--inline {
    display: none;
    color: #2e7d32;
    font-size: 0.6875rem;
    font-weight: 600;
}

.sp-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.625rem;
}

.sp-card__meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.sp-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.sp-card__tag {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: 100px;
    border: 1px solid;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}

.sp-card__tag:hover { opacity: 0.75; }

.sp-card__bio {
    margin-bottom: 0.75rem;
}

.sp-card__bio p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-secondary, #374151);
    margin: 0 0 0.5rem;
}

.sp-card__bio p:last-child { margin-bottom: 0; }

/* Achievements inline */
.sp-card__achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.sp-card__ach {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(237, 83, 138, 0.1);
}

.sp-card__ach-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary, #ed538a);
}

.sp-card__ach-label {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

/* ============================================
   Speaker Profile — Two-column layout
   ============================================ */

.sp-columns {
    padding: 2rem 0 0;
}

.sp-columns__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.sp-columns__grid--single {
    grid-template-columns: 1fr;
    max-width: 720px;
}

.sp-columns__title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text, #111827);
}

/* Highlights */
.sp-highlights {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.sp-highlights__item {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    background: #f9fafb;
    border-radius: 10px;
    border-left: 3px solid #059669;
}

.sp-highlights__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: #059669;
    border-radius: 50%;
    margin-top: 0.5rem;
}

.sp-highlights__item p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text, #111827);
    margin: 0;
}

/* Quotes */
.sp-quotes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sp-quotes__item {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fef6f9 0%, #faf5ff 100%);
    border-radius: 10px;
    border: none;
    margin: 0;
}

.sp-quotes__item p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text, #111827);
    margin: 0 0 0.5rem;
    font-style: italic;
}

.sp-quotes__item footer a {
    font-size: 0.75rem;
    color: var(--primary, #ed538a);
    text-decoration: none;
    font-weight: 500;
}

.sp-quotes__item footer a:hover {
    text-decoration: underline;
}

/* ============================================
   Speaker Profile — Interview cards (compact)
   ============================================ */

.sp-interviews {
    padding: 2rem 0 0;
}

.sp-interviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.sp-interview-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sp-interview-card:hover {
    border-color: var(--primary, #ed538a);
    box-shadow: 0 2px 8px rgba(237, 83, 138, 0.08);
}

.sp-interview-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sp-interview-card__topic {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-interview-card__duration {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-light, #9ca3af);
}

.sp-interview-card__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.375rem;
    color: var(--text, #111827);
}

.sp-interview-card__excerpt {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 0.5rem;
}

.sp-interview-card__results {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: auto;
}

.sp-interview-card__results span {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    background: #fef6f9;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--primary, #ed538a);
}

/* ============================================
   Speaker Profile — Responsive
   ============================================ */

@media (max-width: 1024px) {
    .speakers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-columns__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .speakers-grid {
        grid-template-columns: 1fr;
    }

    .sp-card__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.25rem;
        gap: 1rem;
    }

    .sp-card__left {
        gap: 0.5rem;
    }

    .sp-card__status-badges {
        display: none;
    }

    .sp-card__meta .sp-badge-crm--inline {
        display: inline-flex;
    }

    .sp-card__name {
        font-size: 1.375rem;
    }

    .sp-card__subtitle {
        justify-content: center;
    }

    .sp-card__meta {
        justify-content: center;
        gap: 0.375rem;
    }

    .sp-card__meta span {
        justify-content: center;
    }

    .sp-card__tags {
        justify-content: center;
    }

    .sp-card__avatar {
        width: 100px;
        height: 100px;
    }

    .sp-card__bio {
        font-size: 0.875rem;
        text-align: left;
    }

    .sp-card__achievements {
        justify-content: center;
    }

    .sp-card__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .sp-card__actions .sp-invite-btn {
        justify-content: center;
    }

    .sp-card__actions .sp-card__share {
        justify-content: center;
    }

    .sp-interviews__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Speaker Radar Chart
   ============================================ */

.sp-radar {
    padding: 2rem 0 0;
}

.sp-radar__inner {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 0;
    background: linear-gradient(135deg, #fafbff 0%, #f8f6ff 50%, #fef8fa 100%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.sp-radar__help {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: color 0.2s, background 0.2s;
}

.sp-radar__help svg {
    width: 18px;
    height: 18px;
}

.sp-radar__help:hover {
    color: #6b7280;
    background: rgba(255,255,255,0.95);
}

.sp-radar__chart {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.sp-radar__chart svg {
    width: 100%;
    max-width: 440px;
    height: auto;
}

.sp-radar__tags {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.75rem;
    border-right: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.5);
    order: -1;
}

/* Facts column (right) */
.sp-radar__facts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.75rem;
    border-left: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.5);
}

.sp-radar__facts-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--text, #111827);
}

.sp-radar__fact {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.sp-radar__fact:last-child {
    border-bottom: none;
}

.sp-radar__fact-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--primary, #ed538a);
    margin-top: 1px;
}

.sp-radar__fact-text {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text, #111827);
    font-weight: 500;
}

.sp-radar__tags-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--text, #111827);
}

.sp-radar__tag-group {
    margin-bottom: 1.125rem;
}

.sp-radar__tag-group:last-child {
    margin-bottom: 0;
}

.sp-radar__tag-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light, #9ca3af);
    margin-bottom: 0.5rem;
}

.sp-radar__tag-value {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    border: 1px solid;
}

.sp-radar__tag-value--result {
    background: #ecfdf5;
    color: #059669;
    border-color: rgba(5, 150, 105, 0.15);
}

.sp-radar__tag-value--style {
    background: #eff6ff;
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.15);
}

.sp-radar__tag-value--tone {
    background: #fef3c7;
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.15);
}

/* Invite Button */
.sp-invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.sp-invite-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

/* Invite Modal */
.sp-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.sp-modal-overlay.is-open {
    display: flex;
}

.sp-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    position: relative;
    animation: spModalFadeIn 0.25s ease-out;
    display: flex;
    flex-direction: column;
}

.sp-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 2rem 0;
    flex-shrink: 0;
}

.sp-modal__body {
    overflow-y: auto;
    padding: 1rem 2rem 2rem;
}

@keyframes spModalFadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .sp-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .sp-modal-overlay .sp-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        animation: spSheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .sp-modal-overlay .sp-modal__header {
        padding: 12px 20px 0;
    }

    .sp-modal-overlay .sp-modal__header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    .sp-modal-overlay .sp-modal__body {
        padding: 0.75rem 20px 32px;
        padding-bottom: max(32px, env(safe-area-inset-bottom));
    }

    @keyframes spSheetSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

.sp-modal__close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #6b7280;
    line-height: 1;
    flex-shrink: 0;
}

.sp-modal__close:hover {
    background: #e5e7eb;
}

.sp-modal__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
}

.sp-modal__subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 1.5rem;
}

.sp-modal__field {
    margin-bottom: 1rem;
}

.sp-modal__field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text, #111827);
}

.sp-modal__field input,
.sp-modal__field select,
.sp-modal__field textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--text, #111827);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sp-modal__field input:focus,
.sp-modal__field select:focus,
.sp-modal__field textarea:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.sp-modal__field textarea {
    resize: vertical;
    min-height: 80px;
}

.sp-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.sp-modal__submit {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: opacity 0.2s;
}

.sp-modal__submit:hover {
    opacity: 0.9;
}

.sp-modal__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sp-modal__success {
    text-align: center;
    padding: 2rem 0;
}

.sp-modal__success-icon {
    width: 64px;
    height: 64px;
    background: #ecfdf5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #059669;
    font-size: 2rem;
}

.sp-modal__success h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
}

.sp-modal__success p {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin: 0;
}

/* Radar Help Modal — Layout */
.sp-modal--help {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: 85vh;
}

.sp-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.sp-modal__header .sp-modal__title {
    margin-bottom: 0.25rem;
}

.sp-modal__header .sp-modal__subtitle {
    margin-bottom: 0;
}

.sp-modal__header .sp-modal__close {
    position: static;
    flex-shrink: 0;
}

.sp-modal__body {
    overflow-y: auto;
    padding: 1.25rem 2rem 2rem;
    -webkit-overflow-scrolling: touch;
}

/* Mobile: bottom sheet */
@media (max-width: 640px) {
    #radarHelpModal {
        align-items: flex-end;
    }

    #radarHelpModal .sp-modal--help {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        padding: 0;
        animation: radarSheetUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    #radarHelpModal .sp-modal--help::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 10px auto 0;
        flex-shrink: 0;
    }

    #radarHelpModal .sp-modal__header {
        padding: 0.75rem 1.25rem 0.75rem;
    }

    #radarHelpModal .sp-modal__body {
        padding: 1rem 1.25rem 1.5rem;
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    @keyframes radarSheetUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

/* Radar Help Modal Content */
.sp-radar-help__section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light, #9ca3af);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.sp-radar-help__item {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f9fafb;
}

.sp-radar-help__item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sp-radar-help__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text, #111827);
    margin-bottom: 0.25rem;
}

.sp-radar-help__desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary, #6b7280);
}

.sp-radar-help__desc strong {
    color: var(--text, #111827);
    font-weight: 600;
}

/* ============================================
   Speakers Catalog — Advanced Filters
   ============================================ */

/* Compact Catalog Header */
.sp-catalog-header {
    padding: 1.25rem 0 0;
}

.sp-catalog-header__inner {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.sp-catalog-header__title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    color: var(--text, #111827);
}

.sp-catalog-header__count {
    font-size: 0.875rem;
    color: var(--text-light, #9ca3af);
}

/* Unified Filter Panel */
.sp-panel {
    padding: 0.75rem 0 0;
}

.sp-panel__inner {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    overflow: hidden;
}

.sp-panel__row {
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.sp-panel__row:last-child {
    border-bottom: none;
}

/* Topic filter inside panel — outlined compact style */
.sp-panel .edugrowth-filter {
    padding: 0.375rem 0;
    gap: 0.375rem;
}

.sp-panel .edugrowth-filter__item {
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    background-color: transparent;
    border: 1px solid #e5e7eb;
    color: var(--text-secondary, #6b7280);
}

.sp-panel .edugrowth-filter__item:hover {
    border-color: var(--primary, #ed538a);
    color: var(--primary, #ed538a);
    background-color: transparent;
}

.sp-panel .edugrowth-filter__item.is-active {
    border-color: var(--primary, #ed538a);
    background-color: var(--primary, #ed538a);
    color: #fff;
}

.sp-panel__row--delivery {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.sp-filters__sep {
    width: 1px;
    height: 16px;
    background: #e5e7eb;
    margin: 0 0.375rem;
    flex-shrink: 0;
}

.sp-panel__row--sliders {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.625rem 1.25rem;
}

.sp-panel__row-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light, #9ca3af);
    white-space: nowrap;
    padding-top: 0.25rem;
}

/* Mobile toggle for advanced filters */
.sp-panel__toggle-row {
    display: none;
}

.sp-panel__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: none;
    background: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}

.sp-panel__toggle:active {
    background: #f9fafb;
}

.sp-panel__toggle-arrow {
    margin-left: auto;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.sp-panel__toggle.is-expanded .sp-panel__toggle-arrow {
    transform: rotate(180deg);
}

.sp-panel__toggle-count {
    display: none;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    background: var(--primary, #ed538a);
    border-radius: 100px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    padding: 0 5px;
}

.sp-panel__toggle-count.is-visible {
    display: inline-block;
}

/* Status bar — appears when filters active */
.sp-panel__status {
    display: none;
    align-items: center;
    gap: 1rem;
    background: #fef6f9;
    padding: 0.5rem 1.25rem;
}

.sp-panel__status.is-visible {
    display: flex;
}

.sp-filters__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light, #9ca3af);
    white-space: nowrap;
    margin-right: 0.125rem;
}

.sp-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid #e5e7eb;
    border-radius: 100px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.sp-filter-tag:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.sp-filter-tag.is-active {
    border-color: var(--primary, #ed538a);
    background: #fef6f9;
    color: var(--primary, #ed538a);
}

.sp-filter-tag--result.is-active {
    border-color: #059669;
    background: #ecfdf5;
    color: #059669;
}

.sp-filter-tag--style.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.sp-filter-tag--tone.is-active {
    border-color: #d97706;
    background: #fef3c7;
    color: #d97706;
}

.sp-filters__count {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.5rem;
}

.sp-filters__count strong {
    color: var(--text, #111827);
}

.sp-filters__reset {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.8125rem;
    color: var(--primary, #ed538a);
    cursor: pointer;
    font-weight: 500;
}

.sp-filters__reset:hover {
    text-decoration: underline;
}

.speaker-card.is-hidden {
    display: none;
}

/* Leadership Badges */
.sp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.sp-badge-leader {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}

.sp-badge-leader--silver {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-color: rgba(107, 114, 128, 0.15);
    color: #4b5563;
}

.sp-badge-leader--context {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: rgba(5, 150, 105, 0.15);
    color: #065f46;
}

.sp-badge-leader__icon {
    font-size: 0.6875rem;
    line-height: 1;
}

/* Match Score Sliders (inside panel) */
.sp-match__reset {
    padding: 0;
    border: none;
    background: none;
    font-size: 0.75rem;
    color: var(--primary, #ed538a);
    cursor: pointer;
    font-weight: 500;
    display: none;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.sp-match__reset:hover {
    text-decoration: underline;
}

.sp-match__sliders {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 1.25rem;
    flex: 1;
}

.sp-match__slider {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sp-match__slider-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.sp-match__slider-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text, #111827);
}

.sp-match__slider-value {
    font-size: 0.6875rem;
    color: var(--text-light, #9ca3af);
    font-weight: 500;
}

.sp-match__slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #e5e7eb;
    outline: none;
    cursor: pointer;
}

.sp-match__slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary, #ed538a);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}

.sp-match__slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary, #ed538a);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}

.speaker-card__match {
    display: none;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.speaker-card__match.is-visible {
    display: flex;
}

.speaker-card__match-pct {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary, #ed538a);
    white-space: nowrap;
}

.speaker-card__match-bar {
    flex: 1;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.speaker-card__match-fill {
    height: 100%;
    background: var(--primary, #ed538a);
    border-radius: 2px;
    transition: width 0.3s;
}

@media (max-width: 900px) {
    .sp-match__sliders {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-panel__row--sliders {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .sp-panel__row {
        padding: 0.5rem 0.875rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .edugrowth-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding: 0.5rem 0 0.25rem;
        gap: 0.375rem;
        scrollbar-width: none;
    }

    .edugrowth-filter::-webkit-scrollbar {
        display: none;
    }

    .edugrowth-filter__item {
        white-space: nowrap;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        flex-shrink: 0;
        background-color: transparent;
        border: 1px solid #e5e7eb;
    }

    .edugrowth-filter__item.is-active {
        border-color: var(--primary, #ed538a);
        background-color: var(--primary, #ed538a);
    }

    /* Mobile: show toggle, collapse advanced panel */
    .sp-panel__toggle-row {
        display: block;
    }

    .sp-panel__advanced {
        display: none;
    }

    .sp-panel__advanced.is-expanded {
        display: block;
    }

    .sp-panel__row--delivery {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding-bottom: 0.375rem;
    }

    .sp-filters__sep {
        display: none;
    }

    .sp-filters__label {
        width: 100%;
        margin-top: 0.25rem;
    }

    .sp-match__sliders {
        grid-template-columns: 1fr 1fr;
    }

    .speakers-grid {
        grid-template-columns: 1fr;
    }

    .speaker-card {
        max-width: 100%;
        overflow: hidden;
    }

    .speaker-card__subtitle {
        max-width: 200px;
    }

    .sp-badges {
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .sp-catalog-header__title {
        font-size: 1.25rem;
    }

    .sp-catalog-header__inner {
        flex-direction: column;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .sp-match__sliders {
        grid-template-columns: 1fr 1fr;
    }
}

/* Radar responsive */
@media (max-width: 1100px) {
    .sp-radar__inner {
        grid-template-columns: 1fr 1fr;
    }

    .sp-radar__chart {
        grid-column: 1 / -1;
        order: -2;
    }

    .sp-radar__tags {
        border-right: 1px solid rgba(0,0,0,0.06);
        border-top: 1px solid rgba(0,0,0,0.06);
        order: 0;
    }

    .sp-radar__facts {
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.06);
    }
}

@media (max-width: 640px) {
    .sp-radar__inner {
        grid-template-columns: 1fr;
    }

    .sp-radar__tags {
        border-right: none;
    }

    .sp-radar__chart {
        padding: 1rem;
    }

    .sp-modal__row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Case Page
   ============================================ */

.case-hero {
    padding: 2rem 0 0;
}

.case-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.case-hero__tag {
    padding: 0.1875rem 0.625rem;
    background: rgba(237, 83, 138, 0.08);
    color: var(--primary, #ed538a);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.case-hero__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    max-width: 720px;
}

/* Case two-column layout */

.case-layout {
    padding: 1.5rem 0 2rem;
}

.case-layout__grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2.5rem;
    align-items: start;
}

.case-sidebar {
    order: 2;
}

.case-content__body {
    min-width: 0;
    order: 1;
}

/* Case sidebar */

.case-sidebar {
    position: sticky;
    top: 5.5rem;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: #f9fafb;
    border-radius: 16px;
}

.case-sidebar__speaker {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.case-sidebar__avatar {
    border-radius: 50%;
    object-fit: cover;
}

.case-sidebar__name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text, #111827);
    text-decoration: none;
    display: block;
}

.case-sidebar__name:hover { color: var(--primary, #ed538a); }

.case-sidebar__school {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.case-sidebar__city {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-light, #9ca3af);
}

.case-sidebar__metrics {
    padding: 0.75rem 0;
    border-top: 1px solid #e5e7eb;
    margin-bottom: 0.75rem;
}

.case-sidebar__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light, #9ca3af);
    margin: 0 0 0.5rem;
}

.case-sidebar__metric {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.case-sidebar__metric-value {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--primary, #ed538a);
    white-space: nowrap;
}

.case-sidebar__metric-label {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.case-sidebar__interview {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text, #111827);
    font-weight: 500;
    font-size: 0.8125rem;
    transition: border-color 0.2s;
}

.case-sidebar__interview:hover {
    border-color: var(--primary, #ed538a);
}

/* Other cases grid */

.case-other__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.case-other__card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s;
}

.case-other__card:hover { border-color: var(--primary, #ed538a); }

.case-other__header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.case-other__avatar {
    border-radius: 50%;
    object-fit: cover;
}

.case-other__name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.case-other__school {
    font-size: 0.6875rem;
    color: var(--text-light, #9ca3af);
}

.case-other__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--text, #111827);
}

.case-content__body h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
}

.case-content__body h2:first-child {
    margin-top: 0;
}

.case-content__body p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary, #374151);
    margin: 0 0 0.75rem;
}

/* Case quote */

.case-quote {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 3.25rem;
    background: linear-gradient(135deg, #fef6f9 0%, #faf5ff 100%);
    border-radius: 12px;
    border-left: 3px solid var(--primary, #ed538a);
    margin: 1.5rem 0;
}

.case-quote::before {
    content: '\201C';
    position: absolute;
    top: 0.5rem;
    left: 0.875rem;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--primary, #ed538a);
    opacity: 0.3;
    font-weight: 700;
}

.case-quote p {
    font-size: 1.0625rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--text, #111827);
    margin: 0 0 0.5rem;
}

.case-quote footer {
    font-size: 0.8125rem;
    color: var(--primary, #ed538a);
    font-style: normal;
    font-weight: 500;
}

.case-quote--secondary {
    background: #f9fafb;
    border-left-color: #d1d5db;
}

.case-quote--secondary::before {
    color: #9ca3af;
}

/* Solution steps */

.case-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.case-steps__item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.case-steps__number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary, #ed538a);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
}

.case-steps__content h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.case-steps__content p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Takeaway */

.case-takeaway {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    background: #f0fdf4;
    border-radius: 12px;
    border-left: 3px solid #059669;
    margin: 1.5rem 0;
}

.case-takeaway p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Interview link */

.case-interview-link {
    margin: 2rem 0;
}

.case-interview-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text, #111827);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.case-interview-link a:hover {
    border-color: var(--primary, #ed538a);
    box-shadow: 0 2px 8px rgba(237, 83, 138, 0.08);
}

@media (max-width: 768px) {
    .case-layout__grid {
        grid-template-columns: 1fr;
    }

    .case-sidebar {
        position: static;
        order: -1;
    }

    .case-steps__number {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .case-quote {
        padding: 1.25rem 1.25rem 1.25rem 2.75rem;
    }

    .case-other__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Case Lead Modal
   ============================================ */

.case-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.case-modal__content {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: caseModalIn 0.25s ease-out;
}

@keyframes caseModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.case-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-light, #9ca3af);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.case-modal__close:hover {
    background: #f3f4f6;
    color: var(--text, #111827);
}

.case-modal__title {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.case-modal__text {
    font-size: 0.9375rem;
    color: var(--text-secondary, #6b7280);
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

.case-modal__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.case-modal__form input[type="text"],
.case-modal__form input[type="tel"] {
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.case-modal__form input:focus {
    outline: none;
    border-color: var(--primary, #ed538a);
    box-shadow: 0 0 0 3px rgba(237, 83, 138, 0.1);
}

.case-modal__form .btn {
    padding: 0.875rem;
    font-size: 1rem;
    border-radius: 10px;
}

.case-modal__note {
    font-size: 0.75rem;
    color: var(--text-light, #9ca3af);
    text-align: center;
    margin: 0.75rem 0 0;
}

/* ============================================================
   Interview Video Player + Shorts Gallery
   Populated from landing/edugrowth/shorts.json — see
   docs/marketing/edugrowth-video-shorts.md
   ============================================================ */

.interview-video {
    margin: 2rem 0;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.interview-video video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    background: #000;
}

.interview-video__meta {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.85);
    font-variant-numeric: tabular-nums;
}

.interview-shorts {
    margin: 0.75rem 0 0;
    padding: 0;
}

.interview-shorts__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text, #111827);
}

.interview-shorts__count {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-light, #9ca3af);
}

.interview-shorts__grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.interview-shorts__grid::-webkit-scrollbar {
    height: 4px;
}

.interview-shorts__grid::-webkit-scrollbar-track {
    background: transparent;
}

.interview-shorts__grid::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.interview-shorts__item {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex: 0 0 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.interview-shorts__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.interview-shorts__item video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

.interview-shorts__caption {
    padding: 0.5rem 0.65rem;
    background: #fff;
    flex: 1;
    border-radius: 0 0 10px 10px;
}

.interview-shorts__name {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text, #111827);
}

.interview-shorts__feature {
    display: block;
    font-size: 0.65rem;
    color: var(--text-light, #9ca3af);
    margin-top: 0.15rem;
}

@media (max-width: 640px) {
    .interview-shorts__item {
        flex: 0 0 260px;
    }
}