/* ─────────────────────────────────────────────────────────────────────────────
 * Beckn canvas — the shared body system for every ONDC category page.
 *
 * Everything here is scoped under `.bk`. The pages keep the shared site navbar,
 * sector rail and footer, which are Inter on the ONDC palette; this block is the
 * category world of its own (Space Grotesk on a dotted #f7f8f8 canvas, #2151F5
 * accent) and must not leak into that chrome.
 *
 * See docs/beckn-category-template.md for the section recipe and the two hero
 * variants (.bk-hero for pages with partner logos, .bk-hero-rail for those
 * without).
 *
 * Space Grotesk is already self-hosted and @font-face'd in fx.css (400/600/700).
 * The comp asks for 500 in a few places — those fall back to 400 rather than
 * pulling a fourth weight over the wire.
 * ──────────────────────────────────────────────────────────────────────────── */

.bk {
  --bk-ink: #1b1b1b;
  --bk-ink-deep: #191919;
  --bk-blue: #2151F5;
  --bk-canvas: #f7f8f8;
  --bk-muted: #55595e;
  --bk-line: #e6e7e9;
  --bk-ease: cubic-bezier(.2, 0, .2, 1);
  --bk-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* The inset every floating panel shares. Was a 32px literal repeated in seven
     places, of which only .bk-panel/.bk-reality/.bk-join ever narrowed on a
     phone — so neighbouring sections sat on visibly different left edges.
     It steps down here, once, for all of them. */
  --bk-gutter: 32px;

  /* Directory card inset. Lives on .bk, not .bk-role-page: complaint.html and
     how-to-shop.html use .bk-directory without the role-page class, and an
     undefined var here invalidated the whole padding shorthand (padding: 0). */
  --bk-directory-pad: clamp(22px, 4.6vw, 68px);

  font-family: "Space Grotesk", "Space Grotesk Fallback", Inter, system-ui, sans-serif;
  color: var(--bk-ink);
  background: var(--bk-canvas);
  background-image: radial-gradient(circle, rgba(27, 27, 27, .05) 1.1px, transparent 1.1px);
  background-size: 32px 32px;
  overflow-x: clip;
  display: block;
}

.bk em {
  font-style: normal;
  font-weight: 400;
}

/* Wrapped in :where() so this stays a zero-specificity default. A bare `.bk a`
 * outranks single-class component rules, which silently painted every anchor
 * styled as a solid button in ink-on-ink. */
:where(.bk) :where(a) {
  color: inherit;
  text-decoration: none;
}

.bk ::selection {
  background: var(--bk-blue);
  color: #fff;
}

/* ── Shared reveal ──────────────────────────────────────────────────────────── */
.bk-rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--bk-ease), transform .7s var(--bk-ease);
}

.bk-rv.bk-in {
  opacity: 1;
  transform: none;
}

.bk-rv-d1 { transition-delay: .1s; }
.bk-rv-d2 { transition-delay: .2s; }

/* ── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes bkMarqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bkMarqueeUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes bkMarqueeDn { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes bkFloatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes bkFloatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes bkIntroUp {
  0% { opacity: 0; transform: translateY(40px) rotate(-1.5deg) scale(.97); }
  100% { opacity: 1; transform: none; }
}

/* ═══ HERO ══════════════════════════════════════════════════════════════════ */
.bk-hero {
  position: relative;
  min-height: 88vh;
  padding: 104px 40px 88px;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
}

.bk-hero-band {
  --bk-band-angle: 30deg;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 260vw so the band rotation still covers the corners at any aspect ratio. */
.bk-hero-band-rot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260vw;
  transform: translate(-50%, -50%) rotate(var(--bk-band-angle));
}

.bk-hero-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: bkMarqueeX 44s linear infinite reverse;
}

.bk-hero-card {
  flex: none;
  width: 320px;
  height: 62vh;
  min-height: 420px;
  transform: rotate(calc(-1 * var(--bk-band-angle)));
  border-radius: 22px;
  box-sizing: border-box;
  background-color: #cfd4da;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .13);
}

.bk-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 64% 58% at 50% 44%,
      rgba(247, 248, 248, .97) 34%,
      rgba(247, 248, 248, .82) 60%,
      rgba(247, 248, 248, 0) 84%);
}

.bk-hero-body {
  position: relative;
  z-index: 2;
}

.bk-hero h1 {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -.038em;
  color: var(--bk-ink-deep);
  max-width: 980px;
  margin: 0 auto;
}

.bk-hero-sub {
  font-size: clamp(16.5px, 1.42vw, 19.5px);
  line-height: 1.7;
  color: var(--bk-muted);
  max-width: 660px;
  margin: 30px auto 0;
}

.bk-hero-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.bk-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  padding: 16px 34px;
  cursor: pointer;
  border: none;
  transition: background .22s var(--bk-ease), color .22s var(--bk-ease),
    border-color .22s var(--bk-ease), transform .22s var(--bk-ease);
}

.bk-btn-solid {
  background: var(--bk-ink);
  color: #fff;
}

.bk-btn-solid:hover {
  background: var(--bk-blue);
  color: #fff;
  transform: translateY(1px);
}

.bk-btn-ghost {
  border: 1.4px solid #d7d9db;
  background: rgba(255, 255, 255, .7);
  color: var(--bk-ink);
}

.bk-btn-ghost:hover {
  border-color: var(--bk-ink);
}

.bk-hero-keys {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 48px;
  font-size: clamp(16.5px, 1.42vw, 19.5px);
  color: var(--bk-blue);
}

.bk-hero-keys .bk-sep {
  font-size: 13px;
}

/* Underline that draws in from the left on hover. */
.bk-ul {
  color: var(--bk-blue);
  background: linear-gradient(var(--bk-blue), var(--bk-blue)) left 100% / 0% 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size .3s var(--bk-ease);
}

.bk-ul:hover {
  background-size: 100% 1.5px;
}

/* ═══ BY THE NUMBERS ════════════════════════════════════════════════════════ */
/* `clip`, not `hidden`: both crop to the radius, but `hidden` makes the panel a
 * scroll container, which silently disables `position: sticky` on everything
 * inside it — including .bk-reality-lead on every category page. */
.bk-panel {
  background: #fff;
  border-radius: 28px;
  /* Same 1440px column cap as .bk-directory, so every white card shares one
     left edge on wide monitors instead of the panels running full-bleed. */
  margin: 30px max(var(--bk-gutter), (100% - 1440px) / 2);
  overflow: clip;
}

/* The standard horizontal inset, as a utility.
 *
 * .bk-panel carries no padding of its own, because the section classes normally
 * paired with it (.bk-numbers, .bk-reality, .bk-join) each bring their own. A
 * bare .bk-panel has nothing to inset its children, so heads and ledgers land
 * flush against the 28px corner radius.
 *
 * Apply to the section when every child needs the inset, or to a single child
 * when its siblings already carry their own — putting it on the section in that
 * case would double-pad them. */
.bk-inset {
  padding-left: clamp(24px, 5vw, 84px);
  padding-right: clamp(24px, 5vw, 84px);
}

.bk-numbers {
  padding: 88px 0 60px;
}

.bk-numbers-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 clamp(24px, 5vw, 84px);
}

.bk-numbers-head h2,
.bk-h2 {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.035em;
  margin: 0;
}

.bk-note {
  font-size: 13px;
  color: #b3b8bd;
  padding-bottom: 10px;
}

.bk-statgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--bk-line);
  border-bottom: 1px solid var(--bk-line);
  margin: 64px clamp(24px, 5vw, 84px) 0;
}

/* Count-agnostic variant. The fixed 3-up track strands any tile count that is
   not a multiple of three — a 4-tile grid leaves one tile alone beside two empty
   ruled cells. auto-fit keeps whatever count the page supplies on one full row
   for as long as the tiles stay legible. */
.bk-statgrid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.bk-stat {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 3.4vw, 52px) clamp(24px, 3vw, 48px);
  border-right: 1px solid var(--bk-line);
  border-bottom: 1px solid var(--bk-line);
}

/* Border trimming is count-agnostic so the same grid serves 6 cells (most
 * sectors) and 9 (credit, investments). The last-row test finds the first cell
 * of the final row — a row-start (3n+1) that is within 3 of the end — and drops
 * the bottom border on it and everything after it. */
.bk-stat:nth-child(3n) { border-right: none; }
.bk-stat:nth-child(3n+1):nth-last-child(-n+3),
.bk-stat:nth-child(3n+1):nth-last-child(-n+3) ~ .bk-stat { border-bottom: none; }
/* A short final row (shared-mobility runs 5) ends on a cell that is not a 3n,
   so the 3n rule above leaves it ruling off into the empty rest of the row.
   No-op when the count is a multiple of three — the last cell is already 3n. */
.bk-statgrid .bk-stat:last-child { border-right: none; }

/* The auto-fit grid is a single row of N tiles (e.g. 4 years), so the 3-col
   trimming above lands on the wrong tiles there. */
.bk-statgrid-auto .bk-stat { border-right: 1px solid var(--bk-line); border-bottom: none; }
.bk-statgrid-auto .bk-stat:last-child { border-right: none; }

/* Scales rather than growing `height`: same rising block, no layout pass. */
.bk-stat-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: #e4eefc;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s cubic-bezier(0, 0, .2, 1);
  pointer-events: none;
}

.bk-stat:hover .bk-stat-fill { transform: scaleY(1); }

/* Dotted texture, masked to a soft blob — first cell only, as in the comp. */
.bk-stat-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(33, 81, 245, .20) 1.2px, transparent 1.2px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 26% 40%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 26% 40%, black, transparent 75%);
}

.bk-stat-num {
  position: relative;
  white-space: nowrap;
}

.bk-stat-num b {
  font-weight: 700;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -.036em;
  color: #0d1b2e;
}

.bk-stat-num b.bk-sm {
  font-size: clamp(28px, 3.2vw, 46px);
}

.bk-stat-num i {
  font-style: normal;
  font-weight: 600;
  font-size: clamp(16.5px, 1.42vw, 19.5px);
  color: #1877F2;
  margin-left: 2px;
}

.bk-stat-num i.bk-gap { margin-left: 8px; }

.bk-stat-desc {
  position: relative;
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.65;
  color: var(--bk-muted);
  margin-top: 16px;
  max-width: 300px;
}

/* ═══ PARTICIPANT RAIL ══════════════════════════════════════════════════════ */
.bk-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(32px, 4.4vw, 64px);
  padding: 100px clamp(24px, 5vw, 72px);
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: center;
}

.bk-rail-copy {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 24px;
  max-width: 440px;
}

.bk-rail-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  height: 640px;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* Feathers the marquee into the canvas at both ends. */
.bk-rail-cols::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
      var(--bk-canvas) 0%,
      rgba(247, 248, 248, 0) 12%,
      rgba(247, 248, 248, 0) 88%,
      var(--bk-canvas) 100%);
}

.bk-rail-up { animation: bkMarqueeUp 42s linear infinite; }
.bk-rail-dn { animation: bkMarqueeDn 48s linear infinite; }

.bk-rail-cols:hover .bk-rail-up,
.bk-rail-cols:hover .bk-rail-dn {
  animation-play-state: paused;
}

.bk-card {
  border-radius: 16px;
  padding: 22px;
  background: #fff;
  border: 1px solid #e9eaec;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
  box-sizing: border-box;
  transition: box-shadow .3s var(--bk-ease), transform .3s var(--bk-ease);
}

.bk-card:hover {
  box-shadow: 0 16px 38px rgba(0, 0, 0, .10);
  transform: translateY(-3px);
}

.bk-card-kind {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #a2a7ad;
}

.bk-card-logo {
  height: 96px;
  flex: none;
  margin: auto 0;
  box-sizing: border-box;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.bk-card-name {
  border-top: 1px solid #e9eaec;
  padding-top: 12px;
  font-weight: 600;
  font-size: 18px;
  color: var(--bk-ink);
}

.bk-card-line {
  font-size: 13px;
  color: #8a8f95;
  margin-top: 4px;
}

/* Photo variant of the rail card. Sectors with few partner logos interleave
 * these between logo cards so each marquee column holds enough cards for the
 * -50% loop to read as seamless; the two logo-less sectors build their whole
 * hero rail out of them. Height and background-image go inline per card. */
.bk-card.bk-card-photo {
  padding: 0;
  border: none;
  background-color: #cfd4da;
  background-size: cover;
  background-position: center;
}

/* ═══ HERO — RAIL VARIANT ═══════════════════════════════════════════════════
 * For sectors with no partner logos: the hero itself takes the rail layout —
 * copy and calls to action on the left, two rolling columns of category
 * photography on the right. Those pages then carry no separate rail section.
 * The right column reuses .bk-rail-cols / .bk-rail-up / .bk-rail-dn as-is. */
.bk-hero-rail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.4vw, 64px);
  align-items: center;
  padding: 88px clamp(24px, 5vw, 72px) 56px;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 82vh;
  box-sizing: border-box;
}

.bk-hero-rail h1 {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(32px, 3.9vw, 54px);
  line-height: 1.1;
  letter-spacing: -.038em;
  color: var(--bk-ink-deep);
  margin: 0;
}

.bk-hero-rail .bk-hero-sub {
  margin: 26px 0 0;
  max-width: 520px;
}

.bk-hero-rail .bk-hero-actions,
.bk-hero-rail .bk-hero-keys {
  justify-content: flex-start;
}

.bk-hero-rail .bk-hero-keys {
  margin-top: 40px;
}

/* ═══ REALITY ═══════════════════════════════════════════════════════════════ */
.bk-reality {
  padding: 96px clamp(24px, 5vw, 84px);
  margin: 0 var(--bk-gutter);
}

.bk-reality-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 5.6vw, 84px);
  align-items: start;
}

.bk-reality-lead {
  position: sticky;
  top: 120px;
}

.bk-reality-lead p {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.75;
  color: var(--bk-blue);
  margin: 26px 0 0;
  max-width: 480px;
}

.bk-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8f95;
  margin-bottom: 14px;
}

.bk-barriers {
  display: flex;
  flex-direction: column;
}

/* .bk-numbers deliberately has no horizontal padding — every child brings its
   own inset. A barriers list used as a stat legend needs the same one the stat
   grid above it uses, so the two line up. */
.bk-numbers-legend {
  margin: 32px clamp(24px, 5vw, 84px) 0;
}

/* Names which series a stat grid holds. The two grids on the complaints page
   look like one run of figures but are not — the year grid is cumulative, the
   status grid is current-year only. Sits tight above its own grid, so the
   grid drops the 64px top margin it uses when it follows a section head. */
.bk-statgrid-label {
  margin: 40px clamp(24px, 5vw, 84px) 0;
}

.bk-statgrid-label + .bk-statgrid { margin-top: 14px; }

.bk-barrier {
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 26px 14px;
  border-top: 1px solid #ececec;
  transition: background .25s var(--bk-ease);
}

.bk-barrier:last-child { border-bottom: 1px solid #ececec; }

/* The comp nudges the row content right on hover. Done on the children with a
 * transform rather than the row's padding-left, so the tint still spans the
 * full width but nothing reflows. */
.bk-barrier > * {
  transition: transform .25s var(--bk-ease);
}

.bk-barrier:hover { background: var(--bk-canvas); }
.bk-barrier:hover > * { transform: translateX(12px); }

.bk-barrier-n {
  font-size: 18px;
  color: var(--bk-blue);
  flex: none;
}

.bk-barrier-t {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: #2b2f33;
}

/* ═══ MECHANISM ═════════════════════════════════════════════════════════════ */
.bk-mech {
  padding: 120px clamp(24px, 5vw, 72px) 70px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  background-image: radial-gradient(circle, rgba(27, 27, 27, .045) 1.1px, transparent 1.1px);
  background-size: 46px 14px;
}

.bk-mech-beat {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.038em;
}

.bk-mech-beat:nth-child(2) {
  margin-left: 14%;
  color: var(--bk-blue);
}

.bk-mech-beat:nth-child(3) { margin-left: 30%; }

.bk-spine {
  position: relative;
  margin-top: 88px;
}

.bk-spine-track {
  position: absolute;
  left: 24px;
  top: 12px;
  bottom: 26px;
  width: 1px;
  background: #e3e5e7;
}

.bk-spine-fill {
  position: absolute;
  left: 24px;
  top: 12px;
  width: 1px;
  height: 0;
  background: var(--bk-blue);
  transform-origin: top;
}

.bk-step {
  position: relative;
  padding: 0 0 72px 104px;
}

.bk-step:last-child { padding-bottom: 8px; }

.bk-step-node {
  position: absolute;
  left: 18px;
  top: 20px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c9ced4;
  box-shadow: 0 0 0 6px rgba(33, 81, 245, 0);
  transform: scale(.82);
  transition: background .3s var(--bk-ease), box-shadow .45s var(--bk-ease-out),
    transform .45s var(--bk-ease-out);
}

.bk-step-node.bk-on {
  background: var(--bk-blue);
  box-shadow: 0 0 0 6px rgba(33, 81, 245, .14);
  transform: scale(1);
}

.bk-step-ghost {
  position: absolute;
  left: 74px;
  top: -46px;
  font-size: clamp(90px, 11vw, 160px);
  letter-spacing: -.045em;
  color: #eef0f3;
  user-select: none;
  pointer-events: none;
}

.bk-step-body { position: relative; }
.bk-step-body.bk-indent { margin-left: 14%; }

.bk-step-title {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 33px);
  line-height: 1.2;
  letter-spacing: -.033em;
}

.bk-step-desc {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.9;
  color: var(--bk-muted);
  margin-top: 14px;
  max-width: 620px;
}

.bk-step-desc .bk-dot { color: var(--bk-blue); }

/* Words start grey and take their real colour as the block scrolls through. */
.bk-scrub-w {
  color: #c6cacf;
  transition: color .25s linear;
}

.bk-orb {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  outline: 1.2px dotted rgba(33, 81, 245, .4);
  outline-offset: 12px;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}

.bk-orb-a {
  right: 3%;
  top: -20px;
  width: 120px;
  height: 120px;
  background: linear-gradient(160deg, #b9c8dd, #6d7f96);
  animation: bkFloatA 8s ease-in-out infinite;
}

.bk-orb-b {
  right: 2%;
  top: -26px;
  width: 104px;
  height: 104px;
  background: linear-gradient(160deg, #c3d4c8, #75907d);
  animation: bkFloatB 9s ease-in-out infinite;
}

/* ═══ JOIN ══════════════════════════════════════════════════════════════════ */
.bk-join {
  margin: 40px var(--bk-gutter);
  padding: 88px clamp(24px, 5vw, 72px);
  text-align: center;
}

.bk-tabs {
  display: inline-flex;
  gap: 6px;
  background: #f1f3f4;
  border-radius: 999px;
  padding: 6px;
  margin-top: 38px;
  flex-wrap: wrap;
  justify-content: center;
}

.bk-tab {
  padding: 12px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--bk-muted);
  white-space: nowrap;
  transition: background .25s var(--bk-ease), color .25s var(--bk-ease);
}

.bk-tab[aria-selected="true"],
.bk-tab.active {
  background: var(--bk-ink);
  color: #fff;
}

.bk-role {
  max-width: 620px;
  margin: 36px auto 0;
}

.bk-role-title {
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 24px);
}

.bk-role-desc {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 12px;
}

.bk-role .bk-btn { margin-top: 28px; }

/* Every role panel ships in the markup; the script only toggles `hidden`, so
 * the page keeps working (all panels visible, stacked) without JavaScript. */
.bk-role[hidden] { display: none; }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  /* Same last-row logic on a 2-col grid. An odd count (credit/investments have
     9) leaves a single orphan cell on the final row — :nth-last-child(-n+2)
     catches it because it is both a row-start and within 2 of the end. */
  .bk-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-stat:nth-child(3n) { border-right: 1px solid var(--bk-line); }
  .bk-stat:nth-child(2n) { border-right: none; }
  .bk-stat:nth-child(3n+1):nth-last-child(-n+3),
  .bk-stat:nth-child(3n+1):nth-last-child(-n+3) ~ .bk-stat { border-bottom: 1px solid var(--bk-line); }
  .bk-stat:nth-child(2n+1):nth-last-child(-n+2),
  .bk-stat:nth-child(2n+1):nth-last-child(-n+2) ~ .bk-stat { border-bottom: none; }

  .bk-rail { grid-template-columns: 1fr; }
  .bk-hero-rail { grid-template-columns: 1fr; min-height: 0; padding-top: 64px; }
  .bk-rail-cols { height: 520px; }
  .bk-reality-grid { grid-template-columns: 1fr; }
  .bk-reality-lead { position: static; }
  .bk-mech-beat:nth-child(2),
  .bk-mech-beat:nth-child(3) { margin-left: 0; }
  .bk-step-body.bk-indent { margin-left: 0; }
  .bk-orb { display: none; }
}

@media (max-width: 700px) {
  /* One step-down for every panel that uses the token, not just these three.
     Previously .bk-directory, .bk-escalate-panel, .bk-role-close, .bk-service-plane,
     .bk-rfp-ledger and .bk-hold-return stayed at 32px here, so a phone showed
     adjacent sections with different left edges. */
  .bk { --bk-gutter: 16px; }

  .bk-hero { padding: 72px 20px 64px; min-height: 0; }
  .bk-hero-rail { padding: 56px 20px 48px; }
  .bk-hero-card { width: 210px; height: 46vh; min-height: 300px; }
  .bk-statgrid { grid-template-columns: 1fr; margin-top: 40px; }
  .bk-stat { border-right: none !important; border-bottom: 1px solid var(--bk-line) !important; }
  .bk-stat:last-child { border-bottom: none !important; }
  .bk-rail-cols { grid-template-columns: 1fr; height: 440px; }
  .bk-rail-dn { display: none; }
  .bk-step { padding-left: 62px; }
  .bk-step-ghost { left: 44px; top: -30px; }
  .bk-btn { padding: 14px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-hero-track,
  .bk-rail-up,
  .bk-rail-dn,
  .bk-orb-a,
  .bk-orb-b { animation: none !important; }

  .bk-rv { opacity: 1; transform: none; transition: none; }
  .bk-scrub-w { color: inherit !important; }
  /* Covers both hero variants — the intro cascade is opt-in per element. */
  [data-bk-intro] { animation: none !important; opacity: 1 !important; }
}

/* ═══ ABOUT PAGE ════════════════════════════════════════════════════════════
 * Components for pages/about-us.html — the institutional-narrative page.
 * Signature move: the journey timeline — one vertical hairline the years hang
 * off, with the page's Canvas-2D living-network map of India growing behind
 * it as the reader scrolls. All entries documented in DESIGN.md.
 */

/* Hero variant 3: a single photograph dissolved into the paper by the veil,
 * instead of the band marquee. */
.bk-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.bk-hero-about {
  min-height: 76vh;
  /* This variant carries no marquee band, so its content is far shorter than the
     min-height and used to sit at the top of the box — leaving roughly a quarter
     screen of dead canvas under the CTAs. Centring costs nothing on the pages
     whose content already fills the height. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Imagery dissolves into the surface it sits on — never a hard rectangle. */
.bk-fade-b {
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 98%);
}

/* ── Journey timeline ─────────────────────────────────────────────────────── */
.bk-tl { position: relative; }

.bk-tl-stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: calc(100vh / var(--ui-scale, 1));
  pointer-events: none;
}

.bk-tl-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.bk-tl-content {
  position: relative;
  z-index: 1;
  margin-top: calc(-100vh / var(--ui-scale, 1));
  /* The tail keeps the sticky canvas pinned through the finale — without it
     the network scrolls away exactly at the 500M moment. */
  padding: 96px 0 calc(54vh / var(--ui-scale, 1));
}

.bk-tl-col {
  --tl-indent: 46px;
  max-width: 640px;
}

.bk-tl-lead {
  font-size: clamp(16.5px, 1.42vw, 19.5px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 22px;
  max-width: 520px;
}

.bk-tl-years {
  list-style: none;
  position: relative;
  margin: 64px 0 0;
  padding: 0;
}

/* The hairline the whole story hangs off. */
.bk-tl-years::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 0;
  width: 1px;
  background: var(--bk-line);
}

/* The same line in blue, drawn in as the reader descends. Scaled, never grown:
 * --tl-fill is written per frame by the page's scroll loop. */
.bk-tl-years::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 0;
  width: 1px;
  background: var(--bk-blue);
  transform: scaleY(var(--tl-fill, 0));
  transform-origin: top;
}

.bk-tl-year { padding: 30px 0 26px var(--tl-indent); }

.bk-tl-yr {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.036em;
  color: #0d1b2e;
  margin: 0 0 12px;
}

.bk-tl-entries {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.bk-tl-entry,
.bk-tl-beat {
  position: relative;
  border-top: 1px solid var(--bk-line);
  padding: 20px 12px 20px 0;
  /* A whisper of the paper colour keeps the copy readable where the map
     passes underneath, and dissolves into the canvas everywhere else. */
  background: rgba(247, 248, 248, .8);
  transition: background .25s var(--bk-ease);
}

.bk-tl-entry > *,
.bk-tl-beat > * {
  position: relative;
  transition: transform .25s var(--bk-ease);
}

.bk-tl-entry:hover { background: #fff; }
.bk-tl-entry:hover > * { transform: translateX(12px); }

/* ── Landmarks: the four transaction milestones and the finale ──────────────
 * A milestone announces itself twice — a node takes the blue as the spine
 * fill reaches it, and a wash sweeps across the row from the left. Scaled,
 * never sized, so neither touches layout. */
.bk-tl-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #e4eefc;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .75s var(--bk-ease-out);
}

.bk-lit > .bk-tl-wash { transform: scaleX(1); }

/* The node sits out on the spine itself, so it hangs back over the indent. */
.bk-tl-beat::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--tl-indent));
  top: 26px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  background: #c9ced4;
  box-shadow: 0 0 0 6px rgba(33, 81, 245, 0);
  transform: scale(.82);
  transition: background .3s var(--bk-ease), box-shadow .45s var(--bk-ease-out),
    transform .45s var(--bk-ease-out);
}

.bk-tl-beat.bk-lit::before {
  background: var(--bk-blue);
  box-shadow: 0 0 0 6px rgba(33, 81, 245, .14);
  transform: scale(1);
}

.bk-tl-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a8f95;
}

.bk-tl-text {
  font-size: clamp(15px, 1.3vw, 17.5px);
  line-height: 1.6;
  color: var(--bk-muted);
  margin-top: 8px;
  max-width: 520px;
}

.bk-tl-text strong {
  font-weight: 600;
  color: var(--bk-ink);
}

.bk-tl-beat {
  padding-top: 26px;
  padding-bottom: 26px;
}

.bk-tl-beat-num { margin-top: 10px; }

.bk-tl-beat-num b {
  font-weight: 700;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -.036em;
  color: #0d1b2e;
}

.bk-tl-beat-num i {
  font-style: normal;
  font-weight: 600;
  font-size: clamp(16.5px, 1.42vw, 19.5px);
  color: #1877F2;
  margin-left: 2px;
}

.bk-tl-beat-word {
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 33px);
  letter-spacing: -.033em;
  line-height: 1.2;
  color: var(--bk-ink-deep);
  margin-top: 10px;
}

.bk-tl-beat .bk-tl-text { margin-top: 6px; }

.bk-tl-finale {
  /* The last milestone clears the viewport before 500M arrives. */
  padding: calc(46vh / var(--ui-scale, 1)) 0 8px var(--tl-indent);
}

/* The figure the whole spine has been climbing towards, so its wash is the
 * one that takes a whole block rather than a row. */
.bk-tl-finale-in {
  position: relative;
  border-radius: 28px;
  padding: 30px clamp(20px, 3vw, 38px) 34px;
  margin-left: clamp(-38px, -3vw, -20px);
}

.bk-tl-finale-in > *:not(.bk-tl-wash) { position: relative; }

.bk-tl-finale-in .bk-tl-wash {
  border-radius: 28px;
  transition: transform 1.05s var(--bk-ease-out);
}

.bk-tl-finale-num b {
  font-weight: 700;
  font-size: clamp(90px, 11vw, 160px);
  line-height: 1;
  letter-spacing: -.045em;
  color: #0d1b2e;
}

.bk-tl-finale-num i {
  font-style: normal;
  font-weight: 600;
  font-size: clamp(34px, 4vw, 56px);
  color: #1877F2;
  margin-left: 6px;
}

.bk-tl-finale .bk-eyebrow {
  margin-top: 18px;
  color: var(--bk-blue);
}

.bk-tl-finale-line {
  font-size: clamp(16.5px, 1.42vw, 19.5px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 18px;
  max-width: 30ch;
}

/* ── Why ONDC matters ─────────────────────────────────────────────────────── */
.bk-matters { padding: 88px clamp(24px, 5vw, 84px); }

.bk-matters-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 5.6vw, 84px);
  align-items: start;
}

.bk-matters-sub {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.65;
  color: var(--bk-muted);
  margin: -4px 0 10px;
}

.bk-matters-gap { margin-top: 48px; }

/* ── Investor relations ───────────────────────────────────────────────────── */
.bk-inst {
  padding: 100px clamp(24px, 5vw, 72px);
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.bk-inst-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 4.4vw, 64px);
  align-items: start;
}

.bk-inst-copy {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 22px;
  max-width: 480px;
}

.bk-inst-rows { border-top: 1px solid var(--bk-line); }

.bk-inst-row {
  border-bottom: 1px solid var(--bk-line);
  padding: 24px 0 26px;
}

.bk-inst-row .bk-eyebrow { margin-bottom: 8px; }

.bk-inst-name {
  font-weight: 600;
  font-size: 18px;
  color: var(--bk-ink);
}

.bk-inst-desc {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.65;
  color: var(--bk-muted);
  margin-top: 6px;
}

/* ── The wall of institutions ──────────────────────────────────────────────
 * One supplied grid image, composed rather than dropped in: a white panel
 * floating on the dotted canvas, its own header row and hairline, and the
 * artwork's edges dissolved into the panel so no raw rectangle shows. */
.bk-inst-logos {
  margin-top: 76px;
  background: #fff;
  border-radius: 28px;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(16px, 2vw, 26px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}

.bk-inst-logos-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bk-line);
}

.bk-inst-logos-head .bk-eyebrow { margin-bottom: 0; }

.bk-inst-count {
  white-space: nowrap;
}

.bk-inst-count b {
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: -.036em;
  color: #0d1b2e;
}

.bk-inst-count i {
  font-style: normal;
  font-weight: 600;
  font-size: clamp(15.5px, 1.32vw, 18px);
  color: var(--bk-muted);
  margin-left: 8px;
}

.bk-inst-logos img {
  width: 100%;
  height: auto;
  margin-top: 22px;
  /* Feathers the artwork's own margins into the panel. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

/* ── Board of directors ───────────────────────────────────────────────────── */
.bk-people {
  position: relative;
  overflow: clip;
  padding: 0;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.bk-people-stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: calc(100vh / var(--ui-scale, 1));
  margin-bottom: calc(-100vh / var(--ui-scale, 1));
  pointer-events: none;
}

.bk-people-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .34;
}

.bk-people-content {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px clamp(24px, 5vw, 72px);
  box-sizing: border-box;
}

.bk-people-head { max-width: 640px; }

.bk-people-lead {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 22px;
}

.bk-people-group { margin-top: 72px; }

/* The supplied portraits are about 200px wide. A compact 220px column keeps
 * them crisp and turns the board into a readable directory rather than a wall
 * of oversized portrait panels. */
.bk-people-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 220px));
  justify-content: center;
  gap: 20px;
}

.bk-person {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: clip;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
  transition: box-shadow .3s var(--bk-ease), transform .3s var(--bk-ease);
}

.bk-person:hover {
  box-shadow: 0 16px 38px rgba(0, 0, 0, .10);
  transform: translateY(-3px);
}

.bk-person-photo {
  width: 100%;
  aspect-ratio: 6 / 7;
  height: auto;
  object-fit: cover;
  object-position: top center;
  background: #eef0f3;
}

/* Top-aligned, not margin-top:auto. Bottom-aligning the body put the border-top
   at a different height on every card in the row, because the role lines wrap
   to one or two lines depending on the person. Anchoring it under the
   fixed 6:7 photo puts every rule and every name on one baseline. */
.bk-person-body {
  margin-top: 0;
  border-top: 1px solid var(--bk-line);
  padding: 12px 16px 16px;
}

.bk-person-name {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  color: var(--bk-ink);
}

.bk-person-role {
  font-size: 13px;
  color: var(--bk-muted);
  line-height: 1.45;
  margin-top: 4px;
}

.bk-person-org {
  font-size: 13px;
  color: #8a8f95;
  line-height: 1.45;
  margin-top: 2px;
}

/* ── Recognitions ─────────────────────────────────────────────────────────── */
.bk-awards { padding: 88px clamp(24px, 5vw, 84px); }

.bk-awards-head { max-width: 720px; }

.bk-awards-lead {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 22px;
}

/* The one recognition the section leads on keeps its full size, and opens the
 * same lightbox the chronology rows do. */
.bk-award-feature {
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  margin: 56px 0 8px;
}

.bk-award-feature:focus-visible {
  outline: 3px solid var(--bk-blue);
  outline-offset: 6px;
}

.bk-award-feature-media {
  display: block;
  border-radius: 22px;
  overflow: clip;
}

.bk-award-feature-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .55s var(--bk-ease-out);
}

.bk-award-feature:hover .bk-award-feature-media img { transform: scale(1.02); }

.bk-award-feature-body { display: block; }

.bk-award-feature-title {
  display: block;
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 33px);
  letter-spacing: -.033em;
  line-height: 1.2;
  margin-top: 4px;
}

.bk-award-feature-meta {
  display: block;
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 12px;
}

.bk-award-feature-meta strong {
  font-weight: 600;
  color: var(--bk-ink);
}

/* ── The chronology ────────────────────────────────────────────────────────
 * The recognitions in the order they arrived. Grouped by year, each year's
 * numeral holding beside its rows while they scroll past, and each group
 * stepping further in — so the stack reads as a descent through time rather
 * than as a wall of equal cards. */
.bk-chrono { margin-top: 60px; }

.bk-chrono-group {
  display: grid;
  grid-template-columns: clamp(84px, 10vw, 150px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
  margin-left: calc(var(--step, 0) * 4%);
}

.bk-chrono-yr {
  position: sticky;
  top: 128px;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -.036em;
  /* Quiet, but not a ghost: the year is the only place this row's date is
     stated, so it has to carry its own contrast at display size. */
  color: #8a8f95;
  user-select: none;
}

.bk-chrono-rows { border-top: 1px solid var(--bk-line); }

.bk-award {
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--bk-line);
  background: transparent;
  padding: 20px 14px 20px 0;
  display: grid;
  grid-template-columns: clamp(68px, 7vw, 104px) minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  transition: background .25s var(--bk-ease);
}

.bk-award > * { transition: transform .25s var(--bk-ease); }

.bk-award:hover { background: var(--bk-canvas); }
.bk-award:hover > * { transform: translateX(12px); }

.bk-award:focus-visible {
  outline: 3px solid var(--bk-blue);
  outline-offset: 3px;
}

.bk-award-media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: clip;
  background: #eef0f3;
}

.bk-award-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--bk-ease-out);
}

.bk-award:hover .bk-award-media img { transform: scale(1.05); }

.bk-award-body { display: block; }

.bk-award-title {
  display: block;
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.3;
  color: var(--bk-ink);
}

.bk-award-name {
  display: block;
  font-size: 13px;
  /* Muted rather than quiet — this line sits inside a control. */
  color: var(--bk-muted);
  line-height: 1.5;
  margin-top: 5px;
}

.bk-award-view {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.bk-award:hover .bk-award-view { background-size: 100% 1.5px; }

/* ── Award lightbox — FLIP expand, fading the page to paper behind it ────── */
.bk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}

.bk-lightbox.open { display: flex; }

/* No backdrop blur: re-blurring the whole page every frame while the panel
 * moves above it is the single most expensive thing this transition can do,
 * and the paper wash already reads as dissolved rather than dimmed. */
.bk-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(247, 248, 248, .94);
  opacity: 0;
  transition: opacity .42s var(--bk-ease-out);
}

.bk-lightbox.in .bk-lightbox-backdrop { opacity: 1; }

.bk-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(1000px, 100%);
  max-height: 88vh;
  overflow: clip;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .13);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  opacity: 0;
  /* Timing lives here so the script only ever sets a transform value. */
  transition: transform .52s var(--bk-ease-out), opacity .3s var(--bk-ease-out);
  will-change: transform, opacity;
}

.bk-lightbox.in .bk-lightbox-panel { opacity: 1; }

.bk-lightbox.bk-swish-out .bk-lightbox-panel {
  transition: transform .44s var(--bk-ease-out), opacity .34s var(--bk-ease-out) .06s;
}

/* The swish: a blue sheen that crosses the panel as it opens and crosses back
 * as it merges into the row. It carries the moment — and it covers the middle
 * of the flight, which is what lets the panel travel without its contents
 * reading as squashed. One transform on one element, so it stays cheap. */
.bk-lightbox-swish {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 28px;
  background: linear-gradient(100deg,
      rgba(228, 238, 252, 0) 0%,
      rgba(228, 238, 252, .92) 34%,
      rgba(33, 81, 245, .20) 50%,
      rgba(228, 238, 252, .92) 66%,
      rgba(228, 238, 252, 0) 100%);
  opacity: 0;
  transform: translateX(-118%);
  will-change: transform, opacity;
}

@keyframes bkSwishIn {
  0% { opacity: 0; transform: translateX(-118%); }
  14% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(118%); }
}

@keyframes bkSwishOut {
  0% { opacity: 0; transform: translateX(118%); }
  14% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-118%); }
}

.bk-lightbox.bk-swish-in .bk-lightbox-swish { animation: bkSwishIn .64s var(--bk-ease-out) forwards; }
.bk-lightbox.bk-swish-out .bk-lightbox-swish { animation: bkSwishOut .46s var(--bk-ease-out) forwards; }

.bk-lightbox-media {
  position: relative;
  min-height: 340px;
  background: #eef0f3;
}

.bk-lightbox-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
}

.bk-lightbox-body {
  padding: clamp(26px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
}

/* The delay belongs to the way in only. Carrying it into the close left the
 * copy sitting at full strength for a quarter second while the panel was
 * already flying away, which is most of what read as a stutter. */
.bk-lightbox-content {
  opacity: 0;
  transition: opacity .26s var(--bk-ease);
}

.bk-lightbox.in .bk-lightbox-content {
  opacity: 1;
  transition-delay: .2s;
}

.bk-lightbox-title {
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 33px);
  letter-spacing: -.033em;
  line-height: 1.2;
  margin-top: 4px;
}

.bk-lightbox-meta {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 12px;
}

.bk-lightbox-meta strong {
  font-weight: 600;
  color: var(--bk-ink);
}

.bk-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

/* ── Newsletters ──────────────────────────────────────────────────────────── */
.bk-nl {
  padding: 100px clamp(24px, 5vw, 72px);
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.bk-nl-head { max-width: 640px; }

.bk-nl-lead {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin-top: 22px;
  max-width: 520px;
}

.bk-nl-rows {
  margin-top: 56px;
  border-top: 1px solid var(--bk-line);
  max-width: 980px;
}

.bk-nl-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding: 28px 14px 28px 0;
  border-bottom: 1px solid var(--bk-line);
  transition: background .25s var(--bk-ease);
}

.bk-nl-row > * { transition: transform .25s var(--bk-ease); }

.bk-nl-row:hover { background: #fff; }
.bk-nl-row:hover > * { transform: translateX(12px); }

.bk-nl-row .bk-eyebrow { margin-bottom: 0; }

.bk-nl-title {
  font-weight: 600;
  font-size: 18px;
  color: var(--bk-ink);
}

.bk-nl-desc {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.6;
  color: var(--bk-muted);
}

.bk-nl-row .bk-ul {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.bk-nl-row:hover .bk-ul { background-size: 100% 1.5px; }

/* ── Closing invitation ───────────────────────────────────────────────────── */
.bk-about-close {
  padding: 110px 24px 130px;
  text-align: center;
}

.bk-about-close .bk-h2 {
  max-width: 760px;
  margin: 0 auto;
}

.bk-about-close .bk-hero-actions { margin-top: 36px; }

/* ── About page responsive ────────────────────────────────────────────────── */
/* Ten members: 5-up lands them as an even 5x2 instead of 4/4/2 with an orphan
   pair -- both MacBook Air widths (1440 and 1280) get the even row. Below ~1180px
   five 220px tracks get too narrow for the portraits, so it steps back to 4-up.  */
@media (max-width: 1180px) {
  .bk-people-grid { grid-template-columns: repeat(4, minmax(0, 220px)); }
}

@media (max-width: 1100px) {
  .bk-people-grid { grid-template-columns: repeat(2, minmax(0, 220px)); }
}

@media (max-width: 1000px) {
  .bk-matters-grid,
  .bk-inst-grid { grid-template-columns: 1fr; }

  .bk-nl-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 860px) {
  .bk-tl-col { max-width: none; }
  .bk-tl-content { padding: 68px 0 calc(48vh / var(--ui-scale, 1)); }
  .bk-tl-finale { padding-top: calc(40vh / var(--ui-scale, 1)); }

  .bk-award-feature { grid-template-columns: 1fr; }

  /* The year stops holding beside its rows and simply heads them. */
  .bk-chrono-group {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-left: 0;
  }

  .bk-chrono-yr { position: static; }

  .bk-award {
    grid-template-columns: clamp(68px, 16vw, 96px) minmax(0, 1fr);
    align-items: start;
  }

  .bk-award-view { display: none; }

  .bk-lightbox-panel { grid-template-columns: 1fr; }

  .bk-lightbox-media {
    min-height: 200px;
    max-height: 34vh;
  }

  .bk-lightbox-media img {
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
}

@media (max-width: 700px) {
  .bk-tl-col { --tl-indent: 26px; }
  .bk-people-content { padding: 80px 20px; }
  .bk-people-grid { grid-template-columns: minmax(0, 220px); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-lightbox-panel {
    transform: none !important;
    transition: opacity .2s var(--bk-ease) !important;
  }

  .bk-lightbox-swish { display: none; }
  .bk-award-media img,
  .bk-award-feature-media img { transition: none !important; }

  /* The spine, its landmarks and their washes all render finished. */
  .bk-tl-years::after { transform: scaleY(1); }

  .bk-tl-wash {
    transform: scaleX(1);
    transition: none;
  }

  .bk-tl-beat::before {
    background: var(--bk-blue);
    box-shadow: 0 0 0 6px rgba(33, 81, 245, .14);
    transform: scale(1);
    transition: none;
  }
}

/* ═══ ROLE PARTICIPANT DIRECTORY ═══════════════════════════════════════════
 * Buyer and seller role pages are directories, not category narratives. The
 * live registry is presented as a quiet logo ledger; shared Beckn typography,
 * canvas, hairlines and controls provide the family resemblance. */
.bk-role-page {
  min-height: 100vh;
  scrollbar-color: #b8bdc4 transparent;
  caret-color: var(--bk-blue);
}

.bk-role-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  gap: clamp(42px, 7vw, 112px);
  align-items: end;
  max-width: 1440px;
  min-height: 570px;
  margin: 0 auto;
  padding: clamp(92px, 10vw, 148px) clamp(24px, 5vw, 72px) 94px;
  box-sizing: border-box;
  position: relative;
}

.bk-role-hero::before {
  content: '';
  position: absolute;
  inset: 54px clamp(24px, 5vw, 72px) auto auto;
  width: clamp(150px, 18vw, 260px);
  height: clamp(150px, 18vw, 260px);
  border: 1px dotted rgba(33, 81, 245, .34);
  border-radius: 50%;
  pointer-events: none;
}

.bk-role-hero h1 {
  max-width: 880px;
  margin: 0;
  font-size: clamp(42px, 6vw, 82px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.bk-role-hero-copy {
  max-width: 700px;
  margin: 28px 0 0;
  color: var(--bk-muted);
  font-size: clamp(17px, 1.46vw, 20.5px);
  line-height: 1.7;
}

.bk-role-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.bk-role-tally {
  position: relative;
  padding: 34px 0 8px 34px;
  border-left: 1px solid var(--bk-line);
  border-top: 1px solid var(--bk-line);
}

.bk-role-tally-value {
  display: block;
  min-height: 1em;
  color: #0d1b2e;
  font-size: clamp(62px, 8vw, 112px);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.bk-role-tally-label {
  display: block;
  max-width: 220px;
  margin-top: 20px;
  color: var(--bk-muted);
  font-size: 14px;
  line-height: 1.55;
}

.bk-role-tally-source {
  display: block;
  margin-top: 12px;
  color: #9a9fa5;
  font-size: 11px;
  line-height: 1.5;
}

.bk-directory {
  /* Without a cap the cards stretch to ~600px each on a wide monitor around a
     small logo. 1440px is the documented content column. */
  max-width: 1440px;
  margin: 0 auto 42px;
  margin-inline: max(var(--bk-gutter), (100% - 1440px) / 2);
  padding: clamp(52px, 6vw, 88px) var(--bk-directory-pad) clamp(64px, 7vw, 104px);
  background: #fff;
  border-radius: 28px;
}

.bk-directory-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
  gap: 36px;
  align-items: end;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--bk-line);
}

.bk-directory-heading p {
  max-width: 480px;
  justify-self: end;
  color: var(--bk-muted);
  font-size: 15px;
  line-height: 1.7;
}

.bk-directory-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(150px, .55fr)) auto;
  gap: 14px;
  align-items: end;
  padding: 30px 0 24px;
}

.bk-directory-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bk-directory-field[hidden] { display: none; }

.bk-directory-field label {
  color: #787d84;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bk-directory-input,
.bk-directory-select {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #d7d9db;
  border-radius: 12px;
  outline: none;
  background: #fff;
  color: var(--bk-ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .2s var(--bk-ease), box-shadow .2s var(--bk-ease);
}

.bk-directory-input::placeholder { color: #777c82; }

.bk-directory-input:focus,
.bk-directory-select:focus {
  border-color: var(--bk-blue);
  box-shadow: 0 0 0 3px rgba(33, 81, 245, .12);
}

.bk-directory-clear {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #d7d9db;
  border-radius: 999px;
  background: #fff;
  color: var(--bk-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s var(--bk-ease), color .2s var(--bk-ease);
}

.bk-directory-clear:hover { border-color: var(--bk-ink); }
.bk-directory-clear:disabled { color: #9fa4aa; cursor: default; }

.bk-directory-summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-height: 42px;
  margin-bottom: 22px;
  color: var(--bk-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.bk-directory-source-note {
  color: #8a8f95;
  text-align: right;
}

.bk-directory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  min-height: 300px;
}

.bk-directory-card {
  min-width: 0;
  min-height: 286px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e7e9;
  border-radius: 16px;
}

.bk-directory-card-kind {
  min-height: 31px;
  color: #8a8f95;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bk-directory-logo-wrap {
  height: 104px;
  margin: 16px 0 18px;
  display: grid;
  place-items: center;
}

.bk-directory-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.bk-directory-monogram {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #eef0f3;
  color: #4d535a;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.bk-directory-card-body {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--bk-line);
}

.bk-directory-card h3 {
  margin: 0;
  color: var(--bk-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bk-directory-meta {
  margin: 7px 0 0;
  color: #777c82;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.bk-directory-state {
  min-height: 330px;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  text-align: center;
  border-top: 1px solid var(--bk-line);
  border-bottom: 1px solid var(--bk-line);
}

.bk-directory-state[hidden] { display: none; }

.bk-directory-state-inner { max-width: 500px; }
.bk-directory-state h3 { margin: 0; font-size: 24px; font-weight: 600; }
.bk-directory-state p { margin: 12px 0 0; color: var(--bk-muted); font-size: 14px; line-height: 1.7; }
.bk-directory-state .bk-btn { margin-top: 24px; }
.bk-directory-state-link { display: inline-block; margin-top: 20px; }

.bk-directory-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 34px;
}

.bk-directory-page-note {
  color: var(--bk-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.bk-directory-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.bk-directory-page-button {
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #d7d9db;
  border-radius: 999px;
  background: #fff;
  color: var(--bk-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background .2s var(--bk-ease), color .2s var(--bk-ease), border-color .2s var(--bk-ease);
}

.bk-directory-page-button:hover:not(:disabled) { border-color: var(--bk-ink); }
.bk-directory-page-button[aria-current='page'] { background: var(--bk-ink); color: #fff; border-color: var(--bk-ink); }
.bk-directory-page-button:disabled { color: #a5a9ae; cursor: default; }
.bk-directory-ellipsis { align-self: center; padding: 0 4px; color: #8a8f95; }

.bk-role-story {
  max-width: 1280px;
  margin: 0 auto;
  padding: 110px clamp(24px, 5vw, 72px);
}

.bk-role-story-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: start;
}

.bk-role-story-copy {
  max-width: 650px;
  color: var(--bk-muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.75;
}

.bk-role-story-copy p + p { margin-top: 20px; }
.bk-role-story-copy .bk-ul { display: inline-block; margin-top: 22px; }

.bk-requirements {
  margin-top: 72px;
  border-top: 1px solid var(--bk-line);
}

.bk-requirement {
  display: grid;
  grid-template-columns: 72px minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: clamp(20px, 4vw, 68px);
  align-items: start;
  padding: 34px 12px;
  border-bottom: 1px solid var(--bk-line);
  transition: background .25s var(--bk-ease);
}

.bk-requirement:hover { background: rgba(255, 255, 255, .72); }
.bk-requirement-number { color: var(--bk-blue); font-size: 15px; font-variant-numeric: tabular-nums; }
.bk-requirement h3 { margin: 0; font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; line-height: 1.25; }
.bk-requirement p { margin: 0; color: var(--bk-muted); font-size: 14px; line-height: 1.7; }

.bk-node-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 70px;
  border-top: 1px solid var(--bk-line);
  border-bottom: 1px solid var(--bk-line);
}

.bk-node {
  padding: clamp(36px, 5vw, 68px);
}

.bk-node + .bk-node { border-left: 1px solid var(--bk-line); }
.bk-node-code { color: var(--bk-blue); font-size: clamp(50px, 6vw, 82px); font-weight: 400; letter-spacing: -.04em; }
.bk-node h3 { margin: 26px 0 0; font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; letter-spacing: -.03em; }
.bk-node p { max-width: 500px; margin: 18px 0 0; color: var(--bk-muted); font-size: 15px; line-height: 1.75; }

.bk-role-close {
  /* Centres past 1440px but never gives up the shared gutter below it. The
     1440px cap used to live in a later grouped rule whose margin-left/right:auto
     silently cancelled this gutter, so this white panel went edge-to-edge while
     every sibling panel stayed inset. */
  max-width: 1440px;
  margin: 24px auto 42px;
  margin-inline: max(var(--bk-gutter), (100% - 1440px) / 2);
  padding: 92px clamp(24px, 5vw, 72px);
  text-align: center;
  background: #fff;
  border-radius: 28px;
}

.bk-role-close p {
  max-width: 620px;
  margin: 24px auto 0;
  color: var(--bk-muted);
  font-size: 16px;
  line-height: 1.7;
}

.bk-role-close .bk-btn { margin-top: 32px; }

.bk-role-page :where(button, input, select, a):focus-visible {
  outline: 3px solid rgba(33, 81, 245, .36);
  outline-offset: 3px;
}

@media (max-width: 1160px) {
  .bk-directory-controls { grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(150px, .6fr)); }
  .bk-directory-clear { justify-self: start; }
  .bk-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .bk-role-hero { grid-template-columns: 1fr; min-height: 0; }
  .bk-role-hero::before { opacity: .55; }
  .bk-role-tally { max-width: 340px; }
  .bk-directory-heading,
  .bk-role-story-intro { grid-template-columns: 1fr; }
  .bk-directory-heading p { justify-self: start; }
  .bk-directory-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .bk-role-hero { padding: 72px 20px 58px; }
  .bk-role-hero h1 { font-size: clamp(42px, 12vw, 58px); }
  .bk-role-hero::before { top: 28px; right: 20px; }
  .bk-directory { margin: 0 16px 24px; padding: 48px 18px 60px; }
  .bk-directory-controls { grid-template-columns: 1fr; }
  .bk-directory-clear { width: 100%; }
  .bk-directory-summary { align-items: flex-start; flex-direction: column; gap: 8px; }
  .bk-directory-source-note { text-align: left; }
  .bk-directory-grid { grid-template-columns: 1fr; }
  .bk-directory-card { min-height: 250px; }
  .bk-directory-pagination { align-items: flex-start; flex-direction: column; }
  .bk-directory-pages { justify-content: flex-start; }
  .bk-role-story { padding: 84px 20px; }
  .bk-requirement { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .bk-requirement p { grid-column: 2; }
  .bk-node-ledger { grid-template-columns: 1fr; }
  .bk-node + .bk-node { border-left: 0; border-top: 1px solid var(--bk-line); }
  .bk-role-close { margin: 16px; padding: 70px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-directory-input,
  .bk-directory-select,
  .bk-directory-page-button { transition: none !important; }

  .bk-relay-steps::after { transform: scaleY(1); }
}

/* ── Role, library and correspondence extensions ───────────────────────── */
.bk-role-page {
  min-height: 100vh;
}

.bk-role-page .bk-role-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
}

.bk-role-page .bk-role-hero::before {
  border-radius: 0;
  border-left: 0;
  border-bottom: 0;
}

.bk-role-mark {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  min-height: 300px;
  padding: 30px 0 0 30px;
  border-left: 1px solid var(--bk-line);
  border-top: 1px solid var(--bk-line);
  color: var(--bk-blue);
  font-size: clamp(28px, 3.4vw, 54px);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .82;
}

.bk-role-mark span {
  display: block;
  flex: 0 1 170px;
  min-width: 130px;
  max-width: 210px;
  margin: 0 0 22px 20px;
  color: var(--bk-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
}

.bk-role-context,
.bk-role-outcomes {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.bk-role-context {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: clamp(42px, 8vw, 140px);
  padding: 112px clamp(24px, 5vw, 72px) 82px;
}

.bk-role-context h2,
.bk-role-outcomes h2,
.bk-library-head h1,
.bk-library-index h2,
.bk-contact-head h1,
.bk-contact-intro h2 {
  margin: 0;
  color: var(--bk-ink);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: 1.1;
  text-wrap: balance;
}

.bk-role-context p {
  max-width: 680px;
  margin: 0;
  color: var(--bk-muted);
  font-size: clamp(17px, 1.46vw, 20.5px);
  line-height: 1.7;
}

.bk-relay {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px clamp(24px, 5vw, 72px) 112px;
}

.bk-relay-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 42px;
  align-items: end;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--bk-line);
}

.bk-relay-head p {
  max-width: 530px;
  margin: 0;
  color: var(--bk-muted);
  font-size: 15px;
  line-height: 1.75;
}

.bk-relay-steps {
  position: relative;
  border-bottom: 1px solid var(--bk-line);
}

.bk-relay-steps::before,
.bk-relay-steps::after {
  content: '';
  position: absolute;
  left: clamp(36px, 8vw, 112px);
  top: 0;
  bottom: 0;
  width: 1px;
}

.bk-relay-steps::before { background: var(--bk-line); }
.bk-relay-steps::after {
  height: 100%;
  background: var(--bk-blue);
  transform: scaleY(var(--bk-relay-progress, 0));
  transform-origin: top;
}

.bk-relay-step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(72px, 10vw, 140px) minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 4vw, 68px);
  align-items: start;
  padding: 44px 0 42px;
  border-top: 1px solid var(--bk-line);
}

.bk-relay-step:first-child { border-top: 0; }

.bk-relay-step::before {
  content: '';
  position: absolute;
  left: calc(clamp(36px, 8vw, 112px) - 5px);
  top: 52px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--bk-blue);
  border-radius: 50%;
  background: var(--bk-canvas);
}

.bk-relay-step strong {
  color: var(--bk-blue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
}

.bk-relay-step h3 {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 33px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.18;
}

.bk-relay-step p {
  max-width: 520px;
  margin: 0;
  color: var(--bk-muted);
  font-size: 15px;
  line-height: 1.72;
}

.bk-service-plane {
  margin: 0 var(--bk-gutter) 42px;
  padding: clamp(52px, 6vw, 88px) clamp(24px, 5vw, 84px);
  background: #fff;
  border-radius: 28px;
}

.bk-service-plane-head {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 46px;
  align-items: end;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--bk-line);
}

.bk-service-plane-head p {
  max-width: 560px;
  margin: 0;
  color: var(--bk-muted);
  font-size: 16px;
  line-height: 1.72;
}

.bk-service-lanes {
  border-bottom: 1px solid var(--bk-line);
}

.bk-service-lane {
  display: grid;
  grid-template-columns: minmax(110px, .4fr) minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: baseline;
  padding: 36px 10px;
  border-top: 1px solid var(--bk-line);
  transition: background .25s var(--bk-ease);
}

.bk-service-lane:hover { background: var(--bk-canvas); }

.bk-service-lane span {
  color: var(--bk-blue);
  font-size: clamp(50px, 6vw, 82px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .9;
}

.bk-service-lane h3 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.bk-service-lane p {
  margin: 0;
  color: var(--bk-muted);
  font-size: 14px;
  line-height: 1.7;
}

.bk-role-outcomes {
  padding: 92px clamp(24px, 5vw, 72px) 110px;
}

.bk-outcome-rows {
  margin-top: 58px;
  border-top: 1px solid var(--bk-line);
}

.bk-outcome-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, .42fr);
  gap: 40px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--bk-line);
  transition: background .25s var(--bk-ease);
}

.bk-outcome-row > * { transition: transform .25s var(--bk-ease); }
.bk-outcome-row:hover { background: rgba(255, 255, 255, .72); }
.bk-outcome-row:hover > * { transform: translateX(12px); }
.bk-outcome-row h3 { margin: 0; font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -.028em; }
.bk-outcome-row p { margin: 0; color: var(--bk-muted); font-size: 14px; line-height: 1.65; }

.bk-library,
.bk-contact {
  padding: 0 clamp(24px, 5vw, 72px) 52px;
}

.bk-library-head,
.bk-contact-head {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(90px, 10vw, 146px) 0 72px;
}

.bk-library-head h1,
.bk-contact-head h1 { max-width: 930px; }

.bk-library-head p,
.bk-contact-head p {
  max-width: 680px;
  margin: 26px 0 0;
  color: var(--bk-muted);
  font-size: clamp(17px, 1.46vw, 20.5px);
  line-height: 1.7;
}

.bk-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 0;
  border-top: 1px solid var(--bk-ink);
  border-bottom: 1px solid var(--bk-line);
}

.bk-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bk-ink);
  caret-color: var(--bk-blue);
  font: inherit;
  font-size: clamp(22px, 2.5vw, 33px);
  font-weight: 400;
  letter-spacing: -.03em;
}

.bk-search input::placeholder { color: #777c82; opacity: 1; }
.bk-search:focus-within { border-bottom-color: var(--bk-blue); }
.bk-search-kbd { align-self: center; color: var(--bk-muted); font-size: 12px; white-space: nowrap; }

.bk-library-index,
.bk-contact-shell {
  max-width: 1440px;
  margin: 62px auto 0;
  padding: clamp(44px, 6vw, 84px);
  background: #fff;
  border-radius: 28px;
}

.bk-library-index-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .4fr);
  gap: 40px;
  align-items: end;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--bk-line);
}

.bk-library-index-head p { margin: 0; color: var(--bk-muted); font-size: 15px; line-height: 1.7; }
.bk-library-grid { border-top: 1px solid var(--bk-line); margin-top: 44px; }

.bk-library-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .35fr) minmax(34px, auto);
  gap: 24px;
  align-items: end;
  padding: 30px 16px;
  margin: 0 -16px;
  border-bottom: 1px solid var(--bk-line);
  transition: background .25s var(--bk-ease);
}

.bk-library-entry > * { transition: transform .25s var(--bk-ease); }
.bk-library-entry:hover { background: var(--bk-canvas); }
.bk-library-entry:hover > * { transform: translateX(12px); }
.bk-library-entry h3 { margin: 0; font-size: clamp(19px, 1.9vw, 25px); font-weight: 700; letter-spacing: -.03em; }
.bk-library-entry p { max-width: 580px; margin: 10px 0 0; color: var(--bk-muted); font-size: 14px; line-height: 1.65; }
.bk-library-entry-count { color: var(--bk-blue); font-size: 13px; font-weight: 600; text-align: right; }
.bk-library-entry-go { color: var(--bk-blue); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: right; }

.bk-resources-page .res-results { max-width: 1440px; margin: 0 auto; background: #fff; border-bottom: 1px solid var(--bk-line); }
.bk-resources-page .res-results-head { padding: 20px 0; color: var(--bk-muted); font-size: 13px; }
.bk-resources-page .res-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 20px 0; border-top: 1px solid var(--bk-line); color: var(--bk-ink); }
.bk-resources-page .res-row:hover { background: var(--bk-canvas); }
.bk-resources-page .res-row-body { min-width: 0; }
.bk-resources-page .res-row-title { font-size: 16px; font-weight: 600; }
.bk-resources-page .res-row-go { align-self: center; color: var(--bk-blue); font-size: 12px; font-weight: 600; }

.bk-contact-shell { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(260px, .78fr); gap: clamp(44px, 7vw, 108px); }
.bk-contact-intro { margin-bottom: 54px; }
.bk-contact-intro p { max-width: 680px; margin: 18px 0 0; color: var(--bk-muted); font-size: 16px; line-height: 1.75; }
.bk-contact-intro a, .bk-contact-support a { color: var(--bk-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bk-contact-form { border-top: 1px solid var(--bk-ink); }
.bk-contact-form .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.bk-contact-form .field { display: flex; flex-direction: column; gap: 10px; padding: 26px 0 18px; border-bottom: 1px solid var(--bk-line); }
.bk-contact-form label { color: var(--bk-muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.bk-contact-form input, .bk-contact-form select, .bk-contact-form textarea { width: 100%; border: 0; outline: 0; background: transparent; color: var(--bk-ink); font: inherit; font-size: 17px; line-height: 1.5; caret-color: var(--bk-blue); }
.bk-contact-form textarea { min-height: 132px; resize: vertical; }
.bk-contact-form input::placeholder, .bk-contact-form textarea::placeholder { color: #8a8f95; opacity: 1; }
.bk-contact-form .field:focus-within { border-bottom-color: var(--bk-blue); }
.bk-contact-form .field-consent { display: flex; gap: 12px; align-items: flex-start; padding: 26px 0; border-bottom: 1px solid var(--bk-line); color: var(--bk-muted); font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.6; text-transform: none; }
.bk-contact-form .field-consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--bk-blue); }
.bk-contact-form .bk-btn { margin-top: 30px; }
.bk-contact-support { padding-top: 8px; border-top: 1px solid var(--bk-ink); }
.bk-contact-support-row { padding: 28px 0; border-bottom: 1px solid var(--bk-line); }
.bk-contact-support-row h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bk-contact-support-row p { margin: 12px 0 0; color: var(--bk-muted); font-size: 15px; line-height: 1.7; }
.bk-contact-map { width: 100%; min-height: 250px; margin-top: 38px; border: 0; border-radius: 16px; filter: grayscale(1) contrast(.88); }
.bk-contact .send-options { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--bk-line); }
.bk-contact .send-options-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.bk-contact .send-options-note { margin-top: 16px; color: var(--bk-muted); font-size: 13px; }

.bk-resources-page :where(a, button, input, select, textarea):focus-visible,
.bk-contact-page :where(a, button, input, select, textarea):focus-visible,
.bk-role-page :where(a, button, input, select, textarea):focus-visible { outline: 3px solid rgba(33, 81, 245, .35); outline-offset: 3px; }

@media (max-width: 900px) {
  .bk-role-context, .bk-relay-head, .bk-service-plane-head, .bk-library-index-head, .bk-contact-shell { grid-template-columns: 1fr; }
  .bk-role-mark { max-width: 390px; min-height: 210px; }
  .bk-contact-shell { gap: 64px; }
}

@media (max-width: 700px) {
  .bk-role-page .bk-role-hero { padding-top: 76px; }
  .bk-role-context, .bk-relay, .bk-role-outcomes { padding-left: 20px; padding-right: 20px; }
  .bk-relay-step, .bk-service-lane { grid-template-columns: 1fr; gap: 14px; }
  .bk-relay-step { padding-left: 54px; }
  .bk-relay-steps::before, .bk-relay-steps::after { left: 20px; }
  .bk-relay-step::before { left: 15px; }
  .bk-service-plane, .bk-library-index, .bk-contact-shell { margin-left: 0; margin-right: 0; border-radius: 22px; }
  .bk-library, .bk-contact { padding-left: 16px; padding-right: 16px; }
  .bk-library-head, .bk-contact-head { padding-top: 76px; }
  .bk-search { gap: 10px; }
  .bk-search-kbd { display: none; }
  .bk-library-entry { grid-template-columns: 1fr auto; }
  .bk-library-entry-count { text-align: left; }
  .bk-library-entry-go { grid-column: 2; grid-row: 1; }
  .bk-contact-form .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ═══ CAREERS PAGE ══════════════════════════════════════════════════════════
 * Components for pages/careers.html — the invitation page.
 * Signature move: "the open seats" — open roles drawn as hollow blue nodes in
 * a constellation beside a filterable <details> ledger; a seat fills blue when
 * a reader hovers or opens it. All entries documented in DESIGN.md.
 */

/* ── Hero tally — the page's one count-up ─────────────────────────────────── */
.bk-careers-tally {
  position: relative;
  z-index: 2;
  margin-top: 44px;
  font-size: 15px;
  color: var(--bk-muted);
}

.bk-careers-tally strong {
  color: var(--bk-blue);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Our people — scrub copy beside the culture rows ──────────────────────── */
.bk-culture {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px clamp(24px, 5vw, 72px) 90px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.bk-culture-lead p {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  margin: 22px 0 0;
}

/* ── Life at ONDC — blurbs beside photos dissolving into the panel ────────── */
.bk-life {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 5vw, 84px);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 84px);
  align-items: start;
}

.bk-life-block {
  padding: 30px 0;
  border-top: 1px solid var(--bk-line);
}

.bk-life .bk-h2 + .bk-life-block { margin-top: 34px; }

.bk-life-block h3 {
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.bk-life-block p {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-muted);
  margin: 12px 0 0;
}

.bk-life-media {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.bk-life-media img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  display: block;
}

/* ── The open seats ───────────────────────────────────────────────────────── */
.bk-seats {
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px clamp(24px, 5vw, 72px) 120px;
  box-sizing: border-box;
}

.bk-seats-head {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.bk-seats-lead p {
  font-size: clamp(16.5px, 1.42vw, 19.5px);
  line-height: 1.7;
  color: var(--bk-muted);
  max-width: 480px;
  margin: 22px 0 0;
}

/* The constellation: filled seats rest grey, open seats are hollow blue and
 * breathe on opacity only. Decorative — aria-hidden, hidden at 700px. */
.bk-const {
  width: 100%;
  height: auto;
  display: block;
}

.bk-const line {
  stroke: var(--bk-line);
  stroke-width: 1;
}

.bk-const .bk-const-seat { fill: #c9ced4; }

.bk-const .bk-const-open {
  fill: none;
  stroke: var(--bk-blue);
  stroke-width: 1.5;
  animation: bkSeatPulse 3.2s var(--bk-ease) infinite;
  transition: opacity .3s var(--bk-ease);
}

/* Filters sit with the ledger, not centred like the join-section tabs. */
.bk-seats .bk-tabs { justify-content: flex-start; }

.bk-const .bk-const-open:nth-of-type(2n) { animation-delay: -1.1s; }
.bk-const .bk-const-open:nth-of-type(3n) { animation-delay: -2.3s; }

.bk-const .bk-dim {
  animation: none;
  opacity: .18;
}

@keyframes bkSeatPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Track filter — the role-tab pill restated for one-to-many filtering, active
 * on aria-pressed so beckn.js's tab handler leaves it alone. */
.bk-seat-filter {
  padding: 12px 28px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--bk-muted);
  white-space: nowrap;
  transition: background .25s var(--bk-ease), color .25s var(--bk-ease);
}

.bk-seat-filter[aria-pressed="true"] {
  background: var(--bk-ink);
  color: #fff;
}

/* The ledger: each role is a native <details> row. Open/close is an instant
 * layout change (the tabs precedent); the revealed JD plays a transform and
 * opacity entrance, and the hollow node fills blue — paint transitions only. */
.bk-seat-ledger {
  margin-top: 46px;
}

.bk-seat { border-top: 1px solid var(--bk-line); }
.bk-seat:last-of-type { border-bottom: 1px solid var(--bk-line); }
.bk-seat[hidden] { display: none; }

.bk-seat-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 28px 14px;
  cursor: pointer;
  list-style: none;
  transition: background .25s var(--bk-ease);
}

.bk-seat-row::-webkit-details-marker { display: none; }
.bk-seat-row::marker { content: ""; }

.bk-seat-row > * {
  transition: transform .25s var(--bk-ease);
}

.bk-seat-row:hover { background: var(--bk-canvas); }
.bk-seat-row:hover > * { transform: translateX(12px); }

.bk-seat-node {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--bk-blue);
  background: transparent;
  box-sizing: border-box;
  transition: background .25s var(--bk-ease), transform .25s var(--bk-ease);
}

.bk-seat-row:hover .bk-seat-node,
.bk-seat[open] .bk-seat-node {
  background: var(--bk-blue);
}

.bk-seat-title {
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 600;
  line-height: 1.25;
}

.bk-seat-meta {
  font-size: 14px;
  color: var(--bk-muted);
  text-align: right;
}

.bk-seat-jd {
  max-width: 820px;
  padding: 6px 14px 46px 54px;
}

.bk-seat[open] .bk-seat-jd {
  animation: bkSeatIn .6s var(--bk-ease-out);
}

@keyframes bkSeatIn {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}

.bk-seat-jd .bk-eyebrow { margin: 30px 0 10px; }
.bk-seat-jd .bk-eyebrow:first-child { margin-top: 12px; }

.bk-seat-jd p {
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  color: var(--bk-ink);
  margin: 0 0 14px;
}

.bk-seat-jd .bk-btn { margin-top: 24px; }

/* ═══ RFP LEDGER ════════════════════════════════════════════════════════════
 * A record, not a filtered list — closed items stay visible, just quieter,
 * inside their own tab, so the page reads as an archive of every opportunity
 * rather than a disappearing search result. */
.bk-rfp-ledger {
  padding: 96px clamp(24px, 5vw, 84px);
  margin: 0 var(--bk-gutter);
}

.bk-rfp-ledger-head { max-width: 640px; }

.bk-rfp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
}

.bk-rfp-toolbar .bk-tabs { margin-top: 0; }
.bk-rfp-search { max-width: 320px; }

.bk-rfp-panel[hidden] { display: none; }

.bk-rfp-rows {
  margin-top: 32px;
  border-top: 1px solid var(--bk-line);
}

.bk-rfp-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding: 24px 14px;
  border-bottom: 1px solid var(--bk-line);
  transition: background .25s var(--bk-ease);
}

.bk-rfp-row > * { transition: transform .25s var(--bk-ease); }
.bk-rfp-row:hover { background: var(--bk-canvas); }
.bk-rfp-row:hover > * { transform: translateX(12px); }
.bk-rfp-row[hidden] { display: none; }

.bk-rfp-no {
  font-size: 13px;
  font-weight: 600;
  color: var(--bk-muted);
  white-space: nowrap;
}

.bk-rfp-name { font-size: clamp(17px, 1.5vw, 20px); color: var(--bk-ink); }
.bk-rfp-due { text-align: right; white-space: nowrap; }

.bk-rfp-due b {
  display: block;
  color: var(--bk-blue);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bk-rfp-due i {
  display: block;
  margin-top: 4px;
  color: #9a9fa5;
  font-size: 11px;
  font-style: normal;
}

.bk-rfp-docs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.bk-rfp-docs:empty { display: none; }
.bk-rfp-docs .bk-ul { font-size: 13px; font-weight: 600; }

.bk-rfp-row-closed .bk-rfp-name,
.bk-rfp-row-closed .bk-rfp-no { color: #9a9fa5; }
.bk-rfp-row-closed .bk-rfp-due b { color: var(--bk-muted); }

@media (max-width: 700px) {
  .bk-rfp-row { grid-template-columns: 1fr; }
  .bk-rfp-due { text-align: left; }
}

/* ═══ LEGAL DOCUMENT ════════════════════════════════════════════════════════
 * A reading instrument, not a landing page: no hero image, no invented
 * figures, no marquee, no spine. The clause you're in takes blue as you
 * scroll, and reading the lead paragraph is the only other animation. */
.bk-legal-head {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(92px, 10vw, 132px) clamp(24px, 5vw, 72px) 56px;
  text-align: center;
}

.bk-legal-head h1 {
  margin: 14px 0 0;
  font-size: clamp(42px, 6vw, 82px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.bk-legal-head .bk-hero-sub { margin: 26px auto 0; }
.bk-legal-head .bk-note { margin-top: 18px; }

.bk-legal-body {
  display: grid;
  grid-template-columns: minmax(220px, .28fr) minmax(0, .72fr);
  gap: clamp(40px, 5vw, 72px);
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px) 120px;
  align-items: start;
}

/* Single-column legal pages (terms, cookie) drop the index and set their own
 * measure — a numbered clause ledger stands in for terms; cookie is short
 * enough to need neither. */
.bk-legal-body-solo {
  grid-template-columns: minmax(0, var(--bk-legal-measure, .62fr));
  justify-content: center;
}

.bk-doc-index {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bk-doc-index-link {
  padding: 9px 0 9px 14px;
  color: var(--bk-muted);
  font-size: 13.5px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color .2s var(--bk-ease), border-color .2s var(--bk-ease);
}

.bk-doc-index-link:hover { color: var(--bk-ink); }
.bk-doc-index-link.bk-doc-index-active { color: var(--bk-blue); border-left-color: var(--bk-blue); }

.bk-clauses { display: flex; flex-direction: column; }

.bk-clause {
  position: relative;
  padding: 48px 0;
  border-top: 1px solid var(--bk-line);
}

.bk-clauses .bk-clause:first-child { border-top: none; padding-top: 0; }

.bk-clause-num {
  position: absolute;
  right: 0;
  top: 34px;
  font-size: clamp(72px, 9vw, 132px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
  color: #eef0f3;
  user-select: none;
  pointer-events: none;
}

.bk-clause h2 {
  position: relative;
  max-width: 640px;
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.bk-clause-sub {
  position: relative;
  margin: 34px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--bk-ink);
}

.bk-clause p {
  position: relative;
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--bk-muted);
  font-size: 15px;
  line-height: 1.75;
}

.bk-clause h2 + p { margin-top: 22px; }

.bk-clause ul {
  position: relative;
  max-width: 680px;
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--bk-muted);
  font-size: 15px;
  line-height: 1.75;
}

.bk-clause li { margin-top: 8px; }
.bk-clause li::marker { color: var(--bk-blue); }
.bk-clause a { color: var(--bk-blue); text-decoration: underline; text-underline-offset: 3px; }

/* All-caps statutory blocks read better a touch smaller and tighter. */
.bk-clause .bk-caps { font-size: 13.5px; letter-spacing: .01em; }

.bk-clause-note {
  position: relative;
  max-width: 680px;
  margin-top: 22px;
  padding: 22px 24px;
  background: var(--bk-canvas);
  border-radius: 16px;
}

.bk-clause-note p { margin-top: 8px; }
.bk-clause-note p:first-child { margin-top: 0; }

/* Numbered clause ledger — terms-and-conditions only, standing in for the
 * side index since the clauses are already numbered in the source. */
.bk-clause-toc {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bk-line);
  margin-top: 40px;
}

.bk-clause-toc a {
  display: flex;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--bk-line);
  color: var(--bk-ink);
  font-size: 14px;
  transition: color .2s var(--bk-ease), transform .2s var(--bk-ease);
}

.bk-clause-toc a b { flex: none; width: 22px; color: var(--bk-blue); }
.bk-clause-toc a:hover { color: var(--bk-blue); transform: translateX(8px); }

@media (max-width: 900px) {
  .bk-legal-body { grid-template-columns: 1fr; }
  .bk-doc-index { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
  .bk-doc-index-link { padding: 4px 10px 4px 10px; border-left: none; border-bottom: 2px solid transparent; }
  .bk-doc-index-link.bk-doc-index-active { border-left-color: transparent; border-bottom-color: var(--bk-blue); }
  .bk-clause-num { display: none; }
}

/* ═══ COMPLAINT — ESCALATION PANEL ══════════════════════════════════════════
 * The spine's terminal node: escalating to ONDC is presented as the next
 * step down the same mechanism, not a separate section. */
.bk-escalate-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  /* The aside carries ~250px of content against the left column's ~600px.
     Stretch + justify-content:center on the aside spreads its rows along a
     full-height divider instead of clumping them at the top over a void.
     (Safe now that .bk-escalate-doc has no margin-top:auto — that auto margin
     once opened a ~300px gap above the link.) */
  align-items: stretch;
  gap: clamp(32px, 4.5vw, 64px);
  margin: 24px max(var(--bk-gutter), (100% - 1440px) / 2) 0;
  padding: clamp(40px, 5vw, 64px);
  background: #fff;
  border-radius: 28px;
}

.bk-escalate-panel .bk-h2 { max-width: 460px; }

.bk-escalate-lede {
  margin-top: 22px;
  color: var(--bk-blue);
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.75;
  max-width: 480px;
}

.bk-escalate-list { margin-top: 20px; display: flex; flex-direction: column; }

.bk-escalate-item {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--bk-line);
  font-size: 14.5px;
  color: var(--bk-ink);
  line-height: 1.6;
}

.bk-escalate-item:last-child { border-bottom: 1px solid var(--bk-line); }
.bk-escalate-item .bk-dot { flex: none; color: var(--bk-blue); }

.bk-escalate-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.bk-escalate-note { margin-top: 20px; font-size: 13px; color: #9a9fa5; max-width: 480px; }

.bk-escalate-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 48px);
  padding-left: clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--bk-line);
}

.bk-ec-row b {
  display: block;
  color: var(--bk-blue);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.bk-ec-row span {
  display: block;
  margin-top: 6px;
  color: var(--bk-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.bk-escalate-doc { margin-top: 4px; }

@media (max-width: 900px) {
  .bk-escalate-panel { grid-template-columns: 1fr; }
  .bk-escalate-aside { border-left: none; padding-left: 0; border-top: 1px solid var(--bk-line); padding-top: 24px; }
}

/* ═══ COMPLAINT — BUYER APP DIRECTORY ═══════════════════════════════════════
 * Each app is a native <details> card: closed shows identity, open reveals
 * whichever contact rows that app actually published. */
.bk-ba-grid {
  display: grid;
  /* 3-up, not 4. At 4 across a card gave about 208px of text width, and with
     overflow-wrap:anywhere below, company names broke mid-word — which reads as
     the name being cut off. Every sibling directory on the site maxes at 3. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bk-ba-card {
  border: 1px solid #e6e7e9;
  border-radius: 16px;
  background: #fff;
}

.bk-ba-card > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
}

.bk-ba-card > summary::-webkit-details-marker { display: none; }
.bk-ba-card > summary::marker { content: ""; }

/* Most of these marks are wide horizontal wordmarks. Forced into a 40px square
   they rendered 8-10px tall and read as a smudge, so the box is wide and short
   instead; only the monogram fallback stays a 40px circle.

   A fixed box, not width:auto — these marks are remote and lazy-loaded, so an
   auto width would reserve nothing until the file arrives and every card would
   reflow. contain + left origin keeps a wide wordmark legible and lets a square
   mark sit at the left of the same box, so the names stay on one column. */
.bk-ba-logo {
  width: 84px;
  height: 28px;
  flex: none;
  object-fit: contain;
  object-position: left center;
}

.bk-ba-logo-fallback {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef0f3;
  color: #4d535a;
  font-size: 15px;
  font-weight: 600;
}

.bk-ba-names { min-width: 0; }
.bk-ba-name { font-size: 15px; font-weight: 600; color: var(--bk-ink); overflow-wrap: anywhere; }
.bk-ba-org { margin-top: 2px; font-size: 12px; color: var(--bk-muted); overflow-wrap: anywhere; }

.bk-ba-detail {
  margin: 0;
  padding: 4px 18px 18px;
  border-top: 1px solid var(--bk-line);
}

.bk-ba-detail dt {
  margin-top: 14px;
  color: #8a8f95;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bk-ba-detail dt:first-child { margin-top: 12px; }
.bk-ba-detail dd { margin: 4px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.bk-ba-detail dd a { color: var(--bk-blue); }
.bk-ba-nodetail { color: #9a9fa5; font-size: 13px; }

.bk-ba-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.bk-ba-count { color: var(--bk-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.bk-ba-search { max-width: 320px; }

.bk-ba-span { grid-column: 1 / -1; }

.bk-ba-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}

.bk-ba-perpage {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bk-muted);
  font-size: 13px;
}

.bk-ba-perpage select {
  border: 1px solid #d7d9db;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--bk-ink);
}

.bk-ba-pagebtns { display: flex; align-items: center; gap: 16px; }
.bk-ba-pageinfo { color: var(--bk-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

@media (max-width: 1160px) { .bk-ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .bk-ba-grid { grid-template-columns: 1fr; } }

/* ═══ HOW-TO-SHOP — GIANT STEP NUMERAL ══════════════════════════════════════
 * The step number is the entire left column at numeral-ghost size; the
 * instruction sits in the gutter beside it. No nodes, no spine — the
 * complaint page's spine already owns that vocabulary. */
.bk-shop-steps {
  display: flex;
  flex-direction: column;
  margin: 48px clamp(24px, 5vw, 84px) 0;
}

.bk-shop-step {
  display: grid;
  grid-template-columns: minmax(120px, .38fr) minmax(0, .62fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--bk-line);
}

.bk-shop-step:last-child { border-bottom: 1px solid var(--bk-line); }

.bk-shop-step-num {
  font-size: clamp(90px, 11vw, 160px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
  color: #eef0f3;
  user-select: none;
}

.bk-shop-step h3 {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 33px);
  letter-spacing: -.033em;
  line-height: 1.2;
  margin: 0;
}

.bk-shop-step p {
  margin: 14px 0 0;
  color: var(--bk-muted);
  font-size: clamp(15.5px, 1.32vw, 18px);
  line-height: 1.7;
  max-width: 560px;
}

@media (max-width: 700px) {
  .bk-shop-step { grid-template-columns: 1fr; }
  .bk-shop-step-num { font-size: 64px; }
}

/* ═══ HOW-TO-SHOP — BUYER APP GRID ══════════════════════════════════════════ */
.bk-app-group { margin-top: 56px; }
.bk-app-group:first-child { margin-top: 40px; }

.bk-app-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.bk-app-group-head .bk-eyebrow { margin: 0; }

.bk-app-group-count {
  color: #9a9fa5;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bk-app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.bk-app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 16px;
  background: #fff;
  border: 1px solid #e6e7e9;
  border-radius: 16px;
  text-align: center;
  transition: box-shadow .25s var(--bk-ease), transform .25s var(--bk-ease);
}

.bk-app-card:hover { box-shadow: 0 16px 38px rgba(0, 0, 0, .10); transform: translateY(-3px); }
.bk-app-card img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.bk-app-card span { font-size: 13px; font-weight: 600; color: var(--bk-ink); }
.bk-app-card[hidden] { display: none; }
.bk-app-group[hidden] { display: none; }

.bk-app-search { max-width: 360px; margin: 0 clamp(24px, 5vw, 84px) 8px; }

@media (max-width: 900px) { .bk-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bk-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══ HOLDING PAGE ══════════════════════════════════════════════════════════
 * The quietest page on the site: one hollow blue node breathing on a
 * hairline, reusing the constellation's pulse rather than a bespoke rig. */
.bk-hold-status {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  color: #8a8f95;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bk-hold-node { flex: none; }
.bk-hold-node line { stroke: var(--bk-line); stroke-width: 1; }

.bk-hold-node-dot {
  fill: none;
  stroke: var(--bk-blue);
  stroke-width: 1.5;
  transform-origin: center;
  animation: bkSeatPulse 3.2s var(--bk-ease) infinite;
}

.bk-hold-return { margin: 0 var(--bk-gutter); }

@media (prefers-reduced-motion: reduce) {
  .bk-hold-node-dot { animation: none; }
}

/* ── Careers responsive + reduced motion ──────────────────────────────────── */
@media (max-width: 1000px) {
  .bk-culture,
  .bk-seats-head { grid-template-columns: 1fr; }
  .bk-life { grid-template-columns: 1fr; }
  .bk-const { max-width: 440px; }
}

@media (max-width: 700px) {
  .bk-culture { padding: 84px 20px 64px; }
  .bk-seats { padding: 84px 20px 96px; }
  .bk-const { display: none; }
  .bk-seat-row { grid-template-columns: 14px 1fr; }
  .bk-seat-meta { grid-column: 2; text-align: left; }
  .bk-seat-jd { padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-const .bk-const-open { animation: none; }
  .bk-seat[open] .bk-seat-jd { animation: none; }
  .bk-seat-row > *, .bk-seat-node { transition: none; }
}

/* ═══ PARTICIPANT LEDGER (network / ecosystem participants) ═══════════════
 * These pages carry genuinely dense tabular data (13 columns of role,
 * certification, geography and contact fields) — a logo-card grid would
 * hide more than it shows. The honest shape here is a ruled table: hairline
 * rows, no cell borders, hover tint, blue for the figures that matter. */
.bk-np-toplevel-tabs { margin-top: 32px; }

.bk-np-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.bk-np-toolbar .bk-tabs { margin-top: 0; }
.bk-np-toolbar > :last-child { margin-left: auto; }

/* One line under the tabs saying what the active list actually is -- "Key"
   and "Integrated" do not explain themselves. */
.bk-np-tabnote {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--bkc-muted, #6b7280);
  max-width: 76ch;
}

/* ── FILTER SIDEBAR ───────────────────────────────────────────────────────
 * A two-column directory: the taxonomy on the left, results on the right.
 * The left column is a tree of the ten official categories, all of them on
 * screen at all times, each expanding in place to its sub-categories. The
 * point is that the taxonomy itself is readable — a reader who has never seen
 * the ONDC domain map learns it from this column without opening anything. */
.bk-np-layout {
  display: grid;
  grid-template-columns: minmax(232px, .26fr) minmax(0, .74fr);
  gap: clamp(32px, 4vw, 56px);
  margin-top: 36px;
  align-items: start;
}

.bk-np-filters {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 120px;
  /* The tree is ~10 rows collapsed but every branch can open, so it needs its
     own scroll rather than growing past the viewport and stranding the last
     categories under the fold. */
  max-height: calc(100vh - 152px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bk-np-filter-group .bk-eyebrow { margin-bottom: 10px; }

.bk-np-results { min-width: 0; }
.bk-np-results .bk-directory-input { margin-bottom: 18px; }

/* ── THE CATEGORY TREE ────────────────────────────────────────────────────
 * Each row carries two controls on purpose: the checkbox selects the whole
 * category, the button beside it expands the branch. They look like one row
 * and behave as two, which is what lets a click on the name expand without
 * also filtering. */
.bk-np-cat + .bk-np-cat { margin-top: 2px; }

.bk-np-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;   /* rounded.control */
}

.bk-np-cat-row:hover { background: var(--bk-canvas); }

.bk-np-cat-row input {
  accent-color: var(--bk-blue);
  width: 15px;
  height: 15px;
  flex: none;
  cursor: pointer;
}

.bk-np-cat-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bk-ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.bk-np-cat-toggle:focus-visible {
  outline: 2px solid var(--bk-blue);
  outline-offset: 3px;
  border-radius: 12px;   /* rounded.control */
}

.bk-np-cat-chev {
  flex: none;
  color: var(--bk-quiet, #8a8f95);
  transition: transform .2s var(--bk-ease);
}

.bk-np-cat.is-open .bk-np-cat-chev { transform: rotate(180deg); }

/* An explicit display beats the user-agent [hidden] rule, so a container with
   one has to opt back out itself. */
.bk-np-cat-kids[hidden] { display: none; }

.bk-np-cat-kids {
  margin: 2px 0 6px 17px;
  padding-left: 10px;
  border-left: 1px solid var(--bk-line);
}

/* A category with nothing behind it in the active tab stays in the tree,
 * dimmed. Dropping it would give the two tabs — and the two directories —
 * differently shaped trees, and the empty slot is itself the answer to "who is
 * live on Chemicals". */
.bk-np-cat-row.is-off { cursor: not-allowed; }
.bk-np-cat-row.is-off:hover { background: none; }
.bk-np-cat-row.is-off .bk-np-cat-toggle { color: #a5a9ae; }   /* directory-disabled */
.bk-np-cat-row.is-off .bk-np-chk-count { color: #b3b8bd; }    /* note */

.bk-np-chk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;   /* rounded.control */
  font-size: 14px;
  color: var(--bk-ink);
  cursor: pointer;
}

.bk-np-chk:hover { background: var(--bk-canvas); }
.bk-np-chk input { accent-color: var(--bk-blue); width: 15px; height: 15px; flex: none; }
.bk-np-chk-label { flex: 1 1 auto; }

.bk-np-chk-count {
  flex: none;
  color: var(--bk-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* A category with no participants in the active tab stays in the list, dimmed.
 * Dropping it would give the two tabs — and the two directories — differently
 * shaped lists, and the empty slot is itself the answer to "who is live on
 * Chemicals". */
.bk-np-chk.is-off { color: #a5a9ae; cursor: not-allowed; }
.bk-np-chk.is-off:hover { background: none; }
.bk-np-chk.is-off .bk-np-chk-count { color: #b3b8bd; }

/* ── ACTIVE FILTER CHIPS ──────────────────────────────────────────────────
 * A closed dropdown hides what it is filtering on, so the selections are
 * restated here where they can also be removed one at a time. */
.bk-np-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.bk-np-chips[hidden] { display: none; }

.bk-np-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(33, 81, 245, .28);
  border-radius: 999px;
  background: rgba(33, 81, 245, .06);
  color: var(--bk-blue);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s var(--bk-ease), border-color .18s var(--bk-ease);
}

.bk-np-chip:hover { background: rgba(33, 81, 245, .12); border-color: var(--bk-blue); }
.bk-np-chip span[aria-hidden] { font-size: 11px; opacity: .75; }

.bk-np-chip-clear {
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--bk-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bk-np-chip-clear:hover { color: var(--bk-ink); }

.bk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bk-np-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  background: #eef0f3;
  color: #8a8f95;
  font-size: 10px;
  font-style: normal;
  cursor: help;
}

.bk-np-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--bk-ink);
}

.bk-np-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.bk-np-table th {
  padding: 14px 12px;
  border-bottom: 1px solid var(--bk-line);
  color: #8a8f95;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.bk-np-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--bk-line);
  color: var(--bk-ink);
  vertical-align: middle;
}

.bk-np-table tbody tr { transition: background .2s var(--bk-ease); }
.bk-np-table tbody tr:hover { background: var(--bk-canvas); }
.bk-np-table a { color: var(--bk-blue); }

/* The Contact column carries the source CSV's three-line blob (SPOC, email,
   phone) as one cell, so the lines are stacked rather than run together. */
.bk-np-contact-line { display: block; }
.bk-np-contact-line + .bk-np-contact-line { margin-top: 2px; }
.bk-np-table td.bk-np-contact { min-width: 210px; }

.bk-np-logo-cell img { height: 28px; width: auto; max-width: 90px; object-fit: contain; }

/* Stands in for a brand logo whose file is missing, so the cell reads as a
   deliberate placeholder rather than a broken image. */
.bk-np-monogram {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef0f3;
  color: #4d535a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

.bk-np-table .np-empty { text-align: center; padding: 48px 0; color: var(--bk-muted); }

.bk-np-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.bk-np-rpp {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bk-muted);
  font-size: 13px;
}

.bk-np-rpp select {
  border: 1px solid #d7d9db;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--bk-ink);
}

.bk-np-pagenums { display: flex; align-items: center; gap: 6px; }

.bk-np-pagenums button {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #d7d9db;
  border-radius: 999px;
  background: #fff;
  color: var(--bk-ink);
  font: inherit;
  font-size: 13px;
  transition: border-color .2s var(--bk-ease), background .2s var(--bk-ease), color .2s var(--bk-ease);
}

.bk-np-pagenums button:hover:not(:disabled) { border-color: var(--bk-ink); }
.bk-np-pagenums button.active { background: var(--bk-ink); color: #fff; border-color: var(--bk-ink); }
.bk-np-pagenums button:disabled { color: #c6cacf; cursor: default; }
.bk-np-ellipsis { color: #c6cacf; padding: 0 4px; }

@media (max-width: 1000px) {
  /* One column: the tree sits above the table rather than beside it, and stops
     being sticky — a sticky block that tall would pin most of the screen. */
  .bk-np-layout { grid-template-columns: 1fr; }
  .bk-np-filters {
    position: static;
    max-height: none;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .bk-np-filter-group { min-width: 240px; flex: 1 1 240px; }
}

/* ═══ PAYMENT ASSURANCE PROGRAM ═════════════════════════════════════════════
 * A reading instrument that ends in a register. It borrows the legal-document
 * frame (sticky index, clause descent) but its right-hand column is an
 * instrument rather than prose, so the two never read as one page twice.
 *
 * The page's one move: the index is a gauge. Its rail carries a blue fill that
 * descends with reading progress, so the document's own navigation reads as a
 * level — the deposit the page is about. Same grammar as the dispute path
 * below and as .bk-relay-steps::after: one hairline, scaleY off a custom
 * property, never a height animation. */
/* The legal frame's own grid is tuned for prose. This column carries two
 * registers, two step ledgers and four paired lists, so it takes more width
 * and gives the index less — the measured difference between a readable
 * instrument and four-word line wraps. Prose inside still caps at .bk-clause's
 * own 640/680px measure, so only the instruments spend the extra room. */
.bk-pap-body {
  max-width: 1320px;
  grid-template-columns: minmax(196px, .22fr) minmax(0, .78fr);
}

/* No position of its own: .bk-doc-index is already sticky (and static below
 * 900px), and sticky is a positioned element, so the rail and gauge still
 * anchor here. Forcing 'relative' would turn the inherited top: 120px into a
 * paint offset and drop the index onto the clauses. */
.bk-pap-index { padding-left: 2px; }

.bk-pap-index::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bk-line);
}

.bk-pap-gauge {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--bk-blue);
  transform: scaleY(var(--bk-pap-read, 0));
  transform-origin: top;
}

/* The rail is the index's own left edge, so the links give up theirs. */
.bk-pap-index .bk-doc-index-link { border-left: none; padding-left: 16px; }
.bk-pap-index .bk-doc-index-link.bk-doc-index-active { border-left-color: transparent; }

/* ── The dispute path ─────────────────────────────────────────────────────
 * .bk-relay restated at clause width: the same filling hairline and hollow
 * nodes, on a two-column step sized for the document column rather than a
 * full-bleed section. Driven by the same [data-bk-relay] progress property. */
.bk-pap-path {
  position: relative;
  max-width: 680px;
  margin-top: 30px;
  border-bottom: 1px solid var(--bk-line);
}

.bk-pap-path::before,
.bk-pap-path::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
}

.bk-pap-path::before { background: var(--bk-line); }

.bk-pap-path::after {
  height: 100%;
  background: var(--bk-blue);
  transform: scaleY(var(--bk-relay-progress, 0));
  transform-origin: top;
}

.bk-pap-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 26px 0 26px 34px;
  border-top: 1px solid var(--bk-line);
}

.bk-pap-step:first-child { border-top: 0; }

.bk-pap-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 32px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--bk-blue);
  border-radius: 50%;
  background: var(--bk-canvas);
}

.bk-pap-step-no {
  color: var(--bk-blue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

.bk-pap-step h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.bk-pap-step p {
  max-width: none;
  margin: 8px 0 0;
  color: var(--bk-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

/* ── Paired ruled lists ───────────────────────────────────────────────────
 * What you get / what it asks; what the Badge tells you / what it does not.
 * Asymmetric at a ratio the kit does not already spend. */
.bk-pap-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: 30px;
}

.bk-pap-col { border-top: 1px solid var(--bk-ink); padding-top: 18px; }
.bk-pap-col-quiet { border-top-color: var(--bk-line); }

.bk-pap-col h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8f95;
}

.bk-pap-col ul { margin: 14px 0 0; padding: 0; list-style: none; }

.bk-pap-col li {
  padding: 14px 0;
  border-bottom: 1px solid var(--bk-line);
  color: var(--bk-ink);
  font-size: 14.5px;
  line-height: 1.65;
}

/* The column the reference painted amber. Hierarchy carries the caution here:
 * quieter ink, not a second accent. */
.bk-pap-col-quiet li { color: var(--bk-muted); }

/* ── Badge status ─────────────────────────────────────────────────────────
 * Active is a filled node; On Hold is the same node hollow, breathing on the
 * constellation's pulse. One blue, one shape, two states — the green/amber
 * pair the Single Blue Rule refuses. */
.bk-pap-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.bk-pap-node {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--bk-blue);
  background: var(--bk-blue);
  flex: none;
}

.bk-pap-status-hold { color: var(--bk-muted); }

.bk-pap-status-hold .bk-pap-node {
  background: transparent;
  animation: bkSeatPulse 3.2s var(--bk-ease) infinite;
}

/* ── Register ledgers ─────────────────────────────────────────────────────
 * Two published lists in one clause, so each toolbar has to name its own. */
.bk-pap-register + .bk-pap-register { margin-top: 64px; }

.bk-pap-register-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 34px;
}

.bk-pap-tally {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.036em;
  color: #0d1b2e;
  font-variant-numeric: tabular-nums;
}

.bk-pap-tally-label {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8f95;
}

.bk-pap-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-pap-controls .bk-directory-input { padding: 0 14px; min-width: 210px; }
.bk-pap-controls .bk-directory-select { padding: 0 14px; }

.bk-pap-register .bk-np-table { min-width: 560px; font-size: 14px; }

/* The ledger's quiet header grey reaches 3.1:1 on this ground — fine as a
 * label on a page nobody reads column-first, not fine on a register whose
 * columns are the content. Muted clears 4.5:1 and stays subordinate. */
.bk-pap-register .bk-np-table th { color: var(--bk-muted); }
.bk-pap-register .bk-np-table td { font-variant-numeric: tabular-nums; }
.bk-pap-register .bk-np-table-wrap { margin-top: 24px; }
.bk-pap-name { font-weight: 600; font-variant-numeric: normal; }

.bk-pap-updated {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--bk-muted);
}

.bk-pap-updated b { font-weight: 600; color: var(--bk-ink); }

/* ── Ruled link rows (documents, support) ─────────────────────────────── */
.bk-pap-rows { margin-top: 30px; max-width: 680px; border-top: 1px solid var(--bk-ink); }

.bk-pap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 24px;
  align-items: baseline;
  padding: 22px 12px 22px 0;
  border-bottom: 1px solid var(--bk-line);
  transition: background .25s var(--bk-ease);
}

.bk-pap-row > * { transition: transform .25s var(--bk-ease); }
.bk-pap-row:hover { background: #fff; }
.bk-pap-row:hover > * { transform: translateX(12px); }

.bk-pap-row-title { font-size: 17px; font-weight: 600; color: var(--bk-ink); }
.bk-pap-row p { max-width: 480px; margin: 6px 0 0; color: var(--bk-muted); font-size: 14.5px; line-height: 1.65; }
.bk-pap-row .bk-ul { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* A control with nowhere to go yet says so plainly rather than pretending to
 * be a link. */
.bk-pap-pending { color: var(--bk-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }

.bk-pap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; }

.bk-pap-actions .bk-btn[aria-disabled="true"] {
  background: transparent;
  color: var(--bk-muted);
  border: 1.4px solid var(--bk-line);
  cursor: default;
}

.bk-pap-actions .bk-btn[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--bk-muted);
  transform: none;
}

/* Three reasons, not three steps: nothing here is ordered, so the row drops
 * the numeral track and reads as term against explanation. */
.bk-clause .bk-requirement {
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding: 28px 10px;
}

.bk-clause .bk-requirement h3 { font-size: clamp(18px, 1.6vw, 22px); }

@media (max-width: 900px) {
  /* .bk-legal-body collapses to one column here, but this page's wider grid is
     declared later in the file and would otherwise keep winning — leaving the
     index and the clauses stacked in the same cell. */
  .bk-pap-body { grid-template-columns: 1fr; }

  .bk-clause .bk-requirement { grid-template-columns: 1fr; gap: 10px; }

}

@media (max-width: 700px) {
  .bk-pap-cols { grid-template-columns: 1fr; }
  .bk-pap-step { grid-template-columns: 1fr; gap: 6px; padding-left: 28px; }
  .bk-pap-row { grid-template-columns: 1fr; }
  .bk-pap-register-head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-pap-gauge { transform: scaleY(1); }
  .bk-pap-path::after { transform: scaleY(1); }
  .bk-pap-status-hold .bk-pap-node { animation: none; }
  .bk-pap-row:hover > * { transform: none; }
}

@media (hover: none) {
  .bk-pap-row:hover > * { transform: none; }
}

@media (max-width: 700px) {
  /* mobile.css pins column two with a white background, which is right on the
     participants page and wrong here: these ledgers sit straight on the dotted
     canvas, so the pinned cell has to be opaque in the canvas colour or it
     scrolls as a white stripe over the ground. */
  .bk-pap-register .bk-np-table th:nth-child(2),
  .bk-pap-register .bk-np-table td:nth-child(2) { background: var(--bk-canvas); }
}

/* ── Payment Assurance Program · finish-review fixes ─────────────────────── */

/* Section labels and column heads are read, not decorative: the kit's quiet
 * #8a8f95 reaches only ~3:1 on this ground. Scoped to this page rather than
 * raised site-wide, which would move every eyebrow on the site. */
.bk-pap-body .bk-eyebrow,
.bk-hero .bk-eyebrow,
.bk-numbers-head .bk-eyebrow,
.bk-pap-col h3,
.bk-pap-tally-label { color: var(--bk-muted); }

/* The status legend: the filled/hollow node pair is this page's own encoding
 * and nothing else on the site uses it, so the register says what it means
 * before the reader meets it in a row. It is also the still tell — the one
 * thing above the table that a motionless capture could not mistake for a
 * policy document. */
.bk-pap-legend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 20px;
  align-items: baseline;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--bk-line);
  font-size: 13.5px;
}

.bk-pap-legend dt { font-weight: 600; color: var(--bk-ink); }
.bk-pap-legend dd { margin: 0; color: var(--bk-muted); }
.bk-pap-legend .bk-pap-status { gap: 8px; }

/* A register is a table to be read, not a signal to be watched: two rows in
 * six blinking forever is a distraction the state does not need. The hollow
 * ring alone carries On Hold here; the pulse is reserved for the standalone
 * callout, where it is the only thing on screen making the point. */
.bk-pap-register .bk-pap-status-hold .bk-pap-node,
.bk-pap-legend .bk-pap-status-hold .bk-pap-node { animation: none; }

/* Row cascade. Not a new vocabulary — the same .bk-rv entrance the page
 * already uses, given a per-row delay so a ruled group arrives as a run
 * rather than as a block. Transform and opacity only; beckn.js reveals each
 * row once and reduced motion renders them final. */
.bk-pap-cascade > .bk-rv:nth-child(1) { transition-delay: .04s; }
.bk-pap-cascade > .bk-rv:nth-child(2) { transition-delay: .10s; }
.bk-pap-cascade > .bk-rv:nth-child(3) { transition-delay: .16s; }
.bk-pap-cascade > .bk-rv:nth-child(4) { transition-delay: .22s; }
.bk-pap-cascade > .bk-rv:nth-child(5) { transition-delay: .28s; }
.bk-pap-cascade > .bk-rv:nth-child(6) { transition-delay: .34s; }
.bk-pap-cascade > .bk-rv:nth-child(7) { transition-delay: .40s; }
.bk-pap-cascade > .bk-rv:nth-child(n + 8) { transition-delay: .46s; }

/* Once revealed the delay has to go, or it postpones the row's own hover
 * transition by up to half a second. Same retirement the homepage reveals do. */
.bk-pap-cascade > .bk-rv.bk-in { transition-delay: 0s; }

@media (max-width: 900px) {
  /* The gauge turns on its side rather than switching off. Below 900px the
     index is a chip row, so the level it draws runs along the bottom of that
     row instead of down a rail — same --bk-pap-read, same scale-a-hairline
     grammar, one axis over. The page's one remembered move should not be a
     desktop feature. */
  .bk-pap-index {
    position: relative;
    top: 0;
    padding-left: 0;
    padding-bottom: 14px;
  }

  .bk-pap-index::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 1px;
  }

  .bk-pap-gauge {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 1px;
    transform: scaleX(var(--bk-pap-read, 0));
    transform-origin: left;
  }

  .bk-pap-index .bk-doc-index-link { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-pap-gauge { transform: scaleY(1) scaleX(1); }
  .bk-pap-cascade > .bk-rv { transition-delay: 0s; }
}

/* An empty register: nothing to search, and nothing to filter by. The controls
 * stay in the markup so populating the list is one paste, but they do not sit
 * on screen inviting an action that cannot do anything yet. Declarative rather
 * than scripted, so the state holds with JavaScript off. */
.bk-pap-register-empty .bk-pap-controls { display: none; }

/* ═══ HOLDING PAGE · THE WORDS TAKE THE BLUE ════════════════════════════════
 * The Payment Assurance URL holds behind a Coming Soon page while the
 * Programme waits to be published, and this is that page's one move: the
 * headline's letters take the blue in a wave that travels across them and
 * releases, on a slow loop.
 *
 * It is the word scrub (beckn.js colours a block's words one at a time as it
 * crosses the viewport) turned from a scroll-driven effect into an idle one —
 * the same idea, no longer waiting on a reader. Colour only: no gradient text,
 * no background-clip, nothing that moves or resizes. The long tail of the
 * cycle is deliberate — the sweep should arrive occasionally, not shimmer. */
h1.bk-soon-word {
  font-size: clamp(42px, 6vw, 82px);
  letter-spacing: -.04em;
}

.bk-soon-word span {
  color: var(--bk-ink-deep);
  animation: bkSoonSweep 3.2s var(--bk-ease) infinite;
}

@keyframes bkSoonSweep {
  0%, 100% { color: var(--bk-ink-deep); }
  10% { color: var(--bk-blue); }
  34% { color: var(--bk-ink-deep); }
}

/* The stagger is what makes it a wave rather than a blink. Ten steps, one per
 * letterform, written out rather than computed so the markup carries no inline
 * style and the page keeps working with the stylesheet alone. */
.bk-soon-word span:nth-child(1) { animation-delay: 0s; }
.bk-soon-word span:nth-child(2) { animation-delay: .1s; }
.bk-soon-word span:nth-child(3) { animation-delay: .2s; }
.bk-soon-word span:nth-child(4) { animation-delay: .3s; }
.bk-soon-word span:nth-child(5) { animation-delay: .4s; }
.bk-soon-word span:nth-child(6) { animation-delay: .5s; }
.bk-soon-word span:nth-child(7) { animation-delay: .6s; }
.bk-soon-word span:nth-child(8) { animation-delay: .7s; }
.bk-soon-word span:nth-child(9) { animation-delay: .8s; }
.bk-soon-word span:nth-child(10) { animation-delay: .9s; }
.bk-soon-word span:nth-child(11) { animation-delay: 1s; }
.bk-soon-word span:nth-child(n + 12) { animation-delay: 1.1s; }

/* The status line sits under the headline here rather than above it, so the
 * hairline reads as the rule beneath the words. */
.bk-soon-status { margin: 30px 0 0; }

@media (prefers-reduced-motion: reduce) {
  /* No wave, and no half-swept word left behind: the headline renders in ink,
     finished. */
  .bk-soon-word span { animation: none; color: var(--bk-ink-deep); }
}