/* Styles specific to the standalone pages built by i18n/pages/build-pages.js
   (/speaking-barrier/ and /how-it-works/). Linked through renderPage's
   extraHead, after nativepal-landing.css, whose .fact-list is unnumbered and
   sets no link colour inside list items. */

/* Numbered steps: the practice loop and the seven-day routine. */
.step-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    counter-reset: step;
}

.step-list li {
    position: relative;
    padding: 0 0 0 44px;
    margin-bottom: 18px;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    counter-increment: step;
}

.step-list li:last-child {
    margin-bottom: 0;
}

.step-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
    font-size: 13px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.step-list li strong,
.fact-list li strong {
    color: #fff;
    font-weight: 600;
}

/* Time budget under a routine step. */
.step-meta {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #8a8a92;
}

/* Links inside list items and answer paragraphs. Without this they fall back
   to the browser default blue, which is unreadable on the dark section. */
.step-list a,
.fact-list a,
.fact-answer a {
    color: #a78bfa;
    text-decoration: none;
    transition: color 0.2s ease;
}

.step-list a:hover,
.fact-list a:hover,
.fact-answer a:hover {
    color: #c4b5fd;
    text-decoration: underline;
}