/* ============================================================
   ALT POS — service-counter language. Menu-board dotted leaders,
   a station switcher, order tickets pinned to a wire, a hub with
   six satellites, and rubber-stamp ticks. No card grid.
   Loads after home.css.
   ============================================================ */

.po-page{
	--po:#325b3e;--po-deep:#17341f;--po-ink:#1f2a20;--po-muted:#5a6656;
	--po-line:color-mix(in srgb,#325b3e 22%,transparent);
	--po-warm:#c8a951;
	--po-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
.po-sec{position:relative;}

/* ---------- Reading progress ---------- */
.po-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;}
.po-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--po-warm),#fff);}

/* ============================================================
   HERO — a tiled counter-top, a service strip, two calls
   ============================================================ */
.po-hero{position:relative;overflow:hidden;isolation:isolate;}
.po-hero > .am-wrap{position:relative;z-index:1;}
.po-hero__tiles{position:absolute;inset:-10%;z-index:0;opacity:.16;pointer-events:none;
	background-image:
		linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
	background-size:46px 46px;
	mask-image:linear-gradient(190deg,#000 8%,transparent 62%);
	-webkit-mask-image:linear-gradient(190deg,#000 8%,transparent 62%);
	animation:po-tile 26s linear infinite;}
@keyframes po-tile{to{background-position:46px 46px,46px 46px}}
body.am .po-hero h1{letter-spacing:-0.035em;}

.po-strip{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:clamp(24px,3vw,34px) 0 0;padding:0;}
.po-strip li{position:relative;padding:0 clamp(11px,1.5vw,18px);
	font-family:var(--po-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--app-muted);
	transition:color .3s ease;}
.po-strip li:first-child{padding-left:0;}
.po-strip li + li::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:1px;background:rgba(255,255,255,.28);}
@media (hover:hover){.po-strip li:hover{color:#fff;}}
.as-anim .po-strip li{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),color .3s ease;}
.as-ready .po-strip li{opacity:1;transform:none;}
.as-ready .po-strip li:nth-child(1){transition-delay:.40s}
.as-ready .po-strip li:nth-child(2){transition-delay:.47s}
.as-ready .po-strip li:nth-child(3){transition-delay:.54s}
.as-ready .po-strip li:nth-child(4){transition-delay:.61s}
.as-ready .po-strip li:nth-child(5){transition-delay:.68s}
.as-ready .po-strip li:nth-child(6){transition-delay:.75s}

.po-hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(26px,3.2vw,38px);}
.po-hero__alt{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--app-muted);
	border-bottom:1px solid rgba(255,255,255,.35);transition:color .3s ease,border-color .3s ease;}
.po-hero__alt:hover{color:#fff;border-color:#fff;}
.po-btn{--tx:0px;--ty:0px;gap:10px;min-height:50px;}
.po-js .po-btn{transform:translate(var(--tx),var(--ty));transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.po-btn i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){.po-btn:hover i{transform:translateX(7px);}}

/* ---------- Section head ---------- */
.po-kick{display:inline-block;margin-bottom:14px;
	font-family:var(--po-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--po);}
.po-kick--light{color:rgba(255,255,255,.72);}
.po-head{max-width:64ch;margin-bottom:clamp(28px,3.6vw,48px);}
body.am .po-head h2{font-size:clamp(27px,3.4vw,44px);letter-spacing:-0.035em;line-height:1.1;}
.po-head p{margin-top:14px;font-size:17px;line-height:1.66;color:var(--po-muted);}

/* ============================================================
   1. SWITCH — station keys on the left, one panel at a time
   ============================================================ */
.po-switch{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,3.6vw,64px);align-items:start;}
.po-switch__keys{display:grid;gap:2px;}
.po-switch__keys button{display:flex;align-items:baseline;gap:13px;width:100%;
	padding:14px 16px 14px 0;border:0;border-bottom:1px solid var(--po-line);background:none;
	font:inherit;font-size:16px;font-weight:600;color:var(--po-muted);text-align:left;cursor:pointer;
	transition:color .3s ease,padding-left .35s cubic-bezier(.2,.8,.2,1);position:relative;}
.po-switch__keys button::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:var(--po);
	transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.po-switch__keys em{font-style:normal;font-family:var(--po-mono);font-size:11px;letter-spacing:.1em;color:var(--po);opacity:.65;}
.po-switch__keys button[aria-selected="true"],.po-switch__keys button:hover,.po-switch__keys button:focus-visible{color:var(--po-deep);padding-left:16px;}
.po-switch__keys button[aria-selected="true"]::before,.po-switch__keys button:hover::before{transform:scaleY(1);}

.po-panel{animation:po-in .45s cubic-bezier(.2,.8,.2,1);}
@keyframes po-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.am .po-panel h3{font-size:clamp(21px,2.5vw,30px);letter-spacing:-0.03em;margin-bottom:8px;}
.po-panel > p{font-size:16.5px;line-height:1.65;color:var(--po-muted);margin:0 0 20px;max-width:58ch;}
.po-panel__foot{margin:20px 0 0;font-size:15px;font-weight:600;color:var(--po);}

/* Menu-board leaders: the dots run out to the edge. */
.po-menu{list-style:none;margin:0;padding:0;max-width:56ch;}
.po-menu li{display:flex;align-items:baseline;padding:9px 0;
	font-size:16px;color:var(--po-ink);
	transition:color .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);}
.po-menu li::after{content:"";flex:1 1 auto;height:1em;margin:0 10px;
	background-image:radial-gradient(circle,var(--po-line) 1.2px,transparent 1.2px);
	background-size:7px 7px;background-position:0 bottom;background-repeat:repeat-x;
	order:2;}
.po-menu li span{order:1;flex:0 0 auto;}
.po-menu li::before{content:"\2713";order:3;flex:0 0 auto;font-size:13px;color:var(--po);
	opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.po-menu li:hover{color:var(--po-deep);transform:translateX(4px);}
.po-menu li:hover::before{opacity:1;transform:none;}
}
@media (max-width:820px){
.po-switch{grid-template-columns:1fr;}
.po-switch__keys{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.po-switch__keys button{padding:12px 10px;border:1px solid var(--po-line);border-radius:3px;}
.po-switch__keys button::before{display:none;}
.po-switch__keys button[aria-selected="true"]{background:var(--po);color:#fff;border-color:var(--po);}
.po-switch__keys button[aria-selected="true"] em{color:rgba(255,255,255,.75);}
}

/* ============================================================
   2. RAIL — tickets clipped to a wire, dropping in one by one
   ============================================================ */
.po-rail{position:relative;padding:34px 0 10px;}
.po-rail__wire{position:absolute;left:0;right:0;top:34px;height:2px;background:var(--po-line);}
.po-rail__wire::after{content:"";position:absolute;inset:0;background:var(--po);
	transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.8,.2,1);}
.as-anim .po-rail.as-in .po-rail__wire::after{transform:scaleX(1);}
.po-rail__tickets{list-style:none;margin:0;padding:0 clamp(16px,6vw,110px);
	display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.po-rail__tickets li{position:relative;flex:0 0 min(250px,72vw);scroll-snap-align:center;
	background:var(--surface);border:1px solid var(--po-line);border-top:0;
	padding:24px 20px 22px;margin-top:14px;
	transform-origin:top center;
	transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;}
/* the perforated head of the ticket */
.po-rail__tickets li::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px;
	background:repeating-linear-gradient(90deg,var(--surface) 0 7px,transparent 7px 12px);
	border-top:1px solid var(--po-line);}
/* the pin that holds it to the wire */
.po-rail__tickets li::after{content:"";position:absolute;left:50%;top:-20px;width:11px;height:11px;border-radius:50%;
	background:var(--po);margin-left:-5.5px;
	transform:scale(0);transition:transform .45s cubic-bezier(.3,1.4,.5,1);}
.as-anim .po-rail.as-in li::after{transform:scale(1);transition-delay:calc(.5s + var(--t)*90ms);}
.as-anim .po-rail.as-in li{animation:po-drop .6s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(.5s + var(--t)*90ms);}
@keyframes po-drop{from{opacity:0;transform:translateY(-14px) rotate(-2deg)}to{opacity:1;transform:none}}
.po-ticket__n{display:block;margin-bottom:8px;font-family:var(--po-mono);font-size:11.5px;letter-spacing:.18em;color:var(--po);}
.po-rail__tickets b{display:block;font-size:19px;letter-spacing:-0.02em;color:var(--po-ink);margin-bottom:7px;}
.po-rail__tickets p{margin:0;font-size:14.5px;line-height:1.6;color:var(--po-muted);}
@media (hover:hover){
.po-rail__tickets li:hover{transform:rotate(-1.2deg) translateY(-5px);box-shadow:0 26px 48px -30px rgba(23,52,31,.5);}
}

/* ============================================================
   3. SCALE — a dark counter band
   ============================================================ */
.po-sec--scale{background:var(--po-deep);color:rgba(255,255,255,.78);}
body.am .po-sec--scale h2{color:#fff;}
.po-sec--scale .po-head p{color:rgba(255,255,255,.72);}
.po-scale{list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));column-gap:clamp(24px,4vw,60px);}
.po-scale li{position:relative;padding:15px 0 15px 26px;border-bottom:1px solid rgba(255,255,255,.16);
	font-size:17px;font-weight:600;color:#fff;letter-spacing:-0.015em;
	transition:transform .35s cubic-bezier(.2,.8,.2,1),padding-left .35s cubic-bezier(.2,.8,.2,1);}
.po-scale li::before{content:"";position:absolute;left:0;top:calc(50% - 3px);width:7px;height:7px;background:var(--po-warm);
	transition:transform .4s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.po-scale li:hover{padding-left:34px;}
.po-scale li:hover::before{transform:rotate(45deg) scale(1.3);}
}

/* ============================================================
   4. ECOSYSTEM — a hub, six satellites, lines between
   ============================================================ */
.po-eco{position:relative;display:grid;place-items:center;min-height:min(640px,86vw);}
.po-eco__hub{position:relative;z-index:2;width:min(210px,44vw);aspect-ratio:1;border-radius:50%;
	background:var(--po);color:#fff;display:grid;place-content:center;text-align:center;padding:18px;
	box-shadow:0 0 0 12px color-mix(in srgb,var(--po) 12%,transparent);}
.po-eco__hub b{display:block;font-size:clamp(17px,2.2vw,22px);letter-spacing:-0.02em;}
.po-eco__hub span{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.82);}
.po-eco__ring{list-style:none;margin:0;padding:0;position:absolute;inset:0;}
.po-eco__ring li{position:absolute;left:50%;top:50%;width:min(190px,42vw);
	transform:rotate(calc(var(--a)*60deg)) translate(min(250px,38vw)) rotate(calc(var(--a)*-60deg)) translate(-50%,-50%);
	text-align:center;
	animation:po-orbit 7s ease-in-out infinite;animation-delay:calc(var(--a)*.6s);}
@keyframes po-orbit{0%,100%{margin-top:0}50%{margin-top:-9px}}
.po-eco__ring li::before{content:"";position:absolute;left:50%;top:50%;width:min(250px,38vw);height:1px;
	background:linear-gradient(90deg,var(--po-line),transparent);
	transform-origin:left center;
	transform:rotate(calc(var(--a)*60deg + 180deg));z-index:-1;}
.po-eco__ring b{display:block;font-size:15.5px;letter-spacing:-0.015em;color:var(--po-deep);}
.po-eco__ring span{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--po-muted);}
.po-eco__ring li{transition:transform .4s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.po-eco__ring li:hover b{color:var(--po);}
.po-eco__ring li:hover{animation-play-state:paused;}
}
@media (max-width:760px){
.po-eco{display:block;min-height:0;}
.po-eco__hub{width:100%;aspect-ratio:auto;border-radius:4px;padding:22px;text-align:left;box-shadow:none;margin-bottom:6px;}
.po-eco__ring{position:static;display:grid;}
.po-eco__ring li{position:static;width:auto;transform:none;animation:none;text-align:left;
	padding:14px 0;border-bottom:1px solid var(--po-line);}
.po-eco__ring li::before{display:none;}
}

/* ============================================================
   5. STAMPS — each tick presses in
   ============================================================ */
.po-stamps{list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));column-gap:clamp(24px,4vw,60px);}
.po-stamps li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--po-line);
	font-size:16.5px;font-weight:600;color:var(--po-ink);letter-spacing:-0.01em;
	transition:transform .35s cubic-bezier(.2,.8,.2,1),color .3s ease;}
.po-stamps i{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;
	border:2px solid var(--po);color:var(--po);border-radius:50%;
	font-style:normal;font-size:15px;font-weight:700;
	transform:scale(2.2) rotate(-14deg);opacity:0;}
.as-anim .po-stamps.as-in i{animation:po-stamp .45s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--i,0)*80ms);}
html:not(.as-anim) .po-stamps i{transform:none;opacity:1;}
@keyframes po-stamp{to{transform:none;opacity:1}}
@media (hover:hover){
.po-stamps li:hover{transform:translateX(7px);color:var(--po-deep);}
}

/* ============================================================
   6. RECEIPT — the sign-off, torn along the bottom
   ============================================================ */
.po-end{padding-block:clamp(48px,7vw,96px);background:var(--bg-2);}
.po-receipt{position:relative;max-width:660px;margin-inline:auto;background:var(--surface);
	padding:clamp(30px,4vw,54px) clamp(24px,3.4vw,48px) clamp(42px,5vw,66px);
	border:1px solid var(--po-line);text-align:center;}
.po-receipt::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:14px;
	background:
		linear-gradient(-45deg,transparent 50%,var(--bg-2) 50%) 0 100%/14px 14px repeat-x,
		linear-gradient(45deg,transparent 50%,var(--bg-2) 50%) 0 100%/14px 14px repeat-x;}
.po-receipt__head{display:block;margin-bottom:16px;font-family:var(--po-mono);font-size:12px;letter-spacing:.34em;color:var(--po);}
body.am .po-receipt h2{font-size:clamp(26px,3.6vw,44px);letter-spacing:-0.035em;line-height:1.08;}
.po-receipt p{margin:16px auto 0;max-width:52ch;font-size:16.5px;line-height:1.68;color:var(--po-muted);}
.po-receipt__sign{margin-top:20px !important;padding-top:18px;border-top:1px dashed var(--po-line);
	font-weight:600;color:var(--po-deep) !important;}
.po-receipt__act{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:clamp(22px,3vw,32px);}
.po-end__back{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--po-muted);}
.po-end__back:hover{color:var(--po-deep);}

@media (max-width:640px){
.po-strip li{padding:0 10px;}
.po-menu li::after{margin:0 7px;}
}

/* ---------- Static fallback ---------- */
@media (prefers-reduced-motion:reduce){
.po-prog{display:none;}
.po-hero__tiles,.po-eco__ring li{animation:none;}
.po-rail__wire::after{transform:scaleX(1);}
.as-anim .po-rail li,.as-anim .po-rail.as-in li{animation:none;}
.as-anim .po-rail.as-in li::after{transform:scale(1);}
.po-stamps i{transform:none;opacity:1;}
.as-anim .po-stamps.as-in i{animation:none;}
.po-panel{animation:none;}
.po-strip li,.po-menu li,.po-menu li::before,.po-switch__keys button,.po-rail__tickets li,
.po-scale li,.po-scale li::before,.po-stamps li,.po-btn,.po-btn i{transition:none;}
.po-menu li:hover,.po-rail__tickets li:hover,.po-stamps li:hover{transform:none;}
.as-anim .po-strip li{opacity:1;transform:none;}
}


/* ============================================================
   ALT POS — second pass. More of the service floor: a live
   sign, an order ticker, heat off the pass, a sliding station
   indicator, a ticket that travels the rail, an orbit ring,
   stamped ticks with real variance, and a receipt that prints.
   ============================================================ */

/* ---------- Angled joins, so no band is a plain rectangle ---------- */
.po-sec--stations{clip-path:polygon(0 clamp(14px,2.4vw,40px),100% 0,100% 100%,0 100%);margin-top:clamp(-40px,-2.4vw,-14px);padding-top:clamp(64px,8vw,120px);background:var(--bg);position:relative;z-index:1;}
.po-sec--scale{clip-path:polygon(0 0,100% clamp(14px,2.4vw,40px),100% 100%,0 100%);}
.po-end{clip-path:polygon(0 clamp(14px,2.4vw,40px),100% 0,100% 100%,0 100%);margin-top:clamp(-40px,-2.4vw,-14px);padding-top:clamp(64px,8vw,120px);}

/* ---------- Now serving: a sign that breathes ---------- */
.po-open{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
	font-family:var(--po-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);}
.po-open i{width:8px;height:8px;border-radius:50%;background:var(--po-warm);
	box-shadow:0 0 0 0 color-mix(in srgb,var(--po-warm) 70%,transparent);
	animation:po-pulse 2.2s ease-out infinite;}
@keyframes po-pulse{
	0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--po-warm) 65%,transparent)}
	70%{box-shadow:0 0 0 11px transparent}
	100%{box-shadow:0 0 0 0 transparent}}

/* ---------- Heat rising off the pass ---------- */
.po-heat{position:absolute;inset:auto 0 0 0;height:46%;z-index:0;pointer-events:none;opacity:.5;
	background:radial-gradient(60% 100% at 22% 120%,rgba(200,169,81,.22),transparent 70%),
		radial-gradient(45% 100% at 78% 130%,rgba(255,255,255,.14),transparent 72%);
	animation:po-shimmer 9s ease-in-out infinite;}
@keyframes po-shimmer{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-10px) scaleX(1.06)}}

/* ---------- Live order ticker under the hero ---------- */
.po-ticker{position:relative;z-index:1;margin-top:clamp(30px,4vw,48px);
	border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);
	padding-block:12px;overflow:hidden;
	mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.po-ticker__row{display:flex;width:max-content;animation:po-run 30s linear infinite;}
.po-ticker ul{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;}
.po-ticker li{display:flex;align-items:center;gap:clamp(14px,2vw,26px);padding-right:clamp(14px,2vw,26px);white-space:nowrap;
	font-family:var(--po-mono);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.62);}
.po-ticker li::after{content:"";width:5px;height:5px;background:var(--po-warm);flex:0 0 auto;transform:rotate(45deg);}
@keyframes po-run{to{transform:translateX(-50%)}}
.po-ticker:hover .po-ticker__row{animation-play-state:paused;}

/* ---------- Station keys: an indicator that slides between them ---------- */
.po-switch__keys{position:relative;}
.po-switch__ind{position:absolute;left:0;width:3px;background:var(--po);border-radius:2px;
	top:var(--iy,0px);height:var(--ih,0px);opacity:0;
	transition:top .42s cubic-bezier(.2,.8,.2,1),height .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease;}
.po-ind-ready .po-switch__ind{opacity:1;}
.po-ind-ready .po-switch__keys button::before{display:none;}

/* Panel copy arrives line by line. */
.po-panel > *{animation:po-line .5s cubic-bezier(.2,.8,.2,1) backwards;}
.po-panel > *:nth-child(1){animation-delay:.02s}
.po-panel > *:nth-child(2){animation-delay:.08s}
.po-panel > *:nth-child(3){animation-delay:.14s}
.po-panel > *:nth-child(4){animation-delay:.20s}
@keyframes po-line{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.po-panel .po-menu li{animation:po-line .45s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.16s + var(--i,0)*34ms);}

/* ---------- Rail: one ticket is "on the pass" at a time ---------- */
.po-rail__wire{overflow:visible;}
.po-rail__wire::before{content:"";position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;
	background:var(--po-warm);box-shadow:0 0 0 6px color-mix(in srgb,var(--po-warm) 24%,transparent);
	animation:po-travel 9s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes po-travel{0%{left:2%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:98%;opacity:0}}
.po-rail__tickets li{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .3s ease;}
.po-rail__tickets li.is-hot{border-color:var(--po-warm);box-shadow:0 22px 44px -30px rgba(23,52,31,.55);}
.po-rail__tickets li.is-hot::after{background:var(--po-warm);}
.po-rail__tickets li.is-hot .po-ticket__n{color:var(--po-warm);}

/* ---------- Ecosystem: a dashed ring turns, connectors draw ---------- */
.po-eco::before{content:"";position:absolute;left:50%;top:50%;width:min(500px,76vw);aspect-ratio:1;
	transform:translate(-50%,-50%);border-radius:50%;
	border:1px dashed color-mix(in srgb,var(--po) 32%,transparent);
	animation:po-spin 44s linear infinite;}
@keyframes po-spin{to{rotate:360deg}}
.po-eco__ring li::before{transform-origin:left center;transform:rotate(calc(var(--a)*60deg + 180deg)) scaleX(0);
	transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.as-anim .po-eco.as-in .po-eco__ring li::before{transform:rotate(calc(var(--a)*60deg + 180deg)) scaleX(1);
	transition-delay:calc(.25s + var(--a)*90ms);}
.po-eco__hub{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;}
.po-eco__ring b{transition:color .3s ease;}
@media (hover:hover){
.po-eco__ring li:hover{transform:rotate(calc(var(--a)*60deg)) translate(min(250px,38vw)) rotate(calc(var(--a)*-60deg)) translate(-50%,-50%) scale(1.08);}
.po-eco:hover .po-eco__hub{transform:scale(1.04);box-shadow:0 0 0 18px color-mix(in srgb,var(--po) 10%,transparent);}
}
@media (max-width:760px){
.po-eco::before{display:none;}
.po-eco__ring li::before{display:none;}
@media (hover:hover){.po-eco__ring li:hover{transform:none;}}
}

/* ---------- Stamps: each one lands at its own angle ---------- */
.po-stamps li:nth-child(3n+1) i{--rot:-9deg}
.po-stamps li:nth-child(3n+2) i{--rot:7deg}
.po-stamps li:nth-child(3n) i{--rot:-4deg}
.po-stamps i{transform:scale(2.4) rotate(var(--rot,-12deg));}
@keyframes po-stamp{
	60%{transform:scale(.92) rotate(calc(var(--rot,-12deg) * .35));opacity:1}
	100%{transform:rotate(calc(var(--rot,-12deg) * .22));opacity:1}}
.po-stamps li{position:relative;}
.po-stamps li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--po);
	transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){.po-stamps li:hover::after{transform:scaleX(1);}}

/* ---------- Receipt: it prints out of the slot ---------- */
.po-receipt{clip-path:inset(0 0 0 0);}
.as-anim .po-receipt.as-rv{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
	transition:clip-path 1s cubic-bezier(.2,.8,.2,1);}
.as-anim .po-receipt.as-rv.as-in{clip-path:inset(0 0 0 0);}
.po-receipt__head{position:relative;}
.po-receipt__head::after{content:"";position:absolute;left:50%;top:-22px;transform:translateX(-50%);
	width:72px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--po) 30%,transparent);}

/* ---------- Menu leaders: the dots drift on hover ---------- */
.po-menu li::after{transition:background-position .5s linear;}
@media (hover:hover){.po-menu li:hover::after{background-position:7px bottom;}}

/* ---------- Scale band: numbers count up beside each type ---------- */
.po-scale li{counter-increment:po-scale;}
.po-scale li::after{content:counter(po-scale,decimal-leading-zero);
	position:absolute;right:0;top:50%;transform:translateY(-50%);
	font-family:var(--po-mono);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.34);
	transition:color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1);}
.po-scale{counter-reset:po-scale;}
@media (hover:hover){
.po-scale li:hover::after{color:var(--po-warm);transform:translateY(-50%) translateX(-4px);}
}

/* ---------- Static fallback for everything added here ---------- */
@media (prefers-reduced-motion:reduce){
.po-open i,.po-heat,.po-ticker__row,.po-rail__wire::before,.po-eco::before{animation:none;}
.po-rail__wire::before{display:none;}
.po-panel > *,.po-panel .po-menu li{animation:none;}
.as-anim .po-eco.as-in .po-eco__ring li::before{transform:rotate(calc(var(--a)*60deg + 180deg)) scaleX(1);transition:none;}
.as-anim .po-receipt.as-rv,.as-anim .po-receipt.as-rv.as-in{clip-path:none;transition:none;}
.po-switch__ind,.po-stamps li::after,.po-menu li::after,.po-scale li::after,.po-eco__hub,.po-eco__ring li{transition:none;}
.po-stamps i{transform:none;}
}


/* ============================================================
   ALT POS — real screens, inside the bands they belong to.
   Same family of entrances as the Alt Schools page, tuned to
   this one's darker counter-top surfaces.
   ============================================================ */
.po-shot{margin-block:clamp(30px,3.8vw,56px);}
.po-shot figure{margin:0;min-width:0;}
.po-shot__frame{
	position:relative;overflow:hidden;
	border-radius:clamp(9px,1vw,14px);
	border:1px solid rgba(31,42,32,.14);
	background:#f2efe7;
	box-shadow:0 30px 62px -46px rgba(23,52,31,.6);
	transition:box-shadow .6s ease;
}
.po-shot img{display:block;width:100%;height:auto;}

/* Every shot breathes in: the picture eases back to true size
   as its frame arrives. One shared gesture under five others. */
.as-anim .po-shot img{transform:scale(1.06);transform-origin:50% 14%;
	transition:transform 1.4s cubic-bezier(.16,.84,.26,1);}
.as-anim .po-shot.as-in img{transform:none;}

.po-shot figcaption{
	display:flex;gap:10px;align-items:baseline;margin-top:11px;
	font-size:12.8px;line-height:1.5;color:var(--muted);
}
.po-shot figcaption b{
	flex:0 0 auto;font-family:var(--po-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
	font-size:10px;letter-spacing:.18em;text-transform:uppercase;
	font-weight:700;color:var(--po,#325b3e);padding-top:.2em;
}
/* On the dark bands the caption has to lift off the green. */
.po-sec--rail .po-shot figcaption,
.po-sec--scale .po-shot figcaption{color:rgba(255,255,255,.62);}
.po-sec--rail .po-shot figcaption b,
.po-sec--scale .po-shot figcaption b{color:var(--po-warm,#c8a951);}
.po-sec--rail .po-shot__frame,
.po-sec--scale .po-shot__frame{border-color:rgba(255,255,255,.16);
	box-shadow:0 34px 76px -44px rgba(0,0,0,.72);}

/* ---------- 1 · Open: two cards dealt onto the counter ---------- */
.po-shot--fan{position:relative;max-width:min(980px,100%);margin-inline:auto;perspective:1500px;}
.po-shot--fan .po-shot__pair{position:relative;display:grid;transform-style:preserve-3d;}
.po-shot--fan figure{grid-area:1 / 1;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .6s ease;}
.po-shot--fan figure:nth-child(1){--rest:translate(-4.5%,0) rotate(-2.8deg);z-index:1;}
.po-shot--fan figure:nth-child(2){--rest:translate(4.5%,4.5%) rotate(2.4deg);z-index:2;}
.po-shot--fan figure{transform:var(--rest);}
.as-anim .po-shot--fan figure{opacity:0;transform:translate(34%,12%) rotate(9deg) scale(.94);}
.as-anim .po-shot--fan.as-in figure{opacity:1;transform:var(--rest);
	transition:transform 1.05s cubic-bezier(.17,.85,.24,1),opacity .6s ease;}
.as-anim .po-shot--fan.as-in figure:nth-child(2){transition-delay:.13s;}
.po-shot--fan figcaption{position:absolute;left:0;right:0;bottom:-2.6em;opacity:0;transform:translateY(-5px);
	transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover) and (min-width:861px){
.po-shot--fan:hover figure:nth-child(1){transform:translate(-27%,-2.5%) rotate(-4.2deg);}
.po-shot--fan:hover figure:nth-child(2){transform:translate(27%,2.5%) rotate(3.6deg);}
.po-shot--fan figure:hover{z-index:3;}
.po-shot--fan figure:hover .po-shot__frame{box-shadow:0 52px 96px -40px rgba(23,52,31,.72);}
.po-shot--fan figure:hover figcaption{opacity:1;transform:none;}
.po-shot--fan:hover .po-shot__note{opacity:0;}
}
.po-shot--fan .po-shot__note{
	margin-top:clamp(24px,3vw,40px);text-align:center;font-size:12.8px;color:var(--muted);
	transition:opacity .35s ease;
}
.po-shot--fan .po-shot__note b{font-family:var(--po-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
	color:var(--po,#325b3e);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:10px;}

/* ---------- 2 · Stations: the pair drifts at two speeds ---------- */
.po-shot--drift{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,40px);align-items:start;}
.po-shot--drift figure{will-change:transform;}
.po-shot--drift figure:nth-child(2){margin-top:clamp(26px,4.6vw,68px);}
/* --d is written by script from the scroll position; without it
   the pair simply sits where the grid puts it. */
.po-shot--drift .po-shot__frame{transform:translateY(calc(var(--d,0) * 1px));}
.as-anim .po-shot--drift figure{opacity:0;transform:translateY(52px);
	transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1);}
.as-anim .po-shot--drift.as-in figure{opacity:1;transform:none;}
.as-anim .po-shot--drift.as-in figure:nth-child(2){transition-delay:.15s;}
@media (hover:hover){
.po-shot--drift figure:hover .po-shot__frame{box-shadow:0 44px 78px -40px rgba(23,52,31,.68);}
}

/* ---------- 3 · Rail: a diagonal wipe with a lit edge ---------- */
.po-shot--wipe{max-width:min(1000px,100%);margin-inline:auto;}
.as-anim .po-shot--wipe .po-shot__frame{clip-path:polygon(-30% 0,0 0,-14% 100%,-44% 100%);
	transition:clip-path 1.15s cubic-bezier(.2,.84,.22,1);}
.as-anim .po-shot--wipe.as-in .po-shot__frame{clip-path:polygon(-30% 0,145% 0,131% 100%,-44% 100%);}
.po-shot--wipe .po-shot__frame::after{
	content:"";position:absolute;inset:-10% -30%;pointer-events:none;z-index:2;opacity:0;
	background:linear-gradient(97deg,transparent 46%,rgba(255,255,255,.72) 50%,transparent 54%);
	background-size:300% 100%;
}
.as-anim .po-shot--wipe.as-in .po-shot__frame::after{animation:po-edge 1.15s cubic-bezier(.2,.84,.22,1);}
@keyframes po-edge{0%{opacity:0;background-position:118% 0}10%{opacity:1}92%{opacity:1}100%{opacity:0;background-position:-40% 0}}
.as-anim .po-shot--wipe figcaption{opacity:0;transform:translateY(6px);
	transition:opacity .5s ease .62s,transform .6s cubic-bezier(.2,.8,.2,1) .62s;}
.as-anim .po-shot--wipe.as-in figcaption{opacity:1;transform:none;}

/* ---------- 4 · Scale: the cash drawer, on a reel ---------- */
.po-shot--reel{
	position:relative;overflow:hidden;
	mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.po-shot--reel .po-shot__track{display:flex;gap:clamp(16px,2vw,30px);width:max-content;
	animation:po-reel 58s linear infinite;}
.po-shot--reel figure{width:clamp(300px,42vw,580px);flex:0 0 auto;}
.po-shot--reel figure:nth-child(odd) .po-shot__frame{animation:po-bob 7.5s ease-in-out infinite;}
.po-shot--reel figure:nth-child(even) .po-shot__frame{animation:po-bob 7.5s ease-in-out infinite -3.4s;}
@keyframes po-bob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@keyframes po-reel{to{transform:translateX(-50%)}}
.po-shot--reel img{filter:saturate(.7);transition:filter .5s ease;}
.po-shot--reel:hover .po-shot__track,
.po-shot--reel:focus-within .po-shot__track{animation-play-state:paused;}
@media (hover:hover){
.po-shot--reel figure:hover img{filter:none;}
.po-shot--reel figure:hover .po-shot__frame{animation-play-state:paused;
	box-shadow:0 44px 80px -38px rgba(0,0,0,.7);}
}

/* ---------- 5 · Why: it turns in on its hinge ---------- */
.po-shot--flip{max-width:min(1000px,100%);margin-inline:auto;perspective:1500px;}
.po-shot--flip figure{transform-style:preserve-3d;}
.as-anim .po-shot--flip figure{opacity:0;transform:rotateY(-24deg) translateZ(-70px);transform-origin:left center;
	transition:opacity .7s ease,transform 1.05s cubic-bezier(.2,.84,.22,1);}
.as-anim .po-shot--flip.as-in figure{opacity:1;transform:none;}
.po-shot--flip .po-shot__frame::after{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
	background:linear-gradient(80deg,rgba(255,255,255,.6),transparent 55%);
}
.as-anim .po-shot--flip.as-in .po-shot__frame::after{animation:po-spec 1.05s ease-out;}
@keyframes po-spec{0%{opacity:.8}100%{opacity:0}}

/* ---------- Narrow ---------- */
@media (max-width:860px){
.po-shot--drift{grid-template-columns:1fr;gap:clamp(20px,5vw,30px);}
.po-shot--drift figure:nth-child(2){margin-top:0;}
.po-shot--drift .po-shot__frame{transform:none;}
.po-shot--fan .po-shot__pair{display:grid;grid-template-columns:1fr;gap:18px;}
.po-shot--fan figure{grid-area:auto;}
.as-anim .po-shot--fan figure{opacity:0;transform:translateY(30px);}
.as-anim .po-shot--fan.as-in figure,
.po-shot--fan figure{transform:none;}
.as-anim .po-shot--fan.as-in figure{opacity:1;}
.po-shot--fan figcaption{position:static;opacity:1;transform:none;}
.po-shot--fan .po-shot__note{display:none;}
.po-shot--reel figure{width:min(78vw,400px);}
.as-anim .po-shot--flip figure{transform:translateY(34px);}
.as-anim .po-shot--flip.as-in figure{transform:none;}
.po-shot figcaption{font-size:12.5px;}
}

/* The shots arrive from off-frame, so the bands clip sideways.
   `clip` rather than `hidden`: it makes no scroll box. */
.po-sec{overflow-x:clip;}

@media (prefers-reduced-motion:reduce){
.as-anim .po-shot figure,
.as-anim .po-shot.as-in figure,
.as-anim .po-shot img,
.as-anim .po-shot.as-in img{opacity:1;transform:none;transition:none;}
.po-shot--fan figure{transform:none;}
.as-anim .po-shot--wipe .po-shot__frame,
.as-anim .po-shot--wipe.as-in .po-shot__frame{clip-path:none;transition:none;}
.po-shot--wipe .po-shot__frame::after,
.po-shot--flip .po-shot__frame::after{display:none;}
.as-anim .po-shot--wipe figcaption{opacity:1;transform:none;}
.po-shot--reel .po-shot__track{animation:none;flex-wrap:wrap;width:auto;}
.po-shot--reel .po-shot__frame{animation:none;}
.po-shot--reel img{filter:none;}
.po-shot--drift .po-shot__frame{transform:none;}
.po-shot--fan figcaption{position:static;opacity:1;}
}