#trust {
  --kb-text: #fff;
  --kb-text-2: rgba(255,255,255,.82);
  --kb-text-3: rgba(255,255,255,.62);
  --kb-text-4: rgba(255,255,255,.48);
  --kb-ok: #5dcaa5;
  --kb-ok-text: #9fe1cb;
  --kb-ok-line: rgba(93,202,165,.38);
  --kb-ok-bg: rgba(93,202,165,.12);
  --kb-warn-text: #fac775;
  --kb-warn-line: rgba(239,159,39,.5);
  --kb-warn-bg: rgba(239,159,39,.12);
  --glass-top: rgba(255,255,255,.12);
  --glass-bot: rgba(255,255,255,.03);
  --glass-edge: rgba(255,255,255,.16);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: 4.5rem 1.5rem;
  background: #070708;
  color: var(--kb-text);
  color-scheme: dark;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

#trust, #trust * { box-sizing: border-box; }
#trust .bg,
#demo .hex-background {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #202124;
}
#trust .bg canvas,
#demo .hex-background canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9;
}
#trust .bg::after,
#demo .hex-background::after {
  content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

#knowledge-bento { max-width: 64rem; margin: 0 auto; position: relative; }
#knowledge-bento .kb-eyebrow {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
  font-size: .875rem; font-weight: 300; color: var(--kb-text-3);
}
#knowledge-bento .kb-eyebrow svg { width: 1rem; height: 1rem; color: var(--kb-ok); }
#knowledge-bento h2 {
  text-align: left; margin: 0 0 2rem; font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  line-height: 1.15; font-weight: 300; letter-spacing: -.015em; color: var(--kb-text);
}
#knowledge-bento .bento {
  display: grid; grid-template-columns: minmax(0, 1.25fr) 2.5rem minmax(0, 1fr); align-items: stretch;
}
#knowledge-bento .stack { display: flex; flex-direction: column; min-width: 0; }
#knowledge-bento .stack .tile:last-child { flex: 1; }
#knowledge-bento .tile {
  position: relative; display: flex; flex-direction: column; gap: .625rem;
  min-width: 0; padding: 1.375rem; overflow: hidden;
  background: linear-gradient(145deg, var(--glass-top), var(--glass-bot));
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-edge); border-radius: 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 20px 40px rgba(0,0,0,.45);
}
#knowledge-bento .tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 36%);
}
#knowledge-bento .tile > * { position: relative; }
#knowledge-bento .tile h3 { margin: 0; font-size: 1.125rem; font-weight: 400; color: var(--kb-text); }
#knowledge-bento .support { margin: 0; font-size: .875rem; line-height: 1.5; font-weight: 300; color: var(--kb-text-3); }
#knowledge-bento .link { display: flex; align-items: center; justify-content: center; color: var(--kb-text-3); }
#knowledge-bento .link svg { width: 1.25rem; height: 1.25rem; }
#knowledge-bento .link-v { padding: .375rem 0; }
#knowledge-bento .link-v svg { transform: rotate(90deg); }
#knowledge-bento .main-tile .flow { display: flex; justify-content: center; color: var(--kb-text-3); }
#knowledge-bento .main-tile .flow svg { width: 1.25rem; height: 1.25rem; transform: rotate(90deg); }
#knowledge-bento .documents { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
#knowledge-bento .documents li {
  display: inline-flex; align-items: center; gap: .375rem; padding: .3rem .625rem;
  font-size: .75rem; font-weight: 300; color: var(--kb-text-2);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
}
#knowledge-bento .documents svg { width: .875rem; height: .875rem; flex: none; }
#knowledge-bento .prepared {
  display: flex; flex-direction: column; gap: .25rem; padding: .875rem 1rem;
  background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.14); border-radius: 1rem;
  font-size: .75rem; font-weight: 300; color: var(--kb-text-3);
}
#knowledge-bento .eyebrow { font-size: .75rem; font-weight: 300; color: var(--kb-text-4); }
#knowledge-bento .guide-title { font-size: 1rem; font-weight: 400; color: var(--kb-text); }
#knowledge-bento .source { display: flex; align-items: center; gap: .375rem; margin-top: .375rem; font-size: .75rem; color: var(--kb-ok-text); }
#knowledge-bento .source svg { width: .875rem; height: .875rem; flex: none; }
#knowledge-bento .row {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding-top: .625rem;
  border-top: 1px solid rgba(255,255,255,.14); font-size: .8125rem; font-weight: 300; color: var(--kb-text-2);
}
#knowledge-bento .rev {
  padding: .125rem .625rem; font-size: .75rem; color: var(--kb-ok-text);
  background: var(--kb-ok-bg); border: 1px solid var(--kb-ok-line); border-radius: 999px;
}
#knowledge-bento .record {
  display: flex; flex-direction: column; align-items: flex-start; gap: .375rem;
  padding-top: .625rem; border-top: 1px solid rgba(255,255,255,.14);
}
#knowledge-bento .status {
  padding: .125rem .625rem; font-size: .75rem; color: var(--kb-warn-text);
  background: var(--kb-warn-bg); border: 1px solid var(--kb-warn-line); border-radius: 999px;
}
#knowledge-bento .recorded { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--kb-ok-text); }
#knowledge-bento .recorded svg { width: .875rem; height: .875rem; flex: none; }
#knowledge-bento .legend {
  display: flex; flex-wrap: wrap; gap: 1.125rem; margin: 1.5rem 0 0; padding: 0; list-style: none;
  font-size: .75rem; font-weight: 300; color: var(--kb-text-4);
}
#knowledge-bento .legend li { display: flex; align-items: center; gap: .375rem; }
#knowledge-bento .legend i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--kb-ok); }
#knowledge-bento .legend li + li i { background: #ef9f27; }

@media (max-width: 767px) {
  #trust { padding: 3rem 1rem; }
  #knowledge-bento .bento { grid-template-columns: minmax(0, 1fr); }
  #knowledge-bento .link-h { padding: .375rem 0; }
  #knowledge-bento .link-h svg { transform: rotate(90deg); }
}