/* =============================================================================
   Knowledge Graphs page — page-unique CSS (hosted as a Webflow CDN asset and
   loaded via a <link> in a top-of-body HtmlEmbed). Shared primitives (hero,
   authx, cap-grid, faq, head-split, section-title, reveal, buttons, ic-art,
   ic-meta) already exist as global Webflow styles, so only page-specific rules
   live here. Tokens (--accent, --line, --line-strong, --ink*, --font-*, --bg)
   are provided site-wide by TQ Global Styles.
   ============================================================================= */

/* ---- Hero icon SVG (guard: source classes may not be compiled Webflow styles) */
.hi-svg { width: 46px; height: 46px; display: block; }
.hi-dot { fill: #9A968B; }
.hi-adot { fill: var(--accent); }
.hi-c { stroke: #C9C5BA; stroke-width: 1.4; fill: none; }

/* ---- kgfig / kgcol hairline card sets (2 sections) ---- */
.kgfig { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 5vw, 60px); border-bottom: 1px solid var(--line); }
.kgcol { display: flex; flex-direction: column; padding: clamp(14px,1.8vw,28px) clamp(24px,3vw,48px) clamp(28px,3.5vw,44px); }
.kgcol:not(:first-child) { border-left: 1px solid var(--line); }
.kgfig .ic-art { display: grid; place-items: center; padding: clamp(20px,4vw,40px) 0 clamp(26px,3.5vw,40px); }
.kgfig .ic-art .kgg { width: 100%; max-width: 232px; height: auto; display: block; }
.ic-meta h3 { font-size: 1.16rem; letter-spacing: -0.015em; }
.ic-meta p { color: var(--ink-soft); margin-top: 11px; font-size: 15px; line-height: 1.55; max-width: 40ch; }
@media (max-width: 820px) { .kgfig { grid-template-columns: 1fr; } .kgcol:not(:first-child) { border-left: 0; border-top: 1px solid var(--line); } }

/* ---- kgg node/edge SVG styling (shared by kgfig + kgd diagrams) ---- */
.kgg-line { fill: none; stroke: rgba(20,20,27,.2); stroke-width: 1.6; stroke-linecap: round; }
.kgg-acc  { fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; }
.kgg-node { fill: #fff; stroke: var(--line-strong); stroke-width: 1.4; }
.kgg-hub  { fill: #fff; stroke: var(--accent); stroke-width: 1.7; }
.kgg-dot  { fill: var(--accent); }

/* ---- Definition (kgNet) + interactive (kgGraph) canvas stages ---- */
.defsec { background: #fff; padding-bottom: 0; }
.defsec .acviz { margin-bottom: 0; }
.acviz { position: relative; height: clamp(300px, 32vw, 460px); background: #fff; margin-top: clamp(30px, 4vw, 46px); overflow: hidden; }
.acviz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kg-stage { position: relative; margin-top: clamp(34px, 4vw, 52px); height: clamp(440px, 50vw, 620px); border: 1px solid var(--line); background-color: var(--bg); background-image: radial-gradient(rgba(20,20,27,.05) 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }
.kg-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- How it's built — indt tab set ---- */
.indt { margin-top: clamp(34px, 4.5vw, 56px); margin-left: calc(-1 * var(--pad, 0px)); margin-right: calc(-1 * var(--pad, 0px)); }
.indt-tabs { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 0 clamp(16px, 2vw, 34px); }
.indt-tab { background: none; border: 0; cursor: pointer; padding: 8px 16px; font-family: var(--font-display); font-weight: 500; font-size: clamp(.96rem, 1.45vw, 1.14rem); letter-spacing: -0.01em; color: var(--ink-mute); transition: color .2s ease; white-space: nowrap; }
.indt-tab:hover { color: var(--ink-soft); }
.indt-tab.is-active { color: var(--ink); font-weight: 600; }
.indt-ruler { position: relative; height: 34px; margin-top: 12px; cursor: pointer; }
.indt-notch { position: absolute; bottom: 8px; width: 1px; height: 11px; background: var(--line-strong); transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .18s ease, background .18s ease; pointer-events: none; }
.indt-mark { position: absolute; bottom: 4px; left: 0; width: 2px; height: 19px; background: var(--accent); transform: translateX(-50%); transition: left .42s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.indt-body { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin-top: clamp(28px, 3.6vw, 46px); border: 1px solid var(--line); }
.indt-text { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 54px); }
.indt-panel { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 28px; }
.indt-panel[hidden] { display: none; }
.indt-panel p { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.58; color: var(--ink-soft); max-width: 42ch; margin: 0; }
.indt-visual { position: relative; min-height: clamp(300px, 34vw, 420px); border-left: 1px solid var(--line); overflow: hidden; }
.indt-shot .indt-panel { justify-content: center; gap: 0; }
.indt-shot .indt-panel h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.95rem); letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.indt-shot .indt-panel p { margin-top: 14px; max-width: 40ch; }
.indt-vis[hidden] { display: none; }
.indt-vis { width: 100%; }
.kgd { display: grid; place-items: center; height: 100%; min-height: clamp(300px, 34vw, 420px); padding: clamp(24px, 3.5vw, 48px); box-sizing: border-box; }
.kgd svg { width: 100%; max-width: 320px; height: auto; display: block; }
.kgd-step { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
@media (max-width: 900px) {
  .indt-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 22px; -webkit-overflow-scrolling: touch; }
  .indt-ruler { display: none; }
  .indt-body { grid-template-columns: 1fr; }
  .indt-visual { order: -1; min-height: 240px; border-left: 0; border-bottom: 1px solid var(--line); }
}