/* Breadwinner v3 prototype: faq.html page-only styles. c-faq-group lives in v3-port.css;
   this file only narrows the reading column so five sections of questions do not run too wide. */

.faq-group:first-child { margin-top: 0; }

/* .column sets width:100%, which drops .wrap's gutter. Keep the .wrap gutter and the page grid,
   and cap the list at the 44rem reading measure, left-aligned. */
.wrap.column { width: min(100% - 2 * (var(--gutter) + var(--art-gutter)), var(--page-max)); max-width: var(--page-max); margin-inline: auto; }
.wrap.column > .faq-group { max-width: 44rem; }

/* Ink drawings in the Products group (2026-10-20). On a phone each sits between rows. Where the page
   is wide enough for the 44rem list plus a margin (1100px), it leaves the flow and stands in the right
   margin beside the row it belongs to; the list keeps its reading measure. */
.faq-group, .faq-item--mark { position: relative; }
.faq-item--mark > .faq-answer + .faq-mark { margin-bottom: var(--s-md); }
@media (min-width: 900px) {
  .faq-mark.ink-mark--aside { float: none; margin: var(--s-md) 0; }
}
@media (min-width: 1100px) {
  .faq-mark.ink-mark--aside { position: absolute; left: calc(100% + var(--s-xl)); top: 0; margin: 0; }
}