/* ============================================================
   WISUNO — FOREX
   Tokens. Brand palette is fixed; only the two market-semantic
   colours (--up / --down) sit outside it. See note below.
   ============================================================ */
:root{
  --logo:url("../img/wisuno-logo-white.png");
  --obsidian:#0A0A0A;
  --obsidian-2:#111111;
  --obsidian-3:#171717;
  --obsidian-4:#1F1F1F;
  --cloud:#FAFAFA;
  --orange:#7FD9C6;
  --orange-deep:#0F8C79;   /* icons/graphics on light — 3.9:1 */
  --orange-ink:#0C7364;    /* small text on light — 4.6:1 */
  --velvet:#2D1421;
  --mint:#C1E8E2;
  --vanilla:#F5ECC6;

  /* Market semantics — NOT brand palette. Mint is the brand's designated
     success state. --down has no brand equivalent, so a muted brick was
     chosen: dark and desaturated enough not to compete with --orange. */
  --up:#16A34A;
  --down:#DC2626;

  --line:rgba(250,250,250,.10);
  --line-2:rgba(250,250,250,.16);
  /* Text tints are tuned to clear WCAG AA (4.5:1) on every dark surface used
     here (#0A0A0A through #1F1F1F). Do not lower these opacities. */
  --muted:rgba(250,250,250,.66);
  --muted-2:rgba(250,250,250,.50);

  --line-dk:rgba(10,10,10,.10);
  --muted-dk:rgba(10,10,10,.58);

  --display:"Urbanist","Inter",system-ui,sans-serif;
  --body:"General Sans","Urbanist","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1220px;
  --gut:clamp(20px,4vw,48px);
  --sec:clamp(64px,8vw,120px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--obsidian);
  color:var(--cloud);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--orange);color:var(--obsidian)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0;position:relative}
.sec--light{background:var(--cloud);color:var(--obsidian)}
.sec--light .eyebrow{color:var(--orange-ink)}
.sec--light .cell .ic,
.sec--light .ck svg,
.sec--light .plat li svg{color:var(--orange-deep)}
.sec--light .lede{color:var(--muted-dk)}
.sec--velvet{background:var(--velvet)}
.sec--rule{border-top:1px solid var(--line)}
.sec--light.sec--rule{border-top-color:var(--line-dk)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);line-height:1.14;letter-spacing:-.025em;font-weight:800}
h2{font-size:clamp(30px,4.4vw,50px)}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.015em;font-weight:700}
h4{font-size:16px;font-weight:700;letter-spacing:-.01em}
p{max-width:66ch}
strong{font-weight:600;color:var(--cloud)}
.sec--light strong{color:var(--obsidian)}

.eyebrow{
  font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.lede{font-size:clamp(16px,1.5vw,18.5px);color:var(--muted);max-width:60ch;margin-top:16px}
.sec-head{margin-bottom:clamp(36px,5vw,60px);max-width:760px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.005em;
  padding:14px 26px;border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none}
.btn--primary{background:var(--orange);color:var(--obsidian)}
.btn--primary:hover{background:#93E0D0}
.btn--ghost{border-color:var(--line-2);color:var(--cloud);background:transparent}
.btn--ghost:hover{border-color:var(--cloud);background:rgba(250,250,250,.05)}
.sec--light .btn--ghost{border-color:rgba(10,10,10,.22);color:var(--obsidian)}
.sec--light .btn--ghost:hover{border-color:var(--obsidian);background:rgba(10,10,10,.04)}
.btn--lg{padding:17px 34px;font-size:15.5px}
.btn--sm{padding:9px 16px;font-size:13px}
.btn--block{width:100%}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- regulator strip ---------- */
.regstrip{background:var(--obsidian-2);border-bottom:1px solid var(--line);font-size:11.5px}
.regstrip .wrap{display:flex;gap:8px 30px;align-items:center;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.regstrip b{
  font-family:var(--display);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);font-weight:700;
}
.regstrip ul{display:flex;gap:7px 20px;list-style:none;flex-wrap:wrap}
.regstrip li{color:var(--muted);display:flex;align-items:center;gap:7px}
.regstrip li::before{content:"";width:4px;height:4px;background:var(--orange);flex:none}
.regstrip li span{font-family:var(--display);font-weight:700;color:var(--cloud)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:70;background:rgba(10,10,10,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:border-color .2s}
.nav.is-stuck{border-bottom-color:var(--line-2)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:56px}
.nav .brand svg{height:19px;width:auto}
.brand{display:block;flex:none;line-height:0}
/* Wisuno lockup, White-Colored: orange W mark + white wordmark, for dark
   surfaces. Supplied asset embedded verbatim at 476x88 — geometry, colour
   and proportion unaltered. Do not recolour, skew, or add effects. */
.logo{
  display:block;
  background:var(--logo) no-repeat center/contain;
  width:119px;height:22px;
}
.foot .logo{width:151px;height:28px}
.navlinks{display:flex;gap:22px;list-style:none;margin-left:auto;font-size:13px}
.navlinks a{color:var(--muted);font-weight:500;transition:color .15s;position:relative;padding:4px 0}
.navlinks a:hover{color:var(--cloud)}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--orange);transition:right .2s ease}
.navlinks a:hover::after{right:0}
.nav .btn{flex:none}
.burger{display:none;width:40px;height:40px;background:none;border:1px solid var(--line-2);border-radius:2px;flex-direction:column;justify-content:center;align-items:center;gap:4.5px;cursor:pointer;margin-left:auto}
.burger span{width:16px;height:1.5px;background:var(--cloud);transition:transform .2s,opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:clamp(52px,7vw,88px) 0 clamp(48px,6vw,72px);position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(ellipse 90% 60% at 76% 30%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 76% 30%,#000 0%,transparent 72%);
  opacity:.5;
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(36px,5vw,64px);align-items:start}
.crumb{font-size:12.5px;color:var(--muted-2);margin-bottom:24px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:var(--cloud)}
.crumb i{font-style:normal;opacity:.5}
.hero h1{font-size:clamp(38px,5.6vw,68px);font-weight:900;letter-spacing:-.038em;line-height:1.03}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lede{font-size:clamp(16.5px,1.6vw,19px);margin-top:22px;max-width:50ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-note{font-size:12.5px;color:var(--muted-2);margin-top:16px;max-width:44ch;line-height:1.5}

.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.pillar{background:var(--obsidian);padding:18px 20px}
.pillar b{display:block;font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em}
.pillar span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:3px}

/* ---------- quote board (signature) ---------- */
.board{border:1px solid var(--line-2);background:var(--obsidian-2)}
.board-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.board-top b{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.board-top .sim{
  margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--muted-2);border:1px solid var(--line-2);padding:3px 8px;text-transform:uppercase;
}
.board-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)}
.board-row:last-of-type{border-bottom:0}
.board-sym{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.board-sym .txt span{display:block;font-family:var(--body);font-size:11.5px;font-weight:400;color:var(--muted-2);letter-spacing:0}
.board-sym .txt{min-width:0}
.qt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:112px;transition:background .1s ease}
.qt em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.13em;color:var(--muted-2);text-transform:uppercase;margin-bottom:3px}
.qt .px{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:-.01em;line-height:1}
/* the big figure: pip digits dominate, fractional pip raised — as a terminal renders it */
.qt .px b{font-size:25px;font-weight:700;color:var(--cloud);letter-spacing:-.02em}
.qt .px sup{font-size:12px;font-weight:500;color:var(--muted);top:-.62em;position:relative;margin-left:1px}
.qt.flash-up{background:rgba(22,163,74,.16)}
.qt.flash-dn{background:rgba(220,38,38,.16)}
.board-foot{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--line);background:var(--obsidian-3);font-size:11.5px;color:var(--muted-2);line-height:1.45}
.board-foot svg{width:14px;height:14px;flex:none;color:var(--muted-2)}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--obsidian-2);overflow:hidden;position:relative}
.ticker-track{display:flex;gap:0;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:flex;align-items:baseline;gap:9px;padding:13px 26px;border-right:1px solid var(--line);font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.tk b{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.02em}
.tk .v{color:var(--muted)}
.tk .c{font-size:11.5px}
.tk .c.up{color:var(--up)}
.tk .c.dn{color:var(--down)}

/* ---------- editorial 2-col ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
.prose h3{margin:38px 0 14px}
.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:16px;color:var(--muted-dk)}
.sec:not(.sec--light) .prose p{color:var(--muted)}
.ck{list-style:none;margin:18px 0}
.ck li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-dk);font-size:15px;color:var(--muted-dk)}
.sec:not(.sec--light) .ck li{border-bottom-color:var(--line);color:var(--muted)}
.ck li:last-child{border-bottom:0}
.ck svg{width:16px;height:16px;color:var(--orange);flex:none;margin-top:4px}

.card{border:1px solid var(--line-dk);padding:26px;background:#fff}
.sec:not(.sec--light) .card{border-color:var(--line);background:var(--obsidian-2)}
.card+.card{margin-top:16px}
.card--accent{background:var(--obsidian);color:var(--cloud);border-color:var(--obsidian)}
.card--accent h4{color:var(--cloud)}
/* Term rows sit on the dark accent card; the default span colour (--muted-dk)
   is dark text meant for light sections, so it read black-on-black here. */
.card--accent .term{border-bottom-color:var(--line)}
.card--accent .term b{color:var(--cloud)}
.card--accent .term span{color:var(--muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:20px}
.fact{background:var(--obsidian);padding:16px}
.fact b{display:block;font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--orange)}
.fact span{display:block;font-size:12px;color:var(--muted-2);margin-top:2px;line-height:1.4}
.terms{margin-top:18px}
.term{padding:13px 0;border-bottom:1px solid var(--line-dk);display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:baseline}
.term:last-child{border-bottom:0}
.term b{font-family:var(--display);font-size:14px;font-weight:700}
.term span{font-size:13.5px;color:var(--muted-dk);line-height:1.5}

/* ---------- feature grid ---------- */
.grid{display:grid;gap:1px;background:var(--line-dk)}
.sec:not(.sec--light) .grid{background:var(--line)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.cell{background:var(--cloud);padding:30px 26px}
.sec:not(.sec--light) .cell{background:var(--obsidian)}
.cell .ic{width:26px;height:26px;color:var(--orange);margin-bottom:16px}
.cell h3{font-size:17.5px;margin-bottom:9px}
.cell p{font-size:14.5px;color:var(--muted-dk);line-height:1.55;max-width:none}
.sec:not(.sec--light) .cell p{color:var(--muted)}

/* ---------- tabs + quote table ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line-dk);margin-bottom:8px;flex-wrap:wrap}
.sec:not(.sec--light) .tabs{border-bottom-color:var(--line)}
.tab{
  background:none;border:0;border-bottom:2px solid transparent;padding:13px 20px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--muted-dk);
  transition:color .15s,border-color .15s;
}
.sec:not(.sec--light) .tab{color:var(--muted)}
.tab[aria-selected="true"]{color:var(--obsidian);border-bottom-color:var(--orange)}
.sec:not(.sec--light) .tab[aria-selected="true"]{color:var(--cloud)}
.panel[hidden]{display:none}
.panel-intro{font-size:15px;color:var(--muted-dk);margin:22px 0 26px;max-width:70ch}
.sec:not(.sec--light) .panel-intro{color:var(--muted)}

.ptable{width:100%;border-collapse:collapse;font-size:14.5px}
.ptable th{
  text-align:left;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-dk);padding:0 14px 11px;border-bottom:1px solid var(--line-dk);white-space:nowrap;
}
.ptable td{padding:15px 14px;border-bottom:1px solid var(--line-dk);vertical-align:middle}
.ptable tbody tr{transition:background .14s}
.ptable tbody tr:hover{background:rgba(10,10,10,.028)}
.ptable .sym{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.015em;white-space:nowrap}
.ptable .nick{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--muted-dk);letter-spacing:0;margin-top:1px}
.ptable .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ptable .spread{font-family:var(--mono);font-weight:500}
.ptable .desc{font-size:13.5px;color:var(--muted-dk);line-height:1.5;max-width:34ch}
.ptable .chg.up{color:#1B7A6B}
.ptable .chg.dn{color:#B23B2E}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.after-tbl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}
.after-tbl p{font-size:12.5px;color:var(--muted-dk);max-width:52ch;line-height:1.5}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.calc-in,.calc-out{background:var(--obsidian-2);padding:clamp(24px,3vw,34px)}
.calc-out{background:var(--obsidian-3);display:flex;flex-direction:column}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.field input,.field select{
  background:var(--obsidian);border:1px solid var(--line-2);border-radius:2px;
  padding:12px 13px;font-family:var(--mono);font-size:15px;width:100%;
  transition:border-color .15s;appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px;padding-right:34px;
}
.field input:focus,.field select:focus{border-color:var(--orange);outline:none}
.field .hint{font-size:11.5px;color:var(--muted-2)}
.seg{display:flex;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.seg button{
  flex:1;background:var(--obsidian);border:0;padding:12px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--muted);transition:background .15s,color .15s;
}
.seg button[aria-pressed="true"]{background:var(--orange);color:var(--obsidian)}

.res-hero{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:6px}
.res-hero em{font-style:normal;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.res-hero b{display:block;font-family:var(--mono);font-size:clamp(34px,4.6vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:8px;font-variant-numeric:tabular-nums}
.res-hero b.up{color:var(--up)}
.res-hero b.dn{color:var(--down)}
.res{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.res:last-of-type{border-bottom:0}
.res span{color:var(--muted-2)}
.res b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.res-note{margin-top:auto;padding-top:20px;font-size:11.5px;color:var(--muted-2);line-height:1.5;display:flex;gap:9px}
.res-note svg{width:14px;height:14px;flex:none;margin-top:2px}

/* ---------- accounts ---------- */
.accts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.acct{background:var(--obsidian);padding:30px 26px;display:flex;flex-direction:column;position:relative}
.acct--feat{background:var(--obsidian-3);border-top:2px solid var(--orange)}
.acct .tag{position:absolute;top:0;right:0;background:var(--orange);color:var(--obsidian);font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px}
.acct h3{font-size:20px}
.acct .sub{font-size:13px;color:var(--muted-2);margin-top:4px}
.acct .dep{margin:24px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.acct .dep em{font-style:normal;font-size:11px;font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);display:block}
.acct .dep b{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.03em;display:block;margin-top:5px}
.acct ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.acct li{display:flex;gap:10px;font-size:14px;color:var(--muted);line-height:1.45}
.acct li svg{width:14px;height:14px;color:var(--orange);flex:none;margin-top:4px}
.acct .ideal{font-size:13px;color:var(--muted-2);line-height:1.5;padding:14px;background:rgba(250,250,250,.03);border-left:2px solid var(--line-2);margin-bottom:22px}
.acct .btn{margin-top:auto}

.demo{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;border:1px solid var(--line);padding:clamp(24px,3vw,38px);margin-top:1px;background:var(--obsidian-2)}
.demo h3{margin-bottom:10px}
.demo p{font-size:15px;color:var(--muted)}
.demo .bul{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:16px;font-size:13.5px;color:var(--muted-2)}
.demo .bul span{display:flex;gap:7px;align-items:center}
.demo .bul svg{width:13px;height:13px;color:var(--orange)}

/* ---------- platforms ---------- */
.plat{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dk)}
.plat>div{background:var(--cloud);padding:30px 28px}
.plat h3{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.plat .badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;border:1px solid var(--line-dk);padding:3px 8px;color:var(--muted-dk);text-transform:uppercase}
.plat ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px}
.plat li{display:flex;gap:10px;font-size:14px;color:var(--muted-dk);line-height:1.45}
.plat li svg{width:14px;height:14px;color:var(--orange-deep);flex:none;margin-top:4px}
.cmp{width:100%;border-collapse:collapse;margin-top:36px;font-size:14px}
.cmp th{text-align:left;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-dk);padding:0 14px 11px;border-bottom:1px solid var(--line-dk)}
.cmp td{padding:13px 14px;border-bottom:1px solid var(--line-dk)}
.cmp td:first-child{font-weight:600}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.sec--light .faq{border-top-color:var(--line-dk)}
.qa{border-bottom:1px solid var(--line)}
.sec--light .qa{border-bottom-color:var(--line-dk)}
.qa>summary{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  display:flex;gap:20px;align-items:flex-start;padding:22px 0;
  font-family:var(--display);font-size:clamp(16px,1.7vw,19px);font-weight:700;letter-spacing:-.015em;line-height:1.35;
  list-style:none;
}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::marker{content:""}
.qa .idx{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted-2);flex:none;padding-top:5px;letter-spacing:.04em}
.sec--light .qa .idx{color:var(--muted-dk)}
.qa .sign{margin-left:auto;flex:none;width:18px;height:18px;position:relative;margin-top:5px}
.qa .sign::before,.qa .sign::after{content:"";position:absolute;background:var(--orange);transition:transform .22s ease}
.qa .sign::before{top:8px;left:0;width:18px;height:2px}
.qa .sign::after{left:8px;top:0;width:2px;height:18px}
.qa[open] .sign::after{transform:rotate(90deg)}
.qa .ans{padding:0 0 24px 40px;max-width:74ch}
.qa .ans p{font-size:15px;color:var(--muted);margin-bottom:12px}
.sec--light .qa .ans p{color:var(--muted-dk)}
.qa .ans p:last-child{margin-bottom:0}

/* ---------- final cta ---------- */
.final{background:var(--velvet);text-align:center}
.final h2{max-width:18ch;margin:0 auto}
.final .lede{margin-left:auto;margin-right:auto;text-align:center}
.final .hero-cta{justify-content:center}
.final .marks{display:flex;gap:10px 30px;justify-content:center;flex-wrap:wrap;margin-top:34px;font-size:13.5px;color:var(--muted)}
.final .marks span{display:flex;gap:8px;align-items:center}
.final .marks svg{width:14px;height:14px;color:var(--orange)}

/* ---------- footer ---------- */
.foot{background:var(--obsidian);border-top:1px solid var(--line);padding-top:clamp(52px,6vw,76px)}
.foot-top{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:36px;padding-bottom:44px}
.foot-top p{font-size:14px;color:var(--muted-2);margin-top:16px;line-height:1.6}
.foot h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-size:14px;color:var(--muted);transition:color .15s}
.foot ul a:hover{color:var(--orange)}
.legal{border-top:1px solid var(--line);padding:32px 0;display:grid;grid-template-columns:1fr 1fr;gap:36px}
.legal h4{color:var(--orange)}
.legal p{font-size:12.5px;color:var(--muted-2);line-height:1.65;max-width:none}
.legal p+p{margin-top:10px}
.risk{border-top:1px solid var(--line);padding:28px 0}
.risk p{font-size:12.5px;color:var(--muted-2);line-height:1.65;max-width:none}
.risk strong{color:var(--cloud);font-weight:600}
.foot-bot{border-top:1px solid var(--line);padding:22px 0 36px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.foot-bot nav{display:flex;gap:22px;flex-wrap:wrap;font-size:13px}
.foot-bot nav a{color:var(--muted-2)}
.foot-bot nav a:hover{color:var(--cloud)}
.foot-bot small{font-size:12.5px;color:var(--muted-2)}

/* ---------- utilities ---------- */
.top{
  position:fixed;right:22px;bottom:22px;z-index:80;width:44px;height:44px;
  background:var(--orange);color:var(--obsidian);border:0;border-radius:2px;cursor:pointer;
  display:grid;place-items:center;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.top.on{opacity:1;transform:none;pointer-events:auto}
.top svg{width:18px;height:18px}

.rise{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.rise.in{opacity:1;transform:none}

/* ---------- spec table (trading conditions) ---------- */
.cond{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cond>div{background:var(--obsidian);padding:clamp(22px,2.6vw,32px)}
.cond h3{font-size:16px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted-2);margin-bottom:20px;font-size:11px}
.spec{width:100%;border-collapse:collapse;font-size:14.5px}
.spec th{
  text-align:left;font-weight:400;color:var(--muted-2);padding:11px 0;
  border-bottom:1px solid var(--line);width:47%;vertical-align:top;font-size:14px;
}
.spec td{
  text-align:right;padding:11px 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;
}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec .wrap-val{font-family:var(--body);font-size:13.5px;line-height:1.5;text-align:right}

.hours-line{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.hours-line:last-of-type{border-bottom:0}
.hours-line span{color:var(--muted-2)}
.hours-line b{font-family:var(--mono);font-size:13.5px;font-weight:500}

/* ---------- session clock ---------- */
.clock{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.clock-top{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.clock-top b{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.clock-top .utc{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--cloud)}
.bars{position:relative;display:flex;flex-direction:column;gap:7px}
.bar{position:relative;height:26px;background:rgba(250,250,250,.045);border:1px solid var(--line)}
.bar .fill{position:absolute;top:0;bottom:0;background:rgba(250,250,250,.10);border-left:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.bar.on .fill{background:rgba(127,217,198,.20);border-color:var(--orange)}
.bar .lbl{
  position:absolute;left:9px;top:0;bottom:0;display:flex;align-items:center;gap:8px;z-index:2;
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.04em;
}
.bar .dot{width:5px;height:5px;background:var(--muted-2);flex:none}
.bar.on .dot{background:var(--orange)}
.bar .st{
  position:absolute;right:9px;top:0;bottom:0;display:flex;align-items:center;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase;
}
.bar.on .st{color:var(--orange)}
.now{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--cloud);z-index:3}
.now::before{content:"";position:absolute;top:-3px;left:-2.5px;width:6px;height:6px;background:var(--cloud)}
.scale{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--muted-2);letter-spacing:.04em}
.clock-note{font-size:12px;color:var(--muted-2);margin-top:14px;line-height:1.5}

/* ---------- spread switcher + stamp ---------- */
.tbl-ctl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 18px}
.tbl-ctl .seg{max-width:420px;flex:1 1 300px;background:var(--line-dk);border-color:var(--line-dk)}
.tbl-ctl .seg button{background:var(--cloud);color:var(--muted-dk);font-size:12.5px;padding:10px}
.tbl-ctl .seg button[aria-pressed="true"]{background:var(--orange);color:var(--obsidian)}
.stamp{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-dk);display:flex;align-items:center;gap:7px;margin-left:auto;
}
.stamp::before{content:"";width:5px;height:5px;background:var(--orange);flex:none}
.sec:not(.sec--light) .stamp{color:var(--muted-2)}

/* ---------- funding ---------- */
.fund{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.fund>div{background:var(--obsidian);padding:28px 26px}
.fund h3{font-size:17px;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.fund h3 svg{width:18px;height:18px;color:var(--orange);flex:none}
.fund p{font-size:14px;color:var(--muted);line-height:1.55;max-width:none}
.methods{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-dk);border:1px solid var(--line-dk);margin-top:1px}
.method{background:var(--obsidian-2);padding:16px 20px;flex:1 1 170px;min-width:0}
.method b{display:block;font-family:var(--display);font-size:14px;font-weight:700;color:var(--obsidian)}
.method span{display:block;font-size:12px;color:var(--muted-dk);margin-top:2px}
.method em{
  font-style:normal;display:inline-block;margin-top:10px;align-self:flex-start;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange-ink);border:1px solid var(--line-dk);padding:3px 7px;
}

/* ---------- 3 steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--obsidian);padding:30px 26px;position:relative}
.step .no{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--orange);
  display:block;margin-bottom:14px;
}
.step h3{font-size:18px;margin-bottom:8px;color:var(--cloud)}
.step p{font-size:14px;color:var(--muted);line-height:1.55;max-width:none}

@media(max-width:900px){
  .cond,.fund,.steps{grid-template-columns:1fr}
  .stamp{margin-left:0}
}


/* ---------- currency flags ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.flags{display:inline-flex;align-items:center;flex:none;vertical-align:middle}
.fx{
  width:21px;height:21px;border-radius:50%;overflow:hidden;display:block;flex:none;
  border:1.5px solid var(--fx-ring,var(--obsidian));background:var(--fx-ring,var(--obsidian));
}
.fx+.fx{margin-left:-8px}
.fx svg{width:100%;height:100%;display:block}
.sec--light .fx,.ptable .fx{--fx-ring:var(--cloud)}
.flags--sm .fx{width:15px;height:15px;border-width:1.2px}
.flags--sm .fx+.fx{margin-left:-6px}
.flags--lg .fx{width:26px;height:26px}
.flags--lg .fx+.fx{margin-left:-10px}

/* pair cells become flag + text rows */
.board-sym{display:flex;align-items:center;gap:11px}
.ptable .sym-cell{display:flex;align-items:center;gap:11px}
.tk .flags{margin-right:2px}
.calc-flags{display:flex;align-items:center;gap:11px;padding:12px 0 2px}
.calc-flags b{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em}
.calc-flags span{font-size:12.5px;color:var(--muted-2)}


/* ---------- platform chips + device availability ---------- */
/* MetaTrader marks. MetaTrader is a registered trademark of MetaQuotes Ltd;
   these are reproduced unmodified apart from scaling and background removal.
   Do not recolour, flatten, or restyle them to match the Wisuno palette. */
.mt-logo{width:34px;height:34px;display:block;flex:none}

.plat-avail{display:flex;gap:0;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-dk)}
.dev{flex:1 1 0;min-width:0;padding-right:14px;display:flex;flex-direction:column;gap:8px}
.dev+.dev{padding-left:16px;border-left:1px solid var(--line-dk)}
.dev>svg{width:22px;height:22px;color:var(--orange-deep);flex:none}
.dev b{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:-.01em}
.dev span{font-size:11.5px;color:var(--muted-dk);line-height:1.45}
@media(max-width:520px){
  .plat-avail{flex-direction:column;gap:16px}
  .dev+.dev{padding-left:0;border-left:0;padding-top:16px;border-top:1px solid var(--line-dk)}
}


/* ---------- payment methods ---------- */
.method{background:#fff;padding:20px;flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px}
.method>svg{width:24px;height:24px;color:var(--orange-deep);flex:none;margin-bottom:12px}

/* Brand acceptance marks. Visa, Mastercard, M-Pesa, Airtel Money and Mixx by
   Yas are trademarks of their respective owners; card-scheme marks in
   particular must be used as supplied and unmodified. .pay-logo is pre-sized
   so an official file drops straight in — see the slot comment in the markup. */
.pay-brands{margin-top:40px;padding-top:28px;border-top:1px solid var(--line-dk)}
.pay-brands h4{
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-dk);margin-bottom:18px;
}
.brandrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
img.pay-logo{height:26px;width:auto;display:block;flex:none}
span.pay-logo{
  display:inline-flex;align-items:center;height:38px;padding:0 16px;flex:none;
  border:1px solid var(--line-dk);background:#fff;
  font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--obsidian);
}
span.pay-logo i{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted-dk);margin-left:7px}
.pay-note{font-size:12px;color:var(--muted-dk);margin-top:16px;line-height:1.5;max-width:70ch}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .hero-grid,.split,.calc{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
  .accts{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
  .demo{grid-template-columns:1fr}
}
@media(max-width:860px){
  .navlinks{
    position:fixed;inset:66px 0 auto;background:var(--obsidian);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px var(--gut) 22px;margin:0;display:none;
  }
  .navlinks.is-open{display:flex}
  .navlinks li{border-bottom:1px solid var(--line)}
  .navlinks a{display:block;padding:15px 0;font-size:15.5px;color:var(--cloud)}
  .navlinks a::after{display:none}
  .burger{display:flex}
  .nav .btn{display:none}
  .plat,.legal{grid-template-columns:1fr}
  .board-row{grid-template-columns:1fr auto;gap:10px}
  .board-row .qt:last-child{display:none}
}
@media(max-width:640px){
  .g3,.g2,.facts,.fields{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .qa .ans{padding-left:0}
  .term{grid-template-columns:1fr;gap:3px}
  .res-hero b{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
}