/* Structure shared by every storefront theme: the skeleton only.
   Each theme file sets the colours, the type and the character on top. */
@font-face{font-family:'PDisplay';src:url('/_p/fonts/space-grotesk-vf.woff2') format('woff2-variations');font-weight:300 700;font-display:swap}
@font-face{font-family:'PBody';src:url('/_p/fonts/inter-vf.woff2') format('woff2-variations');font-weight:100 900;font-display:swap}
@font-face{font-family:'PMono';src:url('/_p/fonts/mono-vf.woff2') format('woff2-variations');font-weight:100 800;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'PBody',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:'PDisplay','PBody',sans-serif;line-height:1.14;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.3rem,2.8vw,1.8rem);font-weight:600}
h3{font-size:1.05rem;font-weight:600}
p{margin:0 0 1em}
a{text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.mono,code{font-family:'PMono',ui-monospace,monospace;font-size:.92em}
.wrap{width:100%;max-width:1060px;margin:0 auto;padding:0 18px}
.narrow{max-width:620px}
.small{font-size:.875rem}
.tiny{font-size:.8rem}
.center{text-align:center}
.row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
main{flex:1 0 auto}

/* ---------------------------------------------------------------------------
   Header. Three zones on ONE grid: brand, nav centred in the page, end group.
   It used to be a flex row with margin:auto on two of the children, which left
   a dead gap in the middle and pinned the nav nowhere in particular.
   --------------------------------------------------------------------------- */
.p-head{position:sticky;top:0;z-index:40}
.p-head .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;height:64px}
.p-brand{display:flex;align-items:center;gap:.55rem;justify-self:start;font-family:'PDisplay',sans-serif;
  font-weight:700;font-size:1.1rem;letter-spacing:-.025em;min-width:0}
.p-brand:hover{text-decoration:none}
.p-brand-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-logo{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:.95rem;flex:0 0 auto}

.p-nav{display:flex;gap:.2rem;align-items:center;justify-self:center;font-size:.92rem;font-weight:500}
.p-nav a{padding:.5rem .8rem;border-radius:9px;white-space:nowrap;transition:background .16s ease,color .16s ease}
.p-nav a:hover{text-decoration:none}
/* The page you are on. The nav local has been passed to every view since the
   panel app was written and nothing ever read it, so no theme's .on rule had
   ever fired. */
.p-nav a.on{font-weight:700}
.p-nav-cta{display:none}

.p-end{display:flex;align-items:center;gap:.5rem;justify-self:end}

/* language: a <details> popover, so it opens and closes with no script */
.p-lang{position:relative}
.p-lang>summary{display:flex;align-items:center;gap:.35rem;height:36px;padding:0 .6rem;border-radius:9px;
  cursor:pointer;list-style:none;font-size:.84rem;font-weight:600;letter-spacing:.02em;user-select:none}
.p-lang>summary::-webkit-details-marker{display:none}
.p-lang>summary svg{display:block;flex:0 0 auto;opacity:.8}
.p-lang-pop{position:absolute;inset-inline-end:0;top:calc(100% + .45rem);z-index:50;width:210px;max-height:60vh;
  overflow-y:auto;overscroll-behavior:contain;border-radius:12px;border:1px solid;padding:.35rem;
  display:grid;gap:1px;box-shadow:0 24px 60px -18px rgba(0,0,0,.7)}
.p-lang-pop a{display:block;padding:.5rem .7rem;border-radius:8px;font-size:.88rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.p-lang-pop a:hover{text-decoration:none}

/* one call to action, styled off the operator's accent so every theme gets it */
.p-cta{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 1rem;border-radius:10px;
  font-size:.86rem;font-weight:700;white-space:nowrap;background:var(--a);color:var(--a-ink);border:1px solid transparent;
  transition:filter .16s ease,transform .16s ease}
.p-cta:hover{text-decoration:none;filter:brightness(1.08)}
.p-cta:active{transform:translateY(1px)}

/* the burger: three rules that become a cross when the panel is open.
   place-items on a flex box only sets align-items, so the three rules were
   packed against the TOP of the button and sat high in it: visible in every
   theme and unmissable in the two that draw the button as a circle. The main
   axis needs its own alignment. */
.p-burger{display:none;background:none;border:1px solid;border-radius:9px;width:38px;height:36px;cursor:pointer;
  padding:0;align-items:center;justify-content:center;gap:4px;flex-direction:column}
.p-burger span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease}
.p-burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.p-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.p-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* exchange box */
/* overflow is clipped here because several themes paint a glow or a sweep on
   .x-wrap::before that is deliberately bigger than the section. Without this a
   phone gets a sideways scroll on an otherwise fine page. */
.x-wrap{padding:clamp(2.4rem,6vw,5rem) 0;overflow:hidden}
.x-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,476px);gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
/* the badge over the headline, the way every exchange sets one */
.x-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;border-radius:100px;border:1px solid;
  font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.1rem}
.x-badge svg{display:block;flex:0 0 auto}
/* the claim line under the headline: caps, accent, separated by middots */
.x-claims{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin:.9rem 0 1rem;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.x-claims span{display:inline-flex;align-items:center}
.x-claims span+span::before{content:'\00B7';margin-right:.75rem;opacity:.5}
.x-points{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.88rem}
.x-points li{display:flex;align-items:center;gap:.45rem;opacity:.85}
.x-points li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--a);flex:0 0 auto}
.x-box{border-radius:22px;overflow:hidden}
.x-inner{padding:clamp(1.1rem,2.2vw,1.7rem)}
.x-leg{border-radius:16px;padding:1.05rem 1.15rem;display:flex;align-items:center;gap:.8rem}
.x-leg label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:.3rem}
.x-amt{width:100%;border:0;background:none;font-family:'PMono',monospace;font-size:1.5rem;font-weight:600;padding:0;outline:none;min-width:0;letter-spacing:-.02em}
/* what the leg is worth, under the figure */
.x-usd{font-size:.78rem;margin-top:.25rem;min-height:1.1em;font-variant-numeric:tabular-nums;opacity:.6}
.x-amt::-webkit-outer-spin-button,.x-amt::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.x-amt[type=number]{-moz-appearance:textfield}
.x-pick{display:flex;align-items:center;gap:.5rem;border:0;border-radius:100px;padding:.5rem .85rem .5rem .5rem;font:inherit;font-weight:700;font-size:.98rem;cursor:pointer;flex:0 0 auto;transition:transform .15s ease,background .15s ease}
.x-pick:hover{transform:translateY(-1px)}
.x-pick img{width:26px;height:26px;border-radius:50%}
.x-pick .net{font-size:.68rem;font-weight:500;opacity:.7;display:block;line-height:1.1}
.x-flip{display:flex;justify-content:center;margin:-.55rem 0;position:relative;z-index:2}
.x-flip{margin:-.75rem 0}
.x-flip button{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;cursor:pointer;font-size:1.05rem;border:1px solid;background:inherit;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .15s ease}
.x-flip button:hover{transform:rotate(180deg)}
.x-out{margin-top:.5rem}
.x-rate{display:flex;justify-content:space-between;gap:.8rem;font-size:.84rem;padding:.7rem .2rem .2rem;flex-wrap:wrap}
.x-field{margin-top:1rem}
.x-field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.3rem}
.x-field input{width:100%;border-radius:12px;padding:.85rem .95rem;font:inherit;font-size:.93rem;border:1px solid}
.x-field input:focus{outline:none}
.x-hint{font-size:.78rem;margin-top:.3rem;opacity:.75}
.x-go{width:100%;margin-top:1.2rem;border:0;border-radius:14px;padding:1.05rem;font:inherit;font-weight:700;font-size:1.02rem;cursor:pointer;letter-spacing:.01em}
.x-go[disabled]{opacity:.55;cursor:not-allowed}
.x-note{font-size:.78rem;text-align:center;margin-top:.8rem;opacity:.72}
.x-err{border-radius:10px;padding:.7rem .9rem;font-size:.87rem;margin-top:.9rem;border:1px solid}
.x-toggle{display:flex;gap:.3rem;padding:.25rem;border-radius:10px;margin-bottom:.9rem}
.x-toggle button{flex:1;border:0;background:none;font:inherit;font-size:.83rem;font-weight:600;padding:.4rem;border-radius:7px;cursor:pointer}

/* coin picker */
.cp{position:fixed;inset:0;z-index:100;display:none}
.cp.open{display:block}
.cp-back{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(3px)}
.cp-box{position:relative;max-width:420px;margin:7vh auto 0;border-radius:16px;overflow:hidden;max-height:80vh;display:flex;flex-direction:column}
.cp-search{padding:1rem;border-bottom:1px solid}
.cp-search input{width:100%;border-radius:10px;padding:.7rem .9rem;font:inherit;border:1px solid}
.cp-list{overflow-y:auto;padding:.4rem}
.cp-item{display:flex;align-items:center;gap:.7rem;width:100%;border:0;background:none;font:inherit;text-align:left;padding:.65rem .8rem;border-radius:9px;cursor:pointer}
.cp-item img{width:28px;height:28px;border-radius:50%;flex:0 0 auto}
.cp-item b{display:block;font-size:.95rem;font-weight:600}
.cp-item span{display:block;font-size:.78rem;opacity:.7}

/* live price strip. Structure only: every theme paints it its own way. */
.p-ticker{overflow:hidden;border-top:1px solid;border-bottom:1px solid}
.p-ticker[hidden]{display:none}
.p-ticker-in{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.p-ticker-row{display:flex;flex:0 0 auto;animation:p-slide 60s linear infinite}
.p-ticker-in:hover .p-ticker-row{animation-play-state:paused}
@keyframes p-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.p-tick{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;white-space:nowrap;font-size:.82rem;border-right:1px solid}
.p-tick img{width:17px;height:17px;border-radius:50%}
.p-tick b{font-weight:600}
.p-tick .px{font-family:'PMono',monospace}
.p-tick .mv{font-size:.76rem}
[dir=rtl] .p-ticker-row{animation-direction:reverse}

/* generic blocks */
.card{border-radius:14px;padding:1.3rem}
.sec{padding:clamp(2.2rem,5vw,3.4rem) 0}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid;font-size:.9rem;flex-wrap:wrap}
.kv:last-child{border-bottom:0}
.kv b{font-weight:600}
.addr{font-family:'PMono',monospace;font-size:.84rem;word-break:break-all;border-radius:9px;padding:.75rem .9rem;border:1px solid}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:10px;padding:.65rem 1.1rem;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;border:1px solid transparent}
.btn:hover{text-decoration:none}
.btn-sm{padding:.4rem .75rem;font-size:.83rem}
.btn-block{width:100%}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;padding:.25rem .6rem;border-radius:100px;border:1px solid}
.steps{display:flex;gap:.4rem;margin:1.2rem 0}
.steps div{flex:1;height:4px;border-radius:2px}
table{width:100%;border-collapse:collapse;font-size:.89rem}
th{text-align:left;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:.6rem .7rem;border-bottom:1px solid;white-space:nowrap}
td{padding:.7rem;border-bottom:1px solid}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* footer */
.p-foot{margin-top:auto;padding:2.4rem 0 2rem;font-size:.86rem}
.p-foot .fgrid{display:flex;gap:1.6rem;justify-content:space-between;flex-wrap:wrap}
.p-foot a{display:inline-block;margin-right:1rem}

@media(max-width:860px){
  .x-grid{grid-template-columns:minmax(0,1fr)}
  .x-copy{order:2}
}
/* Under 900px the nav folds into the burger panel. The call to action folds in
   with it rather than disappearing, which is what used to happen. */
@media(max-width:900px){
  .p-head .wrap{grid-template-columns:auto 1fr auto}
  /* justify-self:center survives from the desktop rule, and for an absolutely
     positioned box a self-alignment other than stretch turns inset:0 into
     shrink-to-fit. Reset it or the panel is a narrow strip in the middle. */
  .p-nav{position:absolute;inset-inline:0;top:64px;justify-self:stretch;flex-direction:column;align-items:stretch;
    gap:.1rem;padding:.5rem 18px 1rem;display:none;border-bottom:1px solid}
  .p-nav.open{display:flex}
  .p-nav a{padding:.75rem .6rem;border-radius:10px}
  /* .p-nav a {color:...} in every theme file outranks a lone .p-nav-cta, which
     left this button with muted text on a solid accent. The colours here are
     only a FALLBACK: a theme that gives its header call to action a look of
     its own repeats this selector so the phone gets the same button the
     desktop does. A visitor on a phone seeing a flat purple block where the
     desktop has the theme's own button is the same bug twice. */
  .p-nav a.p-nav-cta{display:flex;align-items:center;justify-content:center;height:auto;
    margin-top:.5rem;text-align:center;background:var(--a);color:var(--a-ink);
    font-weight:700;font-size:.95rem;padding:.85rem .6rem}
  .p-burger{display:inline-flex}
  .p-end>.p-cta{display:none}
}
@media(max-width:620px){
  .p-brand{font-size:1rem}
  .x-leg{gap:.6rem}
  .x-pick{padding:.45rem .55rem;font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.p-head,.p-foot,.noprint{display:none!important}body{background:#fff!important;color:#000!important}}

/* ---------------------------------------------------------------------------
   Sections below the exchange box. Structure and rhythm only: every theme
   paints these its own way, and several reshape them entirely.
   --------------------------------------------------------------------------- */

/* three numbers under the hero copy, read off the exchange itself */
.x-stats{display:flex;margin:1.8rem 0 0;padding:0;border-radius:16px;border:1px solid;overflow:hidden}
.x-stats div{min-width:0;flex:1;padding:.9rem 1.1rem;border-right:1px solid}
.x-stats div:last-child{border-right:0}
.x-stats dt{font-family:'PDisplay',sans-serif;font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:700;line-height:1;letter-spacing:-.02em}
.x-stats dd{margin:.3rem 0 0;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;opacity:.62}

/* section furniture */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.sec-h{margin:0}
.sec-lede{margin:.35rem 0 0;font-size:.94rem;opacity:.7;max-width:46ch}
.sec-link{font-size:.88rem;font-weight:600;white-space:nowrap}

/* how it works: a rail of four steps */
.steps-rail{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:step}
.steps-rail li{position:relative;padding-top:2.6rem}
.steps-rail li::after{content:'';position:absolute;top:1.05rem;left:2.4rem;right:-1.2rem;height:1px;opacity:.35}
.steps-rail li:last-child::after{display:none}
.step-n{position:absolute;top:0;left:0;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  font-family:'PMono',monospace;font-size:.78rem;font-weight:700;border:1px solid}
.steps-rail p{margin:0;font-size:.92rem;opacity:.82}

/* the three promises */
.why-grid{gap:1rem}
.why-card{position:relative;overflow:hidden}
.why-card h3{margin:.9rem 0 .4rem}
.why-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid}
.why-ico svg{display:block}

/* every coin, as a wall of chips */
.coin-wall{display:flex;flex-wrap:wrap;gap:.55rem}
.coin-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem .5rem .55rem;border-radius:100px;border:1px solid;font-size:.9rem}
.coin-chip:hover{text-decoration:none}
.coin-chip b{font-weight:700}
.coin-chip em{font-style:normal;font-size:.72rem;opacity:.6;margin-left:.3rem}

/* questions */
.faq details{border-bottom:1px solid}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;
  padding:1.05rem 0;font-weight:600;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:0 0 1.15rem;font-size:.93rem;opacity:.78;max-width:62ch}
.faq-x{position:relative;width:14px;height:14px;flex:0 0 auto;opacity:.6}
.faq-x::before,.faq-x::after{content:'';position:absolute;background:currentColor;transition:transform .18s ease}
.faq-x::before{top:6px;left:0;width:14px;height:2px}
.faq-x::after{top:0;left:6px;width:2px;height:14px}
.faq details[open] .faq-x::after{transform:scaleY(0)}

/* closing band */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;padding:clamp(1.4rem,3vw,2.2rem);border-radius:16px;border:1px solid}
.btn-go{background:var(--a);color:var(--a-ink);border-color:transparent;padding:.8rem 1.5rem;font-size:.95rem}

/* sections arrive as they are scrolled to. Nothing moves for anyone who has
   asked their system not to animate, and nothing is hidden without script
   either: .reveal only dims once panel.js has marked the document. */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}

@media(max-width:860px){
  .steps-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-rail li:nth-child(2)::after{display:none}
}
@media(max-width:620px){
  .x-stats{gap:1.3rem}
  .steps-rail{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .steps-rail li{padding-top:0;padding-left:3rem;min-height:2.1rem}
  .steps-rail li::after{display:none}
  .cta-band{flex-direction:column;align-items:flex-start}
  .btn-go{width:100%}
}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   The market table. Dense by design: tabular figures, tight rows, the move in
   three timeframes and a seven day line, the way a market page should read.

   It is NOT a wide table with a scrollbar on a phone. Columns drop as the width
   does, and under 620px each row becomes a three column grid: asset, line,
   price with its move beneath. Nothing is ever cut off and nothing scrolls
   sideways.
   --------------------------------------------------------------------------- */
/* The summary strip and the table are one block, so the usual padding between
   two .sec elements would open a hole in the middle of it. Two classes, because
   a theme file loads after this one and several set their own .sec padding. */
.sec.mk-top{padding-bottom:0}
.sec.mk-sec{padding-top:1.5rem}
.mk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.mk-head h1{margin:0 0 .35rem}
.mk-live{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;letter-spacing:.04em;white-space:nowrap}
.mk-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:mk-pulse 2.4s ease-in-out infinite}
@keyframes mk-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.mk-cards{display:grid;gap:.7rem;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.4rem}
.mk-card{display:block;padding:.85rem 1rem;border-radius:12px;border:1px solid}
.mk-card:hover{text-decoration:none}
.mk-card-l{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;opacity:.6;margin-bottom:.45rem}
.mk-card-m{display:flex;align-items:center;gap:.5rem;font-size:1rem}
.mk-card-m img{border-radius:50%;flex:0 0 auto}
.mk-card-m span{margin-left:auto;font-weight:600;font-size:.92rem}

.mk-tools{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.mk-find{flex:1 1 auto;min-width:0;border-radius:10px;padding:.6rem .85rem;font:inherit;font-size:.9rem;border:1px solid}
.mk-find:focus{outline:none}
.mk-count{font-size:.78rem;opacity:.6;white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-empty{font-size:.9rem;opacity:.7;padding:1.4rem 0;text-align:center}

.mk-scroll{width:100%}
.mk{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mk th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:.6rem .7rem;white-space:nowrap;border-bottom:1px solid}
.mk th.num,.mk td.num{text-align:right}
.mk th[data-mk-sort]{cursor:pointer;user-select:none}
.mk th[data-mk-sort]::after{content:'';display:inline-block;width:0;height:0;margin-left:.35rem;vertical-align:middle;opacity:0;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor}
.mk th.sort-desc::after{opacity:.8}
.mk th.sort-asc::after{opacity:.8;transform:rotate(180deg)}
.mk td{padding:.62rem .7rem;border-bottom:1px solid;font-size:.92rem;white-space:nowrap}
.mk tbody tr:last-child td{border-bottom:0}
.mk .c-rank{font-size:.8rem;opacity:.5;width:2.5rem}
.mk .c-chart{width:118px;padding-top:.3rem;padding-bottom:.3rem}
.mk .c-go{width:1%;text-align:right}

.mk-asset{display:flex;align-items:center;gap:.6rem;min-width:0}
.mk-asset:hover{text-decoration:none}
.mk-asset img{border-radius:50%;flex:0 0 auto}
.mk-asset b{font-weight:700;font-size:.95rem;display:block;line-height:1.2}
.mk-asset em{font-style:normal;font-size:.76rem;opacity:.58;display:block;line-height:1.2;
  max-width:14ch;overflow:hidden;text-overflow:ellipsis}
.mk-spark{display:block;width:108px;height:30px}
.mk-go{display:inline-flex;align-items:center;border-radius:8px;padding:.35rem .7rem;font-size:.8rem;font-weight:600;border:1px solid}
.mk-go:hover{text-decoration:none}

/* columns leave in order of how little they are missed */
@media(max-width:1040px){.mk .c-1h{display:none}}
@media(max-width:920px){.mk .c-vol{display:none}}
@media(max-width:780px){.mk .c-rank,.mk .c-cap{display:none}}

@media(max-width:620px){
  .mk-cards{grid-template-columns:1fr}
  .mk,.mk tbody,.mk tr,.mk td{display:block}
  .mk thead{display:none}
  .mk tr{display:grid;grid-template-columns:minmax(0,1fr) 72px auto;align-items:center;gap:0 .7rem;
    padding:.75rem .1rem;border-bottom:1px solid}
  .mk td{border:0;padding:0;white-space:nowrap}
  .mk .c-rank,.mk .c-1h,.mk .c-cap,.mk .c-vol,.mk .c-go{display:none}
  .mk .c-asset{grid-column:1;grid-row:1/3}
  .mk .c-chart{grid-column:2;grid-row:1/3;width:72px}
  .mk-spark{width:72px;height:26px}
  .mk .c-price{grid-column:3;grid-row:1;text-align:right;font-size:.95rem;font-weight:600}
  .mk .c-24h{grid-column:3;grid-row:2;text-align:right;font-size:.8rem}
  .mk .c-7d{display:none}
  .mk-asset em{max-width:11ch}
}

/* the deposit card: the amount, the address, and the address as a QR. The code
   keeps a light plate under it whatever the theme does, because a dark on dark
   QR is a QR that will not scan. */
.ord-dep{display:flex;gap:clamp(1rem,3vw,2rem);align-items:flex-start;margin-bottom:1.2rem}
.ord-dep-main{flex:1 1 auto;min-width:0}
.ord-amt{display:flex;align-items:center;gap:.6rem;font-family:'PMono',monospace;font-size:1.35rem;font-weight:600;margin:.4rem 0 0}
.ord-amt img{border-radius:50%;flex:0 0 auto}
.ord-qr{flex:0 0 auto;background:#fff;padding:.7rem;border-radius:12px;line-height:0}
.ord-qr svg{display:block;width:132px;height:132px}
@media(max-width:560px){
  .ord-dep{flex-direction:column-reverse;align-items:stretch}
  .ord-qr{align-self:center}
}

/* ---------------------------------------------------------------------------
   Blog and reviews. Structure only: every theme colours these itself, the same
   way it does the rest. Added 2026-10-30 with the content system.
   --------------------------------------------------------------------------- */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.bl-card{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;border-radius:16px}
.bl-card:hover{text-decoration:none}
.bl-cover{position:relative;display:block;aspect-ratio:2/1;overflow:hidden}
.bl-cover img{width:100%;height:100%;object-fit:cover;display:block}
.bl-tag{position:absolute;inset-inline-start:.7rem;top:.7rem;font-style:normal;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.25rem .55rem;border-radius:100px;
  background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(6px)}
.bl-body{display:block;padding:1.1rem}
.bl-body h2{font-size:1.06rem;margin:0 0 .4rem;line-height:1.3}
.bl-body p{margin:0 0 .6rem;font-size:.9rem;opacity:.78;line-height:1.55}
.bl-body time{font-size:.76rem;opacity:.55}
.bl-pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.8rem}

.po-h1{font-size:clamp(1.7rem,4vw,2.5rem);margin:.8rem 0 .5rem;line-height:1.14}
.po-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.82rem;opacity:.7;margin:0 0 1.3rem}
.po-cover{width:100%;height:auto;border-radius:16px;display:block;margin-bottom:1.6rem}
.po-body{font-size:1.02rem;line-height:1.75}
.po-body h2{font-size:1.3rem;margin:1.9rem 0 .6rem}
.po-body h3{font-size:1.1rem;margin:1.5rem 0 .5rem}
.po-body p{margin:0 0 1rem}
.po-body ul,.po-body ol{margin:0 0 1.1rem;padding-inline-start:1.3rem}
.po-body li{margin-bottom:.45rem}

.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.rv-card{margin:0;padding:1.2rem;border-radius:16px;display:flex;flex-direction:column;gap:.7rem}
.rv-stars{display:flex;gap:.1rem;font-size:.92rem;letter-spacing:.08em}
.rv-stars span{opacity:.25}
.rv-stars span.on{opacity:1;color:#fbbf24}
.rv-card blockquote{margin:0;font-size:.93rem;line-height:1.6;opacity:.88}
.rv-card figcaption{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.82rem;margin-top:auto}
.rv-card figcaption em{font-style:normal;opacity:.6}
.rv-pair{margin-inline-start:auto;font-size:.7rem;font-weight:700;opacity:.65;letter-spacing:.04em}
.rv-score{text-align:end}
.rv-score strong{display:block;font-size:2rem;line-height:1}

@media(max-width:960px){.bl-grid,.rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.bl-grid,.rv-grid{grid-template-columns:minmax(0,1fr)}}

/* the operator's own logo, whichever form they chose */
.p-logo-img{display:block;height:34px;width:auto;max-width:200px;object-fit:contain}
.p-wordmark{display:inline-block;line-height:1.1;white-space:nowrap}

/* ===========================================================================
   THE PREMIUM LAYER
   ---------------------------------------------------------------------------
   Everything above this line is the original skeleton. This block is the house
   style: type, rhythm, depth, motion and the atmospheric primitives the richer
   pages are built from.

   It lives in base.css on purpose. A theme file loads AFTER this one and sets
   colour, so a theme can still say anything it likes; what it inherits for free
   is the proportion, the spacing, the elevation model and the behaviour. That
   is why a change here lifts all four themes and every page at once.
   =========================================================================== */

:root{
  /* elevation: one shadow ramp, used everywhere, so depth reads consistently */
  --e1:0 1px 2px rgba(0,0,0,.28);
  --e2:0 4px 12px -2px rgba(0,0,0,.36),0 2px 4px -2px rgba(0,0,0,.24);
  --e3:0 18px 40px -12px rgba(0,0,0,.52),0 6px 14px -6px rgba(0,0,0,.34);
  --e4:0 40px 90px -24px rgba(0,0,0,.66),0 12px 28px -12px rgba(0,0,0,.42);
  /* the hairline that makes a dark surface look machined rather than flat:
     a light top edge and a darker bottom one, both barely there */
  --edge:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(0,0,0,.35);
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sp:clamp(3.5rem,8vw,7rem);   /* the vertical beat between sections */
}

/* ---- type ---------------------------------------------------------------- */
/* Hierarchy by scale and weight, not by colour. Headings are tight and large,
   body copy is set at a readable measure, and every figure on the site is
   tabular so columns of numbers line up. */
body{font-synthesis-weight:none;text-rendering:optimizeLegibility}
h1,h2,h3,h4{text-wrap:balance}
h1{font-size:clamp(2.35rem,1.4rem + 3.6vw,4.25rem);line-height:1.04;letter-spacing:-.035em;font-weight:700}
h2{font-size:clamp(1.65rem,1.1rem + 2.1vw,2.75rem);line-height:1.1;letter-spacing:-.028em;font-weight:700}
h3{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);line-height:1.22;letter-spacing:-.015em;font-weight:650}
p{text-wrap:pretty}
.lede{font-size:clamp(1.02rem,.96rem + .35vw,1.2rem);line-height:1.55;max-width:62ch}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:.9rem;opacity:.72}
.num,.x-amt,.mk td,.mk th,.stat-v,.x-stats dt{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ---- rhythm -------------------------------------------------------------- */
.sec{padding:var(--sp) 0}
.sec-tight{padding:calc(var(--sp) * .55) 0}
.sec-h{margin:0 0 .5rem}
.sec-intro{max-width:64ch;margin-bottom:clamp(2rem,4vw,3.25rem)}

/* ---- atmosphere ---------------------------------------------------------- */
/* A section can ask for depth with one class. .atmo paints an ambient field
   behind its content; the theme decides the colours by setting --atmo-1/2/3.
   Everything is painted on a ::before at z-index 0 with the content lifted to
   1, so no theme has to care about stacking. */
.atmo{position:relative;isolation:isolate;overflow:hidden}
.atmo > *{position:relative;z-index:1}
.atmo::before{content:'';position:absolute;inset:-10% -5%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 56% at 18% 18%,var(--atmo-1,rgba(120,120,180,.14)),transparent 70%),
    radial-gradient(38% 50% at 82% 12%,var(--atmo-2,rgba(90,90,160,.12)),transparent 72%),
    radial-gradient(60% 60% at 50% 108%,var(--atmo-3,rgba(80,80,140,.10)),transparent 72%);
  filter:blur(.5px)}

/* The grain. One tiny SVG, tiled, at a very low opacity: it is what stops a
   large flat dark gradient from banding on a cheap panel, and it is most of why
   an expensive looking site looks expensive. */
.grain::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;mix-blend-mode:overlay}

/* A surveyor's grid, fading out as it goes. Infrastructure, quietly stated. */
.gridfield::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--grid-ln,rgba(255,255,255,.04)) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-ln,rgba(255,255,255,.04)) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0,#000,transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 0,#000,transparent 75%)}

/* ---- surfaces ------------------------------------------------------------ */
/* Three levels, and the machined edge on all of them. */
.card{border-radius:16px;box-shadow:var(--e2),var(--edge);transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.card-lift:hover{transform:translateY(-3px);box-shadow:var(--e3),var(--edge)}
.panel{border-radius:20px;box-shadow:var(--e3),var(--edge)}
.x-box{box-shadow:var(--e4),var(--edge)}

/* A hairline that brightens where the light would fall. Used on the top edge of
   the exchange box and the closing band. */
.lit{position:relative}
.lit::after{content:'';position:absolute;left:12%;right:12%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--a,rgba(255,255,255,.6)),transparent);opacity:.55}

/* ---- data display -------------------------------------------------------- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:1px;
  border-radius:16px;overflow:hidden;box-shadow:var(--e2),var(--edge)}
.stat{padding:1.15rem 1.3rem}
.stat-l{display:block;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.6;margin-bottom:.45rem}
.stat-v{display:block;font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem);font-weight:700;line-height:1;letter-spacing:-.02em}
.stat-s{display:block;font-size:.78rem;margin-top:.35rem;opacity:.62}

/* ---- motion -------------------------------------------------------------- */
/* Interactive things move a little, quickly, and always on transform or opacity
   so nothing is laid out twice. */
.btn,.x-pick,.coin-chip,.mk-go,.p-cta,.sec-link{transition:transform .2s var(--ease),background .2s var(--ease),
  border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
.btn:hover,.p-cta:hover{transform:translateY(-1px)}
.btn:active,.p-cta:active{transform:translateY(0)}
.coin-chip:hover{transform:translateY(-2px)}
a,button{-webkit-tap-highlight-color:transparent}

/* the reveal, retimed: further, slower, and eased out rather than linear */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .reveal-d1.in{transition-delay:.08s}
.js .reveal-d2.in{transition-delay:.16s}
.js .reveal-d3.in{transition-delay:.24s}

/* A slow drift for ambient fields. Transform only, so it costs a compositor
   layer and nothing else. */
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-2.5%,0) scale(1.06)}}
.atmo::before{animation:drift 26s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .atmo::before{animation:none}
  .js .reveal{opacity:1;transform:none}
  .card,.btn,.coin-chip,.p-cta{transition:none}
}

/* ---- footer -------------------------------------------------------------- */
/* Four columns and an identity block on top, a legal bar under it. Structure
   only: the themes paint it. */
.p-foot{margin-top:auto;padding:clamp(3rem,6vw,5rem) 0 2rem;font-size:.9rem}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2.4fr);gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2rem,4vw,3rem)}
.foot-brand .p-brand{margin-bottom:.9rem}
.foot-tag{margin:0 0 .5rem;font-size:.95rem;max-width:34ch}
.foot-note{margin:0 0 .8rem;max-width:40ch;opacity:.75}
.foot-live{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.78rem;letter-spacing:.04em}
.foot-live i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;
  animation:mk-pulse 2.6s ease-in-out infinite}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:1.6rem 1.2rem}
.foot-col h2{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .9rem;opacity:.55}
.foot-col a{display:block;margin:0 0 .6rem;font-size:.9rem;font-weight:500}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding-top:1.6rem;border-top:1px solid}
.foot-legal{margin:0;line-height:1.6}
.foot-lang{margin:0}
.foot-lang select{font:inherit;font-size:.84rem;padding:.45rem .7rem;border-radius:9px;border:1px solid;
  background:transparent;color:inherit}
.foot-risk{margin:1.1rem 0 0;opacity:.6;max-width:90ch;line-height:1.6}
@media(max-width:780px){
  .foot-top{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Four cards want to be a row of four or a square of two, never three and a
   stray. auto-fit cannot express that, so this one is explicit. */
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g4{grid-template-columns:minmax(0,1fr)}}

/* ---- liveness ------------------------------------------------------------ */
/* A drifting field of specks behind everything. One fixed layer, one tile, one
   transform: the tile is 420px and the animation travels exactly 420px, so it
   loops seamlessly and costs a single compositor layer no matter how long the
   page is. A theme sets --spark to tint it.

   It is deliberately faint. The job is to stop a large dark background from
   reading as dead flat, not to put snow on the page. */
body::after{content:'';position:fixed;inset:-25% -10%;z-index:-1;pointer-events:none;opacity:.5;
  background-repeat:repeat;background-size:420px 420px;
  background-image:
    radial-gradient(1.7px 1.7px at 18% 22%,var(--spark,rgba(255,255,255,.5)) 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 62% 9%,var(--spark,rgba(255,255,255,.4)) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 84% 36%,var(--spark,rgba(255,255,255,.45)) 50%,transparent 51%),
    radial-gradient(1px 1px at 41% 52%,var(--spark,rgba(255,255,255,.35)) 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 8% 68%,var(--spark,rgba(255,255,255,.5)) 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 73% 77%,var(--spark,rgba(255,255,255,.4)) 50%,transparent 51%),
    radial-gradient(1px 1px at 33% 88%,var(--spark,rgba(255,255,255,.32)) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 62%,var(--spark,rgba(255,255,255,.42)) 50%,transparent 51%);
  animation:spark 52s linear infinite}
@keyframes spark{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-420px,0)}}

/* the surveyor's grid breathes with the field behind it */
.gridfield::before{animation:gridpan 34s ease-in-out infinite}
@keyframes gridpan{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}

/* a slow band of light crossing a section, for the hero and the closing band */
.sweep{position:relative;overflow:hidden}
.sweep::after{content:'';position:absolute;top:-60%;bottom:-60%;width:46%;pointer-events:none;z-index:0;
  background:linear-gradient(100deg,transparent,var(--sweep,rgba(255,255,255,.055)),transparent);
  transform:skewX(-14deg);animation:sweep 14s ease-in-out infinite}
@keyframes sweep{0%{left:-55%}55%,100%{left:115%}}

@media(prefers-reduced-motion:reduce){
  body::after,.gridfield::before,.sweep::after{animation:none}
  .sweep::after{display:none}
}

/* ---- background art ------------------------------------------------------
   One signature system per theme, drawn in views/panel/_fx.ejs:
     .fx-radar   obsidian    an instrument: rings, bezel, sweeping arm
     .fx-pulse   neon        a horizon with light running the rails
     .fx-silk    ghost       crisp contour lines against Ghost's soft washes
     .fx-routes  swaplords1  an aggregator braiding sources into one route
   .fx-r-<role> then tunes density and placement for where it was dropped.
   A "slice" SVG scales to COVER its box, so the layer is capped: in a tall
   sparse section an uncapped drawing balloons into foreground furniture.
   --------------------------------------------------------------------------- */
.fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  color:var(--fx,rgba(255,255,255,.5));line-height:0;height:min(100%,660px);bottom:auto}
.atmo > .fx,.sec > .fx,.x-wrap > .fx{z-index:0}
.fx svg{display:block;width:100%;height:100%}

/* role: how loud, and where it sits */
.fx-r-hero{opacity:.55}
.fx-r-infra{opacity:.34}
.fx-r-data{opacity:.3;top:auto;bottom:0;height:min(72%,440px)}
.fx-r-flow{opacity:.36}
.fx-r-assets{opacity:.34}

/* --- obsidian: the instrument ------------------------------------------- */
.fx-radar{-webkit-mask-image:radial-gradient(86% 84% at 72% 46%,#000 14%,transparent 82%);
  mask-image:radial-gradient(86% 84% at 72% 46%,#000 14%,transparent 82%)}
.fx-radar .fx-arm,.fx-radar .fx-sat,.fx-radar .fx-bezel{transform-box:view-box;transform-origin:880px 300px}
.fx-radar .fx-arm{animation:fx-spin 18s linear infinite}
.fx-radar .fx-bezel{animation:fx-spin 220s linear infinite reverse}
.fx-radar .fx-sat{animation:fx-orbit var(--dur,32s) linear infinite}
@keyframes fx-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes fx-orbit{from{transform:rotate(var(--from,0deg))}to{transform:rotate(calc(var(--from,0deg) + 360deg))}}

/* --- neon: the horizon ---------------------------------------------------- */
.fx-pulse{-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 88%,transparent)}
.fx-pulse .fx-trails path{stroke-dasharray:26 300;animation:fx-run 6s linear infinite;
  animation-delay:calc(var(--i) * -1.5s)}
@keyframes fx-run{from{stroke-dashoffset:326}to{stroke-dashoffset:0}}
.fx-pulse .fx-wave{animation:fx-slide 13s linear infinite}
.fx-pulse .fx-wave2{animation-duration:19s;animation-direction:reverse;opacity:.5}
@keyframes fx-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-240px,0,0)}}
.fx-pulse .fx-sleepers{animation:fx-breathe 9s ease-in-out infinite}
@keyframes fx-breathe{0%,100%{opacity:.85}50%{opacity:1}}

/* --- ghost: silk ---------------------------------------------------------- */
/* Crisp contours against Ghost's soft washes. The group drifts sideways while
   each line breathes on its own offset, so the field ripples rather than slides
   as one sheet. */
.fx-silk{opacity:1;-webkit-mask-image:radial-gradient(96% 96% at 50% 46%,#000 26%,transparent 94%);
  mask-image:radial-gradient(96% 96% at 50% 46%,#000 26%,transparent 94%)}
.fx-r-hero.fx-silk{opacity:1}
.fx-r-infra.fx-silk,.fx-r-data.fx-silk,.fx-r-flow.fx-silk,.fx-r-assets.fx-silk{opacity:.7}
.fx-silk .fx-silk-g{animation:fx-silkpan 46s linear infinite}
@keyframes fx-silkpan{from{transform:translate3d(0,0,0)}to{transform:translate3d(200px,0,0)}}
.fx-silk .fx-silk-l{transform-box:view-box;transform-origin:center;
  animation:fx-silkwave 11s ease-in-out infinite;animation-delay:calc(var(--i) * -.28s)}
@keyframes fx-silkwave{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.fx-silk .fx-spark{transform-box:fill-box;transform-origin:center;
  animation:fx-sparkle 6.5s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s)}
@keyframes fx-sparkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.9;transform:scale(1.5)}}

/* --- swaplords 1: the routing fan ---------------------------------------- */
.fx-routes{-webkit-mask-image:radial-gradient(96% 88% at 56% 50%,#000 24%,transparent 90%);
  mask-image:radial-gradient(96% 88% at 56% 50%,#000 24%,transparent 90%)}
.fx-routes .fx-flow path{stroke-dasharray:18 900;animation:fx-send 7s linear infinite;
  animation-delay:calc(var(--i) * -.85s)}
@keyframes fx-send{from{stroke-dashoffset:918}to{stroke-dashoffset:0}}
.fx-routes .fx-hub{transform-box:fill-box;transform-origin:center;animation:fx-ping 4.5s ease-out infinite}
.fx-routes .fx-hub2{animation-delay:-2.2s}
@keyframes fx-ping{0%{transform:scale(.75);opacity:.8}70%,100%{transform:scale(1.5);opacity:0}}
.fx-routes .fx-way{transform-box:fill-box;transform-origin:center;
  animation:fx-blink 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}
@keyframes fx-blink{0%,100%{opacity:.25}50%{opacity:.9}}

@media(max-width:620px){.fx{opacity:.22}}
@media(prefers-reduced-motion:reduce){
  .fx *{animation:none!important}
  .fx-pulse .fx-trails path,.fx-routes .fx-flow path{stroke-dasharray:none}
}

/* ---------------------------------------------------------------------------
   CONTENT SITS ABOVE THE ART. Do not delete this: a positioned .fx at z-index 0
   paints ABOVE a static sibling, because positioned boxes beat non positioned
   ones in the same stacking context whatever the z-index says. Without these
   two lines the background drawing covers the copy and the exchange box.
   It has been lost once already, to a careless slice through this file.
   --------------------------------------------------------------------------- */
.sec,.x-wrap,.sec-cta{position:relative}
.sec > .wrap,.x-wrap > .wrap,.sec-cta > .wrap,.sec > .faq,.x-wrap > .x-grid{position:relative;z-index:1}