/* go: CrypTap Go (the phone as the till) as its own section right after pricing, with CrypTap Commerce as a smaller card under
   it. Owned by go. Everything is scoped under #go; classes carry go- (Commerce's drawn checkout carries com-). */
#go{position:relative;background:var(--paper);color:var(--ink);padding:clamp(72px,11vh,120px) var(--g) clamp(72px,11vh,120px);border-top:1px solid var(--line);
  scroll-margin-top:var(--nav-h)}
#go .go-main{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}

#go .go-k{display:flex;align-items:center;gap:8px}
#go .go-tab{height:22px;padding:0 8px;display:inline-flex;align-items:center;background:var(--gold);color:#1a1200;font:600 11.5px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
#go .go-chip{height:22px;padding:0 7px;display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px var(--ink-2);color:var(--ink-2);font:600 10.5px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
#go .go-h{margin-top:22px;font-weight:400;font-size:clamp(36px,4.6vw,68px);line-height:1;letter-spacing:-.034em;max-width:13ch;text-wrap:balance}
#go .go-pts{list-style:none;margin:clamp(28px,4.5vh,44px) 0 0;padding:0;max-width:560px}
#go .go-pts li{padding:14px 0 15px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
#go .go-pts li:last-child{border-bottom:1px solid var(--line)}
#go .go-pts b{font-weight:500;color:var(--ink)}
#go .go-up{margin-top:16px;max-width:560px;font-size:16px;line-height:1.5}
#go .go-up a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .24s linear}
@media (hover:hover){ #go .go-up a:hover{text-decoration-color:currentColor} }
#go .go-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:clamp(26px,4vh,36px)}
#go .go-faq,#go .go-a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 15px/1.3 var(--sans);color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
#go .go-a span{display:inline-block;transition:transform .38s var(--out)}
@media (hover:hover){ #go .go-faq:hover,#go .go-a:hover{color:var(--blue)} #go .go-a:hover span{transform:translateX(4px)} }

/* the real app: the QR card of the CrypTap till, cropped below the amount, in a phone-screen frame on a ruled plate */
#go .go-art{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,52px) 20px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
#go .go-shot{margin:0;display:flex;flex-direction:column;align-items:center;width:min(300px,100%)}
#go .go-shot-f{width:100%;padding:6px;background:var(--white);border:1px solid var(--line-strong);border-radius:30px;
  box-shadow:0 1px 2px rgba(14,23,38,.05),0 24px 48px -26px rgba(14,23,38,.34)}
#go .go-shot img{width:100%;height:auto;border-radius:24px;background:var(--white)}
#go .go-shot figcaption{margin-top:12px;font-size:13px;line-height:1.4;color:var(--ink-3)}

/* CrypTap Commerce (in preview): one ruled row under Go that opens on a drawn checkout. Closed by default; go.js sets
   .is-open, aria-expanded and inert, and steps the mockup (.s1 cursor in, .s2 crypto selected, .s3 QR drawn, .s4 cursor out). */
#go .go-com{margin-top:clamp(48px,8vh,80px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 24px)}
#go .go-com-hd{margin:0;font:inherit}
#go .go-com-t{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:68px;padding:14px 0;text-align:left;
  font-size:16px;line-height:1.45;color:var(--ink-2);-webkit-tap-highlight-color:transparent}
#go .go-com-l{min-width:0;text-wrap:pretty}
#go .go-com-l b{font-weight:500;color:var(--ink)}
#go .go-com-x{position:relative;flex:none;width:34px;height:34px;box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow .24s linear,background-color .24s linear}
#go .go-com-x::before,#go .go-com-x::after{content:"";position:absolute;left:11px;top:16.5px;width:12px;height:1px;background:var(--ink);transition:transform .4s var(--out)}
#go .go-com-x::after{transform:rotate(90deg)}
#go .go-com.is-open .go-com-x::after{transform:rotate(90deg) scaleX(0)}
#go .go-com.is-open .go-com-x{box-shadow:inset 0 0 0 1px var(--ink)}
@media (hover:hover){ #go .go-com-t:hover .go-com-x{box-shadow:inset 0 0 0 1px var(--ink)} #go .go-com-t:hover .go-com-l b{color:var(--blue)} }
#go .go-com-t:active .go-com-x{background:rgba(14,23,38,.05)}

/* the reveal: the panel's row grows from 0fr to 1fr, its contents rise in */
#go .go-com-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--out)}
#go .go-com.is-open .go-com-p{grid-template-rows:1fr}
#go .go-com-in{min-height:0;overflow:hidden}
#go .go-com-g{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding:6px 0 36px;
  opacity:0;transform:translateY(10px);transition:opacity .2s linear,transform .2s var(--in)}
#go .go-com.is-open .go-com-g{opacity:1;transform:none;transition:opacity .4s linear .12s,transform .6s var(--out) .08s}
#go .go-com-pts{list-style:none;margin:0;padding:0;max-width:440px}
#go .go-com-pts li{position:relative;padding:12px 0 13px 22px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--ink);text-wrap:pretty}
#go .go-com-pts li::before{content:"";position:absolute;left:0;top:22px;width:9px;height:2px;background:var(--gold)}
#go .go-com-pts li:last-child{border-bottom:1px solid var(--line)}
#go .go-com-cta{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:14.5px;color:var(--ink-2)}

/* the drawn checkout: white page, 1px ink frame, the site's mono and condensed type; no brand marks */
#go .go-co{position:relative;width:100%;background:var(--white);box-shadow:inset 0 0 0 1px var(--ink),0 24px 48px -30px rgba(14,23,38,.35);font-size:14px;line-height:1.3;color:var(--ink)}
#go .go-co-bar{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px 0 13px;border-bottom:1px solid var(--ink)}
#go .go-co-bar::before{content:"";flex:none;width:31px;height:7px;
  background:radial-gradient(circle at 3.5px 3.5px,transparent 2.6px,var(--ink) 2.75px,var(--ink) 3.4px,transparent 3.55px) 0 0/12px 7px repeat-x}
#go .go-co-url{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2)}
#go .go-co-ex{flex:none;height:16px;line-height:16px;padding:0 6px;background:var(--gold);color:#1a1200;font:600 9.5px/16px var(--cond);letter-spacing:.12em;text-transform:uppercase}
#go .go-co-body{padding:16px 18px 18px}
#go .go-co-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 0 12px;border-bottom:1px solid var(--line)}
#go .go-co-amt{font-family:var(--mono);font-weight:500;font-size:13px}
#go .go-co-k{display:block;margin-top:14px;font:600 10.5px/1 var(--cond);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
#go .go-co-opts{display:grid;gap:6px;margin-top:9px}
#go .go-co-opt{position:relative;display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .24s linear,background-color .24s linear}
#go .go-co-dot{position:relative;flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink-3);transition:box-shadow .24s linear}
#go .go-co-dot::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .3s var(--snap)}
#go .go-co-tk{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--ink-2);white-space:nowrap}
#go .go-co.s2 [data-m=crypto]{box-shadow:inset 0 0 0 1px var(--ink);background:rgba(217,173,18,.06)}
#go .go-co.s2 [data-m=crypto] .go-co-dot{box-shadow:inset 0 0 0 1px var(--ink)}
#go .go-co.s2 [data-m=crypto] .go-co-dot::after{transform:none}
#go .go-co.s2 [data-m=card]{color:var(--ink-3)}
/* the pointer: comes in from below right, presses on the crypto row, leaves once the code is up */
#go .go-co-cur{position:absolute;left:62%;top:52%;width:15px;height:21px;fill:var(--ink);stroke:#fff;stroke-width:1.2;stroke-linejoin:round;pointer-events:none;
  opacity:0;transform:translate(46px,44px);transition:opacity .3s linear,transform .6s var(--out)}
#go .go-co.s1 .go-co-cur{opacity:1;transform:none}
#go .go-co.s2 .go-co-cur{animation:go-press .28s var(--out)}
#go .go-co.s4 .go-co-cur{opacity:0;transform:translate(14px,10px);transition:opacity .4s linear,transform .5s var(--out)}
@keyframes go-press{40%{transform:scale(.82)}}
/* the code: wiped in top to bottom behind a gold scan line; the space is held, so nothing moves when it appears */
#go .go-co-qr{display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px;box-shadow:inset 0 0 0 1px var(--line);background:var(--paper)}
#go .go-co-cw{position:relative;flex:none;display:block;width:84px;height:84px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--out)}
#go .go-co-cw::after{content:"";position:absolute;left:-2px;right:-2px;top:0;height:2px;background:var(--gold);opacity:0;transform:translateY(0)}
#go .go-co-code{display:block;width:100%;height:100%;fill:var(--ink);box-shadow:0 0 0 1px var(--line)}
#go .go-co-qt{display:flex;flex-direction:column;gap:5px;min-width:0;opacity:0;transform:translateY(6px);transition:opacity .3s linear,transform .5s var(--out)}
#go .go-co-qt b{font-weight:500;font-size:14px;line-height:1.25}
#go .go-co-qa{font-family:var(--mono);font-weight:500;font-size:12.5px}
#go .go-co-wt{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--ink-2)}
#go .go-co-wt i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold)}
#go .go-co.s3 .go-co-cw{clip-path:inset(0)}
#go .go-co.s3 .go-co-cw::after{animation:go-scan .7s var(--out)}
#go .go-co.s3 .go-co-qt{opacity:1;transform:none;transition-delay:.25s}
#go .go-co.s3 .go-co-wt i{animation:go-blink 1.1s steps(2) .9s infinite}
@keyframes go-scan{0%{opacity:1;transform:translateY(0)}85%{opacity:1}100%{opacity:0;transform:translateY(84px)}}
@keyframes go-blink{50%{opacity:0}}

/* reduced motion and no script: the finished state, still */
html.reduce #go :is(.go-com-p,.go-com-g,.go-co *),html.reduce #go .go-com-x::before,html.reduce #go .go-com-x::after,
html.reduce #go .go-co-cw::after,html.reduce #go .go-co-dot::after{transition:none!important;animation:none!important}
html.reduce #go .go-co-cur,html:not(.js) #go .go-co-cur{display:none}
html:not(.js) #go .go-com-p{grid-template-rows:1fr}
html:not(.js) #go .go-com-g,html:not(.js) #go .go-co-qt{opacity:1;transform:none}
html:not(.js) #go .go-co-cw{clip-path:none}
html:not(.js) #go .go-com-x{display:none}
#go .go-new{font-family:var(--sans);font-size:14px;line-height:1;color:var(--ink-2)}
@media (max-width:979px){
  #go .go-main{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
}
@media (max-width:719px){
  #go{padding:56px var(--g) 48px}
  #go .go-main{grid-template-columns:1fr;gap:32px}
  #go .go-h{margin-top:16px;font-size:34px;line-height:1.02;letter-spacing:-.03em}
  #go .go-pts{margin-top:22px}
  #go .go-pts li{padding:12px 0 13px;font-size:15px;line-height:1.45}
  #go .go-up{font-size:15px;line-height:1.45}
  #go .go-cta{margin-top:22px}
  #go .go-art{padding:18px 16px 16px}
  #go .go-shot{width:156px}
  #go .go-shot figcaption{font-size:12.5px}
  #go .go-shot-f{border-radius:26px;padding:5px}
  #go .go-shot img{border-radius:21px}
  #go .go-btn{flex:1 1 100%}
  #go .go-com{margin-top:36px}
  #go .go-com-t{min-height:60px;padding:12px 0;font-size:15px;gap:14px}
  #go .go-com-x{width:30px;height:30px}
  #go .go-com-x::before,#go .go-com-x::after{left:9px;top:14.5px}
  /* phones: the checkout drawn smaller (type, rows and code scale down), the points under it */
  #go .go-com-g{grid-template-columns:minmax(0,1fr);gap:18px;padding:0 0 22px}
  #go .go-co{max-width:340px;font-size:13px;box-shadow:inset 0 0 0 1px var(--ink),0 16px 32px -26px rgba(14,23,38,.3)}
  #go .go-co-bar{height:30px}
  #go .go-co-url{font-size:10px}
  #go .go-co-body{padding:12px 12px 12px}
  #go .go-co-item{padding-bottom:9px}
  #go .go-co-amt{font-size:12px}
  #go .go-co-k{margin-top:10px;font-size:9.5px}
  #go .go-co-opts{gap:5px;margin-top:7px}
  #go .go-co-opt{min-height:34px;padding:0 10px}
  #go .go-co-dot{width:13px;height:13px}
  #go .go-co-dot::after{inset:3px}
  #go .go-co-cur{width:13px;height:18px}
  #go .go-co-qr{margin-top:8px;padding:8px;gap:11px}
  #go .go-co-cw{width:60px;height:60px}
  #go .go-co-qt{gap:3px}
  #go .go-co-qt b{font-size:13px}
  #go .go-co-qa{font-size:11.5px}
  #go .go-co-wt{font-size:10px}
  @keyframes go-scan{0%{opacity:1;transform:translateY(0)}85%{opacity:1}100%{opacity:0;transform:translateY(60px)}}
  #go .go-com-pts li{font-size:14.5px;line-height:1.4;padding:9px 0 10px 20px}
  #go .go-com-pts li::before{top:18px;width:8px}
  #go .go-com-cta{margin-top:12px}
}
/* phones: the app screen sits beside the heading instead of under the list, so Go reads in about one screen */
@media (max-width:719px){
  #go .go-main{grid-template-columns:minmax(0,1fr) 128px;grid-template-areas:"k k" "h art" "pts pts" "cta cta";gap:0 16px;align-items:start}
  #go .go-copy{display:contents}
  #go .go-k{grid-area:k}
  #go .go-h{grid-area:h;align-self:center;font-size:30px;line-height:1.04}
  #go .go-pts{grid-area:pts}
  #go .go-cta{grid-area:cta}
  #go .go-art{grid-area:art;margin-top:16px;padding:0;background:none;box-shadow:none}
  #go .go-shot{width:128px}
  #go .go-shot-f{border-radius:20px;padding:4px}
  #go .go-shot img{border-radius:16px}
  #go .go-shot figcaption{margin-top:8px;font-size:11.5px;line-height:1.3;text-align:center}
}
@media (max-width:399px){
  #go .go-co-tk{display:none}
}
@media (max-width:359px){
  #go .go-main{grid-template-columns:minmax(0,1fr) 104px;gap:0 12px}
  #go .go-shot{width:104px}
  #go .go-h{font-size:26px}
}