/* seo.css: the nearswaps skin for the static reading pages (/learn/, /compare/, /tokens/), built by tools/seo-*.mjs.
   Uses the brand tokens from brand.css and the shared header and tab bar from nav.css. No script needed to read a page.
   One ground, one accent (mint for the primary action), hairlines, JetBrains Mono for figures, 44 px targets.
   Text: body colour at 13 px or more; muted only for short labels; caps labels 11 px or more; paragraphs 72ch at most. */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--ns-ground);}
body{margin:0;background:var(--ns-ground);font-size:var(--ns-fs-md);line-height:var(--ns-lh);color:var(--ns-body);overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:var(--ns-ink);text-decoration:underline;text-decoration-color:var(--ns-line-strong);text-underline-offset:3px;}
a:hover{text-decoration-color:var(--ns-mint);}
pre.code{margin:0 0 18px;padding:14px 16px;border-radius:var(--ns-r-md);background:var(--ns-raise);border:1px solid var(--ns-line);color:var(--ns-ink);font:13px/1.55 var(--ns-mono);white-space:pre-wrap;overflow-wrap:anywhere;}
pre.code code{background:none;border:0;padding:0;font-size:1em;}
.proof{padding:12px 16px;border-radius:var(--ns-r-md);border:1px solid var(--ns-mint);background:var(--ns-mint-soft);color:var(--ns-ink);}
code,kbd{font-family:var(--ns-mono);font-size:0.88em;color:var(--ns-ink);background:var(--ns-raise);border:1px solid var(--ns-line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Header: the shared one, plus the Learn / Compare / Tokens guide links (also on a phone). */
.seo-top{max-width:1180px;margin:0 auto;padding:0 var(--ns-gutter);}
.seo-top .ns-link,.seo-top .ns-home{text-decoration:none;}
.seo-top .seo-guides{margin-left:auto;padding-left:12px;border-left:1px solid var(--ns-line);}
@media (min-width:761px) and (max-width:1120px){.seo-top .ns-link{padding:0 8px;font-size:13px;}}

.seo-main{max-width:1180px;margin:0 auto;padding:8px var(--ns-gutter) 64px;}
.seo-main > *{max-width:760px;}
.seo-main.wide > *{max-width:none;}
article p,article li,.faq-a{max-width:72ch;}

.crumbs{display:flex;flex-wrap:wrap;gap:0 8px;align-items:center;margin:8px 0 20px;font-size:var(--ns-fs-sm);color:var(--ns-body);}
.crumbs a{color:var(--ns-body);text-decoration:none;min-height:32px;display:inline-flex;align-items:center;}
.crumbs a:hover{color:var(--ns-ink);}
.crumbs span[aria-hidden]{color:var(--ns-muted);}
.crumbs [aria-current]{color:var(--ns-ink);}

.eyebrow{margin:0 0 12px;font-family:var(--ns-mono);font-size:var(--ns-fs-2xs);letter-spacing:var(--ns-track-caps);text-transform:uppercase;color:var(--ns-muted);}
h1{margin:0 0 16px;font-size:var(--ns-fs-2xl);line-height:1.15;letter-spacing:var(--ns-track-tight);color:var(--ns-ink);font-weight:700;overflow-wrap:anywhere;}
h2{margin:40px 0 12px;font-size:var(--ns-fs-xl);line-height:1.25;letter-spacing:-0.02em;color:var(--ns-ink);font-weight:700;scroll-margin-top:16px;}
h3{margin:24px 0 8px;font-size:var(--ns-fs-lg);line-height:1.3;color:var(--ns-ink);font-weight:600;}
p{margin:0 0 14px;}
ul,ol{margin:0 0 16px;padding-left:22px;}
li{margin:0 0 6px;}
strong,b{color:var(--ns-ink);font-weight:600;}

.answer{font-size:var(--ns-fs-lg);color:var(--ns-ink);line-height:1.55;margin-bottom:12px;max-width:68ch;}
.checked{font-family:var(--ns-mono);font-size:var(--ns-fs-sm);color:var(--ns-body);margin:0 0 20px;}
.more{margin-top:20px;}

.cta{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 28px;}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ns-touch);padding:0 18px;border-radius:var(--ns-r-pill);font-weight:700;font-size:14px;text-decoration:none;text-align:center;
  color:var(--ns-ink);border:1px solid var(--ns-line-strong);background:transparent;transition:transform var(--ns-t-touch) var(--ns-ease),border-color var(--ns-t-touch) var(--ns-ease);}
.btn:hover{border-color:var(--ns-ink);}
.btn:active{transform:scale(0.98);}
.btn.primary{background:var(--ns-mint);color:var(--ns-mint-ink);border-color:var(--ns-mint);}

.steps{counter-reset:s;list-style:none;padding:0;}
.steps > li{counter-increment:s;position:relative;padding:0 0 0 40px;margin:0 0 14px;}
.steps > li::before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;border:1px solid var(--ns-line-strong);
  font-family:var(--ns-mono);font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--ns-ink);}

/* Tables: full width of their column; on a phone every row becomes a card with labelled cells (data-label). */
.tbl{width:100%;margin:0 0 20px;border:1px solid var(--ns-line);border-radius:var(--ns-r-md);overflow:hidden;}
table{width:100%;border-collapse:collapse;font-size:var(--ns-fs-sm);}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--ns-line);overflow-wrap:anywhere;}
thead th{color:var(--ns-muted);font-weight:600;font-size:var(--ns-fs-xs);background:var(--ns-card);}
tbody th{color:var(--ns-ink);font-weight:600;}
tr:last-child td,tr:last-child th{border-bottom:0;}
td:first-child{color:var(--ns-ink);font-weight:600;}
.num,td.num{font-family:var(--ns-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
.tbl.cmp tbody th{width:16%;}
.tbl.cmp td{width:42%;color:var(--ns-body);font-weight:400;}

/* The tokens index: on a phone it stays a table with symbol, price, liquidity and Trade. */
.tbl.toks td{vertical-align:middle;overflow-wrap:normal;}
.tbl.toks th{white-space:nowrap;}
.tbl.toks td.c-id{overflow-wrap:anywhere;}
.tbl.toks small{color:var(--ns-body);font-weight:400;font-size:var(--ns-fs-sm);margin-left:4px;}
.tbl.toks .c-rank{width:44px;color:var(--ns-muted);}
.tbl.toks .c-px,.tbl.toks .c-liq{text-align:right;}
.tbl.toks .c-go{width:1%;text-align:right;padding:4px 8px;}
.trade{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ns-touch);min-width:64px;padding:0 14px;border-radius:var(--ns-r-pill);border:1px solid var(--ns-line-strong);
  font-weight:700;font-size:13px;text-decoration:none;color:var(--ns-ink);white-space:nowrap;}
.trade:hover{border-color:var(--ns-mint);}
.tbl.toks td.c-tok a{font-weight:700;}

.faq{margin-top:40px;}
.faq-item{border-top:1px solid var(--ns-line);padding:4px 0 6px;}
.faq-item:last-child{border-bottom:1px solid var(--ns-line);}
.faq-q{margin:14px 0 6px;font-size:var(--ns-fs-md);}

.related{margin-top:40px;}
.links{list-style:none;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));max-width:none;}
.links li{max-width:none;margin:0;}
.links a{display:flex;flex-direction:column;justify-content:flex-start;height:100%;min-height:var(--ns-touch);padding:12px 14px;border:1px solid var(--ns-line);border-radius:var(--ns-r-sm);
  background:var(--ns-card);text-decoration:none;color:var(--ns-ink);font-weight:600;}
.links a:hover{border-color:var(--ns-line-strong);}
.links small{display:block;font-weight:400;color:var(--ns-body);font-size:var(--ns-fs-sm);margin-top:4px;line-height:1.45;}
.sources{font-size:var(--ns-fs-sm);}
.sources li{overflow-wrap:anywhere;}

.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:0 0 20px;padding:0;}
.facts div{background:var(--ns-card);border:1px solid var(--ns-line);border-radius:var(--ns-r-sm);padding:12px 14px;min-width:0;}
.facts div.wide{grid-column:1 / -1;}
.facts dt{font-size:var(--ns-fs-xs);color:var(--ns-muted);margin:0 0 4px;}
.facts dd{margin:0;color:var(--ns-ink);font-family:var(--ns-mono);font-variant-numeric:tabular-nums;font-size:var(--ns-fs-sm);overflow-wrap:anywhere;}
.facts dd code{background:none;border:0;padding:0;font-size:1em;}

/* Two columns from 1100 px: the text (760) and a sticky aside (300) with the facts, a trade card and the contents. */
.side-card,.toc{display:none;}
.side-h{margin:0 0 10px;font-family:var(--ns-mono);font-size:var(--ns-fs-2xs);letter-spacing:var(--ns-track-caps);text-transform:uppercase;color:var(--ns-muted);}
@media (min-width:1100px){
  .seo-main.has-side > article{max-width:none;}
  article.split{display:grid;grid-template-columns:minmax(0,760px) 300px;grid-template-rows:auto 1fr;column-gap:56px;align-items:start;}
  article.split > .lead{grid-column:1;grid-row:1;}
  article.split > .body{grid-column:1;grid-row:2;}
  article.split > .side{grid-column:2;grid-row:1 / span 2;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;padding-top:4px;display:flex;flex-direction:column;gap:16px;}
  .side .facts{grid-template-columns:1fr 1fr;margin:0;}
  .side-card{display:flex;flex-direction:column;gap:8px;background:var(--ns-card);border:1px solid var(--ns-line);border-radius:var(--ns-r-md);padding:16px;}
  .side-card .btn{width:100%;}
  .toc{display:block;border-left:1px solid var(--ns-line);padding:2px 0 2px 16px;}
  .toc ol{list-style:none;margin:0;padding:0;}
  .toc li{margin:0;}
  .toc a{display:block;padding:6px 0;font-size:var(--ns-fs-sm);line-height:1.4;color:var(--ns-body);text-decoration:none;}
  .toc a:hover{color:var(--ns-ink);}
}

.seo-foot{max-width:1180px;margin:0 auto;padding:24px var(--ns-gutter) 40px;border-top:1px solid var(--ns-line);font-size:var(--ns-fs-sm);color:var(--ns-body);}
.seo-foot nav{display:flex;flex-wrap:wrap;gap:0 18px;margin-bottom:12px;}
.seo-foot a{color:var(--ns-body);text-decoration:none;min-height:32px;display:inline-flex;align-items:center;}
.seo-foot a:hover{color:var(--ns-ink);}
.seo-foot p{max-width:72ch;}

/* Phones and touch screens: every link in the crumbs and the footer is a 44 px target; the guide links stay. */
@media (max-width:760px),(pointer:coarse){
  .crumbs a,.seo-foot a{min-height:var(--ns-touch);}
  .crumbs{margin:0 0 12px;}
}
@media (max-width:760px){
  .topbar[data-ns-header].seo-top .seo-guides{display:flex;margin-left:auto;padding-left:0;border-left:0;gap:0;}
  .seo-top .seo-guides .ns-link{padding:0 10px;font-size:14px;}
  .seo-foot{padding-bottom:calc(var(--ns-tabbar-h) + 32px + env(safe-area-inset-bottom,0px));}
}
@media (max-width:400px){.seo-top .seo-guides .ns-link{padding:0 7px;font-size:13px;}}

@media (max-width:600px){
  .tbl:not(.toks){border:0;border-radius:0;overflow:visible;}
  .tbl:not(.toks) table,.tbl:not(.toks) tbody,.tbl:not(.toks) tr,.tbl:not(.toks) td,.tbl:not(.toks) tbody th{display:block;width:auto;}
  .tbl:not(.toks) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .tbl:not(.toks) tr{border:1px solid var(--ns-line);border-radius:var(--ns-r-md);background:var(--ns-card);margin:0 0 10px;padding:6px 0;}
  .tbl:not(.toks) td,.tbl:not(.toks) tbody th{border:0;padding:6px 14px;white-space:normal;}
  .tbl:not(.toks) tr > :first-child{font-size:var(--ns-fs-md);color:var(--ns-ink);font-weight:600;padding-top:10px;}
  .tbl:not(.toks) td[data-label]::before{content:attr(data-label);display:block;font-size:var(--ns-fs-2xs);font-family:var(--ns-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ns-muted);margin-bottom:2px;}
  .tbl:not(.toks) td.num{font-size:var(--ns-fs-md);}
  .tbl.toks .c-rank,.tbl.toks .c-id{display:none;}
  .tbl.toks th,.tbl.toks td{padding:8px 6px;}
  .tbl.toks th:first-child,.tbl.toks td:first-child{padding-left:12px;}
  .tbl.toks td.num{font-size:12px;}
  .tbl.toks .c-go{padding:4px 8px 4px 2px;}
  .trade{min-width:0;padding:0 12px;}
  .tbl.toks td.c-tok small{display:block;margin:2px 0 0;font-size:12px;color:var(--ns-muted);}
  .facts{grid-template-columns:1fr 1fr;}
}
@media (min-width:761px){.seo-main{padding-top:24px;}h2{margin-top:48px;}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.btn,.trade{transition:none;}.btn:active{transform:none;}}