/* B2B/B2C copy and keyboard-native FAQ, in the existing water-journey layout. */
.audience-grid { display: grid; gap: 16px; margin: 0 0 32px; }
.audience-card { padding: 26px; border: 1px solid #c8dfe8; border-radius: 18px; background: #faffffeb; }
.audience-card:first-child { background: #0e3544f5; border-color: #244f5e; color: #fff; }
.audience-card .audience-label { margin: 0 0 14px; font: 16px/1.5 ui-monospace, monospace; color: #357c94; }
.audience-card:first-child .audience-label { color: #94d2e2; }
.audience-card h3 { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -.035em; font-weight: 500; margin: 0 0 15px; }
.audience-card p { font-size: 16px; line-height: 1.75; margin: 0; color: #486c7d; }
.audience-card:first-child p { color: #c0d8e1; }
.audience-card .audience-focus { border-top: 1px solid #c8dfe8; margin-top: 18px; padding-top: 16px; }
.audience-card:first-child .audience-focus { border-color: #426371; }
.faq-section { padding: 100px 0; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid #c8dfe8; border-radius: 15px; background: #fafffff2; overflow: clip; transition: border-color .25s, background .25s; }
.faq-item[open] { border-color: #65a9bf; background: #fff; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 22px 24px; list-style: none; cursor: pointer; color: #103746; font-size: 18px; font-weight: 550; line-height: 1.5; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary:hover { background: #eaf7fb; }
.faq-item summary:focus-visible { outline: 2px solid #247e98; outline-offset: -5px; border-radius: 15px; }
.faq-toggle { position: relative; width: 22px; height: 22px; flex: 0 0 22px; transition: transform .25s ease; }
.faq-toggle::before, .faq-toggle::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; }
.faq-toggle::before { left: 3px; right: 3px; top: 10px; height: 2px; }
.faq-toggle::after { top: 3px; bottom: 3px; left: 10px; width: 2px; }
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-answer { padding: 0 24px 24px; }
.faq-answer p { margin: 0; max-width: 65ch; font-size: 16px; line-height: 1.85; color: #486c7d; }
.faq-item[open] .faq-answer { animation: faq-reveal .25s ease both; }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .audience-card { padding: 20px; }
  .audience-card h3 { font-size: 23px; overflow-wrap: anywhere; }
  .faq-section { padding: 70px 0 20px; }
  .faq-section .journey-columns { display: block; }
  .faq-section .journey-lane { position: absolute; left: -110px; top: 0; bottom: 0; width: 80px; pointer-events: none; }
  .faq-item summary { gap: 15px; padding: 20px; font-size: 16px; min-height: 72px; }
  .faq-answer { padding: 0 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-toggle { transition: none; }
  .faq-item[open] .faq-answer { animation: none; }
}
