/* Ghost: the loud privacy swap look. Near black with plum and violet washes at
   the top of the page, one pink to accent gradient doing all the shouting, and
   the exchange box centred under the headline as the only thing in the hero.
   Built against a reference opened in a browser rather than from memory, so the
   colours, the type scale and the radii below are measured, not guessed.

   The pink is this theme's own secondary tone, and the only decoration any
   theme here carries. It never replaces the operator's accent: every
   gradient runs pink -> var(--a), so a panel keeps its brand colour at the end
   of every button it owns. */

/* DM Sans, self hosted. Latin and latin-ext are the whole font: it ships no
   Cyrillic, Arabic or CJK, so ru, uk, ar, fa, zh, ja, hi and the rest fall
   through to PBody below, which is what the fallback stack is for. */
@font-face{font-family:'GhostSans';src:url('/_p/fonts/dmsans-latin.woff2') format('woff2');
  font-weight:100 1000;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'GhostSans';src:url('/_p/fonts/dmsans-latin-ext.woff2') format('woff2');
  font-weight:100 1000;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#08061c; --bg2:#15122b; --bg3:#2a2354;
  --ln:#241f45; --ln2:#342c63;
  --tx:#ffffff; --mu:#a9a3c9; --fa:#7b749f;
  --ok:#34d399; --wa:#fbbf24; --no:#f87171;
  /* the theme's own tone: pink, its deep end, and the lines drawn from it */
  --gh:#ff61d2; --gh2:#c742f7; --gh-deep:#9b51e0;
  --gh-line:rgba(255,97,210,.34); --gh-glow:rgba(255,97,210,.13);
  --gh-card:linear-gradient(180deg,#1c1838,#15122b);
}

/* One family for the whole page, headings included. The reference sets its
   display type in the same grotesque as its body copy, which is what gives it
   that flat, app-like voice. */
body{background:var(--bg);color:var(--tx);font-family:'GhostSans','PBody',system-ui,-apple-system,'Segoe UI',sans-serif}
h1,h2,h3{font-family:'GhostSans','PBody',sans-serif;font-weight:700;letter-spacing:-.022em}
a{color:var(--gh)}
a:hover{color:var(--gh2)}

/* ---------------------------------------------------------------------------
   Header: translucent over the plum wash, nothing solid under it.
   --------------------------------------------------------------------------- */
.p-head{background:rgba(10,7,27,.72);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.055)}
.p-brand{color:var(--tx);font-family:'GhostSans','PDisplay',sans-serif;font-weight:700}
.p-logo{background:linear-gradient(135deg,var(--gh),var(--a));color:#fff;border-radius:11px}
.p-nav{color:var(--mu)}
.p-nav a{color:var(--mu);font-weight:600;font-size:.94rem}
.p-nav a:hover,.p-nav a.on{color:var(--gh)}
.p-burger{border-color:var(--ln2);color:var(--tx);border-radius:10px}
@media(max-width:620px){
  .p-nav{background:#120e2b;border-color:var(--ln)}
  .p-nav a{border-bottom:1px solid var(--ln)}
}

/* ---------------------------------------------------------------------------
   Hero. Centred, the way the loud swap services set theirs: headline across the
   page, a caps claim line under it, and the widget dead centre below.
   --------------------------------------------------------------------------- */
/* Two washes at the top corners, magenta on the left and violet on the right,
   and a wide dim one behind them. They are deliberately tall: measured against
   the reference, the colour still has to be there level with the headline and
   only give out below the box. */
.x-wrap{position:relative;background:
  radial-gradient(1100px 900px at 2% -6%,rgba(190,40,170,.20),transparent 66%),
  radial-gradient(1050px 880px at 98% -2%,rgba(126,56,230,.20),transparent 66%),
  radial-gradient(1500px 1000px at 50% -24%,rgba(96,28,128,.22),transparent 72%),
  linear-gradient(180deg,#120920,var(--bg) 78%)}
.x-wrap .wrap{position:relative}
/* the accent's own halo behind the box, so an operator's colour is in the hero
   and not only on its buttons */
.x-wrap::before{content:'';position:absolute;inset:14% auto auto 50%;width:780px;height:560px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,var(--a-glow),transparent 72%);opacity:.9}

.x-grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:1.4rem}
.x-copy{max-width:none;width:100%}
.x-badge{border-color:var(--gh-line);background:var(--gh-glow);color:var(--gh);margin-bottom:1.2rem}
.x-copy h1{font-size:clamp(2.05rem,5.1vw,3.45rem);line-height:1.04;letter-spacing:-.025em;
  color:#fff;max-width:19ch;margin:0 auto .2rem}
.x-claims{justify-content:center;color:var(--gh);font-size:.8rem;letter-spacing:.11em;margin:1rem 0 1.1rem}
.x-claims span+span::before{color:var(--gh);opacity:.6}
.x-copy .lede{color:var(--mu);font-size:1rem;max-width:56ch;margin:0 auto}

/* The three numbers as one bordered row with dividers, compact enough that it
   does not push the box off the fold. */
.x-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:1.4rem auto 0;width:auto;
  background:rgba(255,255,255,.028);border:1px solid var(--ln);border-radius:16px;padding:.1rem .3rem}
.x-stats div{border:0;border-inline-start:1px solid var(--ln);padding:.7rem 1.4rem;text-align:center}
.x-stats div:first-child{border-inline-start:0}
.x-stats div::before{display:none}
.x-stats dt{color:#fff;font-family:'GhostSans','PDisplay',sans-serif;font-size:1.35rem}
.x-stats dd{color:var(--fa);font-size:.76rem;letter-spacing:.04em}

/* ---------------------------------------------------------------------------
   The widget. This is the product and the reference treats it as the hero, so:
   a tab strip, two deep legs split by a hairline with a round flip button on
   it, the dollar value under each figure, and one wide gradient button.
   --------------------------------------------------------------------------- */
/* The panel is DARKER than the hero it sits on, not lighter: the wash is the
   light source and the box is the hole punched in it. That reading is what
   makes the widget look like it is floating rather than painted on. */
.x-box{width:min(100%,544px);background:rgba(7,6,27,.76);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.085);border-radius:18px;
  box-shadow:0 44px 100px -44px #000,inset 0 1px 0 rgba(255,255,255,.05)}
.x-inner{padding:clamp(1.15rem,2.3vw,1.5rem)}
/* a centred hero does not mean a centred form: labels over left aligned
   numbers read as a mistake. */
.x-box,.x-box *{text-align:start}
.x-go{text-align:center}

.x-toggle{background:none;padding:0;gap:.2rem;margin:-.25rem 0 1.15rem;border-bottom:1px solid var(--ln);border-radius:0}
.x-toggle button{flex:1;border-radius:0;padding:.8rem .4rem;font-size:.92rem;font-weight:700;color:var(--fa);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .16s ease,border-color .16s ease}
.x-toggle button:hover{color:var(--mu)}
.x-toggle button[aria-pressed=true]{background:none;color:#fff;border-bottom-color:var(--gh)}

.x-leg{background:var(--bg3);border:1px solid transparent;border-radius:16px;padding:1.1rem 1.15rem}
.x-leg:focus-within{border-color:var(--gh-line)}
.x-leg label{color:#b8b1d8;font-size:.7rem;letter-spacing:.12em}
/* the figure is set in the page's own face, not in mono: the reference prints a
   big round grotesque numeral and it is half of why the box looks the way it does */
.x-amt{font-family:'GhostSans','PBody',sans-serif;font-size:1.6rem;font-weight:700;letter-spacing:-.025em;color:#fff}
.x-amt::placeholder{color:#6f6895}
.x-usd{color:#8d86b5;font-size:.78rem;margin-top:.15rem}

.x-pick{background:#352d63;color:#fff;border-radius:100px;padding:.42rem .9rem .42rem .42rem;font-weight:700}
.x-pick:hover{background:#3f3673}
.x-pick img{width:28px;height:28px}
/* the network as a small coloured chip beside the ticker, not a second line */
.x-pick .net{display:inline-block;margin-inline-start:.42rem;padding:.1rem .4rem;border-radius:6px;
  background:var(--a-glow);color:var(--a-soft);font-size:.62rem;font-weight:700;opacity:1;line-height:1.55;vertical-align:1px}

.x-flip{position:relative;margin:.75rem 0}
.x-flip::before{content:'';position:absolute;left:.2rem;right:.2rem;top:50%;height:1px;background:var(--ln2);opacity:.7}
.x-flip button{position:relative;width:42px;height:42px;border-radius:50%;background:#1b1540;border-color:var(--ln2);
  color:var(--gh);font-size:1.1rem}
.x-flip button:hover{border-color:var(--gh);background:#231a4e}

.x-rate{color:var(--mu);font-size:.86rem}
.x-field label{color:#e4e0f5;font-weight:600}
.x-field input{background:#1a1538;border:1px solid var(--ln2);border-radius:12px;color:#fff;padding:.85rem .95rem}
.x-field input::placeholder{color:#6f6895}
.x-field input:focus{border-color:var(--gh);box-shadow:0 0 0 3px var(--gh-glow)}
.x-hint{color:var(--fa)}

.x-go{background:linear-gradient(90deg,var(--gh),var(--a));color:var(--a-ink);border-radius:14px;
  padding:1.1rem;font-size:1.04rem;font-weight:700;box-shadow:0 16px 36px -16px var(--gh)}
.x-go:hover{filter:brightness(1.07)}
/* the line under the button is a link in the reference, so it reads like one */
.x-note{text-align:center;color:var(--gh);font-weight:600;font-size:.86rem;margin-top:.9rem}
.x-err{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.38);color:#fecaca;border-radius:12px}

/* coin picker */
.cp-box{background:#120e2b;border:1px solid var(--ln2);border-radius:18px}
.cp-search{border-color:var(--ln)}
.cp-search input{background:#1a1538;border:1px solid var(--ln2);border-radius:12px;color:#fff}
.cp-item{color:var(--tx);border-radius:12px}
.cp-item:hover{background:#231c46}
.cp-item span{color:var(--mu)}
.cp-item b{color:#fff}

/* ---------------------------------------------------------------------------
   Shared furniture.
   --------------------------------------------------------------------------- */
.card{background:var(--gh-card);border:1px solid rgba(255,255,255,.055);border-radius:16px}
.sec-h{color:#fff}
.sec-lede{color:var(--mu)}
.sec-link{color:var(--gh);font-weight:600}
.sec-alt{background:linear-gradient(180deg,transparent,rgba(255,97,210,.035),transparent)}
.kv{border-color:var(--ln);color:var(--mu)}
.kv b{color:#fff}
.addr{background:#1a1538;border:1px solid var(--ln2);color:#fff}
.btn-primary{background:linear-gradient(90deg,var(--gh),var(--a));color:var(--a-ink);border-radius:100px;font-weight:700}
.btn-ghost{background:#231c46;border-color:var(--ln2);color:#fff;border-radius:100px}
.btn-ghost:hover{border-color:var(--gh);color:#fff}
.pill{border-color:var(--ln2);color:var(--mu)}
.pill-ok{color:#6ee7b7;border-color:rgba(52,211,153,.36);background:rgba(52,211,153,.1)}
.pill-wa{color:#fcd34d;border-color:rgba(251,191,36,.36);background:rgba(251,191,36,.1)}
.pill-no{color:#fca5a5;border-color:rgba(248,113,113,.36);background:rgba(248,113,113,.1)}
.pill-a{color:var(--gh);border-color:var(--gh-line);background:var(--gh-glow)}
.steps div{background:var(--ln2)}
.steps div.on{background:linear-gradient(90deg,var(--gh),var(--a))}
.steps div.done{background:var(--ok)}
th{color:var(--fa);border-color:var(--ln)}
td{border-color:var(--ln)}
.muted{color:var(--mu)}
.faint{color:var(--fa)}
.ord-amt{color:#fff}
.ord-dep{background:var(--gh-card);border-color:var(--ln2);border-radius:16px}
.ord-qr{background:#fff;border-radius:12px}

.p-foot{background:#06041a;border-top:1px solid var(--ln);color:var(--fa)}
.p-foot a{color:var(--mu)}
.p-foot a:hover{color:var(--gh)}
/* the pink bar before a footer heading, straight off the reference */
.p-foot strong{position:relative;padding-inline-start:.7rem;color:#fff;letter-spacing:.01em}
.p-foot strong::before{content:'';position:absolute;inset-inline-start:0;top:.18em;bottom:.18em;width:3px;
  border-radius:2px;background:var(--gh)}

/* live price band */
.p-ticker{background:#0d0a22;border-color:var(--ln)}
.p-tick{border-color:var(--ln);color:var(--tx)}
.p-tick .px{color:var(--mu)}
.p-tick .up{color:var(--ok)}
.p-tick .dn{color:var(--no)}
.p-tick .flat{color:var(--fa)}

/* ---------------------------------------------------------------------------
   The page under the box.
   --------------------------------------------------------------------------- */
.sec{position:relative}

/* A short pink rule over a centred heading, where the reference prints a caps
   eyebrow. A rule and not words: this page is served in eighteen languages and
   a label hard coded in a stylesheet would only ever be English. */
.sec-how .sec-h,.sec-faq .sec-h{text-align:center}
.sec-how .sec-h::before,.sec-faq .sec-h::before{content:'';display:block;width:36px;height:3px;border-radius:3px;
  margin:0 auto 1.1rem;background:linear-gradient(90deg,var(--gh),var(--a))}
.sec-how .sec-h,.sec-faq .sec-h{font-size:clamp(1.6rem,3.4vw,2.35rem)}
.sec-h{font-size:clamp(1.5rem,3vw,2.1rem)}

/* steps: a round medallion each, joined by a dashed rule */
.sec-how{padding-bottom:1rem}
.steps-rail{gap:1.5rem;margin-top:2.3rem}
.steps-rail li{padding-top:0;text-align:center}
.step-n{position:static;margin:0 auto 1.1rem;width:92px;height:92px;border-radius:50%;font-size:1.3rem;font-weight:700;
  background:radial-gradient(circle,#241d4a 0%,#140f2b 72%);border:1px solid var(--ln2);color:var(--gh);
  box-shadow:inset 0 0 34px -14px var(--gh);transition:border-color .2s ease,color .2s ease}
.steps-rail li:hover .step-n{border-color:var(--gh-line);color:#fff}
.steps-rail li::after{top:46px;inset-inline-start:calc(50% + 58px);inset-inline-end:calc(-50% + 58px);
  height:0;background:none;border-top:1px dashed var(--ln2);opacity:.9}
.steps-rail p{color:var(--mu);font-size:.91rem;max-width:30ch;margin:0 auto}

/* the promise cards, each with a gradient tile for its icon. The tiles
   alternate warm and cool the way the reference's do. */
.why-card{background:var(--gh-card);border-color:rgba(255,255,255,.055);border-radius:16px;
  transition:border-color .2s ease,transform .2s ease}
.why-card:hover{border-color:var(--gh-line);transform:translateY(-3px)}
.why-card h3{color:#fff;font-size:1.12rem}
.why-ico{width:46px;height:46px;border-radius:14px;border:0;color:#fff;
  background:linear-gradient(140deg,var(--gh),var(--gh-deep));box-shadow:0 12px 26px -14px var(--gh)}
.why-grid>:nth-child(2) .why-ico{background:linear-gradient(140deg,#5fd8f2,#3b82f6);box-shadow:0 12px 26px -14px #3b82f6}
.why-grid>:nth-child(3) .why-ico{background:linear-gradient(140deg,var(--gh2),var(--a));box-shadow:0 12px 26px -14px var(--a)}
.why-card:hover .why-ico{filter:brightness(1.06)}

.coin-chip{background:var(--bg2);border-color:var(--ln);color:#fff;border-radius:100px;
  transition:border-color .16s ease,background .16s ease,transform .16s ease}
.coin-chip:hover{border-color:var(--gh-line);background:#1d1838;transform:translateY(-2px)}
.coin-chip b{color:#fff}
.coin-chip em{color:var(--fa);opacity:1}

/* FAQ: one rounded card per question, a pink plus that crosses when it opens.
   Two columns need more room than the narrow measure a single column wants. */
.sec-faq .narrow{max-width:1000px}
.faq{display:grid;gap:.8rem}
@media(min-width:760px){.faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.faq details{border:1px solid var(--ln);border-radius:14px;background:var(--gh-card);padding:0 1.15rem;
  transition:border-color .2s ease,background .2s ease}
.faq summary{color:#fff;font-weight:700;font-size:.96rem;padding:1.05rem 0}
.faq summary:hover{color:var(--gh)}
.faq details[open]{border-color:var(--gh-line);background:linear-gradient(180deg,#2a1546,#1b1134)}
.faq p{color:var(--mu);margin:0 0 1.15rem}
.faq-x{color:var(--gh);opacity:1;transition:transform .2s ease}
.faq details[open] .faq-x{transform:rotate(45deg)}
/* base hides the upright bar when a question opens, which makes a minus. The
   reference makes a cross, so the bar is put back and the whole mark turns. */
.faq details[open] .faq-x::after{transform:none}

/* closing band */
.cta-band{background:linear-gradient(100deg,#3c1559 0%,#2a1048 46%,#19103a 100%);
  border:1px solid var(--gh-line);border-radius:20px;box-shadow:0 34px 80px -46px var(--gh)}
.cta-band .sec-h{font-size:clamp(1.35rem,2.6vw,1.9rem)}
.btn-go{background:linear-gradient(90deg,var(--gh),var(--a));color:var(--a-ink);border-radius:100px;
  padding:.95rem 1.7rem;font-weight:700;box-shadow:0 14px 32px -14px var(--gh);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn-go:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 20px 44px -18px var(--gh)}

/* ---------------------------------------------------------------------------
   Market table.
   --------------------------------------------------------------------------- */
.mk-live{color:var(--ok)}
.mk-card{background:var(--gh-card);border-color:rgba(255,255,255,.055);color:#fff;border-radius:14px}
.mk-card:hover{border-color:var(--gh-line)}
.mk-find{background:#1a1538;border:1px solid var(--ln2);border-radius:100px;color:#fff}
.mk-find:focus{border-color:var(--gh);box-shadow:0 0 0 3px var(--gh-glow)}
.mk-find::placeholder{color:var(--fa)}
.mk th{color:var(--fa);border-color:var(--ln2)}
.mk th[data-mk-sort]:hover{color:var(--gh)}
.mk td{border-color:var(--ln);color:#fff}
.mk tbody tr{transition:background .14s ease}
.mk tbody tr:hover{background:rgba(255,97,210,.05)}
.mk-asset{color:#fff}
.mk-asset em{color:var(--fa)}
.mk .c-price{color:#fff}
.mk .c-cap,.mk .c-vol{color:var(--mu)}
.mk .up{color:var(--ok)}
.mk .down{color:var(--no)}
.mk .flat{color:var(--fa)}
.mk-spark.up{color:var(--ok)}
.mk-spark.down{color:var(--no)}
.mk-go{background:#231c46;border-color:var(--ln2);color:#fff;border-radius:100px}
.mk-go:hover{border-color:var(--gh);color:var(--gh)}
.mk-count{color:var(--fa)}

/* ---------------------------------------------------------------------------
   Motion: the washes behind the hero drift, the accent halo breathes with them,
   and buttons lift. base.css stops all of it for prefers-reduced-motion.
   --------------------------------------------------------------------------- */
.x-wrap::before{animation:gh-breathe 19s ease-in-out infinite alternate}
@keyframes gh-breathe{
  from{transform:translateX(-50%) scale(1);opacity:.75}
  to{transform:translateX(-50%) scale(1.14);opacity:1}
}
.x-go{transition:filter .18s ease,transform .18s ease,box-shadow .18s ease}
.x-go:hover{transform:translateY(-1px);box-shadow:0 22px 46px -18px var(--gh)}
.x-pick{transition:background .16s ease,transform .15s ease}
.x-flip button{transition:transform .3s ease,border-color .18s ease,background .18s ease}

/* ---------------------------------------------------------------------------
   Narrower screens. The hero is already one centred column, so the work here is
   the step medallions and the stat row.
   --------------------------------------------------------------------------- */
@media(max-width:860px){
  .steps-rail li::after{display:none}
  .step-n{width:76px;height:76px}
}
@media(max-width:620px){
  /* base puts the box above the headline on a phone. The reference this theme
     is built from does the opposite: the headline lands first and the box
     follows it, so the page still reads as a sentence before it reads as a
     form. Theme local, so the other six keep base's order. */
  .x-copy{order:0}
  .x-copy h1{letter-spacing:-.02em}
  .x-stats{width:100%;padding:.2rem 0}
  .x-stats div{flex:1;padding:.65rem .5rem;min-width:0}
  .x-stats dd{font-size:.68rem}
  /* base pushes a step's text aside for a small corner badge; this theme keeps
     the medallion above the text at every width, so that padding goes back */
  .steps-rail li{padding-inline-start:0;min-height:0}
  .step-n{width:68px;height:68px;font-size:1.1rem;margin-bottom:.8rem}
  .steps-rail p{max-width:none}
}

/* ===========================================================================
   Ghost's own page.

   Everything below belongs to views/panel/ghost/home.ejs, which this theme
   owns outright. A stylesheet cannot add a section, and the page this theme is
   built from has roughly fifteen where the shared one has six, so the page came
   with the theme. Every selector here is prefixed gh- and matches nothing in
   any other theme's markup.
   =========================================================================== */

/* the eyebrow over a section heading: a short rule, then the label in caps */
.gh-eye{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0 0 .9rem;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gh)}
.gh-eye span{width:26px;height:2px;border-radius:2px;background:var(--gh)}
.gh-lede{text-align:center;color:var(--mu);max-width:56ch;margin:0 auto 2.6rem;font-size:1rem}
.gh-prose{color:var(--mu);max-width:64ch;margin:0;font-size:1.02rem;line-height:1.72}

/* ---- the operator's Telegram bot, under the box ------------------------- */
.gh-tg{display:flex;align-items:center;gap:.9rem;max-width:544px;margin:1.1rem auto 0;
  padding:.8rem 1rem;border-radius:14px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.075);color:var(--tx);text-decoration:none;
  transition:border-color .18s ease,background .18s ease}
.gh-tg:hover{border-color:var(--gh-line);background:rgba(255,97,210,.07);color:var(--tx);text-decoration:none}
.gh-tg-ico{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(140deg,#5fd8f2,#3b82f6);color:#fff}
.gh-tg-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.gh-tg-tx b{font-size:.92rem}
.gh-tg-tx em{font-style:normal;font-size:.82rem;color:var(--mu)}
.gh-tg-go{flex:0 0 auto;font-size:.82rem;font-weight:700;color:var(--gh);white-space:nowrap}

/* ---- the four claims directly under the hero ---------------------------- */
.gh-feat-wrap{padding:2.6rem 0 .4rem}
.gh-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.gh-feat-c{display:flex;align-items:flex-start;gap:.8rem;padding:1.05rem;border-radius:16px;
  background:var(--gh-card);border:1px solid rgba(255,255,255,.055)}
.gh-feat-i{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;
  background:linear-gradient(140deg,var(--gh),var(--gh-deep));box-shadow:0 10px 22px -14px var(--gh)}
.gh-feat-c:nth-child(2) .gh-feat-i{background:linear-gradient(140deg,#5fd8f2,#3b82f6);box-shadow:0 10px 22px -14px #3b82f6}
.gh-feat-c:nth-child(3) .gh-feat-i{background:linear-gradient(140deg,var(--gh2),var(--a));box-shadow:0 10px 22px -14px var(--a)}
.gh-feat-c:nth-child(4) .gh-feat-i{background:linear-gradient(140deg,#8be0f0,#2dd4bf);box-shadow:0 10px 22px -14px #2dd4bf}
.gh-feat-c div{min-width:0;line-height:1.4}
.gh-feat-c b{display:block;font-size:.93rem;color:#fff}
.gh-feat-c em{font-style:normal;font-size:.82rem;color:var(--mu)}

/* ---- the coin marquee ---------------------------------------------------- */
.gh-marq-wrap{padding:1.6rem 0 .6rem;overflow:hidden;position:relative}
.gh-marq-wrap::before,.gh-marq-wrap::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.gh-marq-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.gh-marq-wrap::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.gh-marq{display:flex;width:max-content;gap:.6rem;padding:.3rem 0}
.gh-marq-row{display:flex;gap:.6rem;flex:0 0 auto}
.gh-marq .coin-chip{flex:0 0 auto}
/* the second copy of the row runs the other way, as the reference's does */
.gh-marq:first-child{animation:gh-slide 46s linear infinite}
.gh-marq:last-child{animation:gh-slide 52s linear infinite reverse}
@keyframes gh-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.gh-marq-wrap:hover .gh-marq{animation-play-state:paused}

/* ---- the plain answer ---------------------------------------------------- */
.gh-what .sec-h{max-width:18ch;margin-bottom:1.1rem}

/* ---- how it works: medallions now carry an icon and a numbered badge ----- */
.sec-how .sec-h.center{text-align:center}
.sec-how .sec-h::before{display:none}
.steps-rail li h3{font-size:1.05rem;margin:0 0 .4rem;color:#fff}
.step-n{position:relative}
.step-n svg{display:block}
.step-n i{position:absolute;top:-2px;inset-inline-end:-2px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:.78rem;font-weight:700;
  background:linear-gradient(140deg,var(--gh),var(--a));color:var(--a-ink);
  box-shadow:0 6px 16px -8px var(--gh)}

/* ---- why: copy on one side, four cards on the other --------------------- */
.gh-why-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.gh-why-copy .gh-eye{justify-content:flex-start}
.gh-why-copy .sec-h{text-align:start;max-width:16ch;margin-bottom:1rem}
.gh-why-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.gh-why-cards .why-card{padding:1.3rem}

/* ---- top pairs ----------------------------------------------------------- */
.gh-pair-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.gh-pair{display:flex;align-items:center;gap:.75rem;padding:.85rem .95rem;border-radius:14px;
  background:var(--gh-card);border:1px solid rgba(255,255,255,.055);color:var(--tx);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease,background .16s ease}
.gh-pair:hover{border-color:var(--gh-line);transform:translateY(-2px);background:#1d1838;color:var(--tx);text-decoration:none}
.gh-pair-ic{flex:0 0 auto;display:flex;align-items:center}
.gh-pair-ic img{width:26px;height:26px;border-radius:50%}
.gh-pair-ic img+img{margin-inline-start:-9px;box-shadow:0 0 0 2px #15122b}
.gh-pair-tx{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.gh-pair-tx b{font-size:.9rem;color:#fff}
.gh-pair-tx em{font-style:normal;font-size:.74rem;color:var(--fa);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-pair-tx i{font-style:normal;font-size:.75rem;color:var(--gh);margin-top:.15rem;font-variant-numeric:tabular-nums}
.gh-pairs-note{margin:1.4rem 0 0;text-align:center;font-size:.85rem;color:var(--fa)}
.gh-pairs-note a{color:var(--gh);font-weight:600;margin-inline-start:.3rem}

/* ---- the comparison table ------------------------------------------------ */
/* base's .narrow is a 620px reading measure, and this table's own minimum is
   723px: left at 620 it was silently clipped by the box's overflow:hidden and
   the right hand column lost its last word. The measure is widened for this
   section rather than the overflow dropped, because a table that scrolls
   sideways inside a page is worse than one that is simply wide enough. */
.gh-cmp .narrow{max-width:900px}
.gh-cmp-box{border:1px solid var(--ln);border-radius:16px;overflow:hidden;background:var(--gh-card)}
.gh-cmp-t{width:100%;border-collapse:collapse;font-size:.92rem}
.gh-cmp-t th,.gh-cmp-t td{padding:.9rem 1.1rem;text-align:start;border-bottom:1px solid var(--ln);vertical-align:middle}
.gh-cmp-t tbody tr:last-child th,.gh-cmp-t tbody tr:last-child td{border-bottom:0}
.gh-cmp-t thead th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fa);
  background:rgba(255,255,255,.022);border-bottom:1px solid var(--ln2)}
.gh-cmp-t tbody th{font-weight:600;color:var(--mu);width:40%}
.gh-cmp-t td{color:var(--mu)}
/* our column is the one being argued for, so it is lit and theirs is not */
.gh-cmp-t .gh-cmp-us{color:#fff;font-weight:600;background:rgba(255,97,210,.045)}
.gh-cmp-t thead .gh-cmp-us{color:var(--gh);background:rgba(255,97,210,.07)}
.gh-tick{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;margin-inline-end:.5rem;
  background:linear-gradient(140deg,var(--gh),var(--a));vertical-align:-3px}
/* physical border, not logical: a tick is a glyph, not a layout. Built from
   border-inline-start it mirrors under dir=rtl and comes out as a stray angle
   bracket, which is what Arabic was showing. */
.gh-tick::before{content:'';width:7px;height:4px;border-left:2px solid var(--a-ink);border-bottom:2px solid var(--a-ink);
  transform:rotate(-45deg) translate(1px,-1px)}

/* ---- the wide footer ----------------------------------------------------- */
.gh-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:1.6rem 1.4rem}
.gh-foot-grid>div{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.gh-foot-grid strong{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}
.gh-foot-grid a{font-size:.85rem;color:var(--mu);text-decoration:none}
.gh-foot-grid a:hover{color:var(--gh)}
.gh-foot-about .tiny{color:var(--fa);line-height:1.6}
.gh-foot-tg{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font-weight:600}
.gh-foot-lang{font:inherit;font-size:.82rem;padding:.4rem .55rem;border-radius:9px;background:#15122b;
  color:var(--mu);border:1px solid var(--ln2)}
.gh-foot-end{margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--ln);color:var(--fa);opacity:.9}

/* ---- narrower ------------------------------------------------------------ */
@media(max-width:1040px){
  .gh-pair-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gh-foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.6rem 1.2rem}
  .gh-foot-grid>div:nth-child(5){grid-column:2 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.9rem}
  .gh-foot-grid>div:nth-child(5) strong{width:100%;margin:0}
}
@media(max-width:860px){
  .gh-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh-why-grid{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .gh-why-copy .sec-h{max-width:22ch}
  .gh-pair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh-cmp-t th,.gh-cmp-t td{padding:.8rem .85rem}
  .gh-cmp-t tbody th{width:38%}
}
@media(max-width:620px){
  .gh-feat{grid-template-columns:minmax(0,1fr)}
  .gh-why-cards{grid-template-columns:minmax(0,1fr)}
  .gh-pair-grid{grid-template-columns:minmax(0,1fr)}
  .gh-marq-wrap::before,.gh-marq-wrap::after{width:52px}
  .gh-tg{gap:.7rem;padding:.7rem .8rem}
  .gh-tg-go{font-size:.76rem}
  .gh-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh-foot-about{grid-column:1 / -1}
  .gh-foot-grid>div:nth-child(5){grid-column:1 / -1;flex-direction:column;align-items:flex-start}
  .gh-cmp-t{font-size:.84rem}
  .gh-cmp-t th,.gh-cmp-t td{padding:.7rem .6rem}
  .gh-tick{margin-inline-end:.35rem}
  .steps-rail li h3{font-size:1rem}
}

/* the other column gets a cross, so the table reads at a glance the way the
   reference's does. Both marks are physical borders, not logical: a tick and a
   cross are glyphs and must not mirror under dir=rtl. */
.gh-cross{position:relative;display:inline-block;width:14px;height:14px;margin-inline-end:.5rem;vertical-align:-2px;opacity:.75}
.gh-cross::before,.gh-cross::after{content:'';position:absolute;top:6px;left:1px;width:12px;height:2px;border-radius:2px;background:var(--no)}
.gh-cross::before{transform:rotate(45deg)}
.gh-cross::after{transform:rotate(-45deg)}

/* ---- the two headline destinations ---------------------------------------
   Two tall cards, each with its coin as a faint watermark in the corner and
   the routes into it as small pair chips underneath. */
.gh-eye-l{justify-content:flex-start}
.gh-feat2 .sec-h{max-width:20ch;margin-bottom:.9rem}
.gh-feat2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.gh-feat2-c{position:relative;overflow:hidden;padding:1.5rem;border-radius:18px;
  background:linear-gradient(160deg,#241543,#17122e 60%);border:1px solid rgba(255,255,255,.07)}
.gh-feat2-wm{position:absolute;top:-34px;inset-inline-end:-34px;width:190px;height:190px;opacity:.07;
  pointer-events:none;filter:grayscale(.2)}
.gh-feat2-h{display:flex;align-items:center;gap:.65rem;margin-bottom:.6rem;position:relative}
.gh-feat2-h img{border-radius:50%}
.gh-feat2-h h3{margin:0;font-size:1.18rem;color:#fff}
.gh-feat2-c p{margin:0 0 .9rem;color:var(--mu);font-size:.93rem;max-width:44ch;position:relative}
.gh-feat2-go{display:inline-block;margin-bottom:1.1rem;font-weight:700;font-size:.9rem;color:var(--gh);position:relative}
.gh-feat2-go:hover{color:var(--gh2)}
.gh-feat2-pairs{display:flex;flex-wrap:wrap;gap:.45rem;position:relative}
.gh-feat2-pairs a{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem .35rem .4rem;
  border-radius:100px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075);
  color:var(--tx);font-size:.76rem;font-weight:600;text-decoration:none;transition:border-color .16s ease,background .16s ease}
.gh-feat2-pairs a:hover{border-color:var(--gh-line);background:rgba(255,97,210,.09);color:var(--tx);text-decoration:none}
.gh-feat2-pairs img{border-radius:50%}
.gh-feat2-pairs img+img{margin-inline-start:-7px}
@media(max-width:860px){.gh-feat2-grid{grid-template-columns:minmax(0,1fr)}}

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

/* --- footer, rebuilt 2026-10-30 --- */
.foot-bar{border-top-color:var(--ln)}
.foot-col h2{color:var(--tx)}
.foot-live{color:var(--ok)}
.foot-lang select{border-color:var(--ln2)}

/* --- premium layer support, 2026-10-30 --- */
:root{
  --atmo-1:rgba(255,97,210,.2);
  --atmo-2:rgba(155,81,224,.17);
  --atmo-3:color-mix(in srgb,var(--a) 14%,transparent);
  --grid-ln:rgba(255,255,255,.035);
}
.eyebrow{color:var(--gh)}
.statrow{background:var(--ln)}
.stat{background:var(--gh-card)}
.stat-l{color:var(--fa)} .stat-v{color:var(--tx)} .stat-s{color:var(--mu)}
.sec-intro .lede{color:var(--mu)}

/* --- liveness tint --- */
:root{--spark:rgba(255,170,230,.5);--sweep:rgba(255,97,210,.1)}
:root{--fx:rgba(255,130,224,.95)}