/* Route420 Loyalty Passport
   Tokens taken from the live Route420 listing page so the card reads as one of
   its own Details blocks: 5% white panels, 10% white hairlines, 12px uppercase
   labels at 2.16px tracking, fully rounded buttons. */

.r420l-wrap{display:flex;flex-direction:column;gap:0;container-type:inline-size;container-name:r420l}
.r420l-wrap > .r420l-btn{margin-top:12px}
.r420l-wrap > .r420l-btn + .r420l-btn{margin-top:10px}
.r420l-wrap > .r420l-note{margin:8px 2px 0}
.r420l-wrap--dashboard{margin:18px 0}

/* The passport. A night-time route map: a faint dashed route with stops runs
   behind the stamps (Route 420 is a route finder), over deep charcoal with a
   soft lime glow in one corner and green in the other. A slow, very faint
   sheen crosses it now and then. Quiet enough to sit with the rest of the
   site, alive enough to look at. Sizes are fixed, never stretched. */
.r420l-card{--r420l-slot:52px;position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;margin:0;padding:16px 16px 14px;border-radius:18px;font-family:Arial,Helvetica,sans-serif;color:#fff;
  border:1px solid rgba(177,228,87,.5);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23B1E457' stroke-opacity='.06' stroke-width='1'%3E%3Cpath d='M-20 60 C60 20 120 90 200 60 S330 10 420 50'/%3E%3Cpath d='M-20 110 C70 70 140 140 220 110 S340 70 420 105'/%3E%3Cpath d='M-20 170 C80 130 150 200 240 165 S350 130 420 160'/%3E%3Cpath d='M-20 220 C90 185 170 250 260 215 S360 190 420 210'/%3E%3C/g%3E%3Cpath d='M18 205 C70 150 95 175 140 128 S215 70 262 96 S338 120 384 34' fill='none' stroke='%23B1E457' stroke-opacity='.17' stroke-width='1.6' stroke-dasharray='2 7' stroke-linecap='round'/%3E%3Cg fill='%23B1E457' fill-opacity='.30'%3E%3Ccircle cx='18' cy='205' r='3'/%3E%3Ccircle cx='140' cy='128' r='2.5'/%3E%3Ccircle cx='262' cy='96' r='2.5'/%3E%3C/g%3E%3Ccircle cx='384' cy='34' r='5' fill='none' stroke='%23B1E457' stroke-opacity='.4' stroke-width='1.5'/%3E%3Ccircle cx='384' cy='34' r='1.8' fill='%23B1E457' fill-opacity='.5'/%3E%3C/svg%3E") center/cover no-repeat,
    radial-gradient(110% 85% at 0% 0%,rgba(177,228,87,.15),transparent 55%),
    radial-gradient(90% 80% at 100% 100%,rgba(120,190,50,.12),transparent 60%),
    linear-gradient(160deg,#141814 0%,#0b0c0b 58%,#0e110d 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.r420l-card::before{content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;left:0;width:35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(214,245,154,.07),transparent);transform:translateX(-160%) skewX(-16deg);animation:r420lCardSheen 11s ease-in-out 2s infinite}
@keyframes r420lCardSheen{0%{transform:translateX(-160%) skewX(-16deg)}30%,100%{transform:translateX(420%) skewX(-16deg)}}

.r420l-card__head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.r420l-card__label{flex-grow:1;font-size:11px;letter-spacing:2.16px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.r420l-card__tokens{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#B1E457;white-space:nowrap}
.r420l-card__count{margin:0 0 14px;font-size:14px;color:rgba(255,255,255,.6)}
.r420l-card__count strong{font-size:26px;font-weight:900;line-height:1;color:#fff;margin-right:4px}

.r420l-card__grid{display:grid;grid-template-columns:repeat(5,minmax(0,var(--r420l-slot)));justify-content:space-between;gap:10px 8px;margin-bottom:14px;counter-reset:r420lslot}
.r420l-slot{width:100%;aspect-ratio:1/1;border-radius:999px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;counter-increment:r420lslot}
.r420l-slot--filled{background:#F2F2F2;box-shadow:0 0 0 2px #B1E457,0 4px 12px rgba(0,0,0,.45)}
.r420l-slot--filled img{width:100%;height:100%;object-fit:cover;display:block}
.r420l-slot--filled span{font-size:13px;font-weight:700;color:#0D0D0D}
.r420l-slot--empty{border:1.5px dashed rgba(255,255,255,.26);background:rgba(255,255,255,.035);position:relative}
.r420l-slot--empty::before{content:counter(r420lslot);font-size:12px;font-weight:700;color:rgba(255,255,255,.22)}
.r420l-slot--next{border-color:rgba(177,228,87,.6)}
.r420l-slot--next::before{color:rgba(177,228,87,.75)}
.r420l-slot--next::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:1.5px solid rgba(177,228,87,.55);opacity:0;animation:r420lNext 2.6s ease-out infinite;pointer-events:none}
@keyframes r420lNext{0%{opacity:.7;transform:scale(.88)}70%,100%{opacity:0;transform:scale(1.12)}}
.r420l-slot--next{overflow:visible}

/* Wide spaces (the member dashboard on a computer): all ten stamps on one
   line, and the buttons beside the card instead of under it. */
@container r420l (min-width:620px){
  .r420l-card{--r420l-slot:56px}
  .r420l-card__grid{grid-template-columns:repeat(10,var(--r420l-slot));justify-content:space-between;gap:12px 8px}
}
.r420l-actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.r420l-actions > .r420l-note{margin:0 2px}
.r420l-dash{display:flex;flex-direction:column}
@container r420l (min-width:880px){
  .r420l-dash{flex-direction:row;align-items:center;gap:18px}
  .r420l-dash > .r420l-card{flex:1 1 auto;min-width:0}
  .r420l-dash > .r420l-actions{flex:0 0 260px;margin-top:0}
}
@media (prefers-reduced-motion:reduce){.r420l-card::before,.r420l-slot--next::after{animation:none}}

/* A new stamp arriving: the Cardless Club nfcNewStampIn spring, same timing.
   The newest slot is rendered hidden so the finished state never flashes. */
.r420l-slot--incoming{opacity:0}
@keyframes r420lNewStampIn{
  0%  {transform:scale(.55);opacity:0}
  55% {transform:scale(1.18);opacity:1}
  75% {transform:scale(.94);opacity:1}
  90% {transform:scale(1.05);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.r420l-slot.r420l-new-stamp{animation:r420lNewStampIn .52s cubic-bezier(.34,1.56,.64,1) both;will-change:transform,opacity;position:relative;z-index:4}
@media (prefers-reduced-motion:reduce){.r420l-slot.r420l-new-stamp{animation-duration:.01s}}

.r420l-card__foot{display:flex;align-items:flex-start;gap:9px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09)}
.r420l-card__foot p{margin:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.72)}
.r420l-dot{width:8px;height:8px;margin-top:5px;border-radius:999px;background:#B1E457;flex-shrink:0}

.r420l-btn{width:100%;box-sizing:border-box;border:0;border-radius:999px;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;padding:16px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;min-height:44px}
.r420l-btn--primary{background:#B1E457;color:#000}
.r420l-btn--primary:hover{background:#C7EF80}
.r420l-btn--outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.r420l-btn--muted{background:rgba(255,255,255,.04);color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.12);cursor:not-allowed}
.r420l-note{margin:8px 2px 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.5)}

/* scanner */
.r420l-scan{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;font-family:Arial,Helvetica,sans-serif;color:#fff}
.r420l-scan__frame{width:min(78vw,380px);aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:#111;border:2px solid #B1E457}
.r420l-scan video{width:100%;height:100%;object-fit:cover;display:block}
.r420l-scan p{margin:0;max-width:340px;text-align:center;font-size:14px;line-height:1.5;color:rgba(255,255,255,.75)}
.r420l-scan p.is-error{color:#ffb4b4}
.r420l-scan__close{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:13px 26px;font-size:15px;font-weight:700;cursor:pointer;min-height:44px}
.r420l-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:99999;background:#B1E457;color:#000;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;padding:14px 22px;border-radius:999px;max-width:88vw;text-align:center}
.r420l-toast--bad{background:#fff}