/* FAQ, sticky category rail + accordion.
   Measured from docs/research/fora/faq-full.json (viewports.desktop.rules / .flat and the
   tablet + mobile flats). See docs/research/components/faq.spec.md.
   Fora section box: 1440 -> 958 (5 rows) / 842 (4) / 726 (3); 768 -> 1001; 390 -> 1104.
   Genesis ships 2 / 2 / 4 questions, so the height follows the row count. */

.gf-faq{
  /* open/close tween fitted to Fora's layout-projection scaleY curve: 600ms, res 0.0013 */
  --gf-faq-dur:600ms;
  --gf-faq-ease:cubic-bezier(.3,.875,.225,1);
  --gf-faq-hover:.35s var(--ease-link);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  width:100%;
  /* Full bleed. This cap put the whole SECTION in a 1600px box, so on any screen wider than that
     its ground stopped 1600px across and the page went black down both sides. The content keeps
     its own 1080 column inside, so only the ground moves. */
  margin-inline:auto;
  padding:0 24px;
}
/* the site-wide vertical hairlines at the 1600px frame edges */
.gf-faq::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-left:1px solid var(--ink-10);
  border-right:1px solid var(--ink-10);
}

.gf-faq-container{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:64px;
  width:100%;
  max-width:var(--container);   /* 1080 */
  padding:80px 0;
}

/* ---- header ------------------------------------------------------------- */

.gf-faq-header{
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  justify-content:center;
  gap:36px;
  width:100%;
}

.gf-faq-header-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:24px;
  flex:1 0 0;
  width:1px;
}

.gf-faq-chip-wrap{flex:0 0 auto}

.gf-faq-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:30px;          /* measured 30, not the 29 that 4 + 21 + 4 gives */
  padding:4px 16px;
  border-radius:var(--radius-pill);
  background:var(--ink-10);
  overflow:hidden;
}
.gf-faq-chip::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--ink-10);
  border-radius:inherit;
  pointer-events:none;
}
.gf-faq-chip-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ink);
  animation:gf-faq-pulse 2s linear infinite;
}
@keyframes gf-faq-pulse{0%,100%{opacity:1}50%{opacity:0}}

.gf-faq-chip-label{
  color:var(--ink-80);      /* 14 / 21 / -.28px comes from body */
  white-space:pre;
}

.gf-faq-heading-wrap{width:100%}
.gf-faq-heading{text-wrap:balance}

.gf-faq-header-right{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  flex:1 0 0;
  width:1px;
  padding:0 0 4px 32px;
}
.gf-faq-lead-wrap{
  flex:1 0 0;
  width:1px;
  max-width:350px;
}
.gf-faq-lead{text-wrap:balance}

/* ---- glow surfaces ------------------------------------------------------ */
/* Fora builds every panel as: an outer rounded box filled with the border colour, a
   pointer-tracked radial gradient inside it, and an inset:1px box carrying the real fill.
   --gx / --gy / --glow are written by faq.js from the pointer position. */

.gf-faq-surface,
.gf-faq-halo{
  position:absolute;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.gf-faq-surface::before,
.gf-faq-halo::before,
.gf-faq-surface::after,
.gf-faq-halo::after{content:"";position:absolute}

.gf-faq-surface::before,
.gf-faq-halo::before{
  inset:0;
  background:radial-gradient(var(--gr,450px) at var(--gx,-999px) var(--gy,-999px),var(--gc,rgba(255,255,255,.25)),rgba(0,0,0,0));
  opacity:var(--glow,0);
  transition:opacity .4s var(--ease-link);
  will-change:opacity;
}

/* card / row surface: 1px rgba(255,255,255,.1) ring over a rgba(15,15,15,.85) panel */
.gf-faq-surface{
  inset:0;
  border-radius:var(--radius);            /* 16 */
  background:var(--ink-10);
}
.gf-faq-surface::after{
  inset:1px;
  border-radius:15px;
  background:var(--panel);                /* rgba(15,15,15,.85) */
}
.gf-faq-surface--row{--gr:450px}
.gf-faq-surface--card{--gr:735px}

/* tab pill surface: only painted on the selected tab */
.gf-faq-surface--tab{
  border-radius:66px;
  --gr:195px;
  --gc:rgba(255,255,255,.65);
  opacity:0;
  transition:opacity var(--gf-faq-hover);
}
.gf-faq-surface--tab::after{
  inset:1px;
  border-radius:65px;
  background:var(--panel-2);              /* rgba(23,23,23,.85) */
}

/* -8px halo: a 1px ring 8px outside a card, black on black, lit only by the pointer */
.gf-faq-halo{
  inset:-8px;
  border-radius:24px;
  background:#000;
  --gr:735px;
}
.gf-faq-halo::after{
  inset:1px;
  border-radius:23px;
  background:#000;
}
.gf-faq-halo--rail{border-radius:28px}
.gf-faq-halo--rail::after{border-radius:27px;background:rgba(0,0,0,.85)}

/* ---- body: rail + panels ------------------------------------------------ */

.gf-faq-body{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:center;
  gap:48px;
  width:100%;
}

.gf-faq-rail{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:24px;
  flex:1 0 0;
  width:1px;
}

/* scroll room for the sticky list; min-height keeps the rail's own 140+24+212 intrinsic */
.gf-faq-rail-slot{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:center;
  flex:1 0 0;
  width:100%;
  min-height:140px;
}

.gf-faq-sticky{
  position:sticky;
  top:120px;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  flex:1 0 0;
  width:1px;
  height:min-content;
}

.gf-faq-tablist{
  position:relative;
  z-index:1;
  display:flex;
  flex-flow:column wrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  width:100%;
}

.gf-faq-tab{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:8px 24px;
  border-radius:var(--radius-pill);
  background:transparent;
  overflow:clip;
  cursor:pointer;
  transition:background-color var(--gf-faq-hover);
}
.gf-faq-tab[aria-selected="true"]{background:var(--panel-2)}
.gf-faq-tab[aria-selected="true"] .gf-faq-surface--tab{opacity:1}

.gf-faq-tab-label{
  position:relative;
  z-index:1;
  white-space:pre;
  font-size:16px;
  line-height:24px;
  letter-spacing:-.16px;
  font-weight:400;
  color:var(--ink-80);
  transition:color var(--gf-faq-hover);
}
.gf-faq-tab[aria-selected="true"] .gf-faq-tab-label,
.gf-faq-tab:hover .gf-faq-tab-label,
.gf-faq-tab:focus-visible .gf-faq-tab-label{color:var(--ink)}

/* ---- got a question card ------------------------------------------------ */

.gf-faq-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:36px;
  flex:0 0 auto;
  width:100%;
  padding:36px;
  border-radius:24px;
}
.gf-faq-card-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.gf-faq-card-title{
  font-size:22px;
  line-height:33px;
  letter-spacing:-.44px;
  font-weight:500;
  color:var(--ink);
}
.gf-faq-card-text{
  font-size:14px;
  line-height:21px;
  letter-spacing:-.28px;
  color:var(--ink-80);
  text-wrap:balance;
}
.gf-faq-card-linkrow{
  position:relative;
  z-index:1;
  width:100%;
  font-size:14px;
  line-height:21px;
  letter-spacing:-.28px;
}
.gf-faq-card-link{color:var(--ink-80)}
.gf-faq-card-link:hover,
.gf-faq-card-link:focus-visible{color:#fae6e1}

/* ---- accordion ---------------------------------------------------------- */

.gf-faq-panels{
  position:relative;
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  flex:2 0 0;
  width:1px;
}

.gf-faq-panel{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  width:100%;
}
.gf-faq-panel[hidden]{display:none}

.gf-faq-row{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:100%;
}

.gf-faq-row-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:16px;
  width:100%;
  padding:36px 36px 20px;
  overflow:clip;
  transition:padding-bottom var(--gf-faq-dur) var(--gf-faq-ease);
}
.gf-faq-row.is-open .gf-faq-row-inner{padding-bottom:36px}

.gf-faq-row-head{
  width:100%;
  font:inherit;
  font-weight:400;
}

.gf-faq-trigger{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:32px;
  text-align:start;
  cursor:pointer;
}
/* Fora makes the whole closed row clickable; extend the hit area over the padding */
.gf-faq-trigger::before{
  content:"";
  position:absolute;
  top:-36px;
  left:-36px;
  right:-36px;
  bottom:-40px;
}
.gf-faq-row.is-open .gf-faq-trigger::before{bottom:-8px}

.gf-faq-question{
  flex:1 0 0;
  width:1px;
  font-size:16px;
  line-height:24px;
  letter-spacing:-.16px;
  font-weight:400;
  color:var(--ink);
  overflow-wrap:break-word;
  word-break:break-word;
}

.gf-faq-chevron{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-pill);
  background:var(--panel-2);
  color:var(--ink);
  overflow:clip;
  transition:background-color .4s var(--ease-link),transform var(--gf-faq-dur) var(--gf-faq-ease);
}
.gf-faq-chevron::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--ink-10);
  border-radius:inherit;
  pointer-events:none;
}
.gf-faq-row:hover .gf-faq-chevron,
.gf-faq-trigger:focus-visible .gf-faq-chevron{background:rgba(38,38,38,.85)}
.gf-faq-row.is-open .gf-faq-chevron{transform:rotate(180deg)}

.gf-faq-answer{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  flex:0 0 auto;
  width:100%;
  max-width:564px;
  height:4px;
  padding-top:4px;
  overflow:hidden;
  transition:height var(--gf-faq-dur) var(--gf-faq-ease),padding-top var(--gf-faq-dur) var(--gf-faq-ease);
}
.gf-faq-row.is-open .gf-faq-answer{padding-top:0}

.gf-faq-answer-inner{
  flex:1 0 0;
  width:1px;
  max-width:480px;
  opacity:0;
  transition:opacity var(--gf-faq-dur) var(--gf-faq-ease);
}
.gf-faq-row.is-open .gf-faq-answer-inner{opacity:1}

.gf-faq-answer-inner p{
  font-size:14px;
  line-height:21px;
  letter-spacing:-.28px;
  color:var(--ink-80);
  text-wrap:balance;
}

/* ---- tablet + mobile ---------------------------------------------------- */
/* Fora's <=1279 variant: the body stacks, the rail moves above the accordion, and the
   got-a-question card and all three -8px halos are absent from the measured trees. */

@media (max-width:1023.98px){
  .gf-faq-container{max-width:720px;gap:48px;padding:120px 0}
  .gf-faq-header-left{flex:2 0 0}
  .gf-faq-header-right{padding:0}
  .gf-faq-heading{font-size:36px;line-height:48.6px;letter-spacing:-1.44px}

  .gf-faq-body{flex-direction:column;align-items:stretch;gap:24px}
  .gf-faq-rail{flex:0 0 auto;width:100%}
  .gf-faq-rail-slot{flex:0 0 auto;min-height:0}
  .gf-faq-sticky{position:static;flex:0 0 auto;width:100%}
  .gf-faq-card,
  .gf-faq-halo{display:none}
  .gf-faq-panels{flex:0 0 auto;width:100%;align-self:auto}

  .gf-faq-row-inner{padding:24px 24px 8px}
  .gf-faq-row.is-open .gf-faq-row-inner{padding-bottom:24px}
  .gf-faq-trigger::before{top:-24px;left:-24px;right:-24px;bottom:-28px}
  .gf-faq-row.is-open .gf-faq-trigger::before{bottom:-8px}
}

@media (max-width:809.98px){
  .gf-faq-container{gap:36px;padding:80px 0}
  .gf-faq-header{flex-direction:column;align-items:flex-start;gap:16px}
  .gf-faq-header-left{flex:0 0 auto;width:100%}
  .gf-faq-header-right{flex:0 0 auto;justify-content:flex-start;width:100%;padding:0 0 4px}
  .gf-faq-heading{font-size:32px;line-height:43.2px;letter-spacing:-1.28px}
  .gf-faq-card-title{font-size:18px;line-height:27px;letter-spacing:-.36px}
}

/* ---- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .gf-faq-answer,
  .gf-faq-answer-inner,
  .gf-faq-row-inner,
  .gf-faq-chevron,
  .gf-faq-tab,
  .gf-faq-tab-label,
  .gf-faq-surface,
  .gf-faq-surface::before,
  .gf-faq-halo::before{transition:none!important}
  .gf-faq-chip-dot{animation:none;opacity:1}
}

/* Inline link inside an answer. The form requires a public link, so answer 2 offers the catalogue
   route by email instead; it has to be reachable, not just mentioned. */
.gf-faq-link{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:var(--ink-25);
  transition:text-decoration-color .3s var(--ease-link);
}
.gf-faq-link:hover{text-decoration-color:var(--ink)}
.gf-faq-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}