/* The About page borrows the guide's shell — header, chapters, footer — and adds only what is its
   own: the facts, the money chapter's emphasis, the team grid that is empty until there is a team,
   and the closing call. Logical properties throughout, because this page is also read in Persian
   and Arabic. */

.guide-intro .eyebrow {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
}

.about-facts {
    list-style: none;
    margin: 2.5rem 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.about-facts li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1rem;
    align-items: baseline;
}
.about-facts b {
    font-size: 2.25rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.about-facts span {
    color: var(--muted, #6b7280);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* The limit on what we do with money is the thing people most need to find on this page, so it is
   the one chapter that does not look like the others. */
.guide-chapter.money {
    border-inline-start: 3px solid currentColor;
    padding-inline-start: 1.25rem;
}
.guide-chapter.money b { font-weight: 700; }

/* Ready for people. Each card is a photo, a name, a role and a sentence; the grid stays hidden
   while it is empty rather than leaving a gap where a team should be. */
.team-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-block-start: 2rem;
}
.team-grid[hidden] { display: none; }
.team-grid .person { margin: 0; }
.team-grid .person img {
    inline-size: 6rem;
    block-size: 6rem;
    border-radius: 50%;
    object-fit: cover;
    margin-block-end: .75rem;
}
.team-grid .person h3 { margin: 0 0 .15rem; font-size: 1.0625rem; }
.team-grid .person .role {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
}
.team-grid .person p { margin: 0; line-height: 1.7; }

/* The guide's chapters were written for one paragraph each, so consecutive ones run together.
   The chapters here are two paragraphs by design — the story and then its consequence. */
.guide-chapter p + p { margin-block-start: 1rem; }

.about-cta {
    margin-block-start: 3.5rem;
    padding-block: 2.5rem;
    border-block-start: 1px solid var(--line, rgba(128, 128, 128, .25));
    text-wrap: pretty;
}
.about-cta h2 { margin-block-end: .5rem; }
.about-cta p { color: var(--muted, #6b7280); line-height: 1.7; margin-block-end: 1.5rem; }
/* The guide styles .secondary only inside .guide-intro, so outside it the button renders as white
   text on white — a control nobody can see. Both buttons are given their colours here. */
.about-cta .primary,
.about-cta .secondary {
    display: inline-flex;
    align-items: center;
    padding: .7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}
.about-cta .primary { background: var(--blue, #1c62f2); color: #fff; }
.about-cta .primary:hover { filter: brightness(1.08); }
.about-cta .secondary {
    color: var(--ink, #0b1b33);
    border-color: var(--line, rgba(128, 128, 128, .35));
    background: var(--paper, transparent);
}
.about-cta .secondary:hover { color: var(--blue, #1c62f2); border-color: var(--blue, #1c62f2); }

@media (max-width: 640px) {
    .about-facts { margin-block: 1.75rem; }
    .about-facts b { font-size: 1.875rem; }
    .about-cta { margin-block-start: 2.5rem; padding-block: 2rem; }
}