.about-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.about-nav {
    margin-bottom: 18px;
}

.about-hero,
.about-card,
.about-highlight,
.about-community {
    background: #ffffff;
    border: 1px solid #d7e2f1;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 14px 34px rgba(26, 46, 59, 0.08);
}

.about-hero {
    background:
        radial-gradient(circle at top right, rgba(91, 191, 122, 0.18), transparent 34%),
        radial-gradient(circle at top left, rgba(90, 169, 230, 0.2), transparent 32%),
        #ffffff;
}

.about-hero h2,
.about-card h3,
.about-highlight h3,
.about-community h3 {
    margin-bottom: 12px;
}

.about-lead {
    font-size: 1.08rem;
    color: #29404f;
    max-width: 68ch;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.about-card p + p,
.about-community p + p {
    margin-top: 12px;
}

.about-list {
    padding-left: 20px;
}

.about-list li + li {
    margin-top: 10px;
}

.about-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.about-pillar {
    background: #f7fbff;
    border: 1px solid #d7e2f1;
    border-radius: 18px;
    padding: 18px;
}

.about-pillar h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.about-quote {
    margin-top: 16px;
    padding: 18px 20px;
    border-left: 5px solid #2f6fbf;
    border-radius: 16px;
    background: #f4f8ff;
    color: #29404f;
    font-weight: 700;
}

.about-note {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff9e8;
    border: 1px solid #f1d48a;
    color: #5c4700;
}

.about-community {
    background:
        linear-gradient(135deg, rgba(47, 111, 191, 0.08), rgba(91, 191, 122, 0.08)),
        #ffffff;
}

.about-footer-text {
    color: #49616f;
    line-height: 1.75;
}

.a11y-high-contrast .about-hero,
.a11y-high-contrast .about-card,
.a11y-high-contrast .about-highlight,
.a11y-high-contrast .about-community,
.a11y-high-contrast .about-pillar,
.a11y-high-contrast .about-quote,
.a11y-high-contrast .about-note {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

.a11y-high-contrast .about-hero :is(h2, h3, p, li, strong),
.a11y-high-contrast .about-card :is(h3, p, li, strong),
.a11y-high-contrast .about-highlight :is(h3, p, li, strong),
.a11y-high-contrast .about-community :is(h3, p, li, strong),
.a11y-high-contrast .about-pillar :is(h3, p, li, strong),
.a11y-high-contrast .about-quote,
.a11y-high-contrast .about-note,
.a11y-high-contrast .about-footer-text {
    color: #fff !important;
}

.a11y-high-contrast .about-quote,
.a11y-high-contrast .about-note {
    border-left-color: #7dd3ff !important;
}

@media (max-width: 860px) {
    .about-grid,
    .about-pillars {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .about-hero,
    .about-card,
    .about-highlight,
    .about-community {
        padding: 22px 18px;
        border-radius: 20px;
    }
}