/* Before you sell: paper band, heading plus a list of six questions. Mobile first. Loaded after the
   shared closing.css (still used by other pages), so these rules win over its older .v2-faq styles.
   Motion: faq-motion.js fades the answer and slides the questions below (transform, opacity; no
   height animation); the plus turns into a cross. */
.v2-fq { --fq-ink: #20231e; --fq-muted: #5f6459; --fq-line: #dcddd4; --fq-olive: #3f5130; --fq-lime: #adf28c; padding: 0; background: #f7f7f2; color: var(--fq-ink); scroll-margin-top: 77px; }
.v2-fq-inner { max-width: 1360px; margin: 0 auto; padding: 56px 20px 64px; display: grid; gap: 28px; }
.v2-fq-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fq-olive); }
.v2-fq h2 { margin: 0; max-width: 14ch; font-size: clamp(32px, 8.6vw, 64px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.v2-fq-all, .v2-fq .v2-faq-related { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: #c7cbbf; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.v2-fq-all { margin-top: 14px; }
.v2-fq-all:hover, .v2-fq .v2-faq-related:hover { color: var(--fq-ink); text-decoration-color: var(--fq-ink); }
.v2-fq a:focus-visible, .v2-fq summary:focus-visible { outline: 2px solid var(--fq-olive); outline-offset: 3px; }

.v2-fq-item { border-top: 1px solid var(--fq-line); }
.v2-fq-item:last-child { border-bottom: 1px solid var(--fq-line); }
.v2-fq-item summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px; align-items: center; gap: 12px; min-height: 72px; padding: 14px 0; list-style: none; cursor: pointer; }
.v2-fq-item summary::-webkit-details-marker { display: none; }
.v2-fq-number { font-size: 13px; font-weight: 600; color: var(--fq-olive); font-variant-numeric: tabular-nums; }
.v2-fq-item h3 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; }
.v2-fq-toggle { position: relative; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--fq-line); }
.v2-fq-toggle::before, .v2-fq-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 1px; background: var(--fq-ink); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.v2-fq-toggle::after { transform: rotate(90deg); }
.v2-fq-item[open] .v2-fq-toggle { background: var(--fq-lime); box-shadow: none; }
.v2-fq-item[open] .v2-fq-toggle::before { transform: rotate(45deg); }
.v2-fq-item[open] .v2-fq-toggle::after { transform: rotate(135deg); }
.v2-fq-item summary:hover h3 { color: var(--fq-olive); }
.v2-fq-answer { padding: 0 44px 22px 40px; }
.v2-fq-answer p { margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--fq-muted); text-wrap: pretty; }
/* Inline, so a wrapped label keeps the arrow right after its last word. */
.v2-fq .v2-faq-related { display: inline-block; margin-top: 4px; padding: 10px 0; line-height: 1.4; }
.v2-fq .v2-faq-related .v2-icon { display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -3px; }

@media (min-width: 640px) {
  .v2-fq-inner { padding: 72px 28px 80px; gap: 36px; }
  .v2-fq-item summary { grid-template-columns: 40px minmax(0, 1fr) 36px; min-height: 80px; }
  .v2-fq-toggle { width: 36px; height: 36px; }
  .v2-fq-item h3 { font-size: 20px; }
  .v2-fq-answer { padding: 0 60px 26px 52px; }
}

@media (min-width: 1024px) {
  .v2-fq-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; padding: 104px 36px 112px; }
  .v2-fq-heading { position: sticky; top: 120px; }
  .v2-fq-eyebrow { font-size: 14px; }
  .v2-fq-item h3 { font-size: 22px; }
  .v2-fq-answer p { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-fq-toggle::before, .v2-fq-toggle::after { transition: none; }
}