Add why-ours.php — plain-language explainer page

Explains why Do Better Norge tools give different answers than ChatGPT:
RAG, BM25+vector search, reranker, knowledge graph, fine-tuned model.
Includes EN/NO translations, 5 optimised WebP/JPEG images, new kdoc-compare
and kdoc-graph CSS components. Link added from index.php trust section.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/tools.css

@@ -7979,3 +7979,246 @@ body.lt-landing {
   font-size: 0.78em;
 }
 
+/* ── why-ours.php — two-path comparison ─────────────────────────────────── */
+.kdoc-compare {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  margin-top: 2rem;
+}
+.kdoc-compare__col {
+  background: var(--panel);
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 2px 12px rgba(25,35,52,.06);
+}
+.kdoc-compare__col--generic { border-top: 4px solid #c2410c; }
+.kdoc-compare__col--dbn     { border-top: 4px solid var(--dbn-blue, #00205b); }
+.kdoc-compare__label {
+  font-size: .72rem;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  font-weight: 700;
+  margin-bottom: 1.25rem;
+}
+.kdoc-compare__col--generic .kdoc-compare__label { color: #c2410c; }
+.kdoc-compare__col--dbn     .kdoc-compare__label { color: var(--dbn-blue, #00205b); }
+.kdoc-compare__flow {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+.kdoc-compare__arrow {
+  text-align: center;
+  color: var(--muted, #667085);
+  font-size: 1.1rem;
+  line-height: 1;
+  padding: .1rem 0;
+}
+.kdoc-compare__flow-step {
+  background: var(--bg, #f7f8fb);
+  border-radius: 8px;
+  padding: .75rem 1rem;
+  font-size: .88rem;
+  line-height: 1.55;
+  color: var(--ink, #1b2330);
+}
+.kdoc-compare__flow-step small {
+  display: block;
+  margin-top: .25rem;
+  font-size: .78rem;
+  color: var(--muted, #667085);
+  font-style: italic;
+}
+.kdoc-compare__flow-step--final { font-weight: 700; }
+.kdoc-compare__col--generic .kdoc-compare__flow-step--final {
+  background: #fff0e8;
+  color: #c2410c;
+}
+.kdoc-compare__col--dbn .kdoc-compare__flow-step--final {
+  background: var(--soft-teal, #e7f5f2);
+  color: var(--teal-dark, #115e59);
+}
+.kdoc-compare__caption {
+  margin-top: 1.5rem;
+  text-align: center;
+  font-size: .92rem;
+  color: var(--muted, #667085);
+  font-style: italic;
+}
+@media (max-width: 700px) {
+  .kdoc-compare { grid-template-columns: 1fr; }
+}
+
+/* ── Analogy term chip ───────────────────────────────────────────────────── */
+.kdoc-feature-card__term {
+  display: inline-block;
+  margin-top: .75rem;
+  padding: .25rem .65rem;
+  background: var(--soft-teal, #e7f5f2);
+  color: var(--teal-dark, #115e59);
+  border-radius: 20px;
+  font-size: .72rem;
+  font-weight: 600;
+  letter-spacing: .03em;
+}
+
+/* ── Knowledge graph (why-ours) ──────────────────────────────────────────── */
+.kdoc-graph {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  margin-top: 2rem;
+}
+.kdoc-graph__node {
+  background: var(--panel);
+  border: 1.5px solid var(--line, #d8dde7);
+  border-radius: 10px;
+  padding: .85rem 1.5rem;
+  text-align: center;
+  max-width: 420px;
+  width: 100%;
+  box-shadow: 0 2px 8px rgba(25,35,52,.06);
+}
+.kdoc-graph__node--start {
+  background: var(--dbn-blue, #00205b);
+  color: #fff;
+  border-color: var(--dbn-blue, #00205b);
+}
+.kdoc-graph__node--end {
+  background: var(--soft-teal, #e7f5f2);
+  border-color: var(--teal, #0f766e);
+}
+.kdoc-graph__node-title {
+  font-family: 'Crimson Pro', Georgia, serif;
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: inherit;
+  margin: 0 0 .15rem;
+}
+.kdoc-graph__node--start .kdoc-graph__node-title { color: #fff; }
+.kdoc-graph__node--end   .kdoc-graph__node-title { color: var(--teal-dark, #115e59); }
+.kdoc-graph__node-note {
+  font-size: .75rem;
+  color: var(--muted, #667085);
+  margin: 0;
+}
+.kdoc-graph__node--start .kdoc-graph__node-note { color: rgba(255,255,255,.7); }
+.kdoc-graph__node--end   .kdoc-graph__node-note { color: var(--teal-dark, #115e59); opacity: .8; }
+.kdoc-graph__connector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: .35rem 0;
+  color: var(--muted, #667085);
+  font-size: .8rem;
+  gap: .2rem;
+}
+.kdoc-graph__connector-line {
+  width: 2px;
+  height: 20px;
+  background: var(--line, #d8dde7);
+}
+.kdoc-graph__connector-label {
+  font-size: .68rem;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--muted, #667085);
+}
+
+/* ── Image placeholder slots ─────────────────────────────────────────────── */
+.kdoc-img-slot {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--dbn-blue, #00205b);
+  min-height: 300px;
+  margin: 2.5rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kdoc-img-slot picture,
+.kdoc-img-slot img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+.kdoc-img-slot__placeholder {
+  text-align: center;
+  color: rgba(255,255,255,.45);
+  padding: 2.5rem 2rem;
+  max-width: 700px;
+  position: relative;
+  z-index: 1;
+}
+.kdoc-img-slot__placeholder strong {
+  display: block;
+  font-size: .95rem;
+  color: rgba(255,255,255,.75);
+  margin-bottom: .6rem;
+  font-family: 'Crimson Pro', Georgia, serif;
+  font-weight: 600;
+}
+.kdoc-img-slot__label {
+  font-size: .65rem;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  color: rgba(255,255,255,.35);
+  margin-bottom: .4rem;
+}
+.kdoc-img-slot__prompt {
+  background: rgba(255,255,255,.06);
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: 8px;
+  padding: 1rem 1.25rem;
+  font-size: .78rem;
+  font-family: 'IBM Plex Sans', sans-serif;
+  color: rgba(255,255,255,.65);
+  line-height: 1.65;
+  margin-top: .75rem;
+  text-align: left;
+}
+
+/* ── Privacy card (why-ours) ─────────────────────────────────────────────── */
+.kdoc-privacy-card {
+  background: var(--dbn-blue, #00205b);
+  color: rgba(255,255,255,.9);
+  border-radius: 12px;
+  padding: 2.5rem;
+  margin-top: 1.5rem;
+}
+.kdoc-privacy-card h3 {
+  font-family: 'Crimson Pro', Georgia, serif;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #fff;
+  margin: 0 0 .75rem;
+}
+.kdoc-privacy-card p {
+  font-size: .95rem;
+  line-height: 1.7;
+  color: rgba(255,255,255,.8);
+  margin: 0;
+}
+.kdoc-privacy-card__badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  margin-top: 1.25rem;
+}
+.kdoc-privacy-card__badge {
+  padding: .3rem .8rem;
+  background: rgba(255,255,255,.1);
+  border: 1px solid rgba(255,255,255,.18);
+  border-radius: 20px;
+  font-size: .72rem;
+  font-weight: 600;
+  color: rgba(255,255,255,.85);
+  letter-spacing: .03em;
+}
+