/* Public site — TrackPro punch on VoltPay ink/volt */
.site-header{
  position:relative;z-index:40;height:84px;
  background:#f5f5f6;border-bottom:1px solid #e8e8ea;
  font-family:'Manrope',system-ui,sans-serif;
  transition:background .25s,border-color .25s,backdrop-filter .25s;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom-color:#e8e8ea;
}
.site-header .site-header-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  width:calc(100% - 64px);max-width:1280px;height:100%;margin:auto;
}
.site-brand{display:inline-flex;align-items:center;gap:8px;justify-self:start;text-decoration:none;color:#171717}
.site-brand svg{width:29px;height:34px;flex-shrink:0}
.site-brand strong{font-family:'Sora',sans-serif;font-size:22px;line-height:1;letter-spacing:-.03em}
.site-logo-img{display:block;height:42px;width:auto;max-width:min(260px,60vw);object-fit:contain}
.site-logo-img-sm{height:30px;max-width:180px}
.site-logo-img-auth{height:52px;max-width:260px;margin-inline:auto}
.site-brand .site-logo-img{height:42px}
.site-nav-links{display:flex;align-items:center;justify-content:center;gap:24px;height:100%}
.site-nav-links a{
  font-size:14px;font-weight:600;color:#6b7280;display:flex;align-items:center;
  min-height:44px;position:relative;text-decoration:none;white-space:nowrap;
}
.site-nav-links a:hover,.site-nav-links a[aria-current=page]{color:#171717}
.site-nav-links a[aria-current=page]:after{
  content:'';height:2px;position:absolute;bottom:0;left:0;right:0;background:#e11d48;
}
.site-nav-actions{display:flex;align-items:center;gap:10px;justify-self:end}
.site-button{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border-radius:0;border:2px solid #e11d48;background:#e11d48;color:#ffffff;
  text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;box-sizing:border-box;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.site-button:hover{background:#be123c;border-color:#be123c;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #171717}
.site-button-secondary{background:transparent;border-color:#e8e8ea;color:#171717;border-width:1px}
.site-button-secondary:hover{background:#f3f4f6;box-shadow:6px 6px 0 #e11d48;border-color:#e11d48}
.site-menu-toggle{display:none}
.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid #e11d48;outline-offset:4px}
#site-mobile-nav{
  position:absolute;top:100%;left:0;right:0;background:#ffffff;border-bottom:1px solid #e8e8ea;
  padding:12px 24px 20px;max-height:calc(100dvh - 76px);overflow-y:auto;
}
#site-mobile-nav[hidden]{display:none}
#site-mobile-nav a{
  display:flex;align-items:center;min-height:48px;padding:10px 14px;font-size:15px;color:#52525b;
  border-radius:12px;text-decoration:none;box-sizing:border-box;
}
#site-mobile-nav a:hover,#site-mobile-nav a[aria-current=page]{background:#f3f4f6;color:#e11d48}
.site-mobile-account{border-top:1px solid #e8e8ea;padding-top:8px;margin-top:8px}
@media(min-width:1100px){#site-mobile-nav{display:none}}
@media(max-width:1099px){
  .site-header{height:76px}
  .site-header .site-header-inner{display:flex;width:calc(100% - 40px);gap:16px}
  .site-nav-links{display:none}
  .site-nav-actions{margin-left:auto}
  .site-menu-toggle{
    display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:0;
    border:1px solid #e8e8ea;border-radius:0;background:transparent;color:#52525b;
  }
  .site-menu-toggle svg{width:22px;height:22px}
}
@media(max-width:699px){
  .site-header{height:68px}
  .site-header .site-header-inner{width:calc(100% - 32px);gap:10px}
  .site-brand strong{font-size:20px}
  .site-nav-actions .site-button{padding:0 12px;font-size:12px}
  .site-nav-actions .site-button-secondary{display:none}
  #site-mobile-nav{padding:8px 16px 16px;max-height:calc(100dvh - 68px)}
}

/* Content */
body.public-site{
  --vx-bg:#f5f5f6;--vx-bg-2:#ffffff;--vx-card:#ffffff;--vx-border:#e8e8ea;
  --vx-primary:#e11d48;--vx-text:#171717;--vx-muted:#6b7280;
  --ts-bg:#f5f5f6;--ts-bg-2:#ffffff;--ts-card:#ffffff;--ts-border:#e8e8ea;
  --ts-primary:#e11d48;--ts-accent:#be123c;--ts-text:#171717;--ts-muted:#6b7280;
  background:#f5f5f6;color:#171717;
  font-family:'Manrope',system-ui,sans-serif;line-height:1.6;
}
.public-site>section{padding-top:64px;padding-bottom:72px;min-height:55vh}
.public-site h1{
  font-family:'Archivo Black','Sora',sans-serif;font-size:clamp(36px,5vw,56px);
  line-height:.95;letter-spacing:-.03em;font-weight:400;text-transform:uppercase;
}
.public-site h2{
  font-family:'Sora',sans-serif;letter-spacing:-.02em;line-height:1.2;font-weight:700;
}
.public-site p{max-width:75ch}
.public-site .text-slate-400{color:#6b7280}
.public-site .text-slate-500{color:#6b7280}
.public-site .text-slate-300{color:#52525b}
.public-site :is(.text-blue-400,.text-cyan-400,.text-sky-400,.text-blue-300,.text-cyan-300){color:#e11d48}
.public-site .ts-card{
  background:#ffffff;border:1px solid #e8e8ea;border-radius:24px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.public-site .ts-card:hover{border-color:#e11d48;transform:translate(-2px,-2px);box-shadow:8px 8px 0 #171717}
.public-site .ts-input{
  background:#f3f4f6;color:#171717;border-color:#e8e8ea;border-radius:16px;min-height:46px;font-size:16px;
}
.public-site .ts-input:focus{border-color:#e11d48;outline:2px solid rgba(225, 29, 72,.35);outline-offset:2px;box-shadow:none}
.public-site .ts-btn{border-radius:0;min-height:44px;font-size:14px;font-weight:700;letter-spacing:0}
.public-site .ts-btn-primary{background:#e11d48;border:2px solid #e11d48;color:#ffffff;border-radius:999px}
.public-site .ts-btn-primary:hover{background:#be123c;box-shadow:6px 6px 0 #171717;transform:translate(-2px,-2px)}
.public-site .ts-btn-ghost{border:1px solid #e8e8ea;background:#f3f4f6;color:#171717;border-radius:999px}
.public-site [class*="bg-gradient"]{background-color:#f3f4f6!important;background-image:none!important}
.public-site [class*="bg-blue-"],.public-site [class*="from-blue"],.public-site [class*="to-violet"],.public-site [class*="to-purple"]{background-color:#f3f4f6!important;background-image:none!important}
.public-site [class*="border-blue-"]{border-color:#e8e8ea}
.public-site table{background:#ffffff;min-width:600px;font-variant-numeric:tabular-nums;width:100%}
.public-site thead{background:#f3f4f6}
.public-site th{color:#6b7280;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.08em;font-family:'Sora',sans-serif}
.public-site td{padding-top:16px;padding-bottom:16px}
.public-site tbody tr:hover{background:#f3f4f6}
.public-site .overflow-x-auto{border-radius:18px;border-color:#e8e8ea}
.public-site a:focus-visible,.public-site button:focus-visible,.public-site summary:focus-visible{outline:2px solid #e11d48;outline-offset:4px}
.public-site input[type=checkbox]{accent-color:#e11d48}
.public-site .public-cms{max-width:1040px}
.public-cms .cms-heading{border-bottom:1px solid #e8e8ea;padding-bottom:30px;margin-bottom:32px}
.public-cms .cms-copy{max-width:760px;font-size:16px;color:#6b7280}
.public-cms .cms-copy h2{font-size:24px;color:#171717;margin-top:32px;margin-bottom:12px;font-family:'Sora',sans-serif}
.public-cms .cms-copy h3{font-size:19px;color:#171717;margin-top:26px}
.public-cms .cms-copy a{color:#e11d48!important;text-decoration:underline;text-underline-offset:3px}
.public-cms .cms-copy ul{list-style:disc;padding-left:22px}
.public-cms .cms-copy li{margin:6px 0}
.public-site .public-eyebrow{
  color:#e11d48;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 12px;font-weight:700;
  font-family:'Sora',sans-serif;
}

/* Auth atmosphere — VoltPay split feel */
.public-site .min-h-\[calc\(100vh-4rem\)\],
.public-site section.auth-shell{
  background:
    radial-gradient(ellipse 50% 40% at 20% 0%, rgba(225, 29, 72,.08), transparent 55%),
    #f5f5f6;
}
.public-site .ts-card h1{font-size:clamp(28px,4vw,36px);letter-spacing:-.02em;text-transform:none;font-family:'Sora',sans-serif;font-weight:800;line-height:1.1}

.public-footer{background:#f5f5f6;border-top:1px solid #e8e8ea;padding:42px 24px 0;font-size:14px;font-family:'Manrope',system-ui,sans-serif}
.public-footer-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:2fr repeat(3,1fr) 1.5fr;gap:32px}
.public-footer h3{font-size:13px;font-weight:700;color:#171717;margin:0 0 12px;font-family:'Sora',sans-serif;text-transform:uppercase;letter-spacing:.06em}
.public-footer p,.public-footer li{font-size:13px;color:#6b7280;line-height:1.7}
.public-footer ul{list-style:none;margin:0;padding:0}
.public-footer li{margin-bottom:6px}
.public-footer a:hover{color:#e11d48}
.public-footer .footer-brand-name{font-size:22px;font-weight:800;color:#171717;margin-bottom:10px;font-family:'Sora',sans-serif}
.public-footer-bottom{max-width:1200px;margin:32px auto 0;padding:20px 0;border-top:1px solid #e8e8ea;display:flex;justify-content:space-between;gap:24px}
.public-footer-bottom p{font-size:11px}
.public-footer form{display:flex;margin-top:14px;gap:6px}
.public-footer input{min-width:0;width:100%;border:1px solid #e8e8ea;background:#ffffff;border-radius:0;padding:10px;font-size:13px;color:#171717}
.public-footer button{width:44px;height:44px;flex-shrink:0;background:#e11d48;border:0;border-radius:999px;color:#ffffff;font-weight:800;cursor:pointer}
.public-footer button:hover{background:#be123c}
@media(max-width:767px){
  .public-site>section{padding-top:36px;padding-bottom:44px}
  .public-site h1{font-size:32px}
  .public-site .min-h-\[calc\(100vh-4rem\)\]{min-height:0}
  .public-footer-inner{grid-template-columns:1fr 1fr;gap:28px}
  .public-footer-inner>div:first-child,.public-footer-inner>div:last-child{grid-column:1/-1}
  .public-footer-bottom{display:block}
  .public-footer-bottom p+p{margin-top:8px}
  .public-site .public-cms .cms-copy{font-size:15px}
}
@media(max-width:359px){.public-site form .grid-cols-2{grid-template-columns:1fr}.public-site .ts-card{padding:20px}}

/* Auth split — VoltPay style */
.vx-auth{
  display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 84px);
  background:
    radial-gradient(ellipse 50% 40% at 15% 10%, rgba(225, 29, 72,.1), transparent 55%),
    #f5f5f6;
}
.vx-auth-side{
  display:flex;flex-direction:column;justify-content:center;padding:48px clamp(24px,5vw,72px);
  border-right:1px solid #e8e8ea;
}
.vx-auth-side h1{
  font-family:'Archivo Black',Sora,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(36px,5vw,56px);line-height:.92;letter-spacing:-.03em;margin:0 0 16px;
}
.vx-auth-side h1 span{color:#e11d48}
.vx-auth-side>p{color:#6b7280;max-width:36ch;margin:0;font-size:16px;line-height:1.55}
.vx-auth-points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.vx-auth-points li{display:flex;align-items:center;gap:10px;color:#52525b;font-size:14px;font-weight:600}
.vx-auth-points svg{width:18px;height:18px;color:#e11d48}
.vx-auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.vx-auth .ts-card{max-width:420px;width:100%;border-radius:24px;box-shadow:none!important}
.vx-auth .vxh-eyebrow{color:#e11d48;font:700 11px/1 Sora,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
@media(max-width:899px){
  .vx-auth{grid-template-columns:1fr;min-height:0}
  .vx-auth-side{display:none}
  .vx-auth-form{padding:32px 16px 48px}
}
