/* FAQ-only navigation and small illustrations. Shared palette: guide-diagrams.css. */
.faq-topics { margin: -1rem 0 2.5rem; }
.faq-topics-label { margin-bottom: .85rem; color: #9ab6cc; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.faq-topics ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.faq-topics li { min-width: 0; }
.faq-topics a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .75rem; height: 100%; padding: 1rem .55rem; border: 1px solid #304355; border-radius: 8px; background: #101a24; color: #e2edf7; font-size: .75rem; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; }
.faq-topics a:hover { border-color: #a0cdf4; background: #192c3c; }
.faq-topics a:focus-visible { outline: 2px solid #a0cdf4; outline-offset: 4px; }
.faq-topics svg { flex-shrink: 0; width: 24px; height: 24px; fill: none; stroke: #a0cdf4; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.faq-topics svg * { vector-effect: non-scaling-stroke; }
.page-mkt .faq-category[id], .page-mkt .faq-item[id] { scroll-margin-top: 5rem; }
.page-mkt #faq-general { margin-top: 0; }
.page-mkt .faq-diagram { margin: 1.35rem 0; padding: 1.25rem; border-radius: 8px; }
.page-mkt .faq-diagram figcaption { margin-bottom: 1.25rem; }
.page-mkt .faq-diagram figcaption > strong { font-size: 1.12rem; line-height: 1.4; }
.page-mkt .faq-diagram ul, .page-mkt .faq-diagram ol { padding: 0; margin: 0; list-style: none; }
.page-mkt .faq-diagram li { margin: 0; }
.page-mkt .faq-diagram p { margin-bottom: 0; }
.page-mkt .faq-diagram .gd-note { margin-top: 1rem; padding-top: .85rem; font-size: .75rem; }
.page-mkt .faq-diagram strong { color: var(--gd-ink); }

/* All clients have the same visual weight and reach a common knowledge layer. */
.faq-diagram .faq-ai-clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.faq-ai-clients li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: .75rem .55rem; min-height: 108px; border: 1px solid var(--gd-border); border-radius: 6px; text-align: center; }
.faq-ai-clients strong { font-size: .75rem; line-height: 1.5; font-weight: 500; }
.faq-ai-clients li::after { content: ''; position: absolute; top: 100%; left: 50%; height: 1rem; border-left: 1px solid var(--gd-accent); }
.faq-ai-bridge { position: relative; display: flex; justify-content: center; align-items: center; height: 64px; }
.faq-ai-bridge::before { content: ''; position: absolute; top: 1rem; left: calc((100% - 1.6rem) / 6); right: calc((100% - 1.6rem) / 6); border-top: 1px solid var(--gd-accent); }
.faq-ai-bridge::after { content: ''; position: absolute; top: 1rem; bottom: 0; left: 50%; border-left: 1px solid var(--gd-accent); }
.faq-ai-bridge > span { position: relative; z-index: 1; padding: .15rem .5rem; border: 1px solid var(--gd-border); border-radius: 4px; background: var(--gd-bg); color: var(--gd-accent); font: .6875rem/1.5 Consolas, monospace; }
.faq-memory-hub { display: flex; align-items: center; gap: .9rem; padding: .85rem; border: 1px solid var(--gd-accent); border-radius: 6px; background: var(--gd-soft); }
.faq-memory-hub svg { flex-shrink: 0; }
.faq-memory-hub strong { display: block; font-size: .8125rem; }
.faq-memory-hub span { display: block; margin-top: .25rem; color: var(--gd-muted); font-size: .75rem; }

/* Progressive reading: a map, a relevant resource, then a selected block. */
.faq-diagram .faq-context-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; }
.faq-context-steps li { position: relative; display: grid; grid-template-rows: 48px auto 1fr auto; gap: .4rem; padding: .8rem .65rem; border: 1px solid var(--gd-border); border-radius: 6px; }
.faq-context-steps li:not(:last-child)::after { content: '→'; position: absolute; left: 100%; width: 1.35rem; top: 35px; text-align: center; color: var(--gd-accent); }
.faq-context-steps svg { width: 48px; height: 48px; }
.faq-context-steps .faq-svg-selected { fill: var(--gd-soft); }
.faq-context-steps .faq-step-number { margin-top: .45rem; color: var(--gd-accent); font: .6875rem/1.5 Consolas, monospace; }
.faq-context-steps strong { font-size: .8125rem; line-height: 1.5; }
.faq-context-steps li > span:last-child { color: var(--gd-muted); font-size: .75rem; line-height: 1.6; }

/* Local storage is distinct from the AI client's processing of requested context. */
.faq-privacy-flow { display: grid; grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr); align-items: stretch; gap: .5rem; }
.faq-privacy-node { padding: .85rem; border: 1px solid var(--gd-border); border-radius: 6px; background: var(--gd-soft); }
.faq-privacy-node svg { margin-bottom: 1rem; }
.faq-privacy-node .gd-label { font-size: .6rem; }
.faq-privacy-node strong { display: block; font-size: .8125rem; line-height: 1.5; }
.faq-privacy-node > span:last-child { display: block; margin-top: .45rem; color: var(--gd-muted); font-size: .75rem; line-height: 1.6; }
.faq-privacy-transfer { align-self: center; color: var(--gd-accent); text-align: center; }
.faq-privacy-transfer > span { font: .6875rem/1.5 Consolas, monospace; }
.faq-privacy-transfer svg { width: 100%; height: 16px; margin: .4rem 0; }
.faq-privacy-transfer small { display: block; color: var(--gd-muted); font-size: .625rem; line-height: 1.5; }

@media (max-width: 600px) {
  .faq-topics ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-topics li:last-child { grid-column: 1 / -1; }
  .faq-topics a { flex-direction: row; justify-content: flex-start; align-items: center; padding: .8rem; gap: .65rem; text-align: left; }
}
@media (max-width: 360px) {
  .faq-topics ul { grid-template-columns: minmax(0, 1fr); }
}
@container guide-figure (max-width: 440px) {
  .faq-diagram .faq-ai-network { padding-left: 1rem; border-left: 1px solid var(--gd-border); }
  .faq-diagram .faq-ai-clients { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .faq-ai-clients li { flex-direction: row; justify-content: flex-start; min-height: 0; padding: .65rem; text-align: left; }
  .faq-ai-clients li svg { flex-shrink: 0; width: 24px; height: 24px; }
  .faq-ai-clients li::after { display: none; }
  .faq-ai-clients li::before, .faq-diagram .faq-memory-hub::before { content: ''; position: absolute; top: 50%; right: 100%; width: 1rem; border-top: 1px solid var(--gd-border); }
  .faq-ai-bridge { height: 44px; justify-content: flex-start; }
  .faq-ai-bridge::before, .faq-ai-bridge::after { display: none; }
  .faq-diagram .faq-memory-hub { position: relative; align-items: flex-start; gap: .6rem; padding: .7rem; }
  .faq-memory-hub svg { width: 24px; height: 24px; }
  .faq-diagram .faq-context-steps { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; }
  .faq-context-steps li { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: .2rem .8rem; padding: .8rem; }
  .faq-context-steps svg { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  .faq-context-steps .faq-step-number { margin: 0; }
  .faq-context-steps li:not(:last-child)::after { content: '↓'; top: 100%; left: calc(50% - .675rem); line-height: 1.35rem; }
  .faq-privacy-flow { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .faq-privacy-node { padding: .85rem; }
  .faq-privacy-transfer { display: flex; align-items: center; justify-content: center; gap: .5rem; }
  .faq-privacy-transfer svg { width: 32px; height: 32px; margin: 0; transform: rotate(90deg); }
  .faq-privacy-transfer small { max-width: 5rem; text-align: left; font-size: .6875rem; }
}