/* prose.css. Owner: S5. The plain pages: contact, contact sent, unsubscribe,
   the three legal pages and image credits (merge plan 3.3, "Plain pages").
   components.css already sets .prose, forms and notices. This file is for
   what those pages need beyond that.

   Tokens only (base.css), Archivo only, no border-radius, 2px rules, every
   animation already scoped under :root[data-motion="full"] by the files this
   loads after (plan R12). Nothing below types a visitor-facing word: every
   rule here targets markup and classes already in pages-misc.mjs, legal.mjs
   or components.css. */

/* ── 1. actions after prose text ─────────────────────────────────────────
   components.css gives .prose form a 28px top margin so a form doesn't
   crowd the paragraph above it (contact). A button row (.actions) wants the
   same treatment: contact/sent's "Go home" is the one case today. */
.prose .actions { margin-top: 28px; }

/* ── 2. list markers ──────────────────────────────────────────────────────
   privacy.md has three real bulleted lists. The browser default marker is a
   round dot, which the brand pack forbids outright (context/brand-visual.md:
   "No rounded corners. Ever."). Square, Red 700 (the token for red at
   body-text sizes, not the accent red). Spacing is untouched. */
.prose ul { list-style: square; }
.prose li::marker { color: var(--red-700); }

/* ── 3. legal documents ───────────────────────────────────────────────────
   terms.md and privacy.md alone run to a dozen-plus ## sections rendered as
   one continuous .prose column (legal.mjs). The only thing a document that
   long needs is more air between sections than components.css's default
   40px, so a reader scanning for one clause can see where the last one
   ended. The first section keeps the normal gap under the h1. */
.legal-draft h2:not(:first-of-type) { margin-top: clamp(40px, 5vw, 64px); }

/* ── 4. the unsubscribe result ────────────────────────────────────────────
   #unsub-result (pages-misc.mjs) carries class="notice" once populated, so
   the two states unsubscribe.js writes in (unsubscribed, failed) read as a
   status block, not bare text. components.css's .notice has its own
   padding, so its first child needs its top margin cleared or the injected
   <h2> ("You're unsubscribed." / "That didn't go through.") sits with the
   heading's 40px margin stacked on the box's own padding. This is more
   specific than .prose h2 (2 classes + a pseudo-class beats 1 class + 1
   element), so it holds regardless of load order. */
.notice > :first-child { margin-top: 0; }

/* ── 5. the FAQ page (Opus route, 2026-09-28, faq.mjs) ─────────────────────
   Conner, 2026-09-28: one heading, FAQ, then every question closed, each
   opening its own answer on a click. The accordion is the websites pages'
   own FAQ component (components.css section 11, .faq): its 2px rules, its
   question type and its square plus that turns into a cross when open. Here
   in one column, the heading above the list and the list at a reading width.
   An answer can hold several paragraphs, the step titles as a list (each
   carries its own number, so no marker) and the booking button, so the
   component's padding moves from each paragraph to the answer as a whole. */
.faq.faq-page { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); }
.faq-page .faq-items { max-width: 880px; }
.faq-page .faq-answer { padding: 0 56px 24px 0; }
.faq-page .faq-answer p, .faq-page .faq-answer ul { max-width: 62ch; margin: 0; padding: 0; }
/* The gap between the blocks of one answer. Same weight as the reset above
   and after it, so it wins. */
.faq-page .faq-answer > * + p, .faq-page .faq-answer > * + ul { margin-top: 14px; }
.faq-page .faq-answer strong { font-weight: 800; }
.faq-page .faq-steps { list-style: none; }
.faq-page .faq-steps li + li { margin-top: 6px; }
.faq-page .faq-cta { padding-top: 10px; }
@media (max-width: 640px) { .faq-page .faq-answer { padding-right: 0; } }