/* PenXtool shared components. Use these classes on new surfaces instead of inventing new ones. */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: var(--r-pill); border: 1.5px solid transparent; font: 600 15px/1 var(--f-body); cursor: pointer; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s, border-color .2s; }
.ds-btn:focus-visible, .ds-input:focus-visible { outline: none; box-shadow: var(--focus); }
.ds-btn--primary { background: var(--ink); color: #fff; } .ds-btn--primary:hover { background: var(--volt); transform: translateY(-1px); }
.ds-btn--accent { background: var(--cyan); color: var(--ink); } .ds-btn--accent:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.ds-btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); } .ds-btn--ghost:hover { border-color: var(--ink); }
.ds-btn--danger { background: #fff; color: var(--st-danger); border-color: var(--st-danger-bg); } .ds-btn--danger:hover { background: var(--st-danger-bg); }
.ds-btn[disabled], .ds-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.ds-btn--sm { min-height: 36px; padding: 0 16px; font-size: 14px; } .ds-btn--block { width: 100%; }
.ds-field { display: block; margin-bottom: 16px; } .ds-field > span, .ds-label { display: block; font: 600 13px var(--f-body); color: var(--ink); margin-bottom: 6px; }
.ds-input, .ds-btn { box-sizing: border-box; }
.ds-input { width: 100%; min-height: 48px; padding: 0 16px; font: 500 16px var(--f-body); color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.ds-input:hover { border-color: var(--faint); } .ds-input:focus { border-color: var(--volt); }
.ds-input[aria-invalid="true"] { border-color: var(--st-danger); }
.ds-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.ds-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font: 600 12px/1.4 var(--f-body); white-space: nowrap; background: var(--st-neutral-bg); color: var(--st-neutral); }
.ds-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.ds-badge--pending { background: var(--st-pending-bg); color: var(--st-pending); } .ds-badge--progress { background: var(--st-progress-bg); color: var(--st-progress); }
.ds-badge--done { background: var(--st-done-bg); color: var(--st-done); } .ds-badge--danger { background: var(--st-danger-bg); color: var(--st-danger); } .ds-badge--info { background: var(--st-info-bg); color: var(--st-info); }
.ds-empty { text-align: center; padding: 40px 20px; color: var(--muted); } .ds-empty b { display: block; color: var(--ink); font-size: 18px; margin-bottom: 6px; }
.ds-alert { padding: 12px 16px; border-radius: 14px; font-size: 14px; background: var(--st-info-bg); color: var(--st-info); } .ds-alert--bad { background: var(--st-danger-bg); color: var(--st-danger); } .ds-alert--ok { background: var(--st-done-bg); color: var(--st-done); }
.ds-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ds-btn, .ds-input { transition: none; } }

/* ===== bank details block (invoices, tracking page, client portal) ===== */
.bank { margin: 20px 0 0; padding: 20px 22px; border: 1.5px solid var(--volt); background: #f6f8ff; border-radius: var(--r-md); }
.bank h3 { margin: 0 0 4px; font: 700 17px var(--f-display); color: var(--ink); } .bank-amt { margin: 0 0 12px; font: 700 32px/1.05 var(--f-display); color: var(--volt); letter-spacing: -.02em; }
.bank-dl { display: grid; margin: 8px 0 0; } .bank-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 10px 0; border-top: 1px solid #dfe3f6; } .bank-dl dt { margin: 0; color: var(--muted); font-size: 13.5px; flex-shrink: 0; } .bank-dl dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; word-break: break-all; user-select: all; cursor: copy; }
.bank-ref dd { color: var(--volt); } .bank-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.trk-pay { padding: 8px 24px 24px; } .trk-pay .bank { margin-top: 16px; }


/* PenXtool typography unification: one shared font system across marketing, tools, account and admin. */
:root{--px-font-body:"Owners XWide",system-ui,-apple-system,"Segoe UI",sans-serif;--px-font-display:"Owners XWide",var(--px-font-body);}
body *:not(code):not(pre):not(.code):not(svg){font-family:var(--px-font-body)!important}html,body,button,input,select,textarea,option,label,small,summary,table,th,td{font-family:var(--px-font-body)!important}
h1,h2,h3,h4,h5,h6,.dx-hi h1,.dx-card h2,.pagehead h1,.ph-row h1,.welcome h2,.stat b,.dx-stats b{font-family:var(--px-font-display)!important;font-stretch:normal!important}
button,input,select,textarea{font-size:inherit;letter-spacing:inherit}
.site-header,.site-header *,.mobile-menu,.mobile-menu *,.tools-bar,.tools-bar *{font-family:var(--px-font-body)!important}
/* A considered mobile navigation rather than a bare full-screen link list. */
.mobile-menu{padding:calc(82px + env(safe-area-inset-top)) clamp(22px,6vw,36px) calc(28px + env(safe-area-inset-bottom));background:linear-gradient(155deg,#fff 0%,#f6f8ff 100%);}
.mobile-menu::before{content:"PENXTOOL";position:absolute;top:calc(28px + env(safe-area-inset-top));left:clamp(22px,6vw,36px);font-family:var(--px-font-display)!important;font-size:13px;font-weight:800;letter-spacing:.13em;color:var(--volt);}
.mobile-menu nav{gap:8px;}
.mobile-menu nav a{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:14px 16px;border:1px solid #e4e9f8;border-radius:15px;background:rgba(255,255,255,.9);font-size:17px;font-weight:650;letter-spacing:-.015em;box-shadow:0 3px 12px rgba(1,0,82,.025);transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.mobile-menu nav a::after{content:"↗";font-size:16px;color:var(--volt);opacity:.65;}
.mobile-menu nav a:hover,.mobile-menu nav a[aria-current="page"]{background:#eef2ff;border-color:#cbd7ff;color:var(--volt);transform:translateX(2px);}
.mobile-menu .mm-foot{padding:18px 4px 0;border-top:1px solid #e0e6f5;margin-top:22px;font-size:13px;gap:10px;}
.menu-btn{width:46px;height:46px;border-radius:15px;background:#f2f5ff;border:1px solid #e3e8f8;box-shadow:0 3px 10px rgba(1,0,82,.04);}
.site-header:not(.is-scrolled) .menu-btn{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.18);}
.menu-open .site-header .menu-btn{background:#eef2ff;border-color:#dce3fa;}
@media(max-width:640px){body{font-size:16px;line-height:1.62}.site-header .bar{min-height:72px}.mobile-menu nav a{font-size:16px;min-height:52px}.menu-btn{width:44px;height:44px}}

/* Brand typography: Owners XWide is the single family across all site interfaces. */
html,body,body button,body input,body select,body textarea,body option,body label,body small,body summary,body table,body th,body td,
body p,body a,body span,body strong,body b,body em,body i,body li,body dt,body dd,body h1,body h2,body h3,body h4,body h5,body h6,
body div:not([class*="icon-font"]):not([class^="fa-"]):not([class*=" fa-"]) {font-family:"Owners XWide",sans-serif!important;}


/* Single brand typeface: Owners XWide throughout PenXtool. */
html,body,body *:not(svg):not(path):not([class*="icon-font"]):not([class^="fa-"]):not([class*=" fa-"]){font-family:"Owners XWide",sans-serif!important;}

/* v29: Owners XWide font family throughout this interface. */
html,body,body *:not(svg):not(path):not([class*="icon-font"]):not([class^="fa-"]):not([class*=" fa-"]){font-family:"Owners XWide",sans-serif!important;}

/* v32: restore the original clean mobile menu — white canvas, bold wide labels, divider lines only. */
.mobile-menu {
  background: #fff !important;
  background-image: none !important;
  color: #010052 !important;
  padding: calc(88px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)) !important;
}
.mobile-menu::before { content: none !important; display: none !important; }
.mobile-menu nav { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.mobile-menu nav a {
  display: block !important;
  min-height: 0 !important;
  padding: 16px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid #e3e5f2 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #010052 !important;
  font-family: "Owners XWide", sans-serif !important;
  font-size: clamp(18px, 2.2vw, 21px) !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  letter-spacing: -0.015em !important;
  text-decoration: none !important;
  transform: none !important;
}
.mobile-menu nav a::after { content: none !important; display: none !important; }
.mobile-menu nav a:hover,
.mobile-menu nav a[aria-current="page"] {
  background: transparent !important;
  border-color: #cbd2e6 !important;
  color: #021bf9 !important;
  transform: none !important;
}
.mobile-menu .mm-foot {
  border-top: 1px solid #e3e5f2 !important;
  border-radius: 0 !important;
  padding: 18px 4px 0 !important;
  margin-top: 22px !important;
  background: transparent !important;
}
.menu-btn { box-shadow: none !important; }
@media (max-width: 640px) {
  .mobile-menu nav a { font-size: 20px !important; min-height: 0 !important; padding: 17px 4px !important; }
}