:root {
    --ink: #1B2A26;
    --ink-soft: #2B3B36;
    --paper: #EFEAE0;
    --paper-raised: #F7F4EC;
    --moss: #3F5D54;
    --moss-deep: #2C443C;
    --brass: #A87C42;
    --brass-bright: #C79A5D;
    --rust: #A34632;
    --line: rgba(27,42,38,0.14);
    --text: #1E2A26;
    --text-soft: #5B655F;
    --text-on-ink: #F1EEE4;
    --text-on-ink-soft: #B9C2BC;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(27,42,38,0.06);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  :root:not([data-theme="light"]) {
    @media (prefers-color-scheme: dark) {
      --paper: #171E1B;
      --paper-raised: #1E2622;
      --text: #EDEAE1;
      --text-soft: #9BA59E;
      --line: rgba(237,234,225,0.12);
      --ink: #0F1613;
      --ink-soft: #17201C;
    }
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
  }
  h1, h2, h3, .display { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
  a { color: inherit; }
  img { max-width: 100%; }
  button { font-family: inherit; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
  .hide { display: none !important; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 8px; border: 1px solid transparent;
    font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--moss); color: var(--text-on-ink); }
  .btn-primary:hover { background: var(--moss-deep); }
  .btn-brass { background: var(--brass); color: #241a0c; }
  .btn-brass:hover { background: var(--brass-bright); }
  .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
  .btn-ghost:hover { border-color: var(--text-soft); }
  .btn-on-ink { background: transparent; color: var(--text-on-ink); border-color: rgba(241,238,228,0.35); }
  .btn-on-ink:hover { border-color: var(--text-on-ink); }
  .btn-sm { padding: 8px 14px; font-size: 0.85rem; }
  .btn-block { width: 100%; }
  .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .navlink:focus-visible {
    outline: 2px solid var(--brass); outline-offset: 2px;
  }

  /* ============================================================
     PUBLIC MARKETING SITE
     ============================================================ */
  #public-view header.site {
    background: var(--ink); color: var(--text-on-ink);
    padding: env(safe-area-inset-top, 0px) 0 0 0;
  }
  .topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
  .brand { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 600; }
  .brand .mark { width: 28px; height: 28px; border-radius: 6px; background: var(--brass); flex: none; }
  nav.primary { display: flex; gap: 30px; font-size: 0.92rem; }
  nav.primary a { opacity: 0.85; text-decoration: none; }
  nav.primary a:hover { opacity: 1; }
  .topbar-actions { display: flex; gap: 12px; align-items: center; }
  .menu-toggle { display: none; background: none; border: none; color: var(--text-on-ink); font-size: 1.5rem; cursor: pointer; padding: 4px 8px; text-decoration: none; line-height: 1; }

  .hero { padding: 64px 0 88px; }
  .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
  .hero-eyebrow-note { font-size: 0.85rem; color: var(--text-on-ink-soft); margin: 0 0 14px; }
  .hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.06; margin: 0 0 22px; max-width: 12ch; }
  .hero p.lede { font-size: 1.1rem; line-height: 1.55; color: var(--text-on-ink-soft); max-width: 42ch; margin: 0 0 32px; }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

  /* Hero journey-map card */
  .journey-card {
    background: var(--paper-raised); color: var(--text); border-radius: 16px; padding: 26px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    transform: rotate(-1.2deg);
  }
  .journey-card .jc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
  .journey-card .lc-label { font-size: 0.78rem; color: var(--text-soft); }
  .journey-card .jc-title { font-family: 'Fraunces', serif; font-size: 1.3rem; margin: 4px 0 0; }
  .lc-tag { background: var(--moss); color: var(--text-on-ink); font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; flex: none; }
  .journey-map text { font-family: 'Public Sans', sans-serif; }

  section.public-section { padding: 78px 0; border-top: 1px solid var(--line); }
  .section-head { max-width: 46ch; margin-bottom: 44px; }
  .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 0 0 12px; }
  .section-head p { color: var(--text-soft); font-size: 1.02rem; line-height: 1.55; margin: 0; }

  .offer-list { border-top: 1px solid var(--line); }
  .offer-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .offer-row h3 { margin: 0; font-size: 1.2rem; }
  .offer-row p { margin: 0; color: var(--text-soft); font-size: 0.95rem; line-height: 1.5; }
  .offer-row .offer-cta { justify-self: end; }
  .faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
  .faq-item:first-child { border-top: 1px solid var(--line); }
  .faq-item h3 { margin: 0 0 8px; font-size: 1.05rem; font-family: 'Public Sans'; font-weight: 600; }
  .faq-item p { margin: 0; color: var(--text-soft); line-height: 1.55; font-size: 0.93rem; }
  .legal-page h2 { font-size: 1.15rem; margin: 30px 0 10px; font-family: 'Public Sans'; font-weight: 600; }
  .legal-page p { color: var(--text-soft); line-height: 1.6; margin: 0 0 6px; font-size: 0.95rem; }
  .captcha-box { display: flex; align-items: center; gap: 10px; }
  .captcha-box canvas { border: 1px solid var(--line); border-radius: 6px; display: block; }
  .captcha-hint { font-size: 0.78rem; color: var(--text-soft); margin-top: 8px; }

  .stats-band { background: var(--moss-deep); color: var(--text-on-ink); border-radius: 18px; padding: 48px 40px; display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
  .stat b { display: block; font-family: 'Fraunces', serif; font-size: 2.1rem; font-weight: 500; }
  .stat span { font-size: 0.88rem; color: var(--text-on-ink-soft); }

  .cta-band { text-align: center; padding: 90px 0; }
  .cta-band h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 20ch; margin: 0 auto 26px; }

  footer.site { background: var(--ink); color: var(--text-on-ink-soft); padding: 56px 0 40px; font-size: 0.88rem; }
  .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; margin-bottom: 40px; }
  .footer-grid h4 { color: var(--text-on-ink); font-size: 0.82rem; margin: 0 0 14px; font-weight: 600; }
  .footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
  .footer-grid a { text-decoration: none; opacity: 0.85; }
  .footer-grid a:hover { opacity: 1; }
  .footer-bottom { border-top: 1px solid rgba(241,238,228,0.14); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .demo-flag { display: inline-flex; align-items: center; gap: 8px; background: rgba(200,150,80,0.16); color: var(--brass-bright); border: 1px solid rgba(200,150,80,0.4); padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; }
  .demo-flag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brass-bright); }

  /* ---------- Login screen ---------- */
  #login-view {
    min-height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink); padding: 40px 20px;
  }
  .login-card {
    background: var(--paper-raised); border-radius: 16px; padding: 42px 38px; width: 100%; max-width: 400px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.4);
  }
  .login-card .brand { color: var(--text); margin-bottom: 6px; }
  .login-card p.sub { color: var(--text-soft); font-size: 0.92rem; margin: 0 0 28px; }
  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: 0.82rem; color: var(--text-soft); margin-bottom: 6px; }
  .field input, .field select {
    width: 100%; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--paper); color: var(--text); font-size: 0.95rem; font-family: inherit;
  }
  .field input:focus, .field select:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: transparent; }
  .login-note { font-size: 0.8rem; color: var(--text-soft); margin-top: 18px; line-height: 1.5; text-align: center; }
  .back-link { display: inline-block; margin-bottom: 22px; font-size: 0.85rem; color: var(--text-on-ink-soft); text-decoration: none; }
  .back-link:hover { color: var(--text-on-ink); }

  /* ============================================================
     APP SHELL (post-login)
     ============================================================ */
  #app-view { display: flex; min-height: 100vh; min-height: 100%; }
  .app-sidebar {
    background: var(--ink); color: var(--text-on-ink-soft); width: 230px; flex: none;
    display: flex; flex-direction: column; padding: 22px 16px;
    padding-top: calc(22px + env(safe-area-inset-top, 0px));
  }
  .app-sidebar .brand { color: var(--text-on-ink); font-size: 1.05rem; margin-bottom: 30px; padding: 0 8px; }
  .app-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .app-nav .navlink {
    display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: none;
    color: var(--text-on-ink-soft); padding: 11px 12px; border-radius: 8px; font-size: 0.92rem; cursor: pointer;
    text-decoration: none;
  }
  .app-nav .navlink:hover { background: rgba(241,238,228,0.06); color: var(--text-on-ink); }
  .app-nav .navlink.active { background: var(--moss-deep); color: var(--text-on-ink); }
  .app-nav .ic { width: 18px; text-align: center; opacity: 0.9; }
  .sidebar-foot { border-top: 1px solid rgba(241,238,228,0.12); padding-top: 14px; margin-top: 14px; }
  .sidebar-foot .who { font-size: 0.85rem; color: var(--text-on-ink); margin-bottom: 10px; padding: 0 8px; }

  .app-main { flex: 1; min-width: 0; padding: 34px 40px 60px; padding-top: calc(34px + env(safe-area-inset-top, 0px)); }
  .app-topbar { display: none; align-items: center; justify-content: space-between; background: var(--ink); color: var(--text-on-ink); padding: 16px 18px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); position: sticky; top: 0; z-index: 5; }
  .app-topbar .brand { font-size: 1rem; }
  .app-topbar button { background: none; border: none; color: var(--text-on-ink); font-size: 1.4rem; cursor: pointer; }

  .page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
  .page-head h1 { font-size: 1.9rem; margin: 0; }
  .page-head .sub { color: var(--text-soft); font-size: 0.92rem; margin-top: 4px; }

  .card { display: block; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: inherit; }
  .card-pad { padding: 22px; }

  .acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 32px; }
  .acct-card { padding: 20px; border-left: 3px solid var(--moss); cursor: pointer; transition: border-color .15s ease; }
  .acct-card:hover { border-left-color: var(--brass); }
  .acct-card .label { font-size: 0.8rem; color: var(--text-soft); display: flex; justify-content: space-between; }
  .acct-card .bal { font-family: 'Fraunces', serif; font-size: 1.7rem; margin: 8px 0 2px; }
  .acct-card .num { font-size: 0.78rem; color: var(--text-soft); }

  .section-title { font-size: 1.05rem; margin: 0 0 14px; font-weight: 600; font-family: 'Public Sans'; }

  table.tx { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
  table.tx th { text-align: left; font-weight: 600; color: var(--text-soft); font-size: 0.78rem; padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
  table.tx td { padding: 13px 12px; border-bottom: 1px solid var(--line); }
  table.tx tr:last-child td { border-bottom: none; }
  table.tx .amt.neg { color: var(--rust); }
  table.tx .amt.pos { color: var(--moss); }
  .tx-cat { font-size: 0.76rem; color: var(--text-soft); background: var(--paper); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
  .table-scroll { overflow-x: auto; }

  .accounts-list-page { display: flex; flex-direction: column; gap: 18px; }
  .accrow { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; cursor: pointer; }
  .accrow:hover { border-color: var(--text-soft); }
  .accrow .bal { font-family: 'Fraunces', serif; font-size: 1.4rem; }

  .transfer-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
  .transfer-form .field { margin-bottom: 18px; }
  .amount-input { position: relative; }
  .amount-input span { position: absolute; left: 13px; top: 11px; color: var(--text-soft); }
  .amount-input input { padding-left: 24px; }
  .confirm-note { background: rgba(63,93,84,0.1); border: 1px solid rgba(63,93,84,0.3); border-radius: 8px; padding: 14px 16px; font-size: 0.88rem; margin-top: 6px; }

  .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
  /* Standard ID-1 card ratio (85.6mm x 53.98mm = 1.586:1), as used by real debit/credit cards */
  .bankcard {
    aspect-ratio: 1.586 / 1; width: 100%; max-width: 360px;
    border-radius: 16px; padding: 20px 22px; color: var(--text-on-ink);
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    box-shadow: 0 14px 34px rgba(0,0,0,0.3);
  }
  .bankcard.debit { background: linear-gradient(135deg, var(--moss-deep), var(--moss)); }
  .bankcard.credit { background: linear-gradient(135deg, #2b2118, var(--brass)); }
  .bankcard.frozen { filter: grayscale(0.85); opacity: 0.65; }
  .bankcard .bc-top { display: flex; justify-content: space-between; align-items: flex-start; }
  .bc-chip { width: 38px; height: 29px; border-radius: 5px; background: linear-gradient(135deg, #f1dfa0, #c7a85c); position: relative; overflow: hidden; }
  .bc-chip::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(80,60,10,0.35); border-radius: 2px; }
  .bc-chip::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(80,60,10,0.35); box-shadow: 0 -8px rgba(80,60,10,0.25), 0 8px rgba(80,60,10,0.25); }
  .bc-kind { font-size: 0.72rem; letter-spacing: 0.06em; opacity: 0.8; text-transform: uppercase; }
  .bc-number { font-family: 'Public Sans', monospace; font-size: clamp(1rem, 4vw, 1.25rem); letter-spacing: 0.12em; font-weight: 600; text-shadow: 0 1px 1px rgba(0,0,0,0.3); }
  .bankcard .bc-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
  .bc-name { font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 600; }
  .bc-expiry { font-size: 0.66rem; opacity: 0.75; margin-top: 3px; letter-spacing: 0.04em; }
  .bc-network { width: 46px; height: 30px; position: relative; flex: none; }
  .bc-network .c1, .bc-network .c2 { position: absolute; top: 0; width: 28px; height: 28px; border-radius: 50%; }
  .bc-network .c1 { left: 0; background: var(--brass-bright); opacity: 0.92; }
  .bc-network .c2 { left: 16px; background: var(--paper-raised); opacity: 0.8; mix-blend-mode: screen; }
  .card-controls { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

  .toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; user-select: none; }
  .toggle .sw { width: 36px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; flex: none; }
  .toggle .sw::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--paper-raised); top: 2px; left: 2px; transition: left .15s; }
  .toggle.on .sw { background: var(--moss); }
  .toggle.on .sw::after { left: 18px; }

  .empty-state { text-align: center; padding: 50px 20px; color: var(--text-soft); }

  @media (max-width: 880px) {
    nav.primary, .topbar-actions .btn-ghost { display: none; }
    .menu-toggle { display: block; }
    .hero-grid { grid-template-columns: 1fr; }
    .journey-card { transform: none; }
    .offer-row { grid-template-columns: 1fr; }
    .offer-row .offer-cta { justify-self: start; }
    .stats-band { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .app-sidebar { display: none; }
    .app-topbar { display: flex; }
    .app-main { padding: 24px 18px 50px; }
    .transfer-layout { grid-template-columns: 1fr; }
    #app-view { flex-direction: column; }
    .app-sidebar.mobile-open { display: flex; position: fixed; inset: 0; width: 100%; z-index: 20; }
  }

  /* ---------- Access code, modal, tabs, settings, quick actions ---------- */
  #verify-view { min-height: 100%; display: none; align-items: center; justify-content: center; background: var(--ink); padding: 40px 20px; }
  #verify-view:not(.hide) { display: flex; }
  #verify-view .login-card { max-width: 420px; }
  .code-input { text-align: center; letter-spacing: 0.4em; font-size: 1.3rem !important; font-weight: 600; }
  .err { color: var(--rust); font-size: 0.85rem; margin-bottom: 14px; }

  .modal-backdrop { position: fixed; inset: 0; background: rgba(15,22,19,0.6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; }
  .modal { background: var(--paper-raised); border-radius: 14px; padding: 28px; width: 100%; max-width: 400px; box-shadow: 0 30px 70px rgba(0,0,0,0.4); }

  .tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
  .tab-btn { flex: 1; min-width: 110px; padding: 10px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; font-size: 0.82rem; font-weight: 600; background: var(--paper); color: var(--text); }
  .tab-btn.active { background: var(--moss); color: var(--text-on-ink); border-color: var(--moss); }

  .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-bottom: 28px; }
  .qa { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; font-size: 0.85rem; font-weight: 600; text-align: center; transition: border-color .15s; }
  .qa:hover { border-color: var(--brass); }
  .qa-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--moss); color: var(--text-on-ink); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }

  .info-grid { display: flex; flex-direction: column; }
  .info-row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
  .info-row:last-child { border-bottom: none; }
  .info-row span { color: var(--text-soft); flex: none; }
  .info-row b { font-weight: 600; text-align: right; word-break: break-word; }
  .form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  @media (max-width: 880px) { .form-cols { grid-template-columns: 1fr; } }

  /* ============================================================
     SUSPENSION PAGE
     ============================================================ */
  #suspended-view { min-height: 100%; display: flex; align-items: center; justify-content: center; background: var(--ink); padding: 32px 18px; }
  .susp-card { max-width: 440px !important; text-align: center; }
  .susp-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: rgba(163,70,50,0.12); color: var(--rust); }
  .susp-icon.hold { background: rgba(168,124,66,0.16); color: var(--brass); }
  .susp-icon.ok { background: rgba(63,93,84,0.14); color: var(--moss); }
  .susp-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: var(--rust); color: #fff; margin-bottom: 12px; }
  .susp-badge.hold { background: var(--brass); color: #241a0c; }
  .susp-card h2 { margin: 0 0 14px; font-size: 1.55rem; line-height: 1.2; }
  .susp-who { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; font-weight: 600; margin-bottom: 18px; }
  .susp-msg { color: var(--text-soft); line-height: 1.6; font-size: 0.97rem; margin: 0 0 22px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
  .susp-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
  .susp-contact-title { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); margin-bottom: 2px; }
  .susp-hours { font-size: 0.78rem; color: var(--text-soft); }

  /* ============================================================
     MOBILE LAYER
     Desktop keeps the sidebar. On phones the app becomes an
     app-style layout: slim header, bottom tab bar, "More" sheet,
     swipeable account cards, list-style transactions, bottom-sheet
     prompts and thumb-sized controls.
     ============================================================ */
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }
  body.no-scroll { overflow: hidden; }
  .m-meta { display: none; }
  .app-tabbar { display: none; }
  .textarea { width: 100%; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font-size: 0.95rem; font-family: inherit; resize: vertical; }
  .textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: transparent; }
  .tx-add-form { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr 1fr auto; gap: 12px; align-items: end; }
  .card-issue-form { border: 1px dashed var(--line); border-radius: 10px; padding: 16px 16px 0; margin-bottom: 20px; }

  /* Public mobile drawer */
  .public-drawer {
    position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--text-on-ink);
    display: flex; flex-direction: column; overflow-y: auto;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 22px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .pd-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
  .pd-close { background: none; border: none; color: var(--text-on-ink); font-size: 1.5rem; cursor: pointer; width: 44px; height: 44px; }
  .public-drawer nav { display: flex; flex-direction: column; }
  .public-drawer nav a { padding: 17px 2px; font-family: 'Fraunces', Georgia, serif; font-size: 1.55rem; border-bottom: 1px solid rgba(241,238,228,0.12); text-decoration: none; }
  .pd-actions { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
  .pd-actions .btn { padding: 15px 22px; font-size: 1rem; }
  .sheet-backdrop { position: fixed; inset: 0; background: rgba(15,22,19,0.55); z-index: 40; display: flex; align-items: flex-end; }
  .sheet { background: var(--paper-raised); width: 100%; border-radius: 20px 20px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); animation: sheetup .22s ease; }
  .sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 16px; }
  .sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .sheet-item { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-weight: 600; font-size: 0.92rem; text-decoration: none; color: var(--text); min-height: 62px; }
  @keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

  @media (min-width: 881px) {
    .public-drawer, #more-sheet { display: none !important; }
  }

  @media (max-width: 880px) {
    /* ---- public site ---- */
    .wrap { padding-left: 20px !important; padding-right: 20px !important; }
    .topbar { padding: 14px 0; }
    .topbar-actions .btn-brass { display: none; }
    .topbar-actions .btn-sm { padding: 9px 16px; }
    .menu-toggle { width: 44px; height: 44px; font-size: 1.6rem; }
    .hero { padding: 40px 0 56px; }
    .hero-ctas .btn { flex: 1 1 100%; padding: 15px 22px; font-size: 1rem; }
    section.public-section { padding: 52px 0; }
    .offer-row { grid-template-columns: 1fr !important; gap: 10px; padding: 22px 0; }
    .offer-row .offer-cta { justify-self: start; }
    .stats-band { padding: 32px 24px; gap: 22px; }
    .cta-band { padding: 60px 0; }
    .footer-bottom { flex-direction: column; }
    #admin-main { padding-top: 28px !important; padding-bottom: 70px !important; }

    /* ---- sign-in screens ---- */
    #login-view, #verify-view, #suspended-view { align-items: flex-start; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 40px; }
    #login-view > div, #verify-view > div, #suspended-view > div { width: 100%; }
    .login-card { padding: 32px 22px; border-radius: 18px; }

    /* ---- app shell ---- */
    .app-sidebar { display: none !important; }
    .app-topbar { display: flex; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
    .app-topbar a { display: flex; text-decoration: none; }
    .app-main { padding: 20px 16px calc(100px + env(safe-area-inset-bottom, 0px)); }
    .page-head { margin-bottom: 20px; gap: 10px; }
    .page-head h1 { font-size: 1.55rem; }
    .hide-m { display: none !important; }

    .app-tabbar {
      display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
      background: var(--paper-raised); border-top: 1px solid var(--line);
      padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -6px 20px rgba(27,42,38,0.08);
    }
    .app-tabbar .tab {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
      min-height: 52px; padding: 4px 2px; font-size: 0.68rem; font-weight: 600;
      color: var(--text-soft); background: none; border: none; text-decoration: none; cursor: pointer; font-family: inherit;
    }
    .app-tabbar .tab svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .app-tabbar .tab.active { color: var(--moss); }
    .app-tabbar .tab.active svg { stroke-width: 2.3; }
    .app-tabbar .tab-fab .fab {
      width: 50px; height: 50px; border-radius: 50%; margin-top: -26px; display: flex; align-items: center; justify-content: center;
      background: var(--moss); color: var(--text-on-ink); border: 3px solid var(--paper-raised); box-shadow: 0 6px 16px rgba(44,68,60,0.38);
    }
    .app-tabbar .tab-fab.active .fab { background: var(--brass); color: #241a0c; }
    .app-tabbar .tab-fab svg { stroke: currentColor; }

    /* ---- dashboard ---- */
    .quick-actions { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .qa { padding: 14px 6px; font-size: 0.8rem; }
    .acct-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px 26px; padding: 2px 16px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-padding-left: 16px; }
    .acct-grid::-webkit-scrollbar { display: none; }
    .acct-grid > .acct-card { flex: 0 0 80%; scroll-snap-align: start; }
    .acct-grid > .acct-card:only-child { flex-basis: 100%; }
    .card-pad { padding: 18px 16px; }

    /* ---- forms: thumb-sized, no iOS zoom ---- */
    .field input, .field select, .textarea { font-size: 16px; min-height: 48px; }
    .amount-input span { top: 14px; }
    .btn { min-height: 46px; }
    .btn-sm { min-height: 40px; }
    .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -4px 18px; padding: 0 4px 4px; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 11px 16px; font-size: 0.85rem; }
    .info-row { flex-direction: column; gap: 3px; }
    .info-row b { text-align: left; }
    .tx-add-form { grid-template-columns: minmax(0, 1fr); }
    .transfer-layout { grid-template-columns: minmax(0, 1fr); }
    .app-main, .card, .transfer-layout > * { min-width: 0; }
    .bankcard { max-width: none; }
    .cards-grid { grid-template-columns: 1fr; gap: 28px; }
  }

  @media (max-width: 640px) {
    /* transactions become a clean list: description + amount, meta underneath */
    table.tx.stack thead { display: none; }
    table.tx.stack, table.tx.stack tbody { display: block; }
    table.tx.stack tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
    table.tx.stack tr:last-child { border-bottom: none; }
    table.tx.stack td { display: block; padding: 0; border: none; }
    table.tx.stack .c-date, table.tx.stack .c-acct, table.tx.stack .c-cat { display: none; }
    table.tx.stack .c-desc { grid-column: 1; font-weight: 500; font-size: 0.93rem; }
    table.tx.stack .c-amt { grid-column: 2; grid-row: 1; font-weight: 600; white-space: nowrap; }
    table.tx.stack .c-act { grid-column: 1 / -1; margin-top: 8px; }
    .m-meta { display: block; font-weight: 400; font-size: 0.76rem; color: var(--text-soft); margin-top: 3px; }

    /* admin customer list as cards */
    table.tx.admin-table tr { grid-template-columns: 44px 1fr auto; grid-template-areas: "av name total" "av status act"; row-gap: 8px; }
    table.tx.admin-table .a-avatar { grid-area: av; align-self: start; }
    table.tx.admin-table .a-name { grid-area: name; font-size: 0.95rem; word-break: break-word; }
    table.tx.admin-table .a-total { grid-area: total; font-weight: 600; }
    table.tx.admin-table .a-status { grid-area: status; }
    table.tx.admin-table .a-act { grid-area: act; justify-self: end; margin: 0; }
    table.tx.admin-table .c-user, table.tx.admin-table .c-email { display: none; }

    /* code prompt slides up from the bottom */
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal { max-width: none; border-radius: 20px 20px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); animation: sheetup .22s ease; }
  }

  #login-view, #verify-view, #suspended-view { min-height: 100vh; min-height: 100dvh; }

  /* ---------- Full-page overlay (transfer blocked) + toast ---------- */
  .fullpage-overlay { position: fixed; inset: 0; z-index: 300; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; }
  .toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--text-on-ink); padding: 12px 18px; border-radius: 10px; font-size: 0.88rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 200; max-width: calc(100% - 32px); text-align: center; border-left: 3px solid var(--rust); }

/* Success / receipt screen */
.receipt-check { width: 64px; height: 64px; border-radius: 50%; background: var(--moss); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; animation: receiptpop .35s ease; }
@keyframes receiptpop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.receipt-amt { font-family: 'Fraunces', serif; font-size: 2rem; text-align: center; margin: 2px 0 18px; }
.receipt-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.receipt-row span { color: var(--text-soft); }
.receipt-row b { text-align: right; font-weight: 600; word-break: break-word; }