/* Informational pages (About, FAQ, Privacy, Terms, Contact, Acceptable Use). Reads like a document; uses the site's own colours. */

.info-main { max-width: 860px; }
.info-article { padding: clamp(26px, 5vw, 48px) 0 20px; }
.info-article h1 { font-size: clamp(30px, 5.4vw, 44px); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 10px; }
.info-lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--text-2); line-height: 1.6; margin: 0 0 8px; }
.info-updated { color: var(--text-3); font-size: 13.5px; margin: 0 0 26px; }
.info-article h2 { font-size: clamp(20px, 2.8vw, 25px); letter-spacing: -0.02em; margin: 34px 0 10px; scroll-margin-top: 20px; }
.info-article h3 { font-size: 17px; margin: 22px 0 6px; }
.info-article p { color: var(--text-2); line-height: 1.72; margin: 0 0 14px; font-size: 15.5px; }
.info-article ul, .info-article ol { color: var(--text-2); line-height: 1.7; margin: 0 0 16px; padding-left: 22px; font-size: 15.5px; }
.info-article li { margin-bottom: 6px; }
.info-article strong { color: var(--text); }
.info-article a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.info-toc { margin: 0 0 8px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.info-toc strong { display: block; margin-bottom: 6px; font-size: 14px; }
.info-toc ol { margin: 0; columns: 2; column-gap: 28px; font-size: 14.5px; }
.info-callout { margin: 18px 0; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 15px; line-height: 1.65; }
.info-callout.is-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.info-callout strong { color: inherit; }
.info-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.info-table th, .info-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.info-table th { color: var(--text); font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; background: var(--surface-2); }
.info-table-wrap { overflow-x: auto; }
.contact-card { display: grid; gap: 8px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); margin: 0 0 18px; }
.contact-card dt { font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.contact-card dd { margin: 0 0 6px; color: var(--text); font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .info-toc ol { columns: 1; } }

/* Contact form */
.contact-form { display: grid; gap: 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); margin: 0 0 22px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form label { font-weight: 600; font-size: 14px; color: var(--text); }
.contact-form .textarea { min-height: 150px; resize: vertical; }
.contact-form .form-note { margin: 0; font-size: 13.5px; color: var(--text-3); line-height: 1.6; }
.contact-form .btn { justify-self: start; }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-form .error-text { margin: 0; color: var(--danger); font-size: 13.5px; line-height: 1.5; }
.contact-form .input.is-invalid { border-color: var(--danger); }