/* Shared brand-body system for the content/brand pages (about, faq, glossary,
   guides). Retires the per-file inline <style> fine print: readable measure,
   real contrast, mono display headings that match the landing + page-hero.
   Loaded globally in layout.ejs; opt in by wrapping content in .brand-prose. */

.brand-prose {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 44px) 20px 72px;
    color: #CFE0EE;
    font-size: 1.02rem;
    line-height: 1.75;
}
.brand-prose > *:first-child { margin-top: 0; }

.brand-prose h2 {
    font-family: var(--tt-display, 'JetBrains Mono', ui-monospace, monospace);
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
    color: #FFF6EA; margin: 40px 0 14px;
}
.brand-prose h3 {
    font-size: 1.05rem; font-weight: 700; color: #FFF6EA; margin: 26px 0 8px;
}
.brand-prose p { margin: 0 0 16px; max-width: 68ch; }
.brand-prose strong { color: #FFF6EA; font-weight: 700; }
.brand-prose a { color: var(--tt-accent, #EE5A2C); text-decoration: none; }
.brand-prose a:hover { text-decoration: underline; }
.brand-prose ul, .brand-prose ol { margin: 0 0 16px; padding-left: 22px; max-width: 68ch; }
.brand-prose li { margin-bottom: 7px; }

/* Lead paragraph / summary block */
.brand-lead {
    font-size: 1.08rem; line-height: 1.7; color: #FFF6EA;
    padding: 18px 22px; margin: 0 0 28px;
    background: rgba(238,90,44,0.05);
    border: 1px solid rgba(238,90,44,0.16); border-radius: 12px;
}

/* Callout */
.brand-callout {
    padding: 18px 22px; margin: 22px 0;
    background: var(--tt-panel-solid, #103756);
    border: 1px solid var(--tt-border, rgba(42,46,57,0.6)); border-radius: 12px;
    color: #CFE0EE;
}
.brand-callout p { margin: 0; }

/* ---- FAQ accordion (native <details>, no JS) ---- */
.faq-list { max-width: 760px; margin: 0 auto; padding: 0 20px 72px; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
    background: rgba(17,24,39,0.55);
    border: 1px solid var(--tt-border, rgba(42,46,57,0.6));
    border-radius: 12px; overflow: hidden;
    transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.faq-item[open] { border-color: rgba(238,90,44,0.32); background: rgba(17,24,39,0.75); }
.faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 18px;
    font-size: 1rem; font-weight: 700; color: #FFF6EA;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; font-family: var(--tt-mono, monospace); font-weight: 700;
    font-size: 1.3rem; line-height: 1; color: var(--tt-accent, #EE5A2C);
    transition: transform 0.2s ease-out; flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: #fff; }
.faq-item summary:focus-visible { outline: 2px solid var(--tt-accent, #EE5A2C); outline-offset: -2px; }
.faq-answer { padding: 0 18px 16px; color: #CFE0EE; font-size: 0.95rem; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
    .faq-item, .faq-item summary::after { transition: none; }
}