/* FAQ Hub V2 — residential, commercial and vendor question paths */
.faq-v2 {
  --faq-navy-950: #061a2c;
  --faq-navy-900: #08243b;
  --faq-navy-800: #0d3554;
  --faq-green-700: #0f633c;
  --faq-green-600: #137347;
  --faq-green-500: #25a66a;
  --faq-mint: #dff8ea;
  --faq-blue: #e9f3f8;
  --faq-slate-50: #f7fafb;
  --faq-slate-100: #eef3f5;
  --faq-border: #d7e4ea;
  --faq-ink: #10283a;
  --faq-muted: #5a7080;
  --faq-shadow: 0 22px 60px rgba(4,28,47,.13);
  color: var(--faq-ink);
  background: var(--faq-slate-50);
}

.faq-v2 *,
.faq-v2 *::before,
.faq-v2 *::after { box-sizing: border-box; }
.faq-v2 main { overflow: hidden; }
.faq-v2 .container { width: min(1180px,calc(100% - 40px)); }
.faq-v2 .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.faq-skip-link { position: fixed; top: 10px; left: 10px; z-index: 2147483647; padding: 12px 16px; border-radius: 9px; color: #fff; background: var(--faq-navy-950); font-weight: 800; transform: translateY(-160%); }
.faq-skip-link:focus { transform: translateY(0); }

.faq-v2 .site-header { border-bottom: 1px solid rgba(255,255,255,.09); background: var(--faq-navy-950); box-shadow: 0 8px 28px rgba(4,28,47,.14); }
.faq-v2 .brand-lockup { height: 60px !important; }
.faq-v2 .nav-links { gap: clamp(12px,1.1vw,22px); }
.faq-v2 .nav-links > a { font-size: .91rem; white-space: nowrap; }
.faq-v2 .header-call,
.faq-v2 .header-cta { white-space: nowrap; }
.faq-v2 .header-cta { border-color: var(--faq-green-600); color: #fff; background: var(--faq-green-600); }
.faq-v2 .header-cta:hover { border-color: #0c5935; background: #0c5935; }

.faq-breadcrumb { border-top: 1px solid rgba(255,255,255,.08); color: #afc1cc; background: var(--faq-navy-950); font-size: .9rem; }
.faq-breadcrumb .container { display: flex; gap: 10px; align-items: center; padding: 14px 0; }
.faq-breadcrumb a { color: #fff; text-decoration: none; }
.faq-breadcrumb a:hover { text-decoration: underline; }

.faq-hero { position: relative; padding: clamp(58px,7vw,92px) 0 clamp(64px,7vw,92px); color: #fff; background: radial-gradient(circle at 88% 8%,rgba(37,166,106,.3),transparent 34%),linear-gradient(120deg,var(--faq-navy-950),#0b3552 70%,#16413d); }
.faq-hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to right,#000,transparent 82%); }
.faq-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.72fr); gap: clamp(40px,6vw,78px); align-items: center; }
.faq-hero__content { max-width: 720px; }
.faq-v2 .kicker { display: block; margin: 0 0 14px; padding: 0; color: var(--faq-green-700); background: transparent; font-size: .78rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.faq-hero .kicker { color: #9cf0c1; }
.faq-hero h1 { max-width: 760px; margin: 0; color: #fff; font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size: clamp(2.8rem,5vw,4.6rem); font-weight: 900; letter-spacing: -.055em; line-height: .98; }
.faq-hero .lead { max-width: 680px; margin: 22px 0 0; color: #d3e1e9; font-size: clamp(1.05rem,1.45vw,1.22rem); line-height: 1.65; }
.faq-hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.faq-hero__actions .btn { min-height: 50px; }
.faq-hero__actions .btn-primary { border-color: #64dfa0; color: #062719; background: #64dfa0; }
.faq-hero__actions .btn-primary:hover { border-color: #81e9b1; background: #81e9b1; }
.faq-hero__actions .btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); }
.faq-hero__facts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 9px; }
.faq-hero__facts span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #d9e7ee; background: rgba(255,255,255,.05); font-size: .82rem; font-weight: 700; }

.faq-audience-grid { display: grid; gap: 14px; }
.faq-audience-card { display: block; min-height: 148px; padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; color: #fff; background: rgba(5,28,45,.72); box-shadow: 0 24px 58px rgba(2,19,32,.22); text-decoration: none; }
.faq-audience-card:hover { border-color: rgba(156,240,193,.62); background: rgba(5,28,45,.88); }
.faq-audience-card span { color: #9cf0c1; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.faq-audience-card strong { display: block; margin-top: 7px; color: #fff; font-size: 1.3rem; }
.faq-audience-card p { margin: 7px 0 0; color: #cbdbe3; line-height: 1.55; }

.faq-tools { position: relative; z-index: 3; margin-top: -28px; }
.faq-tools__shell { padding: clamp(20px,3vw,30px); border: 1px solid var(--faq-border); border-radius: 24px; background: #fff; box-shadow: var(--faq-shadow); }
.faq-tools__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.72fr); gap: 22px; align-items: end; }
.faq-tools__head h2 { margin: 0; color: var(--faq-navy-950); font-size: clamp(1.75rem,3vw,2.5rem); letter-spacing: -.04em; }
.faq-tools__head p { margin: 10px 0 0; color: var(--faq-muted); }
.faq-search { display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 7px 12px; border: 1px solid #bfd0da; border-radius: 13px; background: var(--faq-slate-50); }
.faq-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.faq-search .results-note { flex: 0 0 auto; color: var(--faq-muted); font-size: .83rem; }
.faq-chipbar { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 9px; }
.faq-filter { min-height: 42px; padding: 9px 14px; border: 1px solid var(--faq-border); border-radius: 999px; color: var(--faq-navy-800); background: #fff; font-weight: 800; cursor: pointer; }
.faq-filter:hover,
.faq-filter:focus-visible { border-color: var(--faq-green-600); }
.faq-filter[aria-pressed="true"] { border-color: var(--faq-green-600); color: #fff; background: var(--faq-green-700); }

.faq-content { padding: clamp(70px,8vw,108px) 0; }
.faq-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 26px; align-items: start; }
.faq-toc { position: sticky; top: 92px; padding: 20px; border: 1px solid var(--faq-border); border-radius: 20px; background: #fff; box-shadow: 0 14px 36px rgba(4,28,47,.09); }
.faq-toc h2 { margin: 0; color: var(--faq-navy-950); font-size: 1rem; }
.faq-toc p { margin: 8px 0 14px; color: var(--faq-muted); font-size: .9rem; line-height: 1.55; }
.faq-toc a { display: block; padding: 9px 0; border-bottom: 1px solid var(--faq-border); color: var(--faq-navy-800); font-weight: 750; text-decoration: none; }
.faq-toc a:last-child { border-bottom: 0; }
.faq-toc a:hover { color: var(--faq-green-700); }
.faq-main { display: grid; gap: 22px; }
.faq-empty { margin: 0; padding: 24px; border: 1px dashed #a9bdc8; border-radius: 18px; color: var(--faq-muted); background: #fff; text-align: center; }
.faq-section { scroll-margin-top: 96px; padding: clamp(22px,3vw,32px); border: 1px solid var(--faq-border); border-radius: 24px; background: #fff; box-shadow: 0 18px 48px rgba(4,28,47,.09); }
.faq-section[hidden] { display: none; }
.faq-section__head { margin-bottom: 18px; }
.faq-section__head h2 { margin: 0; color: var(--faq-navy-950); font-size: clamp(1.65rem,3vw,2.35rem); letter-spacing: -.035em; }
.faq-section__head p { margin: 10px 0 0; color: var(--faq-muted); line-height: 1.65; }
.faq-item { margin: 0; border-top: 1px solid var(--faq-border); }
.faq-item[hidden] { display: none; }
.faq-item:first-of-type { border-top: 0; }
.faq-summary { position: relative; min-height: 58px; padding: 17px 42px 17px 0; color: var(--faq-navy-950); font-weight: 850; line-height: 1.45; cursor: pointer; list-style: none; }
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after { content: "+"; position: absolute; top: 16px; right: 4px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--faq-green-700); background: var(--faq-mint); font-size: 1.1rem; }
.faq-item[open] .faq-summary::after { content: "−"; }
.faq-answer { padding: 0 42px 20px 0; color: #355263; line-height: 1.7; }
.faq-answer p { margin: 0; }
.faq-answer a { font-weight: 800; }
.faq-section--vendor { background: linear-gradient(180deg,#fff,#f4f8fb); }

.faq-closing { padding: clamp(54px,7vw,84px) 0; color: #fff; background: var(--faq-navy-950); }
.faq-closing__grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; }
.faq-closing h2 { margin: 0; color: #fff; font-size: clamp(2rem,4vw,3.25rem); letter-spacing: -.045em; }
.faq-closing p { max-width: 720px; margin: 14px 0 0; color: #c6d7df; }
.faq-closing__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.faq-closing .btn-primary { color: #062719; background: #64dfa0; border-color: #64dfa0; }
.faq-closing .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }

.faq-sticky-actions { display: none; }
.faq-v2 .site-footer h3 { color: #fff; }
.faq-v2 .site-footer .footer-badge__count,
.faq-v2 .site-footer .center.small.muted,
.faq-v2 .site-footer .center.small.muted p { color: #c6d5df; }

@media (max-width: 1080px) {
  .faq-v2 .nav-links { display: none; }
  .faq-v2 .menu-btn { display: inline-flex; }
  .faq-v2 .header-call { margin-left: auto; }
  .faq-hero__grid { grid-template-columns: minmax(0,1.15fr) minmax(310px,.85fr); gap: 34px; }
}

@media (max-width: 860px) {
  .faq-v2 { padding-bottom: 74px; }
  .faq-v2 .brand-lockup { height: 48px !important; }
  .faq-v2 .header-call,
  .faq-v2 .header-cta { display: none; }
  .faq-hero__grid,
  .faq-tools__head,
  .faq-layout,
  .faq-closing__grid { grid-template-columns: 1fr; }
  .faq-audience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .faq-toc { position: static; }
  .faq-closing__actions { justify-content: flex-start; }
  .faq-sticky-actions { position: fixed; z-index: 1200; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.12); background: rgba(6,26,44,.97); box-shadow: 0 -12px 30px rgba(4,28,47,.22); }
  .faq-sticky-actions .btn { min-height: 48px; justify-content: center; }
  .faq-sticky-actions .btn-primary { color: #062719; background: #64dfa0; }
  .faq-sticky-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,.52); background: transparent; }
}

@media (max-width: 620px) {
  .faq-v2 .container { width: min(100% - 28px,1180px); }
  .faq-v2 .brand-lockup { height: 40px !important; }
  .faq-hero { padding: 48px 0 62px; }
  .faq-hero h1 { font-size: clamp(2.45rem,12vw,3.3rem); }
  .faq-hero__actions,
  .faq-closing__actions { display: grid; grid-template-columns: 1fr; }
  .faq-hero__actions .btn,
  .faq-closing__actions .btn { width: 100%; justify-content: center; }
  .faq-audience-grid { grid-template-columns: 1fr; }
  .faq-tools { margin-top: -20px; }
  .faq-search { display: grid; }
  .faq-search .results-note { min-height: 18px; }
  .faq-section { padding: 20px; }
  .faq-answer { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-v2 *,
  .faq-v2 *::before,
  .faq-v2 *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}