/* page/faq.css — page-scoped styling for faq.html only.
   Composes tokens + classes from components/styles.css and home/home-flagship.css
   (R-04/R-05) — no shared file is edited to make this page work. Loads LAST.
   .feat-mast / .feat-mast__* mirrors page/about.css's masthead pattern;
   duplicated (not imported) since each page file is self-contained per R-11. */

/* ---------------- Masthead ---------------- */
.feat-mast { padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(32px, 5vw, 56px); }
.feat-mast__inner { max-width: var(--content); text-align: center; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.feat-mast .kicker { justify-content: center; }
.feat-mast__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.08; color: var(--primary);
  margin: 10px 0 18px; text-wrap: balance;
}
.feat-mast__sub { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--text); max-width: 62ch; margin: 0 auto; }

/* ---------------- Segmented toggle (brand/creator) ----------------
   Solid black thumb, never the gradient (R-02 reserves it for the primary
   CTA / sign-up gate / like-press glow only). */
.faq-toggle {
  position: relative; display: flex; width: 100%; max-width: 360px; margin: 0 auto 48px;
  background: var(--surface-2, #f4f1f3); border-radius: var(--r-pill); padding: 4px;
}
.faq-toggle__btn {
  position: relative; z-index: 1; flex: 1; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  padding: 11px 0; border-radius: var(--r-pill); color: var(--text);
  transition: color 0.25s ease;
}
.faq-toggle__btn.is-active { color: var(--white); }
.faq-toggle__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.faq-toggle__thumb {
  position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px);
  background: var(--primary); border-radius: var(--r-pill);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.faq-toggle.is-creators .faq-toggle__thumb { transform: translateX(100%); }

/* ---------------- Accordion grid ---------------- */
.faq-panel[hidden] { display: none; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.faq-col { border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q { margin: 0; font-weight: normal; }
.faq-item__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-align: left; background: none; border: 0; cursor: pointer; padding: 19px 2px;
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.4;
  letter-spacing: -0.01em; color: var(--primary);
}
.faq-item__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.faq-item__icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--primary);
  transform: translate(-50%, -50%); transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-item__icon::before { width: 100%; height: 1.6px; }
.faq-item__icon::after { width: 1.6px; height: 100%; }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* height animates via the grid-rows trick — no JS measurement needed */
.faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.faq-item__panel > div { overflow: hidden; }
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__a { font-size: 14.5px; line-height: 1.7; color: var(--text); margin: 0 0 20px; max-width: 56ch; }
.faq-item__link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-col + .faq-col { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-toggle__thumb, .faq-toggle__btn, .faq-item__icon::before, .faq-item__icon::after,
  .faq-item__panel { transition: none; }
}