/* =====================================================
   R1 ReadyFirst – FAQ Page Layout
   Requires: shared.css
   ===================================================== */

/* HERO */
.faq-hero{padding:var(--lg) var(--md) var(--xl);background:var(--sand);text-align:center;position:relative;overflow:hidden}
.faq-hero::before{content:'';position:absolute;top:-120px;right:-80px;width:360px;height:360px;border-radius:50%;background:rgba(var(--jade-rgb),.04)}
.faq-hero__inner{max-width:620px;margin:0 auto;position:relative;z-index:1}
.faq-hero .section-eyebrow{color:var(--eyebrow-light)}
.faq-hero h1{font-size:clamp(2rem,5vw,2.75rem);font-weight:800;color:var(--char);margin-bottom:var(--sm);line-height:1.1}
.faq-hero p{font-family:var(--font-prose);font-size:clamp(1.0625rem,2vw,1.1875rem);color:var(--char);line-height:1.7;max-width:560px;margin:0 auto var(--lg)}
.faq-hero__nav{display:flex;gap:var(--sm);justify-content:center;flex-wrap:wrap}
.faq-hero__nav-link{font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:var(--jade);text-decoration:none;padding:.5rem 1rem;border-radius:6px;background:var(--white);box-shadow:var(--sh);transition:all .3s}
.faq-hero__nav-link:hover{background:var(--jade);color:var(--white)}

/* SECTIONS */
.faq-section{padding:var(--lg) var(--md)}
.faq-section--alt{background:var(--white)}
.faq-section__inner{max-width:720px;margin:0 auto}
.faq-section__label{font-family:var(--font-ui);font-size:1.5rem;font-weight:700;color:var(--char);margin-bottom:var(--lg);padding-bottom:var(--sm)}

/* FAQ ITEMS */
.faq-item{border-bottom:1px solid var(--sand-dk);padding:0}
.faq-item__q{font-family:var(--font-ui);font-size:1rem;font-weight:600;color:var(--char);cursor:pointer;padding:1.25rem 2rem 1.25rem 0;position:relative;list-style:none;line-height:1.4}
.faq-item__q::-webkit-details-marker{display:none}
.faq-item__q::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:12px;height:12px;border-right:2px solid var(--jade);border-bottom:2px solid var(--jade);transform:translateY(-60%) rotate(45deg);transition:transform .3s}
details[open] .faq-item__q::after{transform:translateY(-40%) rotate(-135deg)}
.faq-item__a{padding:0 0 1.25rem;font-family:var(--font-ui);font-size:.9375rem;color:var(--wgray);line-height:1.65}
.faq-item__a p{margin-bottom:.75rem}
.faq-item__a p:last-child{margin-bottom:0}
.faq-item__a a{color:var(--jade);font-weight:600}

/* CTA */
.faq-cta{padding:var(--lg) var(--md);background:#1F5F56;color:var(--white);text-align:center}
.faq-cta__inner{max-width:560px;margin:0 auto}
.faq-cta h2{color:var(--white);margin-bottom:var(--sm)}
.faq-cta p{font-family:var(--font-ui);font-size:1rem;color:rgba(var(--sand-rgb),.85);margin-bottom:var(--lg)}
.faq-cta__buttons{display:flex;gap:var(--sm);justify-content:center;flex-wrap:wrap}

/* RESPONSIVE */
@media(max-width:767px){
  .faq-hero{padding:52px 20px}
  .faq-hero__nav{flex-direction:column;align-items:center}
  .faq-hero__nav-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .faq-section{padding:var(--lg) var(--sm)}
}

/* =====================================================
   REVAMP (Sept 2026) – sticky category bar and character
   headers. Tokens only. Partners carries no character
   (funder content; CLAUDE.md §5.7).
   ===================================================== */
.faq-hero p{margin-bottom:0}
.faq-jump{position:sticky;top:0;z-index:50;background:rgba(var(--sand-rgb),.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--sand-dk)}
.faq-jump__inner{max-width:720px;margin:0 auto;padding:.625rem var(--md);display:flex;gap:.5rem;justify-content:center;overflow-x:auto;scrollbar-width:none}
.faq-jump__inner::-webkit-scrollbar{display:none}
.faq-jump .faq-hero__nav-link{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;box-shadow:none;border:1.5px solid rgba(var(--jade-rgb),.25);border-radius:999px;background:transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.faq-jump .faq-hero__nav-link:hover{background:rgba(var(--jade-rgb),.08);color:var(--jade-dk)}
.faq-jump .faq-hero__nav-link[aria-current="true"]{background:var(--jade);border-color:var(--jade);color:var(--white)}
.faq-jump .faq-hero__nav-link:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.faq-section{scroll-margin-top:64px}
.faq-section__label--char{display:flex;align-items:center;gap:var(--sm)}
.faq-section__char{width:88px;flex:0 0 88px;margin:-.75rem 0 -.75rem -.5rem}
@media(max-width:767px){
  /* One swipeable row, as on desktop; js/r1-motion.js keeps the current category in view */
  .faq-jump__inner{justify-content:flex-start;flex-wrap:nowrap;gap:.375rem;padding:.5rem 16px;scroll-padding-inline:16px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .faq-jump .faq-hero__nav-link{font-size:.8125rem;padding:.375rem .875rem;min-height:44px;scroll-snap-align:start}
  .faq-section{scroll-margin-top:72px}
  .faq-section__label{font-size:1.25rem}
  .faq-section__char{width:68px;flex-basis:68px}
}