/* AxioraX New: Touch to share for My AX Card (js/axtouch.js, 15 Oct 2026). Scoped to .axt-layer and .axc-touch. */
.axc-own .axc-touch{height:56px;border-radius:28px;font-size:17.5px;background:linear-gradient(180deg,#1C6A43 0%,#135333 100%);box-shadow:0 6px 18px rgba(19,83,51,.22)}
.axc-own .axc-touch svg{flex:none}

.axt-layer{position:absolute;inset:0;z-index:60;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--sat) + 14px) 24px calc(var(--sab) + 24px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translate3d(0,12px,0);transition:opacity .24s var(--ease),transform .28s var(--ease)}
.axt-layer.on{opacity:1;transform:none}
.axt-x{position:absolute;top:calc(var(--sat) + 12px);inset-inline-end:16px;width:44px;height:44px;border-radius:50%;background:var(--row);display:grid;place-items:center;z-index:2}
.axt-touch,.axt-qrp,.axt-done{display:none;flex-direction:column;align-items:center;width:100%;max-width:400px;text-align:center}
.axt-layer.axt-m-ios .axt-touch,.axt-layer.axt-m-qr .axt-qrp,.axt-layer.axt-m-done .axt-done{display:flex}

.axt-h{margin-top:18px;font-size:25px;line-height:32px;font-weight:700;letter-spacing:-.01em;max-width:330px}
.axt-s{margin:8px 0 0;font-size:16px;line-height:23px;color:var(--sub);max-width:320px}
.axt-acts{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-top:26px}
.axt-acts .bp{height:54px;border-radius:27px}
.axt-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;font-size:15.5px;font-weight:600;color:var(--green)}
.axt-help{margin:18px 0 0;padding:12px 16px;border-radius:16px;background:var(--gold-soft);color:#6B5D0F;font-size:13.5px;line-height:19px;max-width:340px}

/* the two phones lying sideways, top edge to top edge, short so it all sits above the share menu */
.axt-art{position:relative;width:236px;height:64px;margin-top:max(64px,9vh);flex:none;direction:ltr}
.axt-ph{position:absolute;top:7px;width:92px;height:50px;border-radius:13px;background:#fff;border:2.5px solid #0C0C0C;box-shadow:0 6px 16px rgba(12,12,12,.10)}
.axt-ph::after{content:"";position:absolute;top:50%;width:3px;height:14px;margin-top:-7px;border-radius:2px;background:currentColor}
.axt-ph .axt-scr{position:absolute;inset:4px;border-radius:9px;display:grid;place-items:center}
.axt-ph.me{left:0;color:var(--green);border-color:var(--green);animation:axtMe 2.4s var(--ease) infinite}
.axt-ph.me::after{right:5px}
.axt-ph.me .axt-scr{background:var(--green-soft)}
.axt-ph.me svg{width:30px;height:auto}
.axt-ph.them{right:0;color:#0C0C0C;animation:axtThem 2.4s var(--ease) infinite}
.axt-ph.them::after{left:5px}
.axt-ph.them .axt-scr{background:#F3F5F3}
.axt-glow{position:absolute;left:50%;top:50%;width:0;height:0}
.axt-glow i{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:axtRing 2.4s ease-out infinite}
.axt-glow i:nth-child(2){animation-delay:.18s}
.axt-glow i:nth-child(3){animation-delay:.36s}
@keyframes axtMe{0%,12%{transform:translateX(0)}42%,72%{transform:translateX(12px)}100%{transform:translateX(0)}}
@keyframes axtThem{0%,12%{transform:translateX(0)}42%,72%{transform:translateX(-12px)}100%{transform:translateX(0)}}
@keyframes axtRing{0%,38%{opacity:0;transform:scale(.4)}46%{opacity:1}80%,100%{opacity:0;transform:scale(2.4)}}
@media (prefers-reduced-motion:reduce){.axt-ph,.axt-glow i{animation:none}.axt-glow i:first-child{opacity:.8;transform:scale(1.4)}.axt-ph.me{transform:translateX(12px)}.axt-ph.them{transform:translateX(-12px)}}

/* QR for every other phone */
.axt-qrp{padding-top:max(40px,6vh)}
.axt-qr{margin-top:22px;width:min(250px,68vw);aspect-ratio:1;padding:16px;border-radius:24px;background:#fff;box-shadow:0 0 0 1.5px var(--line),0 10px 28px rgba(12,12,12,.08)}
.axt-qr svg{display:block;width:100%;height:100%}
.axt-id{margin-top:14px;font-size:17px;font-weight:700;letter-spacing:.04em;color:var(--green)}

/* sent */
.axt-done{padding-top:max(70px,12vh)}
.axt-ok{width:76px;height:76px;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 8px 22px rgba(19,83,51,.25);animation:axtPop .4s var(--ease)}
@keyframes axtPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

@media (max-height:640px){.axt-art{margin-top:40px}.axt-h{font-size:22px;line-height:28px;margin-top:12px}.axt-acts{margin-top:18px}}