/* simpleswapvschangelly.net */
:root{
  --bg:#f4f3f0;--surface:#fff;--ink:#0c0f14;--ink-2:#3a414d;--muted:#6b7380;--line:#e4e2dd;--line-2:#d6d3cc;
  --dark:#0a0d14;--dark-2:#121723;--dark-line:rgba(255,255,255,.09);--on-dark:#e8ecf3;--on-dark-2:#9aa3b2;
  --ss:#2f62ff;--ss-ink:#1747d6;--cl:#26b36a;--cl-ink:#138a4c;--warn:#b4541a;
  --r:20px;--r-lg:28px;--display:'Inter Tight','Inter',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.62 var(--body);font-feature-settings:"cv11","ss01"}
a{color:var(--ss-ink);text-decoration-thickness:1px;text-underline-offset:3px}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:820px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.035em}
h1{font-size:clamp(36px,6vw,72px);line-height:.98;font-weight:700;margin:16px auto 22px;max-width:14em}
h2{font-size:clamp(26px,3.2vw,38px);line-height:1.08;font-weight:700;margin:76px 0 18px}
h3{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.02em;margin:24px 0 8px}
p{margin:0 0 14px}
:focus-visible{outline:2px solid var(--ss);outline-offset:3px;border-radius:6px}

/* header: restrained glass */
.top{position:sticky;top:0;z-index:20;background:rgba(10,13,20,.94);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--dark-line)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:64px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font:600 15.5px/1 var(--display);letter-spacing:-.02em}
.brand img{border-radius:6px}
.brand img[src$=".svg"]{background:#fff;padding:3px 4px;width:24px;height:26px}
.brand i{font:500 11px/1 var(--body);font-style:normal;color:var(--on-dark-2);border:1px solid var(--dark-line);border-radius:999px;padding:4px 7px}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap}
.nav a{display:block;padding:8px 12px;border-radius:999px;color:var(--on-dark-2);text-decoration:none;font:500 14px/1 var(--body);transition:color .2s var(--ease),background .2s var(--ease)}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#fff;background:rgba(255,255,255,.1)}

/* hero: dark, soft duotone glow (blue = SimpleSwap, green = Changelly) */
.page{padding:0 0 40px}
.hero{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark);text-align:center;padding:56px 0 64px;border-radius:0 0 var(--r-lg) var(--r-lg)}
.hero::before{content:"";position:absolute;inset:-30% -10% auto;height:120%;pointer-events:none;
  background:radial-gradient(520px 320px at 22% 18%,rgba(47,98,255,.38),transparent 70%),radial-gradient(460px 300px at 82% 30%,rgba(38,179,106,.22),transparent 70%)}
.hero .wrap{position:relative}
.hero h1{color:#fff}
.crumbs{font-size:13.5px;color:var(--on-dark-2);display:flex;gap:8px;justify-content:center}.crumbs a{color:var(--on-dark)}
.hero .direct-answer{max-width:720px;margin:0 auto 28px;font-size:18px;line-height:1.6;color:var(--on-dark)}
.hero .direct-answer a{color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:16px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease)}
.pill.dark{background:#fff;color:var(--ink)}
.pill.dark:hover{background:#dfe6ff}
.pill.line{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.pill.line:hover{background:rgba(255,255,255,.08)}
.meta{font-size:13px;color:var(--on-dark-2);margin:0}

/* hero bento */
.bento-key{display:flex;justify-content:center;gap:18px;margin:44px 0 14px;font-size:13px;color:var(--on-dark-2)}
.bento-key span{display:inline-flex;align-items:center;gap:7px}
.bento-key i,.b-r i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.ss i{background:var(--ss)}.cl i{background:var(--cl)}
.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:left}
.bento li{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px}
.bento li.wide{grid-column:span 2;grid-row:span 2;justify-content:flex-end}
.b-l{font-size:12.5px;color:var(--on-dark-2);font-weight:500;margin-bottom:auto}
.b-r{display:flex;align-items:center;gap:9px;font:600 20px/1.15 var(--display);letter-spacing:-.025em;color:#fff}
.bento li.wide .b-r{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em}
.bento li.wide .b-r i{width:12px;height:12px}
.bento-note{font-size:12px;color:var(--on-dark-2);margin:12px 0 0;text-align:left}

/* on-this-page */
.toc{margin:22px 0 0}
.toc .wrap{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center}
.toc span{font:600 11.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.toc a{border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;color:var(--ink-2);text-decoration:none;font-size:13.5px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.toc a:hover{border-color:var(--ink);background:var(--surface)}

/* badges */
.who{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--display);letter-spacing:-.015em;color:var(--ink)}
.who img{width:22px;height:22px;border-radius:6px;object-fit:contain}

/* tables */
.tbl{overflow-x:auto;margin:20px 0 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px}
caption{caption-side:bottom;text-align:left;padding:12px 20px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}
th,td{padding:14px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{font-weight:600;border-bottom:1px solid var(--line-2)}
table.cmp thead th:nth-child(2){box-shadow:inset 0 3px 0 var(--ss)}
table.cmp thead th:nth-child(3){box-shadow:inset 0 3px 0 var(--cl)}
tbody th{font-weight:600;color:var(--ink);width:24%}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s var(--ease)}
tbody tr:hover{background:#faf9f7}
.src{font-size:11.5px;color:var(--muted);white-space:nowrap}
table.alts tr.hl th{box-shadow:inset 3px 0 0 var(--ss)}
.svc{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;text-decoration:none}
.svc img{border-radius:7px;width:28px;height:28px;object-fit:contain}

/* definition: dark tile */
.define{background:var(--dark);color:var(--on-dark);border-radius:var(--r);padding:24px 26px;margin:26px 0}
.define dfn{display:block;font:600 13px/1 var(--body);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#8fa9ff;margin-bottom:10px}
.define p{margin:0}

/* fact tiles: neutral, hue only as identity dot */
.facts{list-style:none;margin:22px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.facts li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px;display:flex;flex-direction:column;gap:6px;position:relative}
.facts li::before{content:"";position:absolute;top:22px;right:22px;width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.facts li.ss::before{background:var(--ss)}.facts li.cl::before{background:var(--cl)}
.facts b{font:700 clamp(30px,3.4vw,40px)/1.02 var(--display);letter-spacing:-.04em;padding-right:24px}
.facts span{font-size:14.5px;color:var(--ink-2)}
.facts a{font-size:12px;color:var(--muted);margin-top:8px}

/* two-sided cards */
.cols{display:grid;gap:10px;margin:22px 0}
.cols.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 10px}
.col.ss{box-shadow:inset 0 3px 0 var(--ss)}.col.cl{box-shadow:inset 0 3px 0 var(--cl)}
.col h3{margin:12px 0 4px;font-size:17px}
.col ul{list-style:none;padding:0;margin:14px 0 0}
.col li{position:relative;padding-left:26px;margin:0 0 11px;font-size:15px}
.col li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f62ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}
.col.cl li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326b36a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.col.neutral li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0f14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* lists */
.points{list-style:none;margin:18px 0;padding:0;border-top:1px solid var(--line)}
.points li{display:flex;gap:14px;padding:16px 2px;border-bottom:1px solid var(--line)}
.points .ico{flex:none;width:20px;height:20px;color:var(--ink);margin-top:3px}
.steps{list-style:none;margin:22px 0;padding:0;display:grid;gap:8px}
.steps li{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.st-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:600 13.5px/1 var(--display)}
.steps p{margin:4px 0 0;font-size:15px;color:var(--ink-2)}

/* myths */
.myths{display:grid;gap:10px;margin:22px 0}
.myth{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.myth p{margin:0;padding:18px 20px;font-size:15px}
.myth .m-q{border-right:1px solid var(--line);color:var(--ink-2)}
.myth span{display:block;font:600 11.5px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px}
.m-q span{color:var(--warn)}.m-a span{color:var(--cl-ink)}

.callout,.takeaway{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r);padding:18px 20px;margin:22px 0;background:var(--surface);border:1px solid var(--line)}
.callout{box-shadow:inset 3px 0 0 var(--ss)}.takeaway{box-shadow:inset 3px 0 0 var(--cl)}
.callout .ico,.takeaway .ico{flex:none;width:22px;height:22px;color:var(--ink)}
.callout p,.takeaway p{margin:4px 0 0}.takeaway p{margin:0;font-weight:500}

/* lock bars */
.lockbars{margin:22px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.lockbars figcaption{font:600 17px/1.2 var(--display);letter-spacing:-.02em;margin-bottom:16px}
.lockbars ol{list-style:none;margin:0;padding:0}
.lockbars li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 16px;align-items:center;margin:0 0 14px}
.lb-n{font-weight:600;font-size:14.5px}
.lb-t{height:10px;background:#eeece7;border-radius:999px;overflow:hidden}
.lb-t i{display:block;height:100%;border-radius:999px;background:var(--ss)}
.lockbars li.cl .lb-t i{background:var(--cl)}
.lb-v{grid-column:2;font-size:13px;color:var(--muted)}
.fine{font-size:12px;color:var(--muted);margin:4px 0 0}

/* trust */
.tcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px}
.tcard.ss{box-shadow:inset 0 3px 0 var(--ss)}.tcard.cl{box-shadow:inset 0 3px 0 var(--cl)}
.tscore{display:flex;align-items:center;gap:12px;min-height:44px}
.tscore b{font:700 44px/1 var(--display);letter-spacing:-.04em}
.stars{--v:0%;width:120px;height:22px;background:linear-gradient(90deg,#00b67a var(--v),#d9d6cf var(--v));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cg%3E%3Cpath d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3Cpath transform='translate(24.5)' d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3Cpath transform='translate(49)' d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3Cpath transform='translate(73.5)' d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3Cpath transform='translate(98)' d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cg%3E%3Cpath d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3Cpath transform='translate(24.5)' d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3Cpath transform='translate(49)' d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3Cpath transform='translate(73.5)' d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3Cpath transform='translate(98)' d='M11 1l3 6.5 7 .8-5.2 4.8 1.4 7L11 16.6 4.8 20.1l1.4-7L1 8.3l7-.8z'/%3E%3C/g%3E%3C/svg%3E") no-repeat}
.hidden-score{font-weight:600;color:var(--warn);border:1px solid #efd2bd;border-radius:999px;padding:7px 13px;font-size:13.5px}
.tnum{font-size:14.5px;color:var(--ink-2)}.tnum b{font:700 22px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.tcard p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* next cards */
.next{list-style:none;margin:22px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.next a{display:flex;flex-direction:column;gap:28px;height:100%;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--ink);position:relative;transition:border-color .2s var(--ease),background .2s var(--ease)}
.next a:hover{border-color:var(--ink)}
.next b{font:600 17px/1.25 var(--display);letter-spacing:-.02em;padding-right:44px}
.n-ico .ico{width:22px;height:22px;color:var(--muted)}
.n-go{position:absolute;right:16px;bottom:16px;width:34px;height:34px;border-radius:50%;background:var(--bg);display:grid;place-items:center;transition:background .2s var(--ease),color .2s var(--ease)}
.next a:hover .n-go{background:var(--ink);color:#fff}
.n-go .ico{width:16px;height:16px}

/* quotes band */
.quotes{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:34px 0;padding:34px 24px;border-radius:var(--r-lg);background:var(--dark);color:#fff;text-align:center}
.quotes::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px 200px at 15% 0%,rgba(47,98,255,.35),transparent 70%),radial-gradient(320px 200px at 90% 100%,rgba(38,179,106,.22),transparent 70%)}
.quotes>*{position:relative}
.quotes span{width:100%;font:700 clamp(22px,2.8vw,30px)/1.15 var(--display);letter-spacing:-.03em;margin-bottom:8px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none}
.btn.ss{background:#fff;color:var(--ink)}.btn.cl{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.ico.s{width:16px;height:16px}

/* calc */
.calc{margin:22px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.calc-in{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc label{display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:600}
.calc input{font:600 22px/1 var(--display);letter-spacing:-.02em;padding:14px 16px;border:1px solid var(--line-2);border-radius:14px;width:100%;color:var(--ink);background:var(--bg);transition:border-color .2s var(--ease)}
.calc input:focus{outline:none;border-color:var(--ss);background:#fff}
.calc-out{display:block;margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--dark);color:#fff;font-weight:500;font-size:15px}
.calc figcaption{font-size:12.5px;color:var(--muted);margin-top:10px}

/* faq */
.qa{border-bottom:1px solid var(--line)}
.qa:first-of-type{border-top:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:20px 56px 20px 2px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa h3{margin:0;font-size:18px}
.qa-body{padding:0 2px 12px;color:var(--ink-2)}
.tip{border-bottom:1px dotted var(--ink);cursor:help}

/* sources + footer */
.sources{margin-top:60px;padding-top:22px;border-top:1px solid var(--line-2)}
.sources h2{font-size:15px;margin:0 0 12px;letter-spacing:-.01em}
.sources ul{margin:0;padding-left:18px;columns:2;column-gap:28px;font-size:13.5px;color:var(--muted)}
.sources li{break-inside:avoid;margin:0 0 6px}
.foot{background:var(--dark);color:var(--on-dark-2);font-size:13.5px;padding:44px 0 32px;margin-top:40px}
.foot a{color:var(--on-dark)}
.foot-top{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--dark-line)}
.foot-nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-nav a{text-decoration:none}
.copy{color:#6c7586}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:980px){.nav{margin-left:0;width:100%}.top .wrap{padding-top:10px;padding-bottom:10px}.next{grid-template-columns:repeat(2,minmax(0,1fr))}.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .top{position:static;overflow:hidden}
  .nav{min-width:0;max-width:100%}.nav ul{max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav a{white-space:nowrap}
  .hero{padding:36px 0 40px;border-radius:0 0 22px 22px}
  .hero .direct-answer{font-size:16.5px}
  .pill{width:100%}
  .bento li.wide{grid-column:span 2;grid-row:auto}
  .toc .wrap{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .toc a{white-space:nowrap}
  .toc span{display:none}
  .facts,.cols.n2,.tcards,.calc-in,.myth,.next{grid-template-columns:1fr}
  .myth .m-q{border-right:0;border-bottom:1px solid var(--line)}
  .sources ul{columns:1}
  .tbl{border:0;background:transparent;overflow:visible}
  table,thead,tbody,tr,th,td{display:block;width:100%}
  thead{display:none}
  caption{display:block;border:0;padding:6px 2px}
  tbody tr{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin:0 0 8px;padding:6px 0}
  tbody th{width:auto;border-bottom:1px solid var(--line)}
  td{border-bottom:0;padding:8px 18px}
  td::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .lockbars li{grid-template-columns:1fr}.lb-v{grid-column:1}
}
@media (max-width:360px){.brand{font-size:14px;gap:5px}.brand i{padding:3px 5px}.bento{grid-template-columns:1fr}.bento li.wide{grid-column:auto}}