/* PunchWallet product surfaces — white, black and orange. */
body[data-surface=app]{--ink:#111;--paper:#fff;--line:#E2E2E2;--muted:#626262;--soft:#F5F5F5;--accent:#F4511E;--crema:#FFB08F;--on-dark:#fff;color:#111;background:#fff;overflow-x:clip;font-optical-sizing:auto}
html{scroll-behavior:smooth}
body[data-surface=app] header{position:sticky;top:0;z-index:30;max-width:none;background:#FFFFFFE8;border-bottom:1px solid #E8E8E8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body[data-surface=app] header>*:first-child{margin-left:max(0px,calc((100vw - 1500px)/2))}
body[data-surface=app] header>nav{margin-right:max(0px,calc((100vw - 1500px)/2))}
body[data-surface=app] .brand::after{content:'.';color:#F4511E}
body[data-surface=app] main{max-width:1500px}
body[data-surface=app] .workspace,body[data-surface=app] .form-wrap,body[data-surface=app] .mobile-surface{position:relative;isolation:isolate}
body[data-surface=app] .workspace::before,body[data-surface=app] .form-wrap::before,body[data-surface=app] .mobile-surface::before{content:'';position:absolute;z-index:-2;pointer-events:none;width:520px;height:420px;right:-80px;top:-90px;background:radial-gradient(ellipse,#FF662766 0%,#FF8A5640 32%,transparent 69%);filter:blur(32px)}
body[data-surface=app] .workspace::after,body[data-surface=app] .form-wrap::after,body[data-surface=app] .mobile-surface::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:520px;height:420px;right:-80px;top:-90px;opacity:.4;background-image:radial-gradient(circle,#A2381099 0 .65px,transparent .9px),radial-gradient(circle,#F4511E66 0 .6px,transparent .85px);background-size:3px 3px,5px 5px;background-position:0 0,1px 2px;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse,#000 4%,#000b 34%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse,#000 4%,#000b 34%,transparent 70%)}
body[data-surface=app] .btn{border-radius:8px;background:#111;border-color:#111;color:#fff;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
body[data-surface=app] .btn:hover{background:#2B2B2B;border-color:#2B2B2B;transform:translateY(-2px);box-shadow:0 10px 24px #00000014}
body[data-surface=app] .btn:active{transform:translateY(0) scale(.985);box-shadow:none}
body[data-surface=app] .btn.secondary{background:#FFFFFFB8;border-color:#D5D5D5;color:#111;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body[data-surface=app] .btn.secondary:hover{background:#fff;border-color:#AFAFAF}
body[data-surface=app] .btn.quiet{background:transparent;border-color:transparent;color:#111}
body[data-surface=app] .btn.danger{background:#fff;color:#9B2F18;border-color:#E0A291}
body[data-surface=app] .workspace-nav{position:sticky;top:93px;z-index:18;border-color:#E2E2E2;background:#FFFFFFE8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body[data-surface=app] .workspace-nav a{position:relative;transition:color .2s ease}
body[data-surface=app] .workspace-nav a:hover{color:#F4511E}
body[data-surface=app] .workspace-nav a[aria-current=page]{border-color:#F4511E;color:#111}
body[data-surface=app][data-route=manage] .workspace-nav,body[data-surface=app][data-route=team] .workspace-nav,body[data-surface=app][data-route=billing] .workspace-nav{margin-bottom:0}
body[data-surface=app] .workspace-nav+.form-wrap{max-width:900px;margin:0;padding:48px 0 0}
body[data-surface=app] .workspace-nav+.workspace{border-top:0;padding-top:48px}
body[data-surface=app] .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.05em;color:#5B5B5B}
body[data-surface=app] .panel,body[data-surface=app] .metrics,body[data-surface=app] .mobile-surface{background:#FFFFFFD9;border:1px solid #E5E5E5;border-radius:14px;box-shadow:0 24px 70px #0000000A,inset 0 1px 0 #fff;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
body[data-surface=app][data-route=customer] .mobile-surface,body[data-surface=app][data-route=join] .mobile-surface,body[data-surface=app][data-route=verify] .mobile-surface{background:linear-gradient(145deg,#FFFFFFC7,#FFFFFF80);border-color:#FFFFFFF2;box-shadow:0 30px 90px #6D260F24,inset 0 1px 0 #fff,inset 0 0 42px #FFFFFF42;backdrop-filter:blur(34px) saturate(135%);-webkit-backdrop-filter:blur(34px) saturate(135%)}
body[data-surface=app][data-route=customer] .mobile-surface{max-width:620px;margin:54px auto;padding:42px 54px;background:linear-gradient(145deg,#FFF6EFD9,#FFFFFF99),radial-gradient(circle at 20% 70%,#FF6A2366,transparent 62%);}
body[data-surface=app][data-route=customer] .mobile-surface>h1{font-size:clamp(2.8rem,6vw,5rem);letter-spacing:-.07em;max-width:430px;}
body[data-surface=app][data-route=customer] .mobile-surface>.punches{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:30px 14px;margin:28px 0;border-top:1px solid #1112;border-bottom:1px solid #1112;}
body[data-surface=app][data-route=customer] .mobile-surface>.punches .punch{width:100%;aspect-ratio:1;border-radius:50%;border:1px solid #1113;background:#FFFFFF80;color:#111;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:.82rem;}
body[data-surface=app][data-route=customer] .mobile-surface>.punches .punch.filled{background:#FF5B24;border-color:#FF5B24;color:#111;box-shadow:inset 0 1px 0 #fff5;}
body[data-surface=app][data-route=customer] .mobile-surface>.punches::before{display:none}
@media(max-width:560px){body[data-surface=app][data-route=customer] .mobile-surface{margin:24px 0;padding:28px 22px}body[data-surface=app][data-route=customer] .mobile-surface>.punches{gap:10px;padding:22px 4px}}
body[data-surface=app] .panel.soft{background:#F8F8F8D9}
body[data-surface=app] .metrics{overflow:clip}
body[data-surface=app] .metric{border-color:#E2E2E2;background:#FFFFFFB8}
body[data-surface=app] .metric:first-child{background:#111;color:#fff}
body[data-surface=app] .metric:first-child span{color:#BDBDBD}
body[data-surface=app] .metric strong{font-weight:500}
body[data-surface=app] .next-action{position:relative;overflow:clip;border:1px solid #FFD0BD;border-left:4px solid #F4511E;border-radius:12px;background:linear-gradient(115deg,#FFF4EE,#fff 68%)}
body[data-surface=app] .next-action::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.34;background-image:radial-gradient(circle,#B23C1499 0 .6px,transparent .85px);background-size:3px 3px;mask-image:linear-gradient(90deg,#000,transparent 55%);-webkit-mask-image:linear-gradient(90deg,#000,transparent 55%)}
body[data-surface=app] .next-action>*{position:relative;z-index:1}
body[data-surface=app] .pill{background:#FFE5DA;color:#A53312;border:1px solid #FFC3AA;border-radius:999px;padding:7px 12px}
body[data-surface=app] .feedback{background:#FFF2EC;border-left-color:#F4511E;color:#3A2118}
body[data-surface=app] .progress .active{border-color:#F4511E;color:#111}
body[data-surface=app] .field input,body[data-surface=app] .field select,body[data-surface=app] .field textarea,body[data-surface=app] .period select,body[data-surface=app] .quantity input,body[data-surface=app] .quantity button{background:#FFFFFFD9;border-color:#CFCFCF;color:#111;border-radius:8px}
body[data-surface=app] .field input:focus,body[data-surface=app] .field select:focus,body[data-surface=app] .field textarea:focus{border-color:#F4511E;box-shadow:0 0 0 3px #F4511E1F;outline:0}
body[data-surface=app] .field input:hover,body[data-surface=app] .field select:hover,body[data-surface=app] .field textarea:hover,body[data-surface=app] .period select:hover{border-color:#999}
body[data-surface=app] .card-preview{position:sticky;overflow:clip;background:#111;color:#fff;border:1px solid #333;border-radius:14px;box-shadow:0 24px 65px #0002}
body[data-surface=app] .card-preview::before{content:'';position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse at 100% 100%,#F4511E88,transparent 60%)}
body[data-surface=app] .card-preview::after{content:'';position:absolute;z-index:0;inset:0;opacity:.7;background-image:radial-gradient(circle,#FF8955 0 .65px,transparent .9px);background-size:3px 3px;mix-blend-mode:screen;mask-image:radial-gradient(ellipse at 100% 100%,#000,transparent 67%);-webkit-mask-image:radial-gradient(ellipse at 100% 100%,#000,transparent 67%)}
body[data-surface=app] .card-preview>*{position:relative;z-index:1}
body[data-surface=app] .card-preview .muted{color:#C7C7C7}
body[data-surface=app] .card-preview .punch{border-color:#777}
body[data-surface=app] .card-preview .punch.filled{background:#F4511E;border-color:#F4511E;color:#111}
body[data-surface=app] .punch.filled{background:#F4511E;border-color:#F4511E;color:#111}
body[data-surface=app] .enrollment-qr{border:1px solid #E0E0E0;border-radius:10px;padding:10px;box-shadow:0 14px 35px #0000000A}
body[data-surface=app] table th{font-family:'IBM Plex Mono',monospace;color:#666}
body[data-surface=app] table td,body[data-surface=app] table th,body[data-surface=app] .activity{border-color:#E5E5E5}
body[data-surface=app] tbody tr{transition:background .18s ease}
body[data-surface=app] tbody tr:hover{background:#FFF4EF}
body[data-surface=app] summary{transition:color .18s ease}
body[data-surface=app] summary:hover{color:#C73E12}
body[data-surface=app] input[type=checkbox]{accent-color:#F4511E}
body[data-surface=app] #notice{background:#111;color:#fff;border:1px solid #444}
body[data-surface=app] dialog{background:#FFFFFFF2;color:#111;border-color:#D8D8D8;backdrop-filter:blur(24px)}
body[data-surface=app] :is(button,a,input,select,textarea,summary):focus-visible{outline-color:#F4511E}
body[data-surface=app] .role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
body[data-surface=app] .role-option{display:flex;flex-direction:column;min-height:300px;padding:28px;border:1px solid #E3E3E3;border-radius:14px;background:#FFFFFFD9;box-shadow:0 18px 45px #00000008;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body[data-surface=app] .role-option{transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
body[data-surface=app] .role-option:hover{transform:translateY(-4px);border-color:#F3B49B;box-shadow:0 24px 58px #A83B1014}
body[data-surface=app] .role-option h2{font-size:1.75rem;margin:4px 0 16px}
body[data-surface=app] .role-option p{color:#626262;margin-bottom:28px}
body[data-surface=app] .role-option .btn{margin-top:auto;width:100%}
body[data-surface=app] .new-business{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:18px;padding:24px 28px;border-radius:14px;background:#111;color:#fff}
body[data-surface=app] .new-business .eyebrow{color:#BDBDBD;margin-bottom:8px}
body[data-surface=app] .new-business h3{margin:0}
body[data-surface=app] .new-business .btn{background:#fff;border-color:#fff;color:#111;flex-shrink:0}
body[data-surface=app] .role-option .btn::after,body[data-surface=app] .new-business .btn::after,body[data-surface=app] .next-action .btn::after{content:'→';margin-left:auto;transition:transform .2s ease}
body[data-surface=app] .role-option .btn:hover::after,body[data-surface=app] .new-business .btn:hover::after,body[data-surface=app] .next-action .btn:hover::after{transform:translateX(4px)}
body[data-surface=app] .workspace,body[data-surface=app] .form-wrap,body[data-surface=app] .mobile-surface{animation:surface-in .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes surface-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){body[data-surface=app] .card-preview{position:static}}
@media(max-width:850px){body[data-surface=app] .role-grid{grid-template-columns:1fr}.role-option{min-height:0}}
@media(max-width:560px){body[data-surface=app] .workspace-nav{top:78px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}body[data-surface=app] .workspace-nav::-webkit-scrollbar{display:none}body[data-surface=app] .workspace-nav a{flex:0 0 auto}body[data-surface=app] .mobile-surface{background:#FFFFFFD9;border:1px solid #E5E5E5;padding:24px 20px;margin-top:24px}body[data-surface=app] .workspace::before,body[data-surface=app] .workspace::after,body[data-surface=app] .form-wrap::before,body[data-surface=app] .form-wrap::after{right:-20px;width:380px}body[data-surface=app] .mobile-surface::before,body[data-surface=app] .mobile-surface::after{right:-20px;top:-130px;width:380px}.metrics{border-radius:12px}body[data-surface=app] .role-option{padding:24px;min-height:0}body[data-surface=app] .new-business{align-items:flex-start;flex-direction:column}}
@media print{body[data-surface=app] .workspace::before,body[data-surface=app] .workspace::after,body[data-surface=app] .form-wrap::before,body[data-surface=app] .form-wrap::after,body[data-surface=app] .mobile-surface::before,body[data-surface=app] .mobile-surface::after{display:none}}
@media(prefers-reduced-transparency:reduce){body[data-surface=app] header,body[data-surface=app] .workspace-nav,body[data-surface=app] .panel,body[data-surface=app] .metrics,body[data-surface=app] .mobile-surface,body[data-surface=app] dialog{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){body[data-surface=app] .panel,body[data-surface=app] .metrics,body[data-surface=app] .mobile-surface,body[data-surface=app] .role-option{background:#fff;border:2px solid #111}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body[data-surface=app] .workspace,body[data-surface=app] .form-wrap,body[data-surface=app] .mobile-surface{animation:none}body[data-surface=app] .btn,body[data-surface=app] .role-option{transition:none}}
html{overflow-x:clip}
body[data-surface=app]{overflow-x:clip}