/* Lorum Banks page 2026 — Figma frame 283:4748
   "Solutions - Banks | Aligned solution system", canvas "03 | Solutions new".

   IMPORTANT: this is a DIFFERENT design system from the three sibling solution
   pages built earlier (digital assets / fintech / payroll). Nearly every token
   moved, so this deliberately does not share solutions-2026.css:
     H1 64/68 #27272a          (siblings 72/0.96 #0a0a09)
     body 16/24 #3f3f46        (siblings 17/25.5 #4b4b47)
     buttons 136x40 & 149x40, Inter 500 16/24, and the secondary is FILLED
       #ededed with a trailing arrow  (siblings 142x48, outlined secondary)
     journey cards 632 SQUARE, radius 6, panel #F0EDE7, number 48px
       (siblings 631x570, radius 3, panel #EEEAE2, number 40px)
     capabilities on #F5F4F0 with Bradford 32px labels
       (siblings #f0eee8 with Inter 500 18px labels)
     stats values Inter 68/76 (siblings Bradford), rules #52525b, heading LEFT
   Frame is 1440 wide, content column 1280, so the page gutter is 80px.

   Font: the family MUST be "Bradfordllweb Book" — that is the name Webflow
   registers for the licensed BradfordLLWeb-Book.woff2 it already hosts.
   "Bradford LL" matches no @font-face on lorum.com and silently falls back
   to Georgia for anyone without the desktop font installed locally.

   Scoped under .lorum-bk-2026 so nothing reaches lorum.com's navbar or footer. */

.lorum-bk-2026 {
  --bk-ink: #0b0b0a;
  --bk-ink-soft: #40403d;
  --bk-grey: #a1a1aa;
  --bk-paper: #fafaf9;
  --bk-beige: #f0eee8;   /* = --sol-beige on the three sibling pages */
  --bk-panel: #f0ede7;
  --bk-rule: #e4e2de;
  --bk-dark: #111010;
  --bk-max: 1280px;
  --bk-gutter: clamp(20px, 5.55vw, 80px);

  line-height: normal;
  color: var(--bk-ink);
  background: #fff;
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.lorum-bk-2026 :where(h1, h2, h3) { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; }
.lorum-bk-2026 :where(p) { margin: 0; }
.lorum-bk-2026 :where(dl, dt, dd) { margin: 0; padding: 0; }
.lorum-bk-2026 :where(a) { color: inherit; text-decoration: none; background-color: transparent; }
.lorum-bk-2026 :where(img) { border: 0; max-width: none; }
.lorum-bk-2026 *, .lorum-bk-2026 *::before, .lorum-bk-2026 *::after { box-sizing: border-box; }

.bk-shell { width: min(var(--bk-max), 100%); margin-inline: auto; }

/* ---------------------------------------------------------------- buttons */
.bk-actions { display: flex; gap: 16px; justify-content: center; }

.bk-btn {
  height: 42px;   /* live .button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}
.bk-btn--primary {
  padding: 8px 16px;
  background: #09090b;
  border-color: #09090b;
  color: #fff;
  letter-spacing: -.01em;
}
.bk-btn--primary:hover { background: #27272a; border-color: #27272a; }
/* Both secondaries on this page are filled grey with a trailing arrow — not
   the outlined treatment the sibling pages use. Padding is asymmetric because
   the arrow sits closer to the right edge than the label does to the left. */
.bk-btn--secondary {
  padding: 8px 14px 8px 16px;
  background: #ededed;
  border-color: #ededed;
  color: #0b0b0a;
}
.bk-btn--secondary:hover { background: #e4e4e7; border-color: #e4e4e7; }
.bk-btn__arrow { width: 16px; height: 16px; flex: none; display: block; }

/* ------------------------------------------------------------------- hero */
.bk-hero {
  /* 172 = the 52px fixed navbar + the 120px gap down to the H1. */
  padding: 172px var(--bk-gutter) 0;
  background: #fff;
}
.bk-hero__inner {
  /* 832 -> 880 on 2026-09-05: with the full stop, "One correspondent relationship." measures 836px
     at 64px, so the two-line hero wrapped to three. */
  width: min(880px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bk-hero__title {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 4.44vw, 64px);
  line-height: 1.0625;   /* 68/64 */
  letter-spacing: -.03em;
  color: var(--bk-ink);
}
.bk-hero__lede {
  margin-top: 24px;
  /* No measure cap. The authored first line needs 443px at 18px and the old
     438px cap wrapped it, orphaning "rails," onto a line of its own. The
     three sibling pages cap nothing here either and let the authored <br>
     do the work; .bk-hero__inner already holds the outer 832px measure. */
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--bk-ink-soft);
}
.bk-hero .bk-actions { margin-top: 32px; }

/* ------------------------------------------------ hero photograph + card */
.bk-heroshot { padding: 72px var(--bk-gutter); background: #fff; }
.bk-heroshot__frame {
  position: relative;
  width: min(var(--bk-max), 100%);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  /* Hairline framing the photograph. Unlike the three solution pages this
     section carries a scaling gutter at every width, so the frame stays inset
     all the way down and can take the line on all four sides. */
  border: 1px solid rgba(17, 16, 16, .13);
  border-radius: 6px;
  overflow: hidden;
}
.bk-heroshot__frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  pointer-events: none;
}

/* Solid white, lifted off the photograph by the same drop shadow the three
   solution pages use on .sol-capcard. It used to carry a 10px translucent
   ring instead (a Figma stroke set to align outside); banks now matches its
   siblings, which lift every floating panel with a shadow. */
.bk-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: calc(100% - 48px);
  padding: 24px 28px 36px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 54px 0 rgba(17, 14, 10, .18);
}
.bk-card__title {
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--bk-ink);
}
/* Rule under EVERY row including the last — unlike the sibling pages, where
   the last row has none. */
/* Icon, then the dark primary, then the grey descriptor flush right -- the
   same row order as .sol-capcard__row on the three sibling pages. This used to
   run the other way (grey label left, value and icon bunched right) and was
   the one place the four solution pages disagreed. Grid rather than flex so
   the three columns line up down the card the way the siblings' do; the track
   is 22px for this card's smaller icon. */
.bk-card__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  padding: 16px 0;
}
.bk-card__row + .bk-card__row { border-top: 1px solid var(--bk-rule); }
.bk-card__row img { width: 22px; height: 22px; display: block; }
/* The primary term. Leads the row, so it carries the ink. */
/* Matched to .sol-capcard__label / __value on the three sibling pages. Banks
   ran both rows at 13.5px/500, so the card carried no size or weight
   hierarchy, and its muted side used --bk-grey (#a1a1aa, cool zinc-400)
   against the siblings' warm, much darker #565653. */
.bk-card__value {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -.01em;
  color: var(--bk-ink);
  white-space: nowrap;
}
/* The descriptor. Right-aligned, mirroring .sol-capcard__value. */
.bk-card__label {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: #565653;
  text-align: right;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- journey */
/* White, not --bk-paper. The hero and heroshot above are hard #fff on this
   page (unlike the solution pages, where the heroshot is paper too), so the
   paper tone landed as a visible step across the page instead of a blend. */
.bk-journey { padding: 90px var(--bk-gutter) 108px; background: #fff; }
.bk-journey__head {
  width: min(640px, 100%);
  margin: 0 auto 60px;
  text-align: center;
}
.bk-journey__title {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.33vw, 48px);
  line-height: 1.15;
  letter-spacing: -.023em;
  color: #0b0b0a;
}
.bk-journey__sub {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--bk-ink-soft);
}
.bk-journey__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bk-card2 {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bk-panel);
}
.bk-card2--photo { background: #000; }
.bk-card2__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Figma draws two blurred black bars over a black base. Two plain gradients
   render the same result far more cheaply than a 12px filter blur. */
.bk-card2--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, 0) 47%);
}
.bk-card2__num {
  position: absolute;
  left: 36px;
  top: 36px;
  z-index: 2;
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.02em;
}
.bk-card2--photo .bk-card2__num { color: #fff; }
.bk-card2--panel .bk-card2__num { color: var(--bk-ink); }
.bk-card2__text {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 52px;
  z-index: 2;
  max-width: 392px;
}
.bk-card2__title {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.125;
  letter-spacing: -.02em;
}
.bk-card2__body {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.02em;
}
.bk-card2--photo .bk-card2__title,
.bk-card2--photo .bk-card2__body { color: #fff; }
.bk-card2--panel .bk-card2__title { color: #0b0b0a; }
.bk-card2--panel .bk-card2__body { color: var(--bk-ink-soft); }

/* White list-card inside the panel cards. Same outside-ring treatment as the
   hero card, no shadow. */
.bk-list {
  position: absolute;
  left: 36px;
  right: 36px;
  top: 152px;
  z-index: 2;
  padding: 0 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 42px 0 rgba(32, 28, 21, .08);
}
.bk-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
}
.bk-list__row + .bk-list__row { border-top: 1px solid #e3e1dc; }
.bk-list__left { display: flex; align-items: center; gap: 47px; }
.bk-list__media { width: 34px; height: 34px; flex: none; display: block; }
/* Flags sit in a grey roundel; the bare line icons do not. */
.bk-list__flag {
  width: 34px;
  height: 34px;
  flex: none;
  padding: 1.4px;
  border-radius: 50%;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-list__flag img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* The 114px text box is a hard width in Figma but its sublabels overflow it on
   purpose — never clip or wrap them. */
.bk-list__text { width: 114px; flex: none; overflow: visible; white-space: nowrap; }
.bk-list__label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #10110f;
  white-space: nowrap;
}
.bk-list__sub {
  display: block;
  padding-top: 3px;
  /* 13px. Was set per variant, 12px on the amounts card and 11px on the refs
     card, so the same tier rendered at two sizes on one page. One value now. */
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
  color: #888983;
  white-space: nowrap;
}
.bk-list__value {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #10110f;
  text-align: right;
  white-space: nowrap;
}

/* ----------------------------------------------------------- capabilities */
/* was 152/283 with a 164px grid offset. Roughly 206px of that was empty
   space; the three sibling pages run 144/146 with a 95px offset. Matched. */
.bk-caps { padding: 130px var(--bk-gutter) 131px; background: var(--bk-beige); }
.bk-caps__title {
  max-width: 773px;
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.33vw, 48px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #0b0b0a;
}
.bk-caps__grid {
  margin-top: 95px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bk-caps__col { padding-right: 32px; }
.bk-caps__col img {
  /* 0.85, i.e. 15% down from full. These are the only icons on the page set
     at 45px, and at full strength the black stroke competed with the serif
     label directly beneath it. Scoped to this section: the 22px row icons and
     the heroshot card keep their own weight. */
  width: 45px; height: 45px; display: block; opacity: .85;
}
.bk-caps__label {
  margin-top: 24px;
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.125;
  letter-spacing: -.02em;
  color: #0b0b0a;
}
.bk-caps__body {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--bk-ink-soft);
}
/* Figma pins column 2's body to 298px, which is what breaks it after "and" and
   makes all three columns two lines tall. Without it the section is 24px short. */
.bk-caps__col:nth-child(2) .bk-caps__body { max-width: 298px; }

/* ---------------------------------------------------- code card (slot 02) */
/* The same white floating card as .bk-list, holding one real API call
   instead of capability rows. Geometry is deliberately identical so the two
   read as the same object: same inset, same top, same radius and shadow. */
.bk-code {
  position: absolute;
  left: 36px;
  right: 36px;
  top: 152px;
  padding: 16px 22px 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 42px 0 rgba(32, 28, 21, .08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bk-code__req { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #e3e1dc; }
.bk-code__m { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--bk-ink); background: #ededed; border-radius: 3px; padding: 3px 7px; }
.bk-code__p { font-size: 13px; line-height: 20px; color: #40403d; }
.bk-code__body { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: #8d8a84; white-space: pre; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.bk-code__body::-webkit-scrollbar { display: none; }
.bk-code__k { color: #6d6a64; }
.bk-code__v { color: #2f2e2b; }
.bk-code__res { display: flex; align-items: flex-start; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #e3e1dc; }
.bk-code__s { flex: none; font-size: 11px; font-weight: 600; color: #2f5d3a; background: #e8f0e9; border-radius: 3px; padding: 3px 7px; }
/* Wraps rather than truncating: an elided id still reads as an id, but a
   cut-off number reads as the wrong number. */
.bk-code__rt { font-size: 13px; line-height: 20px; color: #8d8a84; }

/* ------------------------------------------------------------- scale proof */
/* This section is the homepage's `.exact-mission` and must read as the same
   section wherever it appears. It used to diverge: heading left-aligned, the
   figures set in Inter at 68px, pure white ink, an 1280 shell and 118px of
   padding. Every value below now tracks home-2026's .exact-proof__* exactly.
   The one thing that is NOT copied is the gutter: the homepage pads the
   section itself, this page centres a 1128 shell, and both land the content on
   x=156 at 1440. */
.bk-proof { padding: 115px var(--bk-gutter); background: var(--bk-dark); color: #f5f4f1; }
/* 1128, not the page-wide --bk-max of 1280, so the rows start on the same
   x as the homepage's. Scoped to this section only. */
.bk-proof .bk-shell { width: min(1128px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); }
/* matches the homepage, where the rows list carries 16px block margins that a
   grid parent stops from collapsing */
.bk-proof dl { margin-block: 16px; }
.bk-proof__title {
  margin-bottom: clamp(36px, 3.6vw, 52px);
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.1vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-align: left;
}
.bk-proof__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(24px, 2.6vw, 32px) 0;
  border-top: 1px solid rgba(245, 244, 241, .16);
}
.bk-proof__row:first-child { border-top: 0; }
.bk-proof__label {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.3;
}
.bk-proof__value {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 5.2vw, 45px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------------------------------------------------------------- closing */
.bk-closing {
  /* Same derivation as the sibling pages: padding-top = tail + the footer's
     80 / 72 / 48 lead-in to its divider, so above-heading always equals
     buttons-to-rule. */
  /* The +20px matches home-2026's .closing-cta. It lands on BOTH sides because
     padding-top is derived from the tail, so above-heading and
     buttons-to-footer-divider stay equal: 148 / 125 / 93 at 1440 / 991 / 767,
     the same three numbers the homepage renders. */
  --bk-cta-tail: calc(clamp(20px, 3.3vw, 48px) + 30px);
  --bk-footer-lead: 80px;
  padding: calc(var(--bk-cta-tail) + var(--bk-footer-lead)) var(--bk-gutter) var(--bk-cta-tail);
  /* White, not --bk-paper. The band has no edge of its own so it resolves
     into the footer, matching the six sibling pages. --bk-paper stays
     #fafaf9 for .bk-journey, which is a separate call. */
  background: #ffffff;
  text-align: center;
}
.bk-closing__title {
  font-family: "Bradfordllweb Book", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.33vw, 48px);
  line-height: 1;
  letter-spacing: -.02em;
  color: #0b0b0a;
}
.bk-closing__lede {
  margin-top: 30px;
  font-size: 17px;
  line-height: 26px;
  color: var(--bk-ink-soft);
}
.bk-closing .bk-actions { margin-top: 36px; }

/* ------------------------------------------------------------- responsive */
/* The journey grid stays two-up until 860, so between there and ~1200 the card
   is at its narrowest while the code panel still has to hold a full payload
   line. Buy the width back from the inset and the padding, and step the mono
   down one pixel, rather than letting the longest line scroll out of view. */
/* The cards keep their drawn ratio, so the panel has to fit whatever height
   the ratio leaves once the number and the step copy have taken theirs. The
   insets and the copy tighten first, and the residual is taken by scaling the
   panel itself: a transform does not touch layout, so the copy below stays
   exactly where the ratio puts it. */
@media (min-width: 1101px) and (max-width: 1360px) {
  .bk-card2--panel .bk-list,
  .bk-card2--panel .bk-code {
    left: 24px;
    right: 24px;
    top: 88px;
    transform: scale(var(--bk-panel-k, 1));
    transform-origin: top center;
  }
  .bk-card2--panel .bk-card2__text { left: 24px; right: 24px; bottom: 28px; }
  .bk-card2--panel .bk-card2__title { font-size: 26px; }
  .bk-card2--panel .bk-card2__body { margin-top: 12px; font-size: 15px; }
  .bk-card2--panel .bk-card2__num { left: 24px; top: 20px; font-size: 32px; }
}

@media (min-width: 1101px) and (max-width: 1200px) { .bk-card2--panel { --bk-panel-k: .95; } }





/* Below 1101 the ratio starts costing real legibility: holding it would put the
   payload at 8.3px and then 6.1px. Here the cards give up the ratio instead and
   size to their content, so the panel keeps its type. The photo cards have to
   give up the ratio too, or the row is sized by the panel card and they stop
   short of it; their image is inset:0 + object-fit:cover, so stretching just
   crops a little differently. */
@media (min-width: 861px) and (max-width: 1100px) {
  .bk-card2--panel { aspect-ratio: auto; min-height: 609px; padding: 152px 0 52px; }
  .bk-card2--photo { aspect-ratio: auto; }
  .bk-card2--panel .bk-list,
  .bk-card2--panel .bk-code {
    position: relative;
    inset: auto;
    margin-inline: 20px;
  }
  /* Back on the card floor, as at desktop: with the cards padded to a
     common 609px the slack belongs between the panel and the copy, not
     hanging below it. */
  .bk-card2--panel .bk-card2__text { position: absolute; left: 36px; right: 36px; bottom: 52px; margin: 0; }
}

@media (max-width: 1200px) {
  .bk-code { left: 20px; right: 20px; padding: 14px 12px 16px; }
  .bk-code__body,
  .bk-code__rt,
  .bk-code__p { font-size: 12px; }
  .bk-code__body { line-height: 19px; }
}

/* 861-980 is where the card is narrowest while the grid is still two-up. */
@media (max-width: 980px) {
  .bk-code__body,
  .bk-code__rt,
  .bk-code__p { font-size: 11px; }
  .bk-code__body { line-height: 17px; }
}

@media (max-width: 1040px) {
  .bk-journey { padding-top: 72px; padding-bottom: 79px; }
  .bk-caps { padding-top: 94px; padding-bottom: 108px; }
  .bk-caps__grid { margin-top: 88px; column-gap: 24px; }
  .bk-caps__col { padding-right: 0; }
  .bk-proof { padding-block: 86px; }
  .bk-list__left { gap: 20px; }
  .bk-list__text { width: auto; }
}

@media (max-width: 860px) {
  .bk-journey__grid { grid-template-columns: minmax(0, 1fr); }
  .bk-caps__grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .bk-card2 { aspect-ratio: auto; min-height: 560px; }
  /* One column below 861, so there is no ratio worth protecting: the panel
     cards size to content and the copy follows the panel rather than being
     pinned to a bottom the panel has already reached. */
  .bk-card2--panel { aspect-ratio: auto; min-height: 0; padding: 120px 0 32px; }
  .bk-card2--panel .bk-list,
  .bk-card2--panel .bk-code { position: relative; inset: auto; margin-inline: 24px; }
  .bk-card2--panel .bk-card2__text { position: static; margin: 32px 24px 0; }
}

@media (max-width: 700px) {
  /* Clear the 64px fixed Webflow navbar. */
  .bk-hero { padding-top: 104px; }
  /* Figma draws these 40px tall. That is under the 44px touch minimum this
     site holds to, so the height is raised on touch widths only — desktop
     keeps the design's 40px exactly. */
  .bk-btn { height: 44px; }
  .bk-heroshot { padding-block: 43px; }
  .bk-actions { flex-wrap: wrap; }

  /* The 400x312 card will not sit over a 219px-tall 16:9 photo, so the photo
     joins the flow and the card drops beneath it. It needs its own stacking
     layer or the replaced <img> paints over the card's background. */
  /* As on the solution pages, the frame now wraps the photo AND the card, so
     the hairline moves onto the image. The radius comes with it, otherwise the
     corners would read square here and 6px on desktop. */
  .bk-heroshot__frame { aspect-ratio: auto; overflow: visible; border: 0; }
  .bk-heroshot__frame > img {
    position: static; width: 100%; height: auto; aspect-ratio: 16 / 9;
    border: 1px solid rgba(17, 16, 16, .13);
    border-radius: 6px;
  }
  .bk-card {
    position: relative;
    z-index: 1;
    inset: auto;
    transform: none;
    width: min(400px, calc(100% - 24px));
    max-width: none;
    margin: -56px auto 0;
  }

  .bk-card2 { min-height: 0; }
  .bk-card2__num { left: 24px; top: 24px; font-size: 40px; }
  .bk-card2__text { left: 24px; right: 24px; bottom: 32px; }
  .bk-card2__title { font-size: 28px; }
  /* Let the panel cards grow around the list rather than overlap it. */
  .bk-card2--panel { padding: 132px 0 190px; }
  .bk-card2--panel .bk-list { position: relative; top: auto; left: 20px; right: 20px; padding-inline: 16px; }
  .bk-card2--panel .bk-card2__text { position: static; margin: 28px 24px 0; }
  /* The API panel is ~100px taller than that list, so the card's fixed
     190px tail leaves the copy sitting under it. Size this one to content. */
  .bk-card2--code { padding: 116px 0 28px; }
  .bk-card2--code .bk-code {
    position: relative; inset: auto;
    margin: 0 12px; padding: 14px 14px 16px;
  }
  /* At 390 the widest payload line still runs ~30px past the card. Wrapping is
     the lesser evil against a hidden horizontal scroll: the indent survives,
     and no part of the call is off-screen. */
  .bk-card2--code .bk-code__body { white-space: pre-wrap; overflow-x: visible; }
  .bk-card2--photo { min-height: 460px; }

  .bk-proof__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bk-proof__value { text-align: left; }
}

/* After every other .bk-closing rule, or the base value wins on source order. */
@media (max-width: 991px) { .bk-closing { --bk-footer-lead: 72px; } }
@media (max-width: 767px) { .bk-closing { --bk-footer-lead: 48px; } }