/* ==========================================================================
   ZigZag Trader — component pages (/components/*)
   Layered on top of zz.css: reuses its tokens, adds only what the long-form
   pages need. Every colour is painted explicitly, same as the landing.
   ========================================================================== */

.doc-hero {
  padding: calc(var(--sect) * .78) 0 calc(var(--sect) * .5);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(76, 139, 255, .13), transparent 62%),
    linear-gradient(180deg, var(--ink-soft), var(--ink));
  border-bottom: 1px solid var(--rule-soft);
}
.doc-hero h1 { font-size: clamp(34px, 5.2vw, 60px); margin: 14px 0 0; }
.doc-hero .lede { max-width: 760px; margin-top: 18px; }

.crumbs {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.crumbs a:hover { color: var(--accent-2); border-bottom-color: var(--accent); }
.crumbs span { color: var(--rule); margin: 0 8px; }

/* `.doc-body` and `.faq` sit ON the centred `.wrap`, so capping their own width
   would re-centre the column and break the left edge the hero establishes.
   Cap the children instead: the wrap keeps its measure, the text keeps its line
   length, and every section starts on the same vertical line. */
.doc-body > *,
.faq > * { max-width: 860px; }
.doc-body > p { color: var(--text-2); margin: 0 0 18px; }
.doc-body > p:last-child { margin-bottom: 0; }

/* one component */
.comp {
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  background: var(--panel);
  padding: clamp(20px, 3vw, 30px);
  margin-top: 22px;
}
.comp:first-of-type { margin-top: 0; }
.comp h2 { font-size: clamp(21px, 2.5vw, 27px); }
.comp h2 .cnum {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-2);
  letter-spacing: .08em;
  display: block;
  margin-bottom: 7px;
  font-weight: 500;
}
.comp p { color: var(--text-2); margin: 14px 0 0; }
.comp .solves { margin: 16px 0 0; padding: 15px 18px; background: var(--ink-soft); border-radius: 10px; border: 1px solid var(--rule-soft); }
.comp .solves b {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 9px;
  font-weight: 600;
}
.comp .solves ul { margin: 0; padding-left: 19px; }
.comp .solves li { color: var(--text-2); margin: 5px 0; }

/* how it ships */
.ships {
  border-left: 3px solid var(--accent-deep);
  background: var(--ink-soft);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin-top: 26px;
}
.ships p { margin: 0; color: var(--text-2); }

/* FAQ */
.faq-item { border-top: 1px solid var(--rule-soft); padding: 20px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--rule-soft); }
.faq-item h3 { font-size: 18px; }
.faq-item p { margin: 10px 0 0; color: var(--text-2); }

/* related pages */
.rel { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 26px; }
.rel a {
  display: block;
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  background: var(--panel);
  padding: 15px 17px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s ease, background .18s ease;
}
.rel a:hover { border-color: var(--accent-deep); background: var(--panel-hi); }
.rel a b { display: block; font-size: 16px; }
.rel a span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }

/* closing call to action */
.cta-band {
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: linear-gradient(140deg, var(--panel-hi), var(--panel));
  padding: clamp(24px, 4vw, 38px);
  text-align: center;
}
.cta-band h2 { font-size: clamp(23px, 3vw, 32px); }
.cta-band p { color: var(--text-2); max-width: 620px; margin: 14px auto 22px; }

/* catalogue index */
.cat-group { margin-top: 34px; }
.cat-group > h2 { font-size: clamp(20px, 2.4vw, 26px); }
.cat-group > p { color: var(--text-2); margin: 10px 0 0; max-width: 760px; }
.cat-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 16px; }
.cat-list div {
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  background: var(--panel);
  padding: 12px 15px;
  color: var(--text-2);
  font-size: 15px;
}
.cat-list div b { color: var(--text); display: block; font-size: 15.5px; }