/* ============================================================================
   Knowledge Hub landing pages — LAYER 3, loaded after knowledge-card.css.
   London Reporting Academy
   ----------------------------------------------------------------------------
   Two pages share this file: the hub front door (`khh-`) and the Disclosure
   Guides catalogue (`khg-`, at the end). They are the same tier seen twice —
   orientation, then the catalogue itself — so they share a stylesheet rather
   than drifting into two visual systems a reader has to re-learn one click
   apart.

   The `khh-` half is ported from design_handoff_knowledge_card/hub2-layer.css
   (LRA-3.zip). The guide tier's stylesheet supplies the tokens (declared on
   .kh-page), the type scale and the colour grammar. This file is only the
   blocks that exist on those two pages.

   Two things the front door does differently from an inner page:

   *No rail.* An inner page carries a sticky sidebar because the reader is deep
   in one document and needs to know where they are. The front door has no
   "where you are" to answer — it is a full-width sequence of product scenes,
   so .kh-shell alone carries the width.

   *Colour encodes the kind of block.* Section hue comes from the kh-fam--*
   class the template already puts on each kicker, so it survives a block
   moving. Three tinted bands break the column into readable stretches — blue
   for the teaching figure, grey for the guides, teal for the conversion
   ladder — and cards inside a band stay white so the band reads as a
   container.

   Two departures from the handoff, both forced by what this repo serves:

   1. SELECTORS THAT SET `color` ON A LINK ARE SCOPED. knowledge-card.css
      carries `.kh-page a{color:…}` at (0,1,1), which outranks a bare
      `.kh-btn` at (0,1,0) — a hub button would draw navy on navy. Anything
      that colours an anchor or an h2 is written to beat it. (Rules that merely
      tie, like `.khh-fw b`, are left alone: this file loads second.)

   2. `.kh-libstats` STAYS HERE. It is shared with the card tier but defined in
      disclosure-card-layer.css, which this page does not load. When both
      layers next move, lift the pair into knowledge-card.css — it belongs to
      both tiers, not to either one.
   ========================================================================== */

.khh{background:var(--lra-color-white)}
.khh-body{display:grid;gap:var(--lra-spacing-4xl);padding-block:var(--lra-spacing-2xl) var(--lra-spacing-4xl)}
.khh-sec{scroll-margin-top:120px}
.khh-sec>.kh-h2{max-width:24ch}
.khh-sec>.kh-lead{max-width:74ch}
/* the closing "see everything" line each section can end on */
.khh-sec>.kh-lead:last-child a{font-weight:var(--lra-font-weight-semibold);text-decoration:none}
.khh-sec>.kh-lead:last-child a:hover{text-decoration:underline}

/* ── Hub button — the Hub's own control ───────────────────────────────────
   Scoped: `.kh-page a` is more specific than a bare `.kh-btn`. */
.kh-page .kh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border:1px solid var(--lra-color-primary);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-primary);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-white);text-decoration:none;cursor:pointer;transition:var(--lra-transition-fast);white-space:nowrap}
.kh-page .kh-btn:hover{background:var(--lra-color-primary-light);border-color:var(--lra-color-primary-light);color:var(--lra-color-white)}
.kh-page .kh-btn--ghost{background:transparent;color:var(--lra-color-primary)}
.kh-page .kh-btn--ghost:hover{background:var(--lra-color-primary);color:var(--lra-color-white)}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.khh-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:var(--lra-spacing-4xl);align-items:start;padding-top:var(--lra-spacing-xl)}
.khh-hero__cta{display:flex;flex-wrap:wrap;gap:var(--lra-spacing-sm);margin-top:var(--lra-spacing-xl)}

/* The search panel takes the passport's idiom — white card, 3px teal top
   border — so the page's primary action reads as the trusted surface rather
   than as an advertisement. */
.khh-ask{background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-top:3px solid var(--lra-color-teal);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-lg)}
.khh-ask__k{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--lra-color-primary)}
.khh-ask__form{display:grid;gap:var(--lra-spacing-sm);margin-top:var(--lra-spacing-md)}
.khh-ask__form input{height:48px;padding:0 var(--lra-spacing-md);border:1px solid var(--lra-color-gray-400);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-white);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-md);color:var(--lra-color-gray-900)}
.khh-ask__form input::placeholder{color:var(--lra-color-gray-700)}
.khh-ask__form input:focus{outline:none;border-color:var(--lra-color-accent);box-shadow:0 0 0 3px rgba(98,181,225,.22)}
.kh-page .khh-ask__form .kh-btn{height:48px;width:100%}
.khh-ask__try{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
.khh-ask__try a{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);color:var(--lra-color-primary);text-decoration:none;border:1px solid var(--lra-color-gray-300);border-radius:999px;padding:5px 12px;transition:var(--lra-transition-fast)}
.khh-ask__try a:hover{border-color:var(--lra-color-teal);color:var(--lra-color-teal)}
.khh-ask__note{margin-top:var(--lra-spacing-md);padding-top:var(--lra-spacing-md);border-top:1px solid var(--lra-color-gray-200);font-size:var(--lra-font-size-sm);line-height:1.6;color:var(--lra-color-gray-700)}
.khh-ask__intro{margin-top:8px;font-size:var(--lra-font-size-sm);line-height:1.55;color:var(--lra-color-gray-700)}
.khh-ask.kh-ask--compact{margin-top:0;background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-top:3px solid var(--lra-color-teal);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-lg)}
.khh-ask.kh-ask--compact .kh-ask__thread{max-width:none}
.khh-ask.kh-ask--compact .kh-ask__b--you{background:var(--lra-color-primary);border-color:var(--lra-color-primary);color:var(--lra-color-white)}
.khh-ask.kh-ask--compact .kh-ask__form{display:grid;max-width:none;margin-top:var(--lra-spacing-md);padding:0;border:0;background:transparent}
.khh-ask.kh-ask--compact .kh-ask__form textarea{display:block;width:100%;min-height:54px;padding:15px var(--lra-spacing-md);overflow-y:hidden;border:1px solid var(--lra-color-gray-400);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-white);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);line-height:1.35;color:var(--lra-color-gray-900)}
.khh-ask.kh-ask--compact .kh-ask__form textarea::placeholder{color:var(--lra-color-gray-600);opacity:1}
.khh-ask.kh-ask--compact .kh-ask__form textarea:focus{outline:none;border-color:var(--lra-color-accent);box-shadow:0 0 0 3px rgba(98,181,225,.22)}
.khh-ask.kh-ask--compact .kh-ask__send{width:100%;height:48px;border-radius:var(--lra-border-radius-sm);background:var(--lra-color-primary);color:var(--lra-color-white);font-size:var(--lra-font-size-base)}
.khh-ask.kh-ask--compact .kh-ask__send:hover{background:var(--lra-color-primary-light)}
.khh-ask__send-icon{display:none}

/* Once a question exists, the hero assistant stops behaving like a sidebar.
   It moves to a full-width second grid row, so long answers read at article
   measure instead of stretching a narrow card down the side of the hero. */
.khh-hero__grid--ask-active{row-gap:var(--lra-spacing-xl)}
.khh-ask.kh-ask--compact.kh-ask--active{grid-column:1/-1;display:grid;grid-template-columns:minmax(230px,.36fr) minmax(0,1fr);grid-template-rows:auto auto;gap:var(--lra-spacing-md) var(--lra-spacing-xl);padding:var(--lra-spacing-xl);scroll-margin-top:120px;box-shadow:0 18px 42px rgba(13,48,104,.1)}
.khh-ask.kh-ask--compact.kh-ask--active .khh-ask__summary{grid-column:1;grid-row:1;align-self:start}
.khh-ask.kh-ask--compact.kh-ask--active .khh-ask__intro{max-width:34ch}
.khh-ask.kh-ask--compact.kh-ask--active .kh-ask__thread{grid-column:2;grid-row:1;align-self:start;margin:0;max-width:none}
.khh-ask.kh-ask--compact.kh-ask--active .kh-ask__b--you{max-width:72%}
.khh-ask.kh-ask--compact.kh-ask--active .kh-ask__b--ai{max-width:none}
.khh-ask.kh-ask--compact.kh-ask--active .kh-ask__form{grid-column:2;grid-row:2;display:flex;align-items:flex-end;gap:8px;margin-top:var(--lra-spacing-md)}
.khh-ask.kh-ask--compact.kh-ask--active .kh-ask__form textarea{flex:1;min-width:0}
.khh-ask.kh-ask--compact.kh-ask--active .kh-ask__send{flex:none;width:54px;height:54px;font-size:var(--lra-font-size-lg)}
.khh-ask.kh-ask--compact.kh-ask--active .khh-ask__send-label{display:none}
.khh-ask.kh-ask--compact.kh-ask--active .khh-ask__send-icon{display:inline}
.khh-ask.kh-ask--compact.kh-ask--active .khh-ask__note{grid-column:1;grid-row:2;align-self:end;margin-top:var(--lra-spacing-md);padding-top:var(--lra-spacing-md)}

/* Trust strip — the claim the rest of the page has to keep. All four dots are
   teal: gold is reserved for the assistant panel. */
.khh-trust{list-style:none;margin:var(--lra-spacing-xl) 0 0;padding:var(--lra-spacing-md) 0 0;display:flex;flex-wrap:wrap;gap:var(--lra-spacing-sm) var(--lra-spacing-xl);border-top:1px solid var(--lra-color-gray-300)}
.khh-trust li{display:flex;align-items:center;gap:8px;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);color:var(--lra-color-gray-800)}
.khh-trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lra-color-teal);flex:none}

/* ── Two-plane workspace model ───────────────────────────────────────── */
.khh-counsel{--v-gold:#e8c766;display:grid;grid-template-columns:minmax(280px,.7fr) minmax(520px,1.3fr);gap:var(--lra-spacing-2xl);align-items:start;padding:var(--lra-spacing-2xl);background:linear-gradient(135deg,#eef7fb 0%,#ffffff 58%,#f6f8fb 100%);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-md);box-shadow:0 18px 44px rgba(13,48,104,.08)}
.khh-counsel__copy .kh-h2{max-width:18ch}
.khh-counsel__copy .kh-lead{max-width:58ch;margin-top:var(--lra-spacing-md)}
.khh-counsel__rails{list-style:none;margin:var(--lra-spacing-lg) 0 0;padding:0;display:grid;gap:10px}
.khh-counsel__rails li{display:grid;gap:4px;padding:var(--lra-spacing-md);background:rgba(255,255,255,.76);border:1px solid var(--lra-color-gray-300);border-inline-start:3px solid var(--lra-color-teal);border-radius:var(--lra-border-radius-sm)}
.kh-page .khh-counsel__rails b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary)}
.khh-counsel__rails span{font-size:var(--lra-font-size-sm);line-height:1.55;color:var(--lra-color-gray-800)}
.khh-counsel__surface{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;min-width:0;background:rgba(13,48,104,.18);border:1px solid rgba(13,48,104,.18);border-radius:var(--lra-border-radius-md);overflow:hidden}
.khh-counsel__pane{min-width:0;padding:var(--lra-spacing-lg)}
.khh-counsel__pane--chat{background:var(--lra-color-white)}
.khh-counsel__pane--evidence{background:linear-gradient(145deg,#0D3068 0%,#10243a 100%);color:var(--lra-color-white)}
.khh-counsel__pane-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--lra-spacing-sm);padding-bottom:var(--lra-spacing-sm);border-bottom:1px solid var(--lra-color-gray-200)}
.khh-counsel__pane--evidence .khh-counsel__pane-head{border-bottom-color:rgba(255,255,255,.18)}
.khh-counsel__pane-head span{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--kh-teal-ink,#0b6f80)}
.khh-counsel__pane--evidence .khh-counsel__pane-head span{color:var(--lra-color-accent-light)}
.kh-page .khh-counsel__pane-head b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-lg);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary)}
.kh-page .khh-counsel__pane--evidence .khh-counsel__pane-head b{color:var(--lra-color-white)}
.khh-counsel__question{margin-top:var(--lra-spacing-lg);font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-xl);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);line-height:1.32;color:var(--lra-color-primary)}
.khh-counsel__answer{margin:var(--lra-spacing-lg) 0 0;display:grid;gap:var(--lra-spacing-md)}
.khh-counsel__answer>div{display:grid;gap:4px;padding-inline-start:var(--lra-spacing-sm);border-inline-start:2px solid var(--lra-color-gray-300)}
.khh-counsel__answer dt{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--kh-teal-ink,#0b6f80)}
.khh-counsel__answer dd{margin:0;font-size:var(--lra-font-size-base);line-height:1.58;color:var(--lra-color-gray-800)}
.khh-counsel__search{margin-top:var(--lra-spacing-lg);padding-top:var(--lra-spacing-md);border-top:1px solid var(--lra-color-gray-200)}
.khh-counsel__search label{display:block;margin-bottom:7px;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)}
.khh-counsel__search>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.khh-counsel__search input{height:46px;min-width:0;padding:0 var(--lra-spacing-md);border:1px solid var(--lra-color-gray-400);border-radius:var(--lra-border-radius-sm);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);color:var(--lra-color-gray-900)}
.khh-counsel__search input:focus{outline:none;border-color:var(--lra-color-accent);box-shadow:0 0 0 3px rgba(98,181,225,.22)}
.kh-page .khh-counsel__search .kh-btn{height:46px;padding-inline:18px}
.khh-counsel__stack{display:grid;gap:10px;margin-top:var(--lra-spacing-lg)}
.khh-counsel__asset{display:grid;gap:5px;padding:var(--lra-spacing-md);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--lra-border-radius-sm)}
.khh-counsel__asset span{justify-self:start;font-size:10px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:4px 8px}
.khh-counsel__asset.is-live span{color:#0d2438;background:var(--v-gold)}
.khh-counsel__asset.is-next span{color:var(--lra-color-white);background:rgba(98,181,225,.28)}
.kh-page .khh-counsel__asset b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);line-height:1.28;color:var(--lra-color-white)}
.khh-counsel__asset p{font-size:var(--lra-font-size-sm);line-height:1.55;color:rgba(255,255,255,.82)}
.khh-counsel__provenance{margin-top:var(--lra-spacing-lg);padding-top:var(--lra-spacing-md);border-top:1px solid rgba(255,255,255,.22);display:grid;gap:5px}
.khh-counsel__provenance span{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.kh-page .khh-counsel__provenance a{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);line-height:1.3;color:var(--lra-color-accent-light);text-decoration:none}
.kh-page .khh-counsel__provenance a:hover{color:var(--v-gold);text-decoration:underline}
.khh-counsel__provenance em{font-style:normal;font-size:var(--lra-font-size-sm);color:rgba(255,255,255,.72)}

/* ── Three routes ─────────────────────────────────────────────────────── */
.khh-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-lg)}
.khh-route{display:grid;align-content:start;gap:6px;padding:var(--lra-spacing-lg);background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);text-decoration:none;transition:var(--lra-transition-fast)}
.khh-route:hover{border-color:var(--lra-color-teal);box-shadow:0 8px 22px rgba(13,48,104,.09);transform:translateY(-2px)}
/* `--kh-teal-ink` rather than --lra-color-teal: pure teal is 3.79:1 on white
   and fails AA at the 12px these chips are set in. The token is declared in
   knowledge-card.css; the literal stays as a fallback so this file still
   renders correctly if it is ever loaded without that layer. */
.khh-route__n{justify-self:start;font-family:var(--lra-font-primary);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;color:var(--lra-color-white);background:var(--kh-teal-ink,#0b6f80);border-radius:3px;padding:4px 8px;line-height:1.3}
.kh-page .khh-route b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-xl);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.25}
.khh-route p{font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}
.khh-route em{margin-top:4px;font-style:normal;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary)}
.khh-route:hover em{color:var(--lra-color-teal)}
@media (prefers-reduced-motion:reduce){.khh-route{transition:none}.khh-route:hover{transform:none}}

/* ── The teaching figure: anatomy of one card ─────────────────────────── */
.khh-demo{background:var(--v-blue);border:1px solid var(--v-blue-line);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-xl)}
.khh-demo__card{margin-top:var(--lra-spacing-lg);background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-top:3px solid var(--lra-color-teal);border-radius:var(--lra-border-radius-sm);overflow:hidden}
.khh-demo__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--lra-spacing-md);padding:var(--lra-spacing-md) var(--lra-spacing-lg);border-bottom:1px solid var(--lra-color-gray-200);background:var(--lra-color-gray-100)}
.khh-demo__code{font-family:var(--lra-font-primary);font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;color:var(--lra-color-white);background:var(--lra-color-primary);border-radius:3px;padding:5px 10px}
.khh-demo__title{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-lg);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary)}
/* The six stages are a hairline 3×2 grid. Borders are drawn from the END of
   the list (`nth-last-child`) so the last row loses its rule whatever the
   number of stages — counting from the start breaks the moment a stage is
   added or dropped. */
.khh-demo__steps{list-style:none;counter-reset:d;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.khh-demo__steps>li{counter-increment:d;padding:var(--lra-spacing-lg);border-inline-start:1px solid var(--lra-color-gray-200);border-bottom:1px solid var(--lra-color-gray-200)}
.khh-demo__steps>li:nth-child(3n+1){border-inline-start:0}
.khh-demo__steps>li:nth-last-child(-n+3){border-bottom:0}
.khh-demo__step{display:flex;align-items:center;gap:9px;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary)}
.khh-demo__step::before{content:"0" counter(d);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;color:var(--kh-teal-ink,#0b6f80);background:rgba(0,144,167,.13);border-radius:3px;padding:4px 7px;flex:none}
.khh-demo__steps ul{list-style:none;margin:var(--lra-spacing-sm) 0 0;padding:0;display:grid;gap:7px}
.khh-demo__steps ul li{display:grid;grid-template-columns:16px minmax(0,1fr);font-size:var(--lra-font-size-base);line-height:1.5;color:var(--lra-color-gray-800)}
.khh-demo__steps ul li::before{content:"";width:6px;height:6px;margin-top:7px;border-radius:1px;background:var(--lra-color-gray-400)}
.khh-demo__cta{display:flex;flex-wrap:wrap;gap:var(--lra-spacing-sm);padding:var(--lra-spacing-lg);border-top:1px solid var(--lra-color-gray-200);background:var(--lra-color-gray-100)}

/* ── What you can do — hairline grid ──────────────────────────────────── */
.khh-caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:var(--lra-spacing-lg);background:var(--lra-color-gray-300);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);overflow:hidden}
.khh-cap{background:var(--lra-color-white);padding:var(--lra-spacing-lg)}
.kh-page .khh-cap b{display:block;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.3}
.khh-cap p{margin-top:6px;font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}

/* ── Framework coverage ───────────────────────────────────────────────── */
.khh-fws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-lg)}
.khh-fw{display:grid;align-content:start;gap:6px;padding:var(--lra-spacing-lg);background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);text-decoration:none;transition:var(--lra-transition-fast)}
.khh-fw:hover{border-color:var(--lra-color-teal);box-shadow:0 6px 18px rgba(13,48,104,.09)}
.kh-page .khh-fw b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.3}
.khh-fw p{font-size:var(--lra-font-size-base);line-height:1.55;color:var(--lra-color-gray-800)}
.khh-fw em{justify-self:start;margin-top:4px;font-style:normal;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.04em;color:var(--lra-color-primary);background:var(--lra-color-gray-200);border-radius:3px;padding:5px 9px}

/* ── Disclosure guides: two featured, then the problem tiles ──────────── */
#answers{background:var(--v-grey);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-xl)}
.khh-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-lg)}
.khh-answer{display:grid;align-content:start;gap:7px;padding:var(--lra-spacing-lg);background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-inline-start:3px solid var(--lra-color-primary);border-radius:var(--lra-border-radius-sm);text-decoration:none;transition:var(--lra-transition-fast)}
.khh-answer:hover{border-inline-start-color:var(--lra-color-teal);box-shadow:0 8px 22px rgba(13,48,104,.09)}
.khh-answer__p{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--lra-color-gray-700);line-height:1.4}
.kh-page .khh-answer b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-xl);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.25}
.khh-answer p{font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}
.khh-answer em{justify-self:start;font-style:normal;font-size:10px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--lra-color-primary);background:rgba(98,181,225,.2);border-radius:3px;padding:4px 8px}
/* NB: the card layer also carries a `.kh-subhead`, an uppercase micro-label.
   This page does not load that file; the hub's is a Lora sub-heading. */
.kh-subhead{margin-top:var(--lra-spacing-2xl);font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-lg);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary)}
/* auto-fit, not a fixed 4: the hub lists eight problems and fills the row,
   the guides catalogue lists two. A fixed track count leaves the grid's own
   hairline ground showing as empty cells on the shorter page. */
.khh-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;margin-top:var(--lra-spacing-md);background:var(--lra-color-gray-300);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);overflow:hidden}
.khh-topic{position:relative;display:grid;align-content:start;gap:4px;padding:var(--lra-spacing-md);background:var(--lra-color-white);text-decoration:none;transition:var(--lra-transition-fast)}
.khh-topic:hover{background:var(--lra-color-gray-100)}
.kh-page .khh-topic b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-base);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.3;padding-inline-end:18px}
.khh-topic span{font-size:var(--lra-font-size-sm);line-height:1.45;color:var(--lra-color-gray-800)}
.khh-topic i{position:absolute;top:var(--lra-spacing-md);inset-inline-end:var(--lra-spacing-md);font-style:normal;font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-400);transition:var(--lra-transition-fast)}
.khh-topic:hover i{color:var(--lra-color-teal)}
/* the grey band's own hover, so a tile still separates from the ground */
#answers .khh-topic:hover{background:var(--v-grey)}

/* ── Secondary Reporting Assistant ───────────────────────────────────── */
/* The second entry point is a quiet composer rather than another hero. It
   stays compact until used, then lets the shared answer thread expand inside
   the right-hand column. */
.khh-assist{--v-gold:#e8c766;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr);gap:var(--lra-spacing-xl) var(--lra-spacing-2xl);align-items:center;padding:clamp(24px,3vw,38px);background:linear-gradient(135deg,#0D3068 0%,#10243a 100%);border-radius:var(--lra-border-radius-md)}
.khh-assist--lite.kh-ask--active{align-items:start}
.khh-assist::after{content:"";position:absolute;top:-60px;inset-inline-end:-40px;width:460px;height:320px;pointer-events:none;background:radial-gradient(closest-side,rgba(0,144,167,.5),rgba(0,144,167,0) 70%)}
.khh-assist>*{position:relative;z-index:1}
.khh-assist .kh-kicker{color:var(--lra-color-accent);--v-fam:var(--lra-color-accent)}
.khh-assist__intro>.kh-kicker{margin-top:0}
.kh-page .khh-assist .kh-h2{max-width:20ch;margin-top:var(--lra-spacing-sm);font-size:clamp(22px,2.1vw,30px);color:var(--lra-color-white)}
.khh-assist__lede{margin-top:var(--lra-spacing-sm);max-width:46ch;font-size:var(--lra-font-size-base);line-height:1.55;color:rgba(255,255,255,.76)}
.khh-assist__composer{min-width:0}
.khh-assist__composer .kh-ask__thread{max-width:none;margin:0 0 var(--lra-spacing-md)}
.khh-assist__composer .kh-ask__form{max-width:none;margin:0;padding:7px 7px 7px 15px}
.khh-assist__composer .kh-ask__form textarea{min-height:38px}
.khh-assist__composer .kh-ask__send{width:40px;height:40px;background:var(--v-gold);color:#0d2438}
.khh-assist__composer .kh-ask__send:hover{background:#f0d68a}
.khh-assist__fine{margin-top:9px;font-size:var(--lra-font-size-xs);line-height:1.45;color:rgba(255,255,255,.56)}

/* ── Why LRA ──────────────────────────────────────────────────────────── */
.khh-markers{list-style:none;margin:var(--lra-spacing-lg) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--lra-spacing-2xl)}
.khh-markers li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;font-size:var(--lra-font-size-md);line-height:1.55;color:var(--lra-color-gray-800)}
.khh-markers li::before{content:"";width:11px;height:11px;margin-top:6px;border-radius:2px;background:var(--lra-color-teal)}
/* The person behind the technical review is a claim this section makes, so it
   carries the passport's full reviewer card rather than a byline. `.kh-rev`
   and its parts come from knowledge-card.css; all this adds is the section
   rule above it and the container the passport would otherwise provide —
   including the 3px teal top edge that marks a reviewed surface across the
   whole system. */
.khh-lead{margin-top:var(--lra-spacing-xl);padding-top:var(--lra-spacing-lg);border-top:1px solid var(--lra-color-gray-300)}
.khh-lead .kh-rev{background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-top:3px solid var(--lra-color-teal);border-radius:var(--lra-border-radius-sm)}

/* ── Start free — read, then join, then bring someone in ──────────────── */
.khh-start{background:var(--v-teal);border:1px solid var(--v-teal-line);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-xl)}
.khh-steps{list-style:none;counter-reset:s;margin:var(--lra-spacing-lg) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lra-spacing-md)}
.khh-steps>li{counter-increment:s;display:grid;align-content:start;gap:5px;padding:var(--lra-spacing-lg);background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm)}
/* The number is what makes this a ladder rather than three cards. */
.khh-steps__k{display:inline-flex;align-items:center;gap:8px;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--kh-teal-ink,#0b6f80)}
.khh-steps__k::before{content:"0" counter(s);font-size:var(--lra-font-size-xs);color:var(--lra-color-white);background:var(--kh-teal-ink,#0b6f80);border-radius:3px;padding:3px 6px}
.kh-page .khh-steps>li b{margin-top:2px;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.3}
.khh-steps>li p{font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}
.kh-page .khh-steps>li a{margin-top:6px;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);text-decoration:none}
.kh-page .khh-steps>li a:hover{color:var(--lra-color-teal)}

/* ── Latest ───────────────────────────────────────────────────────────── */
/* Rows, not cards. The three children are placed explicitly: without it the
   title falls into the 110px date column. */
.khh-latest{margin-top:var(--lra-spacing-lg);border-top:1px solid var(--lra-color-gray-300)}
.khh-latest>a{display:grid;grid-template-columns:minmax(0,1fr) 110px;grid-template-rows:auto auto;gap:0 var(--lra-spacing-md);padding-block:var(--lra-spacing-md);border-bottom:1px solid var(--lra-color-gray-200);text-decoration:none}
.khh-latest>a:hover{background:var(--lra-color-gray-100)}
.khh-latest__k{grid-column:1;grid-row:1;display:block;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.07em;text-transform:uppercase;color:var(--lra-color-gray-700)}
.kh-page .khh-latest>a b{grid-column:1;grid-row:2;display:block;margin-top:5px;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.35}
.kh-page .khh-latest>a:hover b{color:var(--lra-color-teal)}
.khh-latest>a em{grid-column:2;grid-row:1/3;align-self:start;font-style:normal;font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700);text-align:end;font-variant-numeric:tabular-nums}
.khh2-latest__actions{display:flex;flex-wrap:wrap;gap:var(--lra-spacing-sm);margin-top:var(--lra-spacing-lg)}
.kh-page .khh2-latest__action{height:38px;padding-inline:16px;font-size:var(--lra-font-size-sm)}

/* ── "How this hub is built" strip ────────────────────────────────────── */
/* See departure 2 at the top of this file. */
.kh-libstats{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--lra-spacing-lg);margin-top:0;padding:14px var(--lra-spacing-md);background:var(--lra-color-gray-100);border-radius:var(--lra-border-radius-sm);font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
.kh-libstats>span:first-child{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--lra-color-gray-700)}
.kh-libstats strong{color:var(--lra-color-primary)}

/* ============================================================================
   Disclosure Guides catalogue — /en/knowledge-hub/disclosure-guides/
   ----------------------------------------------------------------------------
   The blocks the front door does not have: a filter row, the answer card, the
   subject tiles and the four-step method strip. Everything else on that page
   (hero, ask panel, trust strip, routes, topics, assistant, markers) is the
   `khh-` set above, reused unchanged — the two pages are one tier.
   ========================================================================== */

/* The switcher is two jobs, not three routes, so it takes half the width each
   and the eyebrow carries the job rather than a number. */
.khh-routes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.khh-routes--2 .khh-route__n{font-family:var(--lra-font-primary);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--lra-color-teal)}

/* ── Filters ──────────────────────────────────────────────────────────── */
/* Links, not buttons: every filtered view is a real address, so it can be
   shared and crawled. The count rides inside the chip because a filter that
   does not say how much is behind it is a guess. */
.khg-filters{display:grid;gap:10px;margin-top:var(--lra-spacing-lg);padding:14px var(--lra-spacing-md);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-md);background:var(--lra-color-gray-100)}
.khg-filters__row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.khg-filters__k{flex:0 0 84px;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--lra-color-gray-700)}
.kh-page .khg-chip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-lg);background:var(--lra-color-white);font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);color:var(--lra-color-gray-800);text-decoration:none;transition:var(--lra-transition-fast)}
.kh-page .khg-chip:hover{border-color:var(--lra-color-teal);color:var(--lra-color-primary)}
.khg-chip i{font-style:normal;font-size:var(--lra-font-size-xs);color:var(--lra-color-gray-600);font-variant-numeric:tabular-nums}
.kh-page .khg-chip.is-on{background:var(--lra-color-primary);border-color:var(--lra-color-primary);color:var(--lra-color-white)}
.khg-chip.is-on i{color:var(--lra-color-accent-light)}

/* ── Answer card ──────────────────────────────────────────────────────── */
/* The card sells the decision, not the title: question, conclusion, what it
   helps you decide, what it moves. Teal top rule so a catalogue row reads as
   the "explains" family the answers themselves belong to. */
.khg-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-lg)}
/* One column on a framework index. There the card carries the guide's actual
   conclusion, and a 2-up grid crushes that sentence into a ~35-character
   measure. The catalogue keeps two, because it is a browse-and-filter surface
   where density is the point and the rows are short. */
.khg .khg-answers{grid-template-columns:minmax(0,1fr)}
.khg-answer{display:flex;flex-direction:column;gap:10px;padding:var(--lra-spacing-lg);border:1px solid var(--lra-color-gray-300);border-inline-start:3px solid var(--lra-color-primary);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-white);transition:var(--lra-transition-base)}
/* No whole-card hover: the card is not a link. Its title and its read link are,
   and they take the teal shift — lifting the container promises a click target
   that is not there. */
.khg-answer__k{display:flex;flex-wrap:wrap;align-items:center;gap:7px;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)}
.khg-answer__k b{color:var(--lra-color-primary)}
.khg-answer__k s{text-decoration:none;color:var(--lra-color-gray-400)}
.khg-answer__k em{font-style:normal;color:var(--kh-teal-ink)}
.khg-answer__k span{font-weight:var(--lra-font-weight-regular);letter-spacing:.04em;text-transform:none;color:var(--lra-color-gray-700)}
.kh-page .khg-answer__q{font-size:var(--lra-font-size-xl);line-height:1.3;letter-spacing:var(--lra-letter-spacing-base)}
.kh-page .khg-answer__q a{color:var(--lra-color-primary);text-decoration:none}
.kh-page .khg-answer__q a:hover{color:var(--lra-color-teal)}
/* The conclusion, in the serif the answer card on the page itself uses — it is
   the same sentence, so it should look like the same sentence. Capped at 78ch
   because on a framework index this card runs the full column width, and a
   conclusion set across 1200px stops being one sentence to the eye. */
.khg-answer__a{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);line-height:1.6;max-width:78ch;color:var(--lra-color-gray-800);text-wrap:pretty}
.khg-answer__d{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding-top:var(--lra-spacing-md);border-top:1px solid var(--lra-color-gray-200);font-size:var(--lra-font-size-base);line-height:1.55;color:var(--lra-color-gray-800)}
.khg-answer__d span{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--kh-teal-ink);padding-top:3px;white-space:nowrap}
.khg-answer__aff{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.khg-answer__aff>span{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);margin-inline-end:2px}
.kh-page .khg-answer__aff a{padding:3px 9px;border:1px solid var(--lra-color-gray-300);border-radius:3px;background:var(--lra-color-white);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-medium);color:var(--lra-color-primary);text-decoration:none;transition:var(--lra-transition-fast)}
.kh-page .khg-answer__aff a:hover{border-color:var(--lra-color-teal);color:var(--lra-color-teal)}
.khg-answer__aff em{font-style:normal;font-size:var(--lra-font-size-xs);color:var(--lra-color-gray-700)}
.khg-answer__f{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--lra-spacing-md);margin-top:auto;padding-top:var(--lra-spacing-sm);border-top:1px solid var(--lra-color-gray-200);font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700);font-variant-numeric:tabular-nums}
.kh-page .khg-answer__f a{margin-inline-start:auto;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);text-decoration:none}
.kh-page .khg-answer__f a:hover{color:var(--lra-color-teal)}

/* ── Empty state ──────────────────────────────────────────────────────── */
/* Has to be more useful than an apology: the reader's question is real even
   when our answer is not written yet. */
/* Dashed in the same gray-400 as an in-preparation task card, because it is
   the same state at section scale: commissioned, not written. */
.khg-empty{margin-top:var(--lra-spacing-lg);padding:var(--lra-spacing-xl);border:1px dashed var(--lra-color-gray-400);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-gray-100)}
.kh-page .khg-empty b{display:block;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-xl);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary)}
.khg-empty p{margin-top:8px;max-width:70ch;font-size:var(--lra-font-size-base);line-height:1.65;color:var(--lra-color-gray-800)}
.khg-empty__cta{display:flex;flex-wrap:wrap;gap:var(--lra-spacing-sm);margin-top:var(--lra-spacing-lg)}

/* ── Subject tiles ────────────────────────────────────────────────────── */
.khg-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-lg)}
.khg-pillar{display:flex;flex-direction:column;gap:8px;padding:var(--lra-spacing-lg);border:1px solid var(--lra-color-gray-300);border-inline-start:3px solid var(--lra-color-primary);border-radius:var(--lra-border-radius-md);text-decoration:none;background:var(--lra-color-white);transition:var(--lra-transition-fast)}
.khg-pillar:hover{border-color:var(--lra-color-teal);border-inline-start-color:var(--lra-color-teal);background:var(--lra-color-gray-100)}
.kh-page .khg-pillar b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-xl);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.28}
.khg-pillar p{font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}
.khg-pillar em{margin-top:auto;padding-top:var(--lra-spacing-sm);font-style:normal;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary)}
.khg-pillar:hover em{color:var(--lra-color-teal)}

/* ── Coverage legend ──────────────────────────────────────────────────── */
/* Two marks, stated once, then reused: a filled teal square for published and
   a dashed outline for in preparation. The task grid and the "Coming next"
   bullets both speak this, so the state of any row is readable without going
   near its label. */
.khg-count{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
.khg-count b{display:inline-flex;align-items:center;gap:7px;font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary)}
.khg-count b::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--kh-teal-ink)}
.khg-count i{display:inline-flex;align-items:center;gap:7px;font-style:normal}
.khg-count i::before{content:"";width:9px;height:9px;border-radius:2px;border:1.5px dashed var(--lra-color-gray-500);box-sizing:border-box}

/* ── Task cards ───────────────────────────────────────────────────────── */
/* The framework index's primary navigation, and the block that replaced nine
   near-black pillar tiles. Light, because seven of nine of those tiles were
   inert and the weight of the treatment made a mostly-unwritten tier look like
   the offer. The label carries the reporting task; the pillar number stays in
   the CMS where the editors need it and the reader does not. */
.khg-tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-lg)}
.khg-task{display:flex;flex-direction:column;gap:7px;padding:var(--lra-spacing-md) var(--lra-spacing-lg);border:1px solid var(--lra-color-gray-300);border-top:3px solid var(--kh-teal-ink);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-white);text-decoration:none;transition:var(--lra-transition-base)}
.khg-task:hover{border-color:var(--lra-color-teal);border-top-color:var(--lra-color-teal);box-shadow:0 8px 22px rgba(13,48,104,.09);transform:translateY(-2px)}
.khg-task__k{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--kh-teal-ink)}
.kh-page .khg-task b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.35;text-wrap:pretty}
.khg-task__f{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px var(--lra-spacing-sm);margin-top:auto;padding-top:var(--lra-spacing-sm);border-top:1px solid var(--lra-color-gray-200)}
/* The count is a chip rather than a caption: it is the answer to "is there
   anything behind this card", which is the question the grid exists to
   settle. Navy on a teal wash — 12px type never carries the hue itself. */
.khg-task__f em{font-style:normal;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.04em;color:var(--lra-color-primary);background:rgba(0,144,167,.13);border-radius:3px;padding:4px 8px}
.khg-task__f i{font-style:normal;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary)}
.khg-task:hover .khg-task__f i{color:var(--lra-color-teal)}
/* In preparation: a dashed edge all round, which is the information — not a
   fainter version of a published card. It is still a link (it reaches the Hub
   search), so hover resolves it to a solid white card with a teal edge. */
.khg-task.is-soon{background:var(--lra-color-gray-100);border-style:dashed;border-color:var(--lra-color-gray-400);border-top:1px dashed var(--lra-color-gray-400)}
.khg-task.is-soon:hover{background:var(--lra-color-white);border-style:solid;border-color:var(--lra-color-teal);box-shadow:none;transform:none}
.kh-page .khg-task.is-soon b{color:var(--lra-color-gray-800)}
.khg-task.is-soon .khg-task__k{color:var(--lra-color-gray-700)}
.khg-task.is-soon .khg-task__f{border-top-color:var(--lra-color-gray-300)}
.khg-task.is-soon .khg-task__f em{color:var(--lra-color-gray-700);background:var(--lra-color-gray-200)}
.kh-page .khg-task.is-soon .khg-task__f i{color:var(--lra-color-gray-700)}
@media (prefers-reduced-motion:reduce){.khg-task{transition:none}.khg-task:hover{transform:none}}

/* ── Coming next ──────────────────────────────────────────────────────── */
/* Collapsed on purpose. The commissioned worklist belongs on a framework index
   — it answers "is anyone still writing this?" — but inline it runs to 26
   titles against 4 live pages and buries the library under its own roadmap. */
.khg-next{margin-top:var(--lra-spacing-lg);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-gray-100)}
.khg-next>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px var(--lra-spacing-md);padding:var(--lra-spacing-md) var(--lra-spacing-lg);cursor:pointer;list-style:none}
.khg-next>summary::-webkit-details-marker{display:none}
.khg-next>summary>*{grid-column:1}
/* A named control rather than a +/− glyph: the block is one of two things a
   reader can act on in this section, and a bare glyph reads as decoration. */
.khg-next>summary::after{content:"Show";grid-column:2;grid-row:1/3;align-self:center;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);border:1px solid var(--lra-color-gray-400);border-radius:3px;padding:5px 12px;white-space:nowrap}
.khg-next[open]>summary::after{content:"Hide"}
.khg-next>summary:hover::after{border-color:var(--lra-color-teal);color:var(--lra-color-teal)}
.kh-page .khg-next summary b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);text-transform:none;color:var(--lra-color-primary)}
.khg-next>summary:hover b{color:var(--lra-color-teal)}
.khg-next>summary span{font-size:var(--lra-font-size-sm);line-height:1.5;color:var(--lra-color-gray-700)}
.khg-next__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lra-spacing-xl);padding:var(--lra-spacing-lg);border-top:1px solid var(--lra-color-gray-300)}
.khg-next__k{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--kh-teal-ink)}
.khg-next__cols ul{list-style:none;margin:var(--lra-spacing-sm) 0 0;padding:0;display:grid;gap:8px}
/* Same dashed mark as an in-preparation task card, so the two blocks are
   visibly the same state rather than two ways of saying "later". */
.khg-next__cols li{display:grid;grid-template-columns:16px minmax(0,1fr);font-size:var(--lra-font-size-base);line-height:1.5;color:var(--lra-color-gray-800)}
.khg-next__cols li::before{content:"";width:7px;height:7px;margin-top:6px;border-radius:1px;border:1.5px dashed var(--lra-color-gray-500);box-sizing:border-box}

/* ── The other door ───────────────────────────────────────────────────── */
/* Four sample codes and the way in to all of them. The last one is filled, not
   ghosted: it is the section's actual offer, and as a fifth identical chip it
   read as a fifth example. */
.khg-door{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--lra-spacing-lg);padding:var(--lra-spacing-md) var(--lra-spacing-lg);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-white)}
.khg-door>span{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--lra-color-gray-700);margin-inline-end:4px}
.kh-page .khg-door a{padding:6px 12px;border:1px solid var(--lra-color-gray-300);border-radius:3px;background:var(--lra-color-white);font-size:var(--lra-font-size-base);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);text-decoration:none;transition:var(--lra-transition-fast)}
.kh-page .khg-door a:hover{border-color:var(--lra-color-teal);color:var(--lra-color-teal)}
.kh-page .khg-door a.khg-door__all{margin-inline-start:auto;border-color:var(--lra-color-primary);background:var(--lra-color-primary);color:var(--lra-color-white)}
.kh-page .khg-door a.khg-door__all:hover{border-color:var(--lra-color-primary-light);background:var(--lra-color-primary-light);color:var(--lra-color-white)}

/* ── Numbered ladder ──────────────────────────────────────────────────── */
/* One component, two meanings. `#method` is a sequence, so it stays flat with
   navy labels; `--nested` is a containment hierarchy — a pillar guide holds
   articles, which hold FAQ cards — so each level steps one indent deeper and
   the label goes teal. Rows rather than four equal columns, because four
   columns drew the four depths as siblings, which is the one thing they are
   not.
   The `div` inside each `li` is load-bearing: it puts the heading and its
   paragraph in the second grid column. Flattening it pushes the heading into
   the label column. Rules are descendant selectors for the same reason. */
.khg-method{list-style:none;margin:var(--lra-spacing-lg) 0 0;padding:0;border-top:1px solid var(--lra-color-gray-300)}
.khg-method li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--lra-spacing-md);align-items:start;padding-block:var(--lra-spacing-md);border-bottom:1px solid var(--lra-color-gray-200)}
.khg-method li>span{font-family:var(--lra-font-primary);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--lra-color-white);background:var(--lra-color-primary);border-radius:3px;padding:5px 0}
.kh-page .khg-method li b{display:block;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.3}
.khg-method li p{margin-top:3px;font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}
.khg-method--nested li:nth-child(2){padding-inline-start:var(--lra-spacing-md)}
.khg-method--nested li:nth-child(3){padding-inline-start:var(--lra-spacing-xl)}
.khg-method--nested li:nth-child(4){padding-inline-start:var(--lra-spacing-2xl)}
.khg-method--nested li:nth-child(n+2)>span{background:var(--kh-teal-ink)}

/* ── Bridge + page foot ───────────────────────────────────────────────── */
/* The bridge already carries its own top margin for an article column; inside
   the flex flow of .khh-body that margin doubles the gap. */
.khh-body>.kh-bridge{margin-top:0}
.khg-bridge__cta{display:flex;flex-wrap:wrap;gap:var(--lra-spacing-sm)}
.kh-page .kh-bridge .kh-btn--ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--lra-color-white)}
.kh-page .kh-bridge .kh-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:var(--lra-color-white);color:var(--lra-color-white)}
.khh-body>.kh-pagefoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--lra-spacing-sm)}

@media (max-width:1024px){
  .khg-answers,.khg-pillars,.khg-tasks,.khg-next__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .khg-next__cols{gap:var(--lra-spacing-lg)}
  .khh-hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--lra-spacing-xl)}
  .khh-counsel{grid-template-columns:minmax(0,1fr);gap:var(--lra-spacing-xl);padding:var(--lra-spacing-xl)}
  .khh-assist{grid-template-columns:minmax(0,1fr);gap:var(--lra-spacing-xl);padding:var(--lra-spacing-xl)}
  .khh-ask.kh-ask--compact.kh-ask--active{grid-column:1;grid-template-columns:minmax(0,1fr);gap:var(--lra-spacing-md)}
  .khh-ask.kh-ask--compact.kh-ask--active .khh-ask__summary,
  .khh-ask.kh-ask--compact.kh-ask--active .kh-ask__thread,
  .khh-ask.kh-ask--compact.kh-ask--active .kh-ask__form,
  .khh-ask.kh-ask--compact.kh-ask--active .khh-ask__note{grid-column:1;grid-row:auto;max-width:none}
  .khh-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .khh-demo__steps,.khh-caps,.khh-fws{grid-template-columns:repeat(2,minmax(0,1fr))}
  .khh-demo__steps>li:nth-child(3n+1){border-inline-start:1px solid var(--lra-color-gray-200)}
  .khh-demo__steps>li:nth-child(odd){border-inline-start:0}
  .khh-demo__steps>li:nth-last-child(-n+3){border-bottom:1px solid var(--lra-color-gray-200)}
  .khh-demo__steps>li:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:776px){
  .khh-body{gap:var(--lra-spacing-3xl)}
  .khh-routes,.khh-demo__steps,.khh-caps,.khh-fws,.khh-answers,.khh-topics,.khh-markers,.khh-steps,
  .khh-routes--2,.khh-counsel__surface,.khh-counsel__search>div,
  .khg-answers,.khg-pillars,.khg-tasks,.khg-next__cols{grid-template-columns:minmax(0,1fr)}
  .khg-method li{grid-template-columns:80px minmax(0,1fr)}
  /* Indent is meaning, but at this width it costs more measure than it buys. */
  .khg-method--nested li:nth-child(n+2){padding-inline-start:0}
  .khg-answer__d{grid-template-columns:minmax(0,1fr);gap:4px}
  .kh-page .khg-door a.khg-door__all{margin-inline-start:0}
  .khg-filters__k{flex-basis:100%}
  /* Both breakpoint blocks apply at this width, and the 1024 rules match on
     :nth-child / :nth-last-child — the same specificity as a plain `>li`
     would NOT beat. Each of them is repeated here so the single-column reset
     wins on source order rather than on !important. */
  .khh-demo__steps>li,
  .khh-demo__steps>li:nth-child(3n+1),
  .khh-demo__steps>li:nth-child(odd),
  .khh-demo__steps>li:nth-last-child(-n+3),
  .khh-demo__steps>li:nth-last-child(-n+2){border-inline-start:0;border-bottom:1px solid var(--lra-color-gray-200)}
  .khh-demo__steps>li:last-child{border-bottom:0}
  /* The row's children are placed explicitly, so collapsing the template to
     one column is not enough: `grid-column:2` on the date would open an
     implicit second column and keep the desktop split. Unset the placement. */
  .khh-latest>a{grid-template-columns:minmax(0,1fr);gap:4px}
  .khh-latest__k{grid-column:1;grid-row:auto}
  .kh-page .khh-latest>a b{grid-column:1;grid-row:auto;margin-top:0}
  .khh-latest>a em{grid-column:1;grid-row:auto;text-align:start}
  .khh-sec>.kh-h2{max-width:none}
}

/* ============================================================================
   Front-door redesign (khh2-) — 2026-08.
   ----------------------------------------------------------------------------
   The landing page is five scenes: hero → assistant → two doors → the report
   corpus → proof. The khh- blocks above stay untouched because the guides
   catalogue still renders them; the front door itself now uses this set plus
   the shared .kh-ask panel (knowledge-card.css), scaled up by .kh-ask--hub.

   Rhythm rule: scenes alternate ground (white → white-with-navy-card → white →
   navy band → white → teal band) so scale and colour, not borders, tell the
   reader the product level changed.
   ========================================================================== */

.khh2{--kh2-gold:#e8c766;--kh2-gold-ink:#0d2438}

/* ── 1 · Hero ─────────────────────────────────────────────────────────── */
.khh2-hero{padding-block:0 var(--lra-spacing-xl)}
.khh2-hero__inner{max-width:900px;margin-inline:auto;padding-top:var(--lra-spacing-xl);text-align:center}
.khh2-hero__inner .kh-eyebrow{justify-content:center}
.khh2-hero__inner .kh-title{max-width:36ch;margin-inline:auto;font-size:clamp(30px,4.2vw,42px);line-height:1.16;text-wrap:balance}
.khh2-hero__inner .kh-stand{margin-inline:auto;max-width:66ch}
.khh2-modes{list-style:none;margin:var(--lra-spacing-xl) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--lra-spacing-sm) var(--lra-spacing-lg)}
.khh2-modes a{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;padding:7px 4px;border-bottom:2px solid transparent;transition:var(--lra-transition-fast)}
.kh-page .khh2-modes b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary)}
.khh2-modes span{font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
.khh2-modes a:hover{border-bottom-color:var(--lra-color-teal)}
.khh2-modes li{display:flex;align-items:center;gap:var(--lra-spacing-lg)}
.khh2-modes li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lra-color-gray-400)}

/* ── 2 · The assistant, scaled to centrepiece ─────────────────────────── */
.khh2-askband{padding-block:var(--lra-spacing-lg) var(--lra-spacing-2xl)}
.kh-ask--hub{margin-top:0;max-width:1040px;margin-inline:auto;padding:clamp(26px,3.4vw,46px);border-radius:var(--lra-border-radius-md);box-shadow:0 30px 70px rgba(13,48,104,.26)}
.kh-ask--hub::before{width:620px;height:400px}
.kh-ask--hub .kh-ask__head{margin-top:var(--lra-spacing-lg);gap:var(--lra-spacing-lg)}
.kh-ask--hub .kh-ask__head img{width:52px;height:52px}
.kh-page .kh-ask--hub h2{font-family:var(--lra-font-secondary);font-size:clamp(22px,2.6vw,30px);letter-spacing:var(--lra-letter-spacing-base);line-height:1.2}
.kh-ask--hub .kh-ask__sub{font-size:var(--lra-font-size-md);max-width:72ch}
.kh-ask--hub .kh-ask__chips{margin-top:var(--lra-spacing-xl)}
.kh-ask--hub .kh-ask__chip{font-size:var(--lra-font-size-base);padding:8px 15px}
.kh-ask--hub .kh-ask__thread{max-width:840px}
.kh-ask--hub .kh-ask__form{max-width:none;margin-top:var(--lra-spacing-xl);padding:10px 10px 10px 18px}
.kh-ask--hub .kh-ask__form textarea{min-height:46px;font-size:var(--lra-font-size-md)}
.kh-ask--hub .kh-ask__send{width:46px;height:46px;background:var(--kh2-gold);color:var(--kh2-gold-ink);font-size:var(--lra-font-size-lg)}
.khh2-scope{margin:var(--lra-spacing-md) auto 0;max-width:1040px;text-align:center;font-family:var(--kh-mono,ui-monospace,monospace);font-size:11px;letter-spacing:.06em;color:var(--lra-color-gray-600)}

/* ── 3 · Two doors ────────────────────────────────────────────────────── */
.khh2-center{justify-content:center}
.khh2-explore{padding-block:var(--lra-spacing-3xl) var(--lra-spacing-2xl)}
.khh2-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lra-spacing-xl);margin-top:var(--lra-spacing-lg)}
.khh2-door{display:flex;flex-direction:column;gap:var(--lra-spacing-md);padding:var(--lra-spacing-2xl);background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-md);box-shadow:0 14px 36px rgba(13,48,104,.07);transition:var(--lra-transition-base)}
.khh2-door:hover{box-shadow:0 20px 48px rgba(13,48,104,.12);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.khh2-door{transition:none}.khh2-door:hover{transform:none}}
.khh2-door--guides{border-top:4px solid var(--lra-color-teal);background:linear-gradient(180deg,#f2f9fa 0%,#fff 38%)}
.khh2-door--library{border-top:4px solid var(--lra-color-primary);background:linear-gradient(180deg,#f2f6fc 0%,#fff 38%)}
.khh2-door__k{font-family:var(--kh-mono,ui-monospace,monospace);font-size:11px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.13em;text-transform:uppercase}
.khh2-door--guides .khh2-door__k{color:var(--kh-teal-ink,#0b6f80)}
.khh2-door--library .khh2-door__k{color:var(--lra-color-primary)}
.kh-page .khh2-door__t{max-width:none}
.kh-page .khh2-door__t a{display:block;font-family:var(--lra-font-secondary);font-size:clamp(21px,2vw,26px);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);line-height:1.22;color:var(--lra-color-primary);text-decoration:none}
.kh-page .khh2-door__t a:hover{color:var(--lra-color-teal)}
.khh2-door__p{font-size:var(--lra-font-size-md);line-height:1.62;color:var(--lra-color-gray-800);max-width:58ch}
.khh2-door__hot{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:var(--lra-spacing-xs)}
.khh2-door__hot>span{flex-basis:100%;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-600);margin-bottom:2px}
.kh-page .khh2-door__hot a{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border:1px solid var(--lra-color-gray-300);border-radius:999px;background:var(--lra-color-white);font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);color:var(--lra-color-gray-800);text-decoration:none;transition:var(--lra-transition-fast)}
.kh-page .khh2-door__hot a:hover{border-color:var(--lra-color-teal);color:var(--lra-color-primary)}
.khh2-door__hot i{font-style:normal;font-size:var(--lra-font-size-xs);color:var(--kh-teal-ink,#0b6f80);font-variant-numeric:tabular-nums}
.khh2-door__flow{list-style:none;counter-reset:f;margin:var(--lra-spacing-xs) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.khh2-door__flow li{counter-increment:f;display:inline-flex;align-items:center;gap:6px;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);background:rgba(13,48,104,.06);border-radius:4px;padding:6px 10px}
.khh2-door__flow li::before{content:"0" counter(f);font-family:var(--kh-mono,ui-monospace,monospace);font-size:10px;font-weight:var(--lra-font-weight-semibold);color:var(--kh-teal-ink,#0b6f80)}
.khh2-door__flow li:not(:last-child)::after{content:"→";margin-inline-start:2px;color:var(--lra-color-gray-500);font-weight:var(--lra-font-weight-regular)}
.khh2-door__meta{margin-top:auto;padding-top:var(--lra-spacing-md);border-top:1px solid var(--lra-color-gray-200);font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
.khh2-door__meta>p{margin:0}
.khh2-door__standards-label{margin-top:10px!important;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-600)}
.khh2-door__standards{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.khh2-door__standards span{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid var(--lra-color-gray-300);border-radius:999px;background:var(--lra-color-white);font-size:12px;line-height:1.25;color:var(--lra-color-gray-800)}
.khh2-door__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lra-spacing-md)}
.kh-page .khh2-door__eg{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);text-decoration:none}
.kh-page .khh2-door__eg:hover{color:var(--lra-color-teal)}

/* ── 4 · Disclosure intelligence — the dark scene ─────────────────────── */
.khh2-intel{position:relative;overflow:hidden;margin-top:var(--lra-spacing-2xl);padding-block:var(--lra-spacing-3xl);background:linear-gradient(135deg,#0D3068 0%,#10243a 100%)}
.khh2-intel::after{content:"";position:absolute;top:-80px;inset-inline-end:-60px;width:560px;height:400px;pointer-events:none;background:radial-gradient(closest-side,rgba(0,144,167,.5),rgba(0,144,167,0) 70%)}
.khh2-intel>*{position:relative;z-index:1}
.khh2-intel__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,460px);gap:var(--lra-spacing-2xl);align-items:start}
.khh2-intel .kh-kicker{color:var(--kh2-gold);--v-fam:var(--kh2-gold)}
.kh-page .khh2-intel .kh-h2{color:var(--lra-color-white);max-width:20ch}
.khh2-intel .kh-lead{color:rgba(255,255,255,.84);max-width:56ch}
.khh2-intel__jobs{list-style:none;margin:var(--lra-spacing-lg) 0 0;padding:0;display:grid;gap:10px}
.khh2-intel__jobs li{display:grid;grid-template-columns:20px minmax(0,1fr);font-size:var(--lra-font-size-md);line-height:1.55;color:rgba(255,255,255,.88)}
.khh2-intel__jobs li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--kh2-gold)}
.khh2-intel__panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-lg)}
.khh2-intel__panel label{display:block;margin-bottom:8px;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.khh2-intel__panel form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.khh2-intel__panel input{height:48px;min-width:0;padding:0 var(--lra-spacing-md);border:1px solid rgba(255,255,255,.24);border-radius:var(--lra-border-radius-sm);background:rgba(255,255,255,.08);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-md);color:var(--lra-color-white)}
.khh2-intel__panel input::placeholder{color:rgba(255,255,255,.45)}
.khh2-intel__panel input:focus{outline:none;border-color:var(--kh2-gold);box-shadow:0 0 0 3px rgba(232,199,102,.2)}
.kh-page .khh2-btn--gold{height:48px;background:var(--kh2-gold);border-color:var(--kh2-gold);color:var(--kh2-gold-ink)}
.kh-page .khh2-btn--gold:hover{background:#f0d47e;border-color:#f0d47e;color:var(--kh2-gold-ink)}
.khh2-intel__try{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-sm);color:rgba(255,255,255,.6)}
.kh-page .khh2-intel__try a{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);color:rgba(255,255,255,.9);text-decoration:none;border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:5px 12px;transition:var(--lra-transition-fast)}
.kh-page .khh2-intel__try a:hover{border-color:var(--kh2-gold);color:var(--lra-color-white)}
.khh2-intel__note{margin-top:var(--lra-spacing-md);padding-top:var(--lra-spacing-md);border-top:1px solid rgba(255,255,255,.18);font-size:var(--lra-font-size-sm);line-height:1.55;color:rgba(255,255,255,.55)}

/* ── 5 · Proof ────────────────────────────────────────────────────────── */
.khh2-proof{padding-block:var(--lra-spacing-3xl)}
.khh2-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:var(--lra-spacing-xl) 0 0}
.khh2-nums>div{display:grid;gap:6px;justify-items:center;text-align:center;padding:var(--lra-spacing-md) var(--lra-spacing-lg)}
.khh2-nums>div+div{border-inline-start:1px solid var(--lra-color-gray-200)}
.khh2-nums dt{font-family:var(--lra-font-secondary);font-size:clamp(30px,3.4vw,44px);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);line-height:1;color:var(--lra-color-primary);font-variant-numeric:tabular-nums}
.khh2-nums dd{margin:0;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-600)}
.khh2-proof__line{margin:var(--lra-spacing-xl) auto 0;max-width:64ch;text-align:center;font-size:var(--lra-font-size-md);line-height:1.65;color:var(--lra-color-gray-800)}
.khh2-marks{list-style:none;margin:var(--lra-spacing-lg) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--lra-spacing-sm) var(--lra-spacing-xl)}
.khh2-marks li{display:flex;align-items:center;gap:8px;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);color:var(--lra-color-gray-800)}
.khh2-marks li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lra-color-teal);flex:none}
.khh2-proof .khh-lead{max-width:860px;margin-inline:auto}

/* ── Ladder into LRA ──────────────────────────────────────────────────── */
.khh2-start{background:var(--v-teal);border-block:1px solid var(--v-teal-line);padding-block:var(--lra-spacing-2xl)}
.khh2-start__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lra-spacing-xl)}
.khh2-start__row li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--lra-spacing-md);align-items:start}
.khh2-start__row li>span{font-family:var(--kh-mono,ui-monospace,monospace);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-white);background:var(--kh-teal-ink,#0b6f80);border-radius:3px;padding:4px 7px;margin-top:2px}
.kh-page .khh2-start__row b{display:block;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.3}
.khh2-start__row p{margin-top:4px;font-size:var(--lra-font-size-sm);line-height:1.55;color:var(--lra-color-gray-800)}
.kh-page .khh2-start__row a{display:inline-block;margin-top:7px;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);text-decoration:none}
.kh-page .khh2-start__row a:hover{color:var(--lra-color-teal)}

/* ── Latest ───────────────────────────────────────────────────────────── */
.khh2-latest{padding-block:var(--lra-spacing-3xl) var(--lra-spacing-4xl)}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .khh2-intel__grid{grid-template-columns:minmax(0,1fr);gap:var(--lra-spacing-xl)}
  .khh2-nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lra-spacing-md) 0}
  .khh2-nums>div:nth-child(3){border-inline-start:0}
}
@media (max-width:900px){
  .khh2-doors{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:776px){
  .khh2-hero__inner{text-align:start}
  .khh2-hero__inner .kh-eyebrow{justify-content:flex-start}
  .khh2-hero__inner .kh-title,.khh2-hero__inner .kh-stand{margin-inline:0}
  .khh2-modes{justify-content:flex-start}
  .khh2-modes li{gap:var(--lra-spacing-sm)}
  .khh2-door{padding:var(--lra-spacing-lg)}
  .khh2-start__row{grid-template-columns:minmax(0,1fr);gap:var(--lra-spacing-lg)}
  .khh2-nums{grid-template-columns:minmax(0,1fr)}
  .khh2-nums>div{justify-items:start;text-align:start;padding-inline:0;border-inline-start:0 !important;border-bottom:1px solid var(--lra-color-gray-200);padding-block:var(--lra-spacing-md)}
  .khh2-nums>div:last-child{border-bottom:0}
  .khh2-proof__line,.khh2-scope{text-align:start}
  .khh2-marks{justify-content:flex-start}
  .khh2-intel__panel form>div{grid-template-columns:minmax(0,1fr)}
}

/* ── khh2 on the two catalogue roots ──────────────────────────────────── */
/* The search row inside the guides filter block — the hero no longer holds a
   search card, so the query control lives with the chips it feeds. */
.khg-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.khg-search input{height:46px;min-width:0;padding:0 var(--lra-spacing-md);border:1px solid var(--lra-color-gray-400);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-white);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);color:var(--lra-color-gray-900)}
.khg-search input:focus{outline:none;border-color:var(--lra-color-accent);box-shadow:0 0 0 3px rgba(98,181,225,.22)}
.kh-page .khg-search .kh-btn{height:46px}
/* Real content preview inside a door card — pillar answers, featured cards. */
.khh2-door__list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px}
.khh2-door__list li{display:flex;align-items:baseline;gap:8px;min-width:0}
.khh2-door__list li::before{content:"";flex:none;width:6px;height:6px;border-radius:1px;background:var(--kh-teal-ink,#0b6f80);transform:translateY(-2px)}
.kh-page .khh2-door__list a{min-width:0;font-size:var(--lra-font-size-base);font-weight:var(--lra-font-weight-medium);line-height:1.45;color:var(--lra-color-primary);text-decoration:none}
.kh-page .khh2-door__list a:hover{color:var(--lra-color-teal);text-decoration:underline}
.khh2-door__list i{font-style:normal;font-size:var(--lra-font-size-xs);color:var(--lra-color-gray-600);white-space:nowrap}
@media (max-width:560px){.khg-search{grid-template-columns:minmax(0,1fr)}}

/* A door whose tier is not published yet — muted and unlinked, never hidden. */
.khh2-door--mute{background:var(--lra-color-gray-100);border-style:dashed;border-color:var(--lra-color-gray-400);border-top-style:solid;box-shadow:none}
.khh2-door--mute:hover{box-shadow:none;transform:none}
.khh2-door--guides.khh2-door--mute{border-top-color:var(--lra-color-gray-400)}
.khh2-door--library.khh2-door--mute{border-top-color:var(--lra-color-gray-400)}
.kh-page .khh2-door--mute .khh2-door__t{color:var(--lra-color-gray-800);font-family:var(--lra-font-secondary);font-size:clamp(21px,2vw,26px);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);line-height:1.22}
.khh2-door--mute .khh2-door__k{color:var(--lra-color-gray-600)}

/* ============================================================================
   Rich layer (2026-08-09, owner request): the tier's real assets on the page.

   * Framework colour identity — one hue per framework, carried by --fw-c and
     applied wherever a framework is named. Navigation, not decoration: the
     same standard is the same colour on every page of the tier.
   * Report covers — the corpus shown, not described: real covers rendered
     from the issuers' PDFs (already in the card payloads).
   * Real citations — the intelligence band shows what a citation is, using
     the demo card's precomputed company/page/deep-link rows.
   * Programme progress — 400 commissioned topics as honest segmented bars.
   ========================================================================== */

/* ── Framework palette ────────────────────────────────────────────────── */
.fw-gri{--fw-c:#0090a7}
.fw-esrs{--fw-c:#1b5182}
.fw-eu-voluntary{--fw-c:#3a9dd4}
.fw-ifrs-issb{--fw-c:#0d3068}
.fw-tnfd{--fw-c:#0f8f78}
.fw-uae{--fw-c:#b06a1f}
.fw-uk-srs-s1{--fw-c:#6b4fa8}
.fw-uk-srs-s2{--fw-c:#8a63c9}
.fw-california{--fw-c:#c9971f}
.fw-sasb{--fw-c:#5a656d}
.fw-vsme{--fw-c:#00b3cf}
.khh-fw[class*="fw-"]{border-top:3px solid var(--fw-c,var(--lra-color-gray-300))}
.khh-fw[class*="fw-"] em{background:transparent;border:1px solid var(--lra-color-gray-300);color:var(--lra-color-gray-800)}
.khh2-hero__inner[class*="fw-"] .kh-eyebrow span{color:var(--fw-c,var(--lra-color-teal))}
.khh2-hero__inner[class*="fw-"] .khh2-marks li::before{background:var(--fw-c,var(--lra-color-teal))}

/* ── Report covers strip ──────────────────────────────────────────────── */
.khh2-covers{margin-top:var(--lra-spacing-xl)}
.khh2-covers__k{font-family:var(--kh-mono,ui-monospace,monospace);font-size:10px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--lra-color-gray-600)}
.khh2-covers__row{display:flex;align-items:flex-end;gap:10px;margin-top:var(--lra-spacing-md);overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.khh2-covers__row a{flex:0 0 auto;display:block;border-radius:6px;transition:var(--lra-transition-base)}
.khh2-covers__row img{display:block;height:118px;width:auto;border-radius:6px;border:1px solid var(--lra-color-gray-300);background:var(--lra-color-white);box-shadow:0 8px 20px rgba(13,48,104,.14);object-fit:cover}
.khh2-covers__row a:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.khh2-covers__row a{transition:none}.khh2-covers__row a:hover{transform:none}}
.khh2-covers__cap{margin-top:var(--lra-spacing-sm);font-size:var(--lra-font-size-sm);line-height:1.55;color:var(--lra-color-gray-700);max-width:70ch}
/* dark variant — inside the intelligence band */
.khh2-covers--dark{position:relative;z-index:1;margin-top:var(--lra-spacing-2xl);padding-top:var(--lra-spacing-lg);border-top:1px solid rgba(255,255,255,.16)}
.khh2-covers--dark .khh2-covers__k{color:rgba(255,255,255,.55)}
.khh2-covers--dark .khh2-covers__row img{border-color:rgba(255,255,255,.25);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.khh2-covers--dark .khh2-covers__cap{color:rgba(255,255,255,.6)}

/* ── Real citation rows in the intelligence panel ─────────────────────── */
.khh2-intel__rows{display:grid;gap:6px;margin-top:var(--lra-spacing-md);padding-top:var(--lra-spacing-md);border-top:1px solid rgba(255,255,255,.18)}
.khh2-intel__rows-k{font-family:var(--kh-mono,ui-monospace,monospace);font-size:10px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.kh-page .khh2-intel__rows a:not(.khh2-intel__rows-more){display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:rgba(255,255,255,.05);text-decoration:none;transition:var(--lra-transition-fast)}
.kh-page .khh2-intel__rows a:not(.khh2-intel__rows-more):hover{border-color:var(--kh2-gold);background:rgba(255,255,255,.09)}
.khh2-intel__rows b{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.khh2-intel__rows span{font-size:var(--lra-font-size-xs);color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.khh2-intel__rows i{font-style:normal;font-family:var(--kh-mono,ui-monospace,monospace);font-size:var(--lra-font-size-xs);color:var(--kh2-gold);white-space:nowrap}
.kh-page .khh2-intel__rows-more{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:rgba(255,255,255,.85);text-decoration:none;margin-top:2px}
.kh-page .khh2-intel__rows-more:hover{color:var(--kh2-gold)}

/* ── Programme progress bars ──────────────────────────────────────────── */
.khh2-prog{display:grid;gap:8px;margin-top:var(--lra-spacing-lg)}
.khh2-prog__row{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:var(--lra-spacing-md);align-items:center;padding:10px 14px;border:1px solid var(--lra-color-gray-300);border-inline-start:3px solid var(--fw-c,var(--lra-color-gray-400));border-radius:var(--lra-border-radius-sm);background:var(--lra-color-white);text-decoration:none;transition:var(--lra-transition-fast)}
a.khh2-prog__row:hover{border-color:var(--fw-c,var(--lra-color-teal));box-shadow:0 6px 16px rgba(13,48,104,.08)}
.kh-page .khh2-prog__row b{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.25}
/* Fifty segments: the tick grid IS the target, the fill is the truth. */
.khh2-prog__bar{position:relative;display:block;height:12px;border-radius:3px;background:var(--lra-color-gray-200);background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(2% - 1px),var(--lra-color-white) calc(2% - 1px),var(--lra-color-white) 2%);overflow:hidden}
.khh2-prog__bar i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--fw-c,var(--kh-teal-ink,#0b6f80));border-radius:3px 0 0 3px;min-width:2px}
.khh2-prog__row.is-zero .khh2-prog__bar i{display:none}
.khh2-prog__row em{font-style:normal;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);color:var(--lra-color-gray-700);font-variant-numeric:tabular-nums;white-space:nowrap}
.khh2-prog__row.is-zero em{color:var(--lra-color-gray-600)}
.khh2-prog__note{margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
/* solo variant — one bar in a framework hero, centred column */
.khh2-prog--solo{max-width:560px;margin-inline:auto}
.khh2-prog--solo .khh2-prog__row{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;text-align:start}
.khh2-prog--solo .khh2-prog__row b{grid-column:1;grid-row:1;font-size:var(--lra-font-size-sm)}
.khh2-prog--solo .khh2-prog__row em{grid-column:2;grid-row:1;justify-self:end}
.khh2-prog--solo .khh2-prog__bar{grid-column:1/-1;grid-row:2}
@media (max-width:776px){
  .khh2-prog__row{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto}
  .khh2-prog__row b{grid-column:1;grid-row:1}
  .khh2-prog__row em{grid-column:2;grid-row:1;justify-self:end}
  .khh2-prog__bar{grid-column:1/-1;grid-row:2}
  .khh2-covers__row img{height:96px}
}