/* StreamHUB V20 - FAQ editorial: a floating introduction and an accessible accordion. */
html[data-sh-page="faq"] main { display: block; flex: 1 0 auto; min-width: 0; }
html[data-sh-page="faq"] .hero { padding: clamp(66px, 9vw, 128px) 0 clamp(24px, 4vw, 48px); }
html[data-sh-page="faq"] .hero-intro { max-width: 860px; margin: 0 auto; text-align: center; }
html[data-sh-page="faq"] .hero-intro .eyebrow { margin: 0 0 20px; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-main); }
html[data-sh-page="faq"] .hero-intro .hero-copy { max-width: 800px; margin: 0 auto; font-size: clamp(1.16rem, 2vw, 1.55rem); line-height: 1.65; color: var(--text-main); text-wrap: balance; }
html[data-sh-page="faq"] .faq-section { padding: clamp(20px, 3vw, 44px) 0 clamp(75px, 9vw, 132px); }
html[data-sh-page="faq"] .section-heading { max-width: 840px; margin: 0 auto clamp(25px, 4vw, 46px); text-align: center; }
html[data-sh-page="faq"] .section-heading p { color: var(--text-subtle); line-height: 1.65; font-size: .94rem; margin: 0; }
html[data-sh-page="faq"] .faq-list { display: grid; gap: 14px; max-width: 1080px; margin: 0 auto; }
html[data-sh-page="faq"] .faq-item {
  min-width: 0; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
  background: var(--bg-surface); box-shadow: var(--sh-shadow-sm);
  overflow: hidden; transition: border-color 200ms ease, box-shadow 180ms ease;
}
html[data-sh-page="faq"] .faq-item:hover, html[data-sh-page="faq"] .faq-item:focus-within { box-shadow: var(--sh-shadow-focus-sm); }
html[data-sh-page="faq"] .faq-item summary { list-style: none; cursor: pointer; padding: 21px 58px 21px 24px; position: relative; line-height: 1.5; font-size: 1.04rem; font-weight: 725; color: var(--text-main); transition: background-color 180ms ease; }
html[data-sh-page="faq"] .faq-item summary::-webkit-details-marker { display: none; }
html[data-sh-page="faq"] .faq-item summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-main); font-weight: 850; line-height: 1;
  transition: background-color 180ms ease, transform 220ms ease;
}
html[data-sh-page="faq"] .faq-item[open] summary::after { content: "–"; transform: translateY(-50%) rotate(180deg); }
html[data-sh-page="faq"] .faq-item.is-closing summary::after { content: "+"; transform: translateY(-50%) rotate(0); }
html[data-sh-page="faq"] .faq-item summary:hover { background: var(--accent-soft); }
html[data-sh-page="faq"] .faq-item .faq-content { box-sizing: border-box; overflow: hidden; padding: 0; color: var(--text-subtle); line-height: 1.75; }
html[data-sh-page="faq"] .faq-item .faq-content-inner { padding: 0 24px 24px; }
html[data-sh-page="faq"] .faq-content-inner > :first-child { margin-top: 0; }
html[data-sh-page="faq"] .faq-content p { margin: 0; }
html[data-sh-page="faq"] .faq-content a { color: var(--accent-main); text-decoration: underline; text-underline-offset: .16em; }
@media (max-width:640px) {
  html[data-sh-page="faq"] .hero { padding-top: 60px; }
  html[data-sh-page="faq"] .faq-list { gap: 12px; }
  html[data-sh-page="faq"] .faq-item summary { padding: 19px 53px 19px 18px; }
  html[data-sh-page="faq"] .faq-item .faq-content-inner { padding: 0 18px 20px; }
}
@media(prefers-reduced-motion:reduce){ html[data-sh-page="faq"] .faq-item, html[data-sh-page="faq"] .faq-item summary, html[data-sh-page="faq"] .faq-item summary::after { transition:none; } }

/* V23: homepage-inspired editorial typography, without an enclosing hero card. */
html[data-sh-page="faq"] .hero { padding-top: clamp(88px, 11vw, 150px); padding-bottom: clamp(34px, 5vw, 62px); }
html[data-sh-page="faq"] .hero-intro { max-width: min(980px,100%); text-align: center; }
html[data-sh-page="faq"] .faq-kicker { margin: 0 0 17px; color: var(--accent-main); font-size: .69rem; font-weight: 780; letter-spacing: .16em; }
html[data-sh-page="faq"] .faq-display-title { margin: 0 auto 18px; font-weight: 830; font-size: clamp(2.8rem,7vw,6.25rem); line-height: 1.03; letter-spacing: -.065em; color: var(--text-main); text-wrap: balance; }
html[data-sh-page="faq"] .faq-title-dot { color: var(--accent-main); }
html[data-sh-page="faq"] .hero-intro .hero-copy { max-width: 700px; color: var(--text-subtle); font-size: clamp(1rem,1.55vw,1.28rem); line-height: 1.6; }
html[data-sh-page="faq"] .section-heading { margin-bottom: clamp(25px,4vw,38px); }
html[data-sh-page="faq"] .section-heading p { font-size: .85rem; }
@media (max-width:640px) { html[data-sh-page="faq"] .hero { padding-top: 78px; } html[data-sh-page="faq"] .faq-display-title { font-size: clamp(2.55rem,11.8vw,4rem); } }