/* The FAQ page only (faq.html, loaded last, after site.css). Everything here is scoped to body.faqpage,
   as css/home.css is to body.home and css/whatwedo.css to body.wwd, so no other page changes. (Not
   body.faq: the list's own section is .faq.)
   2026-10-17, where the eye goes: each part of the page has one thing that wins and the rest steps
   back, and the claim, the field and every question start on the same left edge, so the eye runs
   down one line. The opening: the claim. The field: the question you type, its line the one red
   there. The list: the questions, read down the left edge; the one that is open is the one on a
   raised band, with the red rule beside it. The close: the free demo's button, as on every page.
   Nothing here moves on its own once the page has opened; with reduced motion base.css cuts every
   animation and transition, and without JavaScript everything stands finished. */

/* ---------- the opening ----------
   The claim wins: it is the largest and the brightest thing, top left. The mark and the cherry
   branch stay top right, where the eye passes but does not stop: the petals a deeper red than the
   page's buttons, the blossoms a step deeper, the branch drawn in and blooming once as the page
   opens, then still. The falling petals and the idle sway are gone, so nothing in the head keeps
   moving away from the claim. */
.faqpage .phv__petals path { fill: var(--c-crimson); }
.faqpage .pagehead--v .phv__petals path { animation-play-state: running, paused; }
.faqpage .cb__sway { animation: none; }
/* The blossoms keep their three reds but sit a step deeper, so no scarlet is left up here. */
.faqpage .cb__sway > g { opacity: 0.72; }
.faqpage .cb-fall { display: none; }

/* ---------- the field ----------
   The field wins: its question is the largest type under the claim, and its line fills red while
   you type, the one red thing here. The two notes under it are grey; the count stays ink, a size up,
   so the zero still reads at a glance. */
.faqpage .ask__local .petal { color: var(--ink-faint); }
.faqpage .ask__sent b { color: var(--ink); }
/* When nothing matches, the way to ask us is the one thing in that line that stands out. */
.faqpage .ask__none a { font-weight: var(--w-strong); text-underline-offset: 0.2em; }
/* The no-match panel (2026-10-19): a short heading, one line, the pages to explore, then the direct way. */
.faqpage .ask__none { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.faqpage .ask__none[hidden] { display: none; }
.faqpage .ask__none-h { margin: 0; color: var(--ink); font-size: var(--t-h3); font-weight: var(--w-display); letter-spacing: var(--track-h); line-height: 1.15; }
.faqpage .ask__none-p { margin: 0; max-width: 46ch; color: var(--ink-muted); }
.faqpage .ask__none-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; }
.faqpage .ask__none-direct { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline; }

/* ---------- the questions ----------
   Read as an F: down the left edge, question by question. The questions carry the edge in heavy
   ink; the rules between them are the quiet hairline, so the words, not the lines, make the rows;
   the turn-over marks sit far right in grey. The open question is the different one: it stands on
   a raised band that runs a little past the column on both sides, the red rule at its left edge,
   its answer in full ink rather than grey, its mark in ink. The text keeps its place, so the left
   edge does not move when a question opens. */
.faqpage .qa { border-bottom-color: var(--rule);
  transition: background-color var(--dur) var(--ease-out-quart), box-shadow var(--dur) var(--ease-out-quart); }
.faqpage .qa:last-child { border-bottom-color: var(--rule-firm); }
.faqpage .qa[open] { --qa-bleed: var(--s-5); background: var(--bg-raised);
  box-shadow: calc(var(--qa-bleed) * -1) 0 0 var(--bg-raised), var(--qa-bleed) 0 0 var(--bg-raised); }
.faqpage .qa[open] .qa__mark { border-color: var(--ink); }
.faqpage .qa[open] .qa__a p { color: var(--ink); }
@media (max-width: 760px) {
  .faqpage .qa[open] { --qa-bleed: var(--s-3); }
}

/* ---------- a little more life (2026-10-17) ----------
   "The eye is there but a tiny bit bland." Nothing new to look at and no new red: what is here
   already answers the pointer a little more, and the quiet parts take a little warmth, so no
   section gains a second focal point. The free-demo button lifts 2px onto a soft oxblood shade and
   its petal (and a link's) turns further, quick and ease-out, never a bounce. The quiet hairlines
   are a breath of dusty rose (--c-dusty; --c-petal on the dark ground) rather than grey. With
   reduced motion base.css makes every change instant. */
body.faqpage { --warm-rule: color-mix(in oklch, var(--c-dusty) 38%, transparent);
  --warm-rule-dark: color-mix(in oklch, var(--c-petal) 24%, transparent); }
.faqpage main .btn { transition: background var(--dur) var(--ease-out-quart), gap var(--dur) var(--ease-out-quart),
  transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-quart); }
.faqpage main .btn:is(:hover, :focus-visible) { transform: translateY(-2px); }
.faqpage main .btn:not(.btn--quiet):is(:hover, :focus-visible) { box-shadow: 0 0.875rem 1.5rem -0.875rem oklch(33.8% 0.127 27.8 / 0.6); }
.faqpage main .btn:active { transform: scale(0.97); transition-duration: var(--dur-fast); }
.faqpage main .btn:not(.btn--quiet):active { box-shadow: none; }
.faqpage main :is(.btn, .cta):is(:hover, :focus-visible) .petal { transform: rotate(24deg); }
/* The closing panel is no longer flat: the paper grain over the oxblood, and its big outlined
   petal (which already turns with the scroll) a faint dusty fill, so it reads as warmth behind the
   question rather than a second thing to look at. */
.faqpage .vpanel { background-image: url(../assets/img/grain.svg); background-size: 200px; }
.faqpage .vpanel__petal { color: color-mix(in oklch, var(--c-dusty) 11%, transparent); stroke: color-mix(in oklch, var(--c-petal) 42%, transparent); }
/* The rules between the questions in petal; a closed question's mark dips a little and turns ink
   when pointed at, a hint that it opens downward. */
.faqpage .qa { border-bottom-color: var(--warm-rule-dark); }
.faqpage .qa:not([open]) > .qa__s:hover .qa__mark { transform: translateY(-0.05rem) rotate(45deg); border-color: var(--ink); }