/* Softseco site styles, one file for every page.
   1. shared: colours, type, buttons, header, menus, footer
   2. the homepage (.pg-index)
   3. the content-page kit (.kit): first-screen picture, sections, cards, controls
   4. each page's own styles, scoped to its body class (.pg-<page>)
   Generated by site2.py from the page sources. */

/* ===== 1. shared ===== */
/* Layout: one 1280px column; full-bleed photo hero, then alternating text and graphic rows; blue footer unchanged */
:root{
  --blue:#1315FF; --blue-deep:#0D0FCC; --blue-soft:#E9EAFF; --blue-on-dark:#8F90FF;
  --ink:#0B0B12; --night:#0B0B12; --night-2:#15152A;
  --paper:#FFFFFF; --mist:#F5F6FA; --grey:#5C6070; --grey-2:#8B8EA0;
  --line:rgba(11,11,18,.09); --line-w:rgba(255,255,255,.22);
  --display:'Red Hat Display','Helvetica Neue',Arial,sans-serif;
  --text:'Red Hat Text','Helvetica Neue',Arial,sans-serif;
  --mono:'Red Hat Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gl:max(24px, env(safe-area-inset-left, 0px)); --gr:max(24px, env(safe-area-inset-right, 0px));
  --hdr:72px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.wrap{max-width:1280px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;text-wrap:balance}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
h2{font-size:clamp(36px,4.4vw,58px);letter-spacing:-.03em;line-height:1.02}
.lead{font-size:clamp(17px,1.4vw,19px);color:var(--grey);line-height:1.6}

/* buttons: hover fills the button with another colour */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:999px;border:0;font-family:var(--text);font-size:15.5px;font-weight:600;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--blue);color:#fff}
.on-blue .btn-white:hover{background:var(--ink);color:#fff}
.btn-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.btn-line:hover{background:#fff;color:var(--ink)}
.btn-line.dark,.slide[data-tone="dark"] .btn-line{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line.dark:hover,.slide[data-tone="dark"] .btn-line:hover{background:var(--ink);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--blue);color:#fff}

/* header */
/* data-bar: none = transparent (page at the very top), dark = black bar (black hero image), light = translucent white bar, 95% + blur 10px (onekey.so uses 90%) (default).
   .lt = ink text (white bar, or no bar over a light image). The bar fades in like onekey.so: background-color .3s ease-in-out */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:61;background-color:transparent;transition:background-color .3s ease-in-out}
body[data-bar="light"]::before{background-color:rgba(255,255,255,.95)}
body[data-bar="dark"]::before{background-color:var(--bar-dark)}
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:60;height:var(--hdr);color:#fff;background-color:transparent;box-shadow:0 1px 0 rgba(11,11,18,0);transition:background-color .3s ease-in-out,color .3s ease-in-out,box-shadow .3s ease-in-out,-webkit-backdrop-filter .3s ease-in-out,backdrop-filter .3s ease-in-out}
:root{--bar-dark:#07070C}
.hdr.lt{color:var(--ink)}
.hdr[data-bar="dark"]{background-color:var(--bar-dark)}
.hdr[data-bar="light"]{background-color:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.hdr.open{background-color:#fff}
.hdr .wrap{display:flex;align-items:center;gap:36px;height:100%}
.brand{display:flex;align-items:center;flex:none;height:44px;padding-right:4px}
.brand svg{height:32px;width:15.1px;display:block;fill:currentColor;transition:fill .3s ease-in-out}
.hdr.lt .brand svg{fill:var(--blue)}
.nav{position:relative;z-index:3;display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500}   /* above the menu card, so the card never slides over a trigger */
.nav .nt,.nav .nl{display:block;padding:10px 0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;transition:opacity .25s}
.nav .nt:hover,.nav .nl:hover,.nav .nt[aria-expanded="true"]{opacity:.55}

/* mega menu: frame, position and motion after onekey.so (measured 20 Oct); the layout inside after circle.com.
   The card sits 42px left of its trigger and slides down 20px while fading in (0.38s, ease-out quint);
   moving to another trigger slides the card across and resizes it, and the new content comes in from halfway along the move;
   leaving closes it after 120ms (0.3s). */
.mm{--x:0px;--y:-20px;--q:cubic-bezier(.22,1,.36,1);position:absolute;top:62px;left:0;z-index:2;transform:translate3d(var(--x),var(--y),0);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .3s var(--q),opacity .3s var(--q),visibility 0s linear .3s}
.mm.on{--y:0px;opacity:1;visibility:visible;pointer-events:auto;transition:transform .38s var(--q),opacity .3s var(--q),visibility 0s}
.mm::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px}   /* keeps the hover alive across the gap under the trigger */
.mm-card{background:var(--paper);color:var(--ink);border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 24px 48px rgba(0,0,0,.08)}
.mm-view{position:relative;overflow:hidden;width:var(--w,0px);height:var(--h,0px);border-radius:15px;transition:width .38s var(--q),height .38s var(--q)}
.mm.snap,.mm.snap .mm-view,.mm.snap .mm-pane,.mm-pane.snap{transition:none!important}
.mm-pane{position:absolute;left:0;top:0;width:max-content;display:flex;gap:24px;padding:18px 18px 16px;visibility:hidden;opacity:0;pointer-events:none}
.mm-pane.cur{visibility:inherit;opacity:1;pointer-events:inherit;transition:transform .3s var(--q),opacity .3s var(--q)}
.mm-h{margin:6px 0 8px;padding:0 12px;font-family:var(--text);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.mm-g ul{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--c),264px);grid-template-rows:repeat(var(--r),auto);column-gap:24px;row-gap:2px}
.mm-i{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:start;padding:10px 12px;border-radius:12px;color:var(--ink)}
.mm-i .mi{grid-row:span 2;width:24px;height:24px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:color .2s}
.mm-i b{font-size:15px;font-weight:500;line-height:20px;letter-spacing:-.005em;transition:color .2s}
.mm-i em{display:inline-block;margin-left:6px;padding:0 7px;border-radius:99px;background:#EEEFF3;font-style:normal;font-size:11px;font-weight:500;line-height:18px;color:var(--grey);vertical-align:1px}
.mm-i small{display:block;margin-top:2px;font-size:14px;line-height:18px;color:var(--grey)}
.mm-i:hover b,.mm-i:hover .mi,.mm-i:focus-visible b,.mm-i:focus-visible .mi{color:var(--blue)}
.mm-i:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.mm-i.is-off,.sheet .acc-b a.is-off{cursor:default}   /* eEUR, Mint and Forex: shown, but they do not open yet */
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:14px}
.globe{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;cursor:pointer;transition:background-color .25s,color .25s,box-shadow .25s}
.globe:hover,.globe[aria-expanded="true"]{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #fff}
.hdr.lt .globe:hover,.hdr.lt .globe[aria-expanded="true"]{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.globe svg{width:20px;height:20px}
.hdr-r{position:relative}
.lang-wrap{position:static}
/* language menu, after the Coinbase pattern: a white card under the header, a grey heading, rows of language + region,
   a green tick on the current one; languages not available yet still highlight on hover but cannot be chosen */
.lang{position:absolute;top:calc(100% + 12px);right:72px;width:min(350px, calc(100vw - 2 * var(--gr)));height:350px;display:flex;flex-direction:column;padding:22px 13px 16px;border-radius:17px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px rgba(11,11,18,.08),0 24px 60px -24px rgba(11,11,18,.28);font-family:var(--text);transform-origin:top right;animation:langin .2s cubic-bezier(.22,1,.36,1)}
@keyframes langin{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.lang .lt{padding:0 11px 16px;font-size:14px;font-weight:600;color:var(--grey)}
/* a square card (350 x 350): the language list scrolls inside it, with a slim grey scrollbar */
.lang ul{flex:1 1 auto;min-height:0;list-style:none;margin:0;padding:0 2px 0 0;display:grid;align-content:start;gap:1px;overflow-y:auto;overscroll-behavior:contain}
/* scrollbar: a little wider than Chrome's thin one, with a small triangle at each end */
.lang ul::-webkit-scrollbar{width:9px}
.lang ul::-webkit-scrollbar-track{background:transparent}
.lang ul::-webkit-scrollbar-thumb{background:#B4B7C1;border-radius:99px;border:1.5px solid transparent;background-clip:padding-box}
.lang ul::-webkit-scrollbar-thumb:hover{background-color:#9A9DA8}
.lang ul::-webkit-scrollbar-button:single-button{display:block;height:12px;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:9px 9px}
.lang ul::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 2.2 8.9 7.8H1.1z' fill='%238E919C' stroke='%238E919C' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lang ul::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 7.8 1.1 2.2h7.8z' fill='%238E919C' stroke='%238E919C' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E")}
@supports not selector(::-webkit-scrollbar){.lang ul{scrollbar-width:thin;scrollbar-color:#B4B7C1 transparent}}
/* the menu box is a flex column, so it needs its own rule to stay hidden when closed */
.lang[hidden]{display:none}
.lang .opt{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:0;border-radius:13px;background:transparent;text-align:left;color:inherit;cursor:pointer;transition:background-color .15s ease}
.lang .opt:hover,.lang .opt:focus-visible{background:#F3F4F6;outline:none}
.lang .opt[aria-disabled="true"]{cursor:default}
.lang .opt b{display:block;font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.005em;line-height:1.35}
.lang .opt span{display:block;font-size:13.5px;color:var(--grey);line-height:1.45}
.lang .opt svg{flex:none;width:17px;height:17px;color:#098551}
@media (max-width:760px){.lang{right:0}}   /* on phones the menu keeps its right edge on the gutter */
.hdr .btn{height:40px;padding:0 20px;font-size:14.5px}
/* Trade: always blue, no hover; white only while the header is transparent over the blue-background slide */
.hdr .trade,.hdr .trade:hover{background:var(--blue);color:#fff}
.hdr.blue .trade,.hdr.blue .trade:hover{background:#fff;color:var(--ink)}
.menu-btn{display:none;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.sheet{max-height:calc(100dvh - var(--hdr) - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border-top:1px solid var(--line);box-shadow:0 30px 40px -30px rgba(11,11,18,.3)}
.sheet .wrap{display:grid;padding-block:8px 24px;height:auto}
.sheet a{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.015em}
.sheet a svg{width:15px;height:15px;opacity:.5}
.sheet .btn{margin-top:18px;border-bottom:0;font-family:var(--text);font-size:16px;justify-content:center;padding-block:0}
/* phone menu: the same five menus as the header, as an accordion (one open at a time) */
.sheet details{border-bottom:1px solid var(--line)}
.sheet summary{display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.015em;cursor:pointer;list-style:none}
.sheet summary::-webkit-details-marker{display:none}
.sheet summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:transform .25s var(--ease)}
.sheet details[open] summary svg{transform:rotate(180deg)}
.sheet .acc-b{display:grid;padding:0 0 14px}
.sheet .acc-b h6{margin:12px 0 2px;font-family:var(--text);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.sheet .acc-b a{justify-content:flex-start;gap:12px;padding:9px 0;border-bottom:0;font-family:var(--text);font-size:16px;font-weight:500;letter-spacing:0}
.sheet .acc-b .mi{width:20px;height:20px;opacity:1;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* header on narrower screens */
@media (max-width:1120px){.nav{display:none}.menu-btn{display:grid}.hdr-r{gap:10px}}
@media (max-width:760px){:root{--hdr:64px}.hdr .trade{display:none}}

/* footer: kept from softseco.com */
.footer{background:#1315ff;color:#fff;padding:80px 0 32px}
.footer .container{max-width:1200px;margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.footer ul{list-style:none;margin:0;padding:0}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr;gap:48px;margin-bottom:64px}
.footer h5{color:#fff;margin:0 0 18px;font-size:.9375rem;letter-spacing:-.005em}
.footer-col ul li{margin-bottom:12px}
.footer-col a{color:rgba(255,255,255,.80);font-size:.9375rem}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-brand p{color:rgba(255,255,255,.78);font-size:.9375rem;max-width:320px;margin-top:16px}
.footer-logo{display:inline-flex;align-items:center;gap:12px;color:#fff}
.footer-logo svg{height:32px;width:auto;display:block}
.footer-logo span{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;padding-top:32px;border-top:1px solid rgba(255,255,255,.18);font-size:.8125rem;color:rgba(255,255,255,.80)}
.footer-copy{justify-self:start}
.footer-disc{margin-top:12px;color:rgba(255,255,255,.6);font-size:.75rem;line-height:1.7;max-width:360px}
.social{display:flex;gap:16px;justify-self:center}
.social a{display:grid;place-items:center;color:#fff;transition:opacity .2s}
.social a:hover{opacity:.6}
.footer-lang{display:inline-flex;align-items:center;gap:8px;justify-self:end;color:#fff}
@media (max-width:1040px){.footer-top{grid-template-columns:1fr 1fr 1fr;gap:40px}}
@media (max-width:768px){.footer{padding:56px 0 max(24px, env(safe-area-inset-bottom))}.footer-top{grid-template-columns:1fr 1fr;gap:32px;margin-bottom:40px}.footer-brand{grid-column:1 / -1}.footer-bottom{grid-template-columns:1fr;gap:16px;padding-top:24px}.footer-bottom > *{justify-self:start}.social a{width:36px;height:36px}}

/* reveal: visible at rest, animates as it scrolls in */
.rv.in{animation:up .9s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ===== 2. homepage ===== */
/* hero: slides */
.pg-index .hero{position:relative;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;background:var(--night);color:#fff}
.pg-index .slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1.2s var(--ease),visibility 0s linear 1.2s}
.pg-index .slide.on{opacity:1;visibility:visible;transition:opacity 1.2s var(--ease),visibility 0s}
.pg-index .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 11s linear}
.pg-index .slide.on img{transform:scale(1)}
.pg-index .slide[data-tone="dark"]{color:var(--ink)}
.pg-index .copy{position:absolute;display:grid;gap:22px;max-width:620px}
.pg-index .copy h1{font-size:clamp(44px,6vw,92px);letter-spacing:-.035em;line-height:.98;font-weight:600}
@media (min-width:761px){
  .pg-index .copy h1 .ln{white-space:nowrap}
}
/* "Private amounts." stays on one line */
.pg-index .copy p{font-size:clamp(17px,1.45vw,20px);line-height:1.5;opacity:.82;max-width:520px}
.pg-index .copy .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.pg-index .slide .copy > *{opacity:0;transform:translateY(18px)}
.pg-index .slide.on .copy > *{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pg-index .slide.on .copy > *:nth-child(2){transition-delay:.12s}
.pg-index .slide.on .copy > *:nth-child(3){transition-delay:.24s}
.pg-index .slide.on .copy > *:nth-child(4){transition-delay:.36s}
.pg-index .pos-left{left:max(var(--gl), calc((100vw - 1280px) / 2 + 24px));top:50%;translate:0 -46%}
.pg-index .pos-right{right:max(var(--gr), calc((100vw - 1280px) / 2 + 24px));top:50%;translate:0 -46%;max-width:540px}
.pg-index .pos-bl{left:max(var(--gl), calc((100vw - 1280px) / 2 + 24px));bottom:150px}
.pg-index .hero-ctl{position:absolute;z-index:5;left:max(var(--gl), calc((100vw - 1280px) / 2 + 24px));bottom:max(40px, calc(env(safe-area-inset-bottom, 0px) + 24px))}
.pg-index .hero-ctl .playpause{position:absolute;left:100%;top:50%;translate:0 -50%}
.pg-index .hero-ctl::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:calc(6px * var(--k))}
/* keeps the hover while the pointer crosses to the button */
/* both counters grow by really changing size, not by scaling a picture: --k is the size (1 -> 1.7) and --show reveals
   the play/pause (0 -> 1). Both animate smoothly, so dots, edges and icons stay sharp and centred in every frame. */
@property --k{syntax:'<number>';inherits:true;initial-value:1}
@property --show{syntax:'<number>';inherits:true;initial-value:0}
@property --w{syntax:'<length>';inherits:false;initial-value:7px}
.pg-index .ctl{--k:1;--show:0;transition:--k .45s cubic-bezier(.22,1,.36,1),--show .45s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .pg-index .ctl:hover{--k:1.7;--show:1}
}
.pg-index .ctl:has(:focus-visible){--k:1.7;--show:1}
/* keyboard focus only, so a mouse click doesn't leave it big */
.pg-index .ctl.is-paused{--show:1}
@media (hover:none){
  .pg-index .ctl{--show:1}
}
/* play/pause: same glass as the counter; it grows out of the counter's right side as a circle (never a thin sliver); icons centred by the grid */
.pg-index .playpause{position:relative;flex:none;display:grid;place-items:center;width:calc(23px * var(--k) * var(--show));height:calc(23px * var(--k) * var(--show));margin-left:calc(6px * var(--k) * var(--show));padding:0;border:0;border-radius:99px;background:rgba(11,11,18,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;opacity:var(--show);overflow:hidden;pointer-events:none}
.pg-index .ctl:hover .playpause,.pg-index .ctl:has(:focus-visible) .playpause,.pg-index .ctl.is-paused .playpause{pointer-events:auto}
@media (hover:none){
  .pg-index .playpause{pointer-events:auto}
}
.pg-index .playpause svg{grid-area:1/1;width:calc(13px * var(--k) * var(--show));height:calc(13px * var(--k) * var(--show));fill:currentColor;transition:opacity .2s ease,transform .25s ease}
.pg-index .playpause .i-play{opacity:0;transform:scale(.6);translate:4.5% 0}
/* a triangle's weight sits left of its box: nudge it so it looks centred */
.pg-index .ctl.is-paused .playpause .i-pause{opacity:0;transform:scale(.6)}
.pg-index .ctl.is-paused .playpause .i-play{opacity:1;transform:none}
/* hero counter: dots, the current one a bar that fills over the 10 s of the slide; a dot can be clicked to jump */
.pg-index .switcher{position:relative;display:flex;align-items:center;gap:calc(7px * var(--k));padding:calc(8px * var(--k)) calc(11px * var(--k));border-radius:99px;background:rgba(11,11,18,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pg-index .switcher button{--w:7px;position:relative;display:block;flex:none;width:calc(var(--w) * var(--k));height:calc(7px * var(--k));padding:0;border:0;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.55);cursor:pointer;transition:--w .5s var(--ease),background-color .4s}
.pg-index .switcher button::after{content:"";position:absolute;inset:-9px -4px}
.pg-index .switcher button[aria-current="true"]{--w:52px;background:rgba(255,255,255,.38);cursor:default}
.pg-index .switcher button b{position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.95);transform:translateX(-100%)}
.pg-index .switcher button[aria-current="true"] b{animation:index-barfill var(--dur,10s) linear forwards}
.pg-index .switcher.paused button[aria-current="true"] b{animation:none;transform:none}
.pg-index .hero-ctl.is-paused .switcher button[aria-current="true"] b{animation-play-state:paused}
/* sections */
.pg-index .sec{padding-block:clamp(88px,10vw,144px)}
.pg-index .sec-head{display:grid;gap:18px;max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
/* 2: product boxes */
.pg-index .sec.prod{padding-top:20px;padding-bottom:clamp(40px,4vw,60px)}
.pg-index .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pg-index .wide{max-width:1840px;margin-inline:auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
.pg-index .pbox{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(410px,37vw,520px);padding:clamp(28px,3.2vw,44px);border-radius:28px;overflow:hidden;color:#fff;isolation:isolate}
.pg-index .pbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;user-select:none}
.pg-index .pbox h3{font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;line-height:1.05;font-weight:600}
.pg-index .pbox p{margin-top:12px;max-width:380px;font-size:17px;opacity:.82}
.pg-index .pbox .btn{align-self:flex-start}
/* 2b: wide carousel box under the two product boxes (as on onekey.so) */
.pg-index .car{--cw:min(1232px, calc(100vw - 48px));--gap:16px;position:relative;margin-top:20px;overflow:hidden;touch-action:pan-y}
.pg-index .car-track{display:flex;gap:var(--gap);will-change:transform;transition:transform .8s var(--ease)}
.pg-index .cs{position:relative;flex:0 0 var(--cw);height:clamp(440px,40vw,560px);border-radius:28px;background:#F0F1F4;overflow:hidden;isolation:isolate;user-select:none}
.pg-index .cs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;z-index:-1;pointer-events:none;-webkit-user-drag:none}
.pg-index .cs-copy{display:grid;justify-items:center;gap:28px;padding:clamp(44px,5vw,72px) 24px 0;text-align:center}
.pg-index .cs h3{font-size:clamp(32px,3.6vw,54px);letter-spacing:-.03em;line-height:1.06;font-weight:600}
.pg-index .car-arrow{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(11,11,18,.10);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#666668;cursor:pointer}
.pg-index .car-arrow svg{display:block;width:24px;height:24px}
.pg-index .car-arrow.prev svg{translate:-1px 0}
.pg-index .car-arrow.next svg{translate:1px 0}
/* each chevron sits a little towards the way it points */
.pg-index .car-arrow.prev{left:calc((100% - var(--cw)) / 2 + 24px)}
.pg-index .car-arrow.next{right:calc((100% - var(--cw)) / 2 + 24px)}
/* carousel counter: centred on the photo, so it grows up and evenly to both sides; the play/pause hangs off its right edge */
.pg-index .car-ctl{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%)}
.pg-index .car-ctl .playpause{position:absolute;left:100%;top:50%;translate:0 -50%}
.pg-index .car-ctl::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:calc(6px * var(--k))}
/* keeps the hover while the pointer crosses to the button */
.pg-index .car-dots{display:flex;align-items:center;gap:calc(7px * var(--k));padding:calc(8px * var(--k)) calc(11px * var(--k));border-radius:99px;background:rgba(11,11,18,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pg-index .car-dots .dot{--w:7px;position:relative;display:block;flex:none;width:calc(var(--w) * var(--k));height:calc(7px * var(--k));padding:0;border:0;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.55);cursor:pointer;transition:--w .5s var(--ease),background-color .4s}
.pg-index .car-dots .dot::after{content:"";position:absolute;inset:-9px -4px}
/* the active dot is a countdown: it fills over the 6 s, then the next slide comes in */
.pg-index .car-dots .dot.on{--w:52px;background:rgba(255,255,255,.38);cursor:default}
.pg-index .car-dots .dot b{position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.95);transform:translateX(-100%)}
.pg-index .car-dots .dot.on b{animation:index-barfill 6s linear forwards}
.pg-index .car-dots.static .dot.on b{animation:none;transform:none}
.pg-index .car-ctl.is-paused .car-dots .dot.on b{animation-play-state:paused}
/* the white bar slides in (a transform, so it moves in sub-pixel steps instead of whole pixels) */
@keyframes index-barfill{from{transform:translateX(-100%)}to{transform:translateX(0)}}
/* 3: how it works */
.pg-index .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.pg-index .steps{display:grid;margin-top:36px;border-top:1px solid var(--line)}
.pg-index .step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.pg-index .step .n{font-family:var(--mono);font-size:13px;color:var(--blue);padding-top:4px}
.pg-index .step h3{font-size:21px;letter-spacing:-.015em;font-weight:600}
.pg-index .step p{margin-top:6px;color:var(--grey);font-size:16px}
.pg-index .stage{position:relative;border-radius:28px;background:var(--mist);padding:clamp(28px,4vw,56px);overflow:hidden;isolation:isolate}
.pg-index .stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(11,11,18,.11) 1px,transparent 1.4px),radial-gradient(circle,rgba(11,11,18,.11) 1px,transparent 1.4px);background-size:28px 48.5px;background-position:0 0,14px 24.25px}
.pg-index .card{background:var(--paper);border-radius:20px;box-shadow:0 50px 90px -50px rgba(19,21,255,.35),0 0 0 1px var(--line);overflow:hidden}
.pg-index .card-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.pg-index .row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px;padding:12px 24px;border-top:1px solid var(--line)}
.pg-index .row:first-of-type{border-top:0}
.pg-index .who{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em}
.pg-index .who small{display:block;font-family:var(--text);font-size:13px;font-weight:400;color:var(--grey);margin-top:1px}
.pg-index .sq{width:9px;height:9px;border-radius:2px;background:var(--blue);flex:none}
.pg-index .sq.o{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(11,11,18,.3)}
.pg-index .val{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pg-index .card-foot{display:flex;align-items:center;gap:10px;padding:14px 24px;background:var(--mist);border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.pg-index .card-foot svg{width:14px;height:14px;color:var(--blue)}
/* the whole stage starts as a field of blinking cipher squares; Decrypt turns them into the card */
.pg-index .field{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%}
.pg-index .stage.px:not(.open){cursor:pointer}
.pg-index .stage.px:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
/* pixel graphics (How it works, Why eUSD): drawn by the same 128 x 125 grid of squares; the HTML cards stay for screen readers only */
.pg-index .stage.px{aspect-ratio:128/125;padding:0}
.pg-index .stage.px::before{display:none}
.pg-index .stage.px .card,.pg-index .stage.px .token{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 4: why eUSD */
.pg-index .split.rev > :first-child{order:0}
.pg-index .token{position:relative;border-radius:28px;background:radial-gradient(700px 520px at 30% 0%,#2a2cff 0%,var(--blue) 45%,var(--blue-deep) 100%);color:#fff;padding:clamp(28px,4vw,52px);overflow:hidden;isolation:isolate}
.pg-index .token .tk-top{display:flex;justify-content:space-between;align-items:center}
.pg-index .token .tk-name{font-family:var(--display);font-size:clamp(56px,7vw,96px);font-weight:600;letter-spacing:-.045em;line-height:1}
.pg-index .chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 0 0 1px currentColor}
.pg-index .chip i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:index-pulse 2.4s var(--ease) infinite}
@keyframes index-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.pg-index .token .peg{margin-top:10px;font-family:var(--mono);font-size:15px;opacity:.8}
.pg-index .tk-rows{margin-top:36px;border-top:1px solid var(--line-w)}
.pg-index .tk-rows div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-w);font-size:15.5px}
.pg-index .tk-rows dt{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.72;padding-top:3px}
.pg-index .tk-rows dd{margin:0;text-align:right}
.pg-index .res{margin-top:28px}
.pg-index .res .lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.pg-index .bar{display:flex;gap:4px;height:10px;margin-top:10px}
.pg-index .bar i{display:block;border-radius:3px;background:#fff;transform-origin:left}
.pg-index .bar i:first-child{flex:30}
.pg-index .bar i:last-child{flex:70;background:rgba(255,255,255,.4)}
.pg-index .in .bar i{animation:index-grow 1.3s var(--ease) both}
.pg-index .in .bar i:last-child{animation-delay:.2s}
@keyframes index-grow{from{transform:scaleX(0)}to{transform:none}}
.pg-index .reasons{display:grid;margin-top:36px;border-top:1px solid var(--line)}
.pg-index .reason{padding:22px 0;border-bottom:1px solid var(--line)}
.pg-index .reason h3{font-size:21px;letter-spacing:-.015em}
.pg-index .reason p{margin-top:6px;color:var(--grey);font-size:16px}
.pg-index .note{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}
/* 5: use cases */
.pg-index .uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pg-index .use{display:grid;gap:14px;align-content:start;padding:32px 30px 34px;border-radius:24px;background:var(--mist);transition:background .35s var(--ease),transform .35s var(--ease)}
.pg-index .use:hover{background:#EEF0F7;transform:translateY(-3px)}
.pg-index .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--paper);color:var(--blue);box-shadow:0 0 0 1px var(--line)}
.pg-index .ico svg{width:24px;height:24px}
.pg-index .use h3{margin-top:10px;font-size:21px;letter-spacing:-.015em}
.pg-index .use p{color:var(--grey);font-size:16px}
/* 6: licences */
.pg-index .lic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pg-index .lbox{position:relative;display:grid;gap:14px;align-content:start;padding:clamp(28px,3.4vw,44px);border-radius:24px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.pg-index .lbox .flag{position:absolute;right:clamp(28px,3.4vw,44px);top:clamp(28px,3.4vw,44px);display:block;height:clamp(40px,4.2vw,58px);border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.pg-index .lbox .flag svg{display:block;height:100%;width:auto}
.pg-index .lbox .chip{justify-self:start;color:var(--blue)}
.pg-index .lbox h3{position:relative;margin-top:22px;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.025em}
.pg-index .lbox .kind{position:relative;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--grey)}
.pg-index .lbox p{position:relative;color:var(--grey);font-size:16.5px;max-width:520px}
.pg-index .lic-note{margin-top:20px;font-size:14px;color:var(--grey-2)}
/* 7: roadmap */
.pg-index .road{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
/* the progress bar is a row of squares, like the pixel graphics: lit up to "Now", a few flickering at the edge, the rest pale */
/* line and phase points share one grid: a point is a 3 x 3 block whose middle row is the line itself */
.pg-index .road .track{position:absolute;left:0;top:-4px;width:100%;height:21px;display:block}
.pg-index .ph{position:relative;display:grid;gap:8px;align-content:start;padding:34px 24px 0 0}
.pg-index .ph .yr{font-family:var(--mono);font-size:13px;color:var(--grey);font-variant-numeric:tabular-nums}
.pg-index .ph h3{font-size:21px;letter-spacing:-.015em}
.pg-index .ph p{color:var(--grey);font-size:15.5px;line-height:1.5}
.pg-index .ph .tag{justify-self:start;margin-top:4px;padding:3px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.pg-index .road-foot{margin-top:48px}
/* 8: build together */
.pg-index .tog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pg-index .tbox{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:320px;padding:clamp(28px,3.4vw,48px);border-radius:24px;overflow:hidden;isolation:isolate}
.pg-index .tbox h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.025em;line-height:1.08}
.pg-index .tbox p{margin-top:14px;max-width:440px;font-size:17px}
.pg-index .tbox.light{background:var(--mist)}
.pg-index .tbox.light p{color:var(--grey)}
.pg-index .tbox.dark{background:var(--night);color:#fff}
.pg-index .tbox.dark p{color:rgba(255,255,255,.7)}
.pg-index .tbox .btn{align-self:flex-start}
/* responsive */
@media (max-width:960px){
  .pg-index .split{grid-template-columns:minmax(0,1fr)}
  .pg-index .split.rev > .token-col{order:2}
  .pg-index .uses{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pg-index .slide img{object-position:var(--mpos,50% 50%)}
  .pg-index .copy{left:var(--gl);right:var(--gr);top:auto;bottom:120px;translate:none;max-width:none;gap:16px}
  .pg-index .slide::after{content:"";position:absolute;inset:auto 0 0 0;height:72%;background:linear-gradient(to top,rgba(6,6,11,.88),rgba(6,6,11,.55) 45%,transparent);pointer-events:none}
  .pg-index .slide[data-tone="dark"]::after{background:linear-gradient(to top,rgba(245,246,250,.96),rgba(245,246,250,.75) 45%,transparent)}
  .pg-index .copy{z-index:2}
  .pg-index .copy .acts .btn{flex:1 1 100%}
  .pg-index .duo,.pg-index .lic,.pg-index .tog{grid-template-columns:minmax(0,1fr)}
  .pg-index .car{--cw:calc(100vw - 32px);--gap:10px}
  .pg-index .cs{height:480px}
  .pg-index .car-arrow{width:38px;height:38px;margin-top:-19px}
  .pg-index .car-arrow.prev{left:calc((100% - var(--cw)) / 2 + 12px)}
  .pg-index .car-arrow.next{right:calc((100% - var(--cw)) / 2 + 12px)}
  .pg-index .cs-copy{gap:22px;padding-top:40px}
  .pg-index .uses{grid-template-columns:minmax(0,1fr)}
  .pg-index .road{grid-template-columns:minmax(0,1fr);padding-left:30px}
  .pg-index .road .track{left:-4px;top:0;width:21px;height:100%}
  .pg-index .ph{padding:0 0 28px}
  .pg-index .row{padding-inline:18px}
  .pg-index .card-top,.pg-index .card-foot{padding-inline:18px}
  .pg-index .val{font-size:19px}
  .pg-index .who{font-size:16.5px}
  .pg-index .lbox .code{font-size:52px;top:22px}
}
@keyframes index-growY{from{transform:scaleY(0)}to{transform:none}}

/* ===== 3. page kit ===== */
/* ---- page kit: the hero, sections and parts every content page uses ---- */
body.kit{--edge:max(var(--gl), calc((100vw - 1280px) / 2 + 24px))}
/* hero: one picture over the whole first screen, like the homepage's first section */
.kit .ph{position:relative;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;isolation:isolate;background:var(--night);color:#fff}
.kit .ph[data-tone="dark"]{background:var(--mist);color:var(--ink)}
.kit .ph > img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);animation:ph-zoom 12s cubic-bezier(.2,.7,.2,1) both}
@keyframes ph-zoom{from{transform:scale(1.07)}to{transform:none}}
.kit .ph .copy{position:absolute;left:var(--edge);top:50%;translate:0 -46%;display:grid;gap:22px;max-width:620px}
.kit .ph h1{font-size:clamp(44px,6vw,92px);letter-spacing:-.035em;line-height:.98;font-weight:600}
.kit .ph .copy p{font-size:clamp(17px,1.45vw,20px);line-height:1.5;opacity:.82;max-width:540px}
.kit .ph .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.kit .ph .copy > *{animation:ph-in .9s var(--ease) both;animation-delay:.15s}
.kit .ph .copy > *:nth-child(2){animation-delay:.27s}
.kit .ph .copy > *:nth-child(3){animation-delay:.39s}
.kit .ph .copy > *:nth-child(4){animation-delay:.51s}
@keyframes ph-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.kit .ph[data-tone="dark"] .btn-line{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.kit .ph[data-tone="dark"] .btn-line:hover{background:var(--ink);color:#fff}
.kit .ph .tag{justify-self:start;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:99px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;font-weight:600;letter-spacing:.01em}
.kit .ph[data-tone="dark"] .tag{background:rgba(11,11,18,.07)}
.kit .ph .tag i{width:7px;height:7px;background:currentColor;animation:tag-blink 1.6s steps(2,end) infinite}
@keyframes tag-blink{50%{opacity:.25}}
@media (max-width:760px){
  .kit .ph > img{object-position:var(--mpos,75% 40%)}
  .kit .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:82%;z-index:-1;background:linear-gradient(to top,rgba(6,6,11,.94),rgba(6,6,11,.84) 45%,rgba(6,6,11,.45) 72%,transparent);pointer-events:none}
  .kit .ph[data-tone="dark"]::after{background:linear-gradient(to top,rgba(245,246,250,.98),rgba(245,246,250,.9) 45%,rgba(245,246,250,.5) 72%,transparent)}
  .kit .ph.on-blue::after{background:linear-gradient(to top,rgba(13,15,204,.96),rgba(13,15,204,.86) 45%,rgba(13,15,204,.45) 72%,transparent)}
  .kit .ph .copy{left:var(--gl);right:var(--gr);top:auto;bottom:84px;translate:none;max-width:none;gap:16px}
  .kit .ph .acts .btn{flex:1 1 100%}
}
/* sections */
.kit .sec{padding-block:clamp(88px,10vw,144px)}
.kit .sec.tight{padding-block:clamp(56px,6vw,88px)}
.kit .sec.mist{background:var(--mist)}
.kit .sec.dark{background:var(--night);color:#fff}
.kit .sec.blue{background:var(--blue);color:#fff}
.kit .sec-head{display:grid;gap:18px;max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.kit .sec-head.c{margin-inline:auto;text-align:center;justify-items:center}
.kit .dark .lead,.kit .blue .lead{color:rgba(255,255,255,.72)}
.kit .g2,.kit .g3,.kit .g4{display:grid;gap:20px}
.kit .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kit .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kit .kc{display:grid;gap:12px;align-content:start;padding:32px 30px 34px;border-radius:24px;background:var(--mist);transition:background .35s var(--ease),transform .35s var(--ease)}
.kit .kc:hover{transform:translateY(-3px)}
.kit .mist .kc{background:var(--paper)}
.kit .dark .kc{background:var(--night-2)}
.kit .kc h3{font-size:21px;letter-spacing:-.015em;line-height:1.2}
.kit .kc p{color:var(--grey);font-size:16px}
.kit .dark .kc p,.kit .blue .kc p{color:rgba(255,255,255,.66)}
.kit .ki{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--paper);color:var(--blue);box-shadow:0 0 0 1px var(--line);margin-bottom:8px}
.kit .dark .ki{background:rgba(255,255,255,.06);color:#fff;box-shadow:0 0 0 1px var(--line-w)}
.kit .ki svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kit .pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;background:#EEEFF3;color:var(--grey);font-size:12px;font-weight:600;white-space:nowrap}
.kit .pill.live{background:var(--blue-soft);color:var(--blue)}
.kit .dark .pill{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}
.kit .dark .pill.live{background:rgba(143,144,255,.18);color:#c9caff}
.kit .note{font-size:13.5px;line-height:1.55;color:var(--grey)}
.kit .dark .note{color:rgba(255,255,255,.55)}
.kit .mono{font-family:var(--mono)}
.kit .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kit .cipher{font-family:var(--mono);letter-spacing:.02em;color:var(--grey-2);white-space:nowrap;overflow:hidden;text-overflow:clip}
/* segmented control */
.kit .seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:24px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line)}
.kit .dark .seg{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-w)}
.kit .seg button{height:38px;padding:0 16px;border:0;border-radius:99px;background:transparent;font:inherit;font-size:14.5px;font-weight:600;color:var(--grey);cursor:pointer;transition:background .25s,color .25s}
.kit .dark .seg button{color:rgba(255,255,255,.65)}
.kit .seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.kit .dark .seg button[aria-pressed="true"]{background:#fff;color:var(--ink)}
/* .seg.glide: the chosen option's pill glides to the next one instead of jumping (the script adds the pill) */
.kit .seg.glide{position:relative;isolation:isolate}
.kit .seg.glide button[aria-pressed="true"],.kit .dark .seg.glide button[aria-pressed="true"]{background:transparent}
.kit .seg.glide .glide-pill{position:absolute;z-index:-1;left:0;top:0;border-radius:99px;background:var(--ink);transition:transform .45s var(--ease),width .45s var(--ease),height .45s var(--ease)}
.kit .dark .seg.glide .glide-pill{background:#fff}
/* reveal: visible at rest, animates as it scrolls in */
.kit .rv.in{animation:up .9s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* closing call to action */
.kit .cta{position:relative;display:grid;gap:22px;justify-items:start;padding:clamp(40px,6vw,88px);border-radius:28px;overflow:hidden;isolation:isolate;background:var(--night);color:#fff}
.kit .cta.blue{background:var(--blue)}
.kit .cta h2{max-width:760px}
.kit .cta p{max-width:560px;font-size:18px;color:rgba(255,255,255,.72)}
.kit .cta .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
/* accordion */
.kit .acc{border-top:1px solid var(--line)}
.kit .acc details{border-bottom:1px solid var(--line)}
.kit .acc summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:var(--display);font-size:clamp(18px,1.6vw,21px);font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none}
.kit .acc summary::-webkit-details-marker{display:none}
.kit .acc summary::after{content:"";flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2 5.5l7 7 7-7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2 5.5l7 7 7-7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s var(--ease)}
.kit .acc details.is-open summary::after{transform:scaleY(-1)}
/* the point travels straight up; nothing turns */
.kit .acc .a{overflow:hidden;padding:0;max-width:760px;color:var(--grey);font-size:16.5px;line-height:1.65}
.kit .acc .a p + p{margin-top:12px}
.kit .acc .a::after{content:"";display:block;height:26px}
.kit .dark .acc,.kit .dark .acc details{border-color:var(--line-w)}
.kit .dark .acc .a{color:rgba(255,255,255,.66)}
@media (max-width:960px){
  .kit .g3,.kit .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .kit .g2,.kit .g3,.kit .g4{grid-template-columns:minmax(0,1fr)}
  .kit .kc{padding:26px 22px 28px}
  .kit .cta{border-radius:22px}
}

/* ===== 4. about ===== */
/* About: a picture of the banknote, a timeline laid out like a shelf of cards, and the plans */
/* the hero copy runs wider, so the headline takes two lines, not three, and the block leaves more room above and below */
@media (min-width:761px){
  .pg-about .ph .copy{max-width:max(620px,min(800px,56vw))}
  .pg-about .ph .copy p{max-width:620px}
  .pg-about .ph h1 .l{display:block;text-wrap:balance}
}
.pg-about .note-x{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.pg-about .note-img,.pg-about .pic{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px;background:var(--mist)}
.pg-about .pic{aspect-ratio:1}
/* timeline: title row with a link on the right, cards running to the window's right edge, arrows under them */
.pg-about .tl-sec{overflow-x:hidden;overflow-x:clip}
.pg-about .tl-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px}
.pg-about .tl-top .more{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:17px;font-weight:500;color:#8F90FF}
.pg-about .tl-top .more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pg-about .tl-top .more:hover{color:#B4B5FF}
.pg-about .tl-sec .sec-head{max-width:none;margin-bottom:clamp(20px,2.2vw,28px)}
/* the shelf spans the section; its first card lines up with the text above (the same inset as .wrap), and a spacer
   as wide as that inset lets the last card stop at the same line on the right */
.pg-about .tl{--in:max(var(--gl), calc((100% - 1280px) / 2 + 24px));display:flex;gap:20px;overflow-x:auto;padding:4px 0 4px var(--in);scroll-padding-inline:var(--in);scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pg-about .tl::-webkit-scrollbar{display:none}
.pg-about .tl::after{content:"";flex:none;width:var(--end,24px);margin-left:-20px}
.pg-about .tl.drag{cursor:grabbing;scroll-snap-type:none}
.pg-about .ms{flex:none;width:340px;min-height:250px;display:grid;gap:12px;align-content:start;scroll-snap-align:start;padding:30px 28px 32px;border-radius:24px;background:var(--night-2);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.pg-about .ms .d{font-family:var(--mono);font-size:12.5px;color:#8F90FF}
.pg-about .ms b{font-size:22px;line-height:1.2;letter-spacing:-.01em}
.pg-about .ms p{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.65)}
.pg-about .ms.next{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.pg-about .ms.next .d{color:rgba(255,255,255,.5)}
.pg-about .ms.now{box-shadow:0 0 0 1.5px #8F90FF}
/* arrows: the homepage's round buttons and chevrons, in the dark section's colours */
.pg-about .tl-ctl{display:flex;gap:16px;justify-content:flex-end;margin-top:32px}
.pg-about .tl-ctl button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:rgba(255,255,255,.86);cursor:pointer;transition:background .2s,color .2s}
.pg-about .tl-ctl button:hover{background:rgba(255,255,255,.18)}
.pg-about .tl-ctl button:disabled{background:rgba(255,255,255,.06);color:rgba(255,255,255,.3);cursor:default}
.pg-about .tl-ctl svg{display:block;width:24px;height:24px}
.pg-about .tl-ctl #tlPrev svg{translate:-1px 0}
.pg-about .tl-ctl #tlNext svg{translate:1px 0}
/* the founder (picture left) and the future (picture right) */
.pg-about .fd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.pg-about .fd .txt p{margin-top:18px;font-size:clamp(17px,1.35vw,19px);line-height:1.65;color:var(--grey)}
.pg-about .fd .txt h2 + p{margin-top:24px}
.pg-about .sig{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.pg-about .sig .av{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--blue)}
.pg-about .sig b{display:block;font-size:17px;color:var(--ink)}
.pg-about .sig span{font-size:14.5px;color:var(--grey)}
.pg-about .prin{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--line)}
.pg-about .prin div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
.pg-about .prin svg{grid-row:1/3;width:24px;height:24px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-about .prin b{font-size:17px}
.pg-about .prin p{grid-column:2;font-size:15px;color:var(--grey)}
@media (max-width:960px){
  .pg-about .note-x,.pg-about .fd{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:760px){
  .pg-about .ms{width:270px;min-height:0;padding:24px 22px 26px}
  .pg-about .ms b{font-size:19px}
  .pg-about .ms p{font-size:14.5px}
  .pg-about .tl{gap:14px}
  .pg-about .tl::after{margin-left:-14px}
  .pg-about .tl-top .more{font-size:15px}
  .pg-about .tl-ctl{margin-top:24px}
  .pg-about #founder h2{font-size:min(36px,calc((100vw - 48px) / 9.2))}
}

/* ===== 4. arcantis ===== */
/* Arcantis: run the confidential-transfer lifecycle step by step; balances move between public, pending and available */
.pg-arcantis .lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:stretch}
.pg-arcantis .bals{display:flex;flex-direction:column;gap:22px;padding:28px;border-radius:24px;background:var(--night-2);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.pg-arcantis .who{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.55)}
.pg-arcantis .who b{font-size:15px;color:#fff}
.pg-arcantis .bar{display:grid;gap:8px}
.pg-arcantis .bar .t{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:rgba(255,255,255,.7)}
.pg-arcantis .bar .t b{font-family:var(--mono);font-size:15px;font-weight:500;color:#fff}
.pg-arcantis .bar .t b.c{color:rgba(255,255,255,.5);font-weight:400}
.pg-arcantis .bar .tr{position:relative;height:14px;background:rgba(255,255,255,.07);overflow:hidden}
.pg-arcantis .bar .tr i{position:absolute;left:0;top:0;bottom:0;width:0;background:#8F90FF;transition:width .8s var(--ease)}
.pg-arcantis .bar.pub .tr i{background:#fff}
.pg-arcantis .bar.pend .tr i{background:repeating-linear-gradient(45deg,#8F90FF 0 6px,#6E70FF 6px 12px)}
.pg-arcantis .bar.av .tr i{background:var(--blue)}
.pg-arcantis .bar small{font-size:12.5px;color:rgba(255,255,255,.45)}
.pg-arcantis .bob{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:rgba(255,255,255,.6)}
.pg-arcantis .bob b{font-family:var(--mono);color:#fff;font-weight:500}
.pg-arcantis .ops{display:flex;flex-wrap:wrap;gap:8px}
.pg-arcantis .op{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:12px;background:rgba(255,255,255,.07);color:#fff;font-family:var(--mono);font-size:13.5px;cursor:pointer;transition:background .2s,opacity .2s,box-shadow .2s}
.pg-arcantis .op:hover{background:rgba(255,255,255,.14)}
.pg-arcantis .op i{width:8px;height:8px;background:rgba(255,255,255,.3)}
.pg-arcantis .op.next{box-shadow:inset 0 0 0 1.5px #8F90FF}
.pg-arcantis .op.next i{background:#8F90FF;animation:tag-blink 1.2s steps(2,end) infinite}
.pg-arcantis .op.done i{background:#3DDC97}
.pg-arcantis .op:disabled{opacity:.35;cursor:default}
.pg-arcantis .op.done:disabled{opacity:.7}
.pg-arcantis .term{display:flex;flex-direction:column;border-radius:24px;background:#06060B;box-shadow:0 0 0 1px rgba(255,255,255,.08);overflow:hidden;min-height:520px}
.pg-arcantis .term-h{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.45)}
.pg-arcantis .term-h i{width:10px;height:10px;background:rgba(255,255,255,.18)}
.pg-arcantis .term-h span{margin-left:8px}
.pg-arcantis .tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto;scrollbar-width:none}
.pg-arcantis .tabs button{height:40px;padding:0 12px;border:0;background:transparent;color:rgba(255,255,255,.5);font-family:var(--mono);font-size:12.5px;cursor:pointer;box-shadow:inset 0 -2px 0 transparent;white-space:nowrap}
.pg-arcantis .tabs button[aria-selected="true"]{color:#fff;box-shadow:inset 0 -2px 0 #8F90FF}
.pg-arcantis .code{margin:0;padding:18px 20px;font-family:var(--mono);font-size:13.5px;line-height:1.7;color:#E8E9F2;white-space:pre;overflow-x:auto;min-height:190px}
.pg-arcantis .code .k{color:#9FA0FF}
.pg-arcantis .code .s{color:#8BE0B9}
.pg-arcantis .code .c{color:rgba(255,255,255,.38)}
.pg-arcantis .code .n{color:#FFC27A}
.pg-arcantis .out{flex:1;padding:14px 20px 20px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--mono);font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.7);overflow:auto;max-height:260px}
.pg-arcantis .out .p{color:#8F90FF}
.pg-arcantis .out .ok{color:#3DDC97}
.pg-arcantis .out .dim{color:rgba(255,255,255,.38)}
.pg-arcantis .out .cur{display:inline-block;width:8px;height:14px;margin-left:2px;background:#8F90FF;vertical-align:-2px;animation:tag-blink 1s steps(2,end) infinite}
/* install */
.pg-arcantis .inst{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:18px 18px 18px 24px;border-radius:18px;background:var(--night);color:#fff;font-family:var(--mono);font-size:clamp(13px,1.3vw,16px);overflow:hidden}
.pg-arcantis .inst code{white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.pg-arcantis .inst code span{color:#8F90FF}
.pg-arcantis .inst button{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:13px;cursor:pointer}
.pg-arcantis .inst button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-arcantis .links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.pg-arcantis .links a{display:grid;gap:6px;padding:20px 20px 22px;border-radius:18px;background:var(--mist);transition:background .25s,transform .25s var(--ease)}
.pg-arcantis .links a:hover{background:var(--blue-soft);transform:translateY(-3px)}
.pg-arcantis .links b{display:flex;align-items:center;justify-content:space-between;font-size:16px}
.pg-arcantis .links b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.pg-arcantis .links span{font-size:13.5px;color:var(--grey)}
@media (max-width:1060px){
  .pg-arcantis .lab{grid-template-columns:minmax(0,1fr)}
  .pg-arcantis .links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pg-arcantis .links{grid-template-columns:minmax(0,1fr)}
  .pg-arcantis .code{font-size:12px;padding:16px}
  .pg-arcantis .inst{flex-direction:column;align-items:stretch}
}

/* ===== 4. banking ===== */
/* Banking: the stack of layers a bank builds on, in 3D. Open, it comes apart at the layer you pick, with dashed guides
   through the corners; each plate has a thickness, an icon and a fine grid of squares */
.pg-banking .stk{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.pg-banking .iso{position:relative;height:660px;perspective:1600px}
.pg-banking .iso-in{position:absolute;left:50%;top:47.5%;width:360px;height:360px;margin:-180px 0 0 -180px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg)}
.pg-banking .ly{--sd:#D5D7E2;--sd2:#C4C7D4;--dot:rgba(11,11,18,.09);--ic:rgba(11,11,18,.06);--icc:var(--blue);position:absolute;inset:0;border:0;padding:0;border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,11,18,.07);transform-style:preserve-3d;cursor:pointer;font:inherit;transition:transform .9s var(--ease),box-shadow .3s}
.pg-banking .ly::before,.pg-banking .ly::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.pg-banking .ly::before{transform:translateZ(-6px);background:var(--sd)}
.pg-banking .ly::after{transform:translateZ(-12px);background:var(--sd2)}
.pg-banking .ly .gl{position:absolute;inset:28px;border-radius:10px;background:conic-gradient(var(--dot) 25%,transparent 0) 0 0/16px 16px;-webkit-mask-image:linear-gradient(135deg,#000 10%,transparent 72%);mask-image:linear-gradient(135deg,#000 10%,transparent 72%)}
.pg-banking .ly .ic{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ic);color:var(--icc)}
.pg-banking .ly .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-banking .ly .tx{position:absolute;left:24px;bottom:22px;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--ink);text-align:left;white-space:nowrap}
.pg-banking .ly .tx small{display:block;margin-bottom:1px;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--grey);letter-spacing:.04em}
.pg-banking .ly[data-i="0"]{background:#ECEDF3;--sd:#D3D5E0;--sd2:#C1C4D1;--ic:#fff}
.pg-banking .ly[data-i="1"]{background:#1315FF;--sd:#0D0FC8;--sd2:#0A0B9C;--dot:rgba(255,255,255,.16);--ic:rgba(255,255,255,.16);--icc:#fff}
.pg-banking .ly[data-i="1"] .tx,.pg-banking .ly[data-i="1"] .tx small{color:#fff}
.pg-banking .ly[data-i="2"]{background:#0B0B12;--sd:#000;--sd2:#000;--dot:rgba(255,255,255,.1);--ic:rgba(255,255,255,.1);--icc:#fff}
.pg-banking .ly[data-i="2"] .tx,.pg-banking .ly[data-i="2"] .tx small{color:#fff}
.pg-banking .ly[data-i="3"]{background:#E9EAFF;--sd:#CBCCF3;--sd2:#B5B7EA;--dot:rgba(19,21,255,.1);--ic:#fff}
.pg-banking .ly[data-i="4"]{background:#fff;--ic:var(--blue-soft)}
.pg-banking .ly.on{box-shadow:inset 0 0 0 1px rgba(11,11,18,.07),0 0 0 3px var(--blue),0 30px 60px -20px rgba(19,21,255,.45)}
.pg-banking .ly[data-i="1"].on{box-shadow:0 0 0 3px #8F90FF,0 30px 60px -20px rgba(19,21,255,.6)}
.pg-banking .ly:focus-visible{outline:none;box-shadow:0 0 0 3px var(--blue)}
.pg-banking .post{position:absolute;width:0;border-left:1.5px dashed rgba(19,21,255,.4);transform-origin:0 0;pointer-events:none;transition:transform .9s var(--ease),height .9s var(--ease),opacity .5s}
.pg-banking .iso-ctl{position:absolute;left:0;top:0;z-index:5;display:flex;gap:10px}
.pg-banking .iso-ctl .btn{height:40px;padding:0 18px;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(11,11,18,.25);background:#fff}
.pg-banking .iso-ctl .btn:hover{background:var(--ink);color:#fff}
.pg-banking .info{display:grid;gap:18px}
.pg-banking .info .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.pg-banking .info h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.025em;line-height:1.1}
.pg-banking .info p{font-size:17px;line-height:1.6;color:var(--grey)}
.pg-banking .info ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pg-banking .info li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:16px}
.pg-banking .info li::before{content:"";width:8px;height:8px;margin-top:8px;background:var(--blue)}
.pg-banking .info .swap{animation:banking-swap .5s var(--ease)}
@keyframes banking-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pg-banking .dots{display:flex;gap:8px}
.pg-banking .dots button{width:34px;height:6px;border:0;padding:0;border-radius:0;background:#DADCE6;cursor:pointer;transition:background .3s}
.pg-banking .dots button[aria-pressed="true"]{background:var(--blue)}
/* keep / gain */
.pg-banking .kg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.pg-banking .kg .kc ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.pg-banking .kg .kc li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;font-size:16px;color:rgba(255,255,255,.75)}
.pg-banking .kg .kc li svg{width:20px;height:20px;fill:none;stroke:#8F90FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1060px){
  .pg-banking .stk{grid-template-columns:minmax(0,1fr)}
  .pg-banking .iso{height:660px}
}
@media (max-width:760px){
  .pg-banking .iso{height:470px}
  .pg-banking .iso-in{top:50%;width:212px;height:212px;margin:-106px 0 0 -106px}
  .pg-banking .ly{border-radius:18px}
  .pg-banking .ly .gl{inset:18px;background-size:12px 12px}
  .pg-banking .ly .ic{width:30px;height:30px;border-radius:8px}
  .pg-banking .ly .ic svg{width:17px;height:17px}
  .pg-banking .ly .tx{left:14px;bottom:13px;column-gap:9px;font-size:15px}
  .pg-banking .ly .tx small{font-size:10.5px}
  .pg-banking .kg{grid-template-columns:minmax(0,1fr)}
}

/* ===== 4. become-a-partner ===== */
/* Become a partner: a three-step application with a square progress track */
.pg-become-a-partner .bp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.pg-become-a-partner .next{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--line)}
.pg-become-a-partner .next div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:22px 0;border-bottom:1px solid var(--line)}
.pg-become-a-partner .next .n{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--mist);font-family:var(--mono);font-size:13px;font-weight:500}
.pg-become-a-partner .next b{font-size:17px}
.pg-become-a-partner .next p{grid-column:2;font-size:15px;color:var(--grey)}
.pg-become-a-partner .fm{border-radius:28px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 40px 80px -50px rgba(11,11,18,.35);overflow:hidden}
.pg-become-a-partner .track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:22px 26px 0}
.pg-become-a-partner .track span{display:grid;gap:10px;font-size:12.5px;font-weight:600;color:var(--grey-2);transition:color .3s}
.pg-become-a-partner .track span i{display:block;height:6px;background:#E3E4EC;position:relative;overflow:hidden}
.pg-become-a-partner .track span i::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pg-become-a-partner .track span.on{color:var(--ink)}
.pg-become-a-partner .track span.on i::after,.pg-become-a-partner .track span.done i::after{transform:none}
.pg-become-a-partner .track span.done{color:var(--blue)}
.pg-become-a-partner .steps{position:relative;display:grid;overflow:hidden}
.pg-become-a-partner .step{min-width:0;grid-area:1/1;display:grid;gap:20px;align-content:start;padding:28px 26px 30px;transition:transform .5s var(--ease),opacity .4s;opacity:0;transform:translateX(40px);pointer-events:none;visibility:hidden}
.pg-become-a-partner .step.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.pg-become-a-partner .step.left{transform:translateX(-40px)}
.pg-become-a-partner .step h3{font-size:24px;letter-spacing:-.02em}
.pg-become-a-partner .roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pg-become-a-partner .roles label{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--mist);cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s,background .2s}
.pg-become-a-partner .roles input{position:absolute;opacity:0;pointer-events:none}
.pg-become-a-partner .roles .ic{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#fff;color:var(--blue)}
.pg-become-a-partner .roles .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pg-become-a-partner .roles b{font-size:15px}
.pg-become-a-partner .roles small{font-size:12.5px;color:var(--grey);line-height:1.35}
.pg-become-a-partner .roles label:has(input:checked){background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue)}
.pg-become-a-partner .roles label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.pg-become-a-partner .fld{display:grid;gap:7px}
.pg-become-a-partner .fld > span{font-size:13px;font-weight:600;color:var(--grey)}
.pg-become-a-partner .fld input,.pg-become-a-partner .fld select,.pg-become-a-partner .fld textarea{width:100%;min-height:48px;padding:12px 14px;border:0;border-radius:12px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:16px;color:var(--ink);transition:box-shadow .2s,background .2s}
.pg-become-a-partner .fld textarea{min-height:140px;resize:vertical;line-height:1.5}
.pg-become-a-partner .fld input:focus,.pg-become-a-partner .fld select:focus,.pg-become-a-partner .fld textarea:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue)}
.pg-become-a-partner .fld.bad input,.pg-become-a-partner .fld.bad textarea{box-shadow:inset 0 0 0 1.5px #E5484D}
.pg-become-a-partner .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pg-become-a-partner .chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-become-a-partner .chips label{position:relative;cursor:pointer}
.pg-become-a-partner .chips input{position:absolute;opacity:0;pointer-events:none}
.pg-become-a-partner .chips span{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:99px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600;color:var(--grey);transition:background .2s,color .2s}
.pg-become-a-partner .chips input:checked + span{background:var(--ink);color:#fff;box-shadow:none}
.pg-become-a-partner .chips input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.pg-become-a-partner .fnav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 26px 26px}
.pg-become-a-partner .fnav .err{font-size:14px;color:#B4262C}
.pg-become-a-partner .fnav .btn-back{height:46px;padding:0 18px;border:0;border-radius:99px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--grey);cursor:pointer}
.pg-become-a-partner .fnav .btn-back:hover{color:var(--ink)}
.pg-become-a-partner .fnav .btn-back[hidden]{display:inline-block;visibility:hidden}
.pg-become-a-partner .legal{font-size:13px;color:var(--grey)}
.pg-become-a-partner .legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pg-become-a-partner .sum{display:grid;gap:0;border-radius:16px;background:var(--mist);padding:6px 18px}
.pg-become-a-partner .sum div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.pg-become-a-partner .sum div:last-child{border-bottom:0}
.pg-become-a-partner .sum dt{color:var(--grey)}
.pg-become-a-partner .sum dd{margin:0;overflow-wrap:anywhere}
.pg-become-a-partner .done-v{display:none;justify-items:center;text-align:center;gap:16px;padding:60px 30px 64px}
.pg-become-a-partner .fm.sent .track,.pg-become-a-partner .fm.sent .steps,.pg-become-a-partner .fm.sent .fnav{display:none}
.pg-become-a-partner .fm.sent .done-v{display:grid}
.pg-become-a-partner .tick{display:grid;grid-template-columns:repeat(5,12px);gap:4px}
.pg-become-a-partner .tick i{width:12px;height:12px;background:var(--blue);opacity:0;transform:scale(.3);animation:become-a-partner-tk .45s var(--ease) forwards}
@keyframes become-a-partner-tk{to{opacity:1;transform:none}}
.pg-become-a-partner .done-v h3{font-size:28px;letter-spacing:-.02em}
.pg-become-a-partner .done-v p{max-width:420px;color:var(--grey)}
@media (max-width:1060px){
  .pg-become-a-partner .bp{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:760px){
  .pg-become-a-partner .roles,.pg-become-a-partner .two{grid-template-columns:minmax(0,1fr)}
  .pg-become-a-partner .step,.pg-become-a-partner .track{padding-inline:18px}
  .pg-become-a-partner .fnav{padding-inline:18px}
  .pg-become-a-partner .sum div{grid-template-columns:96px minmax(0,1fr)}
}

/* ===== 4. contact ===== */
/* Contact: a form in steps. It starts as a box beside the three on the right, as tall as they are, asking
   "Contact by form?". Start widens it across the whole row, over the three boxes, and walks through
   topic, details, message and send; the squares carry the message off. */
.pg-contact .ct{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:stretch}
.pg-contact .fm{position:relative;z-index:2;grid-column:1;grid-row:1;display:flex;flex-direction:column;width:100%;min-height:440px;padding:34px 38px;border-radius:28px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 40px 80px -50px rgba(11,11,18,.35);transition:width .7s var(--ease)}
.pg-contact .side{grid-column:2;grid-row:1;transition:opacity .35s var(--ease),visibility 0s}
.pg-contact .ct.open .side{opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s .25s}
/* step 1: the question and the start button, in the middle of the box */
.pg-contact .start{flex:1;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center}
.pg-contact .start h2{font-size:clamp(34px,3.4vw,52px);letter-spacing:-.03em}
.pg-contact .start p{max-width:360px;font-size:16px;color:var(--grey)}
.pg-contact .start .btn{margin-top:14px;min-width:150px}
.pg-contact .start .dots{display:flex;gap:6px;margin-bottom:6px}
.pg-contact .start .dots i{width:10px;height:10px;background:var(--blue);opacity:.18}
.pg-contact .start .dots i:first-child{opacity:1}
.pg-contact .flow{display:none;flex:1;flex-direction:column;min-height:0}
.pg-contact .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-contact .fm.open .start{display:none}
.pg-contact .fm.open .flow{display:flex}
/* the top bar: the five steps, the one you are on, and a close button */
.pg-contact .flow .top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pg-contact .stps{display:flex;align-items:center;gap:22px;margin:0;padding:0;list-style:none}
.pg-contact .stps li{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--grey-2,#9A9DAD);white-space:nowrap}
.pg-contact .stps li i{width:10px;height:10px;background:#fff;box-shadow:inset 0 0 0 1.5px #C4C7D6;transition:background .3s,box-shadow .3s}
.pg-contact .stps li.done{color:var(--grey)}
.pg-contact .stps li.done i{background:var(--blue);box-shadow:none}
.pg-contact .stps li.on{color:var(--ink)}
.pg-contact .stps li.on i{background:var(--ink);box-shadow:none}
.pg-contact .stps .n{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.06em}
.pg-contact .x{display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--mist);color:var(--ink);cursor:pointer;transition:background .2s}
.pg-contact .x:hover{background:#E6E8F0}
.pg-contact .x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the steps themselves: one shows at a time and slides in from the side it comes from */
.pg-contact .panes{flex:1;min-height:0;overflow:auto;padding:22px 2px 4px}
.pg-contact .pane{display:none;gap:16px;align-content:start}
.pg-contact .pane.on{display:grid;animation:contact-pin .45s var(--ease)}
.pg-contact .pane.on.back{animation-name:contact-pback}
@keyframes contact-pin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes contact-pback{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.pg-contact .pane h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.025em;line-height:1.1}
.pg-contact .pane .sub{margin-top:-8px;font-size:15.5px;color:var(--grey)}
.pg-contact .topics{display:flex;flex-wrap:wrap;gap:8px}
.pg-contact .topics label{position:relative;cursor:pointer}
.pg-contact .topics input{position:absolute;opacity:0;pointer-events:none}
.pg-contact .topics span{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:99px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;font-weight:600;color:var(--grey);transition:background .2s,color .2s,box-shadow .2s}
.pg-contact .topics span svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-contact .topics input:checked + span{background:var(--ink);color:#fff;box-shadow:none}
.pg-contact .topics input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.pg-contact .fld{display:grid;gap:7px}
.pg-contact .fld > span{font-size:13px;font-weight:600;color:var(--grey)}
.pg-contact .fld input,.pg-contact .fld textarea{width:100%;min-height:52px;padding:13px 15px;border:0;border-radius:12px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:16px;color:var(--ink);transition:box-shadow .2s,background .2s}
.pg-contact .fld textarea{min-height:200px;resize:vertical;line-height:1.55}
.pg-contact .fld input:focus,.pg-contact .fld textarea:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue)}
.pg-contact .fld.bad input,.pg-contact .fld.bad textarea{box-shadow:inset 0 0 0 1.5px #E5484D}
.pg-contact .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pg-contact .hint{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--blue-soft);color:#1B1D8F;font-size:14.5px;line-height:1.5}
.pg-contact .hint svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.pg-contact .hint.swap{animation:contact-hs .4s var(--ease)}
@keyframes contact-hs{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pg-contact .count{font-family:var(--mono);font-size:12px;color:var(--grey-2);justify-self:end;margin-top:-10px}
/* step 5: what will be sent, and the privacy box */
.pg-contact .sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.pg-contact .sum div{display:grid;gap:5px;align-content:start;min-width:0;padding:14px 16px;border-radius:14px;background:var(--mist)}
.pg-contact .sum div.wide{grid-column:1/-1}
.pg-contact .sum dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.pg-contact .sum dd{margin:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-contact .sum dd.msg{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;font-weight:400;color:var(--grey)}
.pg-contact .agree{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:15px;line-height:1.5}
.pg-contact .agree input{position:absolute;opacity:0;pointer-events:none}
.pg-contact .agree .bx{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:0;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1.5px #B9BCCD;transition:background .2s,box-shadow .2s}
.pg-contact .agree .bx svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.pg-contact .agree input:checked + .bx{background:var(--blue);box-shadow:none}
.pg-contact .agree input:checked + .bx svg{opacity:1}
.pg-contact .agree input:focus-visible + .bx{outline:2px solid var(--blue);outline-offset:2px}
.pg-contact .agree.bad .bx{box-shadow:inset 0 0 0 1.5px #E5484D}
.pg-contact .agree a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pg-contact .by{font-size:13px;color:var(--grey)}
/* the bottom bar: back, the error if any, next */
.pg-contact .flow .bot{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.pg-contact .flow .bot .err{flex:1;font-size:14px;color:#B4262C}
.pg-contact .flow .bot .btn[hidden]{display:none}
.pg-contact .flow .bot #next,.pg-contact .flow .bot #go{margin-left:auto}
.pg-contact .fly{position:fixed;left:0;top:0;width:10px;height:10px;background:var(--blue);z-index:50;pointer-events:none}
.pg-contact .fm.sent .start,.pg-contact .fm.sent .flow{display:none}
.pg-contact .done-v{display:none;flex:1;place-content:center;justify-items:center;text-align:center;gap:16px;padding:30px 10px}
.pg-contact .fm.sent .done-v{display:grid}
.pg-contact .tick{display:grid;grid-template-columns:repeat(5,12px);gap:4px}
.pg-contact .tick i{width:12px;height:12px;background:var(--blue);opacity:0;transform:scale(.3);animation:contact-tk .45s var(--ease) forwards}
@keyframes contact-tk{to{opacity:1;transform:none}}
.pg-contact .done-v p{max-width:400px;color:var(--grey)}
/* the side */
.pg-contact .side{display:grid;gap:14px}
.pg-contact .box{display:grid;gap:10px;padding:26px 26px 28px;border-radius:24px;background:var(--mist)}
.pg-contact .box .k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.pg-contact .box b{font-size:19px}
.pg-contact .box p{font-size:15px;color:var(--grey)}
.pg-contact .box a.big{font-family:var(--display);font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.02em;color:var(--blue)}
.pg-contact .box.dark{background:var(--night);color:#fff}
.pg-contact .box.dark .k,.pg-contact .box.dark p{color:rgba(255,255,255,.6)}
.pg-contact .soc{display:flex;flex-wrap:wrap;gap:8px}
.pg-contact .soc a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.08);font-size:14px;font-weight:600;color:#fff;transition:background .2s}
.pg-contact .soc a:hover{background:rgba(255,255,255,.16)}
.pg-contact .soc svg{width:16px;height:16px;fill:currentColor}
@media (max-width:1060px){
  .pg-contact .ct{grid-template-columns:minmax(0,1fr)}
  .pg-contact .side{grid-column:1;grid-row:2}
  .pg-contact .ct.open .side{opacity:1;visibility:visible}
  .pg-contact .stps li span:not(.n){display:none}
  .pg-contact .stps{gap:12px}
}
@media (max-width:760px){
  .pg-contact .fm{min-height:380px;padding:24px 18px}
  .pg-contact .three{grid-template-columns:minmax(0,1fr)}
  .pg-contact .sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-contact .flow .bot{flex-wrap:wrap}
  .pg-contact .flow .bot .err{order:3;flex-basis:100%}
}

/* ===== 4. cookies ===== */
/* Cookies: the notice, and a live look at what this site has stored in your browser, with a cookie that crumbles */
.pg-cookies .ck{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:start}
.pg-cookies .tbl{border-radius:22px;background:var(--paper);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.pg-cookies .tbl-h{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line)}
.pg-cookies .tbl-h b{font-size:18px}
.pg-cookies .tbl-h .pill{background:var(--blue-soft);color:var(--blue)}
.pg-cookies .tbl p.d{padding:18px 24px 0;font-size:15.5px;color:var(--grey)}
.pg-cookies .tbl table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.pg-cookies .tbl th{padding:12px 24px;background:var(--mist);text-align:left;font-size:12.5px;font-weight:600;color:var(--grey)}
.pg-cookies .tbl td{padding:16px 24px;border-top:1px solid var(--line);vertical-align:top}
.pg-cookies .tbl td:first-child{font-family:var(--mono);font-size:14px}
.pg-cookies .tbl .foot{padding:18px 24px 22px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--grey)}
.pg-cookies .cats{display:grid;gap:12px;margin-top:20px}
.pg-cookies .cat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:18px 22px;border-radius:18px;background:var(--mist)}
.pg-cookies .cat b{font-size:16px}
.pg-cookies .cat small{grid-column:1;font-size:14px;color:var(--grey)}
.pg-cookies .cat .st{grid-row:1/3;grid-column:2;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.pg-cookies .cat.on .st{color:var(--blue)}
/* live panel */
.pg-cookies .live{position:sticky;top:96px;display:grid;gap:18px;padding:28px;border-radius:24px;background:var(--night);color:#fff}
.pg-cookies .live .k{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.pg-cookies .live .k i{width:8px;height:8px;background:#3DDC97;animation:tag-blink 1.4s steps(2,end) infinite}
.pg-cookies .live h3{font-size:24px;letter-spacing:-.02em}
.pg-cookies .cookie{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;width:min(260px,80%);margin:6px auto 0;aspect-ratio:1}
.pg-cookies .cookie i{border-radius:2px;background:#4A4CFF;transition:transform .9s cubic-bezier(.5,0,.75,0),opacity .9s}
.pg-cookies .cookie i.ch{background:#0B0B12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pg-cookies .cookie i.e{visibility:hidden}
.pg-cookies .cookie.gone i:not(.e){opacity:.07}
.pg-cookies .list{display:grid;gap:8px;min-height:60px}
.pg-cookies .list div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);font-size:14px}
.pg-cookies .list .t{grid-row:1/3;align-self:center;font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:6px;background:rgba(143,144,255,.2);color:#C9CAFF}
.pg-cookies .list b{font-family:var(--mono);font-weight:500;overflow-wrap:anywhere}
.pg-cookies .list small{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5);overflow-wrap:anywhere}
.pg-cookies .list .none{display:block;padding:16px;font-size:15px;color:rgba(255,255,255,.7);background:rgba(61,220,151,.08)}
.pg-cookies .live .row{display:flex;flex-wrap:wrap;gap:10px}
.pg-cookies .live .note{color:rgba(255,255,255,.5)}
@media (max-width:960px){
  .pg-cookies .ck{grid-template-columns:minmax(0,1fr)}
  .pg-cookies .live{position:static}
}
@media (max-width:760px){
  .pg-cookies .tbl th:nth-child(4),.pg-cookies .tbl td:nth-child(4){display:none}
  .pg-cookies .tbl th,.pg-cookies .tbl td{padding-inline:14px}
}

/* ===== 4. documentation ===== */
/* Documentation: a pile of papers deals itself into a grid; each sheet tilts under the pointer */
.pg-documentation .dc-ctl{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:26px}
.pg-documentation .docs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;perspective:1400px}
.pg-documentation .doc{position:relative;display:flex;flex-direction:column;border-radius:22px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 24px 50px -36px rgba(11,11,18,.4);transform-style:preserve-3d;transition:box-shadow .3s,opacity .35s,transform .35s var(--ease);will-change:transform}
.pg-documentation .doc.hide{display:none}
.pg-documentation .doc:hover{box-shadow:0 0 0 1px var(--line),0 40px 70px -36px rgba(11,11,18,.5)}
.pg-documentation .cover{position:relative;aspect-ratio:1.42;margin:12px 12px 0;border-radius:14px;overflow:hidden;background:var(--c,#1315FF);color:#fff;transform:translateZ(18px)}
.pg-documentation .cover .ti{position:absolute;left:22px;bottom:20px;right:22px;display:grid;gap:6px}
.pg-documentation .cover .ti small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.pg-documentation .cover .ti b{font-family:var(--display);font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.pg-documentation .cover .gl{position:absolute;right:18px;top:18px;display:grid;grid-template-columns:repeat(6,7px);gap:4px}
.pg-documentation .cover .gl i{width:7px;height:7px;background:currentColor;opacity:.22}
.pg-documentation .cover .gl i.p{opacity:.95}
.pg-documentation .cover .mk{position:absolute;left:22px;top:20px;width:12px;height:25px}
.pg-documentation .doc.light .cover{background:var(--mist);color:var(--ink)}
.pg-documentation .doc.ink .cover{background:var(--ink)}
.pg-documentation .body{display:grid;gap:10px;padding:20px 22px 22px;flex:1;transform:translateZ(8px)}
.pg-documentation .body .meta{display:flex;flex-wrap:wrap;gap:8px}
.pg-documentation .body p{font-size:15px;color:var(--grey);line-height:1.55}
.pg-documentation .body .go{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:8px}
.pg-documentation .body .go a{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:99px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;transition:background .2s}
.pg-documentation .body .go a:hover{background:var(--blue)}
.pg-documentation .body .go a.req{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pg-documentation .body .go a.req:hover{background:var(--ink);color:#fff}
.pg-documentation .body .go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg-documentation .body .go span{font-family:var(--mono);font-size:12px;color:var(--grey-2)}
.pg-documentation .shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}
.pg-documentation .doc:hover .shine{opacity:1}
/* developer docs */
.pg-documentation .dev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pg-documentation .dev a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:22px;border-radius:20px;background:var(--night-2);box-shadow:0 0 0 1px rgba(255,255,255,.06);transition:background .25s,transform .25s var(--ease)}
.pg-documentation .dev a:hover{background:#1E1E3C;transform:translateY(-3px)}
.pg-documentation .dev .ki{grid-row:1/3;margin:0}
.pg-documentation .dev b{font-size:17px}
.pg-documentation .dev span{grid-column:2;font-size:14px;color:rgba(255,255,255,.6)}
.pg-documentation .dev a > svg{grid-row:1/3;grid-column:3;width:20px;height:20px;fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.6}
@media (max-width:1060px){
  .pg-documentation .docs,.pg-documentation .dev{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pg-documentation .docs,.pg-documentation .dev{grid-template-columns:minmax(0,1fr)}
}

/* ===== 4. economic ===== */
/* Economic: a payment race (bank transfer, card payout, Solana), where the money goes, a week of hours that are open, and
   four uses that need the amount kept private */
.pg-economic .race{padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--paper);box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(11,11,18,.25)}
.pg-economic .race-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.pg-economic .race-top .ctl{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* the two times and the send button: one size, centred on one line */
.pg-economic #when{align-items:center}
.pg-economic #when button,.pg-economic #go{width:156px;height:44px;padding:0;font-size:15px}
.pg-economic .lane{display:grid;grid-template-columns:200px minmax(0,1fr) 230px;gap:22px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.pg-economic .lane h3{font-size:17px;letter-spacing:-.01em}
.pg-economic .lane h3 small{display:block;margin-top:4px;font-family:var(--text);font-size:13.5px;font-weight:400;color:var(--grey)}
.pg-economic .track{position:relative;height:22px}
.pg-economic .track canvas{position:absolute;inset:0;width:100%;height:100%}
.pg-economic .res{font-size:15px;line-height:1.4;color:var(--grey);min-height:42px;display:flex;align-items:center}
.pg-economic .res b{color:var(--ink)}
.pg-economic .res.win b{color:var(--blue)}
/* where the money goes */
.pg-economic .costs .kc b.big{font-family:var(--display);font-size:34px;letter-spacing:-.03em;color:var(--blue)}
/* a week of hours */
.pg-economic .week{display:grid;grid-template-columns:44px repeat(24,minmax(0,1fr));gap:4px;margin-top:34px}
.pg-economic .week span{font-size:12px;color:rgba(255,255,255,.45);align-self:center}
.pg-economic .week i{display:block;aspect-ratio:1;background:rgba(255,255,255,.08);transition:background .35s}
.pg-economic .week i.on{background:var(--blue)}
.pg-economic .week i.on.b{background:#fff}
.pg-economic .wk-legend{display:flex;justify-content:space-between;margin:10px 0 0 48px;font-size:12px;color:rgba(255,255,255,.4)}
.pg-economic .wk-out{margin-top:22px;font-size:18px;color:rgba(255,255,255,.8)}
.pg-economic .wk-out b{color:#fff;font-family:var(--display);font-size:28px;letter-spacing:-.02em}
@media (max-width:960px){
  .pg-economic .lane{grid-template-columns:150px minmax(0,1fr);}
  .pg-economic .lane .res{grid-column:1/-1}
}
@media (max-width:760px){
  .pg-economic #when button,.pg-economic #go{width:136px}
  .pg-economic .lane{grid-template-columns:minmax(0,1fr)}
  .pg-economic .week{grid-template-columns:30px repeat(24,minmax(0,1fr));gap:2px}
  .pg-economic .wk-legend{margin-left:32px}
}
@media (max-width:400px){
  .pg-economic #when button,.pg-economic #go{width:124px;font-size:14.5px}
}

/* ===== 4. eusd ===== */
/* eUSD: facts strip, "who sees what" in a block-explorer window (eUSD or a public stablecoin), how it works on a line of
   squares that fills as you scroll, "open to the law" as a four-cell table, comparison, questions */
.pg-eusd .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pg-eusd .fact{padding:30px 28px;border-radius:24px;background:var(--mist)}
.pg-eusd .fact b{display:block;font-family:var(--display);font-size:clamp(40px,4.6vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1}
.pg-eusd .fact span{display:block;margin-top:14px;color:var(--grey);font-size:16px;line-height:1.5}
/* who sees what: a dark block-explorer window in the style of an exchange app (an illustration). Two tabs (holders, live
   transactions) and two switches (eUSD, a public stablecoin) */
.pg-eusd .px{--x-l:#242424;--x-p:#1A1A1A;--x-d:#8C8C8C;--x-d2:#5E5E5E;--x-g:#25A750;border-radius:18px;background:#000;color:#fff;font-size:13px;font-variant-numeric:tabular-nums;overflow:hidden;box-shadow:0 0 0 1px rgba(11,11,18,.14),0 40px 80px -36px rgba(11,11,18,.5)}
.pg-eusd .px-bar{display:flex;align-items:center;gap:14px;height:42px;padding:0 16px;background:#141414;border-bottom:1px solid var(--x-l)}
.pg-eusd .px-dots{display:flex;gap:7px}
.pg-eusd .px-dots i{width:11px;height:11px;border-radius:50%;background:#2E2E2E}
.pg-eusd .px-url{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;max-width:460px;height:26px;margin:0 auto;padding:0 12px;border-radius:99px;background:#0A0A0A;color:var(--x-d);font-family:var(--mono);font-size:12px;white-space:nowrap;overflow:hidden}
.pg-eusd .px-url span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-eusd .px-url svg,.pg-eusd .px-search svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.pg-eusd .px-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--x-d2)}
.pg-eusd .px-nav{display:flex;align-items:center;gap:26px;height:56px;padding:0 22px;border-bottom:1px solid var(--x-l)}
.pg-eusd .px-logo{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.pg-eusd .px-logo i{width:14px;height:14px;background:#fff}
.pg-eusd .px-tabs{display:flex;align-self:stretch;gap:24px}
.pg-eusd .px-tabs button{position:relative;padding:0;border:0;background:none;color:var(--x-d);font:500 14px var(--text);cursor:pointer;transition:color .2s}
.pg-eusd .px-tabs button:hover,.pg-eusd .px-tabs button[aria-pressed="true"]{color:#fff}
.pg-eusd .px-tabs button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff}
.pg-eusd .px-tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pg-eusd .px-search{display:flex;align-items:center;gap:8px;width:280px;height:34px;margin-left:auto;padding:0 14px;border-radius:99px;background:var(--x-p);color:var(--x-d2);font-size:13px}
.pg-eusd .px-tok{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding:18px 22px;border-bottom:1px solid var(--x-l)}
.pg-eusd .px-sw{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--x-p)}
.pg-eusd .px-sw button{height:34px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:var(--x-d);font:600 14px var(--text);cursor:pointer;transition:background .2s,color .2s}
.pg-eusd .px-sw button:hover{color:#fff}
.pg-eusd .px-sw button[aria-pressed="true"]{background:#fff;color:#000}
.pg-eusd .px-sw button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pg-eusd .px-id{display:flex;align-items:center;gap:12px}
.pg-eusd .px-coin{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font:700 16px var(--display);transition:background .3s}
.pg-eusd .px-coin.pub{background:#3A3A3A}
.pg-eusd .px-id b{display:block;font-size:17px;font-weight:700}
.pg-eusd .px-id small{display:block;margin-top:2px;color:var(--x-d);font-size:12px}
.pg-eusd .px-price{font-size:20px;font-weight:700;color:var(--x-g)}
.pg-eusd .px-price small{margin-left:6px;color:var(--x-d);font-size:12px;font-weight:500}
.pg-eusd .px-stats{display:flex;flex-wrap:wrap;gap:12px 30px;margin:0}
.pg-eusd .px-stats div{display:grid;gap:3px}
.pg-eusd .px-stats dt{color:var(--x-d);font-size:12px}
.pg-eusd .px-stats dd{margin:0;font-size:14px;font-weight:600;white-space:nowrap}
.pg-eusd .px-stats dd.c{color:var(--x-d)}
.pg-eusd .px-body{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr)}
.pg-eusd .px-an{display:grid;align-content:start;border-right:1px solid var(--x-l)}
.pg-eusd .px-card{padding:18px 22px;background:#000}
.pg-eusd .px-card + .px-card{border-top:1px solid var(--x-l)}
.pg-eusd .px-card .k{color:var(--x-d);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.pg-eusd .px-card .v{margin-top:6px;font-size:24px;font-weight:700}
.pg-eusd .px-card .v.c{color:var(--x-d2)}
.pg-eusd .px-card .s{margin-top:6px;color:var(--x-d);font-size:12.5px;line-height:1.45}
.pg-eusd .px-dw{display:flex;align-items:center;gap:18px;margin-top:14px}
.pg-eusd .px-donut{position:relative;flex:none;width:100px;height:100px;border-radius:50%}
.pg-eusd .px-donut::after{content:"";position:absolute;inset:15px;border-radius:50%;background:#000}
.pg-eusd .px-donut span{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-size:12px;font-weight:600}
.pg-eusd .px-leg{display:grid;gap:5px;color:var(--x-d);font-size:12px}
.pg-eusd .px-leg i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%}
.pg-eusd .px-leg b{margin-left:5px;color:#fff;font-weight:600}
.pg-eusd .px-tbl{min-width:0}
.pg-eusd .px-th{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 22px 10px}
.pg-eusd .px-th b{font-size:15px}
.pg-eusd .px-th small{color:var(--x-d);font-size:12px;text-align:right}
.pg-eusd .px-row{display:grid;grid-template-columns:30px minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr);gap:16px;align-items:center;height:46px;padding:0 22px;border-bottom:1px solid #151515}
.pg-eusd .px-row.h{height:34px;color:var(--x-d);font-size:12px;border-bottom-color:var(--x-l)}
.pg-eusd .px-row:not(.h):hover{background:#0C0C0C}
.pg-eusd .px-row .r{color:var(--x-d)}
.pg-eusd .px-row .a{display:flex;align-items:center;gap:8px;min-width:0}
.pg-eusd .px-row .a code{overflow:hidden;font-family:var(--mono);font-size:13px;color:#E6E6E6;text-overflow:ellipsis;white-space:nowrap}
.pg-eusd .px-row .lb{flex:none;height:20px;padding:0 8px;border-radius:6px;background:var(--x-p);color:var(--x-d);font-size:11px;line-height:20px}
.pg-eusd .px-row .q{justify-self:end;font-family:var(--mono);font-size:13px;white-space:nowrap}
.pg-eusd .px-row .q.c{color:var(--x-d2)}
.pg-eusd .px-row .p{display:grid;gap:5px;justify-items:end}
.pg-eusd .px-row.h .p{display:block;justify-self:end}
.pg-eusd .px-row .p em{font-style:normal}
.pg-eusd .px-row .p i{position:relative;display:block;width:100%;height:3px;background:#1F1F1F;overflow:hidden}
.pg-eusd .px-row .p i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--pw,0%);background:var(--x-g);transition:width .6s var(--ease)}
.pg-eusd .px-ft{display:flex;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid var(--x-l);color:var(--x-d2);font-size:12px}
/* the transactions tab: a live list, newest on top */
.pg-eusd .px-txs,.pg-eusd .px-body.tx .px-an,.pg-eusd .px-body.tx .px-tbl{display:none}
.pg-eusd .px-body.tx{display:block}
.pg-eusd .px-body.tx .px-txs{display:block}
.pg-eusd .px-live{display:inline-flex;align-items:center;gap:8px}
.pg-eusd .px-live i{width:7px;height:7px;border-radius:50%;background:var(--x-g);animation:tag-blink 1.4s steps(2,end) infinite}
.pg-eusd .px-tr{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.6fr) minmax(0,.7fr) minmax(0,1fr) 22px minmax(0,1fr) minmax(0,.9fr);gap:14px;align-items:center;height:46px;padding:0 22px;border-bottom:1px solid #151515}
.pg-eusd .px-tr.h{height:34px;color:var(--x-d);font-size:12px;border-bottom-color:var(--x-l)}
.pg-eusd .px-tr:not(.h):hover{background:#0C0C0C}
.pg-eusd .px-tr code{display:block;overflow:hidden;font-family:var(--mono);font-size:13px;color:#E6E6E6;text-overflow:ellipsis;white-space:nowrap}
.pg-eusd .px-tr .sig code{color:#7DA8FF}
.pg-eusd .px-tr .ag{color:var(--x-d);white-space:nowrap}
.pg-eusd .px-tr .ar{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(37,167,80,.14);color:var(--x-g)}
.pg-eusd .px-tr .ar svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2}
.pg-eusd .px-tr.h .ar{background:none}
.pg-eusd .px-tr .am{justify-self:end;font-family:var(--mono);font-size:13px;white-space:nowrap}
.pg-eusd .px-tr.h .am{font-family:inherit;font-size:12px}
.pg-eusd .px-tr .am.c{color:var(--x-d2)}
.pg-eusd .px-tr.new{animation:eusd-px-in .7s var(--ease)}
@keyframes eusd-px-in{from{opacity:0;transform:translateY(-12px);background:rgba(37,167,80,.16)}to{opacity:1;transform:none;background:transparent}}
.pg-eusd .px-note{display:flex;align-items:flex-start;gap:12px;max-width:880px;margin-top:24px;color:var(--grey);font-size:16.5px;line-height:1.6}
.pg-eusd .px-note i{flex:none;width:9px;height:9px;margin-top:9px;background:var(--blue)}
.pg-eusd .px-note b{color:var(--ink)}
/* how it works: four steps on a line of squares */
.pg-eusd .how{position:relative}
.pg-eusd .how canvas{display:block;width:100%;height:21px;margin-bottom:34px}
.pg-eusd .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pg-eusd .step .n{font-family:var(--mono);font-size:13px;color:var(--blue);letter-spacing:.06em}
.pg-eusd .step h3{margin-top:12px;font-size:22px;letter-spacing:-.015em}
.pg-eusd .step p{margin-top:10px;color:var(--grey);font-size:16px}
/* open to the law (dark section): a closed four-cell table with square corners, black cells and thin light lines; each cell has its number in blue above the title and text */
.pg-eusd .law4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-w);border:1px solid var(--line-w)}
.pg-eusd .law4 > div{padding:clamp(28px,3vw,40px) clamp(26px,3vw,40px) clamp(30px,3vw,40px);background:var(--night)}
.pg-eusd .law4 .n{display:block;margin-bottom:clamp(8px,.8vw,12px);font-family:var(--mono);font-size:clamp(56px,5.2vw,76px);font-weight:500;letter-spacing:-.03em;line-height:.9;color:var(--blue)}
.pg-eusd .law4 h3{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.015em}
.pg-eusd .law4 p{max-width:520px;margin-top:10px;color:rgba(255,255,255,.66);font-size:16px;line-height:1.6}
/* comparison */
.pg-eusd .cmp{width:100%;border-collapse:collapse;font-size:16px}
.pg-eusd .cmp th,.pg-eusd .cmp td{text-align:left;padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.pg-eusd .cmp th{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.pg-eusd .cmp td:first-child{font-weight:600}
.pg-eusd .cmp tr.us td{background:var(--blue-soft)}
.pg-eusd .cmp tr.us td:first-child{border-radius:14px 0 0 14px}
.pg-eusd .cmp tr.us td:last-child{border-radius:0 14px 14px 0}
.pg-eusd .cmp .dot{display:inline-block;width:9px;height:9px;margin-right:9px;background:var(--grey-2)}
.pg-eusd .cmp .dot.on{background:var(--blue)}
.pg-eusd .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:960px){
  .pg-eusd .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-eusd .px-body{grid-template-columns:minmax(0,1fr)}
  .pg-eusd .px-tbl{order:-1}
  .pg-eusd .px-an{grid-template-columns:repeat(2,minmax(0,1fr));border-right:0;border-top:1px solid var(--x-l)}
  .pg-eusd .px-an .px-card:last-child{grid-column:1/-1}
  .pg-eusd .px-an .px-card:nth-child(2){border-top:0;border-left:1px solid var(--x-l)}
  .pg-eusd .px-search{display:none}
  .pg-eusd .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
}
@media (max-width:760px){
  .pg-eusd .px-url{justify-content:flex-start;font-size:11px}
  .pg-eusd .px-tag{display:none}
  .pg-eusd .px-nav{padding:0 16px}
  .pg-eusd .px-tok{padding:16px;gap:14px 24px}
  .pg-eusd .px-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .pg-eusd .px-an{grid-template-columns:minmax(0,1fr)}
  .pg-eusd .px-an .px-card:nth-child(2){border-top:1px solid var(--x-l);border-left:0}
  .pg-eusd .px-card{padding:16px}
  .pg-eusd .px-th{padding:14px 16px 8px}
  .pg-eusd .px-row{grid-template-columns:22px minmax(0,1fr) minmax(0,1fr);gap:10px;padding:0 16px}
  .pg-eusd .px-row .p,.pg-eusd .px-row.h .p,.pg-eusd .px-row .lb{display:none}
  .pg-eusd .px-ft{flex-direction:column;gap:4px;padding:12px 16px}
  .pg-eusd .px-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr);gap:10px;padding:0 16px}
  .pg-eusd .px-tr .sig,.pg-eusd .px-tr .sl,.pg-eusd .px-tr .ag,.pg-eusd .px-tr .ar{display:none}
  .pg-eusd .steps{grid-template-columns:minmax(0,1fr)}
  .pg-eusd .cmp{font-size:14.5px;min-width:560px}
  .pg-eusd .law4{grid-template-columns:minmax(0,1fr)}
}

/* ===== 4. faq ===== */
/* FAQ: search as you type, filter by topic, open an answer */
.pg-faq .fq{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.pg-faq .fq-side{position:sticky;top:96px;display:grid;gap:18px}
.pg-faq .srch{position:relative}
.pg-faq .srch svg{position:absolute;left:16px;top:50%;width:20px;height:20px;translate:0 -50%;fill:none;stroke:var(--grey);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.pg-faq .srch input{width:100%;height:52px;padding:0 16px 0 46px;border:0;border-radius:14px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:16px;color:var(--ink)}
.pg-faq .srch input:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue)}
.pg-faq .cats{display:grid;gap:4px}
.pg-faq .cats button{display:flex;justify-content:space-between;align-items:center;gap:10px;height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--grey);text-align:left;cursor:pointer;transition:background .2s,color .2s}
.pg-faq .cats button:hover{background:var(--mist);color:var(--ink)}
.pg-faq .cats button[aria-pressed="true"]{background:var(--ink);color:#fff}
.pg-faq .cats b{font-family:var(--mono);font-size:12px;font-weight:500;opacity:.6}
.pg-faq .fq-main .grp{margin-bottom:40px}
.pg-faq .fq-main .grp > h3{display:flex;align-items:center;gap:12px;margin-bottom:6px;font-size:13px;font-family:var(--mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.pg-faq .fq-main .grp > h3 i{width:8px;height:8px;background:var(--blue)}
.pg-faq .q{border-bottom:1px solid var(--line);transition:opacity .3s}
.pg-faq .q summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-family:var(--display);font-size:clamp(18px,1.6vw,21px);font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none}
.pg-faq .q summary::-webkit-details-marker{display:none}
.pg-faq .q summary .pm{position:relative;flex:none;width:30px;height:30px;border-radius:9px;background:var(--mist);transition:background .3s,transform .4s var(--ease)}
.pg-faq .q summary .pm::before,.pg-faq .q summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);transition:transform .4s var(--ease),background .3s}
.pg-faq .q summary .pm::after{transform:rotate(90deg)}
.pg-faq .q[open] summary .pm{background:var(--blue);transform:rotate(180deg)}
.pg-faq .q[open] summary .pm::before,.pg-faq .q[open] summary .pm::after{background:#fff}
.pg-faq .q[open] summary .pm::after{transform:rotate(0)}
.pg-faq .q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.pg-faq .q[open] .a{grid-template-rows:1fr}
.pg-faq .q .a > div{overflow:hidden}
.pg-faq .q .a p{max-width:760px;padding-bottom:22px;font-size:16.5px;line-height:1.65;color:var(--grey)}
.pg-faq .q .a a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.pg-faq mark{background:#FFE58A;color:inherit;border-radius:3px;padding:0 1px}
.pg-faq .none{display:none;padding:40px 0;font-size:17px;color:var(--grey)}
.pg-faq .none.on{display:block}
.pg-faq .none a{color:var(--blue);text-decoration:underline}
@media (max-width:960px){
  .pg-faq .fq{grid-template-columns:minmax(0,1fr);gap:28px}
  .pg-faq .fq-side{position:static}
  .pg-faq .cats{display:flex;flex-wrap:wrap;gap:6px}
  .pg-faq .cats button{height:40px;border-radius:99px;background:var(--mist)}
}

/* ===== 4. global-access ===== */
/* Global access: a dotted globe you can spin; the switch shows where eUSD is planned to be available, and how */
.pg-global-access .gl{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
.pg-global-access .orb{position:relative;aspect-ratio:1;max-width:620px;width:100%;justify-self:center;touch-action:pan-y;cursor:grab}
.pg-global-access .orb:active{cursor:grabbing}
.pg-global-access .orb canvas{position:absolute;inset:0;width:100%;height:100%}
.pg-global-access .orb .tip{position:absolute;left:50%;bottom:-6px;translate:-50% 0;display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.55);white-space:nowrap;pointer-events:none}
.pg-global-access .orb .tip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pg-global-access .gx{display:grid;gap:22px}
.pg-global-access .gx .seg{justify-self:start}
.pg-global-access .gx .card{display:grid;align-content:start;gap:14px;padding:28px 28px 30px;border-radius:24px;background:var(--night-2);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.pg-global-access .gx .card .k{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pg-global-access .gx .card .k i{width:10px;height:10px;background:var(--c,#8F90FF)}
.pg-global-access .gx .card h3{font-size:28px;letter-spacing:-.02em;line-height:1.15}
.pg-global-access .gx .card p{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.7)}
.pg-global-access .gx .card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pg-global-access .gx .card li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:15.5px;color:rgba(255,255,255,.82)}
.pg-global-access .gx .card li::before{content:"";width:7px;height:7px;margin-top:8px;background:var(--c,#8F90FF)}
.pg-global-access .gx .card.swap{animation:global-access-swap .5s var(--ease)}
@keyframes global-access-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pg-global-access .nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pg-global-access .nums .kc{gap:8px}
.pg-global-access .nums b{font-family:var(--display);font-size:clamp(48px,5vw,72px);font-weight:600;letter-spacing:-.04em;line-height:1}
.pg-global-access .nums span{font-size:16px;color:var(--grey)}
.pg-global-access .rails{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pg-global-access .rails span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:99px;background:var(--paper);box-shadow:0 0 0 1px var(--line);font-family:var(--mono);font-size:13px}
@media (max-width:1060px){
  .pg-global-access .gl{grid-template-columns:minmax(0,1fr)}
  .pg-global-access .orb{max-width:520px}
}
@media (max-width:760px){
  .pg-global-access .nums{grid-template-columns:minmax(0,1fr)}
}

/* ===== 4. help-center ===== */
/* heading font: Anybody (SIL Open Font License, assets/fonts/Anybody-OFL.txt) */
@font-face{font-family:'Anybody';src:url(../assets/fonts/anybody-latin-wdth.woff2) format('woff2');font-weight:100 900;font-stretch:50% 150%;font-display:swap}
/* Help Center (coming soon), laid out after Joachim's reference poster (1920 x 1080), measured and scaled:
   "COMING / SOON" top left over 77.5% of the width; bottom left, the note (the poster's mailing list form and links were
   removed on 20 Oct at 17:39). Dark, with the network of wallets and transfers behind it.
   --u is 1/100 of the width on a 16:9 screen; on taller-than-wide ratios it follows the height instead, so nothing overflows. */
.pg-help-center .soon{--u:min(1vw, 1.7778svh);--l:2.81vw;position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:calc(4 * var(--u));
  padding:calc(var(--hdr) + 1.72 * var(--u)) 0 calc(1.2 * var(--u));overflow:hidden;background:var(--night);color:#fff}
.pg-help-center .soon canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Anybody at width 120 and weight 400 matches the poster's letter proportions (width / cap height 6.6, stem / cap height 0.17);
   cap height 11.9 u, line pitch 12.97 u and 77.5% of the width for COMING, as on the poster (the -.035em puts the ink, not the box, on the margin) */
.pg-help-center .soon-t{position:relative;z-index:1;align-self:flex-start;margin:0.028em 0 0 calc(var(--l) - .035em);font-family:'Anybody',var(--display);font-stretch:120%;font-weight:400;
  font-size:calc(17.32 * var(--u));line-height:.7486;letter-spacing:0;text-transform:uppercase;white-space:nowrap;color:#fff}
.pg-help-center .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-help-center .soon-b{position:relative;z-index:1;padding:0 0 calc(2.5 * var(--u)) var(--l)}
/* the note stays where it is on the poster: "COME VISIT" ends 71 px above the bottom at 1080 */
.pg-help-center .soon-b a{color:#fff;text-decoration:none}
.pg-help-center .soon-b a:hover{text-decoration:underline;text-underline-offset:.18em}
.pg-help-center .sb-note{font-family:var(--display);font-weight:500;font-size:calc(1.82 * var(--u));line-height:1.23;text-transform:uppercase;letter-spacing:.005em}
.pg-help-center .sb-note p{margin:0}
.pg-help-center .sb-note .visit{display:inline-block;margin-top:calc(3.05 * var(--u))}
.pg-help-center .sb-note p{width:max-content}
/* below 1024 px wide the poster sizes get too small to read: the note uses fixed sizes */
@media (max-width:1023px){
  .pg-help-center .soon{--u:1vw;--l:var(--gl);gap:48px;padding-bottom:40px}
  .pg-help-center .soon-t{font-size:17.32vw}
  .pg-help-center .soon-b{padding:0 var(--gr) 0 var(--l)}
  .pg-help-center .sb-note{font-size:22px}
  .pg-help-center .sb-note .visit{margin-top:20px}
}

/* ===== 4. institutional ===== */
/* Institutional: a policy console that drives a live transfer check, and the on-chain log of every action */
.pg-institutional .pn{border-radius:24px;background:var(--paper);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.pg-institutional .pn-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);font-size:14px;color:var(--grey)}
.pg-institutional .pn-h b{color:var(--ink);font-size:15px}
.pg-institutional .pc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:stretch}
.pg-institutional .pc .pn{display:flex;flex-direction:column}
/* rules */
.pg-institutional .rule{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.pg-institutional .rule b{font-size:16px}
.pg-institutional .rule small{grid-column:1;font-size:14px;line-height:1.45;color:var(--grey)}
.pg-institutional .sw{grid-row:1/3;grid-column:2;position:relative;width:46px;height:28px;border:0;border-radius:99px;background:#D5D7E2;cursor:pointer;transition:background .25s}
.pg-institutional .sw::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,11,18,.25);transition:transform .32s var(--ease)}
.pg-institutional .sw[aria-checked="true"]{background:var(--blue)}
.pg-institutional .sw[aria-checked="true"]::after{transform:translateX(18px)}
.pg-institutional .lim{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-top:10px}
.pg-institutional .lim input{flex:1;min-width:0;height:6px;margin:0;border-radius:99px;background:linear-gradient(var(--blue),var(--blue)) 0 0/var(--fill,0%) 100% no-repeat,#E3E5EC;-webkit-appearance:none;appearance:none;cursor:pointer}
.pg-institutional .lim input::-webkit-slider-thumb{width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(11,11,18,.12),0 2px 8px rgba(11,11,18,.22);-webkit-appearance:none;appearance:none}
.pg-institutional .lim input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(11,11,18,.12),0 2px 8px rgba(11,11,18,.22)}
.pg-institutional .lim input:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.pg-institutional .lim output{min-width:86px;text-align:right;font-family:var(--mono);font-size:14px}
/* wallets */
.pg-institutional .wt{width:100%;border-collapse:collapse;font-size:14.5px}
.pg-institutional .wt th{padding:14px 4px 10px;font-size:12.5px;font-weight:600;color:var(--grey);text-align:center}
.pg-institutional .wt th:first-child,.pg-institutional .wt td:first-child{text-align:left;padding-left:22px}
.pg-institutional .wt th:last-child,.pg-institutional .wt td:last-child{padding-right:18px}
.pg-institutional .wt td{padding:9px 4px;border-top:1px solid var(--line);text-align:center}
.pg-institutional .wt td b{display:block;font-size:15px}
.pg-institutional .wt td small{font-family:var(--mono);font-size:12px;color:var(--grey-2)}
.pg-institutional .ck{display:inline-grid;place-items:center;width:30px;height:30px;border:0;border-radius:9px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);color:#fff;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s}
.pg-institutional .ck:active{transform:scale(.92)}
.pg-institutional .ck svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.pg-institutional .ck[aria-pressed="true"]{background:var(--blue);box-shadow:none}
.pg-institutional .ck[aria-pressed="true"] svg{opacity:1}
.pg-institutional .ck.k-block[aria-pressed="true"]{background:var(--ink)}
.pg-institutional .ck.k-frz[aria-pressed="true"]{background:#8F90FF}
.pg-institutional .why{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:14px 22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--grey)}
.pg-institutional .why select{height:38px;padding:0 38px 0 14px;border:0;border-radius:99px;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%235C6070' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center/14px;box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none}
.pg-institutional .why select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* the test transfer */
.pg-institutional .tt{display:grid;gap:16px;padding:20px 22px 6px}
.pg-institutional .tt-row{display:grid;gap:8px}
.pg-institutional .tt-row > span{font-size:13px;font-weight:600;color:var(--grey)}
.pg-institutional .tt .seg{display:flex;width:100%}
.pg-institutional .tt .seg button{flex:1 1 0;min-width:0;height:36px;padding:0 8px;font-size:13.5px}
.pg-institutional .tt-go{padding:14px 22px 2px}
.pg-institutional .tt-go .btn{width:100%;height:46px}
.pg-institutional .pipe{position:relative;margin:16px 22px 0;padding-left:30px}
.pg-institutional .pipe::before{content:"";position:absolute;left:5px;top:22px;bottom:22px;width:2px;background:repeating-linear-gradient(to bottom,#C9CBD6 0 4px,transparent 4px 8px)}
.pg-institutional .tok{position:absolute;left:0;top:0;width:12px;height:12px;background:var(--ink);z-index:2;opacity:0;transition:transform .42s var(--ease),opacity .2s}
.pg-institutional .st{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:9px 0;transition:opacity .3s}
.pg-institutional .st::before{content:"";position:absolute;left:-30px;top:16px;width:12px;height:12px;background:#fff;box-shadow:inset 0 0 0 2px #C9CBD6;transition:background .3s,box-shadow .3s}
.pg-institutional .st b{grid-column:1;font-size:15px}
.pg-institutional .st small{grid-column:1;overflow:hidden;font-size:13.5px;color:var(--grey);text-overflow:ellipsis;white-space:nowrap}
.pg-institutional .st small.res{font-family:var(--mono);font-size:12.5px;color:var(--grey-2)}
.pg-institutional .st .r{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.pg-institutional .st .r:empty{display:none}
.pg-institutional .st.pass::before{background:var(--blue);box-shadow:none}
.pg-institutional .st.pass small.res{color:var(--blue)}
.pg-institutional .st.pass .r{background:var(--blue-soft);color:var(--blue)}
.pg-institutional .st.fail::before{background:#E5484D;box-shadow:none}
.pg-institutional .st.fail small.res{color:#C02C33}
.pg-institutional .st.fail .r{background:#FDECEC;color:#C02C33}
.pg-institutional .st.off::before{background:#E3E5EC;box-shadow:none}
.pg-institutional .st.off .r{background:var(--mist);color:var(--grey)}
.pg-institutional .st.skip{opacity:.42}
.pg-institutional .out{margin:auto 22px 22px;padding:16px 18px;border-radius:16px;background:var(--mist);font-size:15px;line-height:1.45;color:var(--grey);transition:background .3s,color .3s}
.pg-institutional .out b{color:inherit}
.pg-institutional .out.ok{background:var(--blue-soft);color:var(--blue)}
.pg-institutional .out.bad{background:#FDECEC;color:#B4262C}
/* the enforcement log: square corners; the frame and the dividers are one grid of small squares drawn by the script, so
   each divider meets the frame on a square and the corners close */
.pg-institutional .log{position:relative;background:var(--night-2)}
.pg-institutional .log-grid{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.pg-institutional .log-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px 14px;font-size:13px;color:rgba(255,255,255,.55)}
.pg-institutional .log-live{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px}
.pg-institutional .log-live i{width:7px;height:7px;background:#8F90FF;animation:tag-blink 1.4s steps(2,end) infinite}
.pg-institutional .log-re{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:0;border-radius:99px;background:rgba(255,255,255,.08);color:#fff;font:600 13px var(--text);cursor:pointer;transition:background .2s}
.pg-institutional .log-re:hover{background:rgba(255,255,255,.16)}
.pg-institutional .log-re:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pg-institutional .log-re svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.pg-institutional .log.loading .log-re svg{animation:institutional-log-spin .8s linear infinite}
@keyframes institutional-log-spin{to{transform:rotate(360deg)}}
.pg-institutional #log{transition:opacity .25s}
.pg-institutional .log.loading #log{opacity:.25}
.pg-institutional .lg-r{position:relative;display:grid;grid-template-columns:96px 104px minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1.2fr);gap:14px;align-items:center;padding:14px 22px;font-size:14.5px}
.pg-institutional .lg-h{font-size:12.5px;color:rgba(255,255,255,.5);padding-block:12px}
.pg-institutional .lg-r .t,.pg-institutional .lg-r .c{font-family:var(--mono);font-size:12.5px;color:rgba(255,255,255,.55)}
.pg-institutional .lg-r small{display:block;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.45)}
.pg-institutional .act{justify-self:start;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:99px;background:rgba(255,255,255,.08);font-size:12.5px;font-weight:600}
.pg-institutional .act i{width:7px;height:7px;background:currentColor}
.pg-institutional .act.block{color:#fff}
.pg-institutional .act.freeze{color:#B9BAFF}
.pg-institutional .act.unblock,.pg-institutional .act.thaw{color:rgba(255,255,255,.6)}
.pg-institutional .act.transfer{color:#fff;background:rgba(72,74,255,.42)}
.pg-institutional .act.refused{color:#FF9DA1;background:rgba(229,72,77,.16)}
.pg-institutional .lg-r.new{animation:institutional-ev-in 1.1s var(--ease)}
@keyframes institutional-ev-in{0%{opacity:0;transform:translateY(-10px);background-color:rgba(72,74,255,.32)}35%{opacity:1;transform:none}100%{background-color:transparent}}
.pg-institutional .lg-r.back{animation:institutional-ev-back .5s var(--ease) both}
@keyframes institutional-ev-back{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pg-institutional .log-foot{position:relative;display:flex;justify-content:space-between;gap:12px;padding:14px 22px;font-size:13px;color:rgba(255,255,255,.5)}
/* today and next */
.pg-institutional .tn .kc ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.pg-institutional .tn .kc li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:15.5px;line-height:1.45;color:var(--grey)}
.pg-institutional .tn .kc li::before{content:"";width:8px;height:8px;margin-top:7px;background:var(--blue)}
.pg-institutional .tn .kc.next li::before{background:#C9CBD6}
.pg-institutional .tn .kc h3{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* the closing card: on its black background, a field of squares on the right that a check sweeps across */
.pg-institutional .cta-fx{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
@media (max-width:1060px){
  .pg-institutional .pc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pg-institutional .lg-h{display:none}
  .pg-institutional .log-top{padding-inline:16px}
  .pg-institutional .log-live{font-size:11.5px}
  .pg-institutional .lg-r{grid-template-columns:auto minmax(0,1fr);gap:6px 12px}
  .pg-institutional .lg-r .t{grid-column:2;grid-row:1;justify-self:end}
  .pg-institutional .lg-r > :nth-child(n+3){grid-column:1/-1}
  .pg-institutional .wt th,.pg-institutional .wt td{padding-inline:2px}
  .pg-institutional .wt th:first-child,.pg-institutional .wt td:first-child{padding-left:16px}
  .pg-institutional .st small{white-space:normal}
  .pg-institutional .rule,.pg-institutional .why,.pg-institutional .tt,.pg-institutional .pn-h{padding-inline:16px}
  .pg-institutional .pipe,.pg-institutional .out{margin-inline:16px}
  .pg-institutional .tt-go{padding-inline:16px}
  .pg-institutional .tt .seg button{font-size:13px;padding:0 4px}
}

/* ===== 4. payments ===== */
/* the hero copy runs wider here, so the headline takes three lines and the text three, not four and four; each
   sentence of the headline starts a line, and the second is balanced so it never leaves one word alone */
@media (min-width:761px){
  .pg-payments .ph .copy{max-width:max(620px,min(800px,56vw))}
  .pg-payments .ph .copy p{max-width:620px}
  .pg-payments .ph h1 .l{display:block;text-wrap:balance}
}
/* Payments: one checkout seen three ways (customer, merchant, everyone else). The three columns are one height: the
   phone sets it, and the two panels stretch to it, showing as many payments as fit */
.pg-payments .views{position:relative;display:grid;grid-template-columns:280px minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.pg-payments .views > div{display:flex;flex-direction:column;min-width:0}
.pg-payments .vh{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--grey)}
.pg-payments .vh i{width:8px;height:8px;background:var(--blue)}
.pg-payments .vh.k i{background:var(--ink)}
.pg-payments .vh.g i{background:#C9CBD6}
/* the phone: a thin frame with side buttons, a status bar, the shop's checkout and a home bar */
.pg-payments .phone{position:relative;padding:9px;border-radius:46px;background:#0B0B12;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 30px 60px -30px rgba(11,11,18,.5)}
.pg-payments .phone::before{content:"";position:absolute;right:-3px;top:132px;width:3px;height:62px;border-radius:0 3px 3px 0;background:#23242E}
.pg-payments .phone::after{content:"";position:absolute;left:-3px;top:104px;width:3px;height:38px;border-radius:3px 0 0 3px;background:#23242E;box-shadow:0 50px 0 #23242E}
.pg-payments .scr{display:flex;flex-direction:column;gap:9px;padding:4px 14px 7px;border-radius:37px;background:#fff;overflow:hidden}
.pg-payments .sb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:28px;padding:0 12px;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pg-payments .sb .isl{width:70px;height:20px;border-radius:99px;background:#0B0B12}
.pg-payments .sb-ic{display:flex;justify-content:flex-end;align-items:center;gap:4px}
.pg-payments .sb-ic svg{display:block;height:8.5px;width:auto;fill:var(--ink)}
.pg-payments .bat{position:relative;width:19px;height:9.5px;margin-right:2px;padding:1.4px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(11,11,18,.42)}
.pg-payments .bat::after{content:"";position:absolute;right:-2.3px;top:3px;width:1.4px;height:3.5px;border-radius:0 1px 1px 0;background:rgba(11,11,18,.42)}
.pg-payments .bat i{display:block;width:76%;height:100%;border-radius:1.5px;background:var(--ink)}
.pg-payments .ah{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:10px;align-items:center;padding:0 2px}
.pg-payments .ah .lg{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-family:var(--display);font-size:17px;font-weight:600}
.pg-payments .ah b{display:block;font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.pg-payments .ah small{display:block;font-size:12px;color:var(--grey)}
.pg-payments .bag{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mist)}
.pg-payments .bag svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-payments .bag em{position:absolute;top:-3px;right:-3px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--blue);color:#fff;font-size:10.5px;font-style:normal;font-weight:700}
.pg-payments .prods{display:grid;gap:6px}
.pg-payments .prod{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:7px 12px 7px 7px;border:0;border-radius:14px;background:var(--mist);font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s,background .2s}
.pg-payments .prod:hover{background:#ECEDF3}
.pg-payments .prod:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pg-payments .prod[aria-checked="true"]{background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue)}
.pg-payments .prod .pic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--blue)}
.pg-payments .prod[aria-checked="true"] .pic{background:var(--blue-soft)}
.pg-payments .prod .pic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pg-payments .prod b{display:block;font-size:14px}
.pg-payments .prod small{font-size:11.5px;color:var(--grey)}
.pg-payments .prod .pr{font-family:var(--mono);font-size:13.5px;font-weight:500}
.pg-payments .pw{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 12px 7px 9px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.pg-payments .pw .tk{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue)}
.pg-payments .pw .tk i{width:10px;height:10px;background:#fff}
.pg-payments .pw b{display:block;font-size:13.5px}
.pg-payments .pw small{display:block;font-size:11.5px;color:var(--grey)}
.pg-payments .pw svg{width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-payments .tot{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px;font-size:14px;color:var(--grey)}
.pg-payments .tot b{font-family:var(--display);font-size:22px;line-height:1.2;color:var(--ink)}
.pg-payments .pay{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;height:46px;border:0;border-radius:14px;background:var(--blue);color:#fff;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;transition:background .2s,transform .15s}
.pg-payments .pay:hover{background:var(--blue-deep)}
.pg-payments .pay:active{transform:scale(.98)}
.pg-payments .pay:disabled{cursor:default;transform:none}
.pg-payments .pay.busy,.pg-payments .pay.busy:hover{background:var(--blue)}
.pg-payments .pay.busy::before{content:"";width:9px;height:9px;background:#fff;animation:payments-pay-turn .9s cubic-bezier(.6,0,.3,1) infinite}
@keyframes payments-pay-turn{to{transform:rotate(180deg)}}
.pg-payments .pay.done,.pg-payments .pay.done:hover{background:var(--ink)}
.pg-payments .pay svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pg-payments .steps{display:grid;gap:4px;margin:0;padding:0 2px;list-style:none}
.pg-payments .steps li{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--grey-2);transition:color .3s}
.pg-payments .steps li::before{content:"";flex:none;width:9px;height:9px;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .3s}
.pg-payments .steps li.on{color:var(--ink)}
.pg-payments .steps li.on::before{background:var(--blue);box-shadow:none}
.pg-payments .hb{align-self:center;width:108px;height:4.5px;margin-top:2px;border-radius:99px;background:var(--ink)}
/* the shop's and the explorer's panels: the same parts in the same places, so they line up row for row */
.pg-payments .pn{flex:1;display:flex;flex-direction:column;border-radius:24px;background:var(--paper);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.pg-payments .pn-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--grey)}
.pg-payments .pn-h b{color:var(--ink);font-size:15px}
.pg-payments .bal{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.pg-payments .bal div{display:grid;gap:2px;align-content:start;padding:14px 20px}
.pg-payments .bal div + div{border-left:1px solid var(--line)}
.pg-payments .bal span{font-size:12.5px;color:var(--grey)}
.pg-payments .bal b{font-family:var(--display);font-size:26px;line-height:1.25;letter-spacing:-.02em}
.pg-payments .bal b.cph{font-family:var(--mono);font-size:18px;font-weight:500;line-height:32.5px;letter-spacing:0;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-payments .bal .pend b{color:var(--grey-2)}
.pg-payments .bal .pend.has b{color:var(--blue)}
.pg-payments .cph.flip{animation:payments-cph-flip .9s var(--ease)}
@keyframes payments-cph-flip{0%{color:#8F90FF;opacity:.4}40%{opacity:1}100%{color:rgba(255,255,255,.85)}}
.pg-payments .apply{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:54px;padding:10px 20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--grey)}
.pg-payments .apply button{flex:none;height:34px;padding:0 14px;border:0;border-radius:99px;background:var(--ink);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s}
.pg-payments .apply button:hover{background:var(--blue)}
.pg-payments .apply button:disabled{background:#E3E4EC;color:var(--grey-2);cursor:default}
.pg-payments .apply .tag{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.7)}
.pg-payments .rows{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pg-payments .row{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-content:center;padding:10px 20px;font-size:14.5px}
.pg-payments .row + .row{border-top:1px solid var(--line)}
.pg-payments .row small{grid-column:1;font-family:var(--mono);font-size:12px;color:var(--grey-2)}
.pg-payments .row .a{grid-row:1/3;grid-column:2;align-self:center;font-family:var(--mono);font-size:14px;font-weight:500}
.pg-payments .row .a.in{color:#0A7A4B}
.pg-payments .row .a.c{color:var(--grey-2);font-weight:400}
.pg-payments .row.new{animation:payments-row-in 1s var(--ease)}
@keyframes payments-row-in{0%{opacity:0;transform:translateY(-8px);background:var(--blue-soft)}40%{opacity:1;transform:none}100%{background:transparent}}
.pg-payments .pn-f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line);font-size:13px;color:var(--grey)}
.pg-payments .pn-f b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink)}
.pg-payments .pn.night{background:var(--night);color:#fff;box-shadow:none}
.pg-payments .pn.night .pn-h,.pg-payments .pn.night .bal,.pg-payments .pn.night .bal div + div,.pg-payments .pn.night .apply,.pg-payments .pn.night .pn-f{border-color:rgba(255,255,255,.1)}
.pg-payments .pn.night .pn-h,.pg-payments .pn.night .bal span,.pg-payments .pn.night .apply,.pg-payments .pn.night .pn-f{color:rgba(255,255,255,.55)}
.pg-payments .pn.night .pn-h b,.pg-payments .pn.night .pn-f b{color:#fff}
.pg-payments .pn.night .row + .row{border-color:rgba(255,255,255,.08)}
.pg-payments .pn.night .row small{color:rgba(255,255,255,.45)}
.pg-payments .pn.night .row .a.c{color:rgba(255,255,255,.5)}
.pg-payments .pn.night .row.new{animation-name:payments-row-in-d}
@keyframes payments-row-in-d{0%{opacity:0;transform:translateY(-8px);background:rgba(72,74,255,.35)}40%{opacity:1;transform:none}100%{background:transparent}}
.pg-payments .fly{position:absolute;left:0;top:0;width:12px;height:12px;background:var(--blue);z-index:3;pointer-events:none}
/* the five transactions */
.pg-payments .tx5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:8px}
.pg-payments .tx{position:relative;display:grid;gap:10px;align-content:start;padding:22px 20px 24px;border-radius:20px;background:var(--night-2);opacity:.25;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pg-payments .tx.in{opacity:1;transform:none}
.pg-payments .tx .n{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5)}
.pg-payments .tx b{font-size:17px}
.pg-payments .tx p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.62)}
.pg-payments .tx.t{background:var(--blue)}
.pg-payments .tx.t p{color:rgba(255,255,255,.82)}
.pg-payments .sig{display:flex;align-items:center;gap:14px;margin-top:22px;padding:18px 22px;border-radius:18px;background:rgba(255,255,255,.06);font-size:15px;color:rgba(255,255,255,.75)}
.pg-payments .sig b{color:#fff}
.pg-payments .sig .ki{margin:0}
/* eUSD at the checkout: the receipt of the latest payment in the demo above */
.pg-payments .rc{border-radius:22px;background:var(--night);color:#fff;overflow:hidden}
.pg-payments .rc-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13.5px;color:rgba(255,255,255,.55)}
.pg-payments .rc-h b{color:#fff;font-size:15px}
.pg-payments .rc-ok{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:99px;background:rgba(72,74,255,.42);color:#fff;font-size:12.5px;font-weight:600}
.pg-payments .rc-ok i{width:7px;height:7px;background:#fff}
.pg-payments .rc-amt{padding:24px 22px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.pg-payments .rc-amt b{display:block;font-family:var(--display);font-size:clamp(40px,4.4vw,52px);line-height:1;letter-spacing:-.03em}
.pg-payments .rc-amt > span{display:block;margin-top:10px;font-size:14px;color:rgba(255,255,255,.55)}
.pg-payments .rc dl{margin:0}
.pg-payments .rc dl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:13px 22px;border-bottom:1px solid rgba(255,255,255,.08);font-size:14.5px}
.pg-payments .rc dt{color:rgba(255,255,255,.55)}
.pg-payments .rc dd{margin:0;text-align:right}
.pg-payments .rc dd.m{font-family:var(--mono);font-size:13.5px;color:rgba(255,255,255,.75)}
.pg-payments .rc-f{padding:14px 22px 16px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.45)}
.pg-payments .rc .flash{animation:payments-rc-flash 1s var(--ease)}
@keyframes payments-rc-flash{0%{color:#8F90FF}100%{color:inherit}}
.pg-payments .split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.pg-payments .split ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.pg-payments .split li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:16px;color:var(--grey)}
.pg-payments .split li::before{content:"";width:8px;height:8px;margin-top:8px;background:var(--blue)}
@media (max-width:1100px){
  .pg-payments .views{grid-template-columns:280px minmax(0,1fr)}
  .pg-payments .views > :nth-child(3){grid-column:1/-1}
  .pg-payments .views > :nth-child(3) .rows,.pg-payments .views > :nth-child(3) .row{flex:none}
}
@media (max-width:960px){
  .pg-payments .tx5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-payments .tx5 .tx:last-child{grid-column:1/-1}
  .pg-payments .split{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:760px){
  .pg-payments .rows,.pg-payments .row{flex:none}
  .pg-payments .pn-h span{text-align:right}
  .pg-payments .views{grid-template-columns:minmax(0,1fr)}
  .pg-payments .phone{max-width:300px;width:100%;align-self:center}
  .pg-payments .tx5{grid-template-columns:minmax(0,1fr)}
  .pg-payments .rc-h,.pg-payments .rc-amt,.pg-payments .rc dl div,.pg-payments .rc-f{padding-inline:18px}
  .pg-payments .rc dl div{gap:12px}
  .pg-payments .pn-h b{white-space:nowrap}
  .pg-payments .pn-h span{font-size:12.5px}
}

/* ===== 4. privacy ===== */
/* Privacy: the policy with a sticky contents list that follows your reading, and a progress line */
.pg-privacy .lg{display:grid;grid-template-columns:270px minmax(0,1fr);gap:64px;align-items:start}
.pg-privacy .toc{position:sticky;top:100px;display:grid;gap:18px}
.pg-privacy .toc .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.pg-privacy .toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.pg-privacy .toc a{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;padding:9px 12px;border-radius:10px;font-size:14.5px;line-height:1.35;color:var(--grey);transition:background .2s,color .2s}
.pg-privacy .toc a::before{counter-increment:t;content:counter(t);font-family:var(--mono);font-size:12px;color:var(--grey-2);padding-top:1px}
.pg-privacy .toc a:hover{background:var(--mist);color:var(--ink)}
.pg-privacy .toc a.on{background:var(--ink);color:#fff}
.pg-privacy .toc a.on::before{color:rgba(255,255,255,.6)}
.pg-privacy .prog{display:grid;gap:8px}
.pg-privacy .prog .bar{position:relative;height:4px;background:var(--mist);overflow:hidden}
.pg-privacy .prog .bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--blue)}
.pg-privacy .prog span{font-family:var(--mono);font-size:12px;color:var(--grey)}
.pg-privacy .doc{max-width:760px}
.pg-privacy .doc .upd{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:99px;background:var(--mist);font-family:var(--mono);font-size:12.5px;color:var(--grey)}
.pg-privacy .doc .intro{margin:22px 0 10px;font-size:20px;line-height:1.55;color:var(--ink)}
.pg-privacy .doc section{padding-top:44px;scroll-margin-top:90px}
.pg-privacy .doc h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em}
.pg-privacy .doc h2 .n{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--blue)}
.pg-privacy .doc h2 .cp{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--grey-2);cursor:pointer;opacity:0;transition:opacity .2s,background .2s}
.pg-privacy .doc section:hover .cp,.pg-privacy .doc .cp:focus-visible{opacity:1}
.pg-privacy .doc .cp:hover{background:var(--mist);color:var(--ink)}
.pg-privacy .doc .cp svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-privacy .doc h3{margin-top:24px;font-size:18px}
.pg-privacy .doc p,.pg-privacy .doc li{font-size:16.5px;line-height:1.7;color:#3A3D4A}
.pg-privacy .doc p{margin-top:12px}
.pg-privacy .doc ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.pg-privacy .doc li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px}
.pg-privacy .doc li::before{content:"";width:6px;height:6px;margin-top:11px;background:var(--blue)}
.pg-privacy .doc a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.pg-privacy .doc .box{margin-top:16px;padding:18px 20px;border-radius:14px;background:var(--mist);font-size:15.5px;line-height:1.6}
.pg-privacy .doc .box b{display:block}
.pg-privacy .doc .basis{margin-top:12px;padding-left:14px;border-left:3px solid var(--blue);font-size:15px;color:var(--grey)}
.pg-privacy .toast{position:fixed;left:50%;bottom:28px;translate:-50% 20px;z-index:60;padding:12px 18px;border-radius:99px;background:var(--ink);color:#fff;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,translate .35s var(--ease)}
.pg-privacy .toast.on{opacity:1;translate:-50% 0}
@media (max-width:960px){
  .pg-privacy .lg{grid-template-columns:minmax(0,1fr);gap:24px}
  .pg-privacy .toc{position:static}
  .pg-privacy .toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .pg-privacy .toc ol{grid-template-columns:minmax(0,1fr)}
  .pg-privacy .doc .intro{font-size:18px}
}

/* ===== 4. roadmap ===== */
/* Roadmap: one vertical line of small squares down the left side, with the milestone cards beside it, one under
   the other. Each milestone is a 3 x 3 block of squares on the line, level with its card's status row, as on the
   homepage's roadmap. The line is blue up to the milestone under way. On wide screens a card sets its text on the
   left and its list on the right; the text stays at the top however long the list is. */
.pg-roadmap .road9{--gut:64px;position:relative;margin-top:20px}
.pg-roadmap .road9 canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
/* an item shows its own status only where it differs from its milestone's (a Next item in a planned milestone) */
/* cards: white on white, held by a hairline and a long soft shadow; the one under way gets a blue edge. They rise into
   place as they scroll in. */
.pg-roadmap .mc{position:absolute;left:var(--gut);right:0;padding:44px 48px 40px;border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--line),0 50px 90px -70px rgba(11,11,18,.45);opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pg-roadmap .mc.in{opacity:1;transform:none}
.pg-roadmap .mc.now{box-shadow:0 0 0 1.5px var(--blue),0 50px 90px -60px rgba(19,21,255,.5)}
.pg-roadmap .mc .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.pg-roadmap .mc .meta{display:grid;gap:12px}
.pg-roadmap .mc .stt{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.pg-roadmap .mc .stt i{width:9px;height:9px;background:#fff;box-shadow:inset 0 0 0 1.5px #B9BCCD}
.pg-roadmap .mc.done .stt{color:var(--blue)}
.pg-roadmap .mc.done .stt i{background:var(--blue);box-shadow:none}
.pg-roadmap .mc.now .stt{color:var(--ink)}
.pg-roadmap .mc.now .stt i{background:var(--blue);box-shadow:none;animation:tag-blink 1.2s steps(2,end) infinite}
.pg-roadmap .mc .yr{font-family:var(--mono);font-size:13.5px;color:var(--grey);font-variant-numeric:tabular-nums}
.pg-roadmap .mc .no{font-family:var(--display);font-size:clamp(48px,4.6vw,72px);font-weight:600;letter-spacing:-.05em;line-height:.8;color:#ECEEF5}
.pg-roadmap .mc.done .no,.pg-roadmap .mc.now .no{color:#E4E5FF}
.pg-roadmap .mc h3{margin-top:22px;font-size:clamp(26px,2.5vw,36px);letter-spacing:-.025em;line-height:1.08}
.pg-roadmap .mc > p{margin-top:14px;max-width:620px;font-size:17px;line-height:1.6;color:var(--grey)}
.pg-roadmap .mc ul{list-style:none;margin:28px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.pg-roadmap .mc li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink)}
.pg-roadmap .mc li:last-child{border-bottom:0;padding-bottom:0}
.pg-roadmap .mc li i{width:8px;height:8px;translate:0 -1px;background:#fff;box-shadow:inset 0 0 0 1.5px #B9BCCD}
.pg-roadmap .mc li i.done{background:var(--blue);box-shadow:none}
.pg-roadmap .mc li i.next{background:var(--ink);box-shadow:none}
.pg-roadmap .mc li em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2,#9A9DAD);white-space:nowrap}
.pg-roadmap .mc li em.done{color:var(--blue)}
@media (min-width:1000px){
  .pg-roadmap .mc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;column-gap:64px;align-items:start}
  .pg-roadmap .mc .hd,.pg-roadmap .mc h3,.pg-roadmap .mc > p{grid-column:1}
  .pg-roadmap .mc ul{grid-column:2;grid-row:1 / span 3;margin-top:-2px;border-top:0}
  .pg-roadmap .mc li:first-child{padding-top:0}
}
@media (max-width:1060px){
  .pg-roadmap .road9{--gut:52px}
  .pg-roadmap .mc{padding:36px 36px 34px}
}
@media (max-width:760px){
  .pg-roadmap .road9{--gut:34px}
  .pg-roadmap .mc{padding:26px 22px 24px;border-radius:22px}
  .pg-roadmap .mc h3{margin-top:16px;font-size:23px}
  .pg-roadmap .mc > p{font-size:15.5px}
  .pg-roadmap .mc ul{margin-top:20px}
  .pg-roadmap .mc li{grid-template-columns:8px minmax(0,1fr);gap:12px;font-size:14.5px;padding:12px 0}
  .pg-roadmap .mc li em{display:none}
  .pg-roadmap .mc .no{font-size:42px}
}

/* ===== 4. social ===== */
/* Social: what a stranger can work out from one person's public payments, then the same with amounts encrypted */
.pg-social .lisa{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px}
.pg-social .panel{border-radius:24px;background:var(--paper);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.pg-social .panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);font-size:14px;color:var(--grey)}
.pg-social .panel-h b{color:var(--ink);font-size:15px}
.pg-social .pay{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line)}
.pg-social .pay:last-child{border-bottom:0}
.pg-social .pay .av{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mist);color:var(--ink)}
.pg-social .pay .av svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pg-social .pay b{display:block;font-size:15.5px}
.pg-social .pay small{display:block;font-family:var(--mono);font-size:12.5px;color:var(--grey-2)}
.pg-social .pay .am{font-family:var(--mono);font-size:15px;font-weight:500;white-space:nowrap}
.pg-social .pay .am.in{color:#0A7A4B}
.pg-social .pay .am.c{color:var(--grey-2);font-weight:400;letter-spacing:.02em}
.pg-social .infer{list-style:none;margin:0;padding:8px 0}
.pg-social .infer li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:12px 22px;font-size:16px;line-height:1.45;transition:color .4s,opacity .4s}
.pg-social .infer li::before{content:"";width:10px;height:10px;margin-top:6px;background:var(--blue);transition:background .4s}
.pg-social .infer li.gone{color:var(--grey-2)}
.pg-social .infer li.gone span{text-decoration:line-through;text-decoration-thickness:1.5px}
.pg-social .infer li.gone::before{background:#DADCE6}
.pg-social .infer li.kept::before{background:#E8A23A}
.pg-social .score{display:flex;align-items:baseline;gap:10px;padding:18px 22px;border-top:1px solid var(--line);font-size:15px;color:var(--grey)}
.pg-social .score b{font-family:var(--display);font-size:30px;color:var(--ink);letter-spacing:-.02em}
.pg-social .lisa-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
/* three boxes: hidden / public / on lawful request */
.pg-social .tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pg-social .tri .kc ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:16px;color:rgba(255,255,255,.8)}
.pg-social .tri .kc li{display:flex;gap:10px;align-items:center}
.pg-social .tri .kc li::before{content:"";width:8px;height:8px;background:currentColor;opacity:.6}
@media (max-width:960px){
  .pg-social .lisa,.pg-social .tri{grid-template-columns:minmax(0,1fr)}
}

/* ===== 4. solutions-forex ===== */
/* Forex: two gauges for MiCA's cap on non-euro tokens */
.pg-solutions-forex .cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:stretch}
.pg-solutions-forex .gg{display:grid;gap:14px;justify-items:center;padding:28px 24px 26px;border-radius:24px;background:var(--mist)}
.pg-solutions-forex .gg svg{width:100%;max-width:260px;height:auto;overflow:visible}
.pg-solutions-forex .gg .trk{fill:none;stroke:#E3E4EC;stroke-width:18}
.pg-solutions-forex .gg .val{fill:none;stroke:var(--blue);stroke-width:18;transition:stroke .3s}
.pg-solutions-forex .gg.over .val{stroke:#E5484D}
.pg-solutions-forex .gg .thr{stroke:var(--ink);stroke-width:3;transition:opacity .3s}
.pg-solutions-forex .gg .thr-t{font-family:var(--mono);font-size:11px;fill:var(--grey)}
.pg-solutions-forex .gg .big{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.02em;fill:var(--ink)}
.pg-solutions-forex .gg .sub{font-size:13px;fill:var(--grey)}
.pg-solutions-forex .gg label{font-size:13px;font-weight:600;color:var(--grey)}
.pg-solutions-forex .gg input{width:100%;accent-color:var(--blue)}
.pg-solutions-forex .cap.euro .thr,.pg-solutions-forex .cap.euro .thr-t{opacity:0}
.pg-solutions-forex .cap.euro .gg .val{stroke:var(--blue)}
.pg-solutions-forex .st{display:flex;flex-direction:column;gap:16px;padding:30px 28px;border-radius:24px;background:var(--night);color:#fff;transition:background .4s}
.pg-solutions-forex .st .seg{align-self:flex-start}
.pg-solutions-forex .st h3{font-size:24px;letter-spacing:-.02em;line-height:1.2}
.pg-solutions-forex .st p{font-size:15.5px;color:rgba(255,255,255,.7)}
.pg-solutions-forex .st .lamp{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.pg-solutions-forex .st .lamp i{width:10px;height:10px;background:#8F90FF}
.pg-solutions-forex .st.warn{background:#3A0F14}
.pg-solutions-forex .st.warn .lamp i{background:#FF6B70;animation:tag-blink 1s steps(2,end) infinite}
.pg-solutions-forex .st.half .lamp i{background:#E8A23A}
.pg-solutions-forex .st .art{margin-top:auto;font-size:13px;color:rgba(255,255,255,.45)}
.pg-solutions-forex .vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.pg-solutions-forex .vs .kc{gap:0;padding:0;overflow:hidden}
.pg-solutions-forex .vs .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 26px;border-bottom:1px solid var(--line)}
.pg-solutions-forex .vs .hd b{font-family:var(--display);font-size:24px;letter-spacing:-.02em}
.pg-solutions-forex .vs dl{margin:0;padding:6px 26px 14px}
.pg-solutions-forex .vs dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.pg-solutions-forex .vs dl div:last-child{border-bottom:0}
.pg-solutions-forex .vs dt{color:var(--grey)}
.pg-solutions-forex .vs dd{margin:0}
@media (max-width:1060px){
  .pg-solutions-forex .cap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pg-solutions-forex .cap .st{grid-column:1/-1}
}
@media (max-width:760px){
  .pg-solutions-forex .cap,.pg-solutions-forex .vs{grid-template-columns:minmax(0,1fr)}
  .pg-solutions-forex .vs dl div{grid-template-columns:96px minmax(0,1fr)}
}

/* ===== 4. trading ===== */
/* Trading: an exchange in a browser window, framed like the explorer on the eUSD page. Pick a pair (BTC/eUSD or
   BTC/public stablecoin), a side and a size; the collateral has to reach the exchange on-chain first. A public amount
   gets posted and the market moves before the order fills; an encrypted one does not. Either way the order itself moves
   the price as it walks the book. The exchange's own book and trades look the same with any stablecoin. */
.pg-trading .px{--x-l:#242424;--x-p:#1A1A1A;--x-d:#8C8C8C;--x-d2:#5E5E5E;--x-g:#25A750;--x-g2:#2FC463;--x-r:#E5484D;--x-r2:#FF6B70;border-radius:18px;background:#000;color:#fff;font-size:13px;font-variant-numeric:tabular-nums;overflow:hidden;box-shadow:0 0 0 1px rgba(11,11,18,.14),0 40px 80px -36px rgba(11,11,18,.5)}
.pg-trading .px-bar{display:flex;align-items:center;gap:14px;height:42px;padding:0 16px;background:#141414;border-bottom:1px solid var(--x-l)}
.pg-trading .px-dots{display:flex;gap:7px}
.pg-trading .px-dots i{width:11px;height:11px;border-radius:50%;background:#2E2E2E}
.pg-trading .px-url{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;max-width:460px;height:26px;margin:0 auto;padding:0 12px;border-radius:99px;background:#0A0A0A;color:var(--x-d);font-family:var(--mono);font-size:12px;white-space:nowrap;overflow:hidden}
.pg-trading .px-url span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-trading .px-url svg,.pg-trading .px-search svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.pg-trading .px-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--x-d2)}
.pg-trading .px-nav{display:flex;align-items:center;gap:26px;height:56px;padding:0 22px;border-bottom:1px solid var(--x-l)}
.pg-trading .px-logo{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.pg-trading .px-logo i{width:14px;height:14px;background:#fff}
.pg-trading .px-tabs{display:flex;align-self:stretch;gap:24px}
.pg-trading .px-tabs button{position:relative;display:flex;align-items:center;gap:7px;padding:0;border:0;background:none;color:var(--x-d);font:500 14px var(--text);cursor:pointer;transition:color .2s}
.pg-trading .px-tabs button:hover,.pg-trading .px-tabs button[aria-pressed="true"]{color:#fff}
.pg-trading .px-tabs button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff}
.pg-trading .px-tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pg-trading .px-tabs .nb{width:7px;height:7px;border-radius:50%;background:var(--x-g);opacity:0;transition:opacity .3s}
.pg-trading .px-tabs .nb.on{opacity:1}
.pg-trading .px-search{display:flex;align-items:center;gap:8px;width:260px;height:34px;margin-left:auto;padding:0 14px;border-radius:99px;background:var(--x-p);color:var(--x-d2);font-size:13px}
.pg-trading .px-tok{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;padding:14px 22px;border-bottom:1px solid var(--x-l)}
.pg-trading .px-sw{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--x-p)}
.pg-trading .px-sw button{height:34px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:var(--x-d);font:600 14px var(--text);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.pg-trading .px-sw button:hover{color:#fff}
.pg-trading .px-sw button[aria-pressed="true"]{background:#fff;color:#000}
.pg-trading .px-sw button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pg-trading .ex-px{display:grid;gap:1px}
.pg-trading .ex-px b{font-size:20px;font-weight:700;line-height:1.2;transition:color .3s}
.pg-trading .ex-px b.up{color:var(--x-g)}
.pg-trading .ex-px b.dn{color:var(--x-r2)}
.pg-trading .ex-px small{color:var(--x-d);font-size:12px}
.pg-trading .ex-st{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0}
.pg-trading .ex-st div{display:grid;gap:3px}
.pg-trading .ex-st dt{color:var(--x-d);font-size:12px}
.pg-trading .ex-st dd{margin:0;font-size:13.5px;font-weight:600;white-space:nowrap}
.pg-trading .ex-st dd.pub{color:var(--x-r2)}
.pg-trading .ex-st dd.enc{color:#B9BAFF}
/* the two views: Chart (chart, book, order form) and Trades (on-chain transfers and your fills); one height, so
   switching tabs or views never stretches anything */
.pg-trading .ex-v{display:grid;grid-template-columns:minmax(0,1fr) 262px 272px;height:500px}
.pg-trading .ex-v[hidden],.pg-trading .ex-t[hidden]{display:none}
.pg-trading .ex-t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:500px}
/* chart */
.pg-trading .ex-ch{position:relative;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--x-l)}
.pg-trading .ex-lg{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 14px 0;font-family:var(--mono);font-size:11.5px;color:var(--x-d)}
.pg-trading .ex-lg b{font-weight:500}
.pg-trading .ex-lg .m7{color:#E8B04B}
.pg-trading .ex-lg .m25{color:#C9C9C9}
.pg-trading .ex-ch canvas{display:block;width:100%;flex:1;min-height:0}
.pg-trading .toast{position:absolute;left:14px;top:40px;z-index:2;display:grid;gap:4px;max-width:min(380px,calc(100% - 92px));padding:11px 14px;border-radius:12px;background:rgba(26,26,26,.95);box-shadow:inset 0 0 0 1px #333;font-size:13px;line-height:1.4;color:#C9C9C9;opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s var(--ease);pointer-events:none}
.pg-trading .toast.on{opacity:1;transform:none}
.pg-trading .toast b{color:#fff}
.pg-trading .toast small{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--x-d)}
.pg-trading .toast small i{width:7px;height:7px;background:currentColor}
.pg-trading .toast.loud{background:rgba(48,14,18,.96);box-shadow:inset 0 0 0 1px rgba(255,107,112,.5)}
.pg-trading .toast.loud small{color:var(--x-r2)}
/* order book and recent trades */
.pg-trading .ex-bk{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--x-l)}
.pg-trading .ex-tabs{display:flex;gap:18px;padding:0 14px;border-bottom:1px solid var(--x-l)}
.pg-trading .ex-tabs button{position:relative;height:40px;padding:0;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--x-d);cursor:pointer}
.pg-trading .ex-tabs button[aria-selected="true"]{color:#fff}
.pg-trading .ex-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff}
.pg-trading .ex-pane{flex:1;min-height:0;overflow:hidden}
.pg-trading .ob-h,.pg-trading .ob{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:6px;padding:0 14px}
.pg-trading .ob-h{height:30px;align-items:center;font-size:11px;color:var(--x-d2)}
.pg-trading .ob-h span + span,.pg-trading .ob span + span{text-align:right}
.pg-trading .ob{position:relative;height:21px;align-items:center;font-family:var(--mono);font-size:12px}
.pg-trading .ob i{position:absolute;right:0;top:1px;bottom:1px;z-index:0;transition:width .35s}
.pg-trading .ob span{position:relative;z-index:1}
.pg-trading .ob.a span:first-of-type{color:var(--x-r2)}
.pg-trading .ob.a i{background:rgba(229,72,77,.16)}
.pg-trading .ob.b span:first-of-type{color:var(--x-g2)}
.pg-trading .ob.b i{background:rgba(37,167,80,.18)}
.pg-trading .ob.gone{opacity:.25}
.pg-trading .ob span:nth-of-type(3){color:var(--x-d)}
.pg-trading .mid{display:flex;align-items:baseline;gap:8px;padding:8px 14px;font-family:var(--mono)}
.pg-trading .mid b{font-size:17px;font-weight:500}
.pg-trading .mid b.up{color:var(--x-g2)}
.pg-trading .mid b.dn{color:var(--x-r2)}
.pg-trading .mid small{font-size:11.5px;color:var(--x-d)}
.pg-trading .tr{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:6px;height:22px;padding:0 14px;align-items:center;font-family:var(--mono);font-size:12px}
.pg-trading .tr span + span{text-align:right}
.pg-trading .tr span:nth-child(3){color:var(--x-d)}
.pg-trading .tr.b span:first-child{color:var(--x-g2)}
.pg-trading .tr.s span:first-child{color:var(--x-r2)}
.pg-trading .tr.me{background:rgba(37,167,80,.24)}
.pg-trading .tr.me.s{background:rgba(229,72,77,.22)}
.pg-trading .tr.me span:nth-child(3){color:#fff}
.pg-trading .tr.new{animation:trading-tr-in .6s var(--ease)}
@keyframes trading-tr-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* the order form */
.pg-trading .ex-fm{display:flex;flex-direction:column;gap:12px;padding:14px;min-width:0}
.pg-trading .ex-fm .px-sw button{flex:1}
.pg-trading .ex-fm .side button[aria-pressed="true"]{color:#fff}
.pg-trading .ex-fm .side button[data-v="long"][aria-pressed="true"]{background:var(--x-g)}
.pg-trading .ex-fm .side button[data-v="short"][aria-pressed="true"]{background:var(--x-r)}
.pg-trading .fm-l{display:grid;gap:7px}
.pg-trading .fm-l > span{font-size:12px;font-weight:600;color:var(--x-d)}
.pg-trading .fm-sum{display:grid;gap:6px;font-size:12.5px;color:var(--x-d)}
.pg-trading .fm-sum div{display:flex;justify-content:space-between;gap:10px}
.pg-trading .fm-sum b{font-family:var(--mono);font-size:12.5px;font-weight:500;color:#fff;text-align:right}
.pg-trading .fm-sum b.pub{color:var(--x-r2)}
.pg-trading .fm-sum b.enc{color:#B9BAFF}
.pg-trading .go{flex:none;height:44px;border:0;border-radius:10px;background:var(--x-g);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,opacity .2s}
.pg-trading .go.short{background:var(--x-r)}
.pg-trading .go:hover{filter:brightness(1.08)}
.pg-trading .go:disabled{opacity:.55;cursor:default;filter:none}
.pg-trading .fm-steps{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.pg-trading .fm-steps li{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--x-d2);transition:color .3s}
.pg-trading .fm-steps li::before{content:"";flex:none;width:8px;height:8px;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .3s}
.pg-trading .fm-steps li.on{color:#fff}
.pg-trading .fm-steps li.on::before{background:var(--x-g);box-shadow:none}
.pg-trading .res{display:none;padding:11px 12px;border-radius:10px;font-size:12.5px;line-height:1.45}
.pg-trading .res.on{display:block;animation:trading-tr-in .5s var(--ease)}
.pg-trading .res.ok{background:rgba(37,167,80,.16);color:#BFE8CC}
.pg-trading .res.bad{background:rgba(229,72,77,.16);color:#FFC4C6}
.pg-trading .res b{color:#fff}
/* the Trades view: on-chain transfers to the exchange, and your fills */
.pg-trading .ex-t > div{display:flex;flex-direction:column;min-width:0}
.pg-trading .ex-t > div + div{border-left:1px solid var(--x-l)}
.pg-trading .ft-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 22px 10px;border-bottom:1px solid var(--x-l)}
.pg-trading .ft-h b{font-size:15px}
.pg-trading .ft-h small{color:var(--x-d);font-size:12px;text-align:right}
.pg-trading .ft-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 22px;border-bottom:1px solid #151515;font-size:13.5px}
.pg-trading .ft-r small{grid-column:1;font-family:var(--mono);font-size:11.5px;color:var(--x-d)}
.pg-trading .ft-r .v{grid-row:1/3;grid-column:2;align-self:center;display:grid;justify-items:end;gap:2px;font-family:var(--mono);font-size:13px}
.pg-trading .ft-r .v em{font-style:normal;font-family:var(--text);font-size:11.5px;font-weight:600}
.pg-trading .ft-r .v.pub{color:#fff}
.pg-trading .ft-r .v.pub em{color:var(--x-r2)}
.pg-trading .ft-r .v.enc{color:var(--x-d2)}
.pg-trading .ft-r .v.enc em{color:#B9BAFF}
.pg-trading .ft-r .v.good em{color:var(--x-g2)}
.pg-trading .ft-r .v.bad em{color:var(--x-r2)}
.pg-trading .ft-r.new{animation:trading-tr-in .6s var(--ease)}
.pg-trading .ft-e{padding:16px 22px;color:var(--x-d)}
/* flows */
.pg-trading .flows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line-w)}
.pg-trading .flow{display:grid;gap:12px;align-content:start;padding:30px 26px 34px;border-right:1px solid var(--line-w)}
.pg-trading .flow:last-child{border-right:0}
.pg-trading .flow .n{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.45)}
.pg-trading .flow h3{font-size:20px}
.pg-trading .flow p{font-size:15.5px;color:rgba(255,255,255,.66)}
.pg-trading .flow .ln{position:relative;height:2px;margin:6px 0 4px;background:rgba(255,255,255,.12);overflow:hidden}
.pg-trading .flow .ln i{position:absolute;left:-30%;top:0;width:30%;height:100%;background:#8F90FF;animation:trading-ln 2.4s linear infinite}
.pg-trading .flow:nth-child(2) .ln i{animation-delay:.6s}
.pg-trading .flow:nth-child(3) .ln i{animation-delay:1.2s}
.pg-trading .flow:nth-child(4) .ln i{animation-delay:1.8s}
@keyframes trading-ln{to{left:100%}}
/* what they see: the three amount boxes sit on one line, at the foot of their cards */
.pg-trading .see{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pg-trading .see .kc{display:flex;flex-direction:column;gap:14px}
.pg-trading .see .val{margin-top:auto;font-family:var(--mono);font-size:15px;padding:12px 14px;border-radius:12px;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.pg-trading .see .val.c{color:var(--grey-2)}
@media (max-width:1180px){
  .pg-trading .ex-v{grid-template-columns:minmax(0,1fr) 272px;grid-template-rows:auto auto;height:auto}
  .pg-trading .ex-ch{height:500px}
  .pg-trading .ex-fm{grid-column:2;grid-row:1;border-left:0}
  .pg-trading .ex-bk{grid-column:1/-1;grid-row:2;flex-direction:row;flex-wrap:wrap;border-right:0;border-top:1px solid var(--x-l)}
  .pg-trading .ex-bk .ex-tabs{width:100%}
  .pg-trading .ex-pane{height:450px;flex:1 1 100%}
  .pg-trading .px-search{display:none}
}
@media (max-width:1060px){
  .pg-trading .flows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-trading .flow:nth-child(2){border-right:0}
  .pg-trading .flow:nth-child(n+3){border-top:1px solid var(--line-w)}
}
@media (max-width:760px){
  .pg-trading .px-url{justify-content:flex-start;font-size:11px}
  .pg-trading .px-tag{display:none}
  .pg-trading .px-nav{gap:20px;padding:0 16px}
  .pg-trading .px-tok{padding:14px 16px;gap:12px 22px}
  .pg-trading .px-tok .px-sw{width:100%}
  .pg-trading .px-tok .px-sw button{flex:1;padding:0 8px;font-size:13px}
  .pg-trading .ex-st{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .pg-trading .ex-v{grid-template-columns:minmax(0,1fr)}
  .pg-trading .ex-ch{height:auto;border-right:0}
  .pg-trading .ex-ch canvas{flex:none;height:250px}
  .pg-trading .ex-fm{grid-column:auto;grid-row:auto;order:1;border-top:1px solid var(--x-l)}
  .pg-trading .ex-bk{grid-row:auto;order:2}
  .pg-trading .ex-pane{height:auto}
  .pg-trading .ob.x{display:none}
  .pg-trading .ex-t{grid-template-columns:minmax(0,1fr);height:auto}
  .pg-trading .ex-t > div + div{border-left:0;border-top:1px solid var(--x-l)}
  .pg-trading .ft-h,.pg-trading .ft-r,.pg-trading .ft-e{padding-inline:16px}
  .pg-trading .toast{left:10px;top:36px;max-width:calc(100% - 84px);padding:9px 11px;font-size:12px}
  .pg-trading .flows,.pg-trading .see{grid-template-columns:minmax(0,1fr)}
  .pg-trading .flow{border-right:0}
  .pg-trading .flow + .flow{border-top:1px solid var(--line-w)}
}

/* ===== 4. treasury ===== */
/* Treasury: a draggable map of a group's entities (plain grey, no dots since 22 Oct); move money between them and switch who is looking */
.pg-treasury .tr{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:stretch}
/* the two switches sit over the two columns below: Amount over the map, Seen by as wide as the record */
.pg-treasury .tr-ctl{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:end;margin-bottom:20px}
.pg-treasury .tr-ctl > div{display:grid;gap:8px;justify-items:start}
.pg-treasury .tr-ctl > div:last-child{justify-items:stretch}
.pg-treasury .tr-ctl #view{display:flex;flex-wrap:nowrap}
.pg-treasury .tr-ctl #view button{flex:1 1 auto;padding-inline:clamp(8px,1.1vw,16px);white-space:nowrap}
@media (min-width:1061px) and (max-width:1240px){
  .pg-treasury .tr-ctl #view button{padding-inline:8px;font-size:13px}
}
.pg-treasury .tr-ctl > div > span{font-size:13px;font-weight:600;color:var(--grey)}
.pg-treasury .map{position:relative;height:540px;border-radius:24px;background:var(--mist);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.pg-treasury .map svg.edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pg-treasury .edges line{stroke:rgba(11,11,18,.12);stroke-width:1.5;stroke-dasharray:4 6}
.pg-treasury .edges line.hot{stroke:rgba(19,21,255,.3)}
/* the transfer: a small blue bar of light runs along the dashed line, turned to follow it */
.pg-treasury .edges .pulse{display:none;fill:var(--blue)}
.pg-treasury .edges .pulse.on{display:inline}
.pg-treasury .node{position:absolute;left:0;top:0;display:grid;width:212px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 30px -18px rgba(11,11,18,.35);cursor:grab;translate:-50% -50%;transition:box-shadow .25s,scale .25s var(--ease)}
.pg-treasury .node:active{cursor:grabbing}
.pg-treasury .node.drag{scale:1.04;box-shadow:0 0 0 1px var(--line),0 24px 40px -18px rgba(11,11,18,.45)}
.pg-treasury .node.src{box-shadow:0 0 0 2px var(--blue),0 14px 30px -18px rgba(19,21,255,.6)}
.pg-treasury .node.tgt{box-shadow:0 0 0 2px var(--ink),0 14px 30px -18px rgba(11,11,18,.5)}
.pg-treasury .node:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* each entity: an icon tile for what it does, its name and country, then its balance under a line */
.pg-treasury .node .hd{display:grid;grid-template-columns:34px minmax(0,1fr);gap:1px 11px;align-items:center;padding:14px 16px 12px}
.pg-treasury .node .ic{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--blue);transition:background .25s,color .25s}
.pg-treasury .node .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-treasury .node.src .ic{background:var(--blue);color:#fff}
.pg-treasury .node.tgt .ic{background:var(--ink);color:#fff}
.pg-treasury .node .nm{font-size:15px;font-weight:600;line-height:1.25}
.pg-treasury .node .cc{font-family:var(--mono);font-size:11.5px;color:var(--grey-2)}
.pg-treasury .node .b{display:block;padding:11px 16px 13px;border-top:1px solid var(--line);font-family:var(--mono);font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:clip}
.pg-treasury .node .tag{position:absolute;top:-11px;right:14px;display:none;align-items:center;height:22px;padding:0 9px;border-radius:99px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.01em}
.pg-treasury .node.src .tag,.pg-treasury .node.tgt .tag{display:inline-flex}
.pg-treasury .node.tgt .tag{background:var(--ink)}
.pg-treasury .node .b.c{color:var(--grey-2);font-weight:400}
.pg-treasury .node .bump{animation:treasury-bump .7s var(--ease)}
@keyframes treasury-bump{30%{color:var(--blue);transform:translateY(-2px)}}
.pg-treasury .hint{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grey);pointer-events:none}
.pg-treasury .hint i{width:8px;height:8px;background:var(--blue);animation:tag-blink 1.6s steps(2,end) infinite}
.pg-treasury .badge{position:absolute;right:16px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:13px;font-weight:600;pointer-events:none;transition:background .3s,color .3s}
.pg-treasury .badge svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pg-treasury .badge.pub{background:#FDECEC;color:#B4262C;box-shadow:none}
.pg-treasury .badge.eusd{background:var(--ink);color:#fff;box-shadow:none}
.pg-treasury .side{display:flex;flex-direction:column;border-radius:24px;background:var(--night);color:#fff;overflow:hidden}
.pg-treasury .side-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13.5px;color:rgba(255,255,255,.55)}
.pg-treasury .side-h b{font-size:15px;color:#fff}
.pg-treasury .who{padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px;line-height:1.5;color:rgba(255,255,255,.75)}
.pg-treasury .who b{color:#fff}
.pg-treasury .lg{flex:1;min-height:220px}
.pg-treasury .lg div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:13px 22px;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px}
.pg-treasury .lg small{font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.45)}
.pg-treasury .lg .a{grid-row:1/3;grid-column:2;align-self:center;font-family:var(--mono);font-size:13.5px}
.pg-treasury .lg .a.c{color:rgba(255,255,255,.45)}
.pg-treasury .lg div.new{animation:treasury-lg-in 1s var(--ease)}
@keyframes treasury-lg-in{0%{opacity:0;transform:translateY(-8px);background:rgba(72,74,255,.35)}40%{opacity:1;transform:none}100%{background:transparent}}
.pg-treasury .lg .empty{display:block;color:rgba(255,255,255,.45);font-size:14px}
/* figures */
.pg-treasury .figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-treasury .figs div{display:grid;gap:10px;align-content:start;padding:6px 26px}
.pg-treasury .figs div:first-child{padding-left:0}
.pg-treasury .figs div + div{border-left:1px solid var(--line)}
.pg-treasury .figs b{font-family:var(--display);font-size:clamp(34px,3.6vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1}
.pg-treasury .figs span{font-size:15px;color:var(--grey)}
/* your books */
.pg-treasury .books{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.pg-treasury .bk{display:grid;gap:0;border-top:1px solid var(--line-w)}
.pg-treasury .bk div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 18px;padding:24px 0;border-bottom:1px solid var(--line-w)}
.pg-treasury .bk .ki{grid-row:1/3;margin:0}
.pg-treasury .bk b{font-size:18px}
.pg-treasury .bk p{grid-column:2;font-size:15.5px;color:rgba(255,255,255,.66)}
@media (max-width:1060px){
  .pg-treasury .tr{grid-template-columns:minmax(0,1fr)}
  .pg-treasury .tr-ctl{grid-template-columns:minmax(0,1fr)}
  .pg-treasury .tr-ctl #view{flex-wrap:wrap}
  .pg-treasury .figs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
  .pg-treasury .figs div{padding-block:26px}
  .pg-treasury .figs div:nth-child(odd){padding-left:0;border-left:0}
  .pg-treasury .figs div:nth-child(-n+2){padding-top:6px}
  .pg-treasury .figs div:nth-child(n+3){padding-bottom:6px;border-top:1px solid var(--line)}
  .pg-treasury .books{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:760px){
  .pg-treasury .map{height:480px}
  .pg-treasury .node{width:148px}
  .pg-treasury .node .hd{grid-template-columns:28px minmax(0,1fr);gap:0 9px;padding:11px 12px 9px}
  .pg-treasury .node .ic{width:28px;height:28px;border-radius:8px}
  .pg-treasury .node .ic svg{width:16px;height:16px}
  .pg-treasury .node .b{padding:8px 12px 10px;font-size:13px}
  .pg-treasury .node .nm{font-size:13.5px}
  .pg-treasury .figs div{padding-inline:16px}
  .pg-treasury .figs div:nth-child(odd){padding-left:0}
}

/* ===== 4. vigilantis ===== */
/* Vigilantis: transfers fly at a gate of rings; switch rules on and off and watch what gets through */
.pg-vigilantis .gate{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:stretch}
.pg-vigilantis .rings{position:relative;aspect-ratio:1;max-height:640px;width:100%;border-radius:24px;background:radial-gradient(circle at 50% 50%,rgba(19,21,255,.14),transparent 62%),var(--night-2);box-shadow:0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.pg-vigilantis .rings canvas{position:absolute;inset:0;width:100%;height:100%}
.pg-vigilantis .rl{position:absolute;left:18px;bottom:16px;display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:rgba(255,255,255,.55);pointer-events:none}
.pg-vigilantis .rl span{display:inline-flex;align-items:center;gap:7px}
.pg-vigilantis .rl i{width:9px;height:9px;background:#fff}
.pg-vigilantis .rl i.b{background:#FF6B70}
.pg-vigilantis .rl i.u{background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.pg-vigilantis .rl i.l{width:13px;height:13px;background:#C9CAFF}
.pg-vigilantis .ctl{display:flex;flex-direction:column;gap:12px}
.pg-vigilantis .rule{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:18px 20px;border-radius:18px;background:var(--night-2);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.pg-vigilantis .rule b{display:flex;align-items:center;gap:10px;font-size:16px}
.pg-vigilantis .rule b i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px var(--c)}
.pg-vigilantis .rule small{grid-column:1;font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.45}
.pg-vigilantis .sw{grid-row:1/3;grid-column:2;position:relative;width:46px;height:28px;border:0;border-radius:99px;background:rgba(255,255,255,.18);cursor:pointer;transition:background .25s}
.pg-vigilantis .sw::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .32s var(--ease)}
.pg-vigilantis .sw[aria-checked="true"]{background:var(--blue)}
.pg-vigilantis .sw[aria-checked="true"]::after{transform:translateX(18px)}
.pg-vigilantis .tally{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:auto}
.pg-vigilantis .tally div{display:grid;gap:4px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.05)}
.pg-vigilantis .tally b{font-family:var(--display);font-size:32px;letter-spacing:-.02em}
.pg-vigilantis .tally span{font-size:13px;color:rgba(255,255,255,.55)}
.pg-vigilantis .codes-l{display:grid;gap:6px;font-family:var(--mono);font-size:12.5px;color:rgba(255,255,255,.6)}
.pg-vigilantis .codes-l div{display:flex;justify-content:space-between;gap:10px}
.pg-vigilantis .codes-l b{color:#FF8A8E;font-weight:500}
/* error explorer */
.pg-vigilantis .errs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start}
.pg-vigilantis .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pg-vigilantis .tile{display:grid;gap:6px;align-content:start;min-height:104px;padding:16px;border:0;border-radius:16px;background:var(--mist);font:inherit;text-align:left;cursor:pointer;transition:background .2s,transform .2s var(--ease),box-shadow .2s}
.pg-vigilantis .tile:hover{transform:translateY(-2px)}
.pg-vigilantis .tile .n{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:-.02em}
.pg-vigilantis .tile .t{font-size:12.5px;line-height:1.3;color:var(--grey);overflow-wrap:anywhere}
.pg-vigilantis .tile[aria-pressed="true"]{background:var(--ink);color:#fff}
.pg-vigilantis .tile[aria-pressed="true"] .t{color:rgba(255,255,255,.65)}
.pg-vigilantis .tile.hook .n::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;vertical-align:4px;background:var(--blue)}
.pg-vigilantis .det{display:grid;gap:16px;padding:28px;border-radius:24px;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.pg-vigilantis .det .k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.pg-vigilantis .det h3{font-family:var(--mono);font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.01em;overflow-wrap:anywhere}
.pg-vigilantis .det p{font-size:16px;line-height:1.6;color:var(--grey)}
.pg-vigilantis .det .msg{padding:14px 16px;border-radius:12px;background:var(--mist);font-size:15px;color:var(--ink)}
.pg-vigilantis .det pre{margin:0;padding:16px 18px;border-radius:14px;background:var(--night);color:#E8E9F2;font-family:var(--mono);font-size:12.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.pg-vigilantis .det pre .e{color:#FF8A8E}
.pg-vigilantis .det .sw-in{animation:vigilantis-swin .45s var(--ease)}
@keyframes vigilantis-swin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* code + numbers */
.pg-vigilantis .code{border-radius:22px;background:var(--night);color:#E8E9F2;overflow:hidden}
.pg-vigilantis .code pre{margin:0;padding:24px 26px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.7}
.pg-vigilantis .code .k{color:#9FA0FF}
.pg-vigilantis .code .s{color:#8BE0B9}
.pg-vigilantis .code .c{color:rgba(255,255,255,.4)}
.pg-vigilantis .code .n{color:#FFC27A}
.pg-vigilantis .split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
.pg-vigilantis .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-w);border-bottom:1px solid var(--line-w)}
.pg-vigilantis .stats div{display:grid;gap:8px;padding:32px 24px 34px}
.pg-vigilantis .stats div + div{border-left:1px solid var(--line-w)}
.pg-vigilantis .stats b{font-family:var(--display);font-size:clamp(40px,4.4vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1}
.pg-vigilantis .stats span{font-size:15px;color:rgba(255,255,255,.62)}
@media (max-width:1060px){
  .pg-vigilantis .gate,.pg-vigilantis .errs,.pg-vigilantis .split{grid-template-columns:minmax(0,1fr)}
  .pg-vigilantis .rings{max-width:620px;justify-self:center}
  .pg-vigilantis .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-vigilantis .stats div:nth-child(3){border-left:0}
  .pg-vigilantis .stats div:nth-child(n+3){border-top:1px solid var(--line-w)}
}
@media (max-width:760px){
  .pg-vigilantis .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-vigilantis .code pre{font-size:12px;padding:18px}
  .pg-vigilantis .stats div{padding:24px 14px}
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}