/* Payora Front — programmatic SEO pages (coins, stablecoins, networks, use cases, intents, CMS
   modules, coin×CMS, glossary, comparisons, alternatives), the /accept-crypto directory and 404.
   Prefix fxs-. Tokens only; colour carries meaning (emerald = live/ok, amber = beta/wait). */

/* ---------------------------------------------------------------- hero */
.fxs-hero .fx-h1{font-size:clamp(38px,5.2vw,72px)}
@media (min-width:1181px){.fxs-hero.fx-hero-split .fx-hero-in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.fxs-hero-c .fx-hero-copy{max-width:1040px}
.fxs-hero .fx-hero-aside{display:flex;justify-content:flex-end}

/* ---------------------------------------------------------------- live panel */
.fxs-live{position:relative;width:100%;max-width:470px;display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--raise) 92%,transparent);border:1px solid var(--line);box-shadow:var(--shadow-3);isolation:isolate;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.fxs-live::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:linear-gradient(140deg,color-mix(in srgb,var(--sapphire) 45%,transparent),transparent 38%,transparent 62%,color-mix(in srgb,var(--ruby) 35%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.fxs-live::after{content:"";position:absolute;right:-60px;top:-70px;width:220px;height:220px;border-radius:50%;background:var(--sky-a);filter:blur(50px);z-index:-2;animation:fx-drift-b 18s var(--ease) infinite alternate}
.fxs-live-top{display:flex;align-items:center;gap:14px}
.fxs-live-top .fx-coin{animation:fxs-float 6s var(--ease) infinite alternate}
@keyframes fxs-float{to{transform:translateY(-4px) rotate(-6deg)}}
.fxs-live-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.fxs-live-id b{font:560 21px/1.1 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.fxs-live-id small{font-size:12.5px;color:var(--faint)}
.fxs-live-chip{flex:none;gap:7px}
.fxs-live-chip .fx-pulse{width:7px;height:7px}
.fxs-dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fxs-dl-r{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.fxs-dl dt{font:600 11px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fxs-dl dd{margin:0;font-size:15px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.fxs-dl-fee{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;background:linear-gradient(100deg,var(--surface),color-mix(in srgb,var(--emerald-s) 70%,var(--surface)))}
.fxs-dl-fee dd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.fxs-dl-fee dd b{font-size:26px;letter-spacing:-.03em;color:var(--emerald)}
.fxs-dl-fee dd small{font-size:12px;color:var(--faint)}
.fxs-live-note{font-size:13px;line-height:1.55;color:var(--muted)}
.fxs-live-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.fxs-live-act .fx-btn-soft{gap:7px}
.fxs-live-more{font-size:14px;gap:6px}
.fxs-live-ago{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--f-mono);color:var(--faint);padding-top:12px;border-top:1px dashed var(--line-2)}
.fxs-live-ago .fx-pulse{width:6px;height:6px}

/* list variant (USDT/USDC across networks, a network's coins) */
.fxs-cl-h{display:grid;grid-template-columns:minmax(0,1fr) 54px 84px;gap:10px;padding:0 12px 0 16px;font:600 11.5px/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.fxs-cl-h span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxs-cl-h span:nth-child(n+2){text-align:right}
.fxs-cl{list-style:none;margin:-8px 0 0;padding:4px;display:flex;flex-direction:column;gap:2px;max-height:360px;overflow:auto;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);scrollbar-width:thin}
.fxs-cl li{display:grid;grid-template-columns:28px minmax(0,1fr) 54px 84px;align-items:center;gap:10px;padding:8px;border-radius:12px;transition:background .2s;
  animation:fxs-in .6s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes fxs-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.fxs-cl li:hover{background:var(--surface)}
.fxs-cl-n{display:flex;flex-direction:column;min-width:0}
.fxs-cl-n b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fxs-cl-n small{font-size:11px;color:var(--faint)}
.fxs-cl-c{text-align:right;font-size:13px;color:var(--muted)}
.fxs-cl-f{text-align:right;font-size:14px;font-weight:600;color:var(--emerald)}

/* ---------------------------------------------------------------- why */
.fxs-why{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.fxs-why-solo{grid-template-columns:minmax(0,1fr);max-width:860px}
.fxs-why-copy{display:flex;flex-direction:column;gap:22px}
.fxs-paras{display:flex;flex-direction:column;gap:16px;font-size:17px;line-height:1.72;color:var(--ink-2);max-width:66ch}
.fxs-paras p.fxs-first{font-size:clamp(18px,1.6vw,20px);line-height:1.6;color:var(--ink)}
.fxs-paras strong{color:var(--ink);background:linear-gradient(transparent 62%,var(--amethyst-s) 62%)}
.fxs-why-list{padding:28px}
.fxs-why-list:hover{transform:none}
.fxs-why-list .fx-checks li{padding-bottom:12px;border-bottom:1px dashed var(--line)}
.fxs-why-list .fx-checks li:last-child{border-bottom:0;padding-bottom:0}

/* ---------------------------------------------------------------- steps */
.fxs-steps-h .fx-lead strong{color:var(--ink)}
.fxs-steps-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:start}
.fxs-vsteps .fx-steps{grid-template-columns:minmax(0,1fr);gap:26px}
.fxs-vsteps .fx-steps::before,.fxs-vsteps .fx-steps::after{top:28px;bottom:28px;left:27px;right:auto;width:2px;height:auto}
.fxs-vsteps .fx-steps::after{height:0;transition:height 1.6s var(--ease-out) .2s}
.fxs-vsteps .fx-steps.is-in::after{width:2px;height:calc(100% - 56px)}
.fxs-vsteps .fx-step{flex-direction:row;align-items:flex-start;gap:18px}
.fxs-steps-side{display:flex;justify-content:flex-end}
.fx-step p code{white-space:nowrap}

/* ---------------------------------------------------------------- modules card */
.fxs-mods{gap:12px}
.fxs-mod{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.fxs-mod-h{display:flex;align-items:center;gap:12px}
.fxs-mod-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.fxs-mod-t b{font:560 17px/1.2 var(--f-display);letter-spacing:-.02em}
.fxs-mod-t small{font-size:12.5px;color:var(--muted)}
.fxs-mod-cb{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--surface-2);border:1px dashed var(--line-2);min-width:0}
.fxs-mod-cb>span{font:600 11.5px/1.2 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);flex:none}
.fxs-mod-cb code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;padding:0;font-size:12.5px}
.fxs-copy{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.fxs-copy:hover{border-color:var(--line-3);color:var(--ink)}
.fxs-copy.is-done{color:var(--emerald);border-color:var(--emerald)}
.fxs-mod-f{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.fxs-mod-f .fx-btn{gap:7px}
.fxs-mod-m{font-size:12px;color:var(--faint);overflow-wrap:anywhere}

/* ---------------------------------------------------------------- related */
.fxs-rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.fxs-rel-i{position:relative;display:flex;align-items:center;gap:14px;padding:18px 18px 18px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .45s var(--ease-out),box-shadow .35s var(--ease),border-color .3s}
.fxs-rel-i:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.fxs-rel-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--sapphire-s);color:var(--sapphire);transition:transform .45s var(--spring)}
.fxs-rel-i:hover .fxs-rel-ic{transform:rotate(-8deg) scale(1.06)}
.fxs-rel-t{flex:1;min-width:0;font-weight:560;font-size:15px;line-height:1.35;color:var(--ink)}
.fxs-rel-arr{flex:none;color:var(--faint);transition:transform .35s var(--spring),color .2s}
.fxs-rel-i:hover .fxs-rel-arr{transform:translateX(4px);color:var(--sapphire)}

/* ---------------------------------------------------------------- coin rail */
.fxs-rail{padding:clamp(40px,6vw,80px) 0}
.fxs-rail-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.fxs-rail-h>div{display:flex;flex-direction:column;gap:10px}
.fxs-marquee .fx-marquee-track{padding:6px 0}
.fxs-dup{display:contents}
.fxs-pill{height:56px;gap:12px;padding:0 16px 0 10px;transition:border-color .2s,transform .35s var(--ease-out)}
a.fxs-pill:hover{border-color:var(--line-3);transform:translateY(-2px)}
.fxs-pill-n{display:flex;flex-direction:column;line-height:1.15}
.fxs-pill-n b{font-size:14px;color:var(--ink)}
.fxs-pill-n small{font-size:11.5px;color:var(--faint);font-weight:400}
.fxs-pill-f{font-size:13px;font-weight:600;color:var(--emerald);padding-left:10px;border-left:1px solid var(--line)}

/* ---------------------------------------------------------------- versus + comparison table */
.fxs-versus{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;width:100%;max-width:520px}
.fxs-vs-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 18px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);min-width:0}
.fxs-vs-card b{font:560 20px/1.15 var(--f-display);letter-spacing:-.03em;overflow-wrap:anywhere}
.fxs-vs-card small{font-size:13px;line-height:1.4;color:var(--muted)}
.fxs-vs-us{border-color:transparent;box-shadow:var(--glow),var(--shadow-3);position:relative;isolation:isolate;animation:fxs-float 7s var(--ease) infinite alternate}
.fxs-vs-us::before{content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:inherit;background:var(--jewel)}
.fxs-vs-us::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--surface)}
.fxs-vs-us small{font:600 26px/1 var(--f-display);letter-spacing:-.04em;background:var(--jewel-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.fxs-vs-them{opacity:.9;transform:translateY(18px)}
.fxs-vs-mono{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font:600 20px/1 var(--f-display);color:var(--muted);background:var(--surface-2);border:1px solid var(--line-2)}
.fxs-vs-x{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink);background:var(--raise);border:1px solid var(--line-2);box-shadow:var(--shadow-1)}

.fxs-cmp{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.fxs-cmp-copy{display:flex;flex-direction:column;gap:20px;max-width:880px}
.fxs-table{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-2)}
.fxs-t{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px}
.fxs-t thead th{position:sticky;top:var(--nav-h);z-index:2;background:color-mix(in srgb,var(--surface-2) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);font:600 12px/1.2 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.fxs-t thead th:first-child{border-top-left-radius:var(--r-lg);width:28%}
.fxs-t thead th:last-child{border-top-right-radius:var(--r-lg)}
.fxs-t thead th.fxs-t-us{color:var(--ink);font-size:14px;letter-spacing:-.01em;text-transform:none;font-family:var(--f-display)}
.fxs-t-brand{display:inline-flex;align-items:center;gap:8px}
.fxs-t tbody th,.fxs-t tbody td{padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.fxs-t tbody tr:last-child th,.fxs-t tbody tr:last-child td{border-bottom:0}
.fxs-t tbody th{font-weight:500;color:var(--muted);font-size:14.5px}
.fxs-t td.fxs-t-us{background:linear-gradient(90deg,var(--sapphire-s),transparent 85%);color:var(--ink);font-weight:600}
.fxs-t td.fxs-t-us{display:table-cell}
.fxs-t td.fxs-t-us>span:last-child{vertical-align:middle}
.fxs-t-ok{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:7px;background:var(--emerald-s);color:var(--emerald);margin-right:10px;vertical-align:middle}
.fxs-t td.fxs-t-them{color:var(--muted)}
.fxs-t tbody tr{transition:background .2s}
.fxs-t tbody tr:hover{background:var(--surface-2)}
.fxs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.fxs-verdict{display:flex;gap:22px;align-items:flex-start;padding:clamp(24px,4vw,40px);max-width:980px;margin:0 auto}
.fxs-verdict:hover{transform:none}
.fxs-verdict>div{display:flex;flex-direction:column;gap:12px}
.fxs-verdict p{font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.fxs-verdict .fx-tile{flex:none;width:52px;height:52px}

/* ---------------------------------------------------------------- directory (hub + 404) */
.fxs-dir{padding-top:clamp(12px,2vw,24px)}
.fxs-find-bar{position:static;display:flex;flex-direction:column;gap:12px;padding:14px 0;margin-bottom:10px;
  background:linear-gradient(180deg,var(--bg) 78%,color-mix(in srgb,var(--bg) 0%,transparent))}
.fxs-search{position:relative;height:56px;min-width:0;width:100%;padding:0 18px;border-radius:18px;box-shadow:var(--shadow-1)}
.fxs-search input{font-size:17px}
.fxs-search kbd{flex:none;font-size:12px;color:var(--faint);border:1px solid var(--line-2);border-radius:6px;padding:2px 7px;background:var(--surface-2)}
.fxs-search:focus-within kbd{opacity:0}
.fxs-chips .fx-fchip i{font-style:normal;font-size:11.5px;opacity:.6;margin-left:3px}
.fxs-chips .fx-fchip i:empty{display:none}
.fxs-groups{display:flex;flex-direction:column;gap:clamp(30px,4vw,48px)}
.fxs-grp{scroll-margin-top:calc(var(--nav-h) + 140px)}
.fxs-grp-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fxs-grp-h .fx-tile{width:38px;height:38px;border-radius:12px}
.fxs-grp-n{font-size:12px;color:var(--faint);padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.fxs-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.fxs-link{position:relative;display:flex;align-items:center;gap:11px;min-height:52px;padding:9px 34px 9px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  font-size:14.5px;font-weight:500;line-height:1.3;color:var(--ink-2);transition:border-color .2s,transform .35s var(--ease-out),box-shadow .3s,color .2s}
.fxs-link::after{content:"→";position:absolute;right:13px;top:50%;transform:translate(-4px,-50%);opacity:0;color:var(--sapphire);transition:opacity .2s,transform .35s var(--spring)}
.fxs-link:hover{border-color:var(--line-3);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.fxs-link:hover::after{opacity:1;transform:translate(0,-50%)}
.fxs-link .fx-coin{--cs:26px}
.fxs-link-dot{flex:none;width:26px;height:26px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);position:relative}
.fxs-link-dot::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--jewel)}
.fxs-find mark{background:var(--amber-s);color:inherit;border-radius:3px;padding:0 1px}
/* 404: results appear on typing; without JS the whole directory stays readable */
html.fx-js .fxs-find-lazy .fxs-groups:not(.is-q){display:none}
.fxs-404 .fxs-find-bar{position:static;background:none}

/* ---------------------------------------------------------------- responsive */
@media (min-width:981px) and (max-width:1180px){
  .fxs-hero.fx-hero-split .fx-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:980px){
  .fxs-hero.fx-hero-split .fx-hero-in{grid-template-columns:minmax(0,1fr)}
  .fxs-hero .fx-hero-aside{justify-content:flex-start}
  .fxs-live,.fxs-versus{max-width:560px}
  .fxs-why,.fxs-steps-split{grid-template-columns:minmax(0,1fr)}
  .fxs-why-list,.fxs-steps-side{position:static}
  .fxs-steps-side{justify-content:flex-start}
}
@media (max-width:720px){
  .fxs-live{padding:18px;border-radius:var(--r-lg)}
  .fxs-dl-fee dd b{font-size:22px}
  .fxs-cl li{grid-template-columns:26px minmax(0,1fr) 40px 74px;gap:8px}
  .fxs-cl-h{grid-template-columns:minmax(0,1fr) 40px 74px;gap:8px;padding:0 12px 0 16px}
  .fxs-vs-card b{font-size:16px;overflow-wrap:normal;word-break:normal;hyphens:auto}
  .fxs-vs-card{padding:20px 12px}
  .fxs-vs-them{transform:translateY(10px)}
  .fxs-versus{gap:8px}
  .fxs-vs-x{width:36px;height:36px;font-size:12px}
  /* comparison table → one card per criterion, Payora and competitor side by side */
  .fxs-table{background:none;border:0;box-shadow:none}
  .fxs-t,.fxs-t tbody,.fxs-t tr{display:block}
  .fxs-t thead{display:none}
  .fxs-t tbody{display:flex;flex-direction:column;gap:10px}
  .fxs-t tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
  .fxs-t tbody th{grid-column:1/-1;padding:12px 16px;border-bottom:1px solid var(--line)!important;background:var(--surface-2);font:600 11.5px/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
  .fxs-t tbody td{display:block!important;padding:12px 16px 14px;border-bottom:0;font-size:14.5px}
  .fxs-t tbody td::before{content:attr(data-label);display:block;margin-bottom:6px;font:600 11px/1.2 var(--f-mono);letter-spacing:.04em;color:var(--faint);text-transform:none}
  .fxs-t td.fxs-t-us{border-right:1px solid var(--line)}
  .fxs-t-ok{width:18px;height:18px;margin-right:6px}
  .fxs-verdict{flex-direction:column;gap:14px}
  .fxs-links{grid-template-columns:minmax(0,1fr)}
  .fxs-find-bar{padding:10px 0}
  .fxs-search{height:50px}
  .fxs-search kbd{display:none}
  .fxs-rel{grid-template-columns:minmax(0,1fr)}
  .fxs-pill{height:50px}
}

@media (max-width:720px){.fxs-live::after{right:0;top:-40px;width:160px;height:160px}}