/* Base comune delle pagine interne: font del design, colori, tipografia, pulsanti, titoli di sezione, domande. */
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-500.woff2") format("woff2"); font-weight:500 600; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-700.woff2") format("woff2"); font-weight:700 900; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("/assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-style:italic; font-weight:200 400; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("/assets/fonts/instrument-serif-regular.woff2") format("woff2"); font-style:normal; font-weight:200 400; font-display:swap; }
:root { --f-sans:Inter, system-ui, sans-serif; --f-serif:"Instrument Serif", Georgia, serif; --f-orn:"Instrument Serif", serif;
        --void:#080808; --bone:#fcfcfc; --ash:#d4d2d2; --iron:#8a8888; --card:#171617; --line:#2c2b2b; --red:#fe1e34; }
* { box-sizing:border-box; margin:0; }
html { overflow-x:clip; }
body { background:var(--void); color:var(--bone); font-family:var(--f-sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.orn { font-family:var(--f-orn); font-weight:400; text-transform:none; color:var(--red); }
.ttl { font-weight:700; text-transform:uppercase; line-height:.9; letter-spacing:-.065em; font-size:clamp(38px, 6.4vw, 104px); }
.ttl i { font-family:var(--f-serif); font-weight:300; text-transform:none; letter-spacing:-.02em; font-size:.42em; vertical-align:.55em; margin:0 .22em; }
.kick { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--iron); }
.btn { display:inline-flex; align-items:center; gap:12px; border:0; border-radius:999px; padding:16px 26px; background:var(--red); color:var(--bone); font:500 15px var(--f-sans); text-decoration:none; cursor:pointer; box-shadow:0 0 30px rgba(254,30,52,.35); }
.btn span { transition:transform .35s; } .btn:hover span { transform:translateX(6px); }
.btn.ghost { background:none; border:1px solid rgba(212,210,210,.5); box-shadow:none; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.sec-head { text-align:center; margin-bottom:clamp(36px, 5vw, 64px); }
.sec-head .sub { margin:18px auto 0; max-width:60ch; color:var(--ash); font-size:16px; line-height:1.55; }
/* domande frequenti come conversazione (come nella home): domanda a destra, risposta di DigIdentity a sinistra */
.faq { padding:0 16px clamp(90px, 14vh, 150px); max-width:900px; margin:0 auto; overflow-x:clip; }
.faq .qa { border:0; }
.faq .qa + .qa { margin-top:14px; }
.faq .qa summary { list-style:none; cursor:pointer; margin-left:auto; max-width:min(640px, 92%); display:flex; align-items:center; gap:16px; background:#262525; border:1px solid #393939; border-radius:20px 20px 4px 20px; padding:18px 22px; transition:background .3s, border-color .3s; }
.faq .qa summary::-webkit-details-marker { display:none; }
.faq .qa summary:hover { border-color:#525252; }
.faq .qa[open] summary { background:#fcfcfc; border-color:#fcfcfc; }
.faq .qa[open] summary h3 { color:var(--void); }
.faq .qa summary h3 { font-weight:500; font-size:clamp(16px, 1.5vw, 20px); line-height:1.25; letter-spacing:-.01em; flex:1; }
.faq .qplus { position:relative; width:14px; height:14px; flex:none; }
.faq .qplus::before, .faq .qplus::after { content:""; position:absolute; left:0; top:6px; width:14px; height:2px; background:var(--red); transition:transform .35s; }
.faq .qplus::after { transform:rotate(90deg); }
.faq .qa[open] .qplus::after { transform:rotate(0); }
.faq .ans { display:flex; align-items:flex-end; gap:10px; margin-top:12px; max-width:min(700px, 96%); }
.faq .ans img { flex:none; width:28px; height:auto; }
.faq .bub { background:#f3efef; color:var(--void); border-radius:20px 20px 20px 4px; padding:18px 22px; min-height:52px; }
.faq .bub p { font-size:15.5px; line-height:1.6; }
.faq .bub a { color:var(--void); text-decoration-color:var(--red); }
.faq .bub .wd { display:inline-block; }
.faq .typing { display:none; gap:5px; padding:6px 2px; }
.faq .typing i { width:7px; height:7px; border-radius:50%; background:#8a8888; }
/* scritta col tratto del marchio dietro il titolo (/shared/scritta.js), come nella home */
.machine { position:absolute; left:0; right:0; top:50%; transform:translateY(-38%); height:min(66vh, 50vw); z-index:0; pointer-events:none; }
.machine svg { height:100%; width:100%; display:block; overflow:visible; }
.machine .l { fill:none; stroke:#232222; stroke-width:56; stroke-linecap:round; stroke-linejoin:round; }
.machine .dot { fill:var(--red); filter:drop-shadow(0 0 10px rgba(254,30,52,.9)) drop-shadow(0 0 28px rgba(254,30,52,.55)); }
/* pannello chiaro dentro il nero, come l'hub e il blog della home: spezza il nero e segna una parte nuova */
.panel { background:#f3efef; color:var(--void); border-radius:18px; margin:0 16px clamp(56px, 8vh, 110px); padding:clamp(56px, 8vw, 112px) clamp(16px, 3vw, 44px); }
.panel .sub, .panel .lead-d { color:#393939; }
.panel .kick { color:#6d6b6b; }
.panel .btn.ghost { border-color:rgba(8,8,8,.35); color:var(--void); }

/* ── alternanza dei toni (28/9): una sezione bianca a tutta larghezza e un pannello rosso in ogni pagina interna ── */
/* bianco: le FAQ (nel DigiBlog l'elenco delle guide). Fondo pieno fino ai bordi dello schermo, senza sfumature */
.faq, .guide { background:#fcfcfc; color:#080808; box-shadow:0 0 0 100vmax #fcfcfc; clip-path:inset(0 -100vmax); padding-top:clamp(80px, 12vh, 140px); }
.faq .ttl, .guide .ttl, .faq .sub, .guide .sub, .faq-more { color:#080808; }
.faq .qa summary { background:#080808; border-color:#080808; }
.faq .qa summary h3 { color:#fcfcfc; }
.faq .qa summary:hover { border-color:#fe1e34; }
.faq .qa[open] summary { background:#fe1e34; border-color:#fe1e34; }
.faq .qa[open] summary h3 { color:#fcfcfc; }
.faq .qa[open] .qplus::before, .faq .qa[open] .qplus::after { background:#fcfcfc; }
.faq .bub { background:#efebeb; }
.faq a, .faq-more a { color:#080808; }
.guide .post { box-shadow:0 0 0 1px #e3dfdf; }
/* rosso: il nastro delle parole giganti diventa un pannello rosso pieno dentro il nero */
body .mq { background:#fe1e34; border:0; border-radius:18px; margin-left:16px; margin-right:16px; }
body .mq-row span { -webkit-text-stroke-color:rgba(8, 8, 8, .55); }
body .mq-row span::after { background:#080808; box-shadow:none; }
.guide .chip { color:#393939; border-color:#d4d2d2; } .guide .chip:hover { border-color:#080808; color:#080808; }
.guide .chip.on { color:#fcfcfc; border-color:#fe1e34; }
.guide .count { color:#6b6969; }