/* ============================================================
   quGradient · inner-page primitives
   Used by products/ and solutions/ deep pages.
   Light-first, gradient accents. Same class names as quMatrix.
   ============================================================ */

/* --- two-column deep layout (sticky TOC + body) ------------ */
.deep { display: grid; grid-template-columns: 13rem 1fr; gap: var(--s-8); align-items: start; }
.toc { position: sticky; top: 92px; align-self: start; display: grid; gap: var(--s-2); }
.toc a { font-size: var(--fs-sm); color: var(--muted); padding-left: var(--s-3); border-left: 2px solid var(--border); }
.toc a:hover { color: var(--brand-ink); border-color: var(--brand); text-decoration: none; }
.deep__body > section { padding-bottom: var(--s-7); margin-bottom: var(--s-7); border-bottom: 1px solid var(--border-soft); }
.deep__body > section:last-child { border-bottom: 0; margin-bottom: 0; }
.deep__body h2 { font-size: var(--fs-h3); }
@media (max-width: 820px) { .deep { grid-template-columns: 1fr; gap: var(--s-6); } .toc { display: none; } }

/* --- collaborate / CTA box (gradient tint) ----------------- */
.collab { background: var(--grad-soft); border: 1px solid var(--brand-12); border-radius: var(--r-lg); padding: var(--s-6); }
.collab h3 { color: var(--ink); margin-bottom: var(--s-3); }
.collab p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-5); }

/* --- outcomes ---------------------------------------------- */
.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-5); }
.outcome { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.outcome__n {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-stat);
  line-height: 1; letter-spacing: -0.03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.outcome h4 { margin: var(--s-3) 0 var(--s-2); }
.outcome p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* --- integrations ------------------------------------------ */
.integrations { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.integrations span { font-family: var(--font-mono); font-size: var(--fs-sm); padding: 0.55em 0.95em; border-radius: var(--r-md); background: var(--soft); border: 1px solid var(--border); color: var(--ink-soft); }

/* --- proof band (dark, with brand glow) -------------------- */
.proof {
  border-radius: var(--r-lg); padding: var(--s-7);
  background:
    radial-gradient(60% 140% at 90% -10%, rgba(110,86,248,0.30), transparent 60%),
    linear-gradient(180deg, var(--dark-2), var(--dark));
}

/* --- FAQ (native details/summary) -------------------------- */
.faq details { border-bottom: 1px solid var(--border); padding: var(--s-4) 0; }
.faq details:first-child { border-top: 1px solid var(--border); }
.faq summary {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--ink);
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-family: var(--font-mono); font-size: 1.4em; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }

/* --- applied capabilities link list ------------------------ */
.applied { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.applied a { font-family: var(--font-mono); font-size: var(--fs-sm); padding: 0.55em 0.95em; border-radius: var(--r-pill); background: var(--soft); border: 1px solid var(--border); color: var(--ink-soft); }
.applied a:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }

/* --- framing paragraph (products overview) ----------------- */
.framing { max-width: 60ch; }
.framing p { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); }

/* --- future families --------------------------------------- */
.futures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-5); }
.future { padding: var(--s-5); border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--soft); }
.future h4 { margin: 0 0 var(--s-2); }
.future p { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s-4); }