/* FAQ accordion — shared by the homepage and pricing.html.
   Extracted from css/home-overrides.css so the two cannot drift, the same
   discipline as css/plans.css. Selectors carry both body scopes so each page
   keeps the specificity it had.

   The markup stays button-driven via toggleFAQ() on both pages because the
   questions are mirrored by FAQPage JSON-LD. */

/* ── FAQ ──────────────────────────────────────────────────────────────────
   One unified accordion: hairlines between items on the bare lavender, with no
   outer border, radius or background. The list is defined by its rules, not by
   a box — the same device already used by How It Works and the reviews grid.

   The markup stays button-driven via toggleFAQ() because the questions are
   mirrored by the FAQPage JSON-LD; only the classes and indicator changed. */
body.hp .faqs,body.pp .faqs,body.lp-page .faqs{max-width:760px;margin:48px auto 0;border-top:1px solid var(--line)}

/* Undo the legacy card. styles.css gives .faq-item a white background, a 2px
   border and a 16px radius, plus a hover shadow — worn at the same time as the
   divider, which is what made the section read as a component mid-migration. */
body.hp .faq-item,body.pp .faq-item,body.lp-page .faq-item{background:none;border:0;border-radius:0;overflow:visible;
  border-bottom:1px solid var(--line)}
body.hp .faq-item:hover,body.pp .faq-item:hover,body.lp-page .faq-item:hover{border-color:transparent;border-bottom-color:var(--line);box-shadow:none}

body.hp .faq-question,body.pp .faq-question,body.lp-page .faq-question{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  width:100%;padding:22px 0;background:none;border:0;text-align:left;cursor:pointer;
  font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.45;
  color:var(--ink);transition:color .2s ease}
body.hp .faq-question > span,body.pp .faq-question > span,body.lp-page .faq-question > span{max-width:calc(100% - 56px)}
body.hp .faq-question:hover,body.pp .faq-question:hover,body.lp-page .faq-question:hover{color:var(--pu)}
/* The only weight change in the component — enough to hold the eye at the top
   of a long answer without tinting or bordering the open row. */
body.hp .faq-item.active .faq-question,body.pp .faq-item.active .faq-question,body.lp-page .faq-item.active .faq-question{font-weight:700}

/* Plus that rotates to a minus. Two 1.5px strokes hold their own against
   600-weight type without becoming an icon; no circle, no background. */
body.hp .faq-plus,body.pp .faq-plus,body.lp-page .faq-plus{position:relative;width:14px;height:14px;flex:none;margin-top:5px}
body.hp .faq-plus::before,body.pp .faq-plus::before,body.hp .faq-plus::after,body.pp .faq-plus::after,body.lp-page .faq-plus::before,body.lp-page .faq-plus::after{content:"";position:absolute;background:var(--pu);border-radius:1px}
body.hp .faq-plus::before,body.pp .faq-plus::before,body.lp-page .faq-plus::before{top:6.25px;left:0;width:14px;height:1.5px}
body.hp .faq-plus::after,body.pp .faq-plus::after,body.lp-page .faq-plus::after{left:6.25px;top:0;width:1.5px;height:14px;
  transition:transform .2s ease,opacity .2s ease}
body.hp .faq-item.active .faq-plus::after,body.pp .faq-item.active .faq-plus::after,body.lp-page .faq-item.active .faq-plus::after{transform:rotate(90deg)}

/* Height animates from 0fr to 1fr, so it resolves to the answer's real height
   with no cap that could clip a long one. The inner wrapper carries the
   clipping: putting padding on .faq-answer itself was the leak, because
   overflow clips to the PADDING box, leaving 26px of answer text visible under
   every closed question. */
body.hp .faq-answer,body.pp .faq-answer,body.lp-page .faq-answer{display:grid;grid-template-rows:0fr;max-height:none;padding:0;
  transition:grid-template-rows .28s ease}
body.hp .faq-item.active .faq-answer,body.pp .faq-item.active .faq-answer,body.lp-page .faq-item.active .faq-answer{grid-template-rows:1fr;max-height:none;padding:0}
body.hp .faq-answer-in,body.pp .faq-answer-in,body.lp-page .faq-answer-in{overflow:hidden;min-height:0}
body.hp .faq-answer-in p,body.pp .faq-answer-in p,body.lp-page .faq-answer-in p{max-width:640px;padding:0 0 26px;font-size:16px;line-height:1.75;
  color:var(--body)}
body.hp .faq-answer-in p + p,body.pp .faq-answer-in p + p,body.lp-page .faq-answer-in p + p{padding-top:14px}
body.hp .faq-answer-in a,body.pp .faq-answer-in a,body.lp-page .faq-answer-in a{font-weight:600}
body.hp .faq-answer strong,body.pp .faq-answer strong,body.lp-page .faq-answer strong{color:var(--ink);font-weight:600}

@media (max-width:768px){
  body.hp .faqs,body.pp .faqs{margin-top:36px}
  body.hp .faq-question,body.pp .faq-question,body.lp-page .faq-question{font-size:16px;padding:18px 0}
  body.hp .faq-question > span,body.pp .faq-question > span,body.lp-page .faq-question > span{max-width:calc(100% - 40px)}
  body.hp .faq-answer-in p,body.pp .faq-answer-in p,body.lp-page .faq-answer-in p{font-size:15.5px;line-height:1.7}
}