/* ─────────────────────────────────────────────────────────────────────────────
 * 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 capacity and 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-capacity {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bk-blue);
  line-height: 1.35;
  /* "Shareholder Representative" wraps to two lines at this column width while
     "Founding Member" does not. Reserving both lines keeps every name in the row
     on one baseline instead of stepping down on the four wrapped cards. */
  min-height: 2.7em;
  margin-bottom: 5px;
}

.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-certified {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bk-ink);
  cursor: pointer;
}

.bk-np-certified input { accent-color: var(--bk-blue); width: 16px; height: 16px; }

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

.bk-np-layout {
  display: grid;
  grid-template-columns: minmax(220px, .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;
}

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

.bk-np-chk {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--bk-ink);
}

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

.bk-np-sub {
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid var(--bk-line);
}

.bk-np-sub .bk-np-sub { margin-left: 10px; }

.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-results { min-width: 0; }
.bk-np-results .bk-directory-input { margin-bottom: 18px; }

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

.bk-np-table {
  width: 100%;
  min-width: 1080px;
  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); }

.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) {
  .bk-np-layout { grid-template-columns: 1fr; }
  .bk-np-filters { position: static; flex-direction: row; flex-wrap: wrap; }
  .bk-np-filter-group { min-width: 220px; }
}

/* ═══ ECOSYSTEM PARTICIPANTS — ROLE RAIL ═══════════════════════════════════
 * Single-select, so radios rather than the network page's checkbox tree —
 * but the same .bk-np-chk rows, so both tabs read as one sidebar. */
.bk-eco-role-list {
  display: flex;
  flex-direction: column;
}

.bk-eco-role-list input:checked + label {
  color: var(--bk-blue);
  font-weight: 600;
}