/* =========================================================================
   dexwatch — static per-DEX landing page extras (FAQ block + headings)
   ========================================================================= */
.faq { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-elev); overflow: hidden;
}
.faq-item > summary {
  cursor: pointer; list-style: none;
  padding: 16px 18px; font-weight: 600; font-size: 15.5px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; font-size: 20px; line-height: 1; color: var(--ink-3);
  font-weight: 400; transition: transform .18s;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > summary:hover { color: var(--accent); }
.faq-a { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.faq-h2 { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 16px; letter-spacing: -0.01em; }

/* learn-before-you-trade (DEX → Academy links) */
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px){ .learn-grid { grid-template-columns: 1fr; } }
.learn-card { display: flex; align-items: center; gap: 14px; padding: 15px 16px; transition: transform .12s, box-shadow .15s, border-color .15s; }
.learn-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.learn-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-wash); color: color-mix(in oklch, var(--accent) 72%, var(--ink)); border: 1px solid var(--accent-line); }
.learn-ic svg { width: 19px; height: 19px; }
.learn-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.learn-t { font-weight: 650; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.learn-s { font-size: 11.5px; line-height: 1.3; color: var(--ink-3); font-family: var(--font-mono); }
.learn-go { margin-left: auto; flex: none; color: var(--ink-faint); font-size: 16px; transition: transform .12s, color .15s; }
.learn-card:hover .learn-go { color: var(--accent); transform: translateX(2px); }

/* glossary key-terms strip inside "Learn before you trade" */
.dex-glossterms { margin-top: 16px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dgt-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); flex: none; }
.dgt-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dgt-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: border-color .14s, color .14s;
}
.dgt-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.dgt-chip:hover { border-color: var(--accent-line); color: var(--ink); }

/* section labels rendered as real headings keep the eyebrow look */
h2.eyebrow, h3.eyebrow { display: block; }
