/* ============ Seven Broker tokens (dark by default, light via data-theme) ============ */
:root{
  --canvas:#111111;
  --panel:#171717;
  --line:#272727;
  --accent:#E11D2A;
  --accent-hover:#F0404B;
  --accent-muted:rgba(225,29,42,.16);
  --text-secondary:#9F9F9F;
  --text-primary:#F3F3F3;
  --up:#2FBF71;
  /* the three states a client back office needs and the marketing site never did.
     Nothing uses them yet; they are here because a colour is defined in the palette
     first and used second. Measured as TEXT on this theme's canvas: 8.50, 7.42, 4.82 */
  --warn:#E0A32E;   /* under review, about to expire */
  --info:#5AA9E6;   /* a neutral notice */
  --down:#E5484D;   /* a market moving down, a loss: not the brand red, so "loss" and
                       "primary action" are never the same colour on the same screen */
  --soft-bg:rgba(243,243,243,.12);
  --soft-bg-h:rgba(243,243,243,.22);
  --soft-tx:#F3F3F3;
  --wash:rgba(243,243,243,.09);
  --menu-on:#FF6B74; /* active menu item: light red, >=4.5:1 over accent-muted in dark */
  --mkt-off-ink:#C9C9C9;  /* closed market, city name */
  --mkt-off-dim:#9F9F9F;  /* closed market, hours and dot */
  --accent-tag:#C8111C;   /* the open tag's own red: 5.9:1 with white, against 4.8:1 for --accent */
  --closed-ink:var(--accent-hover);  /* the "market closed" stamp text: brighter red reads 4.98:1 on the dark canvas, where plain --accent falls to 3.96 */
  --gb:screen;
  --tshadow:0 1px 2px rgba(0,0,0,.55),0 3px 12px rgba(0,0,0,.4);
  --scrim:rgba(17,17,17,.8);             /* DESIGN.md: the veil behind a dialog or a drawer */
  --elev-modal:0 32px 80px rgba(0,0,0,.45); /* DESIGN.md elevation step modal: dialog, drawer */
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.25,.46,.45,.94);
  --z-nav:30; --z-cue:20;
  --font-d:'Michroma',system-ui,sans-serif;
  --font-b:'Manrope',system-ui,sans-serif;
  --font-m:'Martian Mono',ui-monospace,monospace;
  color-scheme:dark; /* native widgets follow the theme too */
}
html[data-theme="light"]{
  --canvas:#FBF9F9;
  --panel:#FFFFFF;
  --line:#E7E0E1;
  --accent:#D4131F;
  --accent-hover:#E11D2A;
  --accent-muted:rgba(212,19,31,.12);
  --text-secondary:#6E6467;
  --text-primary:#171215;
  --up:#0D773F; /* 2026-10-18: was #0E8345 (4.11:1 as text on its own wash); now 5.63 panel, 4.76 on --up-wash */
  /* same three, darkened until they clear 4.5:1 on the light canvas: 5.36, 6.03, 5.31.
     The amber at #9A6B05 measured 4.47 and was rejected for it */
  --warn:#8B5F04;
  --info:#1263A0;
  --down:#C62A2F;
  --soft-bg:#EFEAEB;
  --soft-bg-h:#E4DDDE;
  --soft-tx:#171215;
  --wash:rgba(23,18,21,.05);
  --menu-on:#B60F1B; /* active menu item in light: dark red, >=4.5:1 over accent-muted */
  --mkt-off-ink:#3A3437;  /* closed market, city name */
  --mkt-off-dim:#575055;  /* closed market, hours and dot */
  --accent-tag:#D4131F;
  --closed-ink:var(--accent);  /* on the light canvas the deep red reads 5.12:1 */
  --gb:multiply;
  --tshadow:0 1px 2px rgba(255,255,255,.95),0 3px 12px rgba(251,249,249,.82);
  --scrim:rgba(23,18,21,.5);
  --elev-modal:0 32px 80px rgba(23,18,21,.18);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* [hidden] ALWAYS hides: author rules (display:flex and friends) must not beat it.
   Real bug twice in this project; do not remove. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}

/* ============ scrollbar in the brand palette ============ */
:root{--bar:#323232;--bar-hover:var(--accent);--bar-track:#0C0C0C}
html[data-theme="light"]{--bar:#D8CFD1;--bar-hover:var(--accent);--bar-track:#F2ECED}
/* Chrome honours the standard property OVER ::-webkit-scrollbar when both are set,
   which drops the radius and the hover. So the standard one is declared only where
   the WebKit pseudo-element does not exist (Firefox). */
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-color:var(--bar) var(--bar-track);scrollbar-width:thin}
}
/* WebKit: same look, with a hairline that separates the track from the page */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bar-track);border-inline-start:1px solid var(--line)}
::-webkit-scrollbar-thumb{
  background:var(--bar);border-radius:8px;
  border:3px solid var(--bar-track); /* inset: the thumb reads thinner than the track */
  transition:background-color .2s var(--ease-out);
}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:var(--bar-hover)}
::-webkit-scrollbar-corner{background:var(--bar-track)}
body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-b);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
.mono{font-family:var(--font-m);letter-spacing:-.01em}
h1,h2,h3{font-family:var(--font-d);font-weight:400;line-height:1.2;text-wrap:balance}
h2{font-size:clamp(1.4rem,3.2vw,2.3rem);letter-spacing:.01em}
h3{font-size:clamp(.95rem,1.6vw,1.15rem)}
p{max-width:62ch}
a{color:inherit}
::selection{background:var(--accent);color:#fff}

.skip{position:fixed;top:-100px;left:16px;z-index:99;background:var(--accent);color:#fff;padding:10px 18px;border-radius:8px;transition:top .2s var(--ease-out)}
.skip:focus-visible{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* living background (one fixed layer, a whisper) */
.bg-field{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-field canvas{width:100%;height:100%}
.nav,main,.hero,.footer{position:relative;z-index:1}

/* ============ Nav ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  padding:14px 0;
  background:linear-gradient(rgba(15,15,15,.92),rgba(15,15,15,.72) 70%,rgba(15,15,15,.35));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
html[data-theme="light"] .nav{background:linear-gradient(rgba(251,249,249,.94),rgba(251,249,249,.75) 70%,rgba(251,249,249,.4))}
.nav-in{
  max-width:1760px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:clamp(14px,3vw,34px);
}
/* Header lockup: the numeral as artwork, the name set in live type beside it.
   The packaged image put the name at 6px tall, which was unreadable. */
/* the bar's side padding is two scale steps, not a fluid value: 20 up to the page rail's
   cap, 32 from there */
@media (min-width:1240px){.nav-in{padding:0 32px}}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo-7{height:40px;width:auto;display:none}
.nav-logo .logo-7--dark,.foot-brand .logo-7--dark{display:block}
html[data-theme="light"] .nav-logo .logo-7--dark,
html[data-theme="light"] .foot-brand .logo-7--dark{display:none}
html[data-theme="light"] .nav-logo .logo-7--light,
html[data-theme="light"] .foot-brand .logo-7--light{display:block}
/* footer stacks the mark: numeral over the name, both from the master art */
/* the numeral sits centred over the name, as it is drawn in the master art,
   while the block itself stays flush left with the columns below */
.foot-brand{display:flex;flex-direction:column;align-items:center;gap:9px;width:fit-content;justify-self:start}
.foot-brand .logo-7{height:56px}
.foot-brand .logo-word{height:32px}
/* the name is the brand's own drawing, cropped from the master artwork and kept
   at 3x so it stays crisp on dense screens */
.logo-word{height:31px;width:auto;display:none}
.nav-logo .logo-word--dark,.foot-brand .logo-word--dark{display:block}
html[data-theme="light"] .nav-logo .logo-word--dark,
html[data-theme="light"] .foot-brand .logo-word--dark{display:none}
html[data-theme="light"] .nav-logo .logo-word--light,
html[data-theme="light"] .foot-brand .logo-word--light{display:block}
.nav-word{font-family:var(--font-d);font-size:.78rem;letter-spacing:.14em;color:var(--text-primary)}
.nav-word em{font-style:normal;color:var(--accent);margin-left:.45em;font-size:.62rem}
/* the menus sit centred in the space between the logo and the right-hand group: the menu box
   takes that space and centres its items, which lands them where auto side margins did,
   without a 222px "margin" that every spacing measurement then reports */
.nav-menu{display:flex;flex:1;justify-content:center;gap:clamp(4px,1vw,10px)}
.nav-item{position:relative}
.nav-drop{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;cursor:pointer;
  color:var(--text-primary);font:600 .95rem var(--font-b);
  padding:10px 14px;border-radius:10px;
  white-space:nowrap; /* a menu label on two or three lines made the bar 170px tall in Tamil */
  transition:background-color .2s var(--ease-out);
}
.nav-drop svg{width:10px;height:6px;opacity:.6;transition:transform .2s var(--ease-out)}
.nav-drop:hover{background:var(--wash)}
.nav-item:not(.lang-item):hover .nav-drop svg,
.nav-item:not(.lang-item):focus-within .nav-drop svg,
.nav-item.open .nav-drop svg{transform:rotate(180deg)}
.drop{
  position:absolute;top:100%;inset-inline-start:0;min-width:190px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 40px rgba(23,18,21,.12);
  padding:8px;display:none;z-index:40;
}
.drop-right{inset-inline-start:auto;inset-inline-end:0}
/* hover opens the nav menus, but never the language list: that one is a
   deliberate choice and a pointer passing by should not throw it open */
.nav-item:not(.lang-item):hover .drop,.nav-item:not(.lang-item):focus-within .drop{display:block}

/* flags: 1:1 fully rounded mask (circle), Country Flag Icons style */
.flag{display:inline-flex;width:20px;height:20px;border-radius:50%;overflow:hidden;flex:none}
.flag img{width:100%;height:100%;object-fit:cover;display:block}
.flag-sm{width:18px;height:18px}

/* language menu: 20 items in two scrollable columns */
.drop-lang{grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px;min-width:344px;max-height:min(62vh,470px);overflow:auto;padding:10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.drop-lang::-webkit-scrollbar{width:6px}
.drop-lang::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
/* scroll hint: sticky fade at the panel bottom */
.drop-lang::after{content:"";grid-column:1/-1;position:sticky;bottom:-10px;height:22px;margin-top:-22px;background:linear-gradient(transparent,var(--panel));pointer-events:none}
.nav-item.open .drop-lang{display:grid}
.nav-item.open .drop{display:block}
.nav-item.open .drop-lang{display:grid}
@media (max-width:720px){

  .drop-lang{position:fixed;left:12px;right:12px;top:64px;min-width:0;grid-template-columns:repeat(2,1fr);max-height:70vh}
}
@media (max-width:360px){
  .drop-lang{grid-template-columns:1fr}
}

/* rtl languages (Arabic, Urdu): layout mirrors via dir; only asymmetric bits need tuning */
html[dir="rtl"] .drop a,html[dir="rtl"] .drop .lang-btn{text-align:right}
.drop a,.drop .lang-btn{
  display:block;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;text-decoration:none;
  color:var(--text-primary);font:600 .9rem var(--font-b);
  padding:9px 12px;border-radius:8px;
  transition:background-color .15s,color .15s;
}
.drop a:hover,.drop .lang-btn:hover{background:var(--accent-muted);color:var(--accent)}
.drop .lang-btn[aria-pressed="true"]{color:var(--menu-on)}
/* after the generic display:block rule above, so the cascade cannot kill the flex.
   No nowrap: long native names ("Bahasa Indonesia") must wrap inside the column
   instead of spilling out of the panel. */
.drop-lang .lang-btn{display:flex;align-items:center;gap:9px;min-width:0}
.drop-lang .lang-name{overflow-wrap:anywhere;line-height:1.25}
.drop-lang .lang-btn[aria-pressed="true"]{color:var(--menu-on);background:var(--accent-muted)}
.nav-right{display:flex;align-items:center;gap:clamp(8px,1vw,12px)}
/* menu item that is a plain link (Download) */
a.nav-link{text-decoration:none;display:inline-flex;align-items:center}
a.nav-link--on{color:var(--menu-on)}
.btn-soft{background:var(--soft-bg);color:var(--soft-tx)}
.btn-soft:hover{background:var(--soft-bg-h)}
.theme-btn{padding:10px 11px}
.theme-btn svg{width:17px;height:17px;display:block}
.theme-btn .ic-sun{display:none}
html[data-theme="light"] .theme-btn .ic-sun{display:block}
html[data-theme="light"] .theme-btn .ic-moon{display:none}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:600 .95rem var(--font-b);text-decoration:none;cursor:pointer;
  padding:12px 26px;border-radius:10px;border:1px solid transparent;
  transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out),color .25s var(--ease-out),transform .25s var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--line);color:var(--text-primary);background:var(--panel)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-cta{padding:9px 18px;font-size:.88rem}
.btn-big{padding:16px 40px;font-size:1.05rem}
@media (pointer:coarse){
  .btn{min-height:44px}
  .lang-btn{min-height:44px;min-width:44px}
  .theme-btn,.lang-item>.nav-drop{min-height:44px;min-width:44px;justify-content:center}
  .nav-logo{min-height:44px;min-width:44px} /* the home link was 38px tall on phones (argus, 2026-09-25) */
  .foot-cols a{padding:8px 0}
}

/* ============ Hero: the COBE globe ============ */
@font-face{font-family:'GeistPixelLine';src:url('fonts/GeistPixel-Line.woff2') format('woff2');font-display:swap}
@font-face{font-family:'DepartureMono';src:url('fonts/DepartureMono-Regular.woff') format('woff');font-display:swap}

.hero{
  position:relative;min-height:100vh;min-height:100svh;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 42% at 26% 8%,rgba(212,19,31,.22),transparent 70%),
    radial-gradient(ellipse 52% 40% at 78% 30%,rgba(212,19,31,.12),transparent 70%),
    linear-gradient(168deg,#141414 0%,#101010 38%,#0E0E0E 100%);
  padding:calc(76px + 9vh - 50px) 16px calc(7vh - 100px);
}
html[data-theme="light"] .hero{
  background:
    radial-gradient(ellipse 60% 42% at 26% 8%,rgba(212,19,31,.10),transparent 70%),
    radial-gradient(ellipse 52% 40% at 78% 30%,rgba(212,19,31,.06),transparent 70%),
    linear-gradient(168deg,#FDFBFB 0%,#FBF9F9 38%,#F5F1F1 100%);
}
.hero>*{position:relative;z-index:2}

.hero-chip{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  color:var(--text-primary);
  padding:7px 14px;text-decoration:none;
  color:var(--text-primary);font-size:.72rem;letter-spacing:.06em;
  margin-bottom:26px;
  transition:border-color .2s;
}
.hero-chip:hover{border-color:var(--accent)}
.hero-chip svg{width:8px;height:5px;transform:rotate(-90deg);opacity:.55}
.hero-chip .hc-chg.up{color:var(--up)}
.hero-chip .hc-chg.down{color:var(--accent)}
.hero-h1{
  font-size:clamp(1.8rem,3.8vw,3.6rem);line-height:1.18;
  letter-spacing:0;max-width:36ch;margin:0 auto;
}
.h1-hot{color:var(--accent)}
.hero-sub{
  color:var(--text-secondary);font-size:clamp(1rem,1.5vw,1.25rem);
  margin:26px auto 34px;max-width:60ch;
}
.hero-sub b{color:var(--text-primary);font-weight:800}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.tp{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:26px;text-decoration:none;
  color:var(--text-primary);font-weight:600;font-size:.95rem;
}
.tp svg{width:21px;height:21px}
.tp:hover span{text-decoration:underline}
.hero-panel{
  position:absolute;inset:0;overflow:hidden;z-index:0;
  pointer-events:none;
}

/* anel orbital do demo, nas nossas cores */
.orbit-ring{
  position:absolute;inset:-2%;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.1) 40%,black 48%,black 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.1) 40%,black 48%,black 100%);
}
.orbit-svg{
  width:100%;height:100%;
  -webkit-transform:rotateX(62deg);transform:rotateX(62deg);
  animation:orbit-spin 30s linear infinite;
}
.orbit-text{
  font-family:'DepartureMono',monospace;font-size:6px;fill:var(--accent);
  letter-spacing:.11em;text-transform:uppercase;
}
@keyframes orbit-spin{
  from{transform:rotateX(62deg) rotateZ(0deg)}
  to{transform:rotateX(62deg) rotateZ(-360deg)}
}

/* bolinhas de circuito viajando nos arcos */
.g-pulse{
  position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:var(--accent-hover);
  box-shadow:0 0 9px var(--accent-hover);
  pointer-events:none;z-index:2;opacity:0;
  transition:opacity .4s,background .9s ease,box-shadow .9s ease;
}
/* every exchange shut: the routes idle in the same grey as a closed pin */
.hero-globe.is-standby .g-pulse{
  background:var(--mkt-off-dim);
  box-shadow:0 0 6px var(--mkt-off-dim);
}

/* o globo COBE no lugar do carro da referência */
.hero-globe{
  position:relative;width:min(1100px,94vw);aspect-ratio:1;
  margin:calc(4vh - 100px) auto 0;
  user-select:none;
  /* The routes canvas is given 14% of slack on every side so the arcs are not cut off,
     and that slack reaches up over the hero buttons. The pixels there are transparent
     but the canvas still took the click, so on every desktop width the main call to
     action, the demo button and the Trustpilot link were dead. The whole figure is
     decorative and aria-hidden; nothing in it is ever clicked. */
  pointer-events:none;
}
.globe-box{position:absolute;inset:0}
.globe-box canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important}
.globe-box>div{ /* the wrapper COBE v2 builds around the routes canvas: it is the only
                   layer that needs room around the globe, so the arcs are not cut off */
  position:absolute!important;inset:calc(-1 * var(--globe-pad,14%))!important;
  width:calc(100% + 2 * var(--globe-pad,14%))!important;
  height:calc(100% + 2 * var(--globe-pad,14%))!important;
  mix-blend-mode:var(--gb);
}
.globe-overlay{
  position:absolute;width:100%;top:50%;transform:translateY(-50%);
  text-align:center;color:var(--accent-hover);pointer-events:none;user-select:none;
  z-index:2;animation:fade-in 1.5s ease .2s both;
}
.globe-word{
  font-family:'GeistPixelLine',sans-serif;font-weight:400;
  font-size:min(14vw,5.6rem);letter-spacing:.15em;text-indent:.15em;line-height:1;
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.g-label{
  position:absolute;bottom:anchor(top);left:anchor(center);
  translate:-50% var(--nudge,0px);   /* the script nudges balloons apart */
  margin-bottom:8px;padding:.15rem .35rem;
  /* closed by default: the same neutral chip the timezone pill uses, so red is
     left to mean one thing only, that the market is trading right now */
  background:var(--canvas);
  /* a stronger hairline than --line: on a weekend every tag is closed and three
     pale chips on a white globe need an edge to sit on */
  border:1px solid color-mix(in srgb, var(--line) 45%, var(--mkt-off-dim));
  color:var(--mkt-off-dim);
  font-family:'DepartureMono',monospace;font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:opacity .8s,filter .8s,background-color .45s var(--ease-out),
             border-color .45s var(--ease-out),color .45s var(--ease-out);
  pointer-events:none;z-index:3;
}
.g-label .gl-n{color:var(--mkt-off-ink)}
.g-label.is-open{background:var(--accent-tag);border-color:var(--accent-tag);color:#fff}
.g-label.is-open .gl-n,.g-label.is-open .gl-h{color:#fff}
/* each label carries its centre's session, in the visitor's own clock */
/* City on top, its session underneath: side by side the labels grow wide enough
   to collide with each other on the globe. */
.g-label{display:grid;grid-template-columns:auto auto;gap:0 .32rem;line-height:1.32}
.gl-dot{width:5px;height:5px;border-radius:50%;background:var(--mkt-off-dim);flex:none;margin-top:.32em}
/* trading right now: the dot beats, with red spilling past the chip */
.g-label.is-open .gl-dot{background:#fff;opacity:1;animation:mkt-live 1.5s var(--ease-soft) infinite}
@keyframes mkt-live{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55),0 0 5px 1px var(--accent-hover)}
  50%{box-shadow:0 0 0 5px rgba(255,255,255,0),0 0 13px 5px var(--accent-hover)}
}
.gl-h{grid-column:2;letter-spacing:.02em;text-transform:none;font-size:.92em}
/* Same balloons on the sphere at every size; on a small globe they only get
   tighter, so six of them still fit without touching. */
/* On a small globe two cities can sit close enough for their balloons to touch,
   so the balloons stand further off their pin: the ones above go higher, the
   ones below go lower, which separates them by row instead of by width. */

/* Which clock the hours are being shown in. It sits in the middle of the globe,
   where the wordmark used to be: the hours are scattered around the sphere and
   this is what makes sense of them. */
.globe-status{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  pointer-events:none;
}
.globe-tz{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.08em;
  color:var(--text-secondary);white-space:nowrap;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--canvas);
  animation:fade-in 1.2s ease .3s both;
}
.globe-tz svg{width:12px;height:12px;flex:none;color:var(--accent)}
/* every listed exchange is shut (nights, weekends): one red stamp under the clock */
.globe-closed{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-m);font-size:.6rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--closed-ink);
  padding:5px 12px;border:1px solid var(--closed-ink);border-radius:999px;
  background:var(--canvas);
  animation:fade-in .5s ease both;
}
.globe-closed .gc-dot{width:6px;height:6px;border-radius:50%;background:var(--closed-ink);flex:none}
@media (max-width:720px){
  .globe-status{top:46%;gap:7px}
  .globe-tz{font-size:.54rem;padding:4px 8px;gap:5px}
  .globe-closed{font-size:.5rem;padding:3px 9px;gap:5px;letter-spacing:.14em}
}

/* side by side with another label, the pointer stops meaning anything and only
   crowds the gap between two neighbouring cities */
.g-label.is-stacked::after{display:none}
/* the pointer under each label */
.g-label::after{
  content:"";position:absolute;top:100%;left:50%;
  transform:translate3d(-50%,-1px,0);
  border:5px solid transparent;
  border-top-color:var(--canvas);
  transition:border-color .45s var(--ease-out);
}
.g-label.is-open::after{border-top-color:var(--accent-tag)}

.g-label--down{
  bottom:auto;top:anchor(bottom);translate:-50% var(--nudge,0px);
  margin-bottom:0;margin-top:8px;
}
@supports not (anchor-name: --test){.g-label{display:none}}
.g-label--down::after{
  top:auto;bottom:100%;
  transform:translate3d(-50%,1px,0);
  border-top-color:transparent;
  border-bottom-color:var(--canvas);
}
.g-label--down.is-open::after{border-top-color:transparent;border-bottom-color:var(--accent-tag)}

/* Small globes get tighter type, never unreadable type: the opening hours are the
   whole point of the tag, and this face turns 0 into 8 below about 8px.
   Keeping the balloons apart is the script's job, since which cities crowd each
   other changes as the globe turns. */
@media (max-width:720px){
  .g-label{font-size:.56rem;padding:.14rem .24rem;gap:0 .22rem;letter-spacing:.04em}
  .gl-dot{width:4px;height:4px;margin-top:.3em}
  .g-label::after{border-width:4px}
}
@media (max-width:420px){
  .g-label{font-size:.52rem;padding:.12rem .2rem}
}

.cue{
  display:none;
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:var(--z-cue);
  display:flex;align-items:center;gap:8px;color:var(--text-secondary);
  font:500 .72rem var(--font-m);letter-spacing:.18em;text-transform:uppercase;
}
.cue svg{width:14px;height:14px;animation:cue-dip 2.6s var(--ease-soft) -1.2s infinite}
@keyframes cue-dip{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}

/* ============ Seções ============ */
main>section{padding:clamp(64px,10vw,130px) clamp(20px,6vw,72px);max-width:1200px;margin:0 auto}
/* the rule above belongs to the landing only. Every secondary page (.page-body) has its own
   rhythm: no home padding/max-width and no inherited margin:0 auto, which on mobile turns into
   phantom centring inside the flex. Each page restores its spacing in its own rules. */
.page-body main>section{padding:0;max-width:none;margin:0}
main.dl>.dl-grid{margin-top:34px}

/* Alternating bands, edge to edge. The order of the page decides who is tinted:
   the tape is tinted, so markets below it is not, and the campaign strip and the
   numbers share one tint because they read as a single block. */
.promo,.stats,.pricing,.auto,.app,.edu,.company{
  background:var(--panel);
  box-shadow:0 0 0 100vmax var(--panel);
  clip-path:inset(0 -100vmax);
}

/* stats bar: a rule, not a box */
.stats{
  display:flex;flex-wrap:wrap;gap:clamp(22px,5vw,64px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-top:clamp(28px,4vw,44px)!important;padding-bottom:clamp(28px,4vw,44px)!important;
}
.stat{display:flex;flex-direction:column;gap:6px}
.stat-n{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--text-primary)}
.stat-l{color:var(--text-secondary);font-size:.9rem}
.stat-hot .stat-n{color:var(--accent)}

/* o fio condutor */

/* faixa promocional (slot de campanha) */
.promo{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:16px!important;padding-bottom:16px!important;
}
.promo p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;max-width:none;color:var(--text-secondary)}
.promo-tag{color:var(--accent);font-size:.66rem;letter-spacing:.2em;border:1px solid var(--accent-muted);border-radius:999px;padding:3px 10px}
.promo .btn{margin-left:auto}

/* where the visitor is connecting from: pin, flag, country, address */
.geo{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-secondary);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 10px;background:var(--wash)}
.geo[hidden]{display:none}
.geo-pin{width:14px;height:14px;flex:none;color:var(--accent)}
.geo-flag{width:18px;height:18px}
.geo-city{font-size:.82rem;color:var(--text-primary);font-weight:600}
.geo-city[hidden]{display:none}
/* the token alone, no opacity: at .85 it fell to 4.35:1 dark and 3.79:1 light on the pill */
.geo-ip{font-size:.72rem;color:var(--text-secondary);padding-inline-start:8px;border-inline-start:1px solid var(--line)}
/* on the region-block screen the address sits beside the country, on the same line */
.geo-here{margin:0;padding:4px 12px 4px 9px}
.geo-here .geo-ip{border-inline-start:0;padding-inline-start:0}
@media (max-width:600px){.geo{font-size:.76rem;padding:4px 10px 4px 8px}.geo-ip{font-size:.66rem}}

/* automação */
.auto h2{margin-bottom:14px}
.auto-lede{color:var(--text-secondary);margin-bottom:40px}

/* educação (slot em breve) */
.edu{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.edu>.part{min-width:0;max-width:100%} /* lets the text wrap instead of pushing the block past a phone's edge */
.edu h2{margin-bottom:8px}
.edu p{color:var(--text-secondary)}
.edu-soon{margin-left:auto;color:var(--accent);letter-spacing:.24em;font-size:.72rem;border:1px solid var(--accent-muted);border-radius:999px;padding:8px 18px;white-space:nowrap}


/* baixar a platform */
.app{text-align:center}
.app h2{margin-bottom:14px}
.app p{color:var(--text-secondary);margin:0 auto 30px}
.app-badges{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* markets: asset classes as rules, not boxes */
.markets h2{margin-bottom:14px}
.markets-lede{color:var(--text-secondary);margin-bottom:40px}
.markets-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 clamp(28px,5vw,64px)}
.markets-list li{padding:18px 0;border-top:1px solid var(--line)}
.markets-list h3{color:var(--accent);letter-spacing:.2em;font-size:.8rem;margin-bottom:6px;text-transform:uppercase}
.markets-list p{color:var(--text-secondary);font-size:.94rem}

/* plataformas por dispositivo */
.plat-row{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 clamp(20px,3vw,40px);grid-column:1 / -1;margin-top:34px}
.plat-row li{padding:16px 0;border-top:1px solid var(--line);display:grid;gap:5px}
.plat-row h3{letter-spacing:.16em;font-size:.82rem}
.plat-dev{color:var(--text-secondary);font-size:.66rem;letter-spacing:.12em}
/* the platforms each block runs on, named by their own marks */
.plat-ics{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.plat-ics svg{width:17px;height:17px;color:var(--accent)}

/* withdraw: assimétrico, demo à direita */
.withdraw{display:grid;grid-template-columns:minmax(300px,1.1fr) minmax(280px,.9fr);gap:clamp(32px,6vw,84px);align-items:center}
/* ---- the signature section rides on the drift footage -------------------------
   The clip takes the whole width of the block at every size and is never cropped
   sideways, so the entire shot reads from edge to edge; its height follows from
   that width, which makes it a band across a block that is always taller. The top
   and bottom edges are masked into the canvas, so the footage has no seam, and the
   wash over it is FLAT: the point of the band is that the car reads across the
   whole block, not only on the demo side. */
.withdraw{position:relative;isolation:isolate}
/* The footage runs from one edge of the SCREEN to the other and fills the section's full
   height: the section itself is capped at 1200px like every other, so the clip breaks out
   of that cap and the copy stays on the page's own measure. No letterbox, no faded edge,
   nothing of the canvas showing through. html and body already clip sideways, so the
   break-out never produces a horizontal scrollbar. */
.withdraw-media{
  position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;
  width:100vw;z-index:0;overflow:hidden;
}
.withdraw-video{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  position:relative;z-index:0;pointer-events:none;
  /* on the dark canvas the fog is pulled down and the contrast up, so the white car
     separates from the smoke instead of dissolving into a flat grey */
  filter:saturate(.72) brightness(.88) contrast(1.18);
}
html[data-theme="light"] .withdraw-video{filter:saturate(.62) brightness(1.05) contrast(.98)}
/* measured on the clip itself: at this density the brightest fog still clears 4.5:1
   against --text-primary, and the car keeps enough of its own contrast to read.
   The wash rides with the footage, not with the section: over the canvas it would be
   the canvas colour over itself, which is nothing. */
.withdraw-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:color-mix(in srgb, var(--canvas) 48%, transparent);
}
html[data-theme="light"] .withdraw-media::after{background:color-mix(in srgb, var(--canvas) 45%, transparent)}
/* An eight-second loop that runs behind body copy has to be stoppable (WCAG 2.2.2).
   The control sits on the corner of the band, keeps the visitor's choice when the
   section scrolls out and back, and is built from the panel and line tokens. */
.withdraw-vtoggle{
  /* bottom, not top: the clip now covers the whole block, and the block is taller than
     the screen on a phone, so a control at the top hides under the sticky bar on a laptop
     and sits above the fold on a phone. The bottom corner is below both columns. */
  position:absolute;bottom:14px;inset-inline-end:14px;z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  /* it carries no text, but a button left on the UA default drags a fourth font family
     and a ninth size into the page's type system; it takes the same font as any button */
  font:600 .95rem var(--font-b);
  border:0;border-radius:999px;
  /* the ink, not the panel: on the light canvas a white control over white fog measured
     1.87:1 against its own ground, and a control has to be seen before it can be used */
  background:var(--text-primary);color:var(--canvas);cursor:pointer;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out);
}
.withdraw-vtoggle:hover{background:var(--accent);color:#fff}
.withdraw-vtoggle svg{width:19px;height:19px;fill:currentColor}
.withdraw-vtoggle .ic-vplay,.withdraw-vtoggle.is-paused .ic-vpause{display:none}
.withdraw-vtoggle.is-paused .ic-vplay{display:block}
/* the brand red on its own red button, over moving footage, measured 1.39:1; the ink
   the copy already uses clears 3:1 against every frame sampled and against both canvases */
.withdraw :focus-visible,.btn-solid:focus-visible{outline-color:var(--text-primary)}
.withdraw-copy,.withdraw-demo{position:relative;z-index:2}
.withdraw-copy h2{margin-bottom:24px;text-shadow:var(--tshadow)}
/* copy on footage takes the primary ink: the muted grey cannot clear 4.5:1 over fog
   at any wash that still lets the car through (it tops out at 3.6:1) */
/* body-l, the lede step: the copy is the section's argument. One 24px rhythm between
   heading, paragraphs and button */
.withdraw-copy p{color:var(--text-primary);font-size:1.05rem;margin-bottom:24px;text-shadow:var(--tshadow)}
.withdraw-demo{display:grid;gap:16px;justify-items:center}
/* the click still has something to answer it: the route is drawn and a pulse runs it,
   the same figure that stood here before the footage did */
.withdraw-globe svg{width:min(200px,52vw);height:auto}
.sg-sphere{fill:none;stroke:var(--mkt-off-dim);stroke-width:1;opacity:.5}
.sg-lat,.sg-lon{fill:none;stroke:var(--mkt-off-dim);stroke-width:.7;opacity:.34}
.sg-arc{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:var(--al,300);stroke-dashoffset:var(--al,300);opacity:0;transition:opacity .3s}
.sg-pulse{fill:var(--accent-hover);opacity:0}
.sg-node{fill:var(--accent);opacity:.7}
.withdraw-demo.fired .sg-arc{opacity:1;animation:arc-draw .5s var(--ease-out) forwards}
.withdraw-demo.fired .sg-pulse{animation:pulse-run .5s var(--ease-out) forwards}
@keyframes arc-draw{to{stroke-dashoffset:0}}
@keyframes pulse-run{0%{opacity:1;offset-distance:0%}100%{opacity:.9;offset-distance:100%}}
.sg-pulse{offset-path:path('M50,140 C80,60 150,60 176,120')}
/* the panel is a mock of the real terminal UI, so it IS a closed card:
   border on all four sides and the same breathing room left and right as top and bottom */
.withdraw-panel{
  width:min(340px,100%);display:grid;gap:16px;
  border:1px solid var(--line);border-radius:14px;
  padding:24px;background:var(--panel);
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}
html[data-theme="light"] .withdraw-panel{box-shadow:0 18px 46px rgba(23,18,21,.10)}
.withdraw-row{display:flex;justify-content:space-between;align-items:baseline;color:var(--text-secondary);font-size:.88rem}
.withdraw-row .mono{color:var(--text-primary);font-size:1.05rem}
.withdraw-btn{width:100%}
/* receipt line: visible at rest ("Status —") so the slot never reads as a gap;
   the stamp itself is injected on click, which is also what makes aria-live fire */
.withdraw-stamp{display:flex;justify-content:space-between;align-items:center;min-height:1.9rem}
.stamp-label{color:var(--text-secondary);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.stamp-ok{
  color:var(--menu-on);font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  animation:stamp-hit .13s cubic-bezier(.2,1.4,.3,1) both;
}
.stamp-t{color:var(--text-secondary);font-size:.82rem}
.withdraw-demo.fired .stamp-t{animation:stamp-hit .13s cubic-bezier(.2,1.4,.3,1) both}
@keyframes stamp-hit{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
.withdraw-note{color:var(--text-secondary);font-size:.82rem;max-width:none}

/* pricing: duas colunas separadas por régua */
.pricing h2{margin-bottom:14px}
.pricing-lede{color:var(--text-secondary);margin-bottom:44px}
.pricing-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(28px,5vw,72px)}
.account h3{color:var(--text-secondary);letter-spacing:.2em;font-size:.8rem;margin-bottom:20px}
.account-raw h3{color:var(--accent)}
.account dl{display:grid;gap:0}
.account dl div{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
.account dt{color:var(--text-secondary);font-size:.92rem}
.account dd{font-size:.98rem}
.account-for{color:var(--text-secondary);font-size:.88rem;margin-top:16px}

/* execução: texto à esquerda, lista à direita */
.exec{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1fr);gap:clamp(32px,6vw,84px);align-items:start}
.exec-copy h2{margin-bottom:18px}
.exec-copy p{color:var(--text-secondary)}
.exec-list{list-style:none;display:grid;gap:0}
.exec-list li{padding:12px 0 12px 26px;border-top:1px solid var(--line);position:relative}
.exec-list li::before{content:"";position:absolute;left:2px;top:1.35em;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* depósito: centrado, métodos como carimbos */
.deposit{text-align:center}
.deposit h2{margin-bottom:14px}
.deposit p{color:var(--text-secondary);margin:0 auto 36px}
/* payment families, not brand names: one chip per way of paying */
.pays{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0;margin:0}
.pay{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel);
  border-radius:999px;padding:10px 18px;font-size:.88rem;color:var(--text-primary)}
.pay-ic{width:19px;height:19px;flex:none;color:var(--accent)}
.pay-brands{display:inline-flex;align-items:center;gap:7px;margin-inline-start:2px;
  padding-inline-start:10px;border-inline-start:1px solid var(--line)}
.bm{height:13px;display:inline-flex;align-items:center}
/* the two card networks, as marks rather than words */
.bm-visa{font:italic 800 12px/1 var(--font-b);letter-spacing:.02em;color:#F3F3F3}
html[data-theme="light"] .bm-visa{color:#1434CB}
.bm-mc{width:27px;height:13.5px}
.app-badge{display:inline-flex;align-items:center;gap:9px}
.badge-ic{width:17px;height:17px;flex:none}
.pay-note{text-align:center;color:var(--text-secondary);font-size:.86rem;margin-top:16px}
@media (max-width:520px){
  .pay{padding:9px 14px;font-size:.82rem;gap:8px}
  .pay-brands{padding-inline-start:8px;gap:6px}
}

/* steps: sequência real, números merecidos */
.steps h2{margin-bottom:40px}
.steps-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,4vw,44px)}
.steps-list li{display:grid;gap:10px;align-content:start}
.step-n{color:var(--accent);font-size:1.5rem}
.steps-list p{color:var(--text-secondary);font-size:.94rem}

/* FAQ */
.faq h2{margin-bottom:34px}
.faq-list{display:grid}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{
  cursor:pointer;list-style:none;position:relative;
  padding:20px 44px 20px 0;font-weight:600;font-size:1.02rem;
  transition:color .25s var(--ease-out);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--font-m);color:var(--accent);font-size:1.15rem;
  transition:transform .3s var(--ease-out);
}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list summary:hover{color:var(--accent)}
.faq-list details p{color:var(--text-secondary);padding:0 0 22px;max-width:70ch}

/* company: bloco de texto honesto, sem moldura */
.company{max-width:820px}
.company h2{margin-bottom:18px}
.company p{color:var(--text-secondary);margin-bottom:14px}
.company-reg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px 32px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.company-reg dt{font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:4px}
.company-reg dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.company-reg-wide{grid-column:1/-1}

/* final CTA: the one moment drenched in red */
.closing{max-width:none;padding-left:0;padding-right:0}
.closing-frame{
  background:linear-gradient(160deg,#B90E1B,#D4131F 55%,#B90E1B);
  color:#fff;text-align:center;padding:clamp(70px,10vw,120px) 24px;
}
.closing h2{font-size:clamp(1.8rem,4.6vw,3.2rem);margin-bottom:16px;color:#fff}
.closing p{color:rgba(255,255,255,.88);margin:0 auto 34px}
.closing .btn-solid{background:#fff;color:var(--accent)}
.closing .btn-solid:hover{background:#FFF3F3}

/* footer */
.footer{border-top:1px solid var(--line);padding:44px clamp(20px,6vw,72px);display:grid;gap:18px;max-width:1200px;margin:0 auto}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px;padding:10px 0 6px}
.foot-cols h3{font-family:var(--font-m);color:var(--text-secondary);font-size:.68rem;letter-spacing:.2em;margin-bottom:10px}
.foot-cols a{display:block;text-decoration:none;color:var(--text-secondary);font-size:.9rem;padding:3px 0;transition:color .25s var(--ease-out)}
/* an address may break only where the markup puts <wbr>, before the @; never mid-word */
.foot-mail{font-size:.82rem;overflow-wrap:normal}
.foot-cols a:hover{color:var(--accent)}
.foot-risk{color:var(--text-secondary);font-size:.8rem;max-width:90ch}
.foot-line{color:var(--text-secondary);font-size:.75rem}

/* ============ Entradas (abaixo da dobra) ============ */
.rev .part{opacity:0;transform:translateY(22px)}
.rev.in .part{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rev.in .part:nth-child(2){transition-delay:.09s}
.rev.in .part:nth-child(3){transition-delay:.18s}
.rev.in .part:nth-child(4){transition-delay:.27s}
.rev.in .part:nth-child(5){transition-delay:.36s}
.rev.in.settled .part:nth-child(n){transition-delay:0s}

/* pausa global (aba oculta) */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* telas rasas: sem a seta de rolagem */
@media (max-height:560px){.cue{display:none}}

/* ============ Download page ============ */
.page-body{padding-top:86px}
.dl{max-width:1060px;margin:0 auto;padding:clamp(28px,5vh,64px) 20px 60px}
.dl-head h1{font-size:clamp(1.5rem,3vw,2.4rem);margin-bottom:14px}
.dl-head p{color:var(--text-secondary);max-width:56ch}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:34px}
.dl-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;transition:border-color .25s var(--ease-out),transform .25s var(--ease-out)}
.dl-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.dl-ic{width:30px;height:30px;color:var(--accent);margin-bottom:10px}
.dl-t{font-size:.82rem;letter-spacing:.09em;color:var(--text-primary)}
.dl-s{color:var(--text-secondary);font-size:.92rem}
/* the browser card is the frictionless path: accent border and lit label */
.dl-card--web{border-color:var(--accent)}
.dl-card--web .dl-t{color:var(--menu-on)}
.dl-stores-t{margin:26px 0 10px;color:var(--text-secondary)}
.dl-stores{display:flex;gap:10px;flex-wrap:wrap}
.dl-store{display:inline-flex;align-items:center;gap:9px}
.dl-store svg{width:18px;height:18px}
/* single section rhythm: 48px from previous content to the rule, 28px from rule to heading. */
main.dl>.dl-req,main.dl>.dl-help,main.dl>.dl-steps{margin-top:48px;border-top:1px solid var(--line);padding-top:28px}
.dl-req h2,.dl-help h2,.dl-steps h2{font-size:1.05rem;margin-bottom:18px}
.dl-req{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.dl-req dl{display:grid;grid-template-columns:auto 1fr;gap:8px 22px}
.dl-req dt{color:var(--text-secondary);font-weight:600;font-size:.92rem}
.dl-req dd{margin:0;font-size:.95rem}
.dl-ol{margin:0 0 22px;padding-inline-start:22px;color:var(--text-secondary);display:grid;gap:10px;max-width:62ch}
.dl-ol li::marker{color:var(--accent);font-weight:700}
/* inner separator only BETWEEN questions: never doubles with the next section rule */
.dl-help details+details{border-top:1px solid var(--line)}
.dl-help summary{cursor:pointer;font-weight:600;padding:13px 0;min-height:44px;display:flex;align-items:center}
/* the accordion padding stays out of the section rhythm (min-height keeps the 44px target) */
.dl-help details:first-of-type summary{padding-top:0}
.dl-help details:last-of-type summary{padding-bottom:0}
.dl-help p{color:var(--text-secondary);margin:0 0 14px;max-width:70ch}
@media (max-width:720px){
  /* on phones the store leads: header, then the stores, then the rest */
  main.dl{display:flex;flex-direction:column}
  .dl-head{order:-3}
  .dl-stores-t{order:-2;margin-top:30px}
  .dl-stores{order:-1}
  .dl-store{flex:1;justify-content:center;min-height:54px;font-size:1rem}
  .dl-req dl{grid-template-columns:1fr;gap:2px}
  .dl-req dd{margin-bottom:10px}
}

/* ============ risk disclosure page (long document) ============ */
.rk{max-width:760px;margin:0 auto;padding:clamp(28px,5vh,64px) 20px 72px}
.rk-kicker{font-size:.72rem;letter-spacing:.16em;color:var(--menu-on);margin-bottom:10px}
.rk-head h1{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:12px}
.rk-sub{color:var(--text-secondary);max-width:60ch}
.rk-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.rk-dl{display:inline-flex;align-items:center;gap:10px}
.rk-dl svg{width:18px;height:18px}
.rk-pdfinfo{color:var(--text-secondary);font-size:.86rem}
.rk-meta{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.rk-meta dt{font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:4px}
.rk-meta dd{margin:0;font-weight:600}
.rk-note{margin-top:18px;color:var(--text-secondary);font-size:.86rem;max-width:64ch}

main.rk>.rk-sec{margin-top:48px;border-top:1px solid var(--line);padding-top:28px}
.rk-sec h2{font-size:1.22rem;margin-bottom:18px}
.rk-sec h3{font-size:.98rem;font-weight:800;margin:22px 0 8px}
.rk-sec p{color:var(--text-secondary);margin-bottom:12px;max-width:68ch}
.rk-sec strong{color:var(--text-primary)}
.rk-sec ul,.rk-sec ol{color:var(--text-secondary);margin:0 0 12px;padding-inline-start:22px;max-width:68ch}
.rk-sec li{margin-bottom:6px}
.rk-sec li::marker{color:var(--accent)}

/* inner index: 8 sections, one anchor each */
.rk-toc{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.rk-toc-t{font-size:.66rem;letter-spacing:.12em;color:var(--text-secondary);margin-bottom:12px}
.rk-toc ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 22px;counter-reset:rk}
.rk-toc li{counter-increment:rk}
.rk-toc a{
  display:flex;gap:9px;align-items:baseline;padding:7px 0;
  color:var(--text-secondary);text-decoration:none;font-size:.92rem;
  transition:color .2s var(--ease-out);
}
.rk-toc a::before{content:counter(rk) ".";font-family:var(--font-m);font-size:.72rem;color:var(--accent);min-width:16px}
.rk-toc a:hover{color:var(--text-primary)}
@media (pointer:coarse){.rk-toc a{min-height:44px;align-items:center}}

/* REAL NOTICE (final content, e.g. we are not regulated): red, solid border */
.rk-callout{
  background:var(--accent-muted);border:1px solid var(--accent);border-radius:10px;
  padding:16px 18px;margin:16px 0;
}
.rk-callout b{display:block;font-size:.68rem;letter-spacing:.12em;color:var(--menu-on);margin-bottom:8px}
.rk-callout p{margin:0;color:var(--text-primary);font-size:1rem;max-width:none}

/* INFORMATION TO BE PUBLISHED: neutral and quiet, does not compete with real content */
.rk-pend{
  background:var(--wash);border:1px dashed var(--line);border-radius:10px;
  padding:14px 16px;margin:14px 0;
}
.rk-pend b{display:block;font-size:.68rem;letter-spacing:.12em;color:var(--text-secondary);margin-bottom:6px}
.rk-pend b::after{content:" · PENDING";opacity:.7}
.rk-pend p{margin:0;color:var(--text-secondary);font-size:.95rem;max-width:none}

/* missing-data marker: neutral mono, wraps on narrow screens */
.rk-ph{
  font-family:var(--font-m);font-size:.82em;color:var(--text-secondary);
  background:var(--wash);border-radius:4px;padding:1px 5px;
  overflow-wrap:anywhere;
}
.rk-end{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* general responsive */
@media (max-width:900px){
  .withdraw,.exec{grid-template-columns:1fr}
  /* the figure sits right on top of the car once everything is centred, so it gives way
     and stays the quieter of the two */
  .withdraw-globe svg{width:min(160px,42vw)}
  .nav-menu{display:none}
  .nav-in{justify-content:space-between} /* without the centre menus, the buttons move to the end edge */
}
@media (max-width:720px){
  .hero{min-height:560px;padding-bottom:3vh}
  .hero-globe{margin-top:14px} /* breathing room on mobile: labels do not touch Trustpilot */
  .stats{gap:18px 34px}
  .nav-in{gap:8px;padding:0 20px} /* same breathing room left and right on phones */
  .nav-right{gap:8px}
  /* phones keep the numeral alone: the name would eat the row.
     These need the html prefix to outweigh the theme rules above, which are
     two classes deep; a bare .logo-word loses and the name stays visible. */
  html .nav-logo .logo-word,html[data-theme="light"] .nav-logo .logo-word{display:none}
  .btn-cta{padding:8px 12px;font-size:.8rem;white-space:nowrap}
}
/* 480, not 440: the folded iPhone Duo is 466 wide and is physically a 5.4 inch phone.
   A breakpoint inside the 440 to 479 band splits that decision in half and hands a
   phone the roomier rules written for a tablet. */
@media (max-width:480px){
  .nav-in{gap:6px}
  .logo-7{height:38px}
  .theme-btn{padding:8px 6px}
  .btn-cta{padding:8px 10px}
  .nav-right{gap:6px}
  /* a word longer than a phone is wide (Tamil, German compounds) breaks instead of
     running past the edge; it only ever breaks when the word cannot fit at all */
  h1,h2,h3{overflow-wrap:anywhere}
  /* the hero buttons may take two lines rather than leave the screen */
  .hero-ctas .btn{white-space:normal;max-width:100%;text-align:center}
}
/* the top bar of a small phone cannot hold two text buttons in every language
   (measured 2026-09-25: Sign up was cut at 320px in pt-BR, fr, de, es and five more).
   Log in keeps its place as an icon, one tap away, with its name for screen readers;
   the language button keeps the flag and drops the arrow. */
.nav-login .ic-user{display:none;width:18px;height:18px;flex:none}
@media (max-width:400px){
  .nav-login{padding:8px 10px;min-width:44px}
  .nav-login .ic-user{display:block}
  .nav-login .btn-label{display:none}
  .lang-item>.nav-drop>svg{display:none}
}
/* the same two give-ways, chosen by fitNavRow() in locales.js when the row is too short for
   the language on screen (any width): Log in as its icon, then the menus out of the row */
.nav.nav-fit-icon .nav-login{padding:8px 10px;min-width:44px}
.nav.nav-fit-icon .nav-login .ic-user{display:block}
.nav.nav-fit-icon .nav-login .btn-label{display:none}
.nav.nav-fit-nomenu .nav-menu{display:none}
.nav.nav-fit-nomenu .nav-in{justify-content:space-between}
.btn{white-space:nowrap}

/* ============ Side menu (the bar's menus, when the bar has no room for them) ============
   The menu button replaces the menus and the theme toggle in the bar; the toggle moves to the
   sheet's head. Built by buildNavSheet() in locales.js. */
.nav-burger{display:none;justify-content:center;min-width:44px;min-height:44px;padding:10px}
.nav-burger svg,.nav-sheet-head .nav-drop svg{width:20px;height:20px;opacity:1}
@media (max-width:900px){
  .nav-burger{display:inline-flex}
  .nav-right>.theme-btn{display:none}
}
.nav.nav-fit-nomenu .nav-burger{display:inline-flex}
.nav.nav-fit-nomenu .nav-right>.theme-btn{display:none}
.nav.nav-fit-nologin .nav-right>.nav-login{display:none}

.nav-sheet{
  position:fixed;inset-block:0;inset-inline:auto 0;margin:0;
  width:min(400px,100vw);max-width:none;height:100%;max-height:none;
  padding:0;border:0;border-inline-start:1px solid var(--line);
  background:var(--panel);color:var(--text-primary);box-shadow:var(--elev-modal);
  --sheet-from:100%;
}
html[dir="rtl"] .nav-sheet{--sheet-from:-100%}
.nav-sheet[open]{display:flex;flex-direction:column;animation:sheet-in .25s var(--ease-out)}
.nav-sheet::backdrop{background:var(--scrim);animation:sheet-veil .25s var(--ease-out)}
@keyframes sheet-in{from{transform:translateX(var(--sheet-from))}}
@keyframes sheet-veil{from{opacity:0}}
@keyframes sheet-out{to{transform:translateX(var(--sheet-from))}}
@keyframes sheet-veil-out{to{opacity:0}}
.nav-sheet.nav-sheet--out{animation:sheet-out .17s var(--ease-soft) forwards}
.nav-sheet.nav-sheet--out::backdrop{animation:sheet-veil-out .17s var(--ease-soft) forwards}
.nav-sheet{touch-action:manipulation}
/* the page under the sheet stays put */
html:has(.nav-sheet[open]){overflow:hidden}
.nav-sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 20px;border-bottom:1px solid var(--line);
}
.nav-sheet-head .nav-drop{min-width:44px;min-height:44px;justify-content:center;padding:12px}
.nav-sheet-body{flex:1;overflow:auto;padding:8px 20px calc(32px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.nav-sheet-group{padding-top:24px}
.nav-sheet-h{font:600 .82rem/1.4 var(--font-b);color:var(--text-secondary);margin-bottom:8px}
.nav-sheet-list{list-style:none}
.nav-sheet-list li{border-top:1px solid var(--line)}
.nav-sheet-link{
  display:flex;align-items:center;min-height:48px;padding:12px 0;
  font:600 1.05rem/1.3 var(--font-b);color:var(--text-primary);text-decoration:none;
  transition:color .12s var(--ease-out);
}
.nav-sheet-link--on{color:var(--menu-on)}
.nav-sheet-login{display:flex;justify-content:center;width:100%;min-height:48px;margin-top:24px}
@media (hover:hover){.nav-sheet-link:hover{color:var(--menu-on)}}
.nav-sheet-link:active{color:var(--menu-on)}
@media (max-width:480px){
  .nav-sheet{width:100vw;border-inline-start:0}
}

/* Product decision: animations always run; prefers-reduced-motion is not handled. */

/* the hero chip ticks with the same colours as the tape */
.hc-sym{transition:color .5s var(--ease-out)}
.hc-sym.up{color:var(--up);transition:none}
.hc-sym.down{color:var(--accent-hover);transition:none}

/* ---------------- live tape ---------------- */
.tape{
  position:relative;overflow:hidden;background:var(--panel);
  padding:0!important;max-width:none;margin:0;   /* full bleed: the landing section rhythm does not apply */
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
}
.tape[hidden]{display:none}
.tape-track{display:flex;width:max-content;animation:tape-roll 64s linear infinite;will-change:transform}
@keyframes tape-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* reading a price should not be a chase: the tape stops under the pointer */
.tape:hover .tape-track{animation-play-state:paused}

.tape-i{display:inline-flex;align-items:baseline;gap:9px;padding:13px 24px;white-space:nowrap;border-inline-end:1px solid var(--line)}
.tape-n{font-family:var(--font-m);font-size:.7rem;letter-spacing:.1em;color:var(--text-secondary)}
.tape-p{font-family:var(--font-m);font-size:.86rem;color:var(--text-primary);font-variant-numeric:tabular-nums;transition:color .5s var(--ease-out)}
/* the tick itself colours the number: green while it climbs, red while it drops */
.tape-p.up{color:var(--up);transition:none}
.tape-p.down{color:var(--accent-hover);transition:none}
.tape-c{font-family:var(--font-m);font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.tape-c.up{color:var(--up)}
.tape-c.down{color:var(--accent-hover)}

@media (max-width:720px){
  .tape-i{padding:11px 16px;gap:7px}
  .tape-n{font-size:.64rem}
  .tape-p{font-size:.8rem}
  .tape-c{font-size:.66rem}
  .tape{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
        mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
}

/* ---------------- contact page ---------------- */
.ct{max-width:1060px;margin:0 auto;padding:clamp(28px,5vh,64px) 20px 60px}
.ct-head h1{font-size:clamp(1.5rem,3vw,2.4rem);margin-bottom:14px;text-wrap:balance}
.ct-head p{color:var(--text-secondary);max-width:58ch;text-wrap:pretty}
.ct-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,52px);margin-top:clamp(30px,5vh,46px);align-items:start}
.ct-lanes-h,.ct-panel h2{font-size:1.05rem;margin-bottom:6px}
.ct-lanes{padding-top:clamp(20px,3vw,28px)} /* matches the panel padding so both headings align */

/* the four addresses are ruled rows, not a card grid: the address is the headline of each row */
.ct-lane{position:relative;display:grid;gap:3px;text-decoration:none;padding:15px 0;border-top:1px solid var(--line)}
/* the hover panel breathes 12px wider than the text without moving it */
.ct-lane::before{content:"";position:absolute;inset:1px -12px 0;border-radius:10px;background:transparent;transition:background-color .2s var(--ease-out)}
.ct-lane>*{position:relative}
.ct-lanes .ct-lane:last-of-type{border-bottom:1px solid var(--line)}
.ct-lane:hover::before,.ct-lane:focus-visible::before,.ct-lane:active::before{background:var(--wash)}
/* on touch there is no hover, so the press itself has to answer */
.ct-pick-opt:active{background:var(--wash);color:var(--text-primary)}
.ct-lane:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ct-lane-role{font-size:.68rem;letter-spacing:.14em;color:var(--text-secondary)}
.ct-lane-mail{font-weight:600;color:var(--text-primary);overflow-wrap:anywhere;transition:color .2s var(--ease-out)}
.ct-lane:hover .ct-lane-mail{color:var(--menu-on)}
.ct-lane-what{color:var(--text-secondary);font-size:.92rem;line-height:1.5}
.auth-legal-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px} /* centred like the notes above it */
/* the text stays 12px on a 19.2px line; the hit area grows around it. 4px of padding and
   -4px of margin give a 27.2px target with a mouse without moving a line, and the 8px row
   gap is exactly what keeps two wrapped rows from overlapping */
.auth-legal-row .auth-legal-link{white-space:nowrap;display:inline-block;padding-block:4px;margin-block:-4px}
/* a finger needs 44px. Negative margin would stack the wrapped rows on top of each other,
   so on touch each link is a 44px row and the row's top margin gives back the 12px the
   taller box adds above the first line of text */
@media (pointer:coarse){
  .auth-legal .auth-risk + .auth-legal-row{margin-top:0}
  .auth-legal-row{row-gap:0}
  .auth-legal-row .auth-legal-link{display:inline-flex;align-items:center;min-height:44px;padding-block:0;margin-block:0}
}
.rk-mail{color:var(--menu-on);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.rk-mail:hover{color:var(--accent-hover);text-decoration:underline}
.rk-contact{margin-top:18px;color:var(--text-secondary);font-size:.9rem}
.ct-note{margin-top:16px;color:var(--text-secondary);font-size:.88rem;max-width:46ch}

/* the form sits in one closed panel, the only box on the page */
.ct-panel{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:clamp(20px,3vw,28px);box-shadow:0 18px 46px rgba(0,0,0,.24)}
html[data-theme="light"] .ct-panel{box-shadow:0 14px 34px rgba(23,18,21,.07)}
.ct-form{display:grid;gap:15px;margin-top:16px}
.ct-form label{display:grid;gap:7px;font-size:.9rem;font-weight:600}
.ct-form label>span{color:var(--text-secondary)}
.ct-form input[type="text"],.ct-form input[type="email"],.ct-form select,.ct-form textarea{
  width:100%;background:var(--canvas);border:1px solid var(--line);border-radius:10px;
  color:var(--text-primary);font:400 1rem var(--font-b);padding:13px 14px;
  transition:border-color .25s var(--ease-out);
}
.ct-form textarea{resize:vertical;min-height:136px;line-height:1.55}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:none;border-color:var(--accent)}
.ct-form input:focus-visible,.ct-form select:focus-visible,.ct-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ct-form ::placeholder{color:var(--text-secondary);opacity:1}

/* Subject picker. A native select paints the OS menu over our page, so the list is ours. */
.ct-field{display:grid;gap:7px;font-size:.9rem;font-weight:600}
.ct-label{color:var(--text-secondary)}
.ct-pick{position:relative}
.ct-pick-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--canvas);border:1px solid var(--line);border-radius:10px;
  color:var(--text-primary);font:400 1rem var(--font-b);padding:13px 14px;cursor:pointer;
  transition:border-color .25s var(--ease-out);
}
.ct-pick-btn:hover{border-color:var(--text-secondary)}
.ct-pick-btn[aria-expanded="true"]{border-color:var(--accent)}
.ct-pick-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ct-pick-btn svg{width:10px;height:6px;flex:none;color:var(--text-secondary);transition:transform .25s var(--ease-out)}
.ct-pick-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ct-pick-list{
  position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:40;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.34);padding:6px;display:grid;gap:2px;
  animation:ct-pick-in .16s var(--ease-out) both;
}
html[data-theme="light"] .ct-pick-list{box-shadow:0 14px 34px rgba(23,18,21,.14)}
@keyframes ct-pick-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ct-pick-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:0;border-radius:8px;cursor:pointer;
  color:var(--text-secondary);font:400 .95rem var(--font-b);padding:11px 12px;text-align:start;
  transition:background-color .18s var(--ease-out),color .18s var(--ease-out);
}
.ct-pick-opt:hover,.ct-pick-opt:focus-visible{background:var(--wash);color:var(--text-primary);outline:none}
.ct-pick-opt[aria-selected="true"]{color:var(--menu-on);font-weight:600}
.ct-pick-opt[aria-selected="true"]::after{content:"";width:14px;height:8px;flex:none;
  border-inline-start:1.8px solid currentColor;border-block-end:1.8px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.ct-send{width:100%;margin-top:3px}
.ct-send[aria-busy="true"]{opacity:.75;pointer-events:none}
.ct-msg{font-size:.9rem;line-height:1.5}
.ct-msg--err{color:var(--accent-hover)}
.ct-msg--ok{color:var(--up)}
/* honeypot: never shown, never announced, catches the bots that fill everything */
.ct-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (max-width:860px){
  .ct-body{grid-template-columns:minmax(0,1fr);gap:34px} /* minmax(0,...): a long word must not widen the track past the screen */
  .ct-panel{padding:20px 16px}
  .ct-lanes{padding-top:0}
}

/* The one sentence that keeps the promise honest: approval is ours, arrival is
   the payment network's. It sits under the withdrawal claim, quieter than it.
   On footage the muted grey cannot hold 4.5:1, so size carries the hierarchy here
   and the ink stays primary, like the rest of the copy in this section. */
.withdraw-copy .withdraw-arrival{font-size:.88rem;line-height:1.55;max-width:62ch}