.faq-page .help-intro a, .faq-answer a, .faq-lead a, .faq-body a, .faq-platform a { color: var(--product-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--product-accent) 45%, transparent); text-underline-offset: 3px; }
.faq-page .help-intro a:hover, .faq-answer a:hover, .faq-lead a:hover, .faq-body a:hover, .faq-platform a:hover { text-decoration-color: var(--product-ink); }

.faq-category { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); padding-block: clamp(52px, 7vw, 84px); border-top: 1px solid var(--product-line); }
.faq-category:first-of-type { border-top: 0; }
.faq-category-heading .product-eyebrow { margin-bottom: 12px; }
.faq-category-heading h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 660; letter-spacing: -.05em; line-height: 1.25; }
.faq-list { border-top: 1px solid var(--product-line); }
.faq-item { border-bottom: 1px solid var(--product-line); scroll-margin-top: 96px; }
.faq-item summary { position: relative; display: block; padding: 22px 44px 22px 0; cursor: pointer; font-size: 17px; font-weight: 620; letter-spacing: -.03em; line-height: 1.5; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; top: 19px; right: 4px; color: var(--product-accent); font-size: 22px; font-weight: 400; transition: transform 180ms ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--product-deep); }
.faq-answer { padding: 0 44px 24px 0; color: var(--product-muted); font-size: 15px; line-height: 1.85; }
.faq-answer p + p { margin-top: 12px; }
.faq-more { color: var(--product-ink); font-size: 13px; font-weight: 650; text-decoration: none !important; }
.faq-more:hover { color: var(--product-accent); }

.faq-detail-hero { padding: clamp(64px, 8vw, 104px) 0 clamp(40px, 5vw, 56px); background: var(--site-background); }
.faq-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: var(--product-muted); font-size: 13px; }
.faq-breadcrumb a:hover { color: var(--product-ink); }
.faq-detail-hero h1 { max-width: 820px; font-size: clamp(32px, 4.6vw, 52px); font-weight: 680; letter-spacing: -.06em; line-height: 1.22; }
.faq-lead { max-width: 760px; margin-top: 28px; padding: 24px 28px; border-left: 3px solid var(--product-accent); border-radius: 0 18px 18px 0; background: var(--site-background); font-size: clamp(16px, 1.8vw, 18px); line-height: 1.8; }

.faq-article { max-width: 820px; padding-block: clamp(48px, 6vw, 72px) clamp(72px, 9vw, 110px); }
.faq-body h2, .faq-platform h2, .faq-related h2 { font-size: 22px; font-weight: 660; letter-spacing: -.04em; line-height: 1.35; }
.faq-body h2 { margin-top: 44px; }
.faq-body > h2:first-child { margin-top: 0; }
.faq-body p, .faq-body li, .faq-platform p, .faq-platform li { color: var(--product-muted); font-size: 15px; line-height: 1.85; }
.faq-body p { margin-top: 14px; }
.faq-body ul, .faq-body ol, .faq-platform ul, .faq-platform ol { display: grid; gap: 10px; margin-top: 16px; padding-left: 22px; }
.faq-body li::marker, .faq-platform li::marker { color: var(--product-accent); font-weight: 700; }
.faq-body strong, .faq-platform strong { color: var(--product-ink); font-weight: 650; }

.faq-figures { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-bottom: 48px; }
.faq-figure { flex: 0 1 260px; margin: 0; }
.faq-figure--wide { flex-basis: 420px; }
.faq-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--product-line); border-radius: 22px; background: var(--product-surface); }
.faq-figure figcaption { margin-top: 10px; color: var(--product-muted); font-size: 12px; line-height: 1.6; }

.faq-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 48px; }
.faq-platform { padding: 26px; border: 1px solid var(--product-line); border-radius: 22px; background: var(--site-background); }
.faq-platform h2 { font-size: 17px; }
.faq-platform > p:first-of-type { margin-top: 10px; }
.faq-platform p + p { margin-top: 10px; }

.faq-related { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--product-line); }
.faq-related ul { display: grid; gap: 0; margin-top: 16px; list-style: none; border-top: 1px solid var(--product-line); }
.faq-related li a { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--product-line); }
.faq-related li strong { font-size: 15px; font-weight: 650; }
.faq-related li span { color: var(--product-muted); font-size: 14px; line-height: 1.75; }
.faq-related li a:hover strong { color: var(--product-accent); }
.faq-related p { margin-top: 20px; color: var(--product-muted); font-size: 13px; }
.faq-related p a { color: var(--product-ink); font-weight: 600; }

@media (max-width: 760px) {
  .faq-category { grid-template-columns: 1fr; gap: 18px; }
  .faq-item summary { padding-block: 19px; font-size: 16px; }
  .faq-item summary::after { top: 16px; }
  .faq-answer { padding-right: 0; font-size: 14px; }
  .faq-lead { padding: 20px 22px; }
  .faq-platform { padding: 22px; }
  .faq-figures { gap: 12px; margin-bottom: 36px; }
  .faq-figure { flex-basis: calc(50% - 6px); }
  .faq-figure--wide { flex-basis: 100%; }
}
