/* SwapLords 1: the aggregator look.

   Built against a reference opened in headless Chromium at 1440 and 390 rather
   than from memory. Its :root custom properties, computed styles, type scale,
   radii and spacing were read out of the live DOM and the numbers below are
   those measurements, not guesses. The probe script is in the session
   scratchpad.

   WHAT THIS THEME TAKES FROM THE REFERENCE: the design. A near black page under
   a magenta mesh gradient, the exchange widget treated as the hero and placed
   ABOVE the headline, a tab strip with an accent underline on the live tab,
   pure black input plates with a coin pill on one side and a right aligned
   figure on the other, a circular white flip button, a pill call to action, a
   muted plate under the form carrying the terms line, a centred headline with a
   marker swash behind one phrase, and section after section of soft charcoal
   cards with a line icon, a bold title and a muted paragraph.

   WHAT IT DOES NOT TAKE: their name, their mark, their written copy, the press
   and partner logos they run under the hero, the third party review carousel,
   and their illustrations. None of that is ours to ship, and most of it is
   something this product has no equivalent for. Every string here comes from
   our own dictionaries and every figure is read off the exchange. The house
   rule holds: nothing on the page the code cannot back up.

   THE OPERATOR'S ACCENT STILL WINS. --s1 (#ff42d0) is this theme's own
   secondary tone, the way Ghost carries pink. Every call to action runs
   `--s1 -> var(--a)`, so out of the box the default violet accent lands on the
   reference's own pink to purple and an operator who sets a green accent gets
   pink to green and keeps their brand.

   FONT: Satoshi, self hosted at /_p/fonts/satoshi-{400,500,700,900}.woff2,
   under the ITF Free Font License (free commercial use, web embedding allowed),
   from Fontshare. The reference sets body AND headings in it and that is most
   of why the page reads the way it does, so this theme does too. Satoshi ships
   latin only: ru, uk, ar, fa, zh, ja, hi and the rest fall through to PBody
   (Inter) on the unicode-range below. That is the fallback working, not a gap.
*/

@font-face{font-family:'S1Sans';src:url('/_p/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'S1Sans';src:url('/_p/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'S1Sans';src:url('/_p/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'S1Sans';src:url('/_p/fonts/satoshi-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* The palette, read out of the reference's own :root. themes.palette() parses
   this block to draw the swatch on the marketing site, so these names are the
   contract: bg, bg2, bg3, ln, ln2, tx, mu, fa. */
:root{
  --bg:#101010;        /* the page */
  --bg2:#141414;       /* header, footer, the band behind the hero */
  --bg3:#222121;       /* every card, and the plate under the form */
  --ln:#242424;        /* hairlines: header rule, tab rule, card edges */
  --ln2:#3d3d3d;       /* a border you are meant to see */
  --tx:#ffffff;
  --mu:#b2b2b2;        /* secondary text */
  --fa:#5e5e5e;        /* a dead tab, a disabled control */
  --ic:#a09f9f;        /* icons */
  --plate:#000000;     /* the input plates: pure black, darker than the card */

  /* this theme's own tone, and the ramp built from it */
  --s1:#ff42d0;
  --s1-deep:#99287d;
  --s1-soft:#ffb2ec;
  --s1-hot:#ff1464;
  --s1-line:rgba(255,66,208,.16);
  --s1-ring:rgba(255,66,208,.32);

  --ok:#2dd57a;
  --no:#f84162;
  --wa:#deba00;

  --r-card:28px;       /* every card and the widget shell */
  --r-plate:16px;      /* an input plate */
  --r-pill:999px;
  --r-cta:20px;        /* the primary button */
  --maxw:1280px;
}

/* ---- page -------------------------------------------------------------- */
body{background:var(--bg);color:var(--tx);
  font-family:'S1Sans','PBody',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'S1Sans','PDisplay','PBody',sans-serif;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);padding-inline:16px}
.wrap.narrow{max-width:820px}
.muted,.sec-lede{color:var(--mu)}
.tiny,.small{color:var(--mu)}
a{color:inherit}
::selection{background:var(--s1);color:#fff}
:focus-visible{outline:2px solid var(--s1);outline-offset:2px;border-radius:6px}

/* The marker swash behind a phrase in a heading. Drawn here rather than
   fetched: it is one rounded quadrilateral, it has to take the accent, and a
   background image could not. */
.s1-mark{position:relative;display:inline-block;color:#fff;padding:.08em .34em .12em;margin-inline:-.1em;
  isolation:isolate;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.s1-mark::before{content:'';position:absolute;inset:-2px .18em -6px;z-index:-1;border-radius:14px;
  background:linear-gradient(100deg,var(--s1),var(--a) 92%);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));transform:rotate(-.5deg)}
/* the hand drawn rule under one word of a section heading */
.s1-ul{position:relative;display:inline-block}
.s1-ul::after{content:'';position:absolute;left:0;right:0;bottom:-.28em;height:.14em;border-radius:999px;
  background:linear-gradient(90deg,var(--s1),var(--a));transform:rotate(-.6deg)}

/* ---- header ------------------------------------------------------------ */
.p-head{background:var(--bg2);border-bottom:1px solid var(--ln)}
.p-head .wrap{height:64px;gap:1rem}
.p-brand{font-family:'S1Sans',sans-serif;font-weight:700;font-size:1.22rem;letter-spacing:-.03em;color:var(--tx)}
.p-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--s1),var(--a));color:#fff;font-weight:900;font-size:.95rem}
.p-nav{gap:.25rem;font-size:1rem;font-weight:500;color:var(--tx)}
.p-nav a{padding:.75rem 1rem;border-radius:10px;color:var(--tx);transition:background .18s ease,color .18s ease}
.p-nav a:hover{text-decoration:none;background:rgba(255,255,255,.06)}
.p-nav a.on{color:var(--s1)}
.p-burger{border-color:var(--ln2);color:var(--tx);border-radius:10px}

/* The call to action takes this theme's gradient rather than the flat accent
   every other theme uses. It is still anchored on var(--a) at the far end, so
   an operator who sets their own accent keeps it. */
.p-cta,.p-nav-cta,.p-nav a.p-nav-cta{background:linear-gradient(90deg,var(--s1),var(--a));color:#fff;border-radius:12px;font-weight:700}
.p-cta:hover{filter:brightness(1.08)}

/* ---- hero -------------------------------------------------------------- */
/* The mesh: four radial blobs over black, pinned to the bottom of the hero and
   sized off the section so it scales with it rather than with the viewport. */
.x-wrap{position:relative;isolation:isolate;padding:0 0 clamp(2rem,4vw,3.5rem);overflow:hidden;background:var(--bg)}
.x-wrap::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:#000;
  background-repeat:no-repeat;background-position:50% 100%;background-size:142% 108%;
  /* Four blobs, each on a stop ladder rather than a two stop fade. That ladder
     is the whole trick: it holds the colour almost flat out to a quarter of the
     radius before it starts to go, which is why the reference reads as a field
     of plum and an earlier two stop version of this read as four faint smudges. */
  background-image:
    radial-gradient(54.5% 90% at 75% 48%,rgba(157,59,132,.318),rgba(157,59,132,.322) 12.5%,rgba(157,59,132,.322) 25%,
      rgba(157,59,132,.294) 37.5%,rgba(157,59,132,.231) 50%,rgba(157,59,132,.153) 62.5%,rgba(157,59,132,.075) 75%,
      rgba(157,59,132,.02) 87.5%,rgba(157,59,132,0) 100%),
    radial-gradient(64% 104% at 48% 103.5%,rgba(255,20,100,.314),rgba(255,20,100,.302) 12.5%,rgba(255,20,100,.259) 25%,
      rgba(255,20,100,.204) 37.5%,rgba(255,20,100,.145) 50%,rgba(255,20,100,.086) 62.5%,rgba(255,20,100,.047) 75%,
      rgba(255,20,100,.016) 87.5%,rgba(255,20,100,0) 100%),
    radial-gradient(65% 94.5% at 17.6% 98.7%,rgba(255,178,236,.361),rgba(255,178,236,.361) 12.5%,rgba(255,178,236,.341) 25%,
      rgba(255,178,236,.294) 37.5%,rgba(255,178,236,.224) 50%,rgba(255,178,236,.137) 62.5%,rgba(255,178,236,.063) 75%,
      rgba(255,178,236,.012) 87.5%,rgba(255,178,236,0) 100%),
    radial-gradient(58.5% 75% at 14.6% 40%,rgba(255,66,208,.314),rgba(255,66,208,.306) 12.5%,rgba(255,66,208,.271) 25%,
      rgba(255,66,208,.216) 37.5%,rgba(255,66,208,.149) 50%,rgba(255,66,208,.082) 62.5%,rgba(255,66,208,.031) 75%,
      rgba(255,66,208,0) 87.5%,rgba(255,66,208,0) 100%)}
.x-wrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:160px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,16,16,0),var(--bg))}

/* The inversion that makes this design: the widget is the hero and the headline
   sits under it. One column, both centred. */
.x-grid{grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,3vw,2.25rem);justify-items:center;padding-top:clamp(1.5rem,3vw,2.5rem)}
.x-copy{order:2;text-align:center;max-width:1272px}
.x-box{order:1}

.x-copy h1{font-size:clamp(2rem,4.6vw,3.75rem);line-height:1.1;font-weight:700;margin:0 0 .5rem;color:#fff;padding-inline:8px}
.x-copy .lede,.x-copy .x-claims{color:var(--mu)}
.x-copy .lede{font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.4;font-weight:500;margin:.75rem auto 0;max-width:78ch;color:#fff;opacity:.92}
.x-copy .x-claims{justify-content:center;font-size:.76rem;letter-spacing:.1em;color:var(--s1);margin:.9rem 0 0}
.x-badge{border-color:var(--s1-ring);color:var(--s1);background:rgba(255,66,208,.08)}

/* the three numbers, as one strip of charcoal cells */
.x-stats{border:0;gap:12px;background:none;max-width:720px;margin-inline:auto;justify-content:center}
.x-stats div{border:1px solid var(--ln);border-radius:var(--r-plate);background:var(--bg3);padding:.9rem 1.2rem;text-align:center}
.x-stats dt{font-family:'S1Sans',sans-serif;font-weight:700;color:#fff}
.x-stats dd{color:var(--mu);opacity:1}

/* ---- the exchange widget ----------------------------------------------- */
/* The shell: a thick translucent ring in the theme tone, a 28px radius, and a
   page coloured body so the widget reads as cut out of the gradient. */
.x-box{width:100%;max-width:560px;background:var(--bg);border:8px solid var(--s1-line);border-radius:var(--r-card);overflow:visible;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.x-inner{padding:0;background:var(--bg);border-radius:20px;overflow:hidden}

/* the tab strip across the top of the widget */
.x-toggle{display:flex;gap:0;padding:0;margin:0;border-bottom:1px solid var(--ln);background:var(--bg);border-radius:0}
.x-toggle button{flex:0 0 auto;width:auto;padding:20px 16px;font-size:1.05rem;font-weight:700;line-height:1.2;border-radius:16px 20px 0 0;
  color:var(--fa);background:none;position:relative;border-bottom:2px solid transparent;transition:color .18s ease}
.x-toggle button:first-child{margin-inline-start:24px}
.x-toggle button:last-child{margin-inline-end:24px}
.x-toggle button:hover{color:var(--mu)}
.x-toggle button[aria-pressed=true]{color:#fff;border-bottom-color:var(--a);background:var(--bg)}

/* the body of the form */
.x-box form,.x-form-body{display:block}
.x-fields{padding:20px 24px;display:block}

/* an input plate: pure black, 64px, coin pill on the start side, figure on the
   end side. The reference sets no visible border; the focus ring is the accent. */
.x-leg{background:var(--plate);border:2px solid transparent;border-radius:var(--r-plate);height:64px;padding:12px 16px 12px 12px;
  gap:.6rem;align-items:center;transition:border-color .18s ease,background .18s ease}
.x-leg:focus-within{border-color:var(--a)}
.x-leg .grow{display:flex;flex-direction:column;justify-content:center;text-align:end;min-width:0;order:2}
.x-leg .x-pick{order:1}
.x-leg label{font-size:.75rem;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ic);margin:0 0 2px;text-align:end}
.x-amt{font-family:'S1Sans',sans-serif;font-size:1.5rem;font-weight:700;line-height:1.15;text-align:end;color:#fff;letter-spacing:-.01em}
.x-amt::placeholder{color:var(--fa)}
.x-usd{display:none}

/* the coin pill. No chip, no capsule: the reference puts the icon, the ticker
   and the network straight on the plate. */
.x-pick{background:none;border-radius:10px;padding:0 4px 0 0;gap:8px;font-size:1.25rem;font-weight:600;color:#fff;align-items:center}
.x-pick:hover{transform:none;background:rgba(255,255,255,.04)}
.x-pick img{width:42px;height:42px;border-radius:50%}
.x-pick>span:nth-child(2){display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;gap:1px}
.x-pick .net{font-size:.75rem;font-weight:500;color:var(--ic);opacity:1}
.x-pick>span:last-child{font-size:.7rem;color:var(--ic);margin-inline-start:-2px}

/* the swap control sits in its own row between the plates, pushed to the start
   edge, as a white disc with a dark glyph and a page coloured ring. */
.x-flip{justify-content:flex-start;margin:8px 0;padding-inline-start:2px}
.x-flip button{width:40px;height:40px;border-radius:50%;background:#fff;color:#000;border:1px solid var(--ln2);
  box-shadow:0 0 0 4px var(--bg);font-size:1.05rem;font-weight:700}
.x-flip button:hover{transform:rotate(180deg);background:#f0f0f0}
.x-out{margin-top:0}

.x-rate{padding:10px 4px 0;font-size:.8rem;color:var(--ic);justify-content:flex-start}
.x-rate span{color:var(--ic)}

/* the address plate, same material as a leg but shorter */
.x-field{margin-top:16px}
.x-field label{font-size:.75rem;font-weight:500;color:var(--ic);margin-bottom:6px}
.x-field input{background:var(--plate);border:2px solid transparent;border-radius:var(--r-plate);height:56px;padding:0 16px;
  font-size:1rem;color:#fff;transition:border-color .18s ease}
.x-field input::placeholder{color:var(--fa)}
.x-field input:focus{border-color:var(--a)}
.x-hint{color:var(--ic);font-size:.75rem}
.x-field details summary,.x-field>summary{color:var(--mu)}
details.x-field summary{font-size:.8rem;color:var(--ic)}

/* the plate under the form: a lighter charcoal shelf carrying the button and
   the terms line, with the widget's bottom corners on it */
.x-foot{background:var(--bg3);border-radius:0 0 20px 20px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:12px}
.x-go{margin:0;width:100%;height:48px;min-height:48px;padding:8px 16px;border-radius:var(--r-cta);
  background:linear-gradient(90deg,var(--s1),var(--a));color:#fff;font-size:1.125rem;font-weight:700;
  border:1px solid transparent;transition:filter .18s ease,transform .18s ease}
.x-go:hover{filter:brightness(1.08)}
.x-go:active{filter:brightness(.92);transform:translateY(1px)}
.x-go[disabled]{filter:grayscale(.4);opacity:.6}
.x-note{margin:0;font-size:.75rem;line-height:1.4;color:var(--mu);text-align:center}
.x-note a{color:var(--s1);font-weight:700}

.x-err{background:rgba(248,65,98,.12);border-color:rgba(248,65,98,.4);color:#ffb3c0;border-radius:12px}

/* the promo row inside the widget: a hairline ring in the theme tone */
.s1-promo{display:flex;align-items:center;gap:12px;margin-top:16px;padding:0 12px 0 0;min-height:66px;
  background:var(--bg3);border-radius:var(--r-plate);box-shadow:inset 0 0 0 1px var(--s1);overflow:hidden;color:inherit}
.s1-promo:hover{text-decoration:none;filter:brightness(1.06)}
.s1-promo-ico{width:92px;height:64px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(255,66,208,.22),rgba(153,40,125,.22));color:var(--s1)}
.s1-promo-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.s1-promo-tx b{font-size:1.05rem;font-weight:600;line-height:1.2;color:#fff}
.s1-promo-tx em{font-style:normal;font-size:.8rem;font-weight:500;color:var(--mu)}
.s1-promo-go{color:var(--ic);font-size:1.3rem;flex:0 0 auto}

/* ---- the live price strip ---------------------------------------------- */
.p-ticker{background:var(--bg2);border-color:var(--ln)}
.p-tick{border-right-color:var(--ln);color:var(--mu);font-weight:500}
.p-tick b{color:#fff}
.p-tick .px{font-family:'S1Sans',sans-serif;font-weight:700;color:#fff}
.p-tick .up{color:var(--ok)}
.p-tick .dn{color:var(--no)}

/* ---- sections ---------------------------------------------------------- */
.sec{padding:clamp(3rem,7vw,6rem) 0}
.sec-alt{background:var(--bg)}
.sec-h{font-size:clamp(1.75rem,3.4vw,3rem);line-height:1.12;font-weight:700;color:#fff}
.s1-sec-h{text-align:center;margin:0 0 clamp(1.5rem,3vw,2.5rem)}
.sec-head{margin-bottom:clamp(1.4rem,3vw,2rem)}
.sec-lede{font-size:1.125rem;line-height:1.3;font-weight:500;color:var(--mu);max-width:62ch}
.sec-link{color:var(--s1);font-weight:700}

/* The card this whole page is built from. */
.card,.s1-card{background:var(--bg3);border:0;border-radius:var(--r-card);padding:clamp(1.25rem,2.4vw,2.25rem);color:var(--tx)}
.s1-card h3,.card h3{font-size:clamp(1.125rem,1.7vw,1.5rem);line-height:1.1;font-weight:700;margin:0 0 .5rem;letter-spacing:.012em;color:#fff}
.s1-card p,.card p{font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.25;font-weight:500;color:var(--mu);margin:0;letter-spacing:.012em}
.s1-ico{display:block;width:60px;height:60px;color:var(--s1);margin-bottom:1rem}
.s1-ico svg{display:block;width:100%;height:100%}

/* two wide cards over a row of narrow ones */
.s1-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.s1-two .s1-card{display:flex;flex-direction:column;gap:clamp(1.5rem,4vw,3.2rem);min-height:303px}
.s1-two .s1-card>div{margin-top:auto}

/* the explore block: one tall card beside a column of four */
.s1-explore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:stretch}
.s1-explore-col{display:flex;flex-direction:column;gap:1rem}
.s1-explore-hero{position:relative;overflow:hidden;min-height:480px;display:flex;flex-direction:column}
.s1-explore-hero h3{font-size:clamp(1.25rem,1.9vw,1.5rem)}
.s1-explore-lede{font-size:clamp(1.05rem,1.4vw,1.375rem)!important;line-height:1.35!important;color:#fff!important;
  font-weight:500;max-width:82%;position:relative;z-index:2}
/* the drawing at the foot of the tall card: concentric rings and a routed line,
   drawn in CSS because it is the one picture this page needs and an SVG asset
   for it would be one more file to keep in step with the palette */
.s1-rings{position:absolute;inset-inline:0;bottom:-30%;height:0;padding-bottom:92%;pointer-events:none;opacity:1;z-index:1}
.s1-rings i{position:absolute;inset-inline:0;bottom:0;margin-inline:auto;border-radius:50%;border:1px solid var(--ln2);aspect-ratio:1}
.s1-rings i:nth-child(1){width:46%;border-color:var(--s1-ring)}
.s1-rings i:nth-child(2){width:66%;border-color:rgba(255,66,208,.3)}
.s1-rings i:nth-child(3){width:88%;border-color:rgba(255,255,255,.12)}
.s1-rings i:nth-child(4){width:112%;border-color:rgba(255,255,255,.08)}
.s1-rings b{position:absolute;left:50%;bottom:22%;width:54px;height:54px;margin-inline-start:-27px;border-radius:50%;
  background:linear-gradient(135deg,var(--s1),var(--a));box-shadow:0 0 44px rgba(255,66,208,.5)}

/* the routing drawing: where a quote comes from, and where the coins go. Drawn
   rather than fetched, because every line of it has to take the accent. */
.s1-route{position:absolute;inset-inline:0;bottom:4%;height:58%;z-index:2;pointer-events:none}
.s1-route svg{display:block;width:100%;height:100%;overflow:visible}
.s1-route .s1-route-tag{fill:#fff;font:700 15px 'S1Sans',sans-serif}
.s1-route .s1-route-big{fill:#fff;font:700 19px/1 'S1Sans',sans-serif}
.s1-explore-hero{justify-content:flex-start}

/* how it works: speech bubble cards on a stack, each with a tail */
.s1-steps{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:1rem;max-width:768px;position:relative}
.s1-steps li{position:relative;display:flex;align-items:center;gap:1rem;background:var(--bg3);border-radius:var(--r-card);
  padding:clamp(1rem,2vw,2rem);z-index:3}
.s1-steps li::after{content:'';position:absolute;bottom:-22px;inset-inline-start:52px;width:0;height:0;
  border-inline-start:9px solid var(--bg3);border-top:12px solid transparent;border-bottom:12px solid transparent;
  transform:rotate(-90deg);z-index:1}
.s1-steps li:last-child::after{display:none}
.s1-steps .s1-n{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg2);color:var(--s1);font-size:1.5rem;font-weight:700}
.s1-steps h3{margin:0 0 .3rem;font-size:clamp(1.125rem,1.5vw,1.5rem);font-weight:700;color:#fff}
.s1-steps p{margin:0;font-size:clamp(1rem,1.1vw,1.125rem);line-height:1.22;font-weight:500;color:var(--mu)}
/* the two rotated stickers either side of the stack, desktop only */
.s1-sticker{position:absolute;display:none;place-items:center;text-align:center;border-radius:var(--r-card);
  width:156px;height:156px;padding:1.5rem;font-size:1.5rem;font-weight:700;color:var(--mu);
  background:linear-gradient(107deg,#3e3e3e 37%,#272727 88%);transform:rotate(-18deg);inset-inline-start:-148px;bottom:20px;z-index:1}
.s1-sticker-go{inset-inline-start:auto;inset-inline-end:-186px;top:-48px;bottom:auto;transform:rotate(10deg);
  background:var(--bg);border:2px solid transparent;color:#fff;width:204px;height:204px;gap:1.25rem;
  background-image:linear-gradient(231deg,rgba(255,66,208,.1),rgba(153,40,125,.1)),linear-gradient(var(--bg),var(--bg)),
    radial-gradient(90% 70% at 100% 0,#fff,var(--s1-soft) 14%,var(--s1) 38%);
  background-origin:border-box;background-clip:padding-box,padding-box,border-box}
.s1-sticker-go b{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:#fff;color:#000;font-size:1.5rem}
@media(min-width:1100px){.s1-sticker{display:grid}}
.s1-steps-cta{display:flex;justify-content:center;margin-top:1.5rem}

/* the pill outline button this design uses for anything secondary */
.s1-pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--tx);border-radius:var(--r-pill);
  padding:1rem 2rem;font-size:clamp(1rem,1.4vw,1.5rem);font-weight:700;color:var(--tx);background:none;cursor:pointer;
  font-family:inherit;transition:background .3s ease,color .3s ease,border-color .3s ease}
.s1-pill:hover{text-decoration:none;background:#fff;color:#000;border-color:#fff}
.s1-pill:active{filter:brightness(.75)}

/* the banner with the gradient edge */
/* The whale is allowed to break the CARD edge but never the page, so the
   clipping happens one level up, on the section. base.css does the same thing
   on .x-wrap and for the same reason: without it a phone scrolls sideways. */
.s1-sec-banner{overflow:hidden}
.s1-banner{position:relative;max-width:1344px;margin-inline:auto;border-radius:24px;isolation:isolate}
.s1-banner::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,var(--a) -1%,var(--s1) 13%,#c47628 31%,rgba(255,255,255,.3) 67%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.s1-banner-in{position:relative;border-radius:24px;padding:clamp(1.5rem,3vw,2.5rem);overflow:visible;
  background:linear-gradient(135deg,#58274c,#1e121b 42%,#58274c);box-shadow:inset 4px 4px 80px 1px rgba(255,255,255,.1)}
.s1-banner-in>*{position:relative;z-index:3}
/* the whale: on a phone it sits over the card, on a desk it breaks the end edge */
.s1-whale{position:relative;z-index:2;display:block;width:120%;max-width:none;margin:-1rem auto -3rem;
  pointer-events:none;user-select:none;transform:rotate(-12deg)}
@media(min-width:1100px){
  .s1-whale{position:absolute;z-index:6;top:-3rem;inset-inline-end:-9rem;inset-inline-start:auto;
    width:min(50%,600px);margin:0;transform:rotate(-12deg)}
  [dir=rtl] .s1-whale{transform:rotate(12deg) translateX(6%) scaleX(-1)}
  .s1-banner-in{min-height:420px}
  .s1-feats,.s1-banner h2{max-width:62%}
}
.s1-banner h2{font-size:clamp(1.75rem,3vw,3rem);font-weight:700;color:#fff;margin:0 0 1.5rem;text-align:center}
.s1-feats{list-style:none;margin:0 0 1.5rem;padding:1.5rem 1rem .75rem;display:flex;flex-direction:column;gap:1rem;
  border-radius:24px;position:relative;isolation:isolate;max-width:780px}
.s1-feats::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0))}
.s1-feats li{display:flex;align-items:center;gap:.75rem}
.s1-feats li>span:first-child{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff}
.s1-feats li>.grow{min-width:0}
.s1-feats b{display:block;font-size:1rem;font-weight:700;color:#fff}
.s1-feats em{display:block;font-style:normal;font-size:1rem;font-weight:500;color:rgba(255,255,255,.5)}
.s1-banner-cta{display:inline-flex;align-items:center;justify-content:center;height:56px;padding-inline:2rem;border-radius:999px;
  font-size:1rem;font-weight:700;color:#fff;background:linear-gradient(93deg,var(--s1) 4%,var(--a) 95%);transition:filter .2s}
.s1-banner-cta:hover{text-decoration:none;filter:brightness(1.08)}
@media(min-width:1100px){
  .s1-banner h2{text-align:start}
  .s1-feats{min-width:640px}
  .s1-feats::before{background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,0))}
}

/* ---- the coin wall, the market table, questions ------------------------- */
.coin-wall{gap:.6rem}
.coin-chip{background:var(--bg3);border-color:transparent;border-radius:var(--r-pill);padding:.55rem .95rem .55rem .6rem;color:#fff;font-weight:500}
.coin-chip:hover{background:#2b2b2b;text-decoration:none}
.coin-chip em{color:var(--ic)}

.mk th{color:var(--ic);border-bottom-color:var(--ln)}
.mk td{border-bottom-color:var(--ln);color:var(--tx)}
.mk tbody tr:hover td{background:rgba(255,255,255,.03)}
.mk-asset b{color:#fff}
.mk-asset em{color:var(--ic)}
.mk-go{border-color:var(--ln2);border-radius:999px;color:var(--tx)}
.mk-go:hover{background:var(--s1);border-color:var(--s1);color:#fff}
.mk-card{background:var(--bg3);border-color:transparent;border-radius:var(--r-plate)}
.mk-card-l{color:var(--ic)}
.mk-find{background:var(--plate);border-color:transparent;border-radius:var(--r-plate);color:#fff;height:48px}
.mk-find:focus{border-color:var(--a)}
.mk-live{color:var(--ok)}
.up{color:var(--ok)}.dn{color:var(--no)}

/* questions: one rounded card per open question, a hairline for the rest */
.faq{display:flex;flex-direction:column}
.faq details{border-bottom:1px solid rgba(255,255,255,.05);border-radius:var(--r-card);padding:0 1.25rem;transition:background .2s ease}
.faq details[open]{background:var(--bg3);border-bottom-color:transparent;margin:1rem 0}
.faq summary{padding:1.25rem 0;font-size:1.125rem;font-weight:600;color:#fff;gap:1.5rem}
.faq p{color:var(--mu);font-size:1rem;line-height:1.5;padding-bottom:.4rem}
.faq-x{color:var(--ic);opacity:1}
.s1-faq{display:grid;grid-template-columns:380px minmax(0,1fr);gap:4rem;align-items:start}
.s1-faq-side h2{text-align:start;margin:0}
@media(max-width:980px){.s1-faq{grid-template-columns:minmax(0,1fr);gap:2rem}.s1-faq-side h2{text-align:center}}

/* ---- the closing band --------------------------------------------------- */
/* The one loud block on the page: a full gradient card with a white pill. */
.sec-cta{padding-bottom:clamp(3rem,7vw,6rem)}
.cta-band{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;max-width:1344px;margin-inline:auto;
  padding:clamp(2rem,4vw,4rem) clamp(1rem,2vw,2rem);border:1px solid var(--ln);border-radius:var(--r-card);
  background:linear-gradient(120deg,var(--s1-soft),var(--s1-hot) 40%,var(--s1-hot) 50%,var(--a))}
.cta-band .sec-h{font-size:clamp(1.75rem,4vw,3.75rem);line-height:1.05;font-weight:700;color:#fff;max-width:50rem;margin:0}
.cta-band p{font-size:clamp(1rem,1.6vw,1.5rem);line-height:1.3;font-weight:700;color:#fff;max-width:60rem;margin:.5rem 0 0}
.cta-band>div{display:contents}
.btn-go{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:8px;
  padding:1rem clamp(2rem,4vw,4rem);border-radius:999px;background:#fff;color:#1d1d1f;border:0;
  font-size:clamp(1rem,2vw,1.875rem);font-weight:700;line-height:1.2;transition:background .3s,color .3s,filter .3s}
.btn-go:hover{background:#1d1d1f;color:#fff;text-decoration:none}
.btn-go:active{background:#1d1d1f;color:#fff;filter:brightness(.85)}

/* ---- generic controls, order / track / rates / legal -------------------- */
.btn{border-radius:var(--r-cta);font-weight:700;padding:.75rem 1.3rem}
.btn-primary,.btn-go-sm{background:linear-gradient(90deg,var(--s1),var(--a));color:#fff;border-color:transparent}
.btn-line{border-color:var(--ln2);color:var(--tx)}
.btn-line:hover{background:rgba(255,255,255,.06)}
.pill{border-color:var(--ln2);color:var(--mu);border-radius:999px}
.kv{border-bottom-color:var(--ln)}
.kv b{color:#fff}
.addr{background:var(--plate);border-color:transparent;border-radius:var(--r-plate);color:#fff}
.steps div{background:var(--ln2)}
.steps div.on{background:linear-gradient(90deg,var(--s1),var(--a))}
.ord-qr{border-radius:var(--r-plate)}
.p-ticker+.sec,.sec+.sec{border-top:0}
input,select,textarea{font-family:inherit}
.cp-box{background:var(--bg3);border-radius:var(--r-card);border:1px solid var(--ln)}
.cp-search{border-bottom-color:var(--ln)}
.cp-search input{background:var(--plate);border-color:transparent;border-radius:var(--r-plate);color:#fff;height:48px}
.cp-search input:focus{border-color:var(--a);outline:none}
.cp-item{border-radius:var(--r-plate)}
.cp-item:hover{background:rgba(255,255,255,.06)}
.cp-item b{color:#fff}
.cp-item span{color:var(--ic)}

/* ---- footer ------------------------------------------------------------- */
.p-foot{background:var(--bg2);border-top:1px solid var(--ln);padding:clamp(2.5rem,5vw,6rem) 0 2rem;color:var(--mu)}
.p-foot strong{color:#fff;font-size:1.1rem}
.p-foot a{color:#fff;font-size:1rem;font-weight:700;margin-right:0;display:block;padding:.35rem 0;transition:color .3s}
.p-foot a:hover{color:var(--mu);text-decoration:underline}
.p-foot .fgrid{gap:2rem}
.p-foot select{border-color:var(--ln2);border-radius:10px;color:var(--mu)}
.s1-foot-pairs{margin-top:clamp(2rem,4vw,4rem);border-top:1px solid var(--ln);padding-top:clamp(2rem,4vw,4rem)}
.s1-foot-pairs h3{font-size:1rem;font-weight:400;color:var(--mu);margin:0 0 1.5rem}
.s1-foot-pairs ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* ---- motion ------------------------------------------------------------- */
/* The one thing that moves of its own accord: the mesh breathes. Slow enough
   that you notice it only if you look, and gone entirely under reduced motion. */
@keyframes s1-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.86;transform:scale(1.04)}}
.x-wrap::before{animation:s1-breathe 18s ease-in-out infinite;transform-origin:50% 100%}

/* ---- phone -------------------------------------------------------------- */
@media(max-width:1100px){
  .s1-explore{grid-template-columns:minmax(0,1fr)}
  .s1-explore-hero{min-height:360px}
  .s1-explore-hero p{max-width:100%}
}
@media(max-width:860px){
  .s1-two{grid-template-columns:minmax(0,1fr)}
  .x-grid{padding-top:1rem}
}
@media(max-width:620px){
  .p-nav{background:var(--bg2);border-bottom-color:var(--ln)}
  .x-box{border-width:4px;border-radius:22px}
  .x-inner{border-radius:18px}
  .x-fields{padding:16px 12px}
  .x-foot{padding:12px 8px;border-radius:0 0 18px 18px}
  .x-toggle{overflow-x:auto;scrollbar-width:none}
  .x-toggle::-webkit-scrollbar{display:none}
  .x-toggle button{padding:16px 12px;font-size:.95rem}
  .x-toggle button:first-child{margin-inline-start:12px}
  .x-toggle button:last-child{margin-inline-end:12px}
  .x-leg{height:auto;min-height:64px;padding:10px 12px}
  .x-pick img{width:34px;height:34px}
  .x-pick{font-size:1.05rem}
  .x-amt{font-size:1.25rem}
  .x-copy h1{font-size:2rem;line-height:1.06}
  .x-copy .lede{font-size:1rem}
  .s1-steps li{flex-direction:column;align-items:center;text-align:center;gap:.6rem}
  .s1-steps li::after{inset-inline-start:0;inset-inline-end:0;margin-inline:auto;width:0}
  .s1-steps .s1-n{display:none}
  .s1-steps h3 .s1-n-in{display:inline;color:var(--s1)}
  .s1-feats{padding:1rem .75rem .5rem}
  .cta-band{border-radius:20px}
  .x-stats{flex-direction:column}
}
/* the inline step number only exists on a phone, where the disc is dropped */
.s1-n-in{display:none}

@media(prefers-reduced-motion:reduce){
  .x-wrap::before{animation:none}
  .s1-pill,.btn-go,.x-go,.s1-banner-cta{transition:none}
}

/* The scribbled question marks beside the FAQ heading. Decoration, and the one
   place on the page where the theme tone is allowed to be the loudest thing. */
.s1-doodle{display:block;width:72px;height:auto;color:var(--s1);margin:0 0 .6rem}
.s1-faq-side{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:980px){.s1-faq-side{align-items:center}}

/* back to the top. Real, useful, and the design has one. */
.s1-top{position:fixed;inset-inline-end:18px;bottom:18px;z-index:60;width:44px;height:44px;border-radius:50%;border:0;
  display:grid;place-items:center;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--s1),var(--a));
  box-shadow:0 10px 30px -8px rgba(255,66,208,.6);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s}
.s1-top.on{opacity:1;visibility:visible;transform:none}
.s1-top:hover{filter:brightness(1.1)}
.s1-top svg{display:block}
@media print{.s1-top{display:none}}

/* --- header: the language popover, the active link and the call to action --- */
.p-nav a.on{color:var(--s1);background:rgba(255,255,255,.07)}
.p-lang>summary{color:var(--mu);border:1px solid transparent}
.p-lang>summary:hover{color:var(--tx);background:rgba(255,255,255,.08)}
.p-lang[open]>summary{color:var(--tx);background:rgba(255,255,255,.08);border-color:var(--ln2)}
.p-lang-pop{background:var(--bg3);border-color:var(--ln2)}
.p-lang-pop a{color:var(--mu)}
.p-lang-pop a:hover{background:rgba(255,255,255,.08);color:var(--tx)}
.p-lang-pop a.on{color:var(--s1);font-weight:700}
.p-burger{border-color:var(--ln2);color:var(--tx)}
@media(max-width:900px){.p-nav{background:var(--bg3);border-color:var(--ln)}}

/* --- footer, rebuilt 2026-10-30 --- */
.p-foot{background:var(--bg2)}
.foot-bar{border-top-color:var(--ln)}
.foot-col h2{color:var(--mu)}
.foot-live{color:var(--ok)}
.foot-lang select{border-color:var(--ln2)}
.p-foot a{display:block;margin:0 0 .6rem}

/* --- premium layer support, 2026-10-30 --- */
:root{
  --atmo-1:rgba(255,66,208,.2);
  --atmo-2:rgba(157,59,132,.2);
  --atmo-3:rgba(255,20,100,.14);
  --grid-ln:rgba(255,255,255,.035);
}
.eyebrow{color:var(--s1)}
.statrow{background:var(--ln)}
.stat{background:var(--bg3)}
.stat-l{color:var(--ic)} .stat-v{color:#fff} .stat-s{color:var(--mu)}
.sec-intro .lede{color:var(--mu)}

/* --- liveness tint --- */
:root{--spark:rgba(255,150,220,.5);--sweep:rgba(255,66,208,.1)}
:root{--fx:rgba(255,66,208,.55)}