/* ===== /courses/starter/about — public front of the Free Starter Course =====
   Loaded by starter-about.html alone (page-specific sheet, like membership.css).
   Structure comes from app.css: .hero-air, .ladder-grid/.ladder-card, .section,
   .cta-band. What lives here: the stage label, the fact rows on each stage card,
   the chapter list and the FAQ. */

.sa-stage-n {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.sa-facts li::before { content: none; }
.sa-facts li { padding-left: 0; }
.sa-k { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }

.sa-chapters {
    list-style: none;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: 14px;
}
.sa-ch {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 18px 22px;
}
.sa-ch-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.sa-ch h3 { font-size: 17px; font-weight: 600; line-height: 1.35; flex: 1; }
.sa-min { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.sa-ch p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }

.sa-faq { max-width: 760px; margin: 0 auto; }
.sa-faq-item {
    border-bottom: 1px solid var(--hairline);
    padding: 18px 0;
}
.sa-faq-item summary { cursor: pointer; list-style: none; }
.sa-faq-item summary::-webkit-details-marker { display: none; }
.sa-faq-item h3 { display: inline; font-size: 17px; font-weight: 600; }
.sa-faq-item p { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }