/* ══════════════════════════════════════════════════════════════════════════
   0FACE — shared design system.

   Every page of this site linked its own copy of `:root` and its own animated
   five-colour background. Twenty-five copies meant a palette change was
   twenty-five edits, and the mirrors drifted from the English page within a
   week of the first one. Tokens live HERE and only here; pages keep their own
   component rules, which resolve against these variables.

   The look is the new top traders site — sharp corners, one grid, mono-cased
   micro labels, editorial headlines — with the 0FACE palette on top.

   TWO accents, ONE rule each, no third:
     --amber  the brand and every primary action   → "private execution"
     --p      verified / clean / operational state → "verified funds"
   A green button and an amber status badge are both bugs. The rule is what
   keeps a two-colour brand from reading as a broken one-colour one.

   Linked LAST in <head>, after each page's own <style>. That order is
   deliberate: the pages carry years of their own `.eyebrow`, `.sup-fab` and
   `section.blk` rules, and the point of this sheet is to restate them in one
   place. A page that genuinely needs to differ says so with a longer
   selector, not by being loaded later.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --p:#46ff77;        /* verified / clean / operational */
  --p2:#8affab;
  --amber:#ff9d2e;    /* brand + primary action */
  --amber2:#ffc061;
  --dim:#1f9e40;
  --ink:#050b07;
  --panel:#0a1710;
  --panel2:#07130c;
  --line:#24432e;
  --line2:rgba(232,236,233,.10);
  --mut:#839388;
  --mut2:#5a6b60;
  --w:#eef2ef;
}

*{box-sizing:border-box}
html{background:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif}
html:lang(ru),html:lang(uk),html:lang(be),html:lang(kk){font-family:'Manrope','Space Grotesk',system-ui,sans-serif}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;color:var(--w);font-family:inherit}
/* The browser hands form controls and code the system font — the third
   typeface nobody declared. Two typefaces on this site, no exceptions. */
code,pre,kbd,samp,tt{font-family:inherit;font-variant-numeric:tabular-nums}
input,select,textarea,button{font-family:inherit}

/* Fixed layer behind the content: background-attachment:fixed is broken on
   iOS Safari, so the gradient gets its own element. body carries NO
   background-colour, or it would paint over this z-index:-1 layer. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 78% 5%,#12371f 0,#07140c 38%,#050b07 100%);
  animation:none}
/* CRT scanlines, taken from the logo. Barely there on purpose: at full
   strength they fight small type, which is most of this site. */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(70,255,119,.022) 4px)}

a{color:var(--p);text-decoration:none;transition:opacity .15s ease}
a:hover{opacity:.85}
::selection{background:var(--amber);color:#100800}

/* ── brand ───────────────────────────────────────────────────────────────
   The mark is the CRT "0" from the logo; the wordmark is set, not drawn, so
   it stays selectable, translatable and sharp at every size. */
.nav .brand img,.nav .brand video{width:34px;height:34px;border:1px solid var(--line);
  border-radius:0;object-fit:cover;display:block}
.nav .brand .wm{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--w)}
.nav .brand .wm em{font-style:normal;color:var(--amber)}
.nav{border-bottom:1px solid var(--line)}
.nav .links a{font-size:10px;letter-spacing:.11em;text-transform:uppercase}
.nav .links a:hover{color:var(--amber)}
.badge{color:var(--amber);border-color:rgba(255,157,46,.45);background:rgba(255,157,46,.06)}

/* ── editorial section furniture ─────────────────────────────────────────
   "01 / SOMETHING" replaces the old free-floating eyebrow: a reader landing
   mid-page can tell where they are in the argument, not just what the
   paragraph is called. */
.oidx{display:inline-block;padding-left:12px;border-left:1px solid var(--amber);
  color:var(--amber);font-size:10px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px}
.oidx b{color:var(--w);font-weight:600}
.eyebrow{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
h1,h2,h3,h4{text-wrap:balance}
h2.sec,h3.sec{font-size:clamp(26px,3.2vw,46px);font-weight:800;line-height:1.0;letter-spacing:-.035em;
  text-transform:uppercase;margin:0 0 16px;color:var(--w);max-width:18ch}
h2.sec.wide,h3.sec.wide{max-width:26ch}
p.sec{font-size:16px;line-height:1.7;color:#bdc7c0;max-width:720px}
p.sec strong{color:var(--w)}

/* ── actions ─────────────────────────────────────────────────────────────
   Primary is amber and filled; secondary is a hairline box. There is no
   third button, because a third button is how a page stops having a
   primary action at all. */
.btn-a{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border:0;background:var(--amber);
  color:#180b00;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.btn-a:hover{background:var(--amber2);opacity:1}
.btn-s{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid var(--line);
  color:var(--w);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.btn-s:hover{border-color:var(--amber);color:var(--amber)}
.btn-a i,.btn-s i{font-style:normal}
.btn-s i{color:var(--amber)}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media(max-width:520px){.ctarow a{flex:1 1 100%;justify-content:center}}

/* Consent dialog and the support bubble ship from the shared runtime in the
   desk's green. Here green means "verified", so chrome does not get to wear
   it. */
.tt-consent button[data-tt="ok"]{background:var(--amber);border-color:var(--amber);color:#180b00}
.tt-consent button[data-tt="ok"]:hover{background:var(--amber2);border-color:var(--amber2);color:#180b00}

@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE COMPONENTS — the shapes the argument is told in.

   These started life inline on the English page. Nine translated mirrors and
   twelve sub-pages later, "inline on the page that needed it" is how a design
   system becomes nine design systems, so they live here and the mirrors get
   the markup only.
   ══════════════════════════════════════════════════════════════════════════ */
.wrap{max-width:1120px}
/* micro label — the one small-caps voice of the site */
.mlab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* ── full-bleed hero band: copy left, live ticket right ───────────────── */
.ofhero{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  border-bottom:1px solid var(--line);background:#07110c;overflow:hidden}
.ofhero .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 520px at 22% 18%,rgba(255,157,46,.16),transparent 62%),
             radial-gradient(700px 560px at 82% 84%,rgba(70,255,119,.10),transparent 60%)}
.ofhero .scan{position:absolute;left:0;right:0;top:0;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0,rgba(255,157,46,.05) 42%,rgba(255,157,46,.12) 50%,rgba(255,157,46,.05) 58%,transparent 100%);
  animation:ofScan 11s linear infinite}
@keyframes ofScan{0%{transform:translateY(-180px)}100%{transform:translateY(980px)}}
@media(prefers-reduced-motion:reduce){.ofhero .scan{display:none}}
.ofhero .hgrid{position:relative;z-index:2;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,5vw,72px);align-items:start;
  padding:clamp(34px,5vw,64px) clamp(20px,4vw,56px) clamp(40px,6vw,72px)}
.ofhero .lock{display:block;width:min(190px,46%);height:auto;margin:26px 0 0;border:1px solid var(--line);opacity:.9}
.ofhero .lock:hover{opacity:1}
.oftitle{margin:0;font-size:clamp(36px,4.6vw,68px);font-weight:800;line-height:.9;
  letter-spacing:-.05em;text-transform:uppercase;color:var(--w)}
.oftitle .a{color:var(--amber)}
.oftitle .g{color:var(--p)}
.oflede{max-width:560px;margin:22px 0 0;color:#c0c9c3;font-size:clamp(15px,1.25vw,18px);line-height:1.6}
.oflede strong{color:var(--w)}
.ofchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.ofchips>span{padding:7px 10px;border:1px solid rgba(255,157,46,.30);background:rgba(18,9,2,.5);
  color:#c8b49a;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.ofchips>span:before{content:"\25a0";margin-right:7px;color:var(--amber);font-size:7px}
.ofchips>span.v{border-color:rgba(70,255,119,.30);background:rgba(4,20,10,.5);color:#9fb2a5}
.ofchips>span.v:before{color:var(--p)}
.ofmet{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line);font-size:11.5px;letter-spacing:.02em;color:var(--mut);
  font-variant-numeric:tabular-nums}
.ofmet b{color:var(--p);font-weight:700}
.ofmet a{color:var(--mut);border-bottom:1px solid var(--line)}
.ofnot{margin-top:26px;padding-left:13px;border-left:1px solid var(--line);
  color:var(--mut2);font-size:12px;line-height:1.75;max-width:520px}
.ofnot b{color:var(--mut)}
@media(max-width:940px){
  .ofhero .hgrid{grid-template-columns:1fr;padding-top:24px}
  .ofhero .copy{order:2}
  .ofhero .deck{order:1}
  .ofhero .lock{width:min(170px,44%)}
}

/* ── sections, editorial ─────────────────────────────────────────────── */
section.blk{padding:clamp(52px,6vw,92px) 0;border-top:1px solid var(--line)}

/* ── pipeline: intent → screen → auction → fill → stealth → receipt ──── */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;
  border:1px solid var(--line);border-right:0;border-bottom:0}
.fst{position:relative;padding:20px 20px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel2)}
.fst .n{font-size:10px;letter-spacing:.16em;color:var(--amber)}
.fst h4{margin:10px 0 7px;font-size:15px;font-weight:700;color:var(--w);letter-spacing:-.01em}
.fst p{margin:0;font-size:13px;line-height:1.6;color:var(--mut)}
.fst.gate{background:linear-gradient(180deg,rgba(255,157,46,.07),transparent 70%)}
.fst.gate .n{color:var(--amber2)}
.fst.out{background:linear-gradient(180deg,rgba(70,255,119,.06),transparent 70%)}
.fst.out .n{color:var(--p)}
@media(max-width:1000px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.flow{grid-template-columns:1fr}}
.flownote{margin-top:14px;font-size:12px;color:var(--mut2);letter-spacing:.02em}

/* ── positioning matrix: what we are and what we are not ─────────────── */
.mtx{margin-top:28px;border:1px solid var(--line);overflow-x:auto}
.mtx table{width:100%;min-width:660px;border-collapse:collapse;font-size:13px}
.mtx th,.mtx td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.mtx thead th{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);
  background:var(--panel2);font-weight:500}
.mtx tbody th{font-weight:700;color:var(--w);width:26%}
.mtx tbody th small{display:block;margin-top:4px;font-weight:400;color:var(--mut2);font-size:11px;letter-spacing:.04em}
.mtx td{color:var(--mut)}
.mtx .y{color:var(--p);font-weight:700}
.mtx .n{color:#ff7a6b;font-weight:700}
.mtx .p{color:var(--amber);font-weight:700}
.mtx tr.us{background:rgba(255,157,46,.06)}
.mtx tr.us th{color:var(--amber)}
.mtx tr:last-child td,.mtx tr:last-child th{border-bottom:0}

/* ── edge engine advantages ──────────────────────────────────────────── */
.edge{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:28px;
  border:1px solid var(--line);border-right:0;border-bottom:0}
@media(max-width:1000px){.edge{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.edge{grid-template-columns:1fr}}
.edg{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel2)}
.edg .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--p)}
.edg h4{margin:9px 0 8px;font-size:15.5px;font-weight:700;color:var(--w)}
.edg p{margin:0;font-size:13px;line-height:1.62;color:var(--mut)}
.edg p b{color:#c9d2cc}

/* ── local markets + KOL programme ───────────────────────────────────── */
.waves{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0;margin-top:28px;
  border:1px solid var(--line);border-right:0;border-bottom:0}
.wv{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel2)}
.wv .ph{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.wv h4{margin:10px 0 6px;font-size:16px;font-weight:800;color:var(--w);text-transform:uppercase;letter-spacing:-.02em}
.wv .loc{font-size:12px;color:var(--mut);line-height:1.7}
.wv .dom{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--p);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.wv.next{background:transparent}
.wv.next .ph{color:var(--mut2)}
.wv.next .dom{color:var(--mut2)}
.kol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:1000px){.kol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kol{grid-template-columns:1fr}}
#security .sec-grid{grid-template-columns:repeat(4,1fr)}
#compliance .sec-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){#security .sec-grid,#compliance .sec-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){#security .sec-grid,#compliance .sec-grid{grid-template-columns:1fr}}
.kbox{border:1px solid var(--line);padding:19px;background:var(--panel2)}
.kbox .num{font-size:26px;font-weight:800;color:var(--amber);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kbox h4{margin:8px 0 7px;font-size:14.5px;font-weight:700;color:var(--w)}
.kbox p{margin:0;font-size:12.8px;line-height:1.6;color:var(--mut)}
.kbox.hl{border-color:rgba(255,157,46,.45);background:linear-gradient(180deg,rgba(255,157,46,.07),transparent 70%)}

/* ── nav / brand in the new mark ─────────────────────────────────────── */
.demoflag{color:var(--amber2);background:rgba(20,12,0,.88);border-color:rgba(255,157,46,.4)}

/* ── ticket, restated in the new system ──────────────────────────────── */
.deck{max-width:none;padding:0}
.card{background:var(--panel);backdrop-filter:none}
.ticket h2{color:var(--amber);font-size:11px;letter-spacing:.15em}
.go{background:var(--amber);color:#180b00;letter-spacing:.06em}
.connect{border-color:rgba(255,157,46,.45);color:var(--amber)}
.connect:hover{background:rgba(255,157,46,.08)}
.modes button.on{background:var(--amber);border-color:var(--amber);color:#180b00}
.rtoggle .rt-l{color:var(--amber)}
.leg{background:rgba(4,10,6,.55)}
.sup-fab{background:var(--amber);color:#180b00;border-radius:0;box-shadow:0 8px 26px rgba(255,157,46,.35)}
.sup-panel .hd{color:var(--amber)}


/* ── referral / partner page ──────────────────────────────────────────────
   Its own sheet paints the copy button and the join button green. Same rule
   as everywhere else: the thing you click is amber. */
.reflink .cp{background:var(--amber);color:#180b00}
.reflink .cp:hover{background:var(--amber2)}
.reflink .share a:hover{border-color:rgba(255,157,46,.45);color:var(--amber)}
.tier .num{color:var(--p)}
.tier.b .num{color:var(--amber)}
/* The referral page centres its prose. The partner tier is an editorial
   section, and its index marker sits left — a left marker over centred
   headings reads as a layout bug, so the section opts out of centring. */
#partner .sec{text-align:left;margin-left:0}

/* ── mobile nav ──────────────────────────────────────────────────────────
   The pages declare the collapsed menu inside `@media(max-width:760px)` and
   then re-declare `.nav .links{display:flex}` a few lines LATER at the same
   specificity. Source order wins, so the burger toggled a menu that was
   already open: every narrow screen got the full link list stacked over the
   swap ticket. Restated here, after both. */
@media(max-width:760px){
  .nav .links{display:none}
  .nav .links.open{display:flex}
}

/* Route metrics: four columns of very different natural widths. Equal fractions
   made the amount wrap while the ETA column sat half empty. */
.route .grid{grid-template-columns:1.25fr 1fr .7fr .9fr}
@media(max-width:560px){.route .grid{grid-template-columns:repeat(2,1fr)}}

/* ══════════════════════════════════════════════════════════════════════════
   ARABIC — right to left.

   Two separate problems, and only one of them is direction.

   1. Direction. Everything in this sheet that leans on a side — the section
      marker's left rule, the "what this is not" rule, the table's text-align,
      the cell borders that build the flow and edge grids — has to flip, or the
      page reads as a left-to-right layout with Arabic poured into it.

   2. Typeface. Space Grotesk has no Arabic coverage at all, so `html{font-family:
      'Space Grotesk'}` silently hands the whole Arabic page to whatever the OS
      picks. That is the exact failure the two-typeface rule exists to prevent,
      so Arabic gets a declared face of its own rather than an accident.
      ══════════════════════════════════════════════════════════════════════ */
html:lang(ar){font-family:'Noto Sans Arabic','Space Grotesk',system-ui,sans-serif}
html[dir="rtl"] .oidx{padding-left:0;padding-right:12px;border-left:0;border-right:1px solid var(--amber)}
html[dir="rtl"] .ofnot{padding-left:0;padding-right:13px;border-left:0;border-right:1px solid var(--line)}
html[dir="rtl"] .nav .links{margin-left:0;margin-right:auto}
html[dir="rtl"] .nav-tools{margin-left:0;margin-right:auto}
html[dir="rtl"] .mtx th,html[dir="rtl"] .mtx td{text-align:right}
html[dir="rtl"] .flow,html[dir="rtl"] .edge{border-right:1px solid var(--line);border-left:0}
html[dir="rtl"] .fst,html[dir="rtl"] .edg,html[dir="rtl"] .wv{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .route .min{padding-right:0;padding-left:104px}
html[dir="rtl"] .route .pick{right:auto;left:13px}
html[dir="rtl"] .rtoggle .rt-c{margin-left:0;margin-right:auto;text-align:left}
html[dir="rtl"] .foot,html[dir="rtl"] .ofchips,html[dir="rtl"] .ofmet{direction:rtl}
html[dir="rtl"] .demoflag{left:auto;right:14px}
html[dir="rtl"] .sup-fab{right:auto;left:18px}
html[dir="rtl"] .sup-panel{right:auto;left:18px}
/* Numbers, tickers and route figures stay left-to-right inside Arabic prose;
   without this a price reads back-to-front. */
html[dir="rtl"] .out,html[dir="rtl"] .leg input,html[dir="rtl"] .route .grid .v,
html[dir="rtl"] .big,html[dir="rtl"] .kbox .num{direction:ltr;text-align:right;unicode-bidi:isolate}

/* ── hero column, tidied ──────────────────────────────────────────────────
   Four chips in a wrapping flex row broke 3 + 1, the metric line broke
   2 + 2 at its own widths, and the mark sat below both at a third width.
   Three ragged left edges under one headline. All three become the same
   two-column grid on the same left edge, so the column reads as one block. */
.ofchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  max-width:560px;margin-top:26px}
.ofchips>span{display:flex;align-items:center;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ofmet{display:grid;grid-template-columns:1.35fr 1fr;gap:10px 26px;
  max-width:560px;margin-top:26px;padding-top:22px}
.ofnot{max-width:560px}
.ofhero .lock{width:170px;margin-top:28px}
@media(max-width:520px){
  .ofchips,.ofmet{grid-template-columns:1fr}
  .ofhero .lock{width:150px}
}

/* ── contact button ───────────────────────────────────────────────────────
   The address is assembled by assets/js/contact.js on click, so what the page
   ships is a button with two base64 halves. Styled two ways: as the page's
   primary action where it replaced a CTA, and as an inline link everywhere it
   replaced one mid-sentence. */
.mailc{font:inherit;cursor:pointer;border-radius:0}
.mailc.inline{background:none;border:0;padding:0;color:var(--p);
  border-bottom:1px solid rgba(70,255,119,.4);text-decoration:none}
.mailc.inline:hover{color:var(--p2);border-bottom-color:var(--p2)}
.mailc.btn-a{border:0;background:var(--amber);color:#180b00;
  padding:14px 20px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mailc.btn-a:hover{background:var(--amber2)}
.mailc.copied{color:var(--p)}
.mailc.btn-a.copied{background:var(--p);color:#06180d}

/* The one sentence on the page that states the product in a single line, and it
   is a refusal. It gets the only red fill on the site — red is otherwise
   reserved for loss and drawdown, and this is the one place where a refusal is
   the good outcome. The "!" is drawn by CSS so the copy stays a sentence. */
.rmark{display:inline-block;margin-top:4px;background:#ff5c5c;color:#1a0505;
  padding:3px 10px 4px;font-weight:700;border-radius:0}
.rmark::before{content:"! ";font-weight:800}
html[dir="rtl"] .rmark::before{content:" !"}

/* ── glossary marker: "?" next to a term of art ───────────────────────────
   KYT is the one acronym the page cannot avoid — the gate is the product —
   and it is also the one a reader is most likely to hear as "someone will
   interrogate me". Leaving it unexplained sells the opposite of what the
   step says, so the term carries its own definition instead of a link away
   from the page.

   Hover opens it on a mouse, focus opens it on a keyboard, and click toggles
   it for touch, where :hover either never fires or sticks. Below 700px the
   panel stops trying to sit above the marker and docks to the bottom of the
   viewport: the marker can land anywhere on the line, and a 300px panel
   anchored to it goes off-screen on a phone about half the time. */
.gloss{position:relative;display:inline-block;vertical-align:super;font-size:0;margin:0 2px}
.gloss-q{display:block;width:15px;height:15px;padding:0;line-height:13px;text-align:center;
  font-family:inherit;font-size:10px;font-weight:700;border-radius:0;cursor:pointer;
  border:1px solid rgba(255,157,46,.55);background:rgba(255,157,46,.10);color:var(--amber)}
.gloss-q:hover,.gloss-q:focus-visible,.gloss-q[aria-expanded="true"]{background:var(--amber);color:#180b00;outline:0}
.gloss-t{position:absolute;bottom:calc(100% + 10px);left:-8px;z-index:60;width:320px;max-width:76vw;
  padding:13px 15px 14px;background:#081409;border:1px solid rgba(255,157,46,.40);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  font-size:12px;line-height:1.68;font-weight:400;letter-spacing:0;text-align:left;
  white-space:normal;text-transform:none;font-style:normal;
  color:#b8c8bd;opacity:0;visibility:hidden;transform:translateY(5px);pointer-events:none;
  transition:opacity .14s ease,transform .14s ease}
.gloss-t:after{content:"";position:absolute;top:100%;left:10px;
  border:6px solid transparent;border-top-color:rgba(255,157,46,.40)}
.gloss:hover .gloss-t,.gloss-q:focus-visible + .gloss-t,.gloss-q[aria-expanded="true"] + .gloss-t{
  opacity:1;visibility:visible;transform:none;pointer-events:auto}
html[dir="rtl"] .gloss-t{left:auto;right:-8px;text-align:right}
html[dir="rtl"] .gloss-t:after{left:auto;right:10px}
@media(max-width:700px){
  .gloss-t{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-width:none;
    transform:translateY(8px)}
  /* the RTL rule above is the more specific selector, so the sheet has to be
     restated for it or Arabic keeps right:-8px and hangs off both edges */
  html[dir="rtl"] .gloss-t{left:12px;right:12px}
  .gloss-t:after{display:none}
}

/* The hero chip clips its own text to an ellipsis, and that clip also ate the
   glossary panel — which is why the "?" started life only in step 02. Moving
   the clip onto the text lets the chip stay a fixed-width grid cell and still
   let the panel out. */
.ofchips>span.hasq{overflow:visible}
.ofchips .ct{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}
