/* "How it works" under every demo — steps standing in depth (perspective), a light running along them, and the count
   of live-checked functions. The carrier of :hover never moves (the menu lesson): only the inner layer .gxh-c does.
   Sits between the unzoomed stage and the zoomed call-to-action, so it takes the site zoom itself. */
.gxh{zoom:calc(var(--bz,1)*var(--fz,1));padding:54px 0 26px;border-top:1px solid var(--ln);overflow:hidden}
.gxh-eb{margin:0 0 12px;font:600 11.5px/1 "JetBrains Mono",ui-monospace,monospace!important;letter-spacing:.2em;text-transform:uppercase;color:var(--a)}

/* the 4D heading: stacked layers give it thickness; on arrival the red and cyan layers split for a second and settle */
.gxh-t{position:relative;display:inline-block;margin:0 0 34px;font-size:clamp(26px,3.6vw,50px);line-height:1.12;color:var(--tx);
	text-shadow:0 1px 0 #c9b592,0 2px 0 #a8946f,0 3px 0 #86744f,0 4px 0 #5f5236,0 5px 0 #3d3422,0 14px 22px rgba(0,0,0,.55)}
.gxh-t::before,.gxh-t::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;text-shadow:none;pointer-events:none;opacity:0;mix-blend-mode:screen}
.gxh-t::before{color:#ff3b4f}.gxh-t::after{color:#2de2ff}
.gxh.in .gxh-t::before{animation:gxhL 1.1s cubic-bezier(.2,.7,.2,1) both}
.gxh.in .gxh-t::after{animation:gxhR 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes gxhL{0%{opacity:.9;transform:translate(-14px,3px)}60%{opacity:.7;transform:translate(-3px,0)}100%{opacity:0;transform:none}}
@keyframes gxhR{0%{opacity:.9;transform:translate(14px,-3px)}60%{opacity:.7;transform:translate(3px,0)}100%{opacity:0;transform:none}}

/* the scene */
.gxh-scene{position:relative;perspective:1500px;perspective-origin:50% 30%;padding:6px 0 40px}
.gxh-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;transform-style:preserve-3d;transform:rotateX(9deg)}
.gxh-s{position:relative;transform-style:preserve-3d;min-width:0}
/* the arc: outer cards stand further back and turn towards the middle */
.gxh-s:nth-child(1){transform:translateZ(-70px) rotateY(16deg)}.gxh-s:nth-child(2){transform:translateZ(-22px) rotateY(8deg)}
.gxh-s:nth-child(4){transform:translateZ(-22px) rotateY(-8deg)}.gxh-s:nth-child(5){transform:translateZ(-70px) rotateY(-16deg)}
.gxh-c{position:relative;height:100%;padding:22px 20px 24px;border-radius:16px;border:1px solid var(--ln2);
	background:linear-gradient(160deg,rgba(220,197,162,.10),rgba(220,197,162,0) 46%),var(--pn);
	box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 8px 0 -2px #06080b,0 9px 0 -2px rgba(220,197,162,.18),0 30px 50px -18px rgba(0,0,0,.85);
	transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .45s}
.gxh-n{display:grid;place-items:center;width:38px;height:38px;margin-bottom:16px;border-radius:11px;background:var(--a);color:var(--ink);font:700 15px/1 "JetBrains Mono",ui-monospace,monospace!important;transform:translateZ(34px);box-shadow:0 10px 18px -6px rgba(220,197,162,.45)}
.gxh-c h3{margin:0 0 8px;font-size:16px;line-height:1.3;color:var(--tx);transform:translateZ(22px)}
.gxh-c p{margin:0;font-size:13px;line-height:1.58;color:var(--tx2);transform:translateZ(10px)}
.gxh-s:hover .gxh-c{transform:translateZ(46px);border-color:rgba(220,197,162,.55);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 8px 0 -2px #06080b,0 9px 0 -2px rgba(220,197,162,.4),0 46px 60px -20px rgba(0,0,0,.9)}
/* the path of the message: a line under the cards and a light that travels it */
.gxh-ray{position:absolute;left:4%;right:4%;bottom:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(220,197,162,.35) 12%,rgba(220,197,162,.35) 88%,transparent);transform:rotateX(60deg)}
.gxh-ray::after{content:"";position:absolute;top:-4px;left:0;width:90px;height:10px;border-radius:10px;background:radial-gradient(closest-side,#fff,rgba(220,197,162,.9) 40%,transparent);filter:blur(1px);animation:gxhRay 4.2s linear infinite}
@keyframes gxhRay{from{left:-6%}to{left:100%}}

/* arrival from depth, once */
@media (prefers-reduced-motion:no-preference){
	.gxh .gxh-c{opacity:0;transform:translateZ(-240px) translateY(30px)}
	.gxh.in .gxh-c{opacity:1;transform:none;transition:opacity .7s ease-out calc(var(--i,0)*.11s),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.11s),border-color .3s,box-shadow .45s}
	.gxh.in.done .gxh-c{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .45s}
	.gxh.in .gxh-s:hover .gxh-c{transform:translateZ(46px)}
}
@media (prefers-reduced-motion:reduce){.gxh-ray::after,.gxh-t::before,.gxh-t::after{animation:none!important}}

/* the count */
.gxh-chk{margin-top:26px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px 34px;align-items:start}
.gxh-num{position:sticky;top:96px;padding:26px 24px;border-radius:18px;border:1px solid rgba(220,197,162,.3);background:radial-gradient(120% 120% at 0 0,rgba(220,197,162,.16),transparent 60%),var(--pn)}
.gxh-num b{display:block;font:700 86px/.95 "Inter",system-ui,sans-serif!important;letter-spacing:-.04em;color:var(--a);font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #a8946f,0 4px 0 #6d5e41,0 6px 0 #3d3422,0 18px 26px rgba(0,0,0,.6)}
.gxh-num span{display:block;margin-top:14px;font-size:18px;font-weight:700;color:var(--tx)}
.gxh-num small{display:block;margin-top:8px;font-size:12px;line-height:1.5;color:var(--mu)}
.gxh-gr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gxh-gr section{padding:20px 22px;border-radius:16px;border:1px solid var(--ln);background:var(--pn)}
.gxh-gr h3{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--a)}
.gxh-gr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gxh-gr li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.45;color:var(--tx)}
.gxh-gr li::before{content:"";position:absolute;left:2px;top:.28em;width:12px;height:7px;border-left:2.4px solid var(--ok);border-bottom:2.4px solid var(--ok);transform:rotate(-45deg)}
.gxh-na{grid-column:2;padding:18px 22px;border-radius:16px;border:1px dashed var(--ln2)}
.gxh-na h3{margin:0 0 8px;font-size:13.5px;color:var(--tx)}
.gxh-na ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:12.5px;line-height:1.55;color:var(--tx2)}
.gxh-more{margin:18px 0 0;font-size:14px;color:var(--tx2)}.gxh-more a{color:var(--a)}

@media (max-width:1100px){
	.gxh-steps{grid-template-columns:repeat(3,minmax(0,1fr));transform:none}.gxh-s:nth-child(n){transform:none}.gxh-ray{display:none}
	.gxh-chk{grid-template-columns:minmax(0,1fr)}.gxh-num{position:static;display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px}.gxh-num b{font-size:64px!important}.gxh-num span{margin:0}.gxh-num small{flex-basis:100%;margin:0}.gxh-na{grid-column:1}
}
@media (max-width:700px){
	.gxh{padding:38px 0 16px}.gxh-t{margin-bottom:22px;text-shadow:0 1px 0 #a8946f,0 2px 0 #6d5e41,0 3px 0 #3d3422,0 10px 16px rgba(0,0,0,.55)}
	.gxh-scene{perspective:none;padding-bottom:6px}.gxh-steps{grid-template-columns:minmax(0,1fr);gap:12px}
	.gxh-c{display:grid;grid-template-columns:38px 1fr;gap:4px 14px;padding:16px}.gxh-n{grid-row:1 / span 2;margin:0}.gxh-c h3{margin:0}
	.gxh-gr{grid-template-columns:minmax(0,1fr)}
}