[hidden]{display:none !important;}

/* ============================================================
   FAQ match gate ("Are we a good match?"), faq.html only.
   Remove this file and js/faq-match.js to disable the gate.
   Built on site tokens and components (.marker, .btn, .chip, .grid-bg, .glow).
   ============================================================ */

.fm{max-width:1080px;margin-bottom:clamp(28px,4vw,48px);scroll-margin-top:88px;}

/* Large panel: 28px radius, 3px gradient bar, masked grid and cyan glow */
.fm__card{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  padding:clamp(24px,3.4vw,44px);
}
.fm__card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient);z-index:1;}
.fm__card > .grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.7;}
.fm__card > .glow{width:420px;height:420px;right:-160px;top:-220px;z-index:-1;opacity:.55;}

.fm__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 32px;}
.fm__intro{flex:1 1 520px;max-width:720px;}
.fm__title{margin:0;font-weight:700;}
.fm__sub{margin-top:10px;color:var(--fg-2);font-size:var(--text-body);line-height:1.6;}
.fm__skip{flex:none;}

.fm__kicker{display:block;font-size:var(--text-xs);font-weight:500;color:var(--fg-muted);line-height:1.2;}

/* ---------- Questions ---------- */
.fm__q{margin-top:clamp(24px,3vw,36px);}
.fm__q + .fm__q{padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--border);}
.fm__qlabel{
  margin:6px 0 16px;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-h4);line-height:1.25;color:var(--fg-strong);text-wrap:balance;
}
.fm__qlabel:focus{outline:none;}
.fm__opts{display:grid;grid-template-columns:1fr;gap:12px;}

/* Option: card pattern (.card.hover), clickable */
.fm__opt{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;
  padding:18px 20px;text-align:left;cursor:pointer;
  background:var(--surface);color:var(--fg-strong);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  font-family:var(--font-body);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.fm__opt:hover{border-color:var(--border-accent);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.fm__opt:active{transform:translateY(1px);}
.fm__opt:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring);}
.fm__opt[aria-pressed="true"]{background:var(--surface-tech);border-color:var(--accent);box-shadow:var(--shadow-sm);transform:none;}

.fm__opt-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.fm__opt-key{
  display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  background:var(--signal-bg);color:var(--accent);border:1px solid var(--border-accent);
}
.fm__opt-go{width:20px;height:20px;color:var(--fg-muted);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);}
.fm__opt:hover .fm__opt-go{color:var(--accent);transform:translateX(3px);}
.fm__opt-go--done{display:none;}
.fm__opt[aria-pressed="true"] .fm__opt-go{display:none;}
.fm__opt[aria-pressed="true"] .fm__opt-go--done{display:block;color:var(--accent);transform:none;}
.fm__opt-lbl{font-weight:600;font-size:var(--text-body);line-height:1.35;}

/* Live-share meter (illustrative, no values) */
.fm__meter{display:block;height:6px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);overflow:hidden;}
.fm__meter > span{display:block;height:100%;width:var(--fill,0%);border-radius:inherit;background:var(--gradient-soft);}
/* Peaks glyph, stretched to the meter width */
.fm__spark{display:block;width:100%;height:28px;color:var(--accent);overflow:visible;}
.fm__spark path{vector-effect:non-scaling-stroke;}

/* ---------- Summary ---------- */
.fm__summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:clamp(20px,2.6vw,28px);}
.fm__summary .fm__kicker{color:var(--fg-muted);margin-right:4px;}
.fm__summary .chip{font-weight:600;color:var(--fg-strong);}
.fm__change{margin-left:auto;}

/* ---------- Result ---------- */
.fm__result:empty{display:none;}
.fm__res{
  margin-top:16px;padding:clamp(22px,2.8vw,32px);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);
}
.fm__res--strong{background:var(--surface-tech);border-color:var(--border-accent);}
.fm__res--match{background:var(--surface);border-color:var(--border-accent);box-shadow:var(--shadow-sm);}

.fm__res-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:18px;}
.fm__res--weak .badge,.fm__res--none .badge{background:var(--surface);color:var(--fg-2);border-color:var(--border-strong);}

/* Where the answer sits on the fit scale */
.fm__scale{display:grid;grid-template-columns:repeat(4,minmax(52px,1fr));gap:4px;min-width:min(100%,300px);}
.fm__scale span{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);}
.fm__scale span::before{content:"";height:6px;border-radius:var(--r-pill);background:var(--border);}
.fm__scale span.is-on::before{background:var(--accent);}
.fm__scale span.is-at{color:var(--fg-strong);}

.fm__res-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);line-height:1.2;color:var(--fg-strong);text-wrap:balance;}
.fm__res--weak .fm__res-title,.fm__res--none .fm__res-title{font-weight:600;}
.fm__res-title:focus{outline:none;}
.fm__res-title:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring);border-radius:var(--r-xs);}
.fm__res-body{margin-top:12px;max-width:760px;color:var(--fg-2);line-height:1.6;}
.fm__res-cta{margin-top:22px;}

/* Tablet up: options side by side (site breakpoint 620px) */
@media (min-width:621px){
  .fm__opts{grid-template-columns:repeat(var(--fm-cols,3),minmax(0,1fr));}
}

/* ---------- FAQ list before an answer ----------
   Stays in the DOM and a11y tree. Visually it becomes a short index of
   question titles that fades into the page, at full contrast. */
.faq-list.fm-gated{position:relative;max-height:330px;overflow:hidden;}
.faq-list.fm-gated::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg) 85%);
}
/* flex column: keep items at full height while the list is clipped */
.faq-list.fm-gated > .faq-item{flex-shrink:0;}
.faq-list.fm-gated .faq-a{grid-template-rows:0fr;}
.faq-list.fm-gated .faq-item.open{border-color:var(--border);box-shadow:var(--shadow-sm);}
.faq-list.fm-gated .faq-item.open .faq-q__icon{transform:none;background:transparent;color:var(--fg-2);border-color:var(--border-strong);}

@media (prefers-reduced-motion:reduce){
  .fm__opt,.fm__opt-go{transition:none;}
  .fm__opt:hover,.fm__opt:active{transform:none;}
}