/* iBnk project page (works/ibnk.html): the intro copy and the contents of its
   boards. Figma file pYerAoMQJ0vxt2FurFNnXc, frame "works-ibnk" (6586:10480).
   Board numbers are Figma px at the frame's own size; the board framework in
   css/work.css scales them to the column.

   Fonts: the product UI on the components board is set in TT Firs Neue, served
   from assets/fonts/TTFirsNeue-*.woff2. These are TRIAL files for now: swap in
   the licensed webfonts (same file names) before the site goes public. local()
   stays as a fallback; Plus Jakarta Sans covers anything missing. */

@font-face { font-family: "iBnk UI"; src: url("../../assets/fonts/TTFirsNeue-Regular.woff2") format("woff2"), local("TT Firs Neue Trl Regular"), local("TTFirsNeueTrl-Regular"); font-weight: 400; font-display: swap; }
@font-face { font-family: "iBnk UI"; src: url("../../assets/fonts/TTFirsNeue-Medium.woff2") format("woff2"), local("TT Firs Neue Trl Medium"), local("TTFirsNeueTrl-Medium"); font-weight: 500; font-display: swap; }
@font-face { font-family: "iBnk UI"; src: url("../../assets/fonts/TTFirsNeue-DemiBold.woff2") format("woff2"), local("TT Firs Neue Trl DemiBold"), local("TTFirsNeueTrl-DemiBold"); font-weight: 600; font-display: swap; }

@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Width ----------
   The page is drawn at 1440 with 145px on each side and a 1149px column.
   From 1440 up the column stays at 1149px (as on the Versa page) and the
   sides grow instead: the content never scales up on wide screens. Below 1440 the sides shrink in step with the screen, down to
   the site gutter on phones.

   --u is one Figma px at the current column width (1px at 1440 and above).
   Text and spacing use max(their smaller-screen size, n × --u), so they keep
   their Figma size from 1440 up and their responsive sizes below. */
/* <main> is the width reference (cqw), so a visible scrollbar can't make the
   text scale drift from the boards, which js/board.js fits to the real width. */
main:has(> .work--ibnk) { container-type: inline-size; }
.work--ibnk {
  --side: clamp(var(--gutter), 10.07cqw, 145px);
  --u: calc((min(100cqw, 1440px) - 2 * var(--side)) / 1149);
  /* The copy is set in a narrower column that starts where the 800px windows
     start (x 319 in the 1440 frame = 174 into the 1149 column). */
  --ib-indent: calc(174 * var(--u));
  width: min(100% - 2 * var(--side), 1149px);
  margin-top: 0;                      /* the intro block above holds the top space */
  font-family: "Geist", var(--font);
  --project-color: #f4511e;
  --ib-orange: linear-gradient(180deg, #f4511e 14.012%, #ff6b3d 79.412%);
  --ib-ink: #1f2529;
  --ib-muted: #81868b;
  --ib-faint: #a2a6ab;
  --ib-line: #f3f3f5;
  --ib-board: #e7e7e7;
}

/* ---------- Intro ----------
   Same as the Versa hero: a 1440 block in Figma px (Back x 318 / y 84, lockup y 192), scaled with `zoom`
   by js/works/ibnk.js — shrinks below 1440, never grows. Copy flows inside it at its 1440 sizes. */
.ib-intro {
  box-sizing: border-box;
  width: 1440px;
  margin: 0 auto;
  padding: 84px 0 0 318px;
  zoom: var(--intro-zoom, 1);
  font-family: "Geist", var(--font);
}
.ib-intro :where(h1, h2, p) { margin: 0; }
.ib-intro .work-back { font-family: var(--font); font-size: 16px; line-height: 20px; }
.ib-head { margin-top: 88px; }
/* App icon + "iBnk" (Figma 6593:13505): 80px icon, 24px gap, 44px word. */
.ib-lockup { display: flex; align-items: center; gap: 24px; width: fit-content; }
.ib-lockup__icon {
  position: relative;
  flex: none;
  width: 80px;
  aspect-ratio: 1;
  border-radius: 27.78%; /* 22.22 / 80 */
  background: linear-gradient(180deg, #f4511e 14.012%, #ff6b3d 79.412%);
}
.ib-lockup__icon img { position: absolute; max-width: none; }
.ib-lockup__icon img:first-child { left: 36.43%; top: 16.36%; width: 26.52%; height: 20.66%; }
.ib-lockup__icon img:last-child { left: 44.14%; top: 46.3%; width: 11.73%; height: 43.21%; }
.ib-lockup__name {
  font-family: var(--font); /* Plus Jakarta Sans ExtraBold in Figma */
  font-size: 44px;
  font-weight: 800;
  line-height: normal;
  background: linear-gradient(180deg, #f4511e 14.012%, #ff6b3d 79.412%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ib-url {
  display: inline-block;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
  color: #f4511e;
}
.ib-lede { max-width: 848px; margin-top: 48px; font-size: 22px; font-weight: 700; }
.ib-lede em { font-style: normal; color: #f4511e; }
.ib-subhead { margin-top: 51px; font-size: 20px; font-weight: 700; line-height: normal; }
.ib-caps {
  display: grid;
  gap: 20px;
  max-width: 820px;
  margin: 20px 0 0;
  padding-left: 1.5em;
  font-size: 18px;
  font-weight: 400;
}
.ib-caps li { white-space: pre-wrap; } /* keeps the spaced "Receive  -  " separator */
.ib-caps__desc { color: #aaa; }

/* ---------- Boards ---------- */
/* Gaps follow the Figma frame: --gap is the space above a block in Figma px,
   and a % margin (relative to the column width) keeps it in proportion. */
.work--ibnk .boards {
  grid-template-columns: minmax(0, 1fr); /* the bands' bleed must not widen the track */
  gap: 0;
  margin-top: max(clamp(36px, 3.6vw, 52px), calc(52 * var(--u)));
}
.work--ibnk .boards > * + * { margin-top: calc(var(--gap, 48) / 1149 * 100%); }

/* Section copy: a title (Geist SemiBold 20) and 13px body text, either in the
   indented copy column (.ib-sect) or in two columns over a pair of windows
   (.ib-notes: x 49 and 599, 500 wide, in the 1149 board). */
.ib-sect { margin-left: var(--ib-indent); }
.ib-sect__title {
  margin-block: 0;
  font-size: max(18px, calc(20 * var(--u)));
  font-weight: 600;
  line-height: normal;
}
.ib-sect__text,
.ib-sect__list {
  max-width: max(calc(var(--w, 500) * var(--u)), min(100%, 480px));
  margin-top: max(12px, calc(20 * var(--u)));
  font-size: max(13px, calc(13 * var(--u)));
  font-weight: 400;
  line-height: normal;
}
.ib-sect__text + .ib-sect__text { margin-top: max(8px, calc(10 * var(--u))); }
.ib-sect__list { --w: 600; padding-left: 1.5em; list-style: decimal; }
.ib-notes {
  display: grid;
  grid-template-columns: 49fr 500fr 50fr 500fr 50fr;
}
.ib-note-col:nth-child(1) { grid-column: 2; }
.ib-note-col:nth-child(2) { grid-column: 4; }
.ib-notes .ib-sect__text { max-width: none; }

/* Full-width grey band behind a board: it runs to the edges of <main> while
   the board inside stays on the column. */
.ib-band {
  margin-inline: calc(50% - 50cqw);
  padding-inline: calc(50cqw - 50%);
  background: var(--ib-board);
}
/* A band with a heading above its board: --pt is the heading's top and --mt
   the space from the heading to the board, in Figma px. */
.ib-band--titled { padding-top: calc(var(--pt, 106) * var(--u)); }
.ib-band--titled > .board { margin-top: max(24px, calc(var(--mt, 76) * var(--u))); }
/* "IBNK VAULT INC." over the overview window (Geist Bold 44, centred) */
.ib-company {
  margin: 0;
  font-size: max(clamp(28px, 1rem + 2vw, 44px), calc(44 * var(--u)));
  font-weight: 700;
  line-height: normal;
  text-align: center;
  background: var(--ib-orange);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ib-board {
  font-family: var(--font); /* "iBnk" app name is Plus Jakarta Sans in Figma */
  overflow: hidden;
  line-height: normal;
}
.ib-board > *,
.ib-board img { position: absolute; }
.ib-board img { max-width: none; }
/* A board whose pictures run past the column into the side margins */
.ib-bleed,
.ib-bleed > .board__stage { overflow: visible; }

/* ---------- Safari window ----------
   One component drawn at 800 × 560.556 (Figma "Safari Light"); smaller copies
   set --k (500-wide windows use 0.625) and .sf--sm. All four corners are
   rounded (16px; 10px on the 500-wide ones) with a white inside stroke (4px;
   3px on the 500-wide ones, so 4.8px before the 0.625 scale).

   Figma places the title bar and screenshot from the window's outer edge and
   draws the stroke on top of them; here children sit inside the border, so
   they are pulled back by --b. --y is the screenshot's top from the outer edge. */
.sf {
  --b: 4px;
  width: 800px;
  height: 560.556px;
  background: #fff;
  border: var(--b) solid #fff;
  border-radius: 16px;
  overflow: hidden;
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
}
.sf--sm { --b: 4.8px; }
/* A window standing on the bottom edge of its band: only the top corners round. */
.sf--top { border-radius: 16px 16px 0 0; }

/* Scroll demo (js/works/scroll-demo.js): the page's scrolling column is a
   separate picture inside a clip under the window's fixed sidebar and header.
   It fades out over 8px under the header, as the content would. */
.sf__scroller {
  position: absolute;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 8px);
  mask-image: linear-gradient(transparent, #000 8px);
}
.ib-board .sf__scroll-img { left: 0; top: 0; width: 616px; height: auto; will-change: transform; }
.sf__thumb {
  position: absolute;
  left: 762px;
  top: 92px;
  width: 3px;
  height: 229px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.26);
  opacity: 0;
  transition: opacity var(--hover-dur) var(--hover-ease);
}
.sf.is-scrolling .sf__thumb { opacity: 1; }
.sf__shot { left: calc(-1 * var(--b)); top: calc(var(--y, 28px) - var(--b)); width: 800px; height: auto; }
.sf__bar {
  position: absolute;
  inset: calc(-0.244px - var(--b)) calc(-1 * var(--b)) auto;
  height: 27.733px;
  background: #fff;
  font: 510 6.93px/1 "SF Pro Text", "SF Pro", -apple-system, system-ui, sans-serif;
  color: #4c4c4c;
}
.sf__bar > * { position: absolute; top: 4.267px; }
.sf__lights { display: flex; gap: 4.8px; left: 9.07px; top: 10.13px; }
.sf__lights i {
  width: 7.467px;
  height: 7.467px;
  border-radius: 50%;
  border: 0.267px solid rgba(0, 0, 0, 0.1);
  background: #ff736a;
}
.sf__lights i:nth-child(2) { background: #febc2e; }
.sf__lights i:nth-child(3) { background: #19c332; }

/* Liquid-glass pills: a soft light fill with a faint halo. */
.sf__pill,
.sf__url {
  height: 19.2px;
  border-radius: 999px;
  background-color: #f7f7f7;
  background-repeat: no-repeat;
  box-shadow: 0 0 5.3px rgba(0, 0, 0, 0.06);
}
.sf__pill--side {
  left: 50.67px;
  width: 28.6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' fill='none' stroke='%234c4c4c' stroke-width='.8'%3E%3Crect x='.9' y='1' width='9.6' height='8' rx='1.6'/%3E%3Cpath d='M4.3 1v8M1.9 3h1.4M1.9 4.4h1.4M1.9 5.8h1.4'/%3E%3Cpath d='M13.3 4.2l1.6 1.6 1.6-1.6' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 18px 9px;
  background-position: 4.6px center;
}
.sf__pill--nav {
  left: 86.93px;
  width: 36.13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 19' fill='none' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.2 6.3L8.4 9.6l2.8 3.3' stroke='%234c4c4c'/%3E%3Cpath d='M18 4.3v10.6' stroke='%23e6e6e6' stroke-width='.53'/%3E%3Cpath d='M24.8 6.3l2.8 3.3-2.8 3.3' stroke='%23c6c6c6'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.sf__url {
  left: 238.4px;
  right: 238.93px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5.333px;
  background-image:
    url("../../assets/works/ibnk/safari-page.svg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='none' stroke='%23808080' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.3 4.6a2.9 2.9 0 1 1-.9-2.2'/%3E%3Cpath d='M6.7 1.1l-.2 1.5 1.5.2'/%3E%3C/svg%3E");
  background-size: 6.564px 6.222px, 8.533px 8.533px;
  background-position: 6.3px center, calc(100% - 5.333px) center;
}
.sf__pill--tools {
  right: 3.73px;
  width: 70.4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 19' fill='none' stroke='%234c4c4c' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.6' cy='9.6' r='3.6'/%3E%3Cpath d='M9.6 7.6v3.7M8.1 9.9l1.5 1.5 1.5-1.5'/%3E%3Cpath d='M24.6 6.5v5M23.1 8l1.5-1.5L26.1 8M23 9.3h-.9v4.2h5v-4.2h-.9'/%3E%3Cpath d='M41.7 6.2v6.8M38.3 9.6h6.8' stroke-width='.85'/%3E%3Crect x='55.5' y='8' width='5.4' height='5.4' rx='1'/%3E%3Cpath d='M57.3 8V6.8a1 1 0 0 1 1-1h3.6a1 1 0 0 1 1 1v3.6a1 1 0 0 1-1 1h-1'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* Down arrows between the steps of the batch flow: Figma's horizontal arrow, turned. */
.ib-flow-arrow { width: 30px; height: 14.728px; transform: translate(-15px, -7.364px) rotate(90deg); }

/* Profile screens */
.ib-tile {
  border: 3px solid #fff;
  border-radius: 12px;
  overflow: hidden;
}
.ib-tile img { position: static; width: 100%; height: 100%; object-fit: cover; }
.ib-tile--lg { border-width: 3.76px; border-radius: 15.039px; }
/* Brand pictures: 6px / 11px white outside strokes round a 12 / 16 radius */
.ib-tile--brand { border-width: 6px; border-radius: 18px; }
.ib-tile--poster { border-width: 11px; border-radius: 27px; }

/* Empty-state cards beside the empty pages (white card, r 7.3, drawn into the picture) */
.ib-empty-card { width: 213.807px; height: 120px; }

/* ---------- Design system ----------
   The heading sits at x 238 of the frame (93 into the column), left of the copy column.
   The page wall is a band of #f2f2f2 whose tiles run off both sides; a gradient
   (Figma Rectangle 346278221) fades them into the band at the edges. */
.ib-sect--wide { margin-left: calc(93 * var(--u)); }
.ib-ds__title { font-size: max(19px, calc(22 * var(--u))); color: var(--project-color); }
.ib-ds { position: relative; overflow: hidden; background: #f2f2f2; }
.ib-ds::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f2f2f2 1%, rgba(242, 242, 242, 0) 18.7%, rgba(242, 242, 242, 0) 83.5%, #f2f2f2 99.2%);
  pointer-events: none;
}
.ib-ds__tile { width: 300px; height: 200px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16); }

/* Sign-up demo: a separate page (works/demos/ibnk-signup/, built from
   drafts/ibnk-signup-demo) drawn at 800 × 560. It only plays; it takes no input. */
.ib-demo { border: 0; background: transparent; pointer-events: none; color-scheme: normal; }

/* ---------- Components band ---------- */
.ib-ui {
  font-family: "iBnk UI", var(--font);
  font-weight: 400;
  color: var(--ib-ink);
}
.ib-ui > * { position: absolute; }
.ib-ui p { white-space: nowrap; }
.ib-card { background: #fff; border-radius: 12px; overflow: hidden; }
.ib-card > *,
.ib-panel > * { position: absolute; }
/* Figma gives these a 2px white stroke on a white fill, which draws nothing. */
.ib-panel { background: #fff; border-radius: 16px; }

.ib-empty__title { left: 0; right: 0; top: 150px; text-align: center; font-size: 14px; font-weight: 500; color: #000; }
.ib-ui .ib-empty__text { left: 58px; top: 176px; width: 291px; text-align: center; font-size: 12px; color: var(--ib-faint); white-space: normal; }

/* Upload → Review Quote → Confirm stepper */
.ib-steps__tray { left: 72px; top: 51px; width: 496px; height: 147px; background: #f5f5f5; border: 2px solid #fff; border-radius: 16px; }
.ib-steps__line { top: 101px; width: 92px; height: 2px; }
.ib-steps__label,
.ib-steps__hint { transform: translate(-50%, -50%); text-align: center; }
.ib-steps__label { top: 131px; font-size: 14px; font-weight: 500; }
.ib-steps__hint { top: 149.5px; font-size: 12px; color: var(--ib-faint); }
.ib-badge {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #fff;
  transform: rotate(180deg);
}
.ib-badge img { position: static; }
.ib-badge--done {
  width: 20px;
  height: 20px;
  box-shadow: 0 1px 6px rgba(6, 104, 67, 0.16);
  background: radial-gradient(circle at 90% 105%, rgba(0, 192, 122, 0.02) 22%, rgba(0, 192, 122, 0.06) 35%, rgba(0, 192, 122, 0.1) 52%), #fff;
}
.ib-badge--done img { width: 11.43px; height: 10px; }
.ib-badge--now {
  width: 24px;
  height: 24px;
  border-width: 1.2px;
  box-shadow: 0 1.2px 7.2px rgba(255, 158, 98, 0.16);
  background: radial-gradient(circle at 90% 105%, rgba(255, 158, 99, 0.12) 22%, rgba(255, 158, 99, 0.03) 35%, rgba(255, 158, 99, 0.1) 52%), #fff;
}
.ib-badge--now img { width: 12px; height: 12px; }
.ib-badge--bank {
  width: 36px;
  height: 36px;
  border-width: 1.565px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1.565px 9.391px rgba(0, 0, 0, 0.16);
}
.ib-badge--bank img { width: 18px; height: 18px; }

/* Single / Batch payment options */
.ib-option { width: 430px; height: 131px; }
.ib-option__icon { left: 24px; top: 54px; width: 24px; height: 24px; }
.ib-option__icon img { inset: 0; width: 100%; height: 100%; }
.ib-option__title { left: 68px; font-size: 16px; font-weight: 600; }
.ib-option__text { left: 68px; font-size: 12px; color: var(--ib-muted); }
.ib-option__go { left: 380px; top: 58px; width: 16px; height: 16px; transform: rotate(180deg); }

/* Payout channel + quote */
.ib-channel { width: 430px; height: 82px; }
.ib-quote { width: 430px; height: 403px; }
.ib-row {
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ib-row--lg { height: 24px; font-size: 18px; font-weight: 500; }
.ib-row--sm { height: 15px; font-size: 12px; color: var(--ib-muted); }
.ib-row--sm b { font-weight: 500; color: var(--ib-ink); }
.ib-amount { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ib-amount img,
.ib-row img,
.ib-note img,
.ib-check img { position: static; flex: none; }
.ib-amount--total { color: #f4511e; }
.ib-flag { width: 24px; height: 24px; border-radius: 5.76px; object-fit: cover; }
.ib-rule { left: 16px; width: 398px; height: 1px; background: var(--ib-line); }
.ib-note { left: 16px; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ib-muted); }
.ib-check { left: 16px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }

/* ---------- Documents ---------- */
.ib-doc {
  width: 320px;
  height: 453px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
.ib-doc img { position: static; width: 100%; height: auto; }

/* ---------- Mascot expressions ---------- */
.ib-mood {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 320px;
  margin: 0;
  padding: 20px;
  background: #fff;
  border-radius: 24px;
}
.ib-mood img { position: static; width: 240px; height: 240px; }
@media (max-width: 1023px) {
  /* Narrower screens: the copy uses the full column. */
  .work--ibnk { --ib-indent: 0px; }
  .ib-sect--wide { margin-left: 0; }
}
@media (max-width: 767px) {
  /* Phones: the caption columns stack instead of following the windows. */
  .ib-notes { grid-template-columns: 1fr; gap: 28px; }
  .ib-note-col:nth-child(n) { grid-column: 1; }
}

.ib-mood figcaption {
  margin-top: 8px; /* Figma's 8px spacer between the image and the label */
  font: 700 18px/normal "Noto Sans SC", "Noto Sans CJK SC", var(--font);
  color: var(--ib-ink);
  white-space: nowrap;
}

/* ---------- Intro on tablets and phones (≤1023px) ----------
   Above 1023 the intro is the 1440 Figma block zoomed down. Below that it is laid out at readable sizes
   on the site gutter, so the copy wraps to the window instead of shrinking as one block. */
@media (max-width: 1023px) {
  .ib-intro { width: auto; zoom: 1; padding: 40px var(--gutter) 24px; }
  .ib-head { margin-top: 56px; }
  .ib-lockup { gap: 18px; }
  .ib-lockup__icon { width: 64px; }
  .ib-lockup__name { font-size: 36px; line-height: 1.2; }
  .ib-url { margin-top: 14px; font-size: 16px; overflow-wrap: anywhere; }
  .ib-lede { max-width: 640px; margin-top: 40px; font-size: 20px; line-height: 1.4; }
  .ib-subhead { margin-top: 40px; font-size: 18px; }
  .ib-caps { max-width: 640px; gap: 16px; margin-top: 16px; font-size: 16px; line-height: 1.5; }
}
@media (max-width: 767px) {
  .ib-intro { padding-top: 32px; }
  .ib-head { margin-top: 40px; }
  .ib-lockup { gap: 14px; }
  .ib-lockup__icon { width: 56px; }
  .ib-lockup__name { font-size: 30px; }
  .ib-url { font-size: 15px; }
  .ib-lede { margin-top: 32px; font-size: 17px; line-height: 1.45; }
  .ib-subhead { margin-top: 32px; font-size: 17px; }
  .ib-caps { padding-left: 1.2em; font-size: 15px; }
}

/* ---------- Window pairs on phones (≤767px) ----------
   Receive / Send show two 500-wide windows side by side. On a phone that leaves each at ~140px,
   so the second window drops under the first (the board grows to fit) and js/board.js crops the
   board to the single window width. */
@media (max-width: 767px) {
  .board.ib-pair { --board-h: 870 !important; }
  .ib-pair .sf:nth-child(2) { left: 49px !important; top: 455px !important; }
}