/*
 * Hex Marks the Spot: long-form pages (support, privacy, impressum). Loaded after base.css.
 */

.prose { max-width: 44rem; }
.prose h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.45rem, 3vw, 1.9rem); }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose li { max-width: var(--measure); }
.prose address { font-style: normal; margin-bottom: 1em; }
.prose code { overflow-wrap: anywhere; }

/* The page title sits on a strip of chart, ending in a small inked X. */
.page-title { position: relative; padding-bottom: 1.25rem; margin-bottom: 1.75rem; }
.page-title::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: min(100%, 16rem); height: 0;
    border-top: 2px dashed var(--ink-soft);
}
.page-title::before {
    content: "\2715"; position: absolute; left: min(100%, 16rem); bottom: -0.62rem;
    margin-left: 0.35rem; color: var(--rust); font: 700 1.2rem/1 var(--sans);
}
.page-title p { margin-bottom: 0; }

.updated { color: var(--ink-soft); font-size: 0.92rem; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: 0.9rem; }
.steps li { counter-increment: step; position: relative; padding-left: 2.6rem; }
.steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0.05rem;
    width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
    background: #24693F; color: #fff; font-weight: 700; font-size: 0.9rem;
}

.faq details { border-bottom: 1px dashed var(--rule); padding: 0.9rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.faq summary:hover { color: var(--green-ink); }
.faq details[open] summary { margin-bottom: 0.6rem; }
.faq details > :not(summary) { margin-left: 1.1rem; }

.note {
    background: var(--paper-raised); border-left: 3px solid var(--map-green);
    padding: 0.8rem 1rem; border-radius: 0 var(--radius) var(--radius) 0;
}