/* Landing page "06 / FAQ" band (Views/Home/_LandingFaq.cshtml, generated from
   the shared help content). One native <details>, closed by default. */

.faq-section { background: #14171a; border-block: 1px solid #2a2f34; padding-block: 6rem; }
.faq-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 1.5rem 4rem; align-items: start; }
.faq-heading { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 7rem; display: grid; gap: 1.6rem; }
.faq-heading h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.faq-heading .eyebrow { margin-bottom: 1rem; }
.faq-lead { margin: 0; max-width: 30rem; color: #b6bcc2; font-size: 1rem; line-height: 1.8; }

.faq-tools { grid-column: 2; display: grid; gap: 1rem; }
.faq-search { position: relative; display: block; }
.faq-search svg { position: absolute; left: 1rem; top: 50%; width: 1.1rem; height: 1.1rem; translate: 0 -50%; fill: none; stroke: #8f9aa3; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.faq-search input { width: 100%; min-height: 3.25rem; padding: 0 1rem 0 2.8rem; border: 1px solid #36424b; border-radius: 10px; background: #0f1418; color: var(--text); font: 500 1rem/1.4 var(--body); }
.faq-search input::placeholder { color: #7f8a93; }
.faq-search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 100, 40, .18); }
.faq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faq-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.faq-filter { min-height: 2.5rem; padding: 0 1rem; border: 1px solid #36424b; border-radius: 999px; background: transparent; color: #c9d1d7; font: 600 .875rem/1 var(--body); cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.faq-filter:hover { border-color: #6b7782; color: #fff; }
.faq-filter[aria-pressed="true"] { border-color: var(--orange); background: rgba(255, 100, 40, .12); color: #fff; }
.faq-filter:focus-visible, .faq-item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.faq-groups { grid-column: 2; display: grid; gap: 2.6rem; }
.faq-group-title { margin: 0 0 .4rem; color: var(--orange); font: 400 .875rem/1.7 var(--brand); letter-spacing: .06em; text-transform: uppercase; }
.faq-item { border-top: 1px solid #303a42; }
.faq-group .faq-item:last-child { border-bottom: 1px solid #303a42; }
.faq-item summary { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-block: .9rem; list-style: none; cursor: pointer; color: #e8edf0; font: 600 1.0625rem/1.45 var(--body); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: 0 0 auto; color: var(--orange); font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform .22s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: #ff966b; }
.faq-answer { display: grid; gap: .8rem; padding: 0 2.5rem 1.6rem 0; color: #b6bcc2; font-size: .9875rem; line-height: 1.8; }
.faq-item[open] .faq-answer { animation: faq-enter .22s ease-out; }
.faq-answer p { margin: 0; max-width: 46rem; }
.faq-answer .faq-chip { display: inline-block; padding: .05rem .5rem; margin: 0 .1rem; border: 1px solid #36424b; border-radius: 5px; background: #161d22; color: #eef2f4; font: 600 .875rem/1.5 var(--body); white-space: nowrap; }
.faq-empty { grid-column: 2; margin: 0; color: var(--muted); }
.faq-item mark { background: rgba(255, 100, 40, .3); color: #fff; border-radius: 3px; padding: 0 .1rem; }
@keyframes faq-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } .faq-item[open] .faq-answer { animation: none; } }

@media (max-width: 1100px) {
  .faq-section { padding-block: 4.8rem; }
  .faq-inner { gap: 1.5rem 2.5rem; }
}
@media (max-width: 900px) {
  .faq-inner { grid-template-columns: minmax(0, 1fr); }
  .faq-heading, .faq-tools, .faq-groups, .faq-empty { grid-column: 1; }
  .faq-heading { grid-row: auto; position: static; gap: 1.2rem; }
}
@media (max-width: 760px) {
  .faq-section { padding-block: 3.6rem; }
  .faq-heading h2 { font-size: 1.8rem; }
  .faq-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.25rem; padding-inline: 1.25rem; scrollbar-width: none; }
  .faq-filters::-webkit-scrollbar { display: none; }
  .faq-filter { flex: 0 0 auto; }
  .faq-item summary { font-size: 1rem; min-height: 3.6rem; }
  .faq-answer { padding-right: 0; font-size: .9375rem; }
}

/* Topic list: plain anchors (work without JavaScript), sticky beside the questions. */
.faq-topics { display: grid; gap: .5rem; }
.faq-topics-label { margin: 0; color: #7f8a93; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.faq-topics ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid #303a42; }
.faq-topics li { border-bottom: 1px solid #303a42; }
.faq-topics a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.9rem; color: #c9d1d7; font-size: .9375rem; font-weight: 600; text-decoration: none; transition: color .15s ease; }
.faq-topics a:hover, .faq-topics a.is-current { color: #ff966b; }
.faq-topics a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.faq-topics small { color: #7f8a93; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.faq-group { scroll-margin-top: 7rem; }
@media (max-width: 900px) {
  .faq-topics-label { display: none; }
  .faq-topics ul { display: flex; gap: .5rem; overflow-x: auto; border: 0; margin-inline: -1.25rem; padding-inline: 1.25rem; scrollbar-width: none; }
  .faq-topics ul::-webkit-scrollbar { display: none; }
  .faq-topics li { border: 0; flex: 0 0 auto; }
  .faq-topics a { min-height: 2.5rem; padding: 0 1rem; border: 1px solid #36424b; border-radius: 999px; font-size: .875rem; }
  .faq-topics small { display: none; }
}

/* ---------- Collapsible FAQ band (closed by default) ---------- */
.faq-section { padding-block: 0; }
.faq-panel > summary { list-style: none; cursor: pointer; }
.faq-panel > summary::-webkit-details-marker { display: none; }
.faq-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: 1.5rem 3rem; padding-block: 2.6rem; }
.faq-summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 4px; }
.faq-summary-title { display: grid; gap: .55rem; }
.faq-summary-title .eyebrow { display: block; margin: 0; }
.faq-h2 { font: 400 clamp(1.6rem, 2.4vw, 2.3rem)/1.15 var(--brand); text-transform: uppercase; letter-spacing: -.01em; color: var(--text); }
.faq-h2 .text-offset { margin-left: .35em; }
.faq-summary-lead { color: #b6bcc2; font-size: 1rem; line-height: 1.7; max-width: 34rem; }
.faq-toggle { display: inline-flex; align-items: center; gap: .8rem; min-height: 3rem; padding: 0 1.1rem 0 1.3rem; border: 1px solid rgba(255, 100, 40, .7); border-radius: 999px; color: #fff; font: 600 .9375rem/1 var(--body); white-space: nowrap; transition: background-color .15s ease; }
.faq-summary:hover .faq-toggle { background: rgba(255, 100, 40, .12); }
.faq-plus { color: var(--orange); font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform .22s ease; }
.faq-toggle-close { display: none; }
.faq-panel[open] .faq-toggle-open { display: none; }
.faq-panel[open] .faq-toggle-close { display: inline; }
.faq-panel[open] .faq-plus { transform: rotate(45deg); }
.faq-panel[open] > .faq-inner { animation: faq-enter .22s ease-out; }
.faq-panel > .faq-inner { padding-bottom: 4rem; border-top: 1px solid #2a2f34; padding-top: 2.4rem; }
.faq-heading { top: 6rem; }
.faq-lead { margin: 0; }
.faq-close { grid-column: 2; justify-self: start; min-height: 2.75rem; padding: 0 1.2rem; border: 1px solid #36424b; border-radius: 999px; background: transparent; color: #c9d1d7; font: 600 .875rem/1 var(--body); cursor: pointer; }
.faq-close:hover { border-color: #6b7782; color: #fff; }
.faq-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 1100px) { .faq-summary { grid-template-columns: minmax(0, 1fr) auto; } .faq-summary-lead { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 900px) { .faq-close { grid-column: 1; } }
@media (max-width: 760px) {
  .faq-summary { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-block: 2rem; }
  .faq-summary-lead { grid-row: auto; }
  .faq-toggle { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .faq-plus { transition: none; } .faq-panel[open] > .faq-inner { animation: none; } }