:root{--ink:#182b26;--green:#174f3a;--mint:#a8cbaa;--cream:#f7f6ef;--line:#dddcd2;--muted:#66746a;--gold:#d3aa63;--white:#fffefa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.shell{max-width:1440px;min-height:100vh;margin:auto}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 6.3%;border-bottom:1px solid var(--line)}.brand{font-size:24px;letter-spacing:-1.4px;font-weight:800;color:var(--ink);text-decoration:none;white-space:nowrap}.brand>span:last-child{color:#55906d}.brand-icon,.mini-logo{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:var(--cream);width:38px;height:38px;border-radius:50%;font-size:27px;margin-right:6px}.topbar nav{display:flex;gap:24px}.nav-link,.back-link,.text-button,.refresh{border:0;background:none;color:var(--ink);font-weight:700}.nav-link:hover,.back-link:hover,.text-button:hover,.refresh:hover{text-decoration:underline}.view{min-height:calc(100vh - 162px)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4%;padding:8.5% 6.3% 10%;align-items:center}.eyebrow,.panel-kicker{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--green);text-transform:uppercase}.eyebrow-dot{display:inline-block;width:8px;height:8px;background:#84ad76;border-radius:50%;margin-right:7px}.hero-copy h1,.auth-intro h1,.customer-intro h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-4px;font-size:clamp(62px,7vw,108px);line-height:.99;margin:30px 0}.hero-copy h1 em,.auth-intro h1 em,.customer-intro h1 em{font-weight:400;color:#568969}.hero-copy>p,.auth-intro>p,.customer-intro>p{font-size:19px;line-height:1.6;max-width:470px;color:#53625a}.hero-actions{display:flex;gap:12px;margin-top:38px}.button{border-radius:9px;border:1px solid transparent;min-height:52px;padding:0 23px;font-weight:800;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;transition:transform .15s,background .15s;text-decoration:none}.button:hover{transform:translateY(-2px)}.button:disabled{opacity:.5;cursor:default;transform:none}.primary{background:var(--green);color:white}.primary:hover{background:#226246}.secondary{background:transparent;border-color:var(--line);color:var(--ink)}.outline{background:transparent;border-color:#779888;color:var(--green)}.full{width:100%}.footnote{font-size:12px!important;color:#818c82!important;margin-top:22px}.preview-card{min-height:440px;border-radius:24px;padding:42px;position:relative;color:#f4f2e8;background:radial-gradient(circle at 85% 10%,#417455,transparent 45%),linear-gradient(135deg,#24583f,#163829 75%);box-shadow:0 28px 70px #2a50372c;transform:rotate(2deg)}.preview-card:before{content:'✳';position:absolute;color:#b5d1b51c;font-size:340px;right:-30px;top:0}.preview-top,.customer-card-head{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:2px;font-weight:800;position:relative}.preview-top .mini-logo,.customer-card-head .mini-logo{background:#e7e4c8;color:var(--green);width:32px;height:32px;font-size:23px}.preview-business{font-family:Georgia,serif;font-size:49px;margin-top:55px;position:relative}.preview-reward{font-size:17px;margin-top:8px;color:#d6e3d2;position:relative}.preview-stamps,.card-stamps{display:flex;gap:10px;margin-top:54px;position:relative}.stamp{height:59px;width:59px;border-radius:50%;border:1px solid #c8ddc477;display:grid;place-items:center;font-size:30px;color:#b8d5be66}.stamp.filled{background:#e2e9cd;color:#23623d}.stamp.gift{color:#eed39c;border-color:#eed39c}.preview-bottom{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;margin-top:26px;color:#d0ddc9;position:relative}.float-note{position:absolute;bottom:-28px;right:-22px;border-radius:12px;background:#fffefa;color:var(--ink);box-shadow:0 12px 40px #17382323;padding:17px 23px;font-size:14px;line-height:1.5;font-weight:700;transform:rotate(-2deg)}.float-note span{display:inline-grid;place-items:center;background:#e2eace;border-radius:50%;width:27px;height:27px;margin-right:5px}.how{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:35px 6.3% 55px;gap:45px}.how>div{border-right:1px solid var(--line)}.how>div:last-child{border:0}.how b{font-family:Georgia,serif;color:#6b9c7a;font-size:22px}.how h3{font-size:20px;margin:12px 0 5px}.how p{color:var(--muted);margin:0}.auth-layout,.customer-layout{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 163px)}.auth-intro,.customer-intro{background:#e9efe4;padding:13% 13%;position:relative;overflow:hidden}.auth-intro h1,.customer-intro h1{font-size:clamp(60px,6vw,90px)}.auth-mark{font-size:280px;color:#d4e3d0;line-height:1;position:absolute;bottom:-90px;left:30px}.form-card{align-self:center;justify-self:center;width:min(440px,82%);padding:45px 0}.back-link{font-size:13px;color:var(--muted);padding:0;margin-bottom:25px}.form-card h2{font-family:Georgia,serif;font-size:40px;font-weight:400;margin:0 0 8px}.muted{color:var(--muted);margin:0 0 26px}.form-card label{display:block;font-size:13px;font-weight:800;margin:15px 0}.form-card input{display:block;width:100%;border:1px solid #d1d8cf;border-radius:8px;padding:14px 15px;margin-top:7px;background:white;outline:none}.form-card input:focus{border-color:#418056;box-shadow:0 0 0 3px #a8cbaa55}.form-card .button{margin-top:17px}.form-card .text-button{display:block;margin:22px auto;color:var(--green)}.form-error{color:#a3362d;background:#fff0ec;padding:11px;border-radius:6px}.page-head{display:flex;align-items:center;justify-content:space-between;padding:65px 6.3% 35px}.page-head h1{font-family:Georgia,serif;font-size:58px;font-weight:400;margin:15px 0}.page-head p{color:var(--muted);margin:0}.pilot-badge{border:1px solid #cbdcca;background:#edf5eb;border-radius:100px;padding:11px 17px;color:var(--green);font-size:13px;font-weight:800}.dashboard-grid{display:grid;grid-template-columns:340px 1fr;gap:23px;padding:0 6.3% 75px}.panel{background:var(--white);border:1px solid #e0e3da;border-radius:18px;box-shadow:0 8px 30px #243c2910}.qr-panel{padding:29px;text-align:center;align-self:start}.panel-heading,.section-title{display:flex;justify-content:space-between;align-items:center}.circle-icon{border:1px solid #e0e3da;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.qr-panel h2{font-family:Georgia,serif;font-size:31px;font-weight:400;margin:21px 0 8px}.qr-panel p{font-size:14px;color:var(--muted);line-height:1.5}.qr-code{display:flex;align-items:center;justify-content:center;background:white;border:10px solid #eaf0e7;border-radius:16px;width:228px;height:228px;margin:29px auto 17px}.qr-code img{width:190px;height:190px}.card-url{display:block;color:var(--green);font-weight:800;font-size:13px;margin-bottom:15px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.metric{background:#e9efe4;border-radius:14px;padding:24px 18px;min-height:123px}.metric span{display:block;font-size:12px;color:#5b735f;font-weight:700}.metric strong{display:block;font-family:Georgia,serif;font-weight:400;font-size:42px;margin-top:16px}.request-panel{padding:29px;margin-top:20px}.section-title h2{font-family:Georgia,serif;font-size:30px;font-weight:400;margin:7px 0 20px}.refresh{font-size:13px;color:var(--green)}.request-list{display:flex;flex-direction:column;gap:10px}.request-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f5f6ef;border-radius:10px;padding:13px 16px}.request-row strong{display:block;font-size:14px}.request-row small{display:block;color:var(--muted);margin-top:3px}.request-row button{background:var(--green);border:0;border-radius:7px;color:white;font-size:13px;padding:10px 15px;font-weight:800}.empty-state{color:var(--muted);font-size:14px;padding:20px 0}.customer-intro{background:#e9efe4}.customer-note{border-top:1px solid #c9d9c9;padding-top:20px;margin-top:45px;max-width:390px;color:#617668;font-size:13px;line-height:1.6}.customer-card{align-self:center;justify-self:center;width:min(450px,85%);padding:39px;color:#f4f2e8;background:radial-gradient(circle at 100% 0,#447453,transparent 45%),#19422e;border:0}.customer-card h2{font-family:Georgia,serif;font-size:44px;font-weight:400;margin:47px 0 8px}.customer-card>p{color:#d3e4d1}.card-stamps{flex-wrap:wrap;margin:42px 0 25px}.card-stamps .stamp{width:52px;height:52px}.progress-row{display:flex;justify-content:space-between;font-size:12px;color:#d4e2cf}.progress-track{height:7px;background:#547b5c;border-radius:50px;overflow:hidden;margin:12px 0 27px}.progress-track>div{height:100%;background:#d7d9a8;width:0;transition:width .3s}.customer-card .primary{background:#e7e9cb;color:var(--green)}.customer-card .secondary{border-color:#9cbea3;color:white;margin-top:10px}.customer-card .text-button{display:block;color:#d3e4d1;margin:20px auto 0}.card-status{font-size:13px;text-align:center;min-height:18px}footer{border-top:1px solid var(--line);height:76px;padding:0 6.3%;display:flex;align-items:center;justify-content:space-between;color:#819085;font-size:12px}footer span:first-child{font-weight:800;color:var(--green)}@media(max-width:900px){.hero-grid{grid-template-columns:1fr;padding:60px 6.3% 90px}.preview-card{max-width:540px;margin-top:20px}.auth-layout,.customer-layout{grid-template-columns:1fr}.auth-intro,.customer-intro{padding:60px 7%;min-height:290px}.auth-mark{display:none}.form-card{padding:45px 0}.dashboard-grid{grid-template-columns:1fr}.qr-panel{max-width:430px}.metrics{grid-template-columns:repeat(2,1fr)}.customer-card{margin:50px auto}}@media(max-width:600px){.topbar{height:70px;padding:0 5%}.brand{font-size:20px}.brand-icon{width:30px;height:30px;font-size:20px}.topbar nav{gap:10px}.nav-link{font-size:12px}.hero-grid{padding:50px 5% 75px}.hero-copy h1{font-size:66px;letter-spacing:-3px}.hero-copy>p{font-size:17px}.hero-actions{flex-wrap:wrap}.preview-card{min-height:360px;padding:28px}.preview-business{font-size:40px}.preview-stamps{gap:5px}.stamp{width:48px;height:48px;font-size:23px}.preview-bottom span:last-child{display:none}.float-note{right:0}.how{grid-template-columns:1fr;padding:30px 5%}.how>div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:20px}.page-head{padding:40px 5% 25px}.page-head h1{font-size:42px}.pilot-badge{display:none}.dashboard-grid{padding:0 5% 60px}.metrics{gap:8px}.metric{padding:17px;min-height:100px}.metric strong{font-size:33px}.request-panel{padding:20px}.request-row{align-items:flex-start}.request-row button{flex-shrink:0}.customer-intro h1,.auth-intro h1{font-size:60px}.customer-card{width:90%;padding:27px}footer span:nth-child(2){display:none}}

.card-id{font-size:12px;color:#d3e4d1;text-align:center;margin:0 0 16px}
.qr-countdown{color:var(--green)!important;font-weight:800;margin:8px 0 0!important}
.qr-help{font-size:12px!important;margin:6px 0 0!important}
.recent-stamp{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#e1ecd9;color:var(--green);font-size:22px}
.customer-card{position:relative;overflow:hidden}
.stamp-effect{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;background:rgba(10,45,29,.86);pointer-events:none;text-align:center;opacity:0}
.stamp-effect.play{animation:stampVeil 2.3s ease-in-out both}
.stamp-effect-mark{display:grid;place-items:center;width:124px;height:124px;border-radius:50%;border:5px solid #eef1d5;background:#dce9c9;color:#1b5b3a;font-size:78px;box-shadow:0 0 0 13px #dce9c92c,0 20px 50px #041d18a0;transform:scale(2) rotate(-35deg);opacity:0}
.stamp-effect.play .stamp-effect-mark{animation:stampArrival .65s cubic-bezier(.2,1.7,.25,1) .1s forwards}
.stamp-effect strong{font-family:Georgia,serif;font-size:36px;font-weight:400;color:#f9f5df;letter-spacing:-1px;transform:translateY(12px);opacity:0}
.stamp-effect.play strong{animation:stampText .4s ease-out .55s forwards}
.stamp-effect.reward .stamp-effect-mark{background:#f3dfaa;color:#826129;border-color:#fff4d0;box-shadow:0 0 0 13px #edce7840,0 20px 50px #041d18a0}
.stamp-new{position:relative;animation:stampPop .7s cubic-bezier(.2,1.7,.25,1) .1s both}
.stamp-new:after{content:'✦';position:absolute;right:-9px;top:-18px;color:#f5e5a6;font-size:24px;animation:stampSpark .9s ease-out .25s both}
@keyframes stampVeil{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}
@keyframes stampArrival{0%{transform:scale(2) rotate(-35deg);opacity:0}70%{transform:scale(.88) rotate(7deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes stampText{to{transform:translateY(0);opacity:1}}
@keyframes stampPop{0%{transform:scale(.2);filter:brightness(2)}65%{transform:scale(1.35)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes stampSpark{0%{transform:translateY(7px) scale(.2);opacity:0}50%{opacity:1}100%{transform:translateY(-13px) scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.stamp-effect.play{animation:none;opacity:1}.stamp-effect.play .stamp-effect-mark,.stamp-effect.play strong{animation:none;transform:none;opacity:1}.stamp-new,.stamp-new:after{animation:none}}
.qr-code{width:260px;height:260px}
.qr-code img,.qr-code canvas{width:220px!important;height:220px!important}

/* The card photography is bundled locally so cards still load without a third party. */
.preview-card,.customer-card{
  background-color:#192b24;
  background-image:linear-gradient(180deg,rgba(8,23,21,.8) 0%,rgba(10,28,24,.5) 35%,rgba(8,24,21,.78) 72%,rgba(5,18,16,.96) 100%),url('/cafe-card-bg.webp');
  background-position:center;
  background-size:cover;
  border:1px solid rgba(255,245,220,.24);
  box-shadow:0 26px 65px rgba(20,33,26,.27),inset 0 0 0 1px rgba(255,255,255,.08);
}
.preview-card:before{content:none}
.customer-card{
  background-image:linear-gradient(180deg,rgba(8,23,21,.84) 0%,rgba(10,28,24,.58) 35%,rgba(8,24,21,.8) 72%,rgba(5,18,16,.97) 100%),url('/shop-card-bg.webp');
  min-height:565px;
}
.customer-card.cafe-photo{
  background-image:linear-gradient(180deg,rgba(8,23,21,.84) 0%,rgba(10,28,24,.58) 35%,rgba(8,24,21,.8) 72%,rgba(5,18,16,.97) 100%),url('/cafe-card-bg.webp');
}
.preview-top,.customer-card-head{color:#f8f5e8;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.preview-top .mini-logo,.customer-card-head .mini-logo{background:#f2e4be;color:#263d2b;box-shadow:0 5px 20px rgba(0,0,0,.2)}
.preview-business,.customer-card h2{color:#fffaf0;text-shadow:0 2px 16px rgba(0,0,0,.45);overflow-wrap:anywhere}
.preview-reward,.customer-card #card-reward{color:#f6e9cc;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.preview-stamps,.card-stamps{gap:9px}
.preview-stamps .stamp,.card-stamps .stamp{
  flex:none;
  border:1.5px solid rgba(255,240,203,.7);
  background:rgba(11,29,25,.42);
  color:#f5e2ae;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.18);
  backdrop-filter:blur(6px);
}
.preview-stamps .stamp.filled,.card-stamps .stamp.filled{background:#f2dfab;border-color:#fff0c8;color:#30533d;box-shadow:0 3px 18px rgba(241,211,151,.35)}
.preview-stamps .stamp.gift,.card-stamps .stamp.gift{border-style:dashed;color:#ffe8ac}
.preview-bottom,.progress-row{color:#f4e8cc;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.customer-card .progress-track{background:rgba(248,240,216,.27);height:8px}
.customer-card .progress-track>div{background:linear-gradient(90deg,#dbb865,#ffedb5);box-shadow:0 0 10px rgba(255,227,158,.5)}
.customer-card .card-id{color:#e7dac0}
.customer-card .secondary{background:rgba(255,248,229,.94);border-color:#fff1d2;color:#284232;font-weight:800}
.customer-card .secondary:hover{background:#fff9eb}
.customer-card .card-status,.customer-card .text-button{color:#f4e8d0}
@media(max-width:600px){
  .preview-card{transform:none;min-height:380px}
  .preview-stamps{flex-wrap:wrap;margin-top:40px}
  .preview-stamps .stamp{width:47px;height:47px}
  .customer-card{min-height:530px}
  .customer-card h2{font-size:clamp(32px,10vw,44px)}
  .card-stamps .stamp{width:48px;height:48px}
  .float-note{right:8px;bottom:-34px}
}