/* /about — same visual language as /resources (quiz-app shell + tokens) */

body.about-page .main-content {
    padding-bottom: 0;
}

body.about-page .about-hero {
    padding: 32px 0 64px;
    background: linear-gradient(
        165deg,
        var(--qb-brand-off) 0%,
        var(--qb-bg) 45%,
        #eef6f0 100%
    );
}

body.about-page .about-hero-title {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: var(--qb-text-heading);
    margin-bottom: 1rem;
    line-height: 1.12;
}

body.about-page .about-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--qb-text-secondary);
    margin-bottom: 2rem;
}

body.about-page .about-hero-description {
    color: var(--qb-text-secondary);
}

body.about-page .about-hero-description strong {
    color: var(--qb-text-heading);
    font-weight: 600;
}

body.about-page .founder-overlay {
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    box-shadow: var(--qb-shadow-group);
}

body.about-page .founder-arrow,
body.about-page .founder-name {
    color: var(--qb-text-heading);
}

body.about-page .founder-title {
    color: var(--qb-text-tertiary);
}

body.about-page .hero-founder-img {
    box-shadow: var(--qb-shadow-group);
}

/* Our story */
body.about-page .our-story {
    padding: 80px 0;
    background: var(--qb-surface);
}

body.about-page .story-title {
    color: var(--qb-text-heading);
    font-size: clamp(26px, 4vw, 36px);
}

body.about-page .story-subtitle {
    color: var(--qb-text-secondary);
}

body.about-page .story-chapter {
    border-bottom-color: var(--qb-border);
}

body.about-page .chapter-number {
    color: var(--qb-brand-primary);
    opacity: 0.22;
}

body.about-page .chapter-title {
    color: var(--qb-text-heading);
}

body.about-page .chapter-description {
    color: var(--qb-text-secondary);
}

body.about-page .chapter-image {
    background: var(--qb-primary-soft);
    border: 1px solid rgba(90, 183, 116, 0.18);
}

/* Core values */
body.about-page .core-values {
    padding: 80px 0;
    background: var(--qb-bg);
}

body.about-page .values-title {
    color: var(--qb-text-heading);
    font-size: clamp(26px, 4vw, 36px);
}

body.about-page .values-subtitle {
    color: var(--qb-text-secondary);
}

body.about-page .value-card {
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    box-shadow: var(--qb-shadow-group);
}

body.about-page .value-card:hover {
    border-color: var(--qb-border-hover);
    box-shadow: 0 8px 24px rgba(7, 43, 46, 0.08);
}

body.about-page .value-icon {
    background: var(--qb-brand-deep);
    color: var(--qb-header-text);
}

body.about-page .value-title {
    color: var(--qb-text-heading);
}

body.about-page .value-description {
    color: var(--qb-text-secondary);
}

/* Team */
body.about-page .team-section {
    padding: 80px 0;
    background: var(--qb-surface);
}

body.about-page .team-title {
    color: var(--qb-text-heading);
    font-size: clamp(26px, 4vw, 36px);
}

body.about-page .team-subtitle {
    color: var(--qb-text-secondary);
}

body.about-page .team-member-card {
    background: var(--qb-surface-muted);
    border: 1px solid var(--qb-border);
    box-shadow: var(--qb-shadow-group);
}

body.about-page .team-member-info h3,
body.about-page .member-name {
    color: var(--qb-text-heading);
}

body.about-page .member-role {
    color: var(--qb-text-secondary);
}

body.about-page .member-description {
    color: var(--qb-text-secondary);
}

body.about-page .member-linkedin {
    background: var(--qb-brand-primary);
}

body.about-page .member-linkedin:hover {
    background: var(--qb-primary-hover);
}

/* Open positions — keep photo hero, align panel + CTA with brand */
body.about-page .open-positions {
    padding: 96px 0;
}

body.about-page .positions-text {
    background: rgba(7, 43, 46, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.about-page .positions-cta {
    background: var(--qb-brand-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

body.about-page .positions-cta:hover {
    background: var(--qb-primary-hover);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}