/* ==========================================================================
   DEXASK polish layer — loaded after theme.css.
   Design system tokens, finishing details, motion and micro-interactions.
   Everything here is progressive: without support for a feature the page
   falls back to the base styles, never to hidden content.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --ink-1:#f2f7f7;            /* headings, key figures                     */
  --ink-2:#c6d3d6;            /* lead and emphasised copy                  */
  --ink-3:#9cabaf;            /* body copy                                 */
  --ink-4:#82949a;            /* labels; 5.6:1 on --bg                      */
  --ink-5:#56676d;            /* decoration only, never text               */
  --hair:rgba(201,245,247,.10);
  --hair-2:rgba(201,245,247,.18);
  --hair-3:rgba(101,239,245,.42);
  --accent:#65eff5;
  --accent-soft:#bdf7fa;
  --accent-wash:rgba(101,239,245,.08);
  --live:#70e6a4;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:160ms;
  --t-mid:320ms;
  --t-slow:900ms;
  --lift:0 18px 50px -28px rgba(0,0,0,.9),0 0 0 1px rgba(101,239,245,.18);
}
:root[data-theme="light"]{
  --ink-1:#0f2a31;
  --ink-2:#2b444b;
  --ink-3:#465c63;
  --ink-4:#566a70;
  --ink-5:#9fb0b5;
  --hair:rgba(4,40,50,.10);
  --hair-2:rgba(4,40,50,.18);
  --hair-3:rgba(3,138,150,.45);
  --accent:#038a96;
  --accent-soft:#036f7a;
  --accent-wash:rgba(3,138,150,.07);
  --live:#0b8f5a;
  --lift:0 18px 46px -30px rgba(10,48,58,.55),0 0 0 1px rgba(3,138,150,.18);
}

/* ---------- 2. Finishing ------------------------------------------------- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","calt"}
::selection{background:rgba(101,239,245,.30);color:#fff}
:root[data-theme="light"] ::selection{background:rgba(3,138,150,.22);color:#05232a}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.primary-metrics dd,.data-table td,.fee-compare-table td,.inline-route-metrics dd,.route-metrics dd{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip-link:focus-visible{outline-offset:2px}

/* ---------- 3. Legibility of small labels -------------------------------- */
/* Labels were 9-10px at ~3.2:1. 11px with --ink-4 keeps the mono texture and
   clears WCAG AA. */
.eyebrow,.section-label,.article-date,.article-meta,.primary-metrics dt,
.data-table thead th,.related>a span,.guide-card-eyebrow,.aside-label,
.article-chapter h2::before{font-size:11px}
.eyebrow,.section-label,.article-meta,.primary-metrics dt,.data-table thead th,
.related>a span,.guide-card-eyebrow,.aside-label{color:var(--ink-4)}
.article-date{color:var(--ink-4)}

/* ---------- 4. Header ----------------------------------------------------- */
/* At the very top the header steps back so the first screen breathes; it
   becomes the solid bar after the first 120px of scroll. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .site-header{animation:header-settle linear both;animation-timeline:scroll(root);animation-range:0 120px}
  }
}
@keyframes header-settle{
  from{background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
}
.main-nav a::after{transition:transform var(--t-mid) var(--ease-out),opacity var(--t-mid) var(--ease-out)}
.main-nav a:not([aria-current="page"])::after{content:"";position:absolute;left:50%;bottom:16px;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateX(-50%) scale(0);opacity:0}
.main-nav a:not([aria-current="page"]):hover::after{transform:translateX(-50%) scale(1);opacity:.7}

/* ---------- 5. Hero ------------------------------------------------------- */
.primary-metrics .risk-value,.primary-metrics .risk-value.is-review,.primary-metrics .risk-value.is-caution,.primary-metrics .risk-value.is-low,.primary-metrics .risk-value.is-high{font:600 clamp(16px,1.35vw,20px)/1.25 var(--font);letter-spacing:-.01em;white-space:normal;overflow-wrap:anywhere;padding-top:.35em}
.answer-panel{padding-right:clamp(0px,2vw,28px)}
.find-route{transition:transform var(--t-fast) var(--ease-out),border-color var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),background var(--t-mid) var(--ease-out)}
.find-route:hover{box-shadow:0 0 0 1px rgba(101,239,245,.25),0 18px 44px -20px rgba(101,239,245,.55)}
.find-route:active{transform:scale(.985)}
.find-route img,.footer-cta img,.guide-card-arrow img{transition:transform var(--t-mid) var(--ease-out)}
.find-route:hover img,.footer-cta:hover img,.guide-card:hover .guide-card-arrow img{transform:translateX(4px)}

/* ---------- 6. Article ---------------------------------------------------- */
/* The route rule: a line that draws itself under the article header and ends
   in a node — the site's route motif, used once per page. */
.article-header{position:relative;padding-bottom:0}
.article-header::after{content:"";display:block;height:1px;margin-top:40px;max-width:880px;background:linear-gradient(90deg,var(--accent) 0,rgba(101,239,245,.35) 38%,var(--hair) 100%);transform-origin:left center}
.article-header::before{content:"";position:absolute;left:0;bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(101,239,245,.12),0 0 18px rgba(101,239,245,.6)}
:root[data-theme="light"] .article-header::after{background:linear-gradient(90deg,var(--accent) 0,rgba(3,138,150,.3) 38%,var(--hair) 100%)}
:root[data-theme="light"] .article-header::before{box-shadow:0 0 0 4px rgba(3,138,150,.12)}
@media (prefers-reduced-motion:no-preference){
  .article-header::after{animation:route-draw 1.4s var(--ease-out) .15s both}
  .article-header::before{animation:route-node .5s var(--ease-out) .2s both}
}
@keyframes route-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes route-node{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

.article-date::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 1px 0;border-radius:50%;background:var(--live);box-shadow:0 0 10px rgba(112,230,164,.55);vertical-align:middle}
.article-intro{color:var(--ink-2)}

.quick-answer{margin-top:52px}
.quick-answer>p{color:var(--ink-1);font-size:clamp(17px,1.35vw,19px);line-height:1.62}

/* Facts: four facts read as a 2 × 2 grid instead of 3 + an orphan. Below
   430px the base stylesheet stacks them in one column, which is kept. */
@media (min-width:431px){
  .facts-grid:has(>.fact:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts-grid:has(>.fact:nth-child(4):last-child)>.fact:nth-child(odd){padding-left:0;border-right:1px solid var(--hair)}
  .facts-grid:has(>.fact:nth-child(4):last-child)>.fact:nth-child(even){padding-left:26px;border-right:0}
  .facts-grid:has(>.fact:nth-child(4):last-child)>.fact:nth-child(n+3){border-top:1px solid var(--hair)}
}
.fact dt{font-size:11px;color:var(--ink-4)}
.fact p{font-size:13px;color:var(--ink-3)}
.fact dd{color:var(--ink-1)}

/* Chapters: clearer rhythm, numbered in the accent colour. */
/* Equal air above and below the rule between chapters. */
.article-body .article-chapter{padding-block:60px}
.article-body .article-chapter+.article-chapter{margin-top:0;border-top-color:var(--hair)}
/* Section labels stay labels even where body-copy sizing applies. */
.article-body .eyebrow{font-size:11px;letter-spacing:.18em;color:var(--ink-4)}
.article-chapter h2::before{color:var(--accent);opacity:.85}
.article-chapter p,.article-chapter li{color:var(--ink-3)}
.article-chapter ul li{position:relative}

/* Inline links inside copy. */
.article-chapter p a,.article-chapter li a,.faq-section p a{color:var(--accent-soft);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(101,239,245,.45);text-underline-offset:3px;transition:color var(--t-fast) ease,text-decoration-color var(--t-fast) ease}
.article-chapter p a:hover,.article-chapter li a:hover,.faq-section p a:hover{color:#fff;text-decoration-color:currentColor}
:root[data-theme="light"] .article-chapter p a,:root[data-theme="light"] .article-chapter li a,:root[data-theme="light"] .faq-section p a{text-decoration-color:rgba(3,111,122,.4)}
:root[data-theme="light"] .article-chapter p a:hover,:root[data-theme="light"] .article-chapter li a:hover,:root[data-theme="light"] .faq-section p a:hover{color:#023c44}

/* FAQ: the marker turns instead of swapping glyphs, and answers ease in. */
.faq-section summary{transition:color var(--t-fast) ease}
.faq-section summary:hover{color:var(--ink-1)}
.faq-section summary::after,.faq-section details[open] summary::after{content:"+";display:inline-block;transition:transform var(--t-mid) var(--ease-out);font-size:20px;line-height:1;top:2px}
.faq-section details[open] summary::after{transform:rotate(45deg)}
.faq-section details>p{color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .faq-section details[open]>p{animation:faq-open var(--t-mid) var(--ease-out)}
}
@keyframes faq-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Tables. Cells hold short sentences, so they wrap in the reading font
   instead of forcing a 1,200px mono table into a 740px column. Headers keep
   the mono label style; numbers stay tabular. */
.data-section .data-table{min-width:0;table-layout:auto}
.data-section .data-table td,.data-section .data-table tbody th{white-space:normal;font:400 14px/1.55 var(--font);color:var(--ink-3)}
.data-section .data-table tbody th,.data-section .data-table td:first-child{color:var(--ink-1);font-weight:600}
.data-section .data-table td,.data-section .data-table th{padding:14px 16px 14px 0}
.data-section .data-table thead th{white-space:normal;vertical-align:bottom}
@media (max-width:760px){.data-section .data-table{min-width:560px}}
.data-table tbody tr{transition:background var(--t-fast) ease}
.data-table tbody tr:hover{background:var(--accent-wash)}

/* Related reads: the arrow travels, the row lights up. */
.related>a{transition:background var(--t-mid) var(--ease-out),padding var(--t-mid) var(--ease-out)}
.related>a i{transition:transform var(--t-mid) var(--ease-out),color var(--t-mid) ease}
.related>a:hover{background:linear-gradient(90deg,var(--accent-wash),transparent 70%);padding-left:14px}
.related>a:hover i{transform:translateX(6px);color:var(--accent)}

/* ---------- 7. Cards ----------------------------------------------------- */
/* A soft light follows the pointer across a card (motion.js sets --mx/--my);
   without the script the card keeps its static gradient. */
.home-guide-cards a,.guide-card,.guide-featured-card{isolation:isolate;transition:transform var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),background var(--t-mid) var(--ease-out)}
.home-guide-cards a::before,.guide-card::before,.guide-featured-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(101,239,245,.13),transparent 60%);opacity:0;transition:opacity var(--t-mid) var(--ease-out);pointer-events:none}
.home-guide-cards a:hover::before,.guide-card:hover::before,.guide-featured-card:hover::before{opacity:1}
.home-guide-cards a:hover,.guide-card:hover,.guide-featured-card:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.home-guide-cards a i{display:inline-block;transition:transform var(--t-mid) var(--ease-out)}
.home-guide-cards a:hover i{transform:translateX(5px)}
.home-guide-cards a:active,.guide-card:active{transform:translateY(-1px) scale(.995)}
:root[data-theme="light"] .home-guide-cards a::before,:root[data-theme="light"] .guide-card::before,:root[data-theme="light"] .guide-featured-card::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(3,138,150,.10),transparent 60%)}

/* ---------- 8. Footer ---------------------------------------------------- */
/* An oversized wordmark closes every page in its own band beneath the links,
   fading out towards a cropped bottom edge. Decorative and unread. */
.site-footer{position:relative;overflow:hidden;padding-bottom:clamp(96px,15.5vw,248px)}
.site-footer::after{content:"DEXASK" / "";position:absolute;left:50%;bottom:-.2em;transform:translateX(-50%);font:700 clamp(104px,19vw,312px)/1 var(--font);letter-spacing:-.065em;white-space:nowrap;color:transparent;background:linear-gradient(180deg,rgba(191,252,255,.16) 0%,rgba(191,252,255,.05) 55%,rgba(191,252,255,0) 92%);-webkit-background-clip:text;background-clip:text;pointer-events:none;user-select:none}
:root[data-theme="light"] .site-footer::after{background:linear-gradient(180deg,rgba(4,40,50,.12) 0%,rgba(4,40,50,.04) 55%,rgba(4,40,50,0) 92%);-webkit-background-clip:text;background-clip:text}
.footer-directory a{transition:color var(--t-fast) ease}
.footer-directory a:hover{color:var(--ink-1)}

/* ---------- 9. Scroll reveal --------------------------------------------- */
/* Driven by scroll position in the browser's compositor, no script. Content
   that is already on screen is past its entry range and shows at full
   opacity; browsers without scroll timelines show everything statically. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .article-chapter,.facts-section,.data-section,.fee-compare,.faq-section,.sources-section,
    .related,.home-guide-cards>a,.guide-card,.explainer,.purchase-entry,.guide-grid .section-heading,
    .buy-directory-group,.intel-faq-list>article,.safety-faq-list>article{
      animation:rise-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%
    }
  }
}
/* `translate`, not `transform`: a filled animation would otherwise pin
   transform and cancel the cards' hover lift. */
@keyframes rise-in{from{opacity:0;translate:0 26px}to{opacity:1;translate:none}}

/* ---------- 10. Stablecoin basics diagram -------------------------------- */
/* Above phone width the three layers used to sit on the artwork at fixed
   percentages, so their titles ran into the coins, the exchange and the
   network nodes — at laptop widths and in the longer locales most of all.
   The artwork now owns its area, the layers read as a three-step legend
   beneath it, and every label is placed in the artwork's own coordinates:
   fractions of the 1185 × 700 render, with 1cqw = 1% of its width. */
/* The copy column widens on large screens so the headline keeps three lines. */
@media (min-width:1600px){
  .stablecoin-basics-inner{grid-template-columns:560px minmax(0,1fr)}
  .basics-copy h2{max-width:560px}
}
.basics-step span{color:var(--ink-2)}
@media (min-width:1051px) and (max-width:1240px){
  .stablecoin-basics-inner{min-height:0;grid-template-columns:1fr;gap:28px;padding:76px 34px 90px}
  .basics-copy{padding-top:0}
  .basics-copy h2{max-width:720px}
  .basics-intro,.basics-analogy{max-width:680px}
  .basics-diagram{width:min(100%,900px);margin:0 auto}
}
@media (min-width:761px){
  .basics-diagram{container-type:inline-size;aspect-ratio:auto;padding-top:59.07%}
  .basics-flow-render,.basics-flow-focus{top:0}
  .basics-layer-visual,.basics-destination{inset:0 0 auto;height:59.07cqw}
  .basics-layer-visual{z-index:2}

  .basics-assets>span:nth-child(1){left:40%;top:22.6%}
  .basics-assets>span:nth-child(2){left:59.3%;top:23.4%}
  .basics-assets>span:first-child img{width:7.3cqw;height:7.3cqw}
  .basics-assets>span:nth-child(2) img{width:6.1cqw;height:6.1cqw}
  .basics-assets>span b{top:calc(50% + 7.85cqw + 4px)}
  .basics-assets>span:nth-child(2) b{top:calc(50% + 6.1cqw + 4px)}
  .basics-networks>span:nth-child(1){left:28.5%;top:84.6%}
  .basics-networks>span:nth-child(2){left:40.3%;top:85%}
  .basics-networks>span:nth-child(3){left:56.1%;top:85.1%}
  .basics-networks img{width:3.8cqw;height:3.8cqw}
  .basics-networks>span b{top:calc(50% + 4.14cqw + 6px)}
  /* The exchange caption sits beside the building, clear of the arrow. */
  .basics-exchanges .basics-exchange-caption{left:auto;right:68.5%;top:56.6%;min-width:0;align-items:flex-end;text-align:right;transform:translateY(-50%);transform-origin:100% 50%}
  .basics-layer.is-active .basics-exchanges .basics-exchange-caption{transform:translateY(-50%) scale(1.03)}

  /* The explanation fills the open space inside the route, off every line. */
  .basics-destination>p,.stablecoin-basics[data-active-layer] .basics-destination>p{right:auto;left:50%;top:44%;width:min(300px,30cqw);font-size:clamp(13px,1.65cqw,15px)}
  .basics-wallet{right:auto;left:87.7%;top:calc(94.4% + 6px);width:auto;white-space:nowrap;transform:translateX(-50%)}
  .basics-destination>small{right:80.5%;top:85%;width:min(160px,19cqw);padding-top:0;border-top:0;text-align:right;transform:translateY(-50%)}

  /* Legend: a stepped line, the active step drawn solid. */
  .basics-layer-list{position:static;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(44px,6.5cqw,64px)}
  .basics-layer-list::before,.basics-layer::after{display:none}
  .basics-layer{position:static;top:auto!important;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0 clamp(14px,2.6cqw,28px) 4px 0;background:repeating-linear-gradient(90deg,rgba(170,221,226,.3) 0 4px,transparent 4px 9px) 0 5px/100% 1px no-repeat}
  .basics-layer.is-active{background:linear-gradient(90deg,var(--accent),rgba(101,239,245,.16)) 0 5px/100% 1px no-repeat}
  .basics-layer::before{position:relative;left:auto;top:auto;flex:none;width:11px;height:11px;transform:none}
  .basics-layer-marker{position:static;transform:none;margin-top:8px}
  .basics-layer.is-active .basics-layer-marker{color:var(--accent)}
  .basics-layer-copy{position:static;transform:none;gap:8px}
  .basics-layer-copy strong{font-size:clamp(18px,2.45cqw,23px);line-height:1.22}
  .basics-layer.is-active .basics-layer-copy strong{transform:none}
  .basics-layer-copy small{font-size:clamp(13px,1.6cqw,14px)}
  html[data-theme="light"] .basics-exchange-caption b{color:#173139!important}
  html[data-theme="light"] .basics-layer,html[data-theme="light"] .basics-layer:hover{background:repeating-linear-gradient(90deg,rgba(13,76,88,.28) 0 4px,transparent 4px 9px) 0 5px/100% 1px no-repeat}
  html[data-theme="light"] .basics-layer.is-active{background:linear-gradient(90deg,var(--accent),rgba(3,138,150,.14)) 0 5px/100% 1px no-repeat}
}
@media (max-width:760px){
  .basics-exchanges .basics-exchange-caption{min-width:0;align-items:flex-start;text-align:left}
}

/* ---------- 11. Print ------------------------------------------------------ */
/* Scroll-driven reveals never run on paper; print everything at rest. */
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  .site-footer::after{display:none}
}

/* ---------- 12. Type rendering ---------------------------------------------- */
/* Both Space Mono cuts (400, 700) are real faces; no weight is ever smeared
   by synthesis. Chinese pages keep synthesis for system CJK faces without a
   bold cut. */
html{font-synthesis-weight:none}
html:lang(zh){font-synthesis-weight:auto}

/* ---------- 13. Intelligence pages ---------------------------------------- */
:root[data-theme="light"] .intel-tabs{border-color:var(--hair-2);background:rgba(255,255,255,.72)}
:root[data-theme="light"] .intel-tabs a{color:var(--ink-3)}
:root[data-theme="light"] .intel-tabs a[aria-current=page]{background:rgba(3,138,150,.09);color:var(--ink-1);box-shadow:inset 0 0 0 1px rgba(3,138,150,.32)}
.intel-tabs a{transition:color var(--t-fast) ease,background var(--t-mid) var(--ease-out)}
.intel-tabs a:not([aria-current=page]):hover{color:var(--ink-1)}
@media (max-width:820px){
  .intel-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;overflow:visible;border-radius:18px}
  .intel-tabs a{display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 12px;border-radius:13px;font-size:14px;line-height:1.3}
}

/* ---------- 14. Buy directory -------------------------------------------- */
.buy-directory-group small{opacity:1;color:var(--ink-4)}
.buy-directory-group li span[aria-current="page"]{opacity:1;color:var(--ink-1)}

/* ---------- 15. Light theme: text that only had dark-theme colours ---------- */
/* Each selector below was traced to the rule that set its colour; all values
   clear 4.5:1 on the light paper (#f3f7f8). */
:root[data-theme="light"]{--ok:#0a7350;--warn:#7a5600;--alert:#a33d17}
:root[data-theme="light"] .policy-result h3{color:var(--ink-1)}
:root[data-theme="light"] .article-mobile-toc summary{color:var(--ink-1)}
:root[data-theme="light"] .contract-row code{color:var(--ink-1)}
:root[data-theme="light"] .buy-step-grid strong{color:var(--ink-2)}
:root[data-theme="light"] .history-list strong{color:var(--ink-2)}
:root[data-theme="light"] .status-route-line{color:var(--ink-2)}
:root[data-theme="light"] .buy-fee-ledger dt{color:var(--ink-3)}
:root[data-theme="light"] .tools-jump a span{color:var(--ink-3)}
:root[data-theme="light"] .buy-matrix-table td{color:var(--ink-3)}
:root[data-theme="light"] .buy-eligibility-table td{color:var(--ink-3)}
:root[data-theme="light"] .data-table caption{color:var(--ink-3)}
:root[data-theme="light"] .data-table td{color:var(--ink-3)}
:root[data-theme="light"] :where(.data-section) .data-table :is(td:first-child,tbody th){color:var(--ink-1)}
:root[data-theme="light"] .tools-evidence li{color:var(--ink-3)}
:root[data-theme="light"] .route-checklist span{color:var(--ink-3)}
:root[data-theme="light"] .article-mobile-toc a{color:var(--ink-3)}
:root[data-theme="light"] .buy-route-details summary{color:var(--ink-3)}
:root[data-theme="light"] .setup-list label{color:var(--ink-3)}
:root[data-theme="light"] .article-toc a{color:var(--ink-3)}
:root[data-theme="light"] .buy-route-details dl div{color:var(--ink-3)}
:root[data-theme="light"] .safety-form label span{color:var(--ink-3)}
:root[data-theme="light"] .policy-result p{color:var(--ink-3)}
:root[data-theme="light"] .recovery-question button{color:var(--ink-3)}
:root[data-theme="light"] .tool-outline-link{color:var(--ink-3)}
:root[data-theme="light"] .tool-outline-action{color:var(--ink-3)}
:root[data-theme="light"] .watch-empty{color:var(--ink-3)}
:root[data-theme="light"] .status-chip{color:var(--ink-3)}
/* The route photo keeps its dark scrim in both themes, so its caption stays light. */
:root[data-theme="light"] .route-story-visual figcaption{color:#d3e2e5}
:root[data-theme="light"] .footer-brand small{color:var(--ink-4)}
:root[data-theme="light"] .buy-guide-nav a{color:var(--ink-4)}
:root[data-theme="light"] .tool-panel header button{color:var(--ink-4)}
:root[data-theme="light"] .glossary-grid h3 small{color:var(--ink-4)}
:root[data-theme="light"] .buy-matrix-filters button{color:var(--ink-4)}
:root[data-theme="light"] .buy-eligibility-legend span{color:var(--ink-4)}
:root[data-theme="light"] .recovery-question>span{color:var(--ink-4)}
:root[data-theme="light"] .fee-compare-table td small{color:var(--ink-4)}
:root[data-theme="light"] .buy-quote-notice{color:var(--ink-4)}
:root[data-theme="light"] .inline-route-metrics dt{color:var(--ink-4)}
:root[data-theme="light"] .source-list a small{color:var(--ink-4)}
:root[data-theme="light"] .history-list li{color:var(--ink-4)}
:root[data-theme="light"] .basics-wallet span{color:var(--ink-4)}
:root[data-theme="light"] .tools-notice{color:var(--ink-4)}
:root[data-theme="light"] .alternative-route>span:nth-child(3){color:var(--ink-4)}
:root[data-theme="light"] .alternative-route>span:nth-child(4){color:var(--ink-4)}
:root[data-theme="light"] .buy-route-brand small{color:var(--ink-4)}
:root[data-theme="light"] .recovery-output span{color:var(--ink-4)}
:root[data-theme="light"] .source-health>span{color:var(--ink-4)}
:root[data-theme="light"] .article-back{color:var(--ink-4)}
:root[data-theme="light"] .article-date{color:var(--ink-4)}
:root[data-theme="light"] .article-meta{color:var(--ink-4)}
:root[data-theme="light"] .section-kicker{color:var(--ink-4)}
:root[data-theme="light"] .buy-notice{color:var(--ink-4)}
:root[data-theme="light"] .buy-field-label{color:var(--ink-4)}
:root[data-theme="light"] .buy-select-copy small{color:var(--ink-4)}
:root[data-theme="light"] .eyebrow{color:var(--ink-4)}
:root[data-theme="light"] .related>a i{color:var(--accent-soft)}
:root[data-theme="light"] .tools-evidence>a{color:var(--accent-soft)}
:root[data-theme="light"] .buy-matrix-table a{color:var(--accent-soft)}
:root[data-theme="light"] .buy-guide-index span{color:var(--accent-soft)}
:root[data-theme="light"] .inline-route-actions a{color:var(--accent-soft)}
:root[data-theme="light"] .status-result-foot a{color:var(--accent-soft)}
:root[data-theme="light"] .route-tools-link{color:var(--accent-soft)}
:root[data-theme="light"] .buy-eyebrow{color:var(--accent-soft)}
:root[data-theme="light"] .address-input button{color:var(--accent-soft)}
:root[data-theme="light"] .history-range button.is-active{color:var(--accent-soft)}
:root[data-theme="light"] .registry-card footer a{color:var(--accent-soft)}
:root[data-theme="light"] .evidence-grid a{color:var(--accent-soft)}
:root[data-theme="light"] .contract-row button{color:var(--accent-soft)}
:root[data-theme="light"] .guide-result-count span{color:var(--accent-soft)}
:root[data-theme="light"] .buy-page{--buy-cyan:#006f80}
:root[data-theme="light"] .state-pill.is-supported{color:var(--ok)}
:root[data-theme="light"] .state-pill.is-open{color:var(--ok)}
:root[data-theme="light"] .freshness.is-live{color:var(--ok)}
:root[data-theme="light"] .buy-route-rank small{color:var(--ok)}
:root[data-theme="light"] .policy-result>span{color:var(--ok)}
:root[data-theme="light"] .safety-panel>header>span{color:var(--ok)}
:root[data-theme="light"] .source-health .is-live b{color:var(--ok)}
:root[data-theme="light"] .asset-orb{color:var(--ok)}
:root[data-theme="light"] .asset-orb.is-usdc{color:#1f5fbf}
:root[data-theme="light"] .inline-route-status[data-mode="stale"]{color:var(--warn)}
:root[data-theme="light"] .buy-eligibility-status{color:var(--warn)}
:root[data-theme="light"] .safety-notice{color:var(--warn)}
:root[data-theme="light"] .exchange-warning{color:var(--warn)}
:root[data-theme="light"] .state-pill.is-paused{color:var(--alert)}
:root[data-theme="light"] .freshness.is-stale{color:var(--alert)}
:root[data-theme="light"] .skip-link{color:#fff}
:root[data-theme="light"] .aside-primary{color:#fff}

/* ---------- 16. Safety tools ---------------------------------------------- */
/* A chosen value reads as field text, not as another label. */
.safety-form .safety-select-trigger span{color:inherit;font:500 15px/1.25 var(--font);letter-spacing:0;text-transform:none}
.safety-tabs a{transition:background var(--t-fast) ease,color var(--t-fast) ease}
.safety-select-menu button{transition:background var(--t-fast) ease,color var(--t-fast) ease}
:root[data-theme="light"] .safety-tabs{border-color:var(--hair-2);background:rgba(255,255,255,.88);box-shadow:0 14px 34px -24px rgba(10,48,58,.45)}
:root[data-theme="light"] .safety-tabs a{color:var(--ink-3)}
:root[data-theme="light"] .safety-tabs a:hover{background:var(--accent-wash);color:var(--ink-1)}
:root[data-theme="light"] .safety-select-trigger{border-color:rgba(13,76,88,.2)!important;background:#fff!important;color:var(--ink-1)!important}
:root[data-theme="light"] .safety-select-trigger i{color:var(--accent-soft)}
:root[data-theme="light"] .safety-select-menu{border-color:rgba(3,138,150,.24);background:#fff;box-shadow:0 22px 50px rgba(18,57,66,.16)}
:root[data-theme="light"] .safety-select-menu button{color:var(--ink-3)!important}
:root[data-theme="light"] .safety-select-menu button:hover,:root[data-theme="light"] .safety-select-menu button:focus{background:var(--accent-wash)!important;color:var(--ink-1)!important}

/* ---------- 17. Remaining light-theme details ----------------------------- */
:root[data-theme="light"] .buy-eligibility-table a{color:var(--accent-soft)}
:root[data-theme="light"] .section-kicker span{color:var(--ink-4)}
:root[data-theme="light"] .fee-compare-table td.is-lowest span{color:#086447}
:root[data-theme="light"] .fee-compare-table td small{color:var(--ink-3)}
:root[data-theme="light"] .brand-dex{color:#3d63e0}
:root[data-theme="light"] .footer-brand strong i{color:#3d63e0}
.source-health .is-unconfigured{opacity:1}
.source-health .is-unconfigured b{color:var(--ink-4)}

/* ---------- 18. Anchors and sticky bars ---------------------------------- */
/* In-page jumps land below the fixed header; more specific rules (articles,
   buy guides) keep their own offsets. */
[id]{scroll-margin-top:96px}
.safety-tabs{top:88px}
.safety-panel{scroll-margin-top:168px}
@media (max-width:760px){
  /* Three long questions cannot share a phone-width sticky bar; they become
     a short contents list that scrolls away with the page. */
  .safety-tabs{position:relative;top:auto;flex-direction:column;gap:2px;overflow:visible}
  .safety-tabs a{padding:12px 14px;line-height:1.4}
  .safety-panel{scroll-margin-top:86px}
}

/* ---------- 19. Guide filters --------------------------------------------- */
/* With room to spare every category is shown; on narrow screens the row
   scrolls and fades at the edge until its end is reached. */
@property --filters-fade{syntax:'<length>';inherits:false;initial-value:44px}
@media (min-width:900px){
  .guide-filters{flex-wrap:wrap;overflow:visible}
}
@media (max-width:899px){
  .guide-filters{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--filters-fade)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--filters-fade)),transparent)}
  @supports (animation-timeline: scroll()){
    .guide-filters{animation:filters-edge linear both;animation-timeline:scroll(self inline)}
  }
}
@keyframes filters-edge{0%,88%{--filters-fade:44px}100%{--filters-fade:0px}}

/* ---------- 20. Buy page sources ------------------------------------------ */
/* A reference list takes a label, like the article source lists, not a
   display headline. */
.buy-sources header{display:block;margin-bottom:22px}
.buy-sources h2.buy-eyebrow{max-width:none;margin:0;font:400 11px/1.3 var(--mono);letter-spacing:.15em}

/* ---------- 21. Glossary ---------------------------------------------------- */
/* Definitions are reading text, not captions. */
.glossary-grid p{font-size:13px;line-height:1.62;color:var(--ink-3)}
.glossary-grid article{transition:background var(--t-mid) var(--ease-out)}
.glossary-grid article:hover{background:var(--accent-wash)}
@media (max-width:760px){
  .glossary-grid article{padding:20px}
  .glossary-grid h3{margin-top:14px;font-size:19px}
  .glossary-grid p{margin-top:10px}
}

/* ---------- 22. Risk tables on phones ------------------------------------- */
/* An 860px table behind a sideways scroll hid every status column on a
   phone. Each row becomes a labelled card instead; the header row stays in
   the accessibility tree. */
@media (max-width:760px){
  .operations-table-wrap{overflow:visible;border:0;border-radius:0}
  .operations-table{min-width:0}
  .operations-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .operations-table tbody{display:grid;gap:12px}
  .operations-table tr{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:18px;border:1px solid var(--line);border-radius:16px}
  .operations-table td{display:flex;flex-direction:column;gap:6px;padding:0;border:0}
  .operations-table td::before{content:attr(data-label);color:var(--ink-4);font:11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .operations-table td:first-child{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:10px}
  .operations-table td:first-child::before{display:none}
  .operations-table td:nth-child(2){grid-column:1/-1}
  .operations-table td:last-child{grid-column:1/-1}
  .operations-table td>:is(.state-pill,.freshness){align-self:flex-start}
  :root[data-theme="light"] .operations-table tr{border-color:rgba(13,76,88,.16);background:#fff}
}

/* ---------- 23. Safety headings --------------------------------------------- */
.safety-panel h2{line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
:root[data-theme="light"] .fee-compare-table th{color:var(--ink-1)}
:root[data-theme="light"] .fee-compare-table th a{color:var(--ink-1)}
:root[data-theme="light"] .fee-compare-table th a{text-decoration-color:rgba(4,40,50,.3)}
:root[data-theme="light"] .inline-route-path img[src*="okx"]{filter:invert(1)}

/* ---------- 24. Tablet band ------------------------------------------------- */
/* Between phone and laptop the side-by-side sections left 150px card columns;
   they stack here and give the visual its full width. */
@media (min-width:761px) and (max-width:1000px){
  .route-story,.guide-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .route-story-copy,.guide-grid .section-heading{max-width:640px}
  .purchase-entry{grid-template-columns:minmax(0,1fr);gap:44px;padding:56px}
}

/* ---------- 25. Focus ------------------------------------------------------ */
/* The theme switch signalled focus by colour alone; it gets the same ring as
   every other control. */
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:50%}

/* ---------- 26. Pages without a body ------------------------------------- */
/* Only the 404 page puts the article grid straight under the header; its side
   card then needs air below the route rule. */
.article-header+.article-layout{margin-top:64px}

/* Fee table states keep their contrast on the highlighted row as well. */
.fee-compare-table td small{color:var(--ink-3)}
.fee-compare-table td:is(.is-paused,.is-missing) span{color:var(--ink-4)}

/* ---------- 27. Long tokens in prose --------------------------------------- */
/* Contract addresses and transaction ids have no break points; inside copy
   they wrap at the column edge instead of widening the page on phones. */
.article-body :is(p,li),.faq-section p,.quick-answer p,.article-intro,.source-list p{overflow-wrap:anywhere}