:root{
      --bg:#f3f4f6;
      --text:#0f172a;
      --muted:#6b7280;
      --radius:12px;
      --shadow: 0 8px 30px rgba(15,23,42,0.06);
      --btn-max:360px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }
    html,body{ height:100%; margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
    .wrap{ max-width:760px; margin:28px auto; padding:20px; box-sizing:border-box; }
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92));
      border-radius:var(--radius);
      padding:26px;
      box-shadow:var(--shadow);
      border:1px solid rgba(15,23,42,0.04);
      backdrop-filter: blur(6px);
      box-sizing:border-box;
    }
    .center{ text-align:center; }

    /* Code-based CMR hub logo (used instead of simple .logo block) */
    .brand {
      display:flex;
      align-items:center;
      gap:12px;
      justify-content:center;
      margin-bottom:12px;
    }
    /* .code-logo-wrapper {
      display:flex;
      align-items:center;
      justify-content:flex-start;
      width:100%;
    } */

    .code-logo-box {
      width:110px;
      height:52px;
      background:#071022;
      border-radius:12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:2px 8px;
      box-sizing:border-box;
      box-shadow:0 6px 18px rgba(0,0,0,0.12);
    }

    .code-logo-cmr {
      font-family: "Montserrat", sans-serif;
      font-weight:900;
      font-size:20px;
      color:#ffffff;
      line-height:1;
      display:inline-block;
    }

    .code-logo-hub {
      font-family: "Montserrat", sans-serif;
      font-weight:320;
      font-size:22px;
      margin-left:6px;
      background:linear-gradient(90deg, #73b3cf 0%, #800000 60%, #ffffff 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      -webkit-text-fill-color:transparent;
      display:inline-block;
    }
    h1{ margin:6px 0 0 0; font-size:22px; font-weight:800; }
    p.lead{ margin:10px 0 18px 0; color:var(--muted); font-size:15px; }

    /* Buttons container centered and constrained */
    .btn-wrap {
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:center;
      justify-content:center;
      margin: 6px 0 12px 0;
    }
    .btn-inner {
      width:100%;
      max-width:var(--btn-max);
    }

    /* Button base glass (slightly reduced size) */
    .give-btn{
      display:flex;
      align-items:center;
      gap:12px;
      width:100%;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.12);
      color:#fff;
      font-weight:700;
      font-size:15px;
      cursor:pointer;
      text-decoration:none;
      box-sizing:border-box;
      transition: transform .12s ease, box-shadow .12s ease;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      position:relative;
      overflow:hidden;
    }
    .give-btn:active{ transform: translateY(1px); }
    .give-btn:focus{ outline:2px solid rgba(0,0,0,0.06); outline-offset:2px; }

    .give-btn::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      pointer-events:none;
      mix-blend-mode: overlay;
    }

    .icon-wrap{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(255,255,255,0.08); flex:0 0 30px; }

    /* App gradients (light, original-ish colors) */
    .cashapp-btn{ background:
      linear-gradient(135deg, rgba(0,194,68,0.95), rgba(0,230,91,0.95));
      box-shadow: 0 6px 18px rgba(0,194,68,0.12);
    }
    .paypal-btn{ background:
      linear-gradient(135deg, rgba(0,48,135,0.95), rgba(0,112,186,0.95));
      box-shadow: 0 6px 18px rgba(0,48,135,0.12);
    }
    .zelle-btn{ background:
      linear-gradient(135deg, rgba(108,45,199,0.95), rgba(181,122,255,0.95));
      box-shadow: 0 6px 18px rgba(108,45,199,0.12);
    }

    /* small text under zelle button */
    .zelle-note { color:var(--muted); font-size:13px; margin-top:6px; text-align:center; }

    .icon-wrap { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 30px; }
.btn-icon { width:20px; height:20px; display:block; object-fit:contain; }

/* If the SVGs are colored and you want white icons on brand backgrounds,
   this filter is a simple fallback (not perfect for every SVG). */
.btn-icon.filter-white {
  filter: brightness(0) invert(1) saturate(0);
}
 footer.site-footer { margin-top:18px; padding:18px 0; text-align:center; color:var(--muted); font-size:13px; }

    /* Bank info box */
    .bank-box{
      margin-top:8px;
      /* background: linear-gradient(180deg, rgba(0,0,0,1), rgba(255,255,255,0.88)); */
      background: #0b0b0b;
      border-radius:10px;
      padding:14px;
      border:1px solid rgba(15,23,42,0.04);
      color:#ffffff;
      font-size:15px;
    }

    /* tighten space between section title and bank box */ 
    .section-title { margin-top: 12px; /* was ~20px — reduce as needed */ 
                    margin-bottom: 6px; /* small gap under the title */ 
                    font-weight:700; font-size:16px; }

    .bank-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
    .bank-col{ flex:1 1 220px; min-width:220px; }

    @media (max-width:520px){
      .bank-col{ min-width:100%; }
      .btn-inner{ max-width: 92%; }
      .code-logo-box { width:86px; height:40px; }
    }