/* =====================================================================
   Web3 Ledger — public site
   Monochrome technical web3: near-black ground, hairline-bordered
   panels, uppercase display type, light-on-dark primary buttons.
   ===================================================================== */
:root{
  --g0:#0a0a0b;          /* page ground            */
  --g1:#0e0e10;          /* alternate band         */
  --panel:#121214;       /* card surface           */
  --panel-2:#161618;     /* nested surface         */
  --line:#1e1e21;        /* hairline rule          */
  --line-2:#2a2a2e;      /* stronger rule          */
  --ink:#f2f2f3;
  --ink-2:#8d8d94;
  --ink-3:#5d5d64;
  --acc:#fcd535;         /* brand accent                        */
  --acc-ink:#12161c;     /* ink on top of --acc: amber is a light
                            colour, so this is near-black, never
                            white, or the buttons fail contrast */
  --acc-2:#fcd535;       /* amber as *text*, on a dark surface   */
  --acc-lo:#8a6a00;      /* amber as text on a light surface —
                            #fcd535 on white is ~1.3:1 and
                            illegible, so light bands swap to this */
  --pos:#3ddc84;
  --neg:#e8737d;
  --font-site:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}

body.wl-site{
  margin:0;background:var(--g0);color:var(--ink);
  font-family:var(--font-site);
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}
body.wl-site img{max-width:100%;height:auto;display:block}
/* css/type.css sets `h1..h6{font-family:var(--font-ui)}` and Inter's
   `cv11`/`ss01` features on `body`. Those outrank a plain body rule for
   headings, so the public face has to be reasserted here, and the
   feature settings cleared — IBM Plex Sans has no such axes. */
body.wl-site,
body.wl-site h1,body.wl-site h2,body.wl-site h3,
body.wl-site h4,body.wl-site h5,body.wl-site h6,
body.wl-site p,body.wl-site a,body.wl-site span,body.wl-site li,
body.wl-site button,body.wl-site input,body.wl-site summary,
body.wl-site .wl-display,body.wl-site .wl-btn{
  font-family:var(--font-site);
  font-feature-settings:normal;
  font-variant-ligatures:normal}

/* the phone simulator depicts the app — keep it on the UI face */
body.wl-site .wl-phone,body.wl-site .wl-phone *{font-family:var(--font-ui)}
/* money, addresses and tickers stay monospaced */
body.wl-site .wl-num,body.wl-site .wl-coin span,
body.wl-site [data-px],body.wl-site [data-ch],
body.wl-site code,body.wl-site pre{font-family:var(--font-mono)}


body.wl-site a{color:inherit;text-decoration:none}

.wl-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;position:relative;z-index:2}

/* ---- shared type ---- */
.wl-display{
  margin:0;text-transform:uppercase;font-weight:700;
  font-size:clamp(30px,6.2vw,54px);line-height:1.04;letter-spacing:-.022em}
.wl-eyebrow{
  display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.wl-lede{margin:18px 0 0;font-size:14px;line-height:1.75;color:var(--ink-2);max-width:52ch}

/* ---- buttons: squared, not pills ---- */
/* `body.wl-site a{color:inherit}` outranks a bare .wl-btn on specificity,
   so button colour has to be stated at the same weight or it disappears. */
body.wl-site .wl-btn,
.wl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 24px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  background:var(--acc);color:var(--acc-ink);
  font-family:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
body.wl-site .wl-btn:hover,.wl-btn:hover{background:#f0b90b}
/* the icon is sized off the label, not fixed, so the large button gets a
   proportionally larger mark instead of a small one floating beside it */
.wl-btn svg{width:1.15em;height:1.15em;flex:none}
body.wl-site .wl-btn.ghost,
.wl-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
body.wl-site .wl-btn.ghost:hover,
.wl-btn.ghost:hover{background:transparent;border-color:#43434a}
/* secondary: a soft neutral fill, not an outline. Paired with the accent
   button it reads as one control group; `ghost` stays for the bordered
   variant used elsewhere. */
body.wl-site .wl-btn.soft,
.wl-btn.soft{background:var(--panel-2);color:var(--ink);border-color:transparent}
body.wl-site .wl-btn.soft:hover,
.wl-btn.soft:hover{background:var(--line);border-color:transparent}

.wl-btn.sm{height:38px;padding:0 18px;font-size:13px;border-radius:8px}
.wl-nav .wl-btn{height:42px;padding:0 22px;border-radius:8px}
.wl-btn.lg{height:48px;padding:0 28px;font-size:14px;border-radius:8px}

/* ============================== nav ==============================
   No rule, no chrome. The bar sits on the page background and simply
   scrolls with it.
   ================================================================== */
.wl-skip{position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--acc);color:var(--acc-ink);padding:10px 16px;font-size:14px}
.wl-skip:focus{left:0}

/* frosted glass bar, floating clear of the page edges */
.wl-nav{
  position:sticky;top:8px;z-index:200;
  margin:8px 0 -60px;       /* pulls the hero up under the glass */
  background:transparent;pointer-events:none}
/* the bar sits nearer the edges than the page gutter on small screens */
@media (max-width:919px){
  .wl-nav .wl-wrap{padding:0 12px}
}
.wl-nav .in.bar{
  pointer-events:auto;
  display:flex;align-items:center;gap:12px;height:56px;
  padding:0 8px 0 16px;border-radius:999px;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),      /* light catching the top edge */
    0 10px 34px -14px rgba(0,0,0,.9);
  transition:background .2s}
@media (min-width:920px){
  .wl-nav{top:16px;margin:16px 0 -84px}
  .wl-nav .in.bar{height:70px;padding:0 10px 0 28px}
}
/* Safari and Firefox without backdrop-filter get an opaque bar instead of
   a washed-out transparent one. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .wl-nav .in.bar{background:#141417}
}

/* mark only — no wordmark. The artwork is 3:2, so height drives the box
   and width follows; object-fit guards against any future ratio change. */
.wl-logo{display:flex;align-items:center;flex:none}
.wl-logo .mark{
  display:block;height:26px;width:auto;max-width:none;
  background:none;border-radius:0;object-fit:contain}
@media (min-width:920px){.wl-logo .mark{height:32px}}

.wl-nav .links{display:none}
@media (min-width:920px){
  .wl-nav .links{display:flex;align-items:center;margin-left:auto}
  .wl-nav .links a{
    padding:8px 0;margin-left:30px;font-size:13.5px;font-weight:500;
    color:var(--ink-2);transition:color .15s}
  .wl-nav .links a:hover,
  .wl-nav .links a[aria-current="page"]{color:var(--ink)}
}

.wl-nav .end{display:none}
@media (min-width:920px){
  .wl-nav .end{display:flex;align-items:center;gap:18px;margin-left:34px;flex:none}
  .wl-nav .end .lg{font-size:13.5px;font-weight:500;color:var(--ink-2)}
  .wl-nav .end .lg:hover{color:var(--ink)}
}

.wl-burger{position:relative;margin-left:auto;flex:none;
  width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;
  border-radius:999px;-webkit-tap-highlight-color:transparent}
.wl-burger:active{background:rgba(255,255,255,.06)}
.wl-burger span{position:absolute;left:13px;width:18px;height:1.6px;background:var(--ink);
  transition:transform .2s ease}
.wl-burger span:nth-child(1){top:19px}
.wl-burger span:nth-child(2){top:25px}
.wl-nav.open .wl-burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.wl-nav.open .wl-burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media (min-width:920px){.wl-burger{display:none}}

/* ============================== hero ============================== */
.wl-hero{position:relative;overflow:hidden;padding:88px 0 56px}
.wl-hero .grid{display:grid;gap:44px;align-items:center}
@media (min-width:980px){
  .wl-hero{padding:134px 0 88px}
  .wl-hero .grid{grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
}
.wl-hero .copy{position:relative;z-index:3}
.wl-hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* faint dot field behind the hero, like the reference sphere backdrop */
/* ---- hero light ----
   No drawn shapes. Two very wide, very low-alpha washes — a warm one
   behind the device and a cool one under the copy — which give a flat
   white band some depth and pull the eye toward the phone without
   putting anything on the page to look at.

   It is a pseudo-element on the section, so there is no extra markup,
   and it sits under everything (.copy is z-index 3, the phone 2).
   ------------------------------------------------------------------ */
.wl-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 58% at 74% 38%,rgba(252,213,53,.22),transparent 72%),
    radial-gradient(42% 52% at 10% 82%,rgba(20,26,40,.05),transparent 74%)}
/* on a dark band the same washes need more presence to register at all */
.wl-hero:not(.wl-light)::before{
  background:
    radial-gradient(46% 58% at 74% 38%,rgba(252,213,53,.10),transparent 72%),
    radial-gradient(42% 52% at 10% 82%,rgba(255,255,255,.03),transparent 74%)}

.wl-dotfield{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(#ffffff1a 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 72% 45%,#000,transparent 72%);
          mask-image:radial-gradient(70% 60% at 72% 45%,#000,transparent 72%)}

/* coin chips are defined in the hero block at the end of this file */

/* ========================= partner strip ========================= */
.wl-strip{overflow:hidden;background:var(--g1)}
.wl-strip .row{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
@media (min-width:640px){.wl-strip .row{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.wl-strip .row{grid-template-columns:repeat(6,1fr)}}
.wl-strip .cell{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:28px 12px;
  font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink-2)}
/* the cells now carry the real coin marks rather than drawn glyphs, so
   they are images, not currentColor SVG */
.wl-strip .cell svg{width:17px;height:17px;flex:none;color:var(--ink-2)}
.wl-strip .cell img{width:20px;height:20px;flex:none;border-radius:50%;object-fit:contain}


/* ======================= light sections =======================
   The page is light-dominant with two deliberate dark moments: the
   product showcase and the closing band. That reads as a considered
   document rather than a checkerboard — alternating every section makes
   the eye work at each boundary and none of the switches mean anything.

   Rhythm within the light run comes from two grounds, not from swinging
   to black: `wl-light` is white, `wl-light tint` is a half-step off it.
   Because every component paints from the token set, a band only has to
   redefine tokens; nothing else changes.
   ============================================================== */
body.wl-site .wl-light{
  --g0:#ffffff;
  --g1:#ffffff;          /* band ground           */
  --panel:#ffffff;       /* card surface          */
  --panel-2:#f1f1f4;     /* nested / hover        */
  --line:#e5e5ea;        /* hairline rule         */
  --line-2:#d2d2da;      /* stronger rule         */
  --ink:#0a0a0b;
  --ink-2:#55555f;
  --ink-3:#8a8a95;
  --acc-2:var(--acc-lo);
  background:var(--g1);
  color:var(--ink);
}
/* the alternate light ground — enough to separate two adjacent light
   bands, not enough to read as a different colour */
body.wl-site .wl-light.tint{
  --g1:#f5f5f7;
}

/* a dark card inside a light band. Same trick as the bands themselves —
   redeclare the tokens on the element and every child follows, so the
   card needs no bespoke rules of its own. */
body.wl-site .wl-panel.dark{
  --panel:#121214;
  --panel-2:#191920;
  --line:#26262b;
  --line-2:#33333a;
  --ink:#f2f2f3;
  --ink-2:#9a9aa3;
  --ink-3:#6a6a73;
  background:var(--panel);
  color:var(--ink);
  box-shadow:none;
}
/* the dot grid goes back to light-on-dark inside these */
body.wl-site .wl-light .wl-panel.dark .art{
  background-image:radial-gradient(#ffffff14 1px,transparent 1px)}

/* the few places that hardcode a light-on-dark value instead of a token */
body.wl-site .wl-light .wl-panel .art{
  background-image:radial-gradient(#00000014 1px,transparent 1px)}
body.wl-site .wl-light .wl-dotfield{
  opacity:.65;
  background-image:radial-gradient(#00000018 1px,transparent 1px)}
body.wl-site .wl-light .wl-btn.ghost:hover{border-color:#b9b9c4}
/* the phone keeps its own dark chrome — a dark device on a white page is
   the point, so nothing about .wl-phone changes in a light band */

/* on a white band a white panel would vanish, so light-band surfaces
   take the tinted fill rather than an outline — no hairlines anywhere */
body.wl-site .wl-light .wl-panel:not(.dark),
body.wl-site .wl-light .wl-faq details,
body.wl-site .wl-light .wl-faq-aside .card,
body.wl-site .wl-light .wl-tbl-wrap{
  background:var(--panel-2);box-shadow:none}

/* ====================== two-column statement ====================== */
/* two light bands in a row are one continuous surface, so the pair
   would otherwise contribute both their paddings as a single dead gap —
   roughly 200px of empty white between the statement and the benefits */
body.wl-site .wl-light + .wl-light{padding-top:0}

.wl-sect{position:relative;padding:80px 0}
.wl-sect.plain{padding-top:112px}
@media (min-width:980px){.wl-sect{padding:104px 0}}

.wl-two{display:grid;gap:40px}
@media (min-width:900px){.wl-two{grid-template-columns:1fr 1fr;gap:64px}}
@media (min-width:1100px){.wl-two.wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.wl-two h2{margin:0;text-transform:uppercase;font-weight:700;
  font-size:clamp(22px,3.4vw,30px);line-height:1.16;letter-spacing:-.02em;max-width:24ch}

.wl-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 24px;align-self:start}
@media (min-width:1100px){.wl-metrics{grid-template-columns:repeat(4,1fr);gap:24px}}
.wl-metrics b{display:block;font-family:var(--font-mono);
  font-size:clamp(23px,3vw,28px);font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums slashed-zero}
.wl-metrics span{display:block;margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}

/* ========================== benefits grid ==========================
   Light band. Copy on the left — accent eyebrow, heading, paragraph,
   call to action — with an illustration beside it, then a row of four
   soft tiles beneath.

   The columns are top-aligned rather than centred. Centring them meant
   the short copy floated against the tall artwork, which is what left a
   large dead space above the heading.
   ================================================================== */
.wl-benefits-intro{display:grid;gap:32px;margin-bottom:44px;align-items:start}
@media (min-width:960px){
  .wl-benefits-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
}
.wl-benefits-kick{
  display:block;margin-bottom:14px;
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--acc-2)}
.wl-benefits-intro h2{
  margin:0;font-size:clamp(26px,3.6vw,36px);font-weight:700;
  line-height:1.16;letter-spacing:-.03em;color:var(--ink);max-width:20ch}
.wl-benefits-intro p{
  margin:18px 0 26px;font-size:14.5px;line-height:1.75;color:var(--ink-2);max-width:48ch}

/* the artwork carries its own whitespace, so it is pulled up level with
   the eyebrow rather than sitting on the text baseline */
.wl-benefits-art{margin:0;justify-self:center;max-width:430px;width:100%}
.wl-benefits-art img{width:100%;height:auto;display:block}
@media (min-width:960px){
  /* centre the art against the copy instead of top-aligning it: the copy
     block is shorter than the image, and hanging both from the top left
     a tall void under the button */
  .wl-benefits-intro{align-items:center}
  .wl-benefits-art{margin-top:0}
}

/* ---- the four tiles ----
   `dark` flips them against the light band: the same token trick used by
   the bands themselves, so the heading, copy and icon all follow without
   a rule each. --acc-2 goes back to bright amber here, since the light
   band had stepped it down to --acc-lo for legibility on white. */
.wl-benefits{display:grid;gap:16px}
@media (min-width:600px){.wl-benefits{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.wl-benefits{grid-template-columns:repeat(4,1fr)}}

.wl-benefits .item{
  padding:28px 24px 30px;border-radius:12px;
  background:var(--panel-2);border:0;box-shadow:none}

.wl-benefits.dark .item{
  --panel-2:#17171b;
  --ink:#f2f2f3;
  --ink-2:#9a9aa3;
  --acc-2:var(--acc);
  background:var(--panel-2);color:var(--ink)}
.wl-benefits .ic{
  display:block;width:40px;height:40px;margin-bottom:22px;color:var(--acc-2)}
.wl-benefits .ic svg{width:100%;height:100%;display:block}
.wl-benefits h3{
  margin:0;font-size:15px;font-weight:700;line-height:1.35;
  letter-spacing:-.012em;color:var(--ink)}
.wl-benefits p{
  margin:11px 0 0;font-size:13.5px;line-height:1.72;color:var(--ink-2)}

/* =========================== panel grid =========================== */
.wl-grid2{display:grid;gap:16px}
@media (min-width:900px){.wl-grid2{grid-template-columns:1fr 1fr}}
.wl-grid3{display:grid;gap:16px}
@media (min-width:820px){.wl-grid3{grid-template-columns:repeat(3,1fr)}}

.wl-panel{
  position:relative;overflow:hidden;
  background:var(--panel);border-radius:12px;padding:24px}
.wl-panel .art{
  position:relative;height:190px;margin:-24px -24px 22px;
  background-color:var(--panel-2);
  background-image:radial-gradient(#ffffff12 1px,transparent 1px);background-size:20px 20px;
  display:grid;place-items:center}
.wl-panel .art .tile{
  width:74px;height:74px;border-radius:18px;display:grid;place-items:center;
  background:var(--panel);color:var(--ink)}
.wl-panel .art .tile svg{width:30px;height:30px}
.wl-panel .art .mini{
  position:absolute;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--panel);color:var(--ink-2)}
.wl-panel .art .mini svg{width:19px;height:19px}
.wl-panel .art .mini.l{left:22%;top:30%}
.wl-panel .art .mini.r{right:22%;bottom:26%}
.wl-panel h3{margin:0;text-transform:uppercase;font-size:14px;font-weight:700;letter-spacing:.02em}
.wl-panel p{margin:12px 0 0;font-size:13px;line-height:1.7;color:var(--ink-2)}

/* small stacked mock rows used inside panels */
.wl-rows{display:grid;gap:10px;margin-top:18px}
.wl-rows .r{
  display:flex;align-items:center;gap:11px;
  background:var(--panel-2);border-radius:10px;padding:11px 13px}
.wl-rows .r img{width:26px;height:26px;border-radius:50%;flex:none}
.wl-rows .r b{font-size:12.5px;font-weight:600}
.wl-rows .r span{font-size:11.5px;color:var(--ink-3)}
.wl-rows .r .v{margin-left:auto;font-size:12.5px;font-weight:600}

/* ====================== security, stage by stage ======================
   Not cards. The claim is a sequence, so it reads as one: three numbered
   stages left to right, text-led, no boxes, no rules, no illustrations.

   The number is the only ornament, set large and amber and half faded,
   so it gives the row rhythm without becoming a thing to read. Stages
   are counter-generated, so adding a fourth needs no markup change.
   ================================================================== */
.wl-stages-sect{background:var(--g1);padding:80px 0}
@media (min-width:980px){.wl-stages-sect{padding:112px 0}}

.wl-stages-head{max-width:34ch;margin-bottom:56px}
.wl-stages-head h2{
  margin:0;font-size:clamp(24px,3.4vw,36px);font-weight:600;line-height:1.24;
  letter-spacing:-.03em;color:var(--ink)}
@media (min-width:900px){.wl-stages-head{margin-bottom:72px}}

.wl-stages{
  counter-reset:stage;list-style:none;margin:0;padding:0;
  display:grid;gap:48px}
@media (min-width:860px){.wl-stages{grid-template-columns:repeat(3,1fr);gap:56px}}

.wl-stages .stage{counter-increment:stage;position:relative;padding-top:8px}
/* the numeral sits behind the copy rather than above it, so the eye lands
   on the words first and picks up the order second */
.wl-stages .stage::before{
  content:"0" counter(stage);
  position:absolute;top:-14px;left:-4px;z-index:0;
  font-family:var(--font-mono);font-size:64px;font-weight:600;
  letter-spacing:-.05em;line-height:1;color:var(--acc);opacity:.16;
  pointer-events:none}
@media (min-width:860px){
  .wl-stages .stage::before{font-size:78px;top:-22px}
}

.wl-stages .when{
  position:relative;z-index:1;display:block;margin-bottom:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc-2)}
.wl-stages h3{
  position:relative;z-index:1;margin:0;
  font-size:18px;font-weight:600;line-height:1.34;letter-spacing:-.02em;
  color:var(--ink);max-width:20ch}
.wl-stages p{
  position:relative;z-index:1;margin:12px 0 0;
  font-size:13.5px;line-height:1.78;color:var(--ink-2);max-width:42ch}

.wl-stages-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:56px}
.wl-stages-foot span{font-size:12.5px;color:var(--ink-3)}

/* ============================== faq ==============================
   One rule per concern. The previous version declared `summary` twice —
   the second shorthand `padding` silently wiped the first's padding-left,
   which is why the question sat flush against the card edge.
   ================================================================== */
.wl-faq{display:grid;gap:8px;align-content:start}

.wl-faq details{
  background:var(--panel);border-radius:12px;overflow:hidden;
  transition:background .16s}
.wl-faq details:hover{background:var(--panel-2)}
.wl-faq details[open]{background:var(--panel-2)}

.wl-faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;
  font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink);
  -webkit-tap-highlight-color:transparent}
.wl-faq summary::-webkit-details-marker{display:none}
.wl-faq summary::marker{content:""}

/* chevron sits in the flow, so it can never drift outside the padding */
.wl-faq summary::after{
  content:"";flex:none;margin-left:auto;
  width:8px;height:8px;
  border-right:1.7px solid var(--ink-3);
  border-bottom:1.7px solid var(--ink-3);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s ease,border-color .16s}
.wl-faq details[open] summary::after{
  transform:translateY(2px) rotate(-135deg);border-color:var(--acc)}
.wl-faq summary:hover::after{border-color:var(--ink-2)}

.wl-faq .a{padding:0 20px 20px}
.wl-faq .a p{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-2);max-width:66ch}
.wl-faq .a p + p{margin-top:10px}

/* the aside beside the questions */
.wl-faq-aside{align-self:start}
.wl-faq-aside .card{
  margin-top:22px;background:var(--panel);border-radius:12px;padding:18px 20px}
.wl-faq-aside .card b{display:block;font-size:13.5px;font-weight:600}
.wl-faq-aside .card p{margin:7px 0 14px;font-size:13px;line-height:1.65;color:var(--ink-2)}

/* ============================= markets =============================
   Breadcrumb, page head with a live indicator, search + sort, then the
   rows. The rows are a CSS grid rather than a <table>: on a phone a
   four-column table can only scroll sideways, and a sideways scroll on a
   price list is a scroll nobody finds. Below 720px each row restacks
   into a block with the price and change on their own line.
   ================================================================== */
.wl-mkt{padding:0}

/* the list sits on a light band under a dark head: the page reads as two
   halves, and the prices — the thing you came for — are on the lighter,
   easier-to-scan half */
.wl-mkt-body{padding:36px 0 80px}
@media (min-width:900px){.wl-mkt-body{padding:48px 0 104px}}

/* the head band is dark like the rest of the page; it separates from the
   rows by a half-step of tone, not by inverting */
.wl-mkt-top{background:var(--g1);padding:28px 0 34px}
@media (min-width:900px){.wl-mkt-top{padding:36px 0 44px}}
.wl-mkt-top .wl-mkt-search,
.wl-mkt-top .wl-mkt-filters button{background:var(--panel)}

/* ---- breadcrumb ---- */
.wl-crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 26px;padding:0;list-style:none;
  font-size:12.5px;color:var(--ink-3)}
.wl-crumb li{display:flex;align-items:center;gap:8px}
.wl-crumb li + li::before{
  content:"";width:5px;height:5px;flex:none;
  border-right:1.4px solid var(--ink-3);border-bottom:1.4px solid var(--ink-3);
  transform:rotate(-45deg)}
.wl-crumb a{color:var(--ink-3)}
.wl-crumb a:hover{color:var(--ink)}
.wl-crumb [aria-current]{color:var(--ink-2);font-weight:500}

/* ---- head ---- */
.wl-mkt-head{
  display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;
  justify-content:space-between;margin-bottom:28px}
.wl-mkt-head h1{
  margin:0;font-size:clamp(28px,4.4vw,40px);font-weight:700;
  letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.wl-mkt-head p{
  margin:12px 0 0;font-size:14px;line-height:1.7;color:var(--ink-2);max-width:52ch}
.wl-mkt-meta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.wl-mkt-meta .dot{
  width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.wl-mkt-meta .dot.live{background:var(--pos);animation:wl-pulse 2s ease-in-out infinite}

/* ---- summary bar ---- */
.wl-mkt-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  margin:26px 0 22px;border-radius:12px;overflow:hidden;background:var(--line)}
@media (min-width:760px){.wl-mkt-stats{grid-template-columns:repeat(4,1fr)}}
.wl-mkt-stats .stat{
  display:grid;gap:6px;padding:16px 18px;background:var(--panel)}
.wl-mkt-stats .k{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.wl-mkt-stats b{
  font-family:var(--font-mono);font-size:17px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums slashed-zero}
.wl-mkt-stats b.up{color:var(--pos)}
.wl-mkt-stats b.down{color:var(--neg)}

/* ---- search + sort ---- */
.wl-mkt-tools{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;margin-bottom:20px}
.wl-mkt-search{
  display:flex;align-items:center;gap:10px;flex:1 1 240px;max-width:340px;
  height:44px;padding:0 14px;border-radius:10px;
  background:var(--panel);color:var(--ink-3)}
.wl-mkt-search svg{width:17px;height:17px;flex:none}
.wl-mkt-search input{
  flex:1;min-width:0;height:100%;border:0;background:none;outline:none;
  color:var(--ink);font-weight:400;font-size:14px;line-height:1;font-family:inherit}
.wl-mkt-search input::placeholder{color:var(--ink-3)}
.wl-mkt-search input::-webkit-search-cancel-button{filter:invert(.6)}

.wl-mkt-filters{display:flex;gap:6px;flex:0 0 auto}
.wl-mkt-filters button{
  height:44px;padding:0 16px;border:0;border-radius:10px;cursor:pointer;
  background:var(--panel);color:var(--ink-2);
  font-weight:600;font-size:13px;line-height:1;font-family:inherit;transition:background .15s,color .15s}
.wl-mkt-filters button:hover{color:var(--ink)}
.wl-mkt-filters button.on{background:var(--acc);color:var(--acc-ink)}

/* ---- rows ---- */
.wl-mkt-list{display:grid;gap:6px}
.wl-mkt-labels,
.wl-mkt-row{
  display:grid;align-items:center;gap:16px;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr) auto}
.wl-mkt-labels{
  padding:0 18px 6px;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.wl-mkt-labels span:nth-child(2),
.wl-mkt-labels span:nth-child(3){text-align:right}

.wl-mkt-row{
  padding:14px 18px;border-radius:12px;background:var(--panel);
  transition:background .15s ease}
.wl-mkt-row:hover{background:var(--panel-2)}
.wl-mkt-row[hidden]{display:none}

.wl-mkt-row .asset{display:flex;align-items:center;gap:13px;min-width:0}
.wl-mkt-row .asset img{width:32px;height:32px;border-radius:50%;flex:none;object-fit:contain}
.wl-mkt-row .id{display:grid;gap:2px;min-width:0}
.wl-mkt-row .id b{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.wl-mkt-row .id i{font-style:normal;font-size:11.5px;color:var(--ink-3)}

.wl-mkt-row .px,
.wl-mkt-row .ch{
  text-align:right;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums slashed-zero}
.wl-mkt-row .px{font-size:14px;font-weight:500;color:var(--ink)}
.wl-mkt-row .ch{font-size:13px;font-weight:600;color:var(--ink-3)}
.wl-mkt-row .ch.up{color:var(--pos)}
.wl-mkt-row .ch.down{color:var(--neg)}
.wl-mkt-row .go{justify-self:end}

.wl-mkt-empty{
  margin:24px 0;padding:32px;border-radius:12px;background:var(--panel);
  text-align:center;font-size:13.5px;color:var(--ink-2)}
.wl-mkt-note{margin:20px 2px 0;font-size:12px;line-height:1.6;color:var(--ink-3)}

/* ---- phones: the row restacks, the column labels go ---- */
@media (max-width:720px){
  .wl-mkt-labels{display:none}
  .wl-mkt-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"asset px" "asset ch" "go go";
    row-gap:2px;padding:14px}
  .wl-mkt-row .asset{grid-area:asset;align-self:center}
  .wl-mkt-row .px{grid-area:px}
  .wl-mkt-row .ch{grid-area:ch}
  .wl-mkt-row .go{grid-area:go;justify-self:stretch;margin-top:12px}
  .wl-mkt-row .go .wl-btn{width:100%}
  .wl-mkt-tools{gap:10px}
  .wl-mkt-search{max-width:none;flex:1 1 100%}
  .wl-mkt-filters{width:100%}
  .wl-mkt-filters button{flex:1}
}

/* ========================== markets table ========================== */
.wl-tbl-wrap{border-radius:12px;overflow:hidden;background:var(--panel)}
.wl-tbl-scroll{overflow-x:auto}
table.wl-tbl{width:100%;border-collapse:collapse;min-width:580px}
table.wl-tbl th{
  text-align:right;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:16px 20px;white-space:nowrap;background:var(--panel-2)}
table.wl-tbl th:first-child,table.wl-tbl td:first-child{text-align:left}
/* numeric columns are mono and tabular so decimals stack; the name
   column stays in the UI face */
table.wl-tbl td{padding:15px 20px;text-align:right;white-space:nowrap;
  font-family:var(--font-mono);font-size:13px;
  font-variant-numeric:tabular-nums slashed-zero}
table.wl-tbl td:first-child{font-family:var(--font-site);font-size:13.5px}
/* a rule between rows, not around them — a table is the one place a line
   does real work, keeping the eye on a row across the full width */
table.wl-tbl tbody tr + tr td{border-top:1px solid var(--line)}
table.wl-tbl tbody tr:hover{background:var(--panel-2)}
.wl-coin{display:flex;align-items:center;gap:12px}
.wl-coin img{width:30px;height:30px;border-radius:50%;background:var(--panel-2);flex:none;object-fit:cover}
.wl-coin b{display:block;font-size:13.5px;font-weight:600}
.wl-coin span{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
.up{color:var(--pos)}
.down{color:var(--neg)}
.wl-skel{display:inline-block;min-width:66px;height:11px;border-radius:3px;
  background:var(--line-2);animation:wl-pulse 1.4s ease-in-out infinite}
@keyframes wl-pulse{50%{opacity:.4}}

/* ========================== closing CTA ==========================
   One panel doing two jobs: the ask on the left, the reasons to say yes
   on the right. Single column on a phone, where the marks fall under the
   buttons and read as a checklist rather than a sidebar.
   ================================================================== */
/* the band sits on the light grey ground so the dark panel reads as a
   card lifted off it; the panel keeps the root (dark) tokens, so nothing
   inside it has to change */
.wl-cta-band{padding:88px 0 104px;background:#f5f5f7}
.wl-cta-panel{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--panel);border-radius:20px;
  padding:32px 24px;
  display:grid;gap:32px}
@media (min-width:560px){.wl-cta-panel{padding:44px 40px}}
@media (min-width:980px){
  .wl-cta-panel{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:56px;align-items:center;padding:56px}
}
/* lift the content over the dot field without touching the field itself —
   a blanket `> *` rule would drop its position:absolute and hand it a
   grid cell of its own */
.wl-cta-panel > .copy,
.wl-cta-panel > .marks{position:relative;z-index:1}
.wl-cta-panel .wl-dotfield{z-index:0}
.wl-cta-panel .wl-kick{margin-bottom:16px}
.wl-cta-panel h2{margin:0;max-width:18ch}
.wl-cta-panel .wl-lede{margin:16px 0 0;max-width:46ch}
.wl-cta-panel .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:559px){.wl-cta-panel .cta .wl-btn{flex:1 1 100%}}

.wl-cta-panel .marks{
  list-style:none;margin:0;padding:0;display:grid;gap:2px;
  background:var(--line);border-radius:14px;overflow:hidden}
.wl-cta-panel .marks li{
  background:var(--panel-2);display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px}
.wl-cta-panel .marks svg{width:20px;height:20px;flex:none;color:var(--acc);margin-top:1px}
.wl-cta-panel .marks span{display:grid;gap:3px;min-width:0}
.wl-cta-panel .marks strong{
  font-size:13.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.wl-cta-panel .marks span{font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* ============================ footer ============================
   Brand block plus three short link columns. The columns are a 2-up grid
   on a phone and 3-up from 560px, so nothing ever wraps to one link
   per line. Every link points at a page that exists.
   ================================================================== */
/* the footer is its own block, not the tail of the CTA — a rule and a
   deeper top padding keep the two from reading as one dark slab */
.wl-foot{padding:72px 0 28px;background:var(--g0);border-top:1px solid var(--line)}
.wl-foot-grid{display:grid;gap:40px}
@media (min-width:900px){
  .wl-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px}
}
.wl-foot .wl-logo .mark{height:34px;width:auto;display:block}
.wl-foot .brand p{
  margin:18px 0 0;max-width:38ch;
  font-size:13px;line-height:1.7;color:var(--ink-3)}
.wl-foot .brand .wl-social{margin-top:22px}

.wl-foot .cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
@media (min-width:560px){.wl-foot .cols{grid-template-columns:repeat(3,1fr)}}
.wl-foot .cols > div{display:grid;gap:12px;align-content:start}
.wl-foot .cols h3{
  margin:0 0 2px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.wl-foot .cols a{
  font-size:13.5px;font-weight:500;color:var(--ink-2);transition:color .15s}
.wl-foot .cols a:hover{color:var(--ink)}

.wl-social{display:flex;gap:10px}
.wl-social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--panel);color:var(--ink-2);transition:background .15s,color .15s}
.wl-social a:hover{background:var(--panel-2);color:var(--ink)}
.wl-social svg{width:17px;height:17px}

.wl-foot-base{
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  justify-content:space-between;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3)}
.wl-foot-base .note{color:var(--ink-3);opacity:.85}
.wl-foot-base a{color:var(--ink-3)}
.wl-foot-base a:hover{color:var(--ink-2)}

@media (max-width:600px){
  .wl-cta-band{padding:56px 0 64px}
  .wl-foot{padding:52px 0 24px}
  .wl-foot-grid{gap:34px}
  .wl-foot-base{margin-top:32px;gap:6px 16px}
}

/* ============================ verify ============================ */
.wl-mid{min-height:100dvh;display:grid;place-items:center;padding:120px 24px 60px}
.wl-vpanel{width:100%;max-width:440px;text-align:center;
  background:var(--panel);border-radius:12px;padding:44px 34px}
.wl-vpanel .badge{width:58px;height:58px;border-radius:12px;margin:0 auto 24px;display:grid;
  place-items:center;background:var(--panel-2);color:var(--ink)}
.wl-vpanel .badge.bad{color:var(--neg)}
.wl-vpanel .badge svg{width:27px;height:27px}
.wl-vpanel h1{margin:0;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.wl-vpanel p{margin:14px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.wl-vpanel .cta{margin-top:28px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}


/* =====================================================================
   Dashboard simulator — a live HTML mock of the real wallet screen,
   mirroring #wl-home in dashboard.php. Static data, no JS.
   ===================================================================== */
.wl-sim-stage{
  position:relative;margin:52px auto 0;max-width:960px;padding:0 22px 56px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
@media (min-width:980px){
  .wl-sim-stage{flex-direction:row;justify-content:center;gap:0}
}

/* the simulator mirrors the app, which runs Inter — keep it on the app face */
.wl-phone,.wl-phone *{font-family:var(--font-ui)}

/* --- the device --- */
.wl-phone{
  position:relative;z-index:2;order:1;      /* stays above the cards on mobile */
  width:300px;max-width:100%;
  border-radius:46px;padding:11px;
  background:#161a22;                       /* titanium rail */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),  /* top highlight on the rail  */
    inset 0 0 0 12px #05070c,               /* black bezel under the rail */
    0 40px 90px -30px rgba(0,0,0,.95),
    0 0 0 1px rgba(0,0,0,.6)}
/* hardware buttons — real elements, each its own length.
   (These were previously faked with box-shadow copies of one element, which
   forced all three to the same height and pushed the top one off the frame.) */
.wl-phone .hw{position:absolute;width:3px;border-radius:2px;background:#1e232c;z-index:0}
.wl-phone .hw.mute{left:-3px;top:92px;height:24px}
.wl-phone .hw.vup {left:-3px;top:130px;height:52px}
.wl-phone .hw.vdn {left:-3px;top:194px;height:52px}
.wl-phone .hw.side{right:-3px;top:160px;height:84px}

.wl-phone-screen{
  position:relative;overflow:hidden;
  border-radius:36px;background:#0b0d11;
  padding:0 13px 10px;
  height:640px;                     /* fixed, not min — otherwise the token list pushes the frame taller and never clips.
                                       278px screen x 640 = 2.30:1 */
  display:flex;flex-direction:column;
  text-align:left;color:#eceff5}

/* --- status bar --- */
.wl-sim-status{
  position:relative;z-index:6;
  height:48px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 4px 0 12px;font-size:12.5px;font-weight:600;letter-spacing:-.2px}
.wl-sim-status .sig{display:flex;align-items:center;gap:5px}
.wl-sim-status .sig svg{display:block}
.wl-sim-status .bars{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.wl-sim-status .bars i{width:3px;border-radius:1px;background:#eceff5}
.wl-sim-status .batt{
  width:24px;height:12px;border-radius:3.5px;position:relative;
  border:1.2px solid rgba(236,239,245,.5);padding:1.4px}
.wl-sim-status .batt::after{
  content:"";position:absolute;right:-3.4px;top:50%;transform:translateY(-50%);
  width:1.8px;height:4.5px;border-radius:0 1.5px 1.5px 0;background:rgba(236,239,245,.5)}
.wl-sim-status .batt i{display:block;height:100%;width:78%;border-radius:1.6px;background:#eceff5}

/* dynamic island */
.wl-sim-island{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:7;
  width:84px;height:25px;border-radius:999px;background:#000;
  display:flex;align-items:center;justify-content:flex-end;padding-right:9px}
.wl-sim-island i{width:7px;height:7px;border-radius:50%;background:#10141c;
  box-shadow:inset 0 0 0 1.5px #05070c}

/* home indicator */
.wl-sim-home{
  width:104px;height:4.5px;border-radius:999px;background:rgba(236,239,245,.32);
  margin:9px auto 2px}

/* fill the screen and pin the tab bar to the bottom, like the real app */
.wl-sim{flex:1;min-height:0;display:flex;flex-direction:column;font-size:13px;line-height:1.4}
.wl-sim .row{display:flex;align-items:center}

/* header */
.wl-sim-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.wl-sim-wallet{
  display:inline-flex;align-items:center;gap:7px;
  background:#1a1e26;border-radius:999px;padding:5px 11px 5px 5px;
  font-size:12.5px;font-weight:600}
.wl-sim-wallet .av{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  background:var(--acc);color:var(--acc-ink)}
.wl-sim-wallet .av svg{width:12px;height:12px}
.wl-sim-wallet .cv{width:11px;height:11px;color:#8a919e}
.wl-sim-ic{width:30px;height:30px;display:grid;place-items:center;color:#eceff5}
.wl-sim-ic svg{width:19px;height:19px}

/* balance */
/* same balance card as the real dashboard (#wl-home .wl-balance),
   scaled down for the 278px phone screen */
/* flat surface, same as the real dashboard card */
/* mirrors the real dashboard hero (css/dashboard-modern.css): layered
   gradient surface and the 24h change as a badge, so the marketing shot
   shows the product as it actually looks */
.wl-sim-bal{
  flex:none;margin-top:12px;padding:14px;border-radius:16px;
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(90% 70% at 8% 0%, rgba(255,255,255,.055) 0%, transparent 60%),
    linear-gradient(168deg, #171b23 0%, #13161d 45%, #101319 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(255,255,255,.045);
}
.wl-sim-bal::after{
  content:"";position:absolute;top:-60%;right:-25%;width:75%;height:190%;
  background:radial-gradient(closest-side, rgba(252,213,53,.09), transparent 70%);
  pointer-events:none;z-index:0;
}
.wl-sim-bal > *{position:relative;z-index:1}
.wl-sim-bal .lbl{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#8a919e}
.wl-sim-bal .lbl svg{width:13px;height:13px}
.wl-sim-bal .amt{
  margin-top:5px;font-family:var(--font-mono);font-size:27px;font-weight:600;
  letter-spacing:-1.2px;font-variant-numeric:tabular-nums slashed-zero}
.wl-sim-bal .delta-row{display:flex;align-items:center;gap:7px;margin-top:9px}
.wl-sim-bal .delta{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;
  font-family:var(--font-mono);font-size:11px;
  font-variant-numeric:tabular-nums;
  background:rgba(61,220,132,.13);color:var(--pos);
}
.wl-sim-bal .delta svg{width:10px;height:10px;flex:none}
.wl-sim-bal .per{font-size:11px;color:#5c636f}

/* quick actions */
.wl-sim-acts{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.wl-sim-act{display:grid;justify-items:center;gap:6px;font-size:10.5px;color:#8a919e}
.wl-sim-act .i{width:40px;height:40px;border-radius:50%;background:#1a1e26;
  display:grid;place-items:center;color:#eceff5}
.wl-sim-act .i svg{width:17px;height:17px}
.wl-sim-act.on .i{background:var(--acc);color:var(--acc-ink)}

/* token list */
.wl-sim-sec{flex:none;display:flex;align-items:center;justify-content:space-between;
  margin:16px 0 6px;font-size:13px;font-weight:650}
.wl-sim-sec a{font-size:11px;color:#8a919e;font-weight:400}
/* the list clips at the tab bar, the way a real scrolling screen does —
   this keeps the handset proportion fixed however many coins are listed */
.wl-sim-list{flex:1;min-height:0;overflow:hidden;position:relative}
.wl-sim-list::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34px;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,17,0),#0b0d11)}
.wl-sim-tok{display:flex;align-items:center;gap:10px;padding:8px 0}
.wl-sim-tok img{width:32px;height:32px;border-radius:50%;flex:none;background:#1a1e26}
/* meta and val are two stacked columns — the children are <span>s, so they
   must be blockified or name/price and value/amount run together inline. */
.wl-sim-tok .meta{flex:1 1 auto;min-width:0}
.wl-sim-tok .val{flex:none;text-align:right;white-space:nowrap}
.wl-sim-tok .nm,.wl-sim-tok .sub,
.wl-sim-tok .q,.wl-sim-tok .f{display:block}
.wl-sim-tok .nm{font-size:12.5px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-sim-tok .sub{font-family:var(--font-mono);font-size:10.5px;color:#8a919e;margin-top:3px;
  line-height:1.2;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-sim-tok .sub .up{color:var(--pos)}
.wl-sim-tok .sub .down{color:var(--neg)}
.wl-sim-tok .q{font-family:var(--font-mono);font-size:12.5px;font-weight:600;line-height:1.25;
  font-variant-numeric:tabular-nums slashed-zero}
.wl-sim-tok .f{font-family:var(--font-mono);font-size:10.5px;color:#8a919e;margin-top:3px;
  line-height:1.2;font-variant-numeric:tabular-nums}

/* tab bar — mirrors .wl-tabbar in theme-web3.css: floating pill + detached FAB */
.wl-sim-tabbar{flex:none;display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:12px}
.wl-sim-pill{
  flex:1;display:flex;justify-content:space-around;align-items:center;
  background:linear-gradient(180deg,#1c2029,#14171e);
  border-radius:999px;padding:9px 6px;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.wl-sim-pill span{display:flex;align-items:center;justify-content:center;
  padding:6px 11px;border-radius:999px;color:#737a86}
.wl-sim-pill span.on{color:var(--acc);background:rgba(252, 213, 53,.14)}
.wl-sim-pill svg{width:20px;height:20px;stroke-width:1.8}
.wl-sim-fab{
  width:44px;height:44px;flex:none;border-radius:50%;
  background:linear-gradient(180deg,#1c2029,#14171e);
  display:grid;place-items:center;color:#eceff5;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.wl-sim-fab svg{width:18px;height:18px;stroke-width:1.9}

/* Flanking cards — same surfaces, radii and type as the phone screen, so
   they read as pulled out of the app rather than dropped in beside it. */
/* Mobile: the cards stack below the phone. Desktop: they float either side. */
.wl-sim-side{
  display:block;width:100%;max-width:300px;text-align:left;order:2;
  background:#12151b;border:0;border-radius:18px;padding:16px 16px 15px}
@media (min-width:980px){
  .wl-sim-side{
    position:absolute;z-index:1;width:262px;max-width:none;
    box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
  .wl-sim-side.a{left:0;top:66px}
  .wl-sim-side.b{right:0;top:262px}
}

  .wl-sim-side .hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .wl-sim-side .hd b{font-size:12.5px;font-weight:650;color:#eceff5}
  .wl-sim-side .hd .more{color:#5c636f;display:grid;place-items:center}
  .wl-sim-side .hd .more svg{width:15px;height:15px}

  /* portfolio card */
  .wl-sim-side .v{margin-top:12px;font-family:var(--font-mono);font-size:21px;font-weight:600;
    letter-spacing:-.7px;color:#eceff5;font-variant-numeric:tabular-nums slashed-zero}
  .wl-sim-side .d{margin-top:5px;font-family:var(--font-mono);font-size:11.5px;color:var(--pos);
    font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px}
  .wl-sim-side .d svg{width:10px;height:10px}
  .wl-sim-side .d em{font-style:normal;color:#5c636f}
  .wl-sim-side .spark{margin-top:12px;height:56px}
  .wl-sim-side .spark svg{width:100%;height:100%;display:block;overflow:visible}
  .wl-sim-side .ranges{display:flex;gap:5px;margin-top:12px}
  .wl-sim-side .ranges i{
    flex:1;text-align:center;font-style:normal;font-size:10.5px;color:#8a919e;
    padding:5px 0;border-radius:7px;background:#1a1e26}
  .wl-sim-side .ranges i.on{background:rgba(252, 213, 53,.14);color:var(--acc-2);font-weight:600}

  /* activity card */
  .wl-sim-side .act{display:flex;align-items:center;gap:10px;padding:10px 0}
  /* no divider rules — rows are separated by spacing alone */
  .wl-sim-side .act .ico{position:relative;flex:none}
  .wl-sim-side .act .ico img{width:30px;height:30px;border-radius:50%;background:#1a1e26;display:block}
  .wl-sim-side .act .ico i{
    position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;
    display:grid;place-items:center;border:2px solid #12151b;background:#1a1e26;color:#8a919e}
  .wl-sim-side .act .ico i svg{width:8px;height:8px;stroke-width:3}
  .wl-sim-side .act .ico i.in{background:rgba(61,220,132,.18);color:var(--pos)}
  .wl-sim-side .act .ico i.out{background:rgba(232,115,125,.18);color:var(--neg)}
  .wl-sim-side .act .ico i.swp{background:rgba(252, 213, 53,.18);color:var(--acc-2)}
  .wl-sim-side .act .tx{flex:1;min-width:0}
  .wl-sim-side .act .tx b{display:block;font-size:12px;font-weight:600;color:#eceff5}
  .wl-sim-side .act .tx span{display:block;font-size:10.5px;color:#8a919e;margin-top:2px}
  .wl-sim-side .act .amt{text-align:right;font-family:var(--font-mono);
    font-variant-numeric:tabular-nums slashed-zero}
  .wl-sim-side .act .amt b{display:block;font-size:11.5px;font-weight:600;color:#eceff5}
  .wl-sim-side .act .amt b.pos{color:var(--pos)}
  .wl-sim-side .act .amt span{display:block;font-size:10px;color:#5c636f;margin-top:2px}


/* =====================================================================
   Integration layer — hero stage, orbiting chips, and the two wallet
   cards reused inside the panel grid.
   ===================================================================== */

/* hero right column: the device, centred, with chips around it */
.wl-stage{
  position:relative;z-index:2;
  display:flex;justify-content:center;align-items:flex-end;
  padding-bottom:0;min-height:100%}
.wl-stage .wl-phone{order:0}


@media (min-width:980px){
  .wl-hero .grid{align-items:center}
}

/* the wallet cards, when placed in the monochrome panel grid */
.wl-grid2 > .wl-sim-side{
  position:static !important;
  display:block;width:auto;max-width:none;order:0;
  background:var(--panel);border-radius:14px;padding:22px;box-shadow:none}
.wl-grid2 > .wl-sim-side .hd b{color:var(--ink);font-size:13px;
  text-transform:uppercase;letter-spacing:.02em}
.wl-grid2 > .wl-sim-side .hd .more{color:var(--ink-3)}
.wl-grid2 > .wl-sim-side .v{color:var(--ink)}
.wl-grid2 > .wl-sim-side .d em{color:var(--ink-3)}
.wl-grid2 > .wl-sim-side .spark{height:96px}
.wl-grid2 > .wl-sim-side .ranges i{background:var(--panel-2);color:var(--ink-2)}
.wl-grid2 > .wl-sim-side .ranges i.on{background:var(--line-2);color:var(--ink)}
.wl-grid2 > .wl-sim-side .act .ico img{background:var(--panel-2)}
.wl-grid2 > .wl-sim-side .act .ico i{border-color:var(--panel);background:var(--panel-2)}
.wl-grid2 > .wl-sim-side .act .tx b{color:var(--ink)}
.wl-grid2 > .wl-sim-side .act .tx span{color:var(--ink-3)}
.wl-grid2 > .wl-sim-side .act .amt b{color:var(--ink)}
.wl-grid2 > .wl-sim-side .act .amt span{color:var(--ink-3)}

/* the sparkline reads as a line chart at panel size */
.wl-grid2 > .wl-sim-side .spark svg path[fill^="rgba"]{fill:rgba(255,255,255,.06)}
.wl-grid2 > .wl-sim-side .spark svg path[stroke],
.wl-grid2 > .wl-sim-side .spark svg circle{stroke:var(--ink);fill:none}
.wl-grid2 > .wl-sim-side .spark svg circle{fill:var(--ink)}

/* market widget frame inside a monochrome panel */
.wl-mkt-grid{display:grid;gap:12px}
.wl-mkt-grid>div{min-width:0}
.wl-mkt-grid .col-md-4>.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wl-mkt-grid .col-6{min-width:0}
.wl-mkt-grid .tradingview-widget-container{border-radius:10px;overflow:hidden}
.wl-mkt-grid .tradingview-widget-container.card{
  background:var(--panel-2);border-radius:10px;padding:8px 12px;min-height:80px}
@media (min-width:980px){.wl-mkt-grid{grid-template-columns:2fr 1fr;align-items:start}}

/* =====================================================================
   Hero type — stacked lines, the wordmark set as outlined display.
   ===================================================================== */
.wl-kick{
  display:inline-flex;align-items:center;margin-bottom:24px;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3)}
.wl-kick i{display:none}

.wl-hero h1.wl-display{
  display:flex;flex-direction:column;
  font-size:clamp(30px,7.4vw,60px);line-height:.98;letter-spacing:-.035em}
.wl-hero h1 .ln{display:block}
.wl-hero h1 .ln.sub{
  font-size:.52em;line-height:1.25;font-weight:600;letter-spacing:-.02em;
  color:var(--ink-2);margin:.32em 0 .1em;
  display:flex;align-items:center}
/* the leading em-dash was a blue tick against the headline; the label
   carries itself without it */
.wl-hero h1 .ln.sub em{display:none}

/* the wordmark: outlined, so the eye lands on it without another colour */
.wl-hero h1 .ln.out{
  color:transparent;
  -webkit-text-stroke:1.2px var(--ink);
  paint-order:stroke fill}
@supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
  .wl-hero h1 .ln.out{color:var(--ink)}
}
@media (max-width:520px){
  .wl-hero h1 .ln.out{-webkit-text-stroke-width:.9px}
}

/* =====================================================================
   Floating coin chips — visible at every size, repositioned per breakpoint
   ===================================================================== */
.wl-chip{
  position:absolute;z-index:4;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;background:var(--panel-2)}
.wl-chip img{width:20px;height:20px;border-radius:50%}
.wl-chip.c1{top:2%;left:2%}
.wl-chip.c2{top:16%;right:1%}
.wl-chip.c3{bottom:20%;left:0}
.wl-chip.c4{bottom:6%;right:4%}
@media (min-width:700px){
  .wl-chip{width:46px;height:46px;border-radius:13px}
  .wl-chip img{width:24px;height:24px}
}
@media (min-width:980px){
  .wl-chip.c1{top:6%;left:4%}
  .wl-chip.c2{top:22%;right:2%}
  .wl-chip.c3{bottom:26%;left:0}
  .wl-chip.c4{bottom:8%;right:8%}
}

/* =====================================================================
   Mobile navigation — a dropped panel, not a bare full-screen list.
   ===================================================================== */
.wl-scrim{
  position:fixed;inset:0;z-index:198;background:rgba(4,4,6,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wl-scrim[hidden]{display:none}
@media (min-width:920px){.wl-scrim{display:none !important}}

.wl-menu{
  position:fixed;left:12px;right:12px;top:74px;bottom:auto;z-index:199;
  background:var(--panel);border-radius:20px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 30px 70px -24px rgba(0,0,0,.95);
  display:block;overflow:visible;
  transform-origin:top center;
  animation:wl-drop .22s cubic-bezier(.22,1,.36,1)}
@keyframes wl-drop{from{opacity:0;transform:translateY(-8px) scale(.985)}}
.wl-menu[hidden]{display:none}
.wl-menu nav{display:block;counter-reset:m}
.wl-menu nav a{
  counter-increment:m;
  display:flex;align-items:center;gap:14px;min-height:56px;padding:0 12px;
  border:0;border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.wl-menu nav a::before{
  content:"0" counter(m);
  font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--ink-3);
  min-width:20px}
.wl-menu nav a::after{
  content:"";margin-left:auto;width:7px;height:7px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(-45deg)}
.wl-menu nav a:active{background:var(--panel-2)}
.wl-menu .mfoot{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin:8px 0 0;padding:12px 4px 4px}
.wl-menu .mfoot .wl-btn{width:100%;height:48px;font-size:14px;border-radius:8px}
@media (min-width:920px){.wl-menu{display:none !important}}

/* =====================================================================
   Phones — a single pass over the public pages

   The layouts above are already single-column at small widths; what was
   left were the things that do not restack on their own: fixed gutters,
   display type that stays too large, a table with a 580px floor, and
   touch targets under 44px. Nothing here changes the desktop view.
   ===================================================================== */
@media (max-width:600px){
  /* tighter gutter buys ~16px of line length, which matters most at the
     sizes where copy is closest to wrapping awkwardly */
  .wl-wrap{padding:0 18px}

  .wl-sect{padding:56px 0}
  .wl-sect.plain{padding-top:72px}
  .wl-stages-sect{padding:56px 0}
  .wl-cta-band{padding:56px 0 64px}

  /* display type: the clamp floors were still tall enough to wrap into
     five or six lines on a 360px screen */
  .wl-display{font-size:clamp(26px,8.4vw,34px);line-height:1.08}
  .wl-hero h1.wl-display{font-size:clamp(28px,9vw,38px)}
  .wl-two h2,
  .wl-benefits-intro h2,
  .wl-stages-head h2{max-width:none}

  .wl-hero{padding:40px 0 40px}
  .wl-hero .grid{gap:36px}
  .wl-hero .cta{gap:10px}
  .wl-hero .cta .wl-btn{flex:1 1 100%}      /* full-width, easy to hit */

  .wl-metrics{gap:24px 20px}
  .wl-benefits-intro{gap:28px;margin-bottom:32px}
  .wl-stages{gap:36px}
  .wl-stages-foot{margin-top:40px}
  .wl-stages-foot .wl-btn{width:100%}

  /* the coin strip is already a 2-up grid at this width; it only needs
     the cells to stop clipping their labels */
  .wl-strip .cell{padding:14px 10px;font-size:13px}

  /* where a table still has a min-width floor, let its scroller reach the
     page edge so it reads as scrollable rather than clipped */
  .wl-tbl-wrap{margin:0 -18px;border-radius:0}

  .wl-foot .cols{gap:26px 20px}
}

/* touch targets: anything tappable gets to 44px, the smallest reliable
   target on a phone, without changing how it looks on a desktop */
@media (hover:none) and (pointer:coarse){
  .wl-btn.sm{height:44px;padding:0 20px}
  .wl-faq summary{padding:18px 20px}
  .wl-mkt-filters button{height:46px}
  .wl-crumb a{padding:2px 0}
}

/* ========================= content pages =========================
   advantages.php / backup.php. Three shapes only: a hero, a single
   pulled-out line, and then either a two-column comparison or a numbered
   run. Each page makes one argument and stops.
   ================================================================== */
.wl-page{padding:0}

.wl-page-hero{background:var(--g1);padding:28px 0 56px}
@media (min-width:900px){.wl-page-hero{padding:36px 0 76px}}
.wl-page-head{max-width:60ch}
.wl-page-head h1{
  margin:0;font-size:clamp(30px,5.2vw,50px);font-weight:700;line-height:1.08;
  letter-spacing:-.038em;color:var(--ink)}
.wl-page-head p{
  margin:20px 0 0;font-size:15.5px;line-height:1.72;color:var(--ink-2);max-width:54ch}

/* one line, pulled out and set large — the argument in a single breath */
.wl-page-band{padding:56px 0;background:var(--g0)}
@media (min-width:900px){.wl-page-band{padding:80px 0}}
.wl-page-say{
  margin:0;max-width:34ch;
  font-size:clamp(20px,2.8vw,30px);font-weight:600;line-height:1.34;
  letter-spacing:-.025em;color:var(--ink)}

/* ---- statement + assurance card ----
   One column of type, one small card of facts. Single column under 900px,
   where the card keeps its full width and stays legible on a phone. */
.wl-say-split{display:grid;gap:28px;align-items:center}
@media (min-width:900px){
  .wl-say-split{grid-template-columns:minmax(0,1fr) 320px;gap:64px}
}
@media (min-width:1100px){.wl-say-split{grid-template-columns:minmax(0,1fr) 360px}}
.wl-say-split .wl-page-say{
  margin-top:14px;max-width:40ch;
  font-size:clamp(17px,1.9vw,21px);line-height:1.5;letter-spacing:-.018em}

.wl-say-card{
  background:var(--panel-2);border-radius:16px;padding:20px}
@media (min-width:560px){.wl-say-card{padding:24px}}
.wl-say-card .hd{display:flex;align-items:center;gap:14px}
.wl-say-card .ic{
  flex:none;display:grid;place-items:center;width:42px;height:42px;
  border-radius:12px;background:var(--acc);color:var(--acc-ink)}
.wl-say-card .ic svg{width:21px;height:21px;display:block}
.wl-say-card .t{display:grid;gap:3px;min-width:0}
.wl-say-card .t strong{
  font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.wl-say-card .t span{font-size:12.5px;line-height:1.45;color:var(--ink-3)}

.wl-say-card .rows{margin:18px 0 0;display:grid;gap:1px;
  background:var(--line);border-radius:11px;overflow:hidden}
.wl-say-card .rows > div{
  background:var(--panel-2);display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:12px 14px}
.wl-say-card dt{font-size:12.5px;color:var(--ink-3)}
.wl-say-card dd{
  margin:0;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);text-align:right}
.wl-say-card dd.live{display:flex;align-items:center;gap:7px}
.wl-say-card dd.live i{
  width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 28%,transparent)}
.wl-page-h2{
  margin:0 0 40px;font-size:clamp(20px,2.6vw,28px);font-weight:600;
  line-height:1.24;letter-spacing:-.025em;color:var(--ink)}

/* ---- comparison ---- */
.wl-compare{margin:64px 0;display:grid;gap:2px;background:var(--line);
  border-radius:14px;overflow:hidden}
@media (min-width:900px){.wl-compare{margin:88px 0}}
.wl-compare .head,
.wl-compare .row{display:grid;gap:2px}
@media (min-width:760px){
  .wl-compare .head,
  .wl-compare .row{grid-template-columns:1fr 1fr}
}
.wl-compare .head span{
  padding:14px 22px;background:var(--panel-2);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.wl-compare .head .b{color:var(--acc-2)}
.wl-compare .row span{
  padding:20px 22px;background:var(--panel);
  font-size:13.5px;line-height:1.65;color:var(--ink-2)}
/* the right-hand column is the answer, so it carries the weight */
.wl-compare .row .b{color:var(--ink);font-weight:500}
.wl-compare .row .b::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:10px;vertical-align:middle;background:var(--acc)}

/* ---- numbered run ---- */
.wl-steps{
  counter-reset:s;list-style:none;margin:64px 0;padding:0;display:grid;gap:2px;
  border-radius:14px;overflow:hidden;background:var(--line)}
@media (min-width:900px){.wl-steps{margin:88px 0}}
/* inside a band the band's own padding sets the rhythm. The gap has to be
   the band's padding, not a margin on the list — a top margin collapses
   out of a band whose padding-top is zeroed and leaks the page ground */
.wl-page-band .wl-steps{margin:0}
body.wl-site .wl-light + .wl-light.wl-page-band{padding-top:40px}
/* the run stays a dark card on a white band — same token swap the dark
   panel uses, so the rows, rules and text follow without bespoke rules */
body.wl-site .wl-light .wl-steps{
  --panel:#121214;
  --line:#26262b;
  --ink:#f2f2f3;
  --ink-2:#9a9aa3;
  --ink-3:#6a6a73;
  background:var(--line);
  color:var(--ink);
}
.wl-steps li{
  counter-increment:s;background:var(--panel);
  display:grid;gap:6px 22px;padding:26px 24px;
  grid-template-columns:auto 1fr;align-items:start}
@media (min-width:760px){.wl-steps li{padding:30px 32px}}
.wl-steps li::before{
  content:"0" counter(s);grid-row:1 / span 2;
  font-family:var(--font-mono);font-size:14px;font-weight:600;
  letter-spacing:-.02em;color:var(--acc);padding-top:2px}
.wl-steps h3{
  margin:0;font-size:16px;font-weight:600;letter-spacing:-.02em;
  line-height:1.35;color:var(--ink)}
.wl-steps p{
  margin:0;font-size:13.5px;line-height:1.78;color:var(--ink-2);max-width:64ch}

.wl-points{display:grid;gap:36px}
@media (min-width:720px){.wl-points{grid-template-columns:1fr 1fr;gap:40px 56px}}
.wl-points .pt h3{
  margin:0;font-size:16px;font-weight:600;line-height:1.35;
  letter-spacing:-.02em;color:var(--ink);max-width:26ch}
.wl-points .pt p{
  margin:12px 0 0;font-size:13.5px;line-height:1.78;color:var(--ink-2);max-width:48ch}

.wl-page-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px 32px;margin:72px 0 96px}
.wl-page-cta h2{
  margin:0;font-size:clamp(22px,3vw,30px);font-weight:600;line-height:1.24;
  letter-spacing:-.03em;color:var(--ink);max-width:22ch}
.wl-page-cta p{margin:10px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink-2);max-width:48ch}
@media (max-width:600px){
  .wl-page-hero{padding:24px 0 44px}
  .wl-compare,.wl-steps{margin:48px 0}
  .wl-steps li{padding:22px 18px;gap:6px 16px}
  .wl-page-cta{margin:48px 0 64px}
  .wl-page-cta .wl-btn{width:100%}
}

/* =====================================================================
   QFS card section (public)
   The artwork mirrors the one the app renders on card.php, so the
   marketing shot and the product cannot drift apart.
   ===================================================================== */
.wl-card-sect{padding:88px 0}
@media (max-width:600px){.wl-card-sect{padding:56px 0}}

.wl-cardrow{display:grid;gap:40px;align-items:center}
@media (min-width:900px){
  .wl-cardrow{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px}
}

.wl-cardrow .copy h2{
  margin:14px 0 0;font-size:clamp(26px,3.6vw,36px);font-weight:700;
  line-height:1.15;letter-spacing:-.03em;
}
.wl-cardrow .copy .wl-lede{margin:16px 0 0;max-width:46ch}
.wl-cardrow .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (max-width:559px){.wl-cardrow .cta .wl-btn{flex:1 1 100%}}

.wl-cardpts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.wl-cardpts li{display:flex;align-items:flex-start;gap:12px}
.wl-cardpts svg{width:20px;height:20px;flex:none;color:var(--acc);margin-top:2px}
.wl-cardpts span{display:grid;gap:2px;min-width:0}
.wl-cardpts b{font-size:14px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.wl-cardpts span span,.wl-cardpts b + *{font-size:13px;color:var(--ink-2)}

/* ---- the cards ---- */
.wl-cardrow .art{display:flex;justify-content:center}

/* two tiers, fanned. A grid with both in the same cell lets them overlap
   without absolute positioning, so the stack still sizes itself. */
.wl-cardstack{
  display:grid;width:min(360px,100%);
  padding-bottom:44px;   /* room for the offset of the front card */
}
.wl-cardstack .wl-mcard{grid-area:1/1}
.wl-cardstack .is-std{
  transform:rotate(-8deg) translate(-16px,-14px) scale(.94);
  filter:brightness(.82);
}
.wl-cardstack .is-metal{transform:rotate(-2deg) translate(18px,26px)}
@media (max-width:899px){
  .wl-cardstack .is-std{transform:rotate(-7deg) translate(-12px,-10px) scale(.94)}
  .wl-cardstack .is-metal{transform:rotate(-1deg) translate(12px,20px)}
}

.wl-mcard{
  position:relative;overflow:hidden;isolation:isolate;
  width:min(360px,100%);aspect-ratio:1.586;
  padding:clamp(16px,5%,22px);border-radius:18px;
  display:grid;grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(85% 60% at 12% 4%, rgba(255,236,180,.13) 0%, transparent 58%),
    linear-gradient(158deg,#342e20 0%,#241f16 40%,#12100b 74%,#201b12 100%);
  box-shadow:
    0 1px 0 rgba(255,226,150,.14) inset,
    0 0 0 1px rgba(252,213,53,.2),
    0 26px 50px -22px rgba(0,0,0,.75);
}
.wl-mcard.is-std{
  background:
    radial-gradient(85% 60% at 12% 4%, rgba(255,255,255,.09) 0%, transparent 58%),
    linear-gradient(158deg,#232937 0%,#161b24 38%,#0d1015 72%,#131820 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 0 0 1px rgba(255,255,255,.055),
    0 26px 50px -22px rgba(0,0,0,.6);
}
.wl-mcard.is-std .c-tier{background:rgba(255,255,255,.1);color:#cfd4de}
.wl-mcard .sheen{
  position:absolute;inset:-40% -10% auto;height:150%;z-index:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.05) 47%,transparent 62%);
}
.wl-mcard > *:not(.sheen){position:relative;z-index:1}

.wl-mcard .c-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wl-mcard .c-logo{height:clamp(20px,7%,26px);width:auto;max-width:96px;object-fit:contain;display:block}
.wl-mcard .c-tier{
  flex:none;padding:4px 10px;border-radius:20px;white-space:nowrap;
  font-size:9px;font-weight:700;letter-spacing:.13em;line-height:1.5;
  background:rgba(252,213,53,.15);color:var(--acc);
}
.wl-mcard .c-mid{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(8px,3.5%,14px) 0 0}
.wl-mcard .c-chip{width:clamp(28px,8%,36px);height:auto;aspect-ratio:34/26;flex:none;
  border-radius:4px;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55))}
.wl-mcard .c-num{
  display:flex;gap:clamp(8px,2.6%,13px);white-space:nowrap;
  font-family:var(--font-mono);font-size:clamp(13px,3.7vw,15px);font-weight:500;
  letter-spacing:.06em;color:#e3e7ee;line-height:1;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
}
.wl-mcard .c-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-top:clamp(9px,3.5%,13px)}
.wl-mcard .c-holder{min-width:0;flex:1}
.wl-mcard .c-holder small{display:block;font-size:8px;letter-spacing:.15em;
  text-transform:uppercase;color:#7c838f;line-height:1.4}
.wl-mcard .c-holder b{display:block;margin-top:3px;font-size:13px;font-weight:600;
  letter-spacing:.04em;color:#e8ebf1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-mcard .c-net{flex:none;font-size:18px;font-weight:700;font-style:italic;
  color:#f4f6fa;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.45)}

@media (prefers-reduced-motion:reduce){.wl-mcard{transform:none}}

.wl-cardtiers{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  margin-top:22px;border-radius:14px;overflow:hidden;background:var(--line);
}
/* --panel is pure white in a light band, which would make these vanish
   against the band itself; --panel-2 is the tinted surface the site uses
   for exactly this case, and it still reads in a dark band */
.wl-cardtiers > div{background:var(--panel-2);padding:13px 15px}
.wl-cardtiers b{
  display:block;font-size:14px;font-weight:600;letter-spacing:-.012em;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line);
}
.wl-cardtiers dl{margin:0;display:grid;gap:6px}
.wl-cardtiers dl > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wl-cardtiers dt{font-size:12px;color:var(--ink-3)}
.wl-cardtiers dd{
  margin:0;font-size:12.5px;font-weight:600;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;
}
@media (max-width:420px){.wl-cardtiers{grid-template-columns:1fr}}