/* ============================================================================
   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)}

/* 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}

/* ── 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)}

/* ── Reporting Assistant ──────────────────────────────────────────────── */
/* Navy with the gold accent, the same surface the assistant itself uses, and
   split so the claim sits beside the proof rather than above it. */
.khh-assist{--v-gold:#e8c766;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:var(--lra-spacing-2xl);padding:var(--lra-spacing-2xl);background:linear-gradient(135deg,#0D3068 0%,#10243a 100%);border-radius:var(--lra-border-radius-md)}
.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)}
.kh-page .khh-assist .kh-h2{color:var(--lra-color-white);max-width:22ch}
.khh-assist__intro>p{margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-md);line-height:1.7;color:rgba(255,255,255,.84)}
.khh-assist__pts{list-style:none;margin:var(--lra-spacing-lg) 0 0;padding:0;display:grid;gap:10px}
.khh-assist__pts li{display:grid;grid-template-columns:20px minmax(0,1fr);font-size:var(--lra-font-size-base);line-height:1.55;color:rgba(255,255,255,.88)}
.khh-assist__pts li::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:2px;background:var(--v-gold)}
.kh-page .khh-assist__intro .kh-btn--ghost{margin-top:var(--lra-spacing-lg);border-color:rgba(255,255,255,.4);color:var(--lra-color-white)}
.kh-page .khh-assist__intro .kh-btn--ghost:hover{background:var(--v-gold);border-color:var(--v-gold);color:#0d2438}
/* The answer anatomy sits on the panel rather than on a white card: it is the
   assistant speaking, not a document it produced. */
.khh-assist__demo{align-self:start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-lg)}
.khh-assist__q{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);line-height:1.35;color:var(--lra-color-white)}
.khh-assist__shape{margin:var(--lra-spacing-lg) 0 0;display:grid;gap:var(--lra-spacing-md)}
.khh-assist__shape>div{display:grid;gap:4px}
.khh-assist__shape dt{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--v-gold)}
.khh-assist__shape dd{margin:0;font-size:var(--lra-font-size-base);line-height:1.6;color:rgba(255,255,255,.9)}
/* Provenance under the worked answer. Quiet, but present: the example makes a
   normative claim about an effective date, so it shows its working. */
.khh-assist__prov{margin-top:var(--lra-spacing-lg);padding-top:var(--lra-spacing-md);border-top:1px solid rgba(255,255,255,.22)}
.khh-assist__prov-k{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,.6)}
.khh-assist__prov dl{margin:var(--lra-spacing-sm) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--lra-spacing-md)}
.khh-assist__prov dt{font-size:var(--lra-font-size-xs);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.khh-assist__prov dd{margin:2px 0 0;font-size:var(--lra-font-size-sm);line-height:1.45;color:rgba(255,255,255,.9)}
.kh-page .khh-assist__prov a{color:var(--lra-color-accent-light);text-decoration:none}
.kh-page .khh-assist__prov a:hover{color:var(--v-gold);text-decoration:underline}

/* ── 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}
.khh-latest__more{display:flex;flex-wrap:wrap;gap:var(--lra-spacing-lg);margin-top:var(--lra-spacing-md)}
.kh-page .khh-latest__more a{font-size:var(--lra-font-size-base);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);text-decoration:none}
.kh-page .khh-latest__more a:hover{color:var(--lra-color-teal);text-decoration:underline}

/* ── "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-assist{grid-template-columns:minmax(0,1fr);gap:var(--lra-spacing-xl);padding:var(--lra-spacing-xl)}
  .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-assist__prov dl,
  .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%}
  .khh-assist__shape>div{grid-template-columns:minmax(0,1fr);gap:4px}
  /* 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}
}