/* Content pages that stay hand-authored HTML for crawlers (/faq, /faq/ia):
   same design system as the home (DESIGN.md) on one light FIELD surface — type
   roles, hairlines instead of cards, one "hole" button. Loaded after
   site-chrome.css (tokens, header, footer, buttons). */
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
::selection { background: var(--void); color: var(--bone); }

main {
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(7rem, 14vw, 10rem) var(--gutter) clamp(4rem, 8vw, 7rem);
}
main a { color: var(--fg); text-underline-offset: 0.2em; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); }
main a:hover { text-decoration-color: currentColor; }

.eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--fg-3); }
main h1 {
  font-family: var(--font-display); font-weight: 700; font-optical-sizing: auto;
  font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem); line-height: 1.02; letter-spacing: -0.022em;
  text-wrap: balance; margin: 0.75rem 0 var(--s-3);
}
.intro { font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem); line-height: 1.45; color: var(--fg-2); max-width: 44ch; text-wrap: pretty; margin: 0 0 var(--s-3); }
.cross { font-size: var(--t-sm); color: var(--fg-3); margin: 0 0 var(--s-6); }

.category {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  letter-spacing: -0.012em; margin: var(--s-6) 0 var(--s-2);
}

details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 3.5rem; padding-block: 1rem; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--fg);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; flex: none; font: 400 1.5rem / 1 var(--font-ui); color: var(--fg-3); transition: transform var(--dur-micro-l) var(--ease-settle); }
details[open] summary::after { content: '–'; }
.answer { max-width: 62ch; padding-bottom: var(--s-3); color: var(--fg-2); text-wrap: pretty; }
.answer strong { color: var(--fg); font-weight: 650; }

.cta { margin-top: var(--s-7); padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--rule); }
.cta h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); line-height: 1.08; letter-spacing: -0.018em; margin: 0 0 0.5rem; }
.cta p { color: var(--fg-2); margin: 0 0 var(--s-3); max-width: 44ch; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }