.gpx-flow{--gpx-red: #EF3340;--gpx-flow-bg: #212121;--gpx-flow-line: rgba(255, 255, 255, .18);--gpx-flow-muted: rgba(255, 255, 255, .62);background:var(--gpx-flow-bg);color:#fff;font-family:var(--font-body-family),"SF Mono",ui-monospace,Menlo,Consolas,monospace}.gpx-flow__inner{max-width:1280px;margin:0 auto;padding:48px 16px 56px}@media(min-width:990px){.gpx-flow__inner{padding-inline:24px}}.gpx-flow .gpx-mobile-eyebrow{margin-bottom:8px}.gpx-flow__heading{margin:0 0 40px;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:#fff}.gpx-flow__stage{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.gpx-flow__step-head{margin-bottom:20px}.gpx-flow__num{display:block;font-size:1.3rem;font-weight:700;letter-spacing:.2em;color:var(--gpx-red)}.gpx-flow__step-head h3{margin:4px 0;font-size:2rem;letter-spacing:.06em;text-transform:uppercase;color:#fff}.gpx-flow__step-head p{margin:0;font-size:1.3rem;color:var(--gpx-flow-muted)}.gpx-flow__nodes{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:0;list-style:none}.gpx-flow__node{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:center;outline:none}.gpx-flow__pic{grid-row:1 / span 2;display:grid;place-items:center;aspect-ratio:4 / 3;padding:8px;border:1px solid var(--gpx-flow-line);background:#ffffff08;color:#fff;transition:border-color .2s,background .2s,box-shadow .2s}.gpx-flow__pic{--gpx-pad: 8px;position:relative;overflow:hidden}.gpx-flow__pic img{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;display:block;max-width:calc(100% - var(--gpx-pad) * 2);max-height:calc(100% - var(--gpx-pad) * 2);width:auto;height:auto;object-fit:contain;transition:filter .25s,opacity .25s}.gpx-flow__pic svg{width:44px;height:44px;transition:color .2s}.gpx-flow__node--optional .gpx-flow__pic{border-style:dashed}.gpx-flow__badge{position:absolute;top:0;left:0;z-index:2;padding:3px 8px;background:var(--gpx-red);color:#fff;font-size:1.1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.gpx-flow__name{align-self:end;font-size:1.2rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.gpx-flow__tip{align-self:start;display:block;margin-top:4px;font-size:1.2rem;line-height:1.5;color:var(--gpx-flow-muted)}.gpx-flow__tip b{display:none}.gpx-flow__tip span{display:block}.gpx-flow__link{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0}.gpx-flow__link-label{font-size:1.2rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gpx-red)}.gpx-flow__arrow{position:relative;width:2px;height:36px;background:#ffffff4d}.gpx-flow__arrow:before{content:"";position:absolute;left:50%;bottom:-2px;width:9px;height:9px;border-right:2px solid rgba(255,255,255,.65);border-bottom:2px solid rgba(255,255,255,.65);transform:translate(-50%) rotate(45deg)}.gpx-flow__arrow:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;background:linear-gradient(to bottom,transparent,var(--gpx-red),transparent) 0 -20px / 100% 20px no-repeat}.gpx-flow__stage.is-live .gpx-flow__arrow:after{opacity:1;animation:gpx-flow-pulse-y 2.8s linear infinite}@keyframes gpx-flow-pulse-y{0%{background-position:0 -20px}35%,to{background-position:0 calc(100% + 20px)}}@keyframes gpx-flow-pulse-x{0%{background-position:-30px 0}35%,to{background-position:calc(100% + 30px) 0}}.gpx-flow__legend{margin:32px 0 0;font-size:1.2rem;color:var(--gpx-flow-muted)}.gpx-flow__cta{margin:32px 0 0}.gpx-flow__cta a{display:inline-block;padding:12px 24px;border:1px solid var(--gpx-flow-line);color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:border-color .2s,background .2s}.gpx-flow__cta a:hover,.gpx-flow__cta a:focus-visible{border-color:var(--gpx-red);background:#ef334014}@media(min-width:760px){.gpx-flow{--gpx-link: 88px;--gpx-tile: clamp(68px, calc((100vw - 48px - 2 * var(--gpx-link) - 64px) / 7), 128px)}.gpx-flow__inner{padding:72px 24px 80px}.gpx-flow__stage{grid-template-columns:auto var(--gpx-link) auto var(--gpx-link) auto;justify-content:center;gap:0;align-items:start}.gpx-flow__step[data-step="1"] .gpx-flow__nodes,.gpx-flow__step[data-step="3"] .gpx-flow__nodes{grid-template-columns:repeat(3,var(--gpx-tile))}.gpx-flow__step[data-step="2"] .gpx-flow__nodes{grid-template-columns:var(--gpx-tile)}.gpx-flow__nodes{gap:28px 16px;align-content:start}.gpx-flow__step-head h3{font-size:clamp(1.3rem,1.8vw,2rem)}.gpx-flow__step-head p{font-size:clamp(1.1rem,1.2vw,1.3rem)}.gpx-flow__step[data-step="1"] .gpx-flow__step-head,.gpx-flow__step[data-step="3"] .gpx-flow__step-head{width:0;min-width:100%}.gpx-flow__step[data-step="2"] .gpx-flow__step-head{width:calc(var(--gpx-tile) + var(--gpx-link) - 12px);margin-right:calc(-1 * (var(--gpx-link) - 12px))}.gpx-flow__stage{grid-template-rows:auto auto}.gpx-flow__step{display:grid;grid-row:1 / span 2;grid-template-rows:subgrid}.gpx-flow__link{align-self:start;grid-row:2;flex-direction:column-reverse;justify-content:center;min-height:var(--gpx-tile);padding:0;white-space:nowrap}.gpx-flow__arrow{width:calc(var(--gpx-link) - 28px);height:2px}.gpx-flow__arrow:before{left:auto;right:-2px;bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}.gpx-flow__arrow:after{background:linear-gradient(to right,transparent,var(--gpx-red),transparent) -30px 0 / 30px 100% no-repeat}.gpx-flow__stage.is-live .gpx-flow__arrow:after{animation-name:gpx-flow-pulse-x}.gpx-flow__link:nth-of-type(2) .gpx-flow__arrow:after{animation-delay:.9s}.gpx-flow__node{display:block;text-align:center}.gpx-flow__pic{--gpx-pad: 12px;aspect-ratio:1 / 1;padding:0}.gpx-flow__pic svg{width:calc(var(--gpx-tile) * .42);height:calc(var(--gpx-tile) * .42)}.gpx-flow__name{display:block;margin-top:10px}}@media(min-width:760px)and (hover:hover){.gpx-flow__pic img{filter:grayscale(1) brightness(.8);opacity:.8}.gpx-flow__pic svg{color:#ffffff73}.gpx-flow__node:hover .gpx-flow__pic,.gpx-flow__node:focus-visible .gpx-flow__pic{border-color:var(--gpx-red);background:#ef334014;box-shadow:0 0 0 1px var(--gpx-red),0 10px 30px -10px #ef33408c}.gpx-flow__node:hover .gpx-flow__pic img,.gpx-flow__node:focus-visible .gpx-flow__pic img{filter:none;opacity:1}.gpx-flow__node:hover .gpx-flow__pic svg,.gpx-flow__node:focus-visible .gpx-flow__pic svg{color:#fff}.gpx-flow__tip{position:absolute;top:100%;left:50%;z-index:5;width:240px;margin-top:8px;padding:12px 14px;border:1px solid var(--gpx-red);background:#111;text-align:left;color:#fff;opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none}.gpx-flow__tip b{display:block;margin-bottom:4px;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gpx-red)}.gpx-flow__tip span{color:#ffffffd9}.gpx-flow__node:hover .gpx-flow__tip,.gpx-flow__node:focus-visible .gpx-flow__tip{opacity:1;visibility:visible;transform:translate(-50%)}.gpx-flow__step[data-step="1"] .gpx-flow__node:first-child .gpx-flow__tip{left:0;transform:translateY(4px)}.gpx-flow__step[data-step="1"] .gpx-flow__node:first-child:hover .gpx-flow__tip,.gpx-flow__step[data-step="1"] .gpx-flow__node:first-child:focus-visible .gpx-flow__tip{transform:translate(0)}.gpx-flow__step[data-step="3"] .gpx-flow__node:nth-child(3n) .gpx-flow__tip{left:auto;right:0;transform:translateY(4px)}.gpx-flow__step[data-step="3"] .gpx-flow__node:nth-child(3n):hover .gpx-flow__tip,.gpx-flow__step[data-step="3"] .gpx-flow__node:nth-child(3n):focus-visible .gpx-flow__tip{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.gpx-flow__stage.is-live .gpx-flow__arrow:after{animation:none;opacity:0}.gpx-flow__arrow{background:var(--gpx-red)}.gpx-flow__pic,.gpx-flow__pic img,.gpx-flow__tip{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/15/assets/gpx-mobile-how.css.map */