/* ============================================================================
   kos.css — SearchScore Knowledge Operating System (/guides/seo/).
   Self-contained, scoped under .kos so it never affects the rest of the site.
   Palette mirrors the canonical SearchScore product tokens (brand blue #2F80FF,
   GEO teal, SEO emerald, CRO violet). Fonts (Inter, Instrument Serif) are already
   loaded by the sitewide stylesheet via base.njk.
   ============================================================================ */

.kos {
  --kos-blue: #2F80FF;
  --kos-blue-dark: #1F5FCC;
  --kos-blue-tint: #EAF1FF;
  --kos-geo: #0F766E;
  --kos-seo: #059669;
  --kos-violet: #7C3AED;
  --kos-amber: #B45309;

  --kos-ink: #0F172A;
  --kos-ink-2: #1F2A44;
  --kos-muted: #4A5366;
  --kos-muted-2: #6B7488;

  --kos-paper: #FFFFFF;
  --kos-paper-2: #F7F9FC;
  --kos-paper-3: #EEF2F8;
  --kos-line: rgba(15, 23, 42, 0.10);
  --kos-line-2: rgba(15, 23, 42, 0.055);

  --kos-accent: var(--kos-blue);

  --kos-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --kos-serif: 'Instrument Serif', Georgia, serif;
  --kos-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --kos-radius: 16px;
  --kos-radius-sm: 10px;
  --kos-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --kos-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10), 0 30px 70px rgba(15, 23, 42, 0.10);

  background: var(--kos-paper);
  color: var(--kos-ink);
  font-family: var(--kos-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

/* Per-type accent colour */
.kos [data-type="domain"]     { --kos-accent: var(--kos-blue); }
.kos [data-type="capability"] { --kos-accent: var(--kos-geo); }
.kos [data-type="framework"]  { --kos-accent: var(--kos-violet); }
.kos [data-type="pattern"]    { --kos-accent: var(--kos-amber); }
.kos [data-type="decision"]   { --kos-accent: var(--kos-seo); }
.kos [data-type="guide"]      { --kos-accent: var(--kos-blue); }
.kos [data-type="definition"] { --kos-accent: var(--kos-ink-2); }

.kos-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 96px;
}

.kos ::selection { background: var(--kos-blue-tint); }

/* ── Breadcrumbs ───────────────────────────────────────────────────────────── */
.kos-breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0; margin: 0 0 22px; font-size: 13px; color: var(--kos-muted-2);
}
.kos-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.kos-breadcrumbs li + li::before { content: "/"; color: var(--kos-line); }
.kos-breadcrumbs a { color: var(--kos-muted); text-decoration: none; }
.kos-breadcrumbs a:hover { color: var(--kos-blue); }
.kos-breadcrumbs [aria-current="page"] { color: var(--kos-ink); font-weight: 500; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.kos-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  padding: 4px 10px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--kos-line); background: var(--kos-paper-2); color: var(--kos-ink-2);
}
.kos-badge-icon { font-size: 11px; line-height: 1; }
.kos-badge-type { color: #fff; background: var(--kos-accent); border-color: transparent; }
.kos-badge-domain { background: var(--kos-blue-tint); color: var(--kos-blue-dark); border-color: transparent; }
.kos-badge-domain:hover { background: #dbe7ff; }
.kos-badge-status { text-transform: capitalize; }
.kos-badge-status[data-status="stable"] { background: #eafaf1; color: #0b7a43; }
.kos-badge-status[data-status="beta"]   { background: #fff4e5; color: #9a5b00; }
.kos-badge-status[data-status="draft"]  { background: var(--kos-paper-3); color: var(--kos-muted); }
.kos-badge-confidence .kos-conf-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--kos-seo); display: inline-block;
}
.kos-badge-confidence[data-level="established"] .kos-conf-dot { background: #2f80ff; }
.kos-badge-confidence[data-level="emerging"] .kos-conf-dot { background: #d97706; }
.kos-badge-confidence[data-level="exploratory"] .kos-conf-dot { background: #b91c1c; }
.kos-badge-evidence[data-level="strong"]       { background: #eafaf1; color: #0b7a43; }
.kos-badge-evidence[data-level="established"]  { background: var(--kos-blue-tint); color: var(--kos-blue-dark); }
.kos-badge-evidence[data-level="emerging"]     { background: #fff4e5; color: #9a5b00; }

/* ── Object hero ───────────────────────────────────────────────────────────── */
.kos-hero { padding-bottom: 28px; border-bottom: 1px solid var(--kos-line-2); margin-bottom: 8px; }
.kos-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.kos-hero-title {
  font-family: var(--kos-sans); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin: 0 0 14px; color: var(--kos-ink);
}
.kos-hero-summary { font-size: clamp(17px, 2vw, 20px); color: var(--kos-muted); margin: 0 0 22px; max-width: 62ch; }
.kos-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.kos-meta-item { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.kos-meta-item dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kos-muted-2); }
.kos-meta-item dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--kos-ink-2); }
.kos-meta-item code { font-family: var(--kos-mono); font-size: 12.5px; background: var(--kos-paper-3); padding: 1px 7px; border-radius: 6px; }

/* ── Object layout: sticky TOC + article ───────────────────────────────────── */
.kos-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; margin-top: 34px; }
.kos-toc { position: relative; }
.kos-toc-inner { position: sticky; top: 96px; }
.kos-toc-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kos-muted-2); margin: 0 0 12px; }
.kos-toc-nav { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--kos-line); }
.kos-toc-link {
  font-size: 13.5px; color: var(--kos-muted); text-decoration: none; padding: 5px 0 5px 14px;
  margin-left: -2px; border-left: 2px solid transparent; line-height: 1.35;
}
.kos-toc-link:hover { color: var(--kos-ink); }
.kos-toc-h3 { padding-left: 26px; font-size: 13px; }
.kos-toc-link.is-active { color: var(--kos-blue); border-left-color: var(--kos-blue); font-weight: 600; }

/* ── Article body ──────────────────────────────────────────────────────────── */
.kos-article { min-width: 0; }
.kos-section { margin-bottom: 40px; scroll-margin-top: 90px; }
.kos-section h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--kos-ink);
  margin: 0 0 16px; padding-top: 6px; scroll-margin-top: 90px;
}
.kos-section h3 { font-size: 16px; font-weight: 700; color: var(--kos-ink-2); margin: 24px 0 10px; scroll-margin-top: 90px; }
.kos-article p { color: var(--kos-ink-2); margin: 0 0 14px; }
.kos-lead { font-size: 18px; color: var(--kos-ink-2) !important; }
.kos-note { color: var(--kos-muted); font-size: 14.5px; }

/* Steps */
.kos-steps { list-style: none; counter-reset: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.kos-step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--kos-line-2); }
.kos-step:last-child { border-bottom: none; }
.kos-step-num {
  width: 30px; height: 30px; border-radius: 9px; background: var(--kos-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.kos-step-body strong { display: block; color: var(--kos-ink); font-size: 15.5px; margin-bottom: 3px; }
.kos-step-body p { margin: 0; color: var(--kos-muted); font-size: 14.5px; }

/* Maturity model */
.kos-maturity { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.kos-maturity-level { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 14px 16px; background: var(--kos-paper-2); border: 1px solid var(--kos-line-2); border-radius: var(--kos-radius-sm); }
.kos-maturity-n { font-weight: 800; color: var(--kos-accent); font-size: 15px; font-family: var(--kos-mono); }
.kos-maturity-level strong { display: block; font-size: 15px; color: var(--kos-ink); }
.kos-maturity-level p { margin: 2px 0 0; font-size: 14px; color: var(--kos-muted); }

/* Guidance (decision if/then) */
.kos-guidance { display: flex; flex-direction: column; gap: 10px; }
.kos-guidance-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--kos-line); border-radius: var(--kos-radius-sm); overflow: hidden; }
.kos-guidance-if, .kos-guidance-then { padding: 14px 16px; font-size: 14.5px; }
.kos-guidance-if { background: var(--kos-paper-2); color: var(--kos-ink-2); border-right: 1px solid var(--kos-line); }
.kos-guidance-then { color: var(--kos-ink-2); }
.kos-guidance-tag { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kos-muted-2); margin-bottom: 4px; font-weight: 700; }

/* Inputs / outputs */
.kos-io { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kos-io-col { background: var(--kos-paper-2); border: 1px solid var(--kos-line-2); border-radius: var(--kos-radius-sm); padding: 16px 18px; }
.kos-io-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kos-muted-2); margin: 0 0 8px; font-weight: 700; }
.kos-io-col ul { margin: 0; padding-left: 18px; color: var(--kos-ink-2); font-size: 14px; }
.kos-io-col li { margin-bottom: 5px; }

/* Product features */
.kos-features { display: grid; gap: 8px; }
.kos-feature { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; padding: 12px 14px; border: 1px solid var(--kos-line-2); border-radius: var(--kos-radius-sm); }
.kos-feature-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 6px; text-align: center; height: fit-content; }
.kos-feature-status[data-status="shipped"] { background: #eafaf1; color: #0b7a43; }
.kos-feature-status[data-status="beta"] { background: #fff4e5; color: #9a5b00; }
.kos-feature-status[data-status="planned"] { background: var(--kos-paper-3); color: var(--kos-muted); }
.kos-feature strong { color: var(--kos-ink); font-size: 15px; }
.kos-feature p { margin: 2px 0 0; font-size: 14px; color: var(--kos-muted); }

/* Chips + lists */
.kos-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.kos-chip { background: var(--kos-paper-2); border: 1px solid var(--kos-line); border-radius: 8px; padding: 6px 12px; font-size: 13.5px; color: var(--kos-ink-2); }
.kos-list { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.kos-list li { position: relative; padding-left: 26px; color: var(--kos-ink-2); font-size: 15px; }
.kos-list li::before { position: absolute; left: 0; top: 1px; font-weight: 700; }
.kos-list-check li::before { content: "✓"; color: var(--kos-seo); }
.kos-list-cross li::before { content: "✕"; color: #b91c1c; }
.kos-list-dot li::before, .kos-list-cause li::before { content: "•"; color: var(--kos-accent); font-size: 18px; top: -2px; }

/* Prompt block */
.kos-prompt { background: var(--kos-ink); color: #e5eefc; border-radius: var(--kos-radius-sm); padding: 16px 18px; overflow-x: auto; font-family: var(--kos-mono); font-size: 13px; line-height: 1.6; }
.kos-prompt code { font-family: inherit; }

/* Callouts */
.kos-callout { border-radius: var(--kos-radius-sm); padding: 16px 18px; border: 1px solid var(--kos-line-2); border-left: 4px solid var(--kos-accent); background: var(--kos-paper-2); }
.kos-callout + .kos-callout { margin-top: 12px; }
.kos-callout-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; margin: 0 0 6px; color: var(--kos-muted-2); }
.kos-callout-text { margin: 0; color: var(--kos-ink-2); font-size: 15px; }
.kos-callout-insight { background: var(--kos-blue-tint); border-left-color: var(--kos-blue); }
.kos-callout-insight .kos-callout-label { color: var(--kos-blue-dark); }
.kos-callout-protip { background: #f3eefe; border-left-color: var(--kos-violet); }
.kos-callout-protip .kos-callout-label { color: var(--kos-violet); }
.kos-callout-experiment { background: #eafaf1; border-left-color: var(--kos-seo); }
.kos-callout-experiment .kos-callout-label { color: #0b7a43; }
.kos-callout-example, .kos-callout-answer { background: var(--kos-paper-2); border-left-color: var(--kos-ink-2); }
.kos-callout-action { background: #fff4e5; border-left-color: var(--kos-amber); }
.kos-callout-action .kos-callout-label { color: #9a5b00; }

/* FAQ */
.kos-faq { display: flex; flex-direction: column; gap: 8px; }
.kos-faq-item { border: 1px solid var(--kos-line); border-radius: var(--kos-radius-sm); overflow: hidden; }
.kos-faq-item summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--kos-ink); list-style: none; position: relative; font-size: 15.5px; }
.kos-faq-item summary::-webkit-details-marker { display: none; }
.kos-faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-size: 20px; color: var(--kos-muted-2); font-weight: 400; }
.kos-faq-item[open] summary::after { content: "−"; }
.kos-faq-answer { padding: 0 18px 16px; }
.kos-faq-answer p { margin: 0; color: var(--kos-muted); }

.kos-decision-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kos-decision-list a { color: var(--kos-blue-dark); text-decoration: none; font-weight: 600; font-size: 15px; }
.kos-decision-list a:hover { text-decoration: underline; }

/* ── Cards + related ───────────────────────────────────────────────────────── */
.kos-related { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--kos-line); }
.kos-related > h2 { font-size: 20px; font-weight: 700; margin: 0 0 20px; }
.kos-related-group { margin-bottom: 26px; }
.kos-related-heading { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kos-muted-2); margin: 0 0 12px; font-weight: 700; }
.kos-count { font-size: 13px; color: var(--kos-muted-2); font-weight: 600; }

.kos-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.kos-card-grid-lg { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kos-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: var(--kos-paper); border: 1px solid var(--kos-line); border-radius: var(--kos-radius);
  padding: 16px 18px; transition: border-color .15s, box-shadow .15s, transform .15s;
  position: relative; overflow: hidden;
}
.kos-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kos-accent); opacity: 0; transition: opacity .15s; }
.kos-card:hover { border-color: var(--kos-line); box-shadow: var(--kos-shadow); transform: translateY(-2px); }
.kos-card:hover::before { opacity: 1; }
.kos-card-top { display: flex; align-items: center; justify-content: space-between; }
.kos-card-type { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kos-accent); }
.kos-card-icon { font-size: 11px; }
.kos-card-conf { font-size: 12px; font-weight: 700; color: var(--kos-muted-2); background: var(--kos-paper-2); border-radius: 6px; padding: 1px 7px; }
.kos-card-title { font-weight: 700; font-size: 16px; color: var(--kos-ink); line-height: 1.3; }
.kos-card-summary { font-size: 13.5px; color: var(--kos-muted); line-height: 1.5; }
.kos-card-domain { margin-top: 2px; font-size: 12px; color: var(--kos-muted-2); }

/* ── CTA ───────────────────────────────────────────────────────────────────── */
.kos-cta {
  margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  background: linear-gradient(120deg, #0f2557, #10315f 60%, #12417a); color: #fff;
  border-radius: 20px; padding: 30px 34px;
}
.kos-cta-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #9fc0ff; margin: 0 0 8px; font-weight: 700; }
.kos-cta-text { margin: 0; font-size: 16px; color: #dbe7ff; max-width: 58ch; }
.kos-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kos-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14.5px; padding: 11px 20px; border-radius: 10px; text-decoration: none; transition: transform .12s, background .15s, border-color .15s; white-space: nowrap; }
.kos-btn:hover { transform: translateY(-1px); }
.kos-btn-primary { background: var(--kos-blue); color: #fff; }
.kos-btn-primary:hover { background: #1f6bff; }
.kos-cta .kos-btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.28); }
.kos-cta .kos-btn-ghost:hover { background: rgba(255,255,255,0.16); }
.kos-btn-ghost { background: var(--kos-paper-2); color: var(--kos-ink-2); border: 1px solid var(--kos-line); }
.kos-btn-ghost:hover { border-color: var(--kos-blue); color: var(--kos-blue-dark); }

/* ── Home hub ──────────────────────────────────────────────────────────────── */
.kos-home-hero { padding: 20px 0 40px; border-bottom: 1px solid var(--kos-line-2); margin-bottom: 20px; }
.kos-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--kos-blue); margin-bottom: 14px; }
.kos-home-hero h1 { font-weight: 800; letter-spacing: -0.025em; font-size: clamp(34px, 5.5vw, 60px); line-height: 1.03; margin: 0 0 18px; max-width: 16ch; }
.kos-home-lead { font-size: clamp(17px, 2.2vw, 21px); color: var(--kos-muted); max-width: 60ch; margin: 0 0 26px; }
.kos-home-search { display: flex; gap: 10px; max-width: 620px; margin-bottom: 16px; }
.kos-home-search-input { flex: 1; padding: 14px 18px; border: 1px solid var(--kos-line); border-radius: 12px; font-size: 15.5px; font-family: inherit; background: var(--kos-paper); color: var(--kos-ink); }
.kos-home-search-input:focus { outline: none; border-color: var(--kos-blue); box-shadow: 0 0 0 3px var(--kos-blue-tint); }
.kos-home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.kos-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; }
.kos-stats > div { text-align: left; }
.kos-stats dt { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: var(--kos-ink); letter-spacing: -0.02em; font-family: var(--kos-sans); }
.kos-stats dd { margin: 0; font-size: 13px; color: var(--kos-muted-2); text-transform: uppercase; letter-spacing: 0.04em; }

.kos-home-section { margin: 46px 0; }
.kos-home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.kos-home-h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.kos-home-sub { color: var(--kos-muted); margin: 0 0 18px; font-size: 15.5px; }
.kos-home-more { font-size: 14px; font-weight: 600; color: var(--kos-blue-dark); text-decoration: none; white-space: nowrap; }
.kos-home-more:hover { text-decoration: underline; }
.kos-home-head + .kos-card-grid { margin-top: 16px; }
.kos-card-domain { --kos-accent: var(--kos-blue); }

/* Method flow */
.kos-flow-section { background: var(--kos-paper-2); border: 1px solid var(--kos-line-2); border-radius: 20px; padding: 30px 30px 34px; }
.kos-flow { list-style: none; counter-reset: flow; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; }
.kos-flow-step {
  position: relative; background: var(--kos-paper); border: 1px solid var(--kos-line); border-radius: 999px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--kos-ink-2);
}
.kos-flow-step:not(:last-child)::after { content: "→"; margin-left: 8px; color: var(--kos-muted-2); font-weight: 400; }

/* ── Listing / browse / search ─────────────────────────────────────────────── */
.kos-listing-hero { padding: 10px 0 24px; }
.kos-listing-hero h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 12px; display: flex; align-items: baseline; gap: 12px; }
.kos-filterbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 8px 0 24px; }
.kos-filter-input { flex: 1; min-width: 240px; padding: 12px 16px; border: 1px solid var(--kos-line); border-radius: 11px; font-size: 15px; font-family: inherit; background: var(--kos-paper); color: var(--kos-ink); }
.kos-filter-input:focus { outline: none; border-color: var(--kos-blue); box-shadow: 0 0 0 3px var(--kos-blue-tint); }
.kos-filter-domains, .kos-facet-group { display: flex; flex-wrap: wrap; gap: 8px; }
.kos-domain-chip { border: 1px solid var(--kos-line); background: var(--kos-paper); color: var(--kos-muted); border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .12s; }
.kos-domain-chip:hover { border-color: var(--kos-blue); color: var(--kos-blue-dark); }
.kos-domain-chip.is-active { background: var(--kos-ink); color: #fff; border-color: var(--kos-ink); }
.kos-search-facets { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.kos-search-count { color: var(--kos-muted-2); font-size: 14px; margin: 0 0 16px; }
.kos-empty { color: var(--kos-muted); font-size: 15px; padding: 24px 0; }

.kos-domain-rows { display: flex; flex-direction: column; gap: 14px; }
.kos-domain-row { border: 1px solid var(--kos-line); border-radius: var(--kos-radius); padding: 20px 22px; transition: box-shadow .15s; }
.kos-domain-row:hover { box-shadow: var(--kos-shadow); }
.kos-domain-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.kos-domain-row-title { font-size: 19px; font-weight: 700; color: var(--kos-ink); text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; }
.kos-domain-row-title:hover { color: var(--kos-blue); }
.kos-domain-row-title .kos-badge-icon { color: var(--kos-blue); }
.kos-domain-row-summary { color: var(--kos-muted); margin: 8px 0 14px; font-size: 14.5px; max-width: 74ch; }
.kos-domain-row-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.kos-mini-count { font-size: 13px; color: var(--kos-ink-2); background: var(--kos-paper-2); border: 1px solid var(--kos-line-2); border-radius: 8px; padding: 5px 11px; text-decoration: none; }
.kos-mini-count:hover { border-color: var(--kos-blue); }
.kos-mini-count strong { color: var(--kos-ink); }
.kos-card-type-tile { --kos-accent: var(--kos-blue); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .kos-layout { grid-template-columns: 1fr; gap: 8px; }
  .kos-toc { display: none; }
  .kos-stats { grid-template-columns: repeat(3, 1fr); gap: 18px 14px; }
}
@media (max-width: 640px) {
  .kos-shell { padding: 20px 18px 72px; }
  .kos-io, .kos-guidance-row { grid-template-columns: 1fr; }
  .kos-guidance-if { border-right: none; border-bottom: 1px solid var(--kos-line); }
  .kos-stats { grid-template-columns: repeat(2, 1fr); }
  .kos-home-search { flex-direction: column; }
  .kos-cta { padding: 24px; }
  .kos-card-grid, .kos-card-grid-lg { grid-template-columns: 1fr; }
}

/* ── Prompt-2 additions: next steps, severity/strength, first actions, evidence ── */
.kos-nextsteps { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--kos-line); }
.kos-nextsteps-h { font-size: 20px; font-weight: 700; margin: 0 0 18px; }
.kos-nextsteps-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kos-nextstep { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--kos-blue-tint); border: 1px solid transparent; border-radius: var(--kos-radius); padding: 16px 18px; transition: transform .15s, box-shadow .15s; }
.kos-nextstep:hover { transform: translateY(-2px); box-shadow: var(--kos-shadow); }
.kos-nextstep-why { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--kos-blue-dark); }
.kos-nextstep-title { font-size: 15.5px; font-weight: 700; color: var(--kos-ink); line-height: 1.3; }
.kos-nextstep-kind { font-size: 12.5px; color: var(--kos-muted); margin-top: auto; }
.kos-nextstep-arrow { color: var(--kos-blue); font-weight: 700; }

.kos-badge-severity[data-severity="critical"] { background: #fdeaea; color: #b91c1c; }
.kos-badge-severity[data-severity="high"] { background: #fff4e5; color: #9a5b00; }
.kos-badge-severity[data-severity="medium"] { background: var(--kos-blue-tint); color: var(--kos-blue-dark); }
.kos-badge-severity[data-severity="low"] { background: var(--kos-paper-3); color: var(--kos-muted); }

.kos-badge-strength[data-strength="strong"] { background: #eafaf1; color: #0b7a43; }
.kos-badge-strength[data-strength="moderate"] { background: var(--kos-blue-tint); color: var(--kos-blue-dark); }
.kos-badge-strength[data-strength="indicative"] { background: #fff4e5; color: #9a5b00; }

.kos-firstactions { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.kos-firstactions li { color: var(--kos-ink-2); font-size: 15px; padding-left: 4px; }
.kos-firstactions li::marker { color: var(--kos-accent); font-weight: 700; }

.kos-evidence-source .kos-meta { margin-bottom: 14px; }
.kos-evidence-link { margin: 0; }

/* ── Prompt-4: interactive workflows (checklist/audit/decision), AI summary, journey ── */
.kos-workflow-panel { position: sticky; top: 84px; z-index: 5; background: var(--kos-paper); border: 1px solid var(--kos-line); border-radius: var(--kos-radius); padding: 16px 18px; margin-bottom: 28px; box-shadow: var(--kos-shadow); }
.kos-wf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.kos-wf-head strong { font-size: 15px; color: var(--kos-ink); }
.kos-wf-pct { font-size: 20px; font-weight: 800; color: var(--kos-blue); }
.kos-wf-score { font-size: 15px; font-weight: 800; padding: 3px 12px; border-radius: 999px; }
.kos-wf-score[data-band="healthy"] { background: #eafaf1; color: #0b7a43; }
.kos-wf-score[data-band="at-risk"] { background: #fff4e5; color: #9a5b00; }
.kos-wf-score[data-band="needs-work"] { background: #fdeaea; color: #b91c1c; }
.kos-wf-bar { height: 8px; border-radius: 999px; background: var(--kos-paper-3); overflow: hidden; margin-bottom: 12px; }
.kos-wf-bar > span { display: block; height: 100%; background: var(--kos-blue); transition: width .25s var(--ease-out, ease); }
.kos-wf-bar[data-band="healthy"] > span { background: #10b981; }
.kos-wf-bar[data-band="at-risk"] > span { background: #d97706; }
.kos-wf-bar[data-band="needs-work"] > span { background: #dc2626; }
.kos-wf-hint { font-size: 13.5px; color: var(--kos-muted); margin: 0; }
.kos-wf-cta { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--kos-line-2); }
.kos-wf-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--kos-blue-dark); margin: 0 0 4px; }
.kos-wf-text { font-size: 14px; color: var(--kos-ink-2); margin: 0 0 12px; }
.kos-wf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kos-wf-actions .kos-btn { padding: 9px 16px; font-size: 13.5px; }
.kos-wf-reset { margin-top: 10px; background: none; border: none; color: var(--kos-muted-2); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 0; font-family: inherit; }

/* Interactive checklist */
.kos-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.kos-checklist-item { position: relative; padding: 10px 12px; border-radius: 9px; color: var(--kos-ink-2); font-size: 15px; display: flex; align-items: flex-start; gap: 10px; }
.kos-checklist-item::before { content: "✓"; color: var(--kos-seo); font-weight: 700; }
.kos-checklist-item.kos-ix::before { display: none; }
.kos-checklist-item.kos-ix { cursor: default; transition: background .12s; }
.kos-ix-box { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--kos-seo); cursor: pointer; flex-shrink: 0; }
.kos-checklist-item.is-done { background: #f0faf4; color: var(--kos-muted); text-decoration: line-through; text-decoration-color: rgba(11,122,67,.35); }

/* Interactive audit */
.kos-audit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.kos-audit-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--kos-line-2); border-radius: 9px; font-size: 14.5px; color: var(--kos-ink-2); }
.kos-audit-item::before { content: "✓"; color: var(--kos-seo); font-weight: 700; }
.kos-audit-item.kos-ix::before { display: none; }
.kos-audit-item[data-v="pass"] { border-color: rgba(16,185,129,.4); background: #f0faf4; }
.kos-audit-item[data-v="partial"] { border-color: rgba(217,119,6,.4); background: #fff8ee; }
.kos-audit-item[data-v="fail"] { border-color: rgba(220,38,38,.35); background: #fdf1f1; }
.kos-audit-text { flex: 1; }
.kos-audit-ctrl { display: inline-flex; gap: 4px; flex-shrink: 0; }
.kos-audit-btn { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--kos-line); background: var(--kos-paper); color: var(--kos-muted); cursor: pointer; font-family: inherit; }
.kos-audit-btn:hover { border-color: var(--kos-muted-2); }
.kos-audit-pass.is-sel { background: #10b981; border-color: #10b981; color: #fff; }
.kos-audit-partial.is-sel { background: #d97706; border-color: #d97706; color: #fff; }
.kos-audit-fail.is-sel { background: #dc2626; border-color: #dc2626; color: #fff; }

/* Interactive decision rows */
.kos-guidance-row.kos-ix { cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.kos-guidance-row.kos-ix:hover { border-color: var(--kos-seo); }
.kos-guidance-row.is-picked { border-color: var(--kos-seo); box-shadow: 0 0 0 2px rgba(5,150,105,.25); }
.kos-guidance-row.is-picked .kos-guidance-then { background: #f0faf4; }
.kos-decision-hint { margin: 0 0 12px; }

/* AI-retrieval summary block (GEO / LLM optimisation) */
.kos-ai-summary { background: var(--kos-paper-2); border: 1px solid var(--kos-line-2); border-left: 4px solid var(--kos-blue); border-radius: var(--kos-radius); padding: 18px 20px; margin: 0 0 34px; }
.kos-ai-summary-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.kos-ai-summary-head .kos-ai-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kos-blue-dark); background: var(--kos-blue-tint); padding: 2px 8px; border-radius: 6px; }
.kos-ai-summary p.kos-ai-answer { font-size: 16px; color: var(--kos-ink); margin: 0 0 12px; font-weight: 500; }
.kos-ai-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 20px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--kos-line-2); }
.kos-ai-fact { font-size: 13px; }
.kos-ai-fact dt { color: var(--kos-muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.kos-ai-fact dd { margin: 1px 0 0; color: var(--kos-ink-2); font-weight: 600; }
.kos-ai-entities { margin-top: 10px; font-size: 13px; color: var(--kos-muted); }
.kos-ai-entities a { color: var(--kos-blue-dark); text-decoration: none; }
.kos-ai-entities a:hover { text-decoration: underline; }

/* Commercial value-ladder journey */
.kos-journey { margin: 40px 0; padding: 24px; background: var(--kos-paper-2); border: 1px solid var(--kos-line-2); border-radius: 18px; }
.kos-journey h2 { font-size: 17px; margin: 0 0 4px; }
.kos-journey-sub { font-size: 13.5px; color: var(--kos-muted); margin: 0 0 16px; }
.kos-journey-steps { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; list-style: none; padding: 0; margin: 0; }
.kos-journey-step { flex: 1; min-width: 92px; background: var(--kos-paper); border: 1px solid var(--kos-line); border-radius: 11px; padding: 12px 10px; text-align: center; text-decoration: none; position: relative; }
.kos-journey-step.is-here { border-color: var(--kos-blue); box-shadow: 0 0 0 2px var(--kos-blue-tint); }
.kos-journey-step.is-cta { background: var(--kos-blue); border-color: var(--kos-blue); }
.kos-journey-num { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kos-muted-2); }
.kos-journey-label { display: block; font-size: 13px; font-weight: 700; color: var(--kos-ink); margin-top: 2px; }
.kos-journey-step.is-cta .kos-journey-label, .kos-journey-step.is-cta .kos-journey-num { color: #fff; }
.kos-journey-step.is-here .kos-journey-label { color: var(--kos-blue-dark); }

/* Case study proof structure */
.kos-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 10px; }
.kos-metric-card { background: var(--kos-paper-2); border: 1px solid var(--kos-line-2); border-radius: 10px; padding: 12px 14px; }
.kos-metric-card dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kos-muted-2); }
.kos-metric-card dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--kos-ink); }
.kos-metric-card.is-result dd { color: #0b7a43; }

/* ── Prompt-5: Intelligence engine, reasoning flow, benchmarks, dashboard ── */
.kos-iq-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.kos-iq-chips-label { font-size: 13px; color: var(--kos-muted-2); }
.kos-iq-chips a { font-size: 13px; font-weight: 600; color: var(--kos-blue-dark); text-decoration: none; background: var(--kos-blue-tint); border: 1px solid transparent; border-radius: 999px; padding: 6px 13px; }
.kos-iq-chips a:hover { background: #dbe7ff; }
.kos-iresult { margin-top: 8px; }
.kos-isub { color: var(--kos-muted); font-size: 15px; margin: 8px 0 16px; }

.kos-idiagnosis { padding: 22px 0 8px; border-top: 1px solid var(--kos-line); margin-top: 8px; }
.kos-ieyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--kos-amber); margin: 0 0 8px; }
.kos-idiagnosis h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.kos-ilead { font-size: 17px; color: var(--kos-ink-2); margin: 0; max-width: 66ch; }

/* Auto-generated reasoning flow diagram (visual intelligence, W4) */
.kos-reason-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 26px 0 30px; padding: 20px; background: var(--kos-paper-2); border: 1px solid var(--kos-line-2); border-radius: 18px; }
.kos-reason-node { display: flex; flex-direction: column; gap: 3px; min-width: 130px; flex: 1; text-decoration: none; background: var(--kos-paper); border: 1px solid var(--kos-line); border-radius: 11px; padding: 12px 13px; border-top: 3px solid var(--kos-accent); }
.kos-reason-node[data-kind="problem"] { --kos-accent: #dc2626; }
.kos-reason-node[data-kind="pattern"] { --kos-accent: var(--kos-amber); }
.kos-reason-node[data-kind="decision"] { --kos-accent: var(--kos-seo); }
.kos-reason-node[data-kind="capability"] { --kos-accent: var(--kos-geo); }
.kos-reason-node[data-kind="framework"] { --kos-accent: var(--kos-violet); }
.kos-reason-node[data-kind="checklist"] { --kos-accent: var(--kos-seo); }
.kos-reason-node[data-kind="audit"] { --kos-accent: var(--kos-blue); }
.kos-reason-node:hover { box-shadow: var(--kos-shadow); transform: translateY(-2px); transition: transform .15s, box-shadow .15s; }
.kos-reason-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--kos-muted-2); }
.kos-reason-title { font-size: 14px; font-weight: 700; color: var(--kos-ink); line-height: 1.25; }
.kos-reason-arrow { align-self: center; color: var(--kos-muted-2); font-size: 18px; }

.kos-iactions { display: flex; flex-direction: column; gap: 26px; }
.kos-iact-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kos-muted-2); font-weight: 700; margin: 0 0 12px; }

/* Benchmark object hero */
.kos-benchmark-hero { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: linear-gradient(120deg, #ecfdf5, #eaf1ff); border-radius: 16px; margin-bottom: 18px; }
.kos-benchmark-value { font-size: clamp(40px, 7vw, 64px); font-weight: 800; letter-spacing: -0.03em; color: var(--kos-ink); line-height: 1; }
.kos-benchmark-label { font-size: 16px; color: var(--kos-ink-2); max-width: 52ch; }

/* Dashboard */
.kos-dash-section { margin: 40px 0; }
.kos-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kos-dash-tile { display: flex; flex-direction: column; gap: 5px; text-decoration: none; background: var(--kos-paper); border: 1px solid var(--kos-line); border-radius: var(--kos-radius); padding: 18px; transition: transform .15s, box-shadow .15s; }
.kos-dash-tile:hover { transform: translateY(-2px); box-shadow: var(--kos-shadow); }
.kos-dash-value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--kos-geo); }
.kos-dash-label { font-size: 13.5px; color: var(--kos-ink-2); line-height: 1.4; }
.kos-dash-sub { font-size: 12px; color: var(--kos-muted-2); }
.kos-dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.kos-coverage { display: flex; flex-direction: column; gap: 6px; }
.kos-coverage-row { display: grid; grid-template-columns: 190px 1fr 44px; align-items: center; gap: 14px; text-decoration: none; padding: 8px 10px; border-radius: 9px; }
.kos-coverage-row:hover { background: var(--kos-paper-2); }
.kos-coverage-name { font-size: 14px; font-weight: 600; color: var(--kos-ink-2); }
.kos-coverage-bar { height: 10px; border-radius: 999px; background: var(--kos-paper-3); overflow: hidden; }
.kos-coverage-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--kos-geo), var(--kos-blue)); }
.kos-coverage-count { font-size: 13px; font-weight: 700; color: var(--kos-muted); text-align: right; }
.kos-risk-list { display: flex; flex-direction: column; gap: 8px; }
.kos-risk-item { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 12px 14px; border: 1px solid var(--kos-line-2); border-radius: 11px; }
.kos-risk-item:hover { border-color: var(--kos-line); box-shadow: var(--kos-shadow); }
.kos-risk-title { font-size: 14.5px; font-weight: 600; color: var(--kos-ink); }
@media (max-width: 720px) { .kos-dash-2col { grid-template-columns: 1fr; gap: 24px; } .kos-coverage-row { grid-template-columns: 120px 1fr 36px; } }

/* ── Prompt-6: confidence-aware reasoning + audit recommendations ── */
.kos-conf-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.kos-conf-meter { width: 140px; height: 8px; border-radius: 999px; background: var(--kos-paper-3); overflow: hidden; }
.kos-conf-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--kos-blue), var(--kos-geo)); }
.kos-conf-num { font-size: 13px; font-weight: 700; color: var(--kos-ink-2); }
.kos-audit-recs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kos-line-2); }
.kos-audit-recs-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--kos-blue-dark); margin: 0 0 8px; }
.kos-audit-recs a { display: inline-flex; gap: 6px; font-size: 13px; font-weight: 600; color: var(--kos-blue-dark); text-decoration: none; margin-right: 14px; }
.kos-audit-recs a:hover { text-decoration: underline; }