/* ClarityPOD FAQ page: twenty questions, every answer visible, four parts.
   Same rules as the product page: Lausanne, 1px lines, no cards. */
#main.faq-page{max-width:1344px;margin-inline:auto;padding:clamp(48px,6vw,96px) var(--gutter,48px) clamp(80px,10vw,144px);color:var(--okto-ink);font-family:var(--okto-font)}
#main.faq-page .faq-return{display:inline-flex;align-items:center;min-height:44px;margin-bottom:32px}
#main.faq-page .faq-eyebrow{margin:0 0 16px;font:400 14px/20px var(--okto-font);letter-spacing:.12em;text-transform:uppercase;color:var(--okto-muted)}
#main.faq-page h1{margin:0;max-width:16ch;font:700 clamp(44px,5.6vw,80px)/1.02 var(--okto-font);letter-spacing:-.04em;text-wrap:balance}
#main.faq-page .faq-lead{margin:24px 0 0;max-width:46ch;font:200 18px/28px var(--okto-font);letter-spacing:-.02em}

#main.faq-page .faq-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 var(--okto-grid-gap,64px);align-items:start;margin-top:clamp(56px,7vw,96px)}
#main.faq-page .faq-index{position:sticky;top:32px}
#main.faq-page .faq-index ol{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
#main.faq-page .faq-index a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:baseline;min-height:56px;padding:17px 0;border-top:1px solid var(--line);color:var(--okto-ink);font:400 16px/22px var(--okto-font);letter-spacing:-.01em;text-decoration:none}
#main.faq-page .faq-index a:is(:hover,:focus-visible) span:nth-child(2){text-decoration:underline;text-underline-offset:4px}
#main.faq-page .faq-index-number,#main.faq-page .faq-index-count{font:400 14px/20px var(--okto-font);letter-spacing:.12em;color:var(--okto-muted)}

#main.faq-page .faq-part{scroll-margin-top:24px}
#main.faq-page .faq-part+.faq-part{margin-top:clamp(56px,6vw,88px)}
#main.faq-page .faq-part h2{display:flex;align-items:baseline;gap:16px;margin:0;padding-bottom:20px;background:var(--okto-brand) bottom left/100% 2px no-repeat;font:700 32px/1.1 var(--okto-font);letter-spacing:-.04em}
#main.faq-page .faq-part-number{font:400 14px/20px var(--okto-font);letter-spacing:.12em;color:var(--okto-muted)}
#main.faq-page dl{margin:0}
#main.faq-page .faq-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 48px;padding-block:24px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
#main.faq-page dt{margin:0;font:700 20px/1.3 var(--okto-font);letter-spacing:-.03em;text-wrap:balance}
#main.faq-page dd{margin:0;max-width:60ch;font:200 16px/26px var(--okto-font);letter-spacing:-.01em}

#main.faq-page .faq-closing{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:16px var(--okto-grid-gap,64px);align-items:start;margin-top:clamp(72px,8vw,120px);padding-top:32px;border-top:1px solid var(--line)}
#main.faq-page .faq-closing h2{grid-row:1/3;margin:0;font:700 32px/1.1 var(--okto-font);letter-spacing:-.04em}
#main.faq-page .faq-closing>p{margin:0;font:200 18px/28px var(--okto-font);letter-spacing:-.02em}
#main.faq-page .contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
#main.faq-page .contact-actions>p{margin:0;max-width:42ch;font:200 16px/26px var(--okto-font)}
#main.faq-page .contact-alt a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1000px){
  #main.faq-page .faq-layout,#main.faq-page .faq-closing{grid-template-columns:minmax(0,1fr)}
  #main.faq-page .faq-index{position:static;margin-bottom:56px}
  #main.faq-page .faq-closing h2{grid-row:auto}
}
@media(max-width:700px){
  #main.faq-page{padding-inline:24px}
  #main.faq-page .faq-row{grid-template-columns:minmax(0,1fr);padding-block:20px}
  #main.faq-page .faq-part h2{font-size:26px}
}