/* banks-context base (safe to include on any host page; guarded by class scope). */















    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      /* ===== Free zone fit check (hero entry point) =====
         Scoped to .fzfit-* so nothing here reaches other sections. Visual language reuses the
         restriction test on ae/bs-free-zone-vs-mainland.html: mono uppercase eyebrow, hairline
         divided rows, 17px square box that fills with --mineral when checked, 44px row targets,
         full-width primary action. That page is referenced, never modified. */
      .fzfit-dialog { width:100%; max-width:520px; max-height:calc(100vh - 40px); overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--surface,#141a1f); box-shadow:0 24px 60px rgba(0,0,0,.45); }
      .fzfit-dialog:focus { outline:none; }
      @media (max-width:560px) {  .fzfit-dialog { max-height:calc(100vh - 24px); }  }
    /* BEGIN GENERATED banks-context CSS — tools/build-banks-context.py — do not edit */
      .banks-context { padding: 56px 0; border-top: 1px solid var(--line-soft); }
      /* Named areas, not two plain columns. The support line must sit on ONE line at desktop:
         it needs 790px, and while it shared a column with the CTA it could only ever get 757px
         (1124px inner width - 64 padding - 40 gap - 271 CTA). Spanning it across both columns
         gives 1060px. The CTA keeps its bottom-right position by sitting in the logos row. */
      .bc-inner { display: grid; grid-template-columns: 1fr auto; column-gap: 40px; row-gap: 0;
        grid-template-areas: "head head" "sub sub" "logos cta";
        align-items: end; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
      .bc-h { grid-area: head; }
      .bc-sub { grid-area: sub; }
      .bc-logos { grid-area: logos; }
      .bc-cta { grid-area: cta; }
      /* max-width raised from an arbitrary 600px so the grid column governs the measure
         rather than a hard cap. NOTE: this alone does not put the support line on one line at
         desktop - measured at 1440px, the line needs 790px and the column yields 757px, because
         the right-hand CTA reserves 271px + 40px gap out of the 1124px inner width. See the
         component note in banks-context.json. No white-space:nowrap is used anywhere. */
      .bc-h { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--text); margin: 0 0 10px; }
      .bc-sub { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
      .bc-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--text); font-family: var(--mono,'JetBrains Mono',monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: border-color .2s, background .2s; white-space: nowrap; }
      .bc-cta:hover { border-color: rgba(120,140,150,.5); background: rgba(120,140,150,.08); }
      .bc-cta svg { width: 14px; height: 14px; }
      .bc-logos { display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; margin:20px 0 0; padding:22px 0 4px; border-top:1px solid var(--line-soft); }
      /* Logos are the proof element: full colour, full opacity, no grayscale, no tiles.
         Height-led with per-mark max-widths so a wide lockup and a compact wordmark
         read at the same optical weight; aspect ratios are never forced. */
      .bc-logos .bc-logo { height:34px; display:inline-flex; align-items:center; opacity:1; }
      .bc-logos .bc-logo-img { height:34px; width:auto; max-width:140px; object-fit:contain; display:block; filter:none; }
      .bc-logos .bc-logo[href*="wio"] .bc-logo-img { height:26px; max-width:96px; }
      .bc-logos .bc-logo:hover { opacity:.82; }
      .bc-logos span.bc-logo:hover { opacity:1; } /* non-linking marks (VN list) keep no hover affordance */
      .bc-logos .bc-logo:hover .bc-logo-img { filter:none; }
      .bc-logos .bc-logo svg { height:100%; width:auto; display:block; }
      .bc-logos .bc-logo b { font-family:var(--sans,'Inter',system-ui,sans-serif); font-size:21px; line-height:1; letter-spacing:-.01em; font-weight:600; text-transform:none; color:inherit; white-space:nowrap; }
      /* Height-balanced, not proportion-balanced: one family at one size gives every mark the
         same cap height, so the row reads level regardless of name length. Muted by opacity so
         it stays supporting detail under the heading and body. */
      .bc-logos .bc-logo i { font-style:normal; font-family:var(--mono,'JetBrains Mono',monospace); font-size:12px; letter-spacing:.02em; color:var(--faint); }
      @media (max-width:720px) { .bc-inner { grid-template-columns: 1fr; grid-template-areas:"head" "sub" "logos" "cta"; align-items:start; row-gap:0; } .bc-logos { gap:12px 16px; } }
      @media (max-width: 720px) {
        .bc-logos { flex-wrap:nowrap; overflow-x:auto; gap:28px; margin:0 -20px; padding:22px 20px 10px; scrollbar-width:none; }
        .bc-logos::-webkit-scrollbar { display:none; }
        .bc-logos .bc-logo, .bc-logos .bc-logo-img { height:30px; flex:0 0 auto; }
        /* BankIdentity marks (.bkid) are the strip's items since 2026-09-07; without this they shrank to fit the nowrap row
           and their logos overflowed onto each other (2026-09-21 fix). */
        .bc-logos .bkid { flex:0 0 auto; }
        .bc-logos .bc-logo[href*="wio"] .bc-logo-img { height:23px; }
        .bc-logos .bc-logo b { font-size:19px; }
      }
      /* END GENERATED banks-context CSS */