/* Knowledge Hub front door — three doors (options B and C).
   Option B was chosen on 27 September 2026.
   Separate from `.khh2-door` on purpose: those cards carry a stretched anchor
   over the whole card, which would swallow the industry picker here. */

.khh3-k{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--kh-mono,ui-monospace,monospace);font-size:11px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.13em;text-transform:uppercase;color:var(--lra-color-primary)}
.khh3-new{font-family:var(--lra-font-primary);font-size:10px;letter-spacing:.06em;color:#8a4b00;background:#fff1dc;border:1px solid #f5c98a;border-radius:999px;padding:1px 8px}
.kh-page .khh3-t{margin:0;max-width:none;font-family:var(--lra-font-secondary);font-size:clamp(20px,1.8vw,24px);font-weight:var(--lra-font-weight-semibold);line-height:1.22;color:var(--lra-color-primary)}
.khh3-p{margin:0;font-size:var(--lra-font-size-md);line-height:1.58;color:var(--lra-color-gray-800)}
.khh3-meta{margin:0;font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
.kh-page .khh3-go{display:inline-flex;align-items:center;gap:8px;font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);text-decoration:none}
.kh-page .khh3-go:hover{color:var(--lra-color-teal)}
.khh3-go i{font-style:normal;transition:transform .2s}
.khh3-go:hover i{transform:translateX(3px)}

.kh-page .khh3-try{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--lra-color-gray-300);border-inline-start:3px solid var(--kh-teal-ink,#0b6f80);border-radius:0 6px 6px 0;background:var(--lra-color-white);text-decoration:none;transition:var(--lra-transition-fast)}
.kh-page .khh3-try:hover{border-color:var(--lra-color-teal)}
.khh3-try span{font-family:var(--kh-mono,ui-monospace,monospace);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lra-color-gray-600)}
.khh3-try b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);line-height:1.3;color:var(--lra-color-primary)}
.khh3-try em{font-style:normal;font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}

/* Industry combobox. Without JS it is a <details> list of links; the script
   adds .is-on, keeps it open and turns the list into a floating popover. */
.khh3-combo{position:relative;margin:2px 0 0}
.khh3-combo__l{list-style:none;cursor:pointer;margin-bottom:6px;font-size:11px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--lra-color-gray-600)}
.khh3-combo__l::-webkit-details-marker{display:none}
.khh3-combo.is-on .khh3-combo__l{cursor:default;pointer-events:none}
.khh3-combo:not(.is-on) .khh3-combo__field{display:none}
.khh3-combo__field{position:relative;display:flex;align-items:center;height:48px;border:1px solid var(--lra-color-gray-400);border-radius:10px;background:var(--lra-color-white);transition:border-color .15s,box-shadow .15s}
.khh3-combo__field:hover{border-color:var(--lra-color-gray-600)}
.khh3-combo__field:focus-within{border-color:var(--lra-color-primary);box-shadow:0 0 0 3px rgba(13,48,104,.12)}
.khh3-combo__field input{flex:1;min-width:0;height:100%;padding:0 38px 0 40px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:var(--lra-font-size-md);color:var(--lra-color-gray-900);outline:0}
.khh3-combo__field input::placeholder{color:var(--lra-color-gray-600)}
.khh3-combo__icon,.khh3-combo__chev{position:absolute;top:50%;width:16px;height:16px;transform:translateY(-50%);pointer-events:none;background:var(--lra-color-gray-600);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.khh3-combo__icon{inset-inline-start:14px;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.khh3-combo__chev{inset-inline-end:14px;width:14px;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");transition:transform .2s}
.khh3-combo.is-open .khh3-combo__chev{transform:translateY(-50%) rotate(180deg)}
.khh3-combo__pop{max-height:340px;overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--lra-color-gray-300);border-radius:12px;background:var(--lra-color-white)}
.khh3-combo.is-on .khh3-combo__pop{position:absolute;z-index:30;top:calc(100% + 6px);inset-inline:0;min-width:300px;box-shadow:0 18px 44px rgba(13,48,104,.18),0 2px 6px rgba(13,48,104,.08);opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s .16s}
.khh3-combo.is-open .khh3-combo__pop{opacity:1;transform:none;visibility:visible;transition:opacity .16s ease-out,transform .16s ease-out}
@media (prefers-reduced-motion:reduce){.khh3-combo__pop,.khh3-combo__chev{transition:none!important}}
.khh3-combo__sec{position:sticky;top:-6px;z-index:1;margin:0;padding:10px 10px 6px;background:var(--lra-color-white);font-family:var(--kh-mono,ui-monospace,monospace);font-size:10px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.12em;text-transform:uppercase;color:var(--kh-teal-ink,#0b6f80)}
.kh-page .khh3-combo__opt{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--lra-color-gray-900)}
.khh3-combo__opt img{width:36px;height:36px;border-radius:7px;object-fit:cover;background:var(--lra-color-gray-200)}
.khh3-combo__opt span{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);line-height:1.3}
.khh3-combo__opt em{font-style:normal;font-size:11px;font-variant-numeric:tabular-nums;color:var(--lra-color-gray-600);white-space:nowrap}
.kh-page .khh3-combo__opt:hover,.kh-page .khh3-combo__opt.is-active{background:#f1f5fb;color:var(--lra-color-primary)}
.khh3-combo__opt.is-active{box-shadow:inset 3px 0 0 var(--lra-color-primary)}
[dir=rtl] .khh3-combo__opt.is-active{box-shadow:inset -3px 0 0 var(--lra-color-primary)}
.khh3-combo__opt mark{background:#fff1c7;color:inherit;border-radius:2px}
.khh3-combo__grp[hidden],.khh3-combo__opt[hidden]{display:none}
.khh3-combo__none{margin:0;padding:18px 12px;font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700);text-align:center}

/* ── Option B · the reporting path ─────────────────────────────────────── */
.khh3-path{list-style:none;counter-reset:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lra-spacing-lg);margin:var(--lra-spacing-lg) 0 0;padding:0}
.khh3-door{position:relative;display:flex;flex-direction:column;gap:var(--lra-spacing-sm);padding:var(--lra-spacing-xl);background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-top:4px solid var(--lra-color-primary);border-radius:var(--lra-border-radius-md);box-shadow:0 14px 36px rgba(13,48,104,.07)}
.khh3-door--nav{border-top-color:#d98a1c;background:linear-gradient(180deg,#fff8ee 0%,#fff 34%)}
.khh3-door--guides{border-top-color:var(--lra-color-teal);background:linear-gradient(180deg,#f2f9fa 0%,#fff 34%)}
.khh3-door--library{background:linear-gradient(180deg,#f2f6fc 0%,#fff 34%)}
.khh3-door .khh3-meta{margin-top:auto;padding-top:var(--lra-spacing-sm);border-top:1px solid var(--lra-color-gray-200)}
.khh3-step{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--lra-color-gray-700)}
.khh3-step b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lra-color-primary);color:var(--lra-color-white);font-size:13px;letter-spacing:0}
.khh3-door--nav .khh3-step b{background:#b86e0a}
.khh3-door--guides .khh3-step b{background:var(--kh-teal-ink,#0b6f80)}
.khh3-door:not(:last-child)::after{content:"→";position:absolute;top:34px;inset-inline-end:calc(-1 * var(--lra-spacing-lg) + 2px);width:calc(var(--lra-spacing-lg) - 4px);text-align:center;font-size:20px;color:var(--lra-color-gray-500);z-index:1}
[dir=rtl] .khh3-door:not(:last-child)::after{content:"←"}
@media (max-width:960px){.khh3-path{grid-template-columns:1fr}.khh3-door:not(:last-child)::after{content:"↓";top:auto;bottom:calc(-1 * var(--lra-spacing-lg) + 2px);inset-inline-end:auto;left:50%;transform:translateX(-50%);width:auto}}


/* ── Doors as doors: the whole card is the link, the CTA is a real button.
   The card reads, then it opens: a full-width button carries the destination,
   a slow light sweep draws the eye to it, and the card itself lifts on hover.
   Inner interactive bits (the industry picker, the "try" card) stay above the
   stretched link so they keep their own targets. ────────────────────────── */
.khh3-door{--door-sweep-delay:1.1s;--door-ink:var(--lra-color-primary);--door-ink-dark:var(--lra-color-primary-dark,#091f45);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.khh3-door--nav{--door-ink:#b86e0a;--door-ink-dark:#8f5407}
.khh3-door--guides{--door-sweep-delay:2.5s;--door-ink:var(--kh-teal-ink,#0b6f80);--door-ink-dark:#085563}
/* Each 1.2-second sweep finishes before the next door starts. */
.khh3-door--library{--door-sweep-delay:3.9s}
.khh3-door:hover,.khh3-door:focus-within{transform:translateY(-4px);box-shadow:0 22px 48px rgba(13,48,104,.14);border-color:var(--door-ink)}
.khh3-door .khh3-combo,.khh3-door .khh3-try{position:relative;z-index:2}
.kh-page .khh3-go{position:static;display:flex;justify-content:center;align-items:center;gap:10px;margin-top:var(--lra-spacing-sm);min-height:50px;padding:12px 20px;border-radius:10px;background:var(--door-ink);color:var(--lra-color-white);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-bold);letter-spacing:.01em;text-decoration:none;overflow:hidden;box-shadow:0 8px 20px rgba(13,48,104,.16);transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.kh-page .khh3-go::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0%,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%,transparent 100%);background-size:260% 100%;background-position:120% 0;animation:khh3-sweep 6s ease-in-out var(--door-sweep-delay) infinite;border-radius:inherit}
.kh-page .khh3-go::after{content:"";position:absolute;inset:0;z-index:1}
.kh-page .khh3-go>*{position:relative;z-index:2}
.kh-page .khh3-go:hover,.khh3-door:hover .khh3-go{background:var(--door-ink-dark);color:var(--lra-color-white);box-shadow:0 12px 26px rgba(13,48,104,.24)}
.kh-page .khh3-go:focus-visible{outline:3px solid var(--lra-color-accent,#62B5E1);outline-offset:3px}
.khh3-go i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);font-size:15px;transition:transform .2s,background-color .2s}
.khh3-door:hover .khh3-go i{transform:translateX(4px);background:rgba(255,255,255,.28)}
[dir=rtl] .khh3-door:hover .khh3-go i{transform:translateX(-4px)}
.khh3-door--nav .khh3-go,.khh3-door--guides .khh3-go{box-shadow:0 8px 20px rgba(0,0,0,.12)}
@keyframes khh3-sweep{0%{background-position:120% 0}20%{background-position:-120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.kh-page .khh3-go::before{animation:none}.khh3-door,.kh-page .khh3-go,.khh3-go i{transition:none}.khh3-door:hover{transform:none}}
@media (hover:none){.khh3-door:hover{transform:none}}
