/*
 * Pagine di contenuto (metodologia, guide): stesso mondo visivo della home
 * (/home.css carica token, header, footer, bottoni, FAQ). Qui solo la prosa
 * leggibile: colonna stretta, titoli a domanda, risposta breve in apertura.
 * Verde solo per il valore (sotto mercato); arancio rischio solo per gli avvisi.
 */
:root { --risk: #b4480f; --risk-bg: #fbeee5; --read: 720px; }

.art { padding: clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.art .wrap { max-width: calc(var(--read) + 2 * var(--gutter)); }

.crumbs { font: 500 13.5px var(--sf); color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--muted-light); }

.art h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; margin-top: 18px; }
.art .meta { font: 500 13.5px var(--sf); color: var(--muted); margin-top: 14px; }

/* risposta diretta in apertura: il blocco che un assistente può citare da solo */
.answer { margin-top: 24px; background: var(--card); border-radius: 20px; padding: 20px 22px; box-shadow: inset 0 0 0 1px var(--line); font-size: 18px; line-height: 1.55; }
.answer b.k { display: block; font: 600 13px var(--sf); color: var(--muted); margin-bottom: 6px; }

.toc { margin-top: 28px; padding: 16px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.toc p { font: 600 13px var(--sf); color: var(--muted); }
.toc ol { margin: 8px 0 0 20px; display: grid; gap: 4px; font-size: 15.5px; }
.toc a { color: var(--ink-soft); }

.prose { margin-top: 12px; }
.prose h2 { font: 700 clamp(24px, 2.8vw, 30px)/1.18 var(--sfd); letter-spacing: -.02em; margin-top: 48px; max-width: none; scroll-margin-top: 80px; }
.prose h3 { font: 650 19px/1.3 var(--sfd); letter-spacing: -.2px; margin-top: 28px; }
.prose p { margin-top: 14px; color: var(--ink); }
.prose ul, .prose ol { margin: 14px 0 0 22px; display: grid; gap: 8px; }
.prose li { padding-left: 2px; }
.prose a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong { font-weight: 650; }
.prose code { font: 500 15px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--chip); padding: 1px 6px; border-radius: 6px; }
.prose .small { font-size: 14.5px; color: var(--ink-soft); }

.box { margin-top: 20px; background: var(--card); border-radius: 16px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--line); }
.box > b:first-child { display: block; font: 650 15px var(--sfd); margin-bottom: 4px; }
.box p { margin-top: 6px; font-size: 16px; }
.box.warn { background: var(--risk-bg); box-shadow: none; }
.box.warn > b:first-child { color: var(--risk); }

.checklist { list-style: none; margin-left: 0 !important; }
.checklist li { display: flex; gap: 10px; }
.checklist li::before { content: ""; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink-soft); flex: none; margin-top: 4px; }

.prose table { min-width: 0; margin-top: 18px; font-size: 15px; background: var(--card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.prose th, .prose td { padding: 11px 14px; }
.prose thead th { background: var(--canvas); }
.tscroll { overflow-x: auto; }

.formula { margin-top: 16px; background: var(--card); border-radius: 14px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line); font: 600 16px/1.5 var(--sfd); }

/* elenco guide */
.gl { display: grid; gap: 12px; margin-top: 24px; list-style: none; }
.gl a { display: block; background: var(--card); border-radius: 18px; padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; }
.gl a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.gl b { font: 650 18px/1.3 var(--sfd); letter-spacing: -.2px; display: block; }
.gl span { font-size: 15px; color: var(--ink-soft); display: block; margin-top: 4px; }

.art .faq { margin-top: 20px; }
.art details p { font-size: 16.5px; }

.disclaimer { margin-top: 40px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }

.cta-app { margin-top: 44px; background: var(--ink); color: #fff; border-radius: 24px; padding: clamp(24px, 4vw, 36px); display: grid; gap: 14px; }
.cta-app h2 { color: #fff; margin: 0; font: 700 clamp(22px, 2.6vw, 28px)/1.2 var(--sfd); letter-spacing: -.02em; max-width: none; }
.cta-app p { color: #c4c4c8; font-size: 16px; }
.cta-app .btn { background: #fff; color: var(--ink); justify-self: start; }
.cta-app .btn:focus-visible { outline-color: #fff; }

.related { margin-top: 40px; }
.related > p { font: 600 13px var(--sf); color: var(--muted); }

/* header delle pagine di contenuto: la nav resta visibile anche su mobile, scorrevole */
@media (max-width: 860px) {
  .top.content .nav { display: none; }
}
footer .who { max-width: 36em; }