/* Stow Cards homepage (Roastery): the interactive set pieces. Loaded after styles.css, which supplies the header, footer, buttons, eyebrows, FAQ accordion and reveal. */
/* Homepage base: the set pieces below were built without default margins */
.home{font-size:17px;line-height:1.6}
.home :where(h1,h2,h3,h4,p){margin:0}
.home .accordion{margin-inline:0}
/* Concept D · Roastery. Design language after collection piece #035 (Coffee Roasters), rebuilt for Stow Cards with the content of concept B. */
:root{
  --espresso:#2b1a12; --espresso-2:#20130d; --roast:#5c3a21; --roast-2:#4a2e1a; --crema:#c8a27a;
  --oat:#efe5d6; --oat-2:#e6d8c3; --oat-3:#f7f1e7; --paper:#fff8ee;
  /* The copper tones alias the site accent in styles.css, so a pass-type theme recolours the homepage too */
  --copper:var(--brand-glow); --copper-hi:var(--brand-bright); --copper-lo:var(--brand-lip); --copper-btn:var(--brand-btn); --copper-ink:var(--brand); --copper-hl:var(--brand-hl);
  --olive:#3f6a2c; --berry:#9c3f34;
  --ink:#2b1a12; --ink-2:rgba(43,26,18,.8); --ink-3:rgba(43,26,18,.66); --line:rgba(92,58,33,.16);
  --cream:#f3e9da; --cream-2:rgba(243,233,218,.76); --cream-3:rgba(243,233,218,.58); --line-d:rgba(243,233,218,.12);
  --display:Rockwell,"Rockwell Nova",Arvo,"Roboto Slab",Georgia,serif;
  --sans:"Avenir Next",Avenir,"Nunito Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --bounce:cubic-bezier(.34,1.56,.64,1); --soft:cubic-bezier(.22,.8,.26,1);
  --card-sh:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(92,58,33,.12),0 18px 30px -22px rgba(43,26,18,.55);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .1 0 0 0 0 .07 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:520px){.wrap{padding:0 16px}}

/* ---------- Buttons ---------- */

/* ---------- Header ---------- */
.room{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(48% 58% at 76% 52%,rgba(200,162,122,.55),rgba(200,162,122,0) 70%),radial-gradient(60% 50% at 8% 100%,color-mix(in srgb,var(--copper) 14%,transparent),transparent 70%),var(--oat)}
.room::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.18;mix-blend-mode:multiply;pointer-events:none}
.badge{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:radial-gradient(circle at 35% 30%,#4a2e1a,var(--espresso) 70%);box-shadow:inset 0 0 0 2px rgba(200,162,122,.35),0 6px 14px -8px rgba(43,26,18,.8)}
.badge svg{width:24px;height:24px}

/* ---------- Hero ---------- */
.rhero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:40px;align-items:center;min-height:calc(max(760px,100svh) - var(--topbar-h,72px));padding-top:6px;padding-bottom:64px}
@media (max-width:1060px){.rhero{grid-template-columns:minmax(0,1fr);gap:48px;padding-top:24px}}
.copy{min-width:0}
.copy h1{margin-top:20px;font-size:clamp(2.4rem,1.2rem + 2.6vw,3.6rem);line-height:1.03;letter-spacing:-.012em;max-width:18ch;text-wrap:balance}
.hl{position:relative;color:var(--copper-hl);white-space:nowrap}
.hl svg{position:absolute;left:-1%;bottom:-.24em;width:102%;height:.34em;overflow:visible;pointer-events:none}
.hl path{fill:none;stroke:var(--copper);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s var(--soft) .5s forwards}
.reveal .hl path{animation:none}
.reveal.in .hl path{animation:draw 1.1s var(--soft) .45s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.copy .lede{margin-top:26px;font-size:19px;line-height:1.55;max-width:36ch}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.fine{margin-top:18px;font-size:14px;color:var(--ink-3)}
.plates{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:34px 0 0;max-width:560px}
.plates div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:0 26px;border-left:2px dotted rgba(92,58,33,.32)}
.plates div:first-child{padding-left:0;border-left:0}
.plates dt{font:700 11px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.plates dd{margin:0;font:700 21px/1.15 var(--display);color:var(--ink)}
@media (max-width:520px){.plates div{padding:0 0 0 16px}.plates dd{font-size:17px}}

/* ---------- Stage: the pass on a roast disc ---------- */
.stage{position:relative;display:grid;justify-items:center;gap:18px;min-width:0}
.disc-wrap{--S:min(92vw,clamp(360px,calc(100svh - 300px),520px));--w:calc(var(--S) * .5);position:relative;width:var(--S);height:var(--S);display:grid;place-items:center}
.ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:spin 70s linear infinite}
.ring text{font:700 13px/1 var(--sans);letter-spacing:.3em;fill:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.disc{position:absolute;inset:10.5%;border-radius:50%;background:radial-gradient(circle at 38% 30%,#6b4428,#4a2e1a 45%,#2b1a12 80%);box-shadow:inset 0 0 0 10px rgba(43,26,18,.35),inset 0 -24px 40px rgba(0,0,0,.35),0 34px 60px -30px rgba(43,26,18,.75)}
.disc::after{content:"";position:absolute;inset:5%;border-radius:50%;border:1.5px dashed rgba(200,162,122,.32)}
.saucer{position:absolute;left:50%;top:calc(50% + var(--w) * 275 / 375 - 6px);width:calc(var(--S) * .46);height:28px;translate:-50% 0;border-radius:50%;background:rgba(18,9,4,.55);filter:blur(12px);z-index:2;transform:translateX(calc(var(--ry,0) * -1px))}
.steam{position:absolute;left:50%;top:0;width:calc(var(--S) * .3);height:calc(var(--S) * .2);translate:-50% 0;z-index:2;overflow:visible;pointer-events:none}
.steam path{transform-box:fill-box;transform-origin:50% 100%;fill:none;stroke:rgba(247,241,231,.55);stroke-width:7;stroke-linecap:round;filter:blur(3px);opacity:0;animation:rise 4.2s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.4s}.steam path:nth-child(3){animation-delay:2.8s}
@keyframes rise{0%{opacity:0;transform:translateY(24px) scaleX(.8)}30%{opacity:.75}100%{opacity:0;transform:translateY(-26px) scaleX(1.25)}}
.steam.puff path{animation-duration:1.6s;stroke-width:10}
@media (max-width:600px){
  .disc-wrap{--S:min(92vw,440px);--w:min(78vw,300px);height:calc(var(--w) * 550 / 375 + 44px)}
  .ring{display:none}
  .disc{inset:auto;left:50%;top:50%;width:calc(var(--S) * .96);height:calc(var(--S) * .96);translate:-50% -50%}
}
/* The hero pass is the site's Wallet face (styles.css section 12) at 375 x 550 pt; --u is one point of the stage width */
.hpass{--u:calc(var(--w) / 375);position:relative;z-index:3;width:var(--w);height:calc(var(--w) * 550 / 375);perspective:1400px;cursor:grab;touch-action:pan-y;border-radius:calc(12 * var(--u));outline:none;user-select:none;-webkit-user-select:none}
.hpass:focus-visible .card-3d{box-shadow:0 0 0 3px var(--oat),0 0 0 6px var(--copper)}
.card-3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;border-radius:inherit;will-change:transform}
/* The pass casts its shadow from outside the 3D card, so the coupon, ticket and boarding edge masks cannot clip it.
   It fades while the card lifts to flip (--lift, set by home.js). */
.hpass::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 calc(20 * var(--u)) calc(38 * var(--u)) calc(-14 * var(--u)) rgba(18,9,4,.8);opacity:calc(1 - var(--lift,0) * .7);pointer-events:none}
.face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;isolation:isolate}
.back{transform:rotateY(180deg);display:flex;flex-direction:column;background:var(--pc);color:var(--pf);font-family:var(--font-wallet);-webkit-font-smoothing:antialiased}
.glare,.band{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.glare{z-index:5;mix-blend-mode:soft-light;background:radial-gradient(farthest-corner circle at var(--lx,50%) var(--ly,40%),rgba(255,248,238,.6),rgba(255,248,238,.1) 30%,rgba(18,9,4,.2) 90%);opacity:calc(.45 + var(--hyp,0) * .55)}
.band{z-index:4;mix-blend-mode:soft-light;background:linear-gradient(115deg,transparent 38%,rgba(255,248,238,.8) 50%,transparent 62%) no-repeat;background-size:260% 260%;background-position:120% 120%}
.stamp{position:absolute;right:calc(-18 * var(--u));bottom:calc(40 * var(--u));width:calc(132 * var(--u));height:calc(132 * var(--u));color:var(--pf);opacity:.14;transform:rotate(-14deg);z-index:0}
.b-fields{position:relative;z-index:2;padding:0 calc(16 * var(--u))}
.b-fields>div{padding:calc(10 * var(--u)) 0;border-top:1px solid color-mix(in srgb,var(--pf) 22%,transparent)}
.b-fields .pass-card__value{margin-top:calc(2 * var(--u));white-space:normal;font-size:calc(15 * var(--u));line-height:calc(20 * var(--u))}
.b-mark{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(16 * var(--u));z-index:2;display:flex;justify-content:space-between;gap:calc(10 * var(--u));font:600 calc(11 * var(--u))/1.2 var(--font-wallet);letter-spacing:.06em;text-transform:uppercase;color:var(--pl)}
.bump{transform-origin:0 50%;animation:bump .7s var(--bounce)}
.pass-card__hdr .bump{transform-origin:100% 50%}
@keyframes bump{35%{transform:scale(1.12)}}

.toolbar{position:relative;z-index:5;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:var(--oat-2);box-shadow:inset 0 0 0 1px rgba(92,58,33,.14),0 12px 24px -18px rgba(43,26,18,.6)}
.tb{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border:0;border-radius:999px;background:transparent;cursor:pointer;font:700 14px/1 var(--sans);color:var(--ink);transition:background .2s,transform .15s,box-shadow .15s}
.tb:hover{background:rgba(43,26,18,.07)}
.tb svg{width:15px;height:15px}
.tb--round{width:42px;padding:0;justify-content:center;box-shadow:inset 0 0 0 2px var(--ink)}
.tb-type{min-width:8.8em;text-align:center;font:700 12.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:480px){.tb-type{display:none}.tb{padding:0 13px}}
.plaque{display:flex;align-items:center;gap:16px;width:min(460px,100%);padding:12px 18px;border-radius:18px;background:var(--oat-3);box-shadow:var(--card-sh)}
.plaque .num{font:700 30px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.plaque .num small{font-size:14px;color:var(--ink-3)}
.plaque .type{font:700 16.5px/1.2 var(--display);color:var(--ink)}
.plaque .desc{font-size:14px;line-height:1.4}
.plaque>div:last-child{padding-left:16px;border-left:2px dotted rgba(92,58,33,.3);min-width:0}

.hnotif{position:absolute;left:50%;top:1%;z-index:8;width:min(330px,86vw);translate:-50% 0;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;text-align:left;
  background:rgba(247,241,231,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(92,58,33,.14),0 18px 36px -14px rgba(43,26,18,.6);
  opacity:0;transform:translateY(-18px) scale(.96);transition:opacity .45s,transform .6s var(--bounce);pointer-events:none}
.hnotif.show{opacity:1;transform:none}
.n-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;font:700 16px/1 var(--display);color:var(--paper);background:var(--nc,#7b4a2a)}
.hnotif b,.nt b{display:block;font:700 13.5px/1.25 var(--sans);color:var(--ink)}
.hnotif>div>span,.nt>div>span{display:block;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.hnotif time,.nt time{align-self:start;font-size:12px;color:var(--ink-3)}
.spark{position:absolute;left:50%;top:48%;width:12px;height:12px;margin:-6px;pointer-events:none;z-index:9;background:var(--sc,var(--copper-hi));clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* ---------- Sections ---------- */
section.s{position:relative;padding:110px 0}
.s-head{max-width:660px;margin-bottom:46px}
.s-head h2{margin-top:16px;font-size:clamp(2.1rem,1.3rem + 2vw,3rem);line-height:1.04}
.s-head p{margin-top:16px;font-size:17.5px;max-width:52ch}
.dark{color:var(--cream-2)}
.dark h2,.dark h3{color:var(--cream)}

.marquee{overflow:hidden;padding:17px 0;background:var(--espresso);color:var(--oat);border-block:1px solid #120a06}
.mq-track{display:flex;width:max-content;animation:mq 60s linear infinite}
.mq-track span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font:700 14px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.mq-track i{font-style:normal;color:var(--copper-hi)}
@keyframes mq{to{transform:translateX(-50%)}}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 0}
.facts div{padding:4px 28px;border-left:2px dotted rgba(92,58,33,.3)}
.facts div:first-child{padding-left:0;border-left:0}
.facts b{display:block;font:700 clamp(2.6rem,1.8rem + 1.6vw,3.4rem)/1 var(--display);color:var(--ink);white-space:nowrap}
.facts span{display:block;margin-top:12px;font-size:15px;max-width:22ch}
@media (max-width:820px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts div:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:420px){.facts div{padding:4px 0 4px 16px}}

/* How it works: brew-guide steps beside a dark timer */
.brew{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:start}
@media (max-width:920px){.brew{grid-template-columns:minmax(0,1fr)}}
.rchips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.rchip{display:inline-flex;gap:6px;padding:8px 14px;border-radius:12px;background:var(--oat-3);box-shadow:var(--card-sh);font:600 14px/1.25 var(--sans);color:var(--ink)}
.rchip b{color:var(--copper-ink)}
.bsteps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bstep{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 22px;border-radius:18px;background:var(--oat-3);box-shadow:var(--card-sh);transition:transform .35s var(--soft),box-shadow .35s,background .35s}
.bstep .n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--oat-2);font:700 19px/1 var(--display);color:var(--ink);transition:background .3s,color .3s}
.bstep h3{font-size:22px}
.bstep p{margin-top:4px;font-size:15.5px;line-height:1.5}
.bstep .t{font:700 11.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.bstep:hover{transform:translateX(3px)}
.bstep.on{background:var(--paper);transform:translateX(6px);box-shadow:inset 0 0 0 2px var(--copper),0 18px 30px -22px rgba(43,26,18,.55)}
.bstep.on .n{background:var(--copper-btn);color:var(--paper)}
.bstep.done .n{background:var(--espresso);color:var(--oat)}
.bstep-hit{position:absolute;inset:0;border:0;padding:0;background:none;border-radius:inherit;cursor:pointer}
@media (max-width:560px){.bstep{grid-template-columns:auto minmax(0,1fr);padding:16px}.bstep .t{display:none}.bstep.on{transform:none}}
.timer{position:sticky;top:calc(var(--topbar-h,72px) + 16px);display:grid;justify-items:center;gap:20px;padding:30px 28px 28px;border-radius:26px;color:var(--cream-2);
  background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--copper-hi) 22%,transparent),transparent 70%),linear-gradient(var(--espresso),var(--espresso-2));box-shadow:0 30px 60px -30px rgba(43,26,18,.8)}
@media (max-width:920px){.timer{position:relative;top:0}}
.dial{position:relative;width:min(300px,100%);aspect-ratio:1}
.dial>svg{position:absolute;inset:0;width:100%;height:100%}
.dial .trk{fill:none;stroke:rgba(243,233,218,.1);stroke-width:12}
.dial .prg{fill:none;stroke:var(--copper-hi);stroke-width:12;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset var(--td,.6s) var(--te,var(--soft))}
.dial .tk{stroke:var(--crema);stroke-width:3;stroke-linecap:round;opacity:.6}
.dial .knob{transform-origin:150px 150px;transition:transform var(--td,.6s) var(--te,var(--soft))}
.dial-in{position:absolute;inset:17%;display:grid;place-items:center}
.bv{grid-area:1/1;display:grid;justify-items:center;gap:10px;text-align:center;opacity:0;transform:scale(.92);transition:opacity .45s,transform .6s var(--bounce);pointer-events:none}
.bv.on{opacity:1;transform:none}
/* A pass in miniature at its real proportions: 86 px wide on the 375 x 550 pt grid (--u is one point) */
.mp{--mc:#7b4a2a;--u:calc(86px / 375);position:relative;width:86px;aspect-ratio:375/550;border-radius:calc(12 * var(--u));background:var(--mc);box-shadow:0 10px 18px -8px rgba(0,0,0,.6);transition:background .6s}
.mp i{position:absolute;display:block;background:rgba(255,248,238,.8)}
.mp .a{left:calc(21 * var(--u));top:calc(13 * var(--u));width:calc(40 * var(--u));height:calc(40 * var(--u));border-radius:50%}
.mp .b{left:calc(74 * var(--u));top:calc(27 * var(--u));width:calc(150 * var(--u));height:calc(12 * var(--u));border-radius:calc(6 * var(--u))}
.mp .c{left:0;right:0;top:calc(66 * var(--u));height:calc(144 * var(--u));background:linear-gradient(170deg,rgba(255,248,238,.45),rgba(255,248,238,.12))}
.mp .e{left:calc(16 * var(--u));right:calc(16 * var(--u));top:calc(240 * var(--u));height:calc(14 * var(--u));background:repeating-linear-gradient(90deg,rgba(255,248,238,.55) 0 calc(70 * var(--u)),transparent 0 calc(118.33 * var(--u)))}
.mp .d{left:calc(127.5 * var(--u));bottom:calc(22 * var(--u));width:calc(120 * var(--u));height:calc(137 * var(--u));border-radius:calc(10 * var(--u));background:#fff url(passes/qr-7K2Q9FMRDC.svg) 50% calc(9 * var(--u)) / calc(102 * var(--u)) no-repeat}
.bsw{display:flex;gap:7px}
.bsw i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px rgba(243,233,218,.25)}
.bsw i.on{box-shadow:0 0 0 2px var(--cream)}
.bv-qr .q{width:92px;padding:7px;border-radius:12px;background:var(--oat-3)}
.bv-qr .q svg{display:block;width:100%}
.bv small{font:600 12px/1.4 var(--mono);color:var(--cream-2)}
.bv small b{display:block;color:var(--copper-hi);font-family:var(--sans);letter-spacing:.06em}
.bv-note .nt{width:196px;padding:10px 11px;gap:9px}
.bv-note .nt .n-ico{width:28px;height:28px;font-size:13px}
.bv-note .nt b,.bv-note .nt>div>span{font-size:11.5px}
.bv-note .plus{font:700 22px/1 var(--display);color:var(--copper-hi)}
.timer-cap{text-align:center}
.timer-cap small{display:block;font:700 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--copper-hi)}
.timer-cap b{display:block;margin-top:8px;font:700 26px/1.1 var(--display);color:var(--cream)}
.timer .btns{display:flex;gap:12px}
.btn--ghost-d{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px rgba(243,233,218,.6),0 4px 0 rgba(243,233,218,.25)}
.btn--ghost-d:active{box-shadow:inset 0 0 0 2px rgba(243,233,218,.6),0 1px 0 rgba(243,233,218,.25)}

.nt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px rgba(92,58,33,.12),0 10px 20px -16px rgba(43,26,18,.6);text-align:left}

/* Pass types: an origin-card carousel */
.col-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px}
.col-head .s-head{margin-bottom:0}
.col-ctl{display:flex;align-items:center;gap:14px;flex:none}
.arrow{width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;cursor:pointer;box-shadow:inset 0 0 0 2px var(--ink),0 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,opacity .2s}
.arrow svg{width:16px;height:16px}
.arrow:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--ink),0 1px 0 var(--ink)}
.arrow:disabled{opacity:.3;cursor:default;transform:none}
.bar{position:relative;width:96px;height:4px;border-radius:4px;background:rgba(92,58,33,.2);overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;left:var(--l,0%);width:var(--w,30%);border-radius:4px;background:var(--copper)}
@media (max-width:760px){.col-head{flex-direction:column;align-items:flex-start}}
.track{--pad:max(24px,calc((100% - 1152px) / 2));display:flex;gap:18px;overflow-x:auto;padding:8px var(--pad) 34px;scroll-padding-inline:var(--pad);scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track-fb{flex:1 0 100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.track-fb a{display:block;height:100%;padding:16px 18px;border-radius:18px;background:var(--oat-3);box-shadow:var(--card-sh);text-decoration:none}
.track-fb b{display:block;font:700 18px/1.2 var(--display);color:var(--ink)}
.track-fb span{display:block;margin-top:4px;font-size:14.5px}
.track.drag{scroll-snap-type:none;cursor:grabbing}
.track.drag .origin{pointer-events:none}
@media (max-width:520px){.track{--pad:16px}}
.origin{position:relative;flex:0 0 min(300px,80vw);display:flex;flex-direction:column;padding:12px 12px 20px;border-radius:22px;background:var(--oat-3);box-shadow:var(--card-sh);scroll-snap-align:start;transition:transform .35s var(--soft),box-shadow .35s}
.origin:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(92,58,33,.14),0 28px 40px -26px rgba(43,26,18,.6)}
.o-art{position:relative;height:168px;border-radius:15px;overflow:hidden}
.o-art svg{display:block;width:100%;height:100%}
.o-body{display:flex;flex-direction:column;flex:1;padding:16px 10px 0}
.o-k{display:flex;justify-content:space-between;gap:10px;font:700 11px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--copper-ink)}
.o-k span:last-child{text-align:right;color:var(--ink-3)}
.o-body h3{margin-top:9px;font-size:24px}
.o-body .d{margin-top:6px;font-size:15px;line-height:1.5}
.o-spec{margin:14px 0 0}
.o-spec div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:14.5px}
.o-spec dt{color:var(--ink-3)}
.o-spec dd{margin:0;font-weight:700;color:var(--ink);text-align:right}
.o-tl{margin-top:14px;font:700 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.o-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.o-tags span{padding:4px 11px;border-radius:999px;background:var(--tc);font:700 12.5px/1.5 var(--sans);color:var(--paper)}
.o-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;font:700 14.5px/1 var(--sans);color:var(--ink)}
.o-go svg{width:14px;height:14px;transition:transform .3s var(--soft)}
.origin:hover .o-go svg{transform:translateX(4px)}
.o-hit{position:absolute;inset:0;border:0;padding:0;background:none;border-radius:inherit;cursor:pointer}
.o-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px}
.o-foot .o-go{margin-top:0;padding-top:0}
.o-more{position:relative;z-index:2;display:inline-block;min-height:24px;font:700 14px/1 var(--sans);color:var(--copper-ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding:6px 0;transition:background-size .3s var(--soft)}
.o-more:hover{background-size:100% 2px;color:var(--copper-ink)}
.foot-note{margin-top:4px;font-size:13.5px;color:var(--ink-3)}

/* Live updates: the update wheel */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr);gap:40px}}
.wheel-wrap{position:relative;width:min(520px,100%);justify-self:center}
.wheel{display:block;width:100%;height:auto;overflow:visible}
.seg{cursor:pointer;outline:none;transition:transform .45s var(--bounce)}
.seg path{stroke:var(--oat);stroke-width:3;transition:filter .3s,stroke .2s}
.seg text{pointer-events:none;font-family:var(--sans);font-weight:800;fill:var(--paper)}
.seg.dim path{filter:saturate(.3)}
.seg:hover path,.seg.on path{filter:brightness(1.12) saturate(1.05)}
.seg.pop,.seg:focus-visible{transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px))}
.seg:focus-visible path{stroke:var(--espresso);stroke-width:4}
.w-hub text{text-anchor:middle}
.live-copy .s-head{margin-bottom:26px}
.wc{padding:24px 24px 20px;border-radius:22px;background:var(--oat-3);box-shadow:var(--card-sh),0 30px 50px -40px rgba(43,26,18,.7)}
.wc-h{display:flex;align-items:center;gap:12px}
.wc-h i{width:14px;height:14px;border-radius:50%;flex:none;background:var(--dc,var(--copper));transition:background .3s}
.wc-h h3{font-size:24px}
.wc>p{margin-top:8px;font-size:15.5px}
.wc-list{display:grid;gap:9px;margin-top:16px}
.wc-list .nt{opacity:0;translate:0 -10px;animation:ntin .55s var(--soft) forwards;animation-delay:calc(var(--k) * 80ms)}
@keyframes ntin{to{opacity:1;translate:0 0}}
.checks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;font-size:15.5px;line-height:1.5}
.checks svg{width:22px;height:22px;flex:none;padding:3px;border-radius:50%;background:var(--copper-btn);color:var(--paper);margin-top:1px}

/* Features: dark roast section with the scans dial, hour slider and curve */
.roast{background:radial-gradient(45% 60% at 26% 55%,color-mix(in srgb,var(--copper) 28%,transparent),transparent 70%),linear-gradient(var(--espresso),var(--espresso-2))}
.roast::after,.club::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.28;mix-blend-mode:overlay;pointer-events:none}
.roast .wrap,.club .wrap{position:relative;z-index:1}
.rush{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
@media (max-width:960px){.rush{grid-template-columns:minmax(0,1fr);gap:36px}}
.rush-vis{position:relative;width:min(470px,100%);justify-self:center}
.rush-vis svg{display:block;width:100%;height:auto;overflow:visible}
.db{stroke-linecap:round;stroke-width:12;stroke:rgba(243,233,218,.12);transition:stroke .4s}
.db.past{stroke:rgba(200,162,122,.72)}
.db.now{stroke:var(--copper-hi);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--copper-hi) 80%,transparent))}
.db.sel{stroke:var(--cream)}
.db.now.sel{stroke:var(--copper-hi)}
@supports (color:oklch(from red l c h)){.db.now.sel{stroke:oklch(from var(--copper-hi) calc(l + .086) c h)}}
.db.bump{animation:barpop .7s var(--soft)}
@keyframes barpop{0%{filter:brightness(1.8) drop-shadow(0 0 10px var(--copper-hi))}}
.dl{font:700 13px var(--mono);fill:var(--cream-3);text-anchor:middle;dominant-baseline:middle}
.dptr{transform-origin:200px 200px;transition:transform .5s var(--bounce)}
.dh{font:700 30px var(--display);fill:var(--cream);text-anchor:middle}
.dc{font:800 10.5px var(--sans);letter-spacing:.18em;fill:var(--copper-hi);text-anchor:middle}
.rush-copy .ft-k{display:flex;justify-content:space-between;gap:12px}
.rush-copy h3{margin-top:14px;font-size:clamp(1.6rem,1.2rem + 1vw,2.1rem)}
.rush-copy>p{margin-top:10px;font-size:16px}
.ro{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-d)}
.ro-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ro b{font:700 clamp(2.2rem,1.6rem + 1.4vw,2.9rem)/1 var(--display);color:var(--cream);font-variant-numeric:tabular-nums}
.ro .now-b{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--copper-hi) 16%,transparent);font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--copper-hi)}
.ro .now-b i,.live-dot{width:7px;height:7px;border-radius:50%;background:var(--copper-hi);box-shadow:0 0 8px var(--copper-hi);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.ro .now-b[hidden]{display:none}
.ro-k{display:block;margin-top:10px;font:700 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--copper-hi)}
.ro p{margin-top:8px;font-size:15.5px}
.back-now{margin-left:auto;padding:6px 12px;border:0;border-radius:999px;background:rgba(243,233,218,.1);box-shadow:inset 0 0 0 1px rgba(243,233,218,.2);font:700 12px/1 var(--sans);color:var(--cream);cursor:pointer}
.back-now[hidden]{display:none}
.rl{display:block;margin-top:24px;font:700 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--cream-3)}
.range{width:100%;height:30px;margin:12px 0 0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.range::-webkit-slider-runnable-track{height:10px;border-radius:10px;background:linear-gradient(90deg,#2a1a13,#6b4a37 22%,#c8a27a 34%,#e2c48f 50%,#d18a45 70%,#6b4428 84%,#2a1a13);box-shadow:inset 0 0 0 1px rgba(243,233,218,.14)}
.range::-moz-range-track{height:10px;border-radius:10px;background:linear-gradient(90deg,#2a1a13,#6b4a37 22%,#c8a27a 34%,#e2c48f 50%,#d18a45 70%,#6b4428 84%,#2a1a13)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-9px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff8ee,#e2c9a4);box-shadow:0 0 0 4px color-mix(in srgb,var(--copper-hi) 50%,transparent),0 6px 12px rgba(0,0,0,.5)}
.range::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff8ee,#e2c9a4);box-shadow:0 0 0 4px color-mix(in srgb,var(--copper-hi) 50%,transparent),0 6px 12px rgba(0,0,0,.5)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--cream),0 6px 12px rgba(0,0,0,.5)}
.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--cream),0 6px 12px rgba(0,0,0,.5)}
.rticks{position:relative;height:14px;margin-top:8px;font:700 11px/1 var(--mono);color:var(--cream-3)}
.rticks span{position:absolute;top:0;left:calc(14px + (100% - 28px) * var(--h) / 23);translate:-50% 0;white-space:nowrap}
.rticks span:first-child{translate:-14px 0}.rticks span:last-child{translate:calc(-100% + 14px) 0}
.rticks span.hot{color:var(--copper-hi)}
.hchart{margin-top:24px;padding:16px 18px 12px;border-radius:18px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px var(--line-d)}
.ch-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--cream-3)}
.ch-top b{margin-right:5px;font:700 22px/1 var(--display);color:var(--cream);font-variant-numeric:tabular-nums}
.ch-live{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--mono);color:var(--cream-2);white-space:nowrap}
.hchart svg{display:block;width:100%;height:auto;margin-top:10px;overflow:visible}
.ch-grid{stroke:rgba(243,233,218,.08)}
.ch-y{font:600 10px var(--mono);fill:var(--cream-3);text-anchor:end}
.ch-band{fill:rgba(243,233,218,.03)}
.ch-bl{font:700 9.5px var(--sans);letter-spacing:.16em;fill:var(--cream-3);text-anchor:middle;text-transform:uppercase}
.ch-line{fill:none;stroke:var(--copper-hi);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ch-area{fill:url(#chFill)}
.ch-guide{stroke:var(--cream);stroke-width:1;stroke-dasharray:3 4;opacity:.5;transition:transform .35s var(--soft)}
.ch-sel{fill:var(--cream);stroke:var(--copper-hi);stroke-width:3;transition:cx .35s var(--soft),cy .35s var(--soft)}
.ch-now{fill:var(--copper-hi)}
.ch-pulse{fill:var(--copper-hi);transform-box:fill-box;transform-origin:center;animation:cpulse 1.8s ease-out infinite}
@keyframes cpulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
.ch-x{font:600 10.5px var(--mono);fill:var(--cream-3);text-anchor:middle}
.ft-ticker{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-d)}
.ft-tk{position:relative;height:28px;overflow:hidden}
.ft-tick{position:absolute;inset:0;display:flex;align-items:center;gap:9px;font-size:14px;color:var(--cream);white-space:nowrap;transition:transform .5s var(--soft),opacity .4s}
.ft-tick i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--tc,var(--copper-hi));box-shadow:0 0 0 3px color-mix(in srgb,var(--tc,var(--copper-hi)) 30%,transparent)}
.ft-tick span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ft-tick em{flex:none;margin-left:auto;font-style:normal;font-size:12.5px;color:var(--cream-3)}
.ft-tick.out{transform:translateY(-100%);opacity:0}
.ft-tick.pre{transform:translateY(100%);opacity:0}
.fine-d{margin-top:12px;font-size:12.5px;color:var(--cream-3)}

/* Run your program: three paper cards with live vignettes */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:960px){.tools{grid-template-columns:minmax(0,1fr)}}
.tool{display:flex;flex-direction:column;padding:12px 12px 22px;border-radius:22px;background:var(--oat-3);box-shadow:var(--card-sh);transition:transform .35s var(--soft)}
html.js .tool.reveal{transition-delay:var(--d,0ms),var(--d,0ms),0ms,0ms}
.tool:hover{transform:translateY(-4px)}
.tool-vis{position:relative;height:190px;border-radius:15px;overflow:hidden;background:radial-gradient(70% 80% at 50% 55%,rgba(200,162,122,.45),transparent 70%),var(--oat-2);box-shadow:inset 0 0 0 1px var(--line)}
.tool-vis>svg{display:block;width:100%;height:100%}
.tool-body{padding:18px 10px 0}
.tool-body h3{margin-top:10px;font-size:22px}
.tool-body p{margin-top:8px;font-size:15.5px;line-height:1.5}

.tool-vis.scan{display:grid;place-items:center}
.till{position:relative;width:min(290px,94%);height:156px;padding:7px;border-radius:20px;background:linear-gradient(155deg,#4a3021,#1c110b 45%,#33211a);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),0 22px 40px -22px rgba(43,26,18,.95)}
.till-screen{display:grid;grid-template-columns:minmax(96px,112px) minmax(0,1fr);gap:8px;height:100%;padding:7px;border-radius:14px;overflow:hidden;background:var(--oat-3)}
.till-cam{position:relative;border-radius:10px;overflow:hidden;background:radial-gradient(90% 70% at 50% 45%,#4a3021,#1c110b)}
.till-cam::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.locked .till-cam::after{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.35}100%{opacity:0}}
/* The member's pass at its real proportions, 80 px wide (--u is one point): the QR sits 22 pt above the bottom edge */
.ph-pw{position:absolute;left:50%;top:50%;width:80px;margin:calc(-40px * 550 / 375) 0 0 -40px}
.ph-pw.enter{animation:enter .6s var(--soft)}
@keyframes enter{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
.ph-pass{--u:calc(80px / 375);position:relative;overflow:hidden;aspect-ratio:375/550;border-radius:calc(12 * var(--u));background:#7b4a2a;box-shadow:0 14px 26px -12px rgba(0,0,0,.9);transform:rotate(-6deg);animation:hand 4.5s ease-in-out infinite}
@keyframes hand{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-3.5deg) translate(1.5px,-2px)}}
.pp-h{display:flex;align-items:center;gap:calc(8 * var(--u));height:calc(66 * var(--u));padding:0 calc(16 * var(--u));font:600 calc(17 * var(--u))/1 var(--font-wallet);color:var(--paper);white-space:nowrap}
.pp-h i{flex:none;width:calc(40 * var(--u));height:calc(40 * var(--u));margin:calc(5 * var(--u));border-radius:50%;background:var(--oat-3)}
.pp-strip{height:calc(144 * var(--u));background:url(passes/strip-loyalty-cards.svg) 50% 50% / cover}
.pp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(12 * var(--u));padding:calc(26 * var(--u)) calc(16 * var(--u)) 0}
.pp-row i{height:calc(14 * var(--u));border-radius:calc(4 * var(--u));background:rgba(255,248,238,.5)}
.pp-code{position:absolute;left:0;right:0;bottom:calc(22 * var(--u));width:fit-content;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:calc(4 * var(--u));padding:calc(9 * var(--u));border-radius:calc(10 * var(--u));background:#fff}
.pp-code img{width:calc(102 * var(--u));height:calc(102 * var(--u));max-width:none}
.pp-code span{font:500 calc(11 * var(--u))/calc(13 * var(--u)) var(--font-wallet);letter-spacing:.05em;color:#111}
/* The camera frame locks onto the pass barcode: 37 px below the pass centre, 4 px right from its 6 degree tilt */
.ph-frame{position:absolute;left:calc(50% + 4px);top:calc(50% + 37px);width:30px;height:30px;margin:-15px 0 0 -15px;color:rgba(243,233,218,.85);transition:color .3s,transform .45s var(--soft),filter .3s}
.ph-frame i{position:absolute;width:9px;height:9px;border:2px solid currentColor}
.ph-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:5px}
.ph-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:5px}
.ph-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:5px}
.ph-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:5px}
.locked .ph-frame{color:var(--copper-hi);transform:scale(.93);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--copper-hi) 80%,transparent))}
.ph-line{position:absolute;left:3px;right:3px;top:8%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--copper-hi),transparent);box-shadow:0 0 10px var(--copper-hi);animation:sweep 1.2s ease-in-out infinite alternate;transition:opacity .2s}
.locked .ph-line{opacity:0}
@keyframes sweep{to{top:88%}}
.till-panel{display:flex;flex-direction:column;min-width:0}
.till-head{display:flex;justify-content:space-between;align-items:center;gap:6px;height:18px}
.till-head b{font:700 10px/1 var(--display);color:var(--ink);white-space:nowrap}
.ph-loc{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:999px;background:var(--oat-2);font:700 8px/1 var(--sans);color:var(--ink);white-space:nowrap}
.ph-loc i{width:5px;height:5px;border-radius:50%;background:var(--pc);transition:background .3s}
.till-body{position:relative;flex:1;margin-top:6px}
.till-wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:7px;padding:0 10px;border-radius:10px;text-align:center;background:var(--oat);box-shadow:inset 0 0 0 1px var(--line);font:600 8.5px/1.35 var(--sans);color:var(--ink-3);transition:opacity .3s}
.till-wait b{display:flex;gap:3px}
.till-wait b i{width:4px;height:4px;border-radius:50%;background:var(--copper);animation:blink 1.2s ease-in-out infinite}
.till-wait b i:nth-child(2){animation-delay:.2s}.till-wait b i:nth-child(3){animation-delay:.4s}
.sheet .till-wait{opacity:0}
.ph-sheet{position:absolute;inset:0;padding:8px 9px;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 4px 10px -6px rgba(43,26,18,.4);opacity:0;transform:translateX(16px);transition:opacity .35s,transform .5s var(--soft)}
.sheet .ph-sheet{opacity:1;transform:none}
.sh-top{display:flex;justify-content:space-between;align-items:center;font:800 6.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sh-ok{display:inline-flex;align-items:center;gap:3px;color:var(--olive);letter-spacing:.06em}
.sh-ok svg{width:7px;height:7px}
.sh-code{margin-top:5px;font:700 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-bal{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:5px;border-top:1px solid var(--line);font-size:7.5px;color:var(--ink-3)}
.sh-bal b{font:700 13px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.sh-act{display:flex;justify-content:center;margin-top:6px;padding:5px;border-radius:7px;background:color-mix(in srgb,var(--copper) 16%,transparent);font:800 8px/1 var(--sans);color:var(--copper-ink);white-space:nowrap}
.sh-act.reward{background:rgba(63,106,44,.14);color:var(--olive)}

.fc-b{transform-box:fill-box;transform-origin:50% 100%;animation:barrise 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.4s)}
@keyframes barrise{from{transform:scaleY(.6)}to{transform:scaleY(1)}}
.fc-l{stroke-dasharray:100;stroke-dashoffset:0;animation:ldraw 6s var(--soft) infinite}
@keyframes ldraw{0%{stroke-dashoffset:100}40%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.fc-dot{animation:ldot 6s var(--soft) infinite}
@keyframes ldot{0%,38%{opacity:0}44%,86%{opacity:1}92%,100%{opacity:0}}
.fc-pill{position:absolute;left:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--paper);box-shadow:0 0 0 1px rgba(156,63,52,.25),0 6px 12px -8px rgba(43,26,18,.5);font:700 11px/1 var(--sans);color:var(--berry);animation:lpill 6s var(--soft) infinite}
.fc-pill svg{width:11px;height:11px}
@keyframes lpill{0%,38%{opacity:0;transform:translateY(6px)}46%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-4px)}}
.fm-pin .pulse{transform-box:fill-box;transform-origin:center;opacity:0}
.fm-pin.hit .pulse{animation:mpulse 1.4s var(--soft)}
@keyframes mpulse{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(3.2)}}
.fm-pin .pop{font:800 10px var(--sans);opacity:0;transform-box:fill-box}
.fm-pin.hit .pop{animation:mpop 1.6s var(--soft)}
@keyframes mpop{0%{opacity:0;transform:translateY(4px)}20%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.fm-lab{font:700 10px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--oat-3);stroke-width:3px}
.fm-link{stroke-dasharray:3 5;animation:march 1.6s linear infinite}
@keyframes march{to{stroke-dashoffset:-16}}

/* Merchant console tile and overlay */
.cons{position:relative;margin-top:20px;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr);gap:40px;align-items:center;padding:34px;border-radius:26px;background:var(--oat-3);box-shadow:var(--card-sh),0 40px 60px -50px rgba(43,26,18,.8);transition:transform .35s var(--soft)}
.cons:hover{transform:translateY(-4px)}
@media (max-width:960px){.cons{grid-template-columns:minmax(0,1fr);gap:26px;padding:22px}}
.cons-copy h3{margin-top:14px;font-size:clamp(1.6rem,1.1rem + 1vw,2.1rem);line-height:1.1}
.cons-copy p{margin-top:12px;font-size:16px}
.cons-copy .btn{margin-top:26px}
.ft-stretch{position:absolute;inset:0;z-index:3;border:0;padding:0;background:none;border-radius:inherit;cursor:pointer}
.cx{position:relative;width:100%;overflow:hidden;font-size:10px;text-align:left;color:var(--ink-2);border-radius:1.4em;background:#fffaf3;box-shadow:0 0 0 1px rgba(92,58,33,.14),0 3em 5em -3em rgba(43,26,18,.6)}
.cx-bar{display:flex;align-items:center;gap:.55em;padding:.9em 1.2em;background:var(--oat-2);border-bottom:1px solid var(--line)}
.cx-bar i{width:.8em;height:.8em;border-radius:50%;background:rgba(92,58,33,.25);flex:none}
.cx-url{margin-left:1em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.5em 1em;border-radius:99px;background:var(--oat-3);box-shadow:inset 0 0 0 1px var(--line);font:500 1.05em/1 var(--mono);color:var(--ink-3)}
.cx-url b{font-weight:600;color:var(--ink)}
.cx-body{display:grid;grid-template-columns:12.5em minmax(0,1fr)}
.cx-side,.cx-tabs{display:flex;flex-direction:column;gap:.3em}
.cx-side{padding:1.4em 1em;border-right:1px solid var(--line);background:rgba(230,216,195,.35)}
.cx-brand{display:flex;align-items:center;gap:.6em;margin:0 .4em .9em;font:700 1.3em/1 var(--display);color:var(--ink)}
.cx-brand .badge{width:2.2em;height:2.2em}
.cx-brand .badge svg{width:1.3em;height:1.3em}
.cx-side>span:not(.cx-brand),.cx-tabs button{display:block;width:100%;padding:.65em .7em;border:0;border-radius:.7em;background:none;text-align:left;font:600 1.2em/1 var(--sans);color:var(--ink-3)}
.cx-side>span.on,.cx-tabs [aria-selected="true"]{background:color-mix(in srgb,var(--copper) 16%,transparent);color:var(--copper-ink)}
.cx-main{display:grid;min-width:0;padding:1.4em 1.6em}
.cx-screen{grid-area:1/1;min-width:0}
.cx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em}
.cx-kpis div,.cx-chart{min-width:0;border-radius:1em;background:var(--oat-3);box-shadow:inset 0 0 0 1px var(--line)}
.cx-kpis div{padding:1em 1.1em}
.cx-kpis small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 1.1em/1.2 var(--sans);color:var(--ink-3)}
.cx-kpis b{display:block;margin-top:.3em;font:700 2.3em/1.1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.cx-kpis em{font:700 1.05em/1 var(--sans);font-style:normal;color:var(--olive)}
.cx-charts{display:grid;grid-template-columns:1.2fr 1fr;gap:1em;margin-top:1em}
.cx-chart{display:flex;flex-direction:column;height:12em;padding:1em 1.1em}
.cx-chart small{font:700 1.05em/1 var(--sans);color:var(--ink-3)}
.cx-bars{display:flex;align-items:flex-end;gap:.7em;flex:1;margin-top:.8em}
.cx-bars i{flex:1;height:var(--h);border-radius:.4em .4em .15em .15em;background:linear-gradient(var(--copper-hi),var(--copper-lo));transform-origin:bottom;transform:scaleY(.05);transition:transform 1s var(--soft) calc(var(--i) * 70ms)}
.cx-line{flex:1;width:100%;margin-top:.6em}
.cx-line path{fill:none;stroke:var(--espresso);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.8s var(--soft) .3s}
.cx-line path.area{stroke:none;fill:url(#cxFill);opacity:0;transition:opacity 1s .9s}
.in .cx-bars i,.play .cx-bars i{transform:scaleY(1)}
.in .cx-line path,.play .cx-line path{stroke-dashoffset:0}
.in .cx-line path.area,.play .cx-line path.area{opacity:1}
.cx-reset,.cx-reset *{transition:none!important}
.cx-rows{margin-top:1em;border-radius:1em;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.cx-rows>div{display:grid;grid-template-columns:1.6fr 1.2fr .7fr .7fr;gap:.6em;align-items:center;padding:.8em 1.1em;border-top:1px solid var(--line);font:600 1.15em/1.2 var(--sans);color:var(--ink)}
.cx-rows>div:first-child{border-top:0;background:rgba(230,216,195,.5);font-size:1.02em;color:var(--ink-3)}
.cx-rows code{font:500 .95em/1 var(--mono);color:var(--ink-3)}
.cx-camp>div{grid-template-columns:1.7fr 1.1fr .8fr .8fr;padding:1.1em}
.cx-pill{justify-self:start;padding:.4em .7em;border-radius:99px;background:rgba(63,106,44,.14);font:700 .9em/1 var(--sans);color:var(--olive);white-space:nowrap}
.cx-pill.gold{background:rgba(201,154,61,.22);color:#6e4b14}
.cx-pill.silver{background:rgba(92,58,33,.08);color:var(--ink-2)}
.cx-pill.draft{background:rgba(92,58,33,.06);color:var(--ink-3)}
@media (max-width:640px){.cx{font-size:7px}.cx-body{grid-template-columns:minmax(0,1fr)}.cx-side{display:none}}
.cx--live{font-size:12px}
.cx-tabs button{cursor:pointer;transition:background .2s,color .2s}
.cx-tabs button[aria-selected="false"]:not([aria-disabled="true"]):hover{background:rgba(92,58,33,.07);color:var(--ink)}
.cx-tabs [aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.cx-tabs button:focus-visible{outline-offset:-2px}
.cx--live .cx-screen{transition:opacity .4s,translate .5s var(--soft)}
.cx--live .cx-screen[hidden]{display:block;visibility:hidden;opacity:0;translate:0 10px;pointer-events:none}
.cx--live .cx-rows>div{transition:opacity .4s,translate .5s var(--soft);transition-delay:calc(var(--r,0) * 60ms)}
.cx--live .cx-screen:not(.play) .cx-rows>div:not(:first-child){opacity:0;translate:0 6px}
@media (max-width:1100px){.cx--live{font-size:10px}}
@media (max-width:640px){
  .cx--live{font-size:8.5px}
  .cx--live .cx-side{display:flex;flex-direction:row;padding:.9em 1em;border-right:0;border-bottom:1px solid var(--line)}
  .cx--live .cx-brand,.cx--live .cx-tabs [aria-disabled="true"]{display:none}
  .cx--live .cx-tabs{flex-direction:row}
  .cx--live .cx-tabs button{width:auto;padding:.8em 1.1em;font-size:1.45em;white-space:nowrap}
}
.cxo{position:fixed;inset:0;z-index:90;overflow:auto;overscroll-behavior:contain;clip-path:inset(0 round 0);transition:clip-path .7s var(--soft);
  background:radial-gradient(55% 50% at 74% 10%,rgba(200,162,122,.5),transparent 70%),radial-gradient(50% 50% at 14% 96%,color-mix(in srgb,var(--copper) 16%,transparent),transparent 70%),var(--oat)}
.cxo[hidden]{display:none}
.cxo-inner{display:flex;flex-direction:column;max-width:1240px;min-height:100%;margin:0 auto;padding:28px 24px 48px}
.cxo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.cxo-close{width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;cursor:pointer;box-shadow:inset 0 0 0 2px var(--ink),0 3px 0 var(--ink);color:var(--ink)}
.cxo-close:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--ink),0 1px 0 var(--ink)}
.cxo-close svg{width:18px;height:18px}
.cxo-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr);gap:48px;align-items:start;margin-block:auto}
.cxo-mock{position:sticky;top:24px;min-width:0}
@media (max-width:1100px){.cxo-grid{grid-template-columns:minmax(0,1fr);gap:28px}.cxo-mock{position:relative;top:0}}
.cxo-fade{opacity:0;translate:0 12px;transition:opacity .5s .2s,translate .6s var(--soft) .2s}
.cxo.is-open .cxo-fade{opacity:1;translate:0 0}
.cxo-copy h2{font-size:clamp(2rem,1.2rem + 2vw,3rem);line-height:1.04}
.cxo-copy .lede{margin-top:14px;font-size:17px}
.cxo-hint{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:14px;color:var(--ink-3)}
.cxo-hint svg{width:18px;height:18px;flex:none;color:var(--copper)}
.cxo-copy .btn{margin-top:26px}

/* Pricing: the club section, with a pouch that holds the chosen plan */
.club{background:radial-gradient(60% 80% at 85% 20%,color-mix(in srgb,var(--copper-hi) 15%,transparent),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,transparent 2px 12px),linear-gradient(135deg,var(--roast),var(--roast-2))}
.dark .eyebrow{color:var(--copper-hi)}
.club .eyebrow{color:var(--brand-pale)}
.dark a:not(.btn){color:var(--copper-hi)}
.dark a:not(.btn):hover{color:var(--cream)}
.club a:not(.btn){color:var(--brand-pale)}
.dark :focus-visible{outline-color:var(--copper-hi)}
.dark .club-card :focus-visible{outline-color:var(--copper-ink)}
.timer :focus-visible{outline-color:var(--copper-hi)}
.eyebrow--plain::before{display:none}
.club-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
@media (max-width:960px){.club-grid{grid-template-columns:minmax(0,1fr);gap:24px}.pouch-wrap{order:2}}
.club .s-head{margin-bottom:28px}
.pouch-wrap{display:grid;place-items:center;padding:30px 0}
.pouch{position:relative;width:min(300px,76vw);aspect-ratio:3/4;transform:rotate(-5deg);filter:drop-shadow(0 34px 34px rgba(0,0,0,.45))}
.pk-back,.pk-front{position:absolute;left:0;right:0;border-radius:10px 10px 14px 14px}
.pk-back{top:0;bottom:0;background:linear-gradient(90deg,#9a7446,#b08656 45%,#a07a4a)}
.pk-back::before{content:"";position:absolute;left:0;right:0;top:0;height:9%;border-radius:10px 10px 0 0;background:linear-gradient(#8a6538,#9a7446);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.pk-front{top:21%;bottom:0;overflow:hidden;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px),linear-gradient(90deg,#b8915f,#caa574 32%,#c19a68 62%,#a8804f);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),inset 0 -12px 20px rgba(0,0,0,.12)}
.pk-front::before{content:"";position:absolute;left:0;right:0;top:0;height:8%;background:linear-gradient(rgba(0,0,0,.14),transparent);border-bottom:2px dashed rgba(90,60,30,.35)}
/* Passes in the pouch at their real proportions (375 x 550 pt): the 66 pt header and 144 pt strip show above the pouch front */
.pk{position:absolute;left:50%;top:5%;width:52%;aspect-ratio:375/550;margin-left:-26%;border-radius:3.2% / 2.18%;background:linear-gradient(transparent 12%,rgba(255,248,238,.2) 12% 38.18%,transparent 38.18%),var(--pc);box-shadow:0 6px 12px -6px rgba(0,0,0,.5);transform:translate(var(--x,0),16%) rotate(var(--r,0deg));opacity:0;transition:transform .7s var(--bounce),opacity .4s}
.pk::before{content:"";position:absolute;left:5.6%;top:2.36%;width:10.67%;aspect-ratio:1;border-radius:50%;background:var(--oat-3)}
.pk::after{content:"";position:absolute;left:19.7%;top:4.9%;width:36%;height:2.2%;border-radius:4px;background:rgba(255,248,238,.7)}
.pk.on{opacity:1;transform:translate(var(--x,0),0) rotate(var(--r,0deg))}
.pk:nth-of-type(1){--pc:#9c3f34;--x:-26%;--r:-9deg}
.pk:nth-of-type(2){--pc:#44596e;--x:24%;--r:8deg}
.pk:nth-of-type(3){--pc:#7b4a2a;--x:0%;--r:-1deg}
.pk-label{position:absolute;left:14%;right:14%;top:40%;padding:16px 14px 14px;border-radius:14px;background:var(--oat-3);text-align:center;box-shadow:inset 0 0 0 2px var(--espresso),inset 0 0 0 5px var(--oat-3),inset 0 0 0 6px rgba(43,26,18,.35),0 4px 0 rgba(0,0,0,.12);transition:transform .5s var(--bounce)}
.pk-label.flip{animation:lflip .6s var(--soft)}
@keyframes lflip{40%{transform:rotateX(70deg)}}
.pk-label .badge{margin:0 auto}
.pk-label b{display:block;margin-top:8px;font:700 21px/1.1 var(--display);color:var(--ink)}
.pk-label span{display:block;margin-top:6px;font:800 10px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--copper-ink)}
.pk-label i{display:block;height:2px;width:56%;margin:10px auto 8px;background:var(--espresso);border-radius:2px}
.pk-label small{display:block;font-size:11.5px;line-height:1.35;color:var(--ink-2)}
.club-card{padding:30px;border-radius:26px;background:var(--oat-3);color:var(--ink-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.club-card h3{color:var(--ink)}
@media (max-width:520px){.club-card{padding:22px 18px}}
.opt{margin:0;padding:0;border:0;min-width:0}
.opt legend,.k{display:block;padding:0;margin-bottom:12px;font:800 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
/* The integrations band's code block (styles.css .code) marks flags with .k too; keep them inline code */
.code .k{display:inline;margin:0;font:inherit;letter-spacing:normal;text-transform:none}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.o{position:relative;cursor:pointer}
.o input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.o span{display:block;height:100%;padding:12px 14px;border-radius:14px;background:var(--oat-2);box-shadow:inset 0 0 0 1px rgba(92,58,33,.14),0 3px 0 rgba(92,58,33,.22);transition:background .2s,color .2s,transform .15s,box-shadow .15s}
.o b{display:block;font:700 16px/1.2 var(--display);color:inherit}
.o small{display:block;margin-top:4px;font:600 12.5px/1.2 var(--sans);opacity:.8}
.o input:checked+span{background:var(--espresso);color:var(--oat);box-shadow:0 3px 0 #120a06}
.o input:focus-visible+span{outline:2.5px solid var(--copper);outline-offset:3px}
.o:active span{transform:translateY(2px)}
.o span{color:var(--ink)}
.plan{margin-top:24px}
html.js .plan:not(.on){display:none}
.plan-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan-h h3{font-size:24px}
.plan-pill{padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--copper) 16%,transparent);font:800 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--copper-ink)}
.plan .for{margin-top:6px;font-size:15.5px}
.plan ul{list-style:none;display:grid;gap:10px;margin:18px 0 0;padding:0;font-size:15.5px}
.plan li{display:flex;gap:10px;line-height:1.45}
.plan li svg{width:20px;height:20px;flex:none;margin-top:1px;padding:3px;border-radius:50%;background:var(--copper-btn);color:var(--paper)}
.plan-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:2px dashed rgba(92,58,33,.22)}
.plan-foot small{display:block;font-size:13.5px;color:var(--ink-3)}
.price{display:block;font:700 30px/1.1 var(--display);color:var(--roast)}
html:not(.js) .plan{padding-top:24px;border-top:1px solid var(--line)}

/* FAQ */

.final{padding:120px 0 130px;text-align:center;background:radial-gradient(50% 70% at 50% 100%,color-mix(in srgb,var(--copper) 20%,transparent),transparent 70%)}
.final h2{font-size:clamp(2.4rem,1.4rem + 3vw,4.2rem);line-height:1.04;text-wrap:balance}
.final p{max-width:46ch;margin:22px auto 0;font-size:17.5px}
.final .ctas{justify-content:center}

.off *,.off *::before,.off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hl path{stroke-dashoffset:0}
  .steam{display:none}
}

/* Native specimen-gallery passes, kept above the original carousel for comparison. */
#pass-comparison{scroll-margin-top:90px}
.mock-head{flex-wrap:wrap}
.mock-head .s-head{flex:1 1 420px}
.mock-controls{display:flex;align-items:center;gap:24px;flex:none;max-width:100%}
.wallet-switch{display:inline-flex;padding:4px;border:2px solid var(--ink);border-radius:999px;flex:none}
.wallet-switch button{min-height:38px;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:700 14px/1 var(--sans);cursor:pointer}
.wallet-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.wallet-switch button:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.mock-card{flex:0 0 min(300px,80vw);min-width:0;margin:0;padding:12px 12px 20px;border-radius:22px;background:var(--oat-3);box-shadow:var(--card-sh);scroll-snap-align:start}
.mock-art{height:410px;display:flex;align-items:flex-start;justify-content:center}
.mock-art stow-pass-mock{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 6px rgba(43,26,18,.12))}
.mock-card h3{margin:18px 8px 0;font-size:22px}
.mock-card h3 a{color:var(--ink);text-decoration:none}
.mock-card h3 a:hover{text-decoration:underline}
#mockTrack{touch-action:pan-x pan-y}
#mockTrack.drag a{pointer-events:none}
@media(max-width:760px){.mock-head .s-head{flex:auto}}
@media(max-width:520px){.mock-controls{gap:12px;width:100%}.mock-controls .col-ctl{gap:10px;flex:1}.mock-controls .bar{flex:1;min-width:12px;width:40px}.wallet-switch button{padding-inline:12px}.mock-controls .arrow{width:40px;height:40px}.mock-art{height:390px}}