/* Pagine informative (About / FAQ / Privacy) — stile CRT coerente col sito. */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --c: #39ff14;
    --cd: #1a7a09;
    --cb: #0d3d04;
    --cs: #0a2903;
    --ca: #7fff6a;
    --bg: #050f05;
}

html {
    background: var(--bg)
}

body.info-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(57, 255, 20, .07), transparent 60%),
        var(--bg);
    color: var(--c);
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 15px;
    line-height: 1.65;
    text-shadow: 0 0 6px rgba(57, 255, 20, .18);
    -webkit-font-smoothing: none
}

a {
    color: var(--ca)
}

/* ── testata ─────────────────────────────────────────────── */
.info-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    background: var(--cs);
    border-bottom: 1px solid var(--cb)
}

.info-logo {
    color: var(--c);
    font-size: 14px;
    letter-spacing: 2px;
    text-decoration: none;
    white-space: nowrap
}

.info-led {
    color: var(--c);
    animation: info-led 2.4s steps(1) infinite
}

@keyframes info-led {
    0%, 60% { opacity: 1 }
    61%, 79% { opacity: .25 }
    80%, 100% { opacity: 1 }
}

.info-open {
    color: var(--ca);
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    border: 1px solid var(--cb);
    padding: 4px 10px;
    white-space: nowrap
}

.info-open:hover,
.info-open:focus-visible {
    color: #021002;
    background: var(--c);
    border-color: var(--c)
}

/* ── contenuto ───────────────────────────────────────────── */
.info-main {
    flex: 1;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 20px 56px
}

.info-kicker {
    color: var(--cd);
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 10px
}

.info-article h1 {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: clamp(30px, 6vw, 44px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--c);
    margin-bottom: 18px
}

.info-lede {
    font-size: 16px;
    color: var(--ca);
    margin-bottom: 34px
}

.info-article h2 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c);
    margin: 38px 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cb)
}

.info-article h2::before {
    content: '// ';
    color: var(--cd)
}

.info-article h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ca);
    margin-bottom: 4px
}

.info-article p {
    margin-bottom: 12px;
    color: #9dff8c
}

.info-article strong {
    color: var(--c);
    font-weight: 700
}

.info-article code {
    color: var(--c);
    background: var(--cs);
    border: 1px solid var(--cb);
    padding: 0 4px;
    font-size: 13px
}

.info-steps {
    list-style: none;
    display: grid;
    gap: 12px;
    counter-reset: none
}

.info-steps li {
    background: var(--cs);
    border: 1px solid var(--cb);
    border-left: 3px solid var(--cd);
    padding: 14px 16px
}

.info-steps li p {
    margin: 0;
    font-size: 14px
}

.info-list {
    list-style: none;
    display: grid;
    gap: 8px
}

.info-list li {
    padding-left: 20px;
    position: relative;
    font-size: 14px;
    color: #9dff8c
}

.info-list li::before {
    content: '>';
    position: absolute;
    left: 2px;
    color: var(--cd)
}

.info-faq h3 {
    margin-top: 18px
}

.info-faq p {
    margin-bottom: 0
}

.info-cta {
    display: inline-block;
    margin-top: 40px;
    padding: 10px 18px;
    border: 1px solid var(--c);
    color: var(--c);
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 13px
}

.info-cta:hover,
.info-cta:focus-visible {
    background: var(--c);
    color: #021002
}

/* ── footer ──────────────────────────────────────────────── */
.info-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    background: #020902;
    border-top: 1px solid var(--cb);
    color: #1d5c1d;
    font-size: 12px
}

.info-foot nav {
    display: flex;
    gap: 14px
}

.info-foot a {
    color: #1d5c1d;
    text-decoration: none;
    letter-spacing: 1px
}

.info-foot a:hover,
.info-foot a:focus-visible {
    color: var(--ca)
}

@media (max-width: 560px) {
    body.info-body {
        font-size: 14px
    }

    .info-main {
        padding: 28px 16px 40px
    }

    .info-foot {
        flex-direction: column;
        align-items: flex-start
    }
}