/* Agentic Security hub: start path, map, Brandefense strip. Loaded only on the Agentic Security list page. */
.dc-kh .ag-start, .dc-kh .ag-map, .dc-kh .ag-help { padding: clamp(48px, 6.5vw, 88px) 0; }
.dc-kh .ag-start { background: #fff; }
.dc-kh .ag-start .dc-wrap, .dc-kh .ag-map .dc-wrap, .dc-kh .ag-help .dc-wrap { display: flex; flex-direction: column; gap: 16px; }
.dc-kh .ag-start__head { display: flex; flex-direction: column; gap: 14px; max-width: 46em; }

/* path */
.dc-kh .ag-path { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); counter-reset: none; }
.dc-kh .ag-path li { border-top: 1px solid var(--dc-line-2); }
.dc-kh .ag-path a { display: flex; gap: 18px; align-items: baseline; padding: 16px 4px; color: var(--dc-ink); text-decoration: none; transition: color .2s; }
.dc-kh .ag-path__n { flex: 0 0 auto; font-family: var(--dc-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--dc-coral); min-width: 2ch; }
.dc-kh .ag-path__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dc-kh .ag-path__t b { font-size: 17px; font-weight: 600; line-height: 1.3; }
.dc-kh .ag-path__t span { font-size: 14.5px; line-height: 1.5; color: var(--dc-ink-2); }
.dc-kh .ag-path a:hover .ag-path__t b { color: var(--dc-coral); }

/* map: night band */
.dc-kh .ag-map { background: var(--dc-night); color: #fff; }
.dc-kh .ag-map .dc-h2 { color: #fff; }
.dc-kh .ag-map .dc-h2 span { color: var(--dc-on-dark); }
.dc-kh .ag-map__lead { font-size: 17px; line-height: 1.55; color: var(--dc-on-dark); max-width: 38em; }
.dc-kh .ag-map__grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dc-kh .ag-map__grid a { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 12px; background: #0b1230; box-shadow: inset 0 0 0 1px rgb(166 176 210 / .16); color: #fff; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.dc-kh .ag-map__grid a:hover { box-shadow: inset 0 0 0 1px var(--dc-coral); transform: translateY(-2px); }
.dc-kh .ag-map__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-kh .ag-map__top .dc-ic { font-size: 24px; color: var(--dc-coral); }
.dc-kh .ag-map__top small { font-family: var(--dc-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-on-dark-2); }
.dc-kh .ag-map__grid b { font-family: var(--dc-display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.dc-kh .ag-map__line { font-size: 14.5px; line-height: 1.5; color: var(--dc-on-dark); flex: 1; }
.dc-kh .ag-map__go { display: inline-flex; align-items: center; gap: 6px; font-family: var(--dc-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.dc-kh .ag-map__go .dc-ic { font-size: 14px; color: var(--dc-coral); }

/* list sits right after the map: no extra top tint needed, keep spacing */
.dc-kh--agentic .dc-list { padding-top: clamp(24px, 3vw, 40px); }

/* Brandefense strip */
.dc-kh .ag-help { background: #fff; }
.dc-kh .ag-help__grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dc-kh .ag-help__grid a { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 12px; background: var(--dc-paper); box-shadow: inset 0 0 0 1px rgb(0 3 19 / .12); color: var(--dc-ink); text-decoration: none; transition: box-shadow .2s; }
.dc-kh .ag-help__grid a:hover { box-shadow: inset 0 0 0 1px var(--dc-ink); }
.dc-kh .ag-help__grid b { font-family: var(--dc-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.dc-kh .ag-help__grid span { font-size: 14.5px; line-height: 1.55; color: var(--dc-ink-2); flex: 1; }
.dc-kh .ag-help__grid em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-family: var(--dc-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-ink); }
.dc-kh .ag-help__grid em .dc-ic { font-size: 14px; color: var(--dc-coral); }

@media (max-width: 1100px) {
  .dc-kh .ag-map__grid, .dc-kh .ag-help__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dc-kh .ag-path { grid-template-columns: 1fr; }
  .dc-kh .ag-map__grid, .dc-kh .ag-help__grid { grid-template-columns: 1fr; }
}