/* Copied from softseco.com (site v2) by import-site.mjs; do not edit here. */
/* ===== 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;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}   /* over the open menu the bar is plain white */
.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.23px;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,.hdr .sheet a.is-off,.nav .nl.is-off{cursor:default}   /* shown, but they do not open yet: eEUR, Mint, Forex, Arcantis, Vigilantis, Legal, Partner Network, Careers, Brand, Help Center, Transparency */
.nav .nl.is-off:hover{opacity:1}
.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}
.hdr .sheet{height:calc(100dvh - var(--hdr) - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;color:var(--ink)}   /* the whole screen under the bar: the menu in a white box, under the rest the page, blurred (.page-body below) */
.sheet-in{background:var(--paper);border-top:1px solid var(--line);box-shadow:0 30px 40px -30px rgba(11,11,18,.3)}
html.menu-lock{overflow:hidden}   /* the page does not scroll under the open menu; the menu scrolls itself once a section makes it taller than the screen */
html.menu-lock body{padding-right:var(--sbw,0px)}
html.menu-lock .hdr{right:var(--sbw,0px)}
/* The blur under the open phone menu. The page itself (.page-body: main and the footer) is blurred and dimmed, so the blur
   shows exactly what is behind the menu, down to the bottom edge of the screen. (A backdrop filter on the menu is not used:
   Chrome fills it near the screen's edges with a mirror image of the page, and iOS 26 Safari stops it above its toolbar.)
   A blurred layer fades out at its own edges (the sides, and the bottom at the very end of the page); there the canvas is
   black, and the .blur-edge layers, grey at 1 - Φ(d / 18px) and blended with color-dodge, divide that fade out again, so
   the edges show the blurred page just like the middle. */
html.menu-lock body{background:linear-gradient(to left,#DBDBDB var(--sbw,0px),#000 0)}   /* #DBDBDB: paper dimmed, where the scrollbar was */
html.menu-lock .page-body{background-color:var(--paper);filter:blur(18px) brightness(.86)}
.blur-edge-x,.blur-edge-y{display:none}
html.menu-lock .blur-edge-x{display:block;position:fixed;top:0;bottom:0;left:0;right:var(--sbw,0px);z-index:59;pointer-events:none;mix-blend-mode:color-dodge;background:linear-gradient(to right,rgb(50%,50%,50%) 0px,rgb(40.1%,40.1%,40.1%) 4.5px,rgb(30.9%,30.9%,30.9%) 9px,rgb(22.7%,22.7%,22.7%) 13.5px,rgb(15.9%,15.9%,15.9%) 18px,rgb(10.6%,10.6%,10.6%) 22.5px,rgb(6.7%,6.7%,6.7%) 27px,rgb(4%,4%,4%) 31.5px,rgb(2.3%,2.3%,2.3%) 36px,rgb(0.6%,0.6%,0.6%) 45px,#000 54px,#000 calc(100% - 54px),rgb(0.6%,0.6%,0.6%) calc(100% - 45px),rgb(2.3%,2.3%,2.3%) calc(100% - 36px),rgb(4%,4%,4%) calc(100% - 31.5px),rgb(6.7%,6.7%,6.7%) calc(100% - 27px),rgb(10.6%,10.6%,10.6%) calc(100% - 22.5px),rgb(15.9%,15.9%,15.9%) calc(100% - 18px),rgb(22.7%,22.7%,22.7%) calc(100% - 13.5px),rgb(30.9%,30.9%,30.9%) calc(100% - 9px),rgb(40.1%,40.1%,40.1%) calc(100% - 4.5px),rgb(50%,50%,50%) 100%)}
html.menu-lock .blur-edge-y{display:block;position:relative;z-index:1;height:54px;margin-top:-54px;pointer-events:none;mix-blend-mode:color-dodge;background:linear-gradient(to top,rgb(50%,50%,50%) 0px,rgb(40.1%,40.1%,40.1%) 4.5px,rgb(30.9%,30.9%,30.9%) 9px,rgb(22.7%,22.7%,22.7%) 13.5px,rgb(15.9%,15.9%,15.9%) 18px,rgb(10.6%,10.6%,10.6%) 22.5px,rgb(6.7%,6.7%,6.7%) 27px,rgb(4%,4%,4%) 31.5px,rgb(2.3%,2.3%,2.3%) 36px,rgb(0.6%,0.6%,0.6%) 45px,#000 54px)}
.hdr .sheet .wrap{display:grid;padding-block:8px 24px;height:auto}
.hdr .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}
.hdr .sheet a svg{width:15px;height:15px;opacity:.5}
.hdr .sheet .btn{height:46px;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) */
.hdr .sheet details{border-bottom:1px solid var(--line)}
.hdr .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}
.hdr .sheet summary::-webkit-details-marker{display:none}
.hdr .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 .5s var(--ease)}
.hdr .sheet details.is-open summary svg{transform:scaleY(-1)}   /* like the FAQ: the point travels straight up; nothing turns */
.hdr .sheet .acc-b{display:grid;overflow:hidden}
.hdr .sheet .acc-b::after{content:"";height:14px}   /* the space under the last link, as content: a bottom padding would stay 14 px tall at height 0, and the line under the section would jump when it opens and closes */
.hdr .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)}
.hdr .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}
.hdr .sheet a em{display:inline-block;margin-left:6px;padding:0 7px;border-radius:99px;background:#EEEFF3;font-family:var(--text);font-style:normal;font-size:11px;font-weight:500;line-height:18px;letter-spacing:0;color:var(--grey);vertical-align:1px}   /* the desktop menu's tag (.mm-i em): why a link does not open yet */
.hdr .sheet .wrap > a em{vertical-align:3px}
.hdr .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;margin-right:-13.75px}.hdr-r{gap:10px}}   /* the two lines end exactly at the page edge, as far in as the logo starts on the left */
@media (max-width:760px){:root{--hdr:64px}.hdr .trade{display:none}}

/* footer: kept from softseco.com */
/* footer (27 Oct, 17:27): blue, as before. Left: the Softseco logo, the tagline, contact and the social links; right: the
   site's five columns; under a hairline: copyright and notice, then the legal links and the language. Links draw an
   underline on hover. The first time it comes into view its words type themselves in, the logo rises letter by letter
   and the hairline draws from the left (site script; nothing moves with reduced motion) */
.footer{position:relative;background:var(--blue);color:#fff}
.ft-in{padding-top:88px;padding-bottom:max(32px, env(safe-area-inset-bottom))}
.footer .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.footer ul{list-style:none;margin:0;padding:0}
.footer a{color:inherit;text-decoration:none}
.footer a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}   /* the site's blue ring would vanish on blue */
.ft-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:64px}
.ft-logo{display:inline-block}
.ft-logo svg{display:block;width:auto;height:31.5px;margin:-.75px 0 -.75px -.7px;fill:#fff;overflow:hidden}
.ft-tag{margin:24px 0 0;max-width:21em;text-wrap:balance;font-size:15px;line-height:1.6;color:rgba(255,255,255,.8)}
.ft-meta{margin:28px 0 0}
.ft-meta dt,.ft-h{margin:0;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ft-meta dd{display:flex;align-items:center;gap:10px;margin:6px 0 0;font-size:15px}
/* the e-mail address copies on click: the line rolls up like a cube and "Copied" (with a tick) comes up from below,
   then after 1.8 s it rolls back down to the address */
.ft-mail{perspective:420px}
.ft-roll{display:inline-grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.ft-roll > span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ft-roll .f1{transform:translateZ(.68em)}
.ft-roll .f2{transform:rotateX(-90deg) translateZ(.68em);color:#fff}
.ft-roll .f2 svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ft-mail.copied .ft-roll{transform:rotateX(90deg)}
.ft-meta a.ft-mail.copied{background-size:0 1px}   /* no underline under "Copied" */
@media (prefers-reduced-motion:reduce){.ft-roll{transition:none}}
.ft-brand .social{justify-content:flex-start;margin-top:30px}
.social{display:flex;gap:18px}
.social a{display:grid;place-items:center;color:#fff;transition:opacity .2s}
.social a:hover{opacity:.6}
.ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px}   /* the menu's eight groups, every page (those not open yet show their tag, as in the menu) */
.ft-h{margin-bottom:20px}
.ft-col li + li{margin-top:12px}
.ft-col a,.ft-meta a,.ft-legal a{display:inline-flex;align-items:center;gap:6px;font-size:15px;line-height:1.35;color:rgba(255,255,255,.88);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .2s,background-size .35s var(--ease)}
.ft-col a:hover,.ft-meta a:hover,.ft-legal a:hover,.ft-col a:focus-visible,.ft-meta a:focus-visible,.ft-legal a:focus-visible{color:#fff;background-size:100% 1px}
.ft-col a.is-off{cursor:default;color:rgba(255,255,255,.5);background:none}
.ft-col a.is-off em{font-style:normal;font-size:11px;line-height:1;padding:3px 7px;border:1px solid rgba(255,255,255,.3);border-radius:99px;color:rgba(255,255,255,.7)}
.ft-ext{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.ft-bot{position:relative;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px 48px;margin-top:72px;padding-top:28px}
.ft-rule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.24);transform-origin:left center}
.ft-copy{margin:0;font-size:13px;color:rgba(255,255,255,.8)}
.ft-copy small{display:block;margin-top:6px;max-width:46em;font-size:12px;line-height:1.6;color:rgba(255,255,255,.58)}
.ft-legal{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px}
.ft-legal a{font-size:13px}
.ft-lang{display:inline-flex;align-items:center;gap:8px;font-size:13px}
@media (max-width:1180px){.ft-top{grid-template-columns:minmax(0,1fr);gap:56px}.ft-brand{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:start}.ft-brand > .ft-logo,.ft-brand > .ft-tag{grid-column:1}.ft-brand > .ft-meta{grid-column:1}.ft-brand > .social{grid-column:2;grid-row:1;align-self:center;margin-top:0}}
@media (max-width:900px){.ft-nav{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}}
@media (min-width:1181px) and (max-width:1320px){.ft-top{grid-template-columns:minmax(0,1.6fr) minmax(0,5fr);gap:48px}}
@media (max-width:760px){
  .ft-in{padding-top:64px}
  .ft-brand{display:block}
  .ft-brand > .social{margin-top:28px}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  .ft-bot{flex-direction:column;margin-top:56px}
}
/* motion (the site script adds ft-js, then in when the footer comes into view) */
.ft-js .tw .c{opacity:0}
.ft-js.in .tw .c{animation:ft-c .01s linear both;animation-delay:var(--d)}
@keyframes ft-c{from{opacity:0}to{opacity:1}}
.ft-js .ft-logo path{transform:translateY(420px)}
.ft-js.in .ft-logo path{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d)}
.ft-js .ft-rule{transform:scaleX(0)}
.ft-js.in .ft-rule{transform:none;transition:transform 1.1s var(--ease) .3s}
.ft-js .social a,.ft-js .ft-ext,.ft-js .ft-lang svg,.ft-js .is-off em{opacity:0;transition:opacity .5s ease}
.ft-js.in .social a,.ft-js.in .ft-lang svg,.ft-js.in .is-off em{opacity:1;transition-delay:.6s}
.ft-js.in .ft-ext{opacity:.7;transition-delay:.6s}

/* 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}}

/* ===== 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,.kit .ph > picture > 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 > picture > img{object-position:50% 30%}
  .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;align-content:center;padding:clamp(40px,6vw,88px);border-radius:28px;overflow:hidden;isolation:isolate;background:var(--night);color:#fff;min-height:calc(2 * clamp(40px,6vw,88px) + 2.04 * clamp(36px,4.4vw,58px) + 157.6px)}
/* every closing banner as tall as Institutional's: padding + two lines of heading + two of text + gaps and buttons; content centred */
.kit .sec.cta-sec{padding-block:clamp(56px,7vw,96px)}
/* the closing banner's section: the same space above and below on every page */
.kit .sec:not(.mist):not(.dark):not(.blue):has(+ .cta-sec){padding-bottom:0}
/* a white section before it adds no space of its own, so the gap above the banner matches the gap below */
@media (max-width:599px){
  .kit .cta{min-height:max(calc(2 * clamp(40px,6vw,88px) + 2.04 * clamp(36px,4.4vw,58px) + 157.6px), calc(873px - 88.6vw))}
}
/* phones: text wraps to more lines, so the shared height grows as the screen narrows (tallest banner, Roadmap's, still fits) */
.kit .cta.blue{background:var(--blue)}
.kit .cta-fx{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
/* the moving background the kit script draws (data-fx) */
.kit .cta.blue .btn-white:hover{background:var(--ink);color:#fff}
/* on blue, the white button turns ink, not 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}
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){.ft-roll{transition:none}}
.ft-brand .social{justify-content:flex-start;margin-top:30px}
.social{display:flex;gap:18px}
.social a{display:grid;place-items:center;color:#fff;transition:opacity .2s}
.social a:hover{opacity:.6}
.ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px}   /* the menu's eight groups, every page (those not open yet show their tag, as in the menu) */
.ft-h{margin-bottom:20px}
.ft-col li + li{margin-top:12px}
.ft-col a,.ft-meta a,.ft-legal a{display:inline-flex;align-items:center;gap:6px;font-size:15px;line-height:1.35;color:rgba(255,255,255,.88);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .2s,background-size .35s var(--ease)}
.ft-col a:hover,.ft-meta a:hover,.ft-legal a:hover,.ft-col a:focus-visible,.ft-meta a:focus-visible,.ft-legal a:focus-visible{color:#fff;background-size:100% 1px}
.ft-col a.is-off{cursor:default;color:rgba(255,255,255,.5);background:none}
.ft-col a.is-off em{font-style:normal;font-size:11px;line-height:1;padding:3px 7px;border:1px solid rgba(255,255,255,.3);border-radius:99px;color:rgba(255,255,255,.7)}
.ft-ext{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.ft-bot{position:relative;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px 48px;margin-top:72px;padding-top:28px}
.ft-rule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.24);transform-origin:left center}
.ft-copy{margin:0;font-size:13px;color:rgba(255,255,255,.8)}
.ft-copy small{display:block;margin-top:6px;max-width:46em;font-size:12px;line-height:1.6;color:rgba(255,255,255,.58)}
.ft-legal{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px}
.ft-legal a{font-size:13px}
.ft-lang{display:inline-flex;align-items:center;gap:8px;font-size:13px}
@media (max-width:1180px){.ft-top{grid-template-columns:minmax(0,1fr);gap:56px}.ft-brand{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:start}.ft-brand > .ft-logo,.ft-brand > .ft-tag{grid-column:1}.ft-brand > .ft-meta{grid-column:1}.ft-brand > .social{grid-column:2;grid-row:1;align-self:center;margin-top:0}}
@media (max-width:900px){.ft-nav{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}}
@media (min-width:1181px) and (max-width:1320px){.ft-top{grid-template-columns:minmax(0,1.6fr) minmax(0,5fr);gap:48px}}
@media (max-width:760px){
  .ft-in{padding-top:64px}
  .ft-brand{display:block}
  .ft-brand > .social{margin-top:28px}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  .ft-bot{flex-direction:column;margin-top:56px}
}
/* motion (the site script adds ft-js, then in when the footer comes into view) */
.ft-js .tw .c{opacity:0}
.ft-js.in .tw .c{animation:ft-c .01s linear both;animation-delay:var(--d)}
@keyframes ft-c{from{opacity:0}to{opacity:1}}
.ft-js .ft-logo path{transform:translateY(420px)}
.ft-js.in .ft-logo path{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d)}
.ft-js .ft-rule{transform:scaleX(0)}
.ft-js.in .ft-rule{transform:none;transition:transform 1.1s var(--ease) .3s}
.ft-js .social a,.ft-js .ft-ext,.ft-js .ft-lang svg,.ft-js .is-off em{opacity:0;transition:opacity .5s ease}
.ft-js.in .social a,.ft-js.in .ft-lang svg,.ft-js.in .is-off em{opacity:1;transition-delay:.6s}
.ft-js.in .ft-ext{opacity:.7;transition-delay:.6s}

/* 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}}

/* responsive */
@media (max-width:960px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split.rev > .token-col{order:2}
  .uses{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .slide img{object-position:var(--mpos,50% 50%)}
  .slide picture img{object-position:50% 30%}
  .copy{left:var(--gl);right:var(--gr);top:auto;bottom:120px;translate:none;max-width:none;gap:16px}
  .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}
  .slide[data-tone="dark"]::after{background:linear-gradient(to top,rgba(245,246,250,.96),rgba(245,246,250,.75) 45%,transparent)}
  .copy{z-index:2}
  .copy .acts .btn{flex:1 1 100%}
  .duo,.lic,.tog{grid-template-columns:minmax(0,1fr)}
  .car{--cw:calc(100vw - 32px);--gap:10px}
  .cs{height:480px}
  .car-arrow{width:38px;height:38px;margin-top:-19px}
  .car-arrow.prev{left:calc((100% - var(--cw)) / 2 + 12px)}
  .car-arrow.next{right:calc((100% - var(--cw)) / 2 + 12px)}
  .cs-copy{gap:22px;padding-top:40px}
  .uses{grid-template-columns:minmax(0,1fr)}
  .road{grid-template-columns:minmax(0,1fr);padding-left:30px}
  .road .track{left:-4px;top:0;width:21px;height:100%}
  .ph{padding:0 0 28px}
  .row{padding-inline:18px}.card-top,.card-foot{padding-inline:18px}
  .val{font-size:19px}.who{font-size:16.5px}
  .lbox .code{font-size:52px;top:22px}
}
@keyframes growY{from{transform:scaleY(0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}