.about-page {
    width: min(100%, 900px);
    margin: 0 auto;
    padding-top: 8.5rem;
    padding-bottom: 7rem;
}

.about-nav-actions { display: flex; align-items: center; gap: 1.25rem; }
.about-faq-link { color: var(--color-secondary); }

.about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-character {
    position: relative;
    display: grid;
    width: 210px;
    height: 210px;
    place-items: center;
    margin-bottom: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #242424, #111 70%);
}

.about-character::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px dashed #333;
    border-radius: inherit;
    animation: slow-spin 28s linear infinite;
}

.about-lottie { position: relative; z-index: 1; width: 135px; height: 125px; }
.about-lottie:not(.is-ready) { display: none; }
#meshki-fallback { width: 100px; height: 100px; object-fit: contain; }
.character-note {
    position: absolute;
    bottom: -1.75rem;
    color: var(--color-muted);
    font-size: .7rem;
    transform: rotate(-2deg);
}

.about-hero h1 {
    margin-top: 1rem;
    color: var(--color-bright);
    font-size: clamp(2rem, 7vw, 4.5rem);
    font-weight: 900;
    line-height: 1.25;
}

.about-deadpan { margin-top: 1.25rem; color: var(--color-secondary); font-size: 1.2rem; }
.about-copy { margin-top: 5rem; }

.about-no-list { position: relative; padding: 2rem 3.5rem 2rem 2rem; }
.about-no-list > .material-symbols-outlined {
    position: absolute;
    top: 2rem;
    right: 1.35rem;
    color: var(--color-muted);
}
.about-no-list p { color: var(--color-body); font-size: 1.05rem; line-height: 2.15; }
.tiny-caption { display: block; margin-top: 1rem; color: var(--color-muted); font-size: .72rem; }

.about-statement {
    margin: 7rem auto;
    max-width: 700px;
    color: var(--color-text);
    font-size: clamp(1.4rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.75;
    text-align: center;
}
.about-statement p:first-child { color: var(--color-secondary); }

.not-important-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.not-important-card {
    padding: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: #101010;
    text-align: center;
}
.not-important-card .material-symbols-outlined { color: var(--color-muted); font-size: 2rem; }
.not-important-card p { margin-top: 1rem; color: var(--color-text); font-weight: 700; }
.not-important-card small { display: block; margin-top: .6rem; color: var(--color-muted); }
.what-matters { margin: 2rem 0 7rem; color: var(--color-bright); font-size: 1.35rem; font-weight: 900; text-align: center; }

.obsession-card { position: relative; padding: 3rem; text-align: center; }
.obsession-card p { color: var(--color-secondary); }
.obsession-card h2 { margin-top: 1rem; color: var(--color-bright); font-size: clamp(1.45rem, 4vw, 2.4rem); font-weight: 900; line-height: 1.65; }

.final-lines { margin-top: 8rem; color: var(--color-secondary); font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 900; text-align: center; }
.final-lines p:last-of-type { color: var(--color-bright); }
.stage-line { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 2.5rem; color: var(--color-muted); font-size: .68rem; font-weight: 400; }
.stage-line img { width: 34px; height: 34px; }
.stage-line .material-symbols-outlined { font-size: 1rem; animation: nudge 1.8s ease-in-out infinite; }

.about-footer { display: flex; justify-content: space-between; gap: 1rem; color: var(--color-muted); font-size: .8rem; }
.about-footer a { color: var(--color-secondary); text-decoration: none; }
.about-footer a:hover { color: var(--color-bright); }

@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes nudge { 50% { transform: translateX(-5px); } }

@media (max-width: 640px) {
    .about-page { padding-top: 7.5rem; padding-bottom: 5rem; }
    .about-faq-link { display: none; }
    .about-character { width: 170px; height: 170px; }
    .about-lottie { width: 110px; height: 105px; }
    .about-copy { margin-top: 4rem; }
    .about-no-list { padding: 1.5rem 3rem 1.5rem 1.25rem; }
    .about-statement { margin: 5rem auto; }
    .not-important-grid { grid-template-columns: 1fr; }
    .what-matters { margin-bottom: 5rem; }
    .obsession-card { padding: 2.25rem 1.25rem; }
    .final-lines { margin-top: 6rem; }
    .about-footer { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    .about-character::before, .stage-line .material-symbols-outlined { animation: none; }
}