/*==================================================================
  CSO MARKETS — PREMIUM DESIGN SYSTEM  v3
  Hybrid theme: cinematic navy/gold shells + clean light content.
  Author: build system. Edit tokens below to re-skin the whole site.
==================================================================*/

/*========================= 1. TOKENS =========================*/
:root{
  /* Brand navy scale */
  --navy-900:#040B22;
  --navy-850:#061436;
  --navy-800:#081F5C;
  --navy-700:#0C2D73;
  --navy-600:#123A92;
  --navy-500:#1E4FBE;

  /* Brand gold scale */
  --gold-600:#A8842B;
  --gold-500:#C79B2E;
  --gold:#D4AF37;
  --gold-300:#E8C766;
  --gold-200:#F3DFA0;

  /* Neutrals */
  --ink:#0B1533;
  --body:#55617D;
  --muted:#8A94AC;
  --line:#E4E9F5;
  --line-soft:#EFF3FB;
  --surface:#FFFFFF;
  --surface-2:#F5F8FF;
  --surface-3:#EDF2FD;

  /* States */
  --up:#16C968;
  --up-soft:rgba(22,201,104,.12);
  --down:#EF454C;
  --down-soft:rgba(239,69,76,.12);
  --info:#2E7CF6;

  /* Typography */
  --font-display:'Plus Jakarta Sans','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Radii */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  /* Elevation */
  --sh-xs:0 1px 2px rgba(8,31,92,.06);
  --sh-sm:0 4px 14px rgba(8,31,92,.07);
  --sh-md:0 14px 40px rgba(8,31,92,.10);
  --sh-lg:0 28px 70px rgba(8,31,92,.14);
  --sh-gold:0 14px 40px rgba(212,175,55,.30);

  /* Layout */
  --header-h:78px;
  --container:1240px;
  --gutter:22px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s;
  --t:.32s;
  --t-slow:.6s;
}

/*========================= 2. RESET =========================*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 20px)}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--surface);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit;transition:color var(--t-fast) var(--ease)}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--ink);line-height:1.16;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5vw,4rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.85rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:700}
h4{font-size:1.06rem;font-weight:700}
p{color:var(--body)}
::selection{background:var(--gold);color:var(--navy-900)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/*========================= 3. LAYOUT =========================*/
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:900px}
.section{padding:clamp(64px,7vw,110px) 0}
.section-sm{padding:clamp(46px,5vw,72px) 0}
.section-light{background:var(--surface)}
.section-tint{background:var(--surface-2)}
.section-dark{background:var(--navy-900);color:#C2CCE4;position:relative;overflow:hidden}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}
.section-dark p{color:#9FADCB}

.grid{display:grid;gap:24px}
/* Grid/flex children default to min-width:auto, which lets a wide child (e.g. a
   660px min-width table) blow the track past the viewport. minmax(0,1fr) plus
   min-width:0 keeps every track inside its container so .table-wrap can scroll. */
.grid>*,.split>*{min-width:0}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/*========================= 4. SECTION HEADINGS =========================*/
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);
  font-size:.73rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-600);
  padding:7px 15px;border-radius:var(--r-pill);
  background:rgba(212,175,55,.10);
  border:1px solid rgba(212,175,55,.26);
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
.section-dark .eyebrow{color:var(--gold-300);background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.30)}

.section-head{max-width:730px;margin-bottom:clamp(38px,4vw,58px)}
.section-head.center{margin-inline:auto}
.section-head p{font-size:1.06rem;margin-top:16px}
.lead{font-size:1.12rem;line-height:1.72}

/* Gold-underlined word */
.hl{position:relative;color:var(--gold);white-space:nowrap}
.grad-gold{
  background:linear-gradient(102deg,var(--gold-200),var(--gold) 42%,var(--gold-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/*========================= 5. BUTTONS =========================*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.005em;
  padding:14px 28px;border-radius:var(--r-pill);
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
  will-change:transform;
}
.btn i{font-size:.9em;transition:transform var(--t) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:hover i.fa-arrow-right{transform:translateX(4px)}

.btn-gold{
  background:linear-gradient(135deg,var(--gold-300),var(--gold) 45%,var(--gold-500));
  color:var(--navy-900);box-shadow:0 8px 24px rgba(212,175,55,.32);
}
.btn-gold:hover{box-shadow:var(--sh-gold)}

.btn-navy{background:var(--navy-800);color:#fff;box-shadow:0 8px 24px rgba(8,31,92,.24)}
.btn-navy:hover{background:var(--navy-700);box-shadow:0 14px 36px rgba(8,31,92,.30)}

.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--navy-800);background:var(--surface-2)}

.btn-ghost-light{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#fff;backdrop-filter:blur(10px)}
.btn-ghost-light:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.45)}

.btn-sm{padding:10px 20px;font-size:.86rem}
.btn-lg{padding:17px 36px;font-size:1.02rem}
.btn-block{width:100%}

.btn-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--navy-600)}
.btn-link i{transition:transform var(--t) var(--ease)}
.btn-link:hover{color:var(--gold-600)}
.btn-link:hover i{transform:translateX(4px)}
.section-dark .btn-link{color:var(--gold-300)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.center{justify-content:center}

/*========================= 7. HEADER =========================*/
/*
  Dark glass header. Every page opens on a dark hero — index.html uses .hero,
  every other page uses .page-hero — so the bar floats over that artwork
  instead of cutting a white slab across it.

  Three states:
    at rest      soft top-down scrim only, so the hero reads through it
    .is-stuck    navy glass with blur and a shadow, set by initHeader()
    mega open    solid navy, so the white dropdown has something to hang from
*/
.header{
  position:sticky;top:0;z-index:1000;height:var(--header-h);
  /* Sticky keeps the bar in flow, so at rest it is NOT floating over the
     hero — it sits above it on a white body. Painting it in the hero's own
     navy, and continuing the hero's top-right blue glow upward, makes the
     seam between the two disappear. */
  background:
    radial-gradient(900px 420px at 80% 210%,rgba(30,79,190,.42),transparent 62%),
    var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
/* Once scrolled the bar rides over light sections, so it turns to glass. */
.header.is-stuck{
  background:rgba(6,20,54,.86);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(255,255,255,.10);
  box-shadow:0 10px 34px rgba(2,7,22,.42);
}
/* A translucent bar under an opaque mega panel looks like a rendering fault. */
.header:has(.has-mega:hover),
.header:has(.has-mega.open){
  background:rgba(6,20,54,.97);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:transparent;
}

.navbar{height:var(--header-h);display:flex;align-items:center;gap:14px}

/* --- Primary nav --- */
.nav{margin-left:auto;height:100%}
.nav>ul{display:flex;align-items:center;height:100%;gap:2px}
.nav>ul>li{height:100%;display:flex;align-items:center;position:static}
.nav-link{
  display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;
  font-family:var(--font-display);font-weight:600;font-size:.93rem;color:#DDE4F4;
  border-radius:var(--r-sm);position:relative;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav-link .caret{font-size:.62em;opacity:.6;transition:transform var(--t) var(--ease)}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.10)}
.nav-link.active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:-6px;height:2.5px;
  border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-500));
}
.has-mega:hover .nav-link .caret,.has-mega.open .nav-link .caret{transform:rotate(180deg)}
.has-mega:hover .nav-link,.has-mega.open .nav-link{color:#fff;background:rgba(255,255,255,.10)}

/* --- Header actions --- */
.nav-actions{flex:none;display:flex;align-items:center;gap:10px;margin-left:14px}

/*========================= 8. MEGA MENU =========================*/
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -20px rgba(8,31,92,.22);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
  z-index:999;
}
.has-mega:hover>.mega,.has-mega.open>.mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{
  max-width:var(--container);margin-inline:auto;padding:34px var(--gutter) 30px;
  display:grid;grid-template-columns:1fr 1fr 1fr 320px;gap:32px;
}
.mega-inner.cols-3{grid-template-columns:1fr 1fr 320px}
.mega-col-title{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--line-soft);
}
.mega-link{
  display:flex;gap:13px;align-items:flex-start;padding:9px 11px;margin-inline:-11px;
  border-radius:var(--r-sm);transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.mega-link:hover{background:var(--surface-2);transform:translateX(3px)}
.mega-ico{
  flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--surface-3),#fff);
  border:1px solid var(--line);color:var(--navy-600);font-size:.92rem;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.mega-link:hover .mega-ico{
  background:linear-gradient(140deg,var(--navy-800),var(--navy-600));
  border-color:var(--navy-700);color:var(--gold-300);
}
.mega-txt strong{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.35;
}
.mega-txt span{display:block;font-size:.8rem;color:var(--muted);line-height:1.5;margin-top:2px}
.tag{
  font-family:var(--font-display);font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-pill);flex:none;
}
.tag-new{background:var(--up-soft);color:#0E9E50}
.tag-hot{background:var(--down-soft);color:var(--down)}
.tag-gold{background:rgba(212,175,55,.16);color:var(--gold-600)}

/* Mega feature panel */
.mega-feature{
  border-radius:var(--r-md);padding:26px 24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-800),var(--navy-900) 70%);
  display:flex;flex-direction:column;justify-content:space-between;min-height:230px;
}
.mega-feature::after{
  content:"";position:absolute;width:230px;height:230px;right:-90px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.30),transparent 66%);
}
.mega-feature .eyebrow{margin-bottom:12px;position:relative}
.mega-feature h4{color:#fff;font-size:1.18rem;margin-bottom:9px;position:relative;line-height:1.3}
.mega-feature p{color:#A9B6D4;font-size:.85rem;margin-bottom:18px;position:relative}
.mega-feature .btn{position:relative;align-self:flex-start}

/*========================= 9. MOBILE NAV =========================*/
.burger{
  display:none;flex:none;width:44px;height:44px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:1.1rem;
  background:rgba(255,255,255,.06);
  align-items:center;justify-content:center;
}
.burger:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.drawer-scrim{
  position:fixed;inset:0;background:rgba(4,11,34,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t);z-index:1100;
}
.drawer-scrim.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100dvh;width:min(400px,92vw);z-index:1101;
  background:var(--surface);display:flex;flex-direction:column;
  transform:translateX(102%);
  /* visibility:hidden keeps the CLOSED drawer out of the tab order and the
     accessibility tree (it holds ~40 links), and stops it contributing
     phantom horizontal overflow. Delayed on close so the slide-out is seen. */
  visibility:hidden;
  transition:transform var(--t-slow) var(--ease-out),visibility 0s linear var(--t-slow);
  box-shadow:-20px 0 60px rgba(4,11,34,.28);
}
.drawer.open{transform:translateX(0);visibility:visible;transition:transform var(--t-slow) var(--ease-out),visibility 0s}
.drawer-head{
  flex:none;height:var(--header-h);padding-inline:20px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--line-soft);
}
.drawer-close{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);display:grid;place-items:center;font-size:1.05rem;color:var(--ink)}
.drawer-body{flex:1;overflow-y:auto;padding:10px 20px 22px;overscroll-behavior:contain}
.acc-item{border-bottom:1px solid var(--line-soft)}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 2px;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);text-align:left;
}
.acc-head i{font-size:.75rem;color:var(--muted);transition:transform var(--t) var(--ease)}
.acc-item.open .acc-head{color:var(--navy-600)}
.acc-item.open .acc-head i{transform:rotate(180deg);color:var(--gold-600)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height var(--t-slow) var(--ease-out)}
.acc-panel a{
  display:flex;align-items:center;gap:10px;padding:11px 2px 11px 16px;
  font-size:.9rem;color:var(--body);border-left:2px solid var(--line);
}
.acc-panel a:hover{color:var(--navy-600);border-left-color:var(--gold)}
.acc-panel>div{padding-bottom:12px}
.drawer-foot{flex:none;padding:18px 20px;border-top:1px solid var(--line-soft);display:grid;gap:10px;background:var(--surface-2)}
body.no-scroll{overflow:hidden}

/*========================= 10. HERO =========================*/
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(1100px 620px at 78% -8%,rgba(30,79,190,.45),transparent 62%),
    radial-gradient(760px 520px at 8% 108%,rgba(212,175,55,.18),transparent 60%),
    linear-gradient(158deg,var(--navy-900) 0%,var(--navy-850) 45%,#02081C 100%);
  color:#fff;padding:clamp(58px,7vw,92px) 0 clamp(70px,7vw,100px);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 62% at 50% 34%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 34%,#000 20%,transparent 78%);
}
.hero-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.55}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,60px);align-items:center}
.hero h1{color:#fff;margin-bottom:20px;letter-spacing:-.03em}
.hero h1 .grad-gold{display:inline-block}
.hero-sub{color:#A9B7D6;font-size:clamp(1rem,1.3vw,1.16rem);max-width:560px;line-height:1.72;margin-bottom:30px}
.hero .btn-row{margin-bottom:34px}

/* Trust strip under hero copy */
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.10)}
.trust-item{display:flex;align-items:center;gap:9px;font-size:.83rem;color:#9FADCB;font-weight:500}
.trust-item i{color:var(--gold);font-size:.95rem}

/* Hero stat row */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
.hero-stat{padding:16px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(8px)}
.hero-stat b{display:block;font-family:var(--font-display);font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:800;color:#fff;line-height:1.1}
.hero-stat span{display:block;font-size:.72rem;color:#8C9BBC;margin-top:5px;letter-spacing:.03em}

/* Hero right — trading panel mock */
.hero-panel{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.panel-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.panel-sym{display:flex;align-items:center;gap:11px}
.panel-sym .sym-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(140deg,var(--gold),var(--gold-500));color:var(--navy-900);font-size:.85rem}
.panel-sym b{font-family:var(--font-display);font-size:.98rem;color:#fff;display:block;line-height:1.2}
.panel-sym span{font-size:.72rem;color:#8C9BBC}
.live-pill{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9BF3C4;background:rgba(22,201,104,.14);border:1px solid rgba(22,201,104,.28);padding:5px 11px;border-radius:var(--r-pill)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(22,201,104,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(22,201,104,0)}100%{box-shadow:0 0 0 0 rgba(22,201,104,0)}}

.panel-price{padding:18px 18px 6px;display:flex;align-items:baseline;gap:12px}
.panel-price .pp{font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chg{display:inline-flex;align-items:center;gap:5px;font-size:.85rem;font-weight:700;padding:4px 10px;border-radius:var(--r-pill)}
.chg.up{color:#6EE7A6;background:var(--up-soft)}
.chg.down{color:#FF9AA0;background:var(--down-soft)}
.panel-chart{padding:0 8px 8px;height:180px}
.panel-chart svg{width:100%;height:100%;overflow:visible}
.panel-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.10);border-top:1px solid rgba(255,255,255,.10)}
.panel-foot div{background:rgba(6,20,54,.5);padding:13px 10px;text-align:center}
.panel-foot span{display:block;font-size:.68rem;color:#8C9BBC;letter-spacing:.05em;text-transform:uppercase}
.panel-foot b{display:block;font-family:var(--font-display);font-size:.98rem;color:#fff;margin-top:4px;font-variant-numeric:tabular-nums}

/* Floating quote chips */
.float-chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
  padding:11px 15px;border-radius:14px;
  background:rgba(255,255,255,.96);box-shadow:var(--sh-lg);
  font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--ink);
  animation:floaty 6s ease-in-out infinite;
}
.float-chip small{display:block;font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:.04em}
.float-chip .v{font-variant-numeric:tabular-nums}
.float-chip.up .v{color:var(--up)}
.float-chip.down .v{color:var(--down)}
.chip-a{top:9%;left:-26px;animation-delay:0s}
.chip-b{bottom:16%;right:-22px;animation-delay:1.4s}
.chip-c{bottom:-14px;left:12%;animation-delay:2.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/*========================= 11. MARKET TICKER =========================*/
.ticker{background:var(--navy-900);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);overflow:hidden;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--navy-900),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--navy-900),transparent)}
.ticker-track{display:flex;gap:0;width:max-content;animation:marquee 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:10px;padding:14px 26px;border-right:1px solid rgba(255,255,255,.06);white-space:nowrap}
.tick b{font-family:var(--font-display);font-size:.83rem;color:#DDE5F5;font-weight:700}
.tick .v{font-size:.83rem;color:#fff;font-variant-numeric:tabular-nums}
.tick .d{font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums}
.tick .d.up{color:var(--up)}
.tick .d.down{color:var(--down)}

/*========================= 12. CARDS =========================*/
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px 26px;position:relative;overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:rgba(212,175,55,.4)}
.card h3{margin-bottom:10px}
.card p{font-size:.94rem}
.card-ico{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.24rem;
  background:linear-gradient(145deg,var(--navy-800),var(--navy-600));color:var(--gold-300);
  margin-bottom:20px;box-shadow:0 10px 24px rgba(8,31,92,.22);
  transition:transform var(--t) var(--ease)
}
.card:hover .card-ico{transform:scale(1.07) rotate(-4deg)}
.card-ico.gold{background:linear-gradient(145deg,var(--gold-300),var(--gold-500));color:var(--navy-900);box-shadow:0 10px 24px rgba(212,175,55,.3)}
.card-num{
  position:absolute;right:18px;top:10px;font-family:var(--font-display);font-size:3.6rem;font-weight:800;
  color:var(--surface-2);line-height:1;z-index:0;pointer-events:none;
}
.card>*{position:relative;z-index:1}

.card-dark{
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.11);color:#9FADCB;backdrop-filter:blur(10px);
}
.card-dark:hover{border-color:rgba(212,175,55,.42);background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.03))}
.card-dark h3,.card-dark h4{color:#fff}
.card-dark .card-num{color:rgba(255,255,255,.05)}

/* Feature list inside cards */
.tick-list{display:grid;gap:11px;margin-top:18px}
/* Not flex: a <strong> lead-in plus its sentence are separate children, and
   flex would lay them out as two ragged columns instead of one paragraph. */
.tick-list li{position:relative;padding-left:26px;font-size:.91rem;line-height:1.55}
.tick-list li>i:first-child{position:absolute;left:0;top:.44em;font-size:.78rem;color:var(--up)}
.tick-list li strong{color:inherit}
.section-dark .tick-list li{color:#9FADCB}

/*========================= 13. STAT BAND =========================*/
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.stat-band>div{background:var(--surface);padding:30px 22px;text-align:center;transition:background var(--t) var(--ease)}
.stat-band>div:hover{background:var(--surface-2)}
.stat-band b{display:block;font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;line-height:1;
  background:linear-gradient(120deg,var(--navy-800),var(--navy-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-band span{display:block;font-size:.83rem;color:var(--muted);margin-top:9px;font-weight:500}
.section-dark .stat-band{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.11)}
.section-dark .stat-band>div{background:rgba(255,255,255,.03)}
.section-dark .stat-band>div:hover{background:rgba(255,255,255,.07)}
.section-dark .stat-band b{background:linear-gradient(120deg,#fff,var(--gold-300));-webkit-background-clip:text;background-clip:text;color:transparent}

/*========================= 14. TABS =========================*/
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.tab{
  font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--body);
  padding:11px 22px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);
  transition:all var(--t) var(--ease);display:inline-flex;align-items:center;gap:8px;
}
.tab i{font-size:.86em;opacity:.6}
.tab:hover{border-color:var(--navy-600);color:var(--navy-600)}
.tab.active{background:var(--navy-800);border-color:var(--navy-800);color:#fff;box-shadow:0 8px 22px rgba(8,31,92,.24)}
.tab.active i{opacity:1;color:var(--gold-300)}
.tab-panel{display:none;animation:fadeUp .5s var(--ease-out) both}
.tab-panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.section-dark .tab{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#A9B7D6}
.section-dark .tab.active{background:var(--gold);border-color:var(--gold);color:var(--navy-900)}
.section-dark .tab.active i{color:var(--navy-900)}

/*========================= 15. TABLES =========================*/
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);-webkit-overflow-scrolling:touch}
.tbl{min-width:660px;font-size:.92rem}
/* .tbl carries a 660px floor for the wide full-width instrument tables. Any
   table narrower than that — an explicit .tbl-sm, or any table dropped into a
   half-width .split column — cannot honour it, and the floor only produces a
   scrollbar that parks itself to the right and hides the first column. */
.tbl.tbl-sm,.split .tbl{min-width:0}
/* nowrap headers would reintroduce that scrollbar at narrow widths */
.tbl.tbl-sm thead th,.split .tbl thead th{white-space:normal}
@media (max-width:600px){
  .tbl.tbl-sm thead th,.tbl.tbl-sm tbody td,
  .split .tbl thead th,.split .tbl tbody td{padding:11px 8px}
  /* The descriptor under the symbol is the widest thing in the row and only
     repeats what the code above it already says. Dropping it on a phone is
     what takes these tables from "scrolls a little" to "fits". */
  .split .tbl .sym small{display:none}
  .split .tbl .sym{gap:9px}
  .split .tbl .sym-badge{width:28px;height:28px;font-size:.72rem}
}
.tbl thead th{
  font-family:var(--font-display);font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:16px 20px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl tbody td{padding:16px 20px;border-bottom:1px solid var(--line-soft);color:var(--body);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--t-fast) var(--ease)}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .sym{display:flex;align-items:center;gap:12px}
.tbl .sym-badge{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:.8rem;background:var(--surface-3);color:var(--navy-700)}
.tbl .sym b{display:block;font-family:var(--font-display);color:var(--ink);font-size:.92rem;line-height:1.3}
.tbl .sym small{color:var(--muted);font-size:.76rem}
.tbl .num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.tbl .up{color:var(--up);font-weight:700;font-variant-numeric:tabular-nums}
.tbl .down{color:var(--down);font-weight:700;font-variant-numeric:tabular-nums}
.tbl th.ta-r,.tbl td.ta-r{text-align:right}
.tbl .best{color:var(--navy-700);font-weight:800}
.tbl-note{font-size:.79rem;color:var(--muted);margin-top:14px;line-height:1.6}

/*========================= 16. ACCORDION / FAQ =========================*/
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.faq-item.open{border-color:rgba(212,175,55,.5);box-shadow:var(--sh-sm)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;
  padding:20px 24px;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);
}
.faq-q .ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--navy-600);font-size:.72rem;transition:all var(--t) var(--ease)}
.faq-item.open .faq-q .ic{background:var(--gold);color:var(--navy-900);transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--t-slow) var(--ease-out)}
.faq-a>div{padding:0 24px 22px;font-size:.94rem;line-height:1.72;color:var(--body)}

/*========================= 17. LOGO / BADGE STRIPS =========================*/
.badge-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
.badge-pill{
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);font-size:.85rem;font-weight:600;color:var(--ink);
  transition:all var(--t) var(--ease);
}
.badge-pill i{color:var(--gold-600);font-size:1rem}
.badge-pill:hover{border-color:var(--gold);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.section-dark .badge-pill{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#DDE5F5}
.section-dark .badge-pill i{color:var(--gold-300)}

/*========================= 18. CTA BAND =========================*/
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(40px,5vw,68px) clamp(26px,4vw,60px);
  background:radial-gradient(760px 400px at 88% 6%,rgba(30,79,190,.55),transparent 60%),
             linear-gradient(140deg,var(--navy-800),var(--navy-900));
  color:#fff;text-align:center;box-shadow:var(--sh-lg);
}
.cta-band::after{
  content:"";position:absolute;width:400px;height:400px;left:-140px;bottom:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.26),transparent 66%);
}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:#A9B7D6;max-width:600px;margin:0 auto 30px;font-size:1.05rem}
.cta-band .btn-row{justify-content:center}
.cta-note{margin-top:22px;font-size:.79rem;color:#7E8CAE}

/*========================= 19. PAGE HERO (inner pages) =========================*/
.page-hero{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(52px,6vw,86px) 0 clamp(52px,6vw,80px);
  background:radial-gradient(880px 480px at 82% -10%,rgba(30,79,190,.44),transparent 62%),
             linear-gradient(150deg,var(--navy-900),var(--navy-850) 60%,#03091F);
}
.page-hero::before{
  content:"";position:absolute;inset:0;opacity:.42;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent 72%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{color:#fff;max-width:940px;margin-bottom:16px}
.page-hero p{color:#A9B7D6;max-width:700px;font-size:1.08rem}
.page-hero .btn-row{margin-top:28px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.81rem;color:#8494B8;margin-bottom:20px}
.crumbs a:hover{color:var(--gold-300)}
.crumbs i{font-size:.6rem;opacity:.5}
.crumbs span{color:var(--gold-300)}

/*========================= 20. FOOTER =========================*/
.footer{background:var(--navy-900);color:#8FA0C2;padding-top:clamp(52px,6vw,78px);position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;top:-160px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,79,190,.24),transparent 66%);pointer-events:none;
}
.footer .container{position:relative;z-index:1}
.footer-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:36px;padding-bottom:44px}
.footer-brand>.brand{margin-bottom:20px}
.footer-brand p{font-size:.89rem;line-height:1.75;color:#8494B8;max-width:340px;margin-bottom:22px}
.footer-contact{display:grid;gap:10px;margin-bottom:22px}
.footer-contact a,.footer-contact span{display:flex;align-items:center;gap:11px;font-size:.87rem;color:#A9B7D6}
.footer-contact i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--gold);font-size:.78rem;flex:none}
.footer-contact a:hover{color:var(--gold-300)}
.social{display:flex;gap:10px}
.social a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:.92rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#C6D1E8;
  transition:all var(--t) var(--ease);
}
.social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-900);transform:translateY(-3px)}
.footer-col h4{font-family:var(--font-display);font-size:.79rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.footer-col a{display:block;font-size:.87rem;color:#8494B8;padding:6px 0;transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.footer-col a:hover{color:var(--gold-300);transform:translateX(3px)}


.footer-legal{border-top:1px solid rgba(255,255,255,.08);padding:32px 0;display:grid;gap:20px}
.legal-block h5{font-family:var(--font-display);font-size:.73rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#C6D1E8;margin-bottom:9px}
.legal-block p{font-size:.78rem;line-height:1.78;color:#75849F}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:22px 0 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.footer-bottom p{font-size:.8rem;color:#75849F}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px}
.footer-bottom nav a{font-size:.8rem;color:#8494B8}
.footer-bottom nav a:hover{color:var(--gold-300)}

/*========================= 21. MISC UI =========================*/
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:900;width:46px;height:46px;border-radius:50%;
  background:var(--navy-800);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-md);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all var(--t) var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--gold);color:var(--navy-900)}

.risk-strip{background:#FFF8E6;border-top:1px solid rgba(212,175,55,.35);border-bottom:1px solid rgba(212,175,55,.35);padding:14px 0}
.risk-strip p{font-size:.81rem;color:#6B5B22;display:flex;gap:11px;align-items:flex-start;line-height:1.65}
.risk-strip i{color:var(--gold-600);margin-top:3px;flex:none}

.note-box{border-left:3px solid var(--gold);background:var(--surface-2);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;font-size:.9rem;line-height:1.7}
.note-box strong{color:var(--ink);font-family:var(--font-display)}

/* Split media block */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,62px);align-items:center}
.split.rev .split-media{order:2}
.split-media img{border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%}
.split-body h2{margin-bottom:16px}

/*========================= 22. FORMS =========================*/
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:.94rem;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--navy-600);box-shadow:0 0 0 4px rgba(18,58,146,.10);
}
.field textarea{resize:vertical;min-height:130px}
.field small{font-size:.76rem;color:var(--muted)}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,40px);box-shadow:var(--sh-sm)}

/*========================= 23. SCROLL REVEAL =========================*/
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal].in{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}

/*========================= 24. RESPONSIVE =========================*/
@media (max-width:1180px){
  .mega-inner{grid-template-columns:1fr 1fr 300px;gap:26px}
  .mega-inner.cols-4-tight{grid-template-columns:1fr 1fr 1fr}
  .nav-link{padding:0 11px;font-size:.88rem}
  .footer-top{grid-template-columns:1.4fr repeat(3,1fr)}
  .footer-col.col-hide-lg{display:none}
}
@media (max-width:1024px){
  .nav,.nav-actions .btn-login{display:none}
  .burger{display:flex}
  .nav-actions{margin-left:auto}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-sub{max-width:none}
  .split,.split.rev .split-media{grid-template-columns:minmax(0,1fr);order:0}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-top{grid-template-columns:1fr 1fr 1fr;gap:30px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{max-width:none}
  .footer-col.col-hide-lg{display:block}
}
@media (max-width:820px){
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  :root{--gutter:16px;--header-h:66px}
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
  .stat-band{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .btn{padding:13px 22px;font-size:.9rem}
  .btn-lg{padding:15px 28px;font-size:.95rem}
  .btn-row .btn{flex:1 1 100%}
  .float-chip{display:none}
  .chip-a{display:flex;top:6%;left:8px;transform:scale(.9)}
  .card{padding:24px 20px}
  .cta-band{border-radius:var(--r-lg)}
}

/*========================= 25. LEGAL DOCUMENTS =========================*/
.legal-doc{font-size:.96rem;line-height:1.8;color:var(--body)}
.legal-doc h2{
  font-size:1.28rem;margin:38px 0 14px;padding-top:22px;
  border-top:1px solid var(--line-soft);color:var(--ink);
}
.legal-doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-doc h3{font-size:1.05rem;margin:26px 0 10px;color:var(--ink)}
.legal-doc p{margin-bottom:16px}
.legal-doc ul,.legal-doc ol{margin:0 0 18px;padding-left:0}
.legal-doc li{
  position:relative;padding-left:26px;margin-bottom:11px;line-height:1.75;
}
.legal-doc ul li::before{
  content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--gold);
}
.legal-doc ol{counter-reset:legal-ol}
.legal-doc ol li{counter-increment:legal-ol}
.legal-doc ol li::before{
  content:counter(legal-ol) ".";position:absolute;left:0;top:0;
  font-family:var(--font-display);font-weight:700;color:var(--gold-600);font-size:.9rem;
}
.legal-doc a{color:var(--navy-600);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal-doc a:hover{color:var(--gold-600)}
.legal-doc strong{color:var(--ink);font-weight:700}
.legal-doc table{margin-bottom:20px}

/* Compliance callout carried over from the v2 legal templates */
.legal-note,.legal-doc .legal-note{
  border-left:3px solid var(--down);
  background:#FFF4F4;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:18px 22px;margin-bottom:30px;
  font-size:.88rem;line-height:1.72;color:#8A3A3E;
}
.legal-updated{font-size:.84rem;color:var(--muted);margin-bottom:26px}

/*========================= 26. LEGAL INDEX CARDS =========================*/
.doc-card{display:flex;gap:18px;align-items:flex-start}
.doc-card .card-ico{margin-bottom:0;flex:none}
.doc-card h3{margin-bottom:6px}

/*========================= 27. HERO BACKGROUND VIDEO =========================*/
/*
  Layering inside .hero / .page-hero (both are `isolation:isolate`):
    element background gradient  ← always painted, and the fallback if no video
    -4  .hero-video   the footage
    -3  .hero-scrim   darkening so headline text stays legible over any frame
    -2  ::before      the faint grid
    -1  .hero-canvas  the drifting node network
     0  content
  The video element carries NO src in the HTML — js/cso.js injects the sources
  only when it is appropriate to spend the bandwidth, so phones, reduced-motion
  users and Save-Data users download zero bytes of video.
*/
.hero-video{
  position:absolute;inset:0;z-index:-4;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.1s var(--ease);
  pointer-events:none;
}
.hero-video.is-ready{opacity:1}
.hero-video.is-ready ~ .hero-scrim{opacity:1}

/* Scrim. Horizontal on desktop (text sits left), heavier vertical wash on
   narrow screens where the copy spans the full width. */
.hero-scrim{
  position:absolute;inset:0;z-index:-3;pointer-events:none;
  /* Only darken once footage is actually showing. With no video file the
     element is inert and the hero keeps its original gradient exactly. */
  opacity:0;transition:opacity 1.1s var(--ease);
  background:
    linear-gradient(90deg,rgba(4,11,34,.94) 0%,rgba(4,11,34,.82) 36%,rgba(4,11,34,.40) 70%,rgba(4,11,34,.24) 100%),
    linear-gradient(180deg,rgba(4,11,34,.50) 0%,rgba(4,11,34,.06) 26%,rgba(4,11,34,.14) 60%,rgba(4,11,34,.76) 100%);
}
.page-hero .hero-scrim{
  background:
    linear-gradient(90deg,rgba(4,11,34,.94) 0%,rgba(4,11,34,.82) 46%,rgba(4,11,34,.60) 100%),
    linear-gradient(180deg,rgba(4,11,34,.60) 0%,rgba(4,11,34,.20) 40%,rgba(4,11,34,.78) 100%);
}

/* Pause/play control — WCAG 2.2.2 requires a way to stop motion that
   auto-plays for more than five seconds. Only revealed once video is running. */
.video-toggle{
  position:absolute;right:22px;bottom:22px;z-index:4;
  width:40px;height:40px;border-radius:50%;
  display:none;place-items:center;
  background:rgba(4,11,34,.55);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:.78rem;backdrop-filter:blur(8px);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.video-toggle.is-visible{display:grid}
.video-toggle:hover{background:rgba(4,11,34,.8);border-color:var(--gold);color:var(--gold-300);transform:scale(1.06)}
.video-toggle .ic-play{display:none}
.video-toggle.is-paused .ic-play{display:block}
.video-toggle.is-paused .ic-pause{display:none}

@media (max-width:640px){
  .video-toggle{right:14px;bottom:14px;width:36px;height:36px}
  .hero-scrim{
    background:linear-gradient(180deg,rgba(4,11,34,.86) 0%,rgba(4,11,34,.70) 40%,rgba(4,11,34,.90) 100%);
  }
  .page-hero .hero-scrim{
    background:linear-gradient(180deg,rgba(4,11,34,.88) 0%,rgba(4,11,34,.74) 45%,rgba(4,11,34,.90) 100%);
  }
}

/*========================= 28. INNER-PAGE HERO ANIMATION =========================*/
/*
  js/cso.js injects a <canvas class="hero-fx"> as the first child of every
  .page-hero and picks a variant from <body data-page>. It sits above the
  gradient and the ::before grid but below .container (z-index 1), so the
  headline always stays on top. Fades in so a slow first frame is never seen.
*/
.hero-fx{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0;transition:opacity .9s var(--ease);
}
.hero-fx.is-on{opacity:1}

/* Keeps the animation from competing with the copy on the left. */
.page-hero .container::before{
  content:"";position:absolute;inset:-40px -30px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,11,34,.72) 0%,rgba(4,11,34,.38) 55%,rgba(4,11,34,0) 100%);
}
@media (max-width:820px){
  .page-hero .container::before{
    background:linear-gradient(180deg,rgba(4,11,34,.68) 0%,rgba(4,11,34,.44) 60%,rgba(4,11,34,.20) 100%);
  }
  .hero-fx{opacity:0}
  .hero-fx.is-on{opacity:.7}
}


/*========================= 29. LIVE MARKET CHART (TradingView) =========================*/
/*
  Replaces the old mock terminal on the homepage Platforms section with a real,
  live TradingView Advanced Chart. Category tabs (Forex / Metals / Indices /
  Crypto / Energies / Shares) swap the chart symbol and its watchlist, so every
  market group we quote is reachable from one panel.

  The panel is deliberately LIGHT: the widget runs TradingView's white theme,
  so the chrome around it is white too rather than the navy terminal shell that
  used to sit here — a white chart inside a dark frame reads as a mistake.

  The widget script is third-party and is injected by initTradingView() in
  js/cso.js only when the panel scrolls into view — nothing is downloaded for
  visitors who never reach this section.

  COMPLIANCE: TradingView prices are third-party market data, not CSO Markets
  execution prices. That disclosure now lives in the footer risk warning
  (partials/footer.html) rather than under the panel.
*/
.tvx-shell{position:relative;max-width:1240px;margin-inline:auto}

.tvx-frame{
  position:relative;z-index:1;
  border-radius:18px;overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--sh-lg);
  color:var(--ink);
}

/* ---------- top bar ---------- */
.tvx-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.tvx-brand{
  display:flex;align-items:center;gap:9px;flex:none;
  font-family:var(--font-display);font-size:.76rem;font-weight:800;
  letter-spacing:.14em;color:var(--ink);
}
.tvx-brand i{color:var(--gold-600)}
.tvx-live{
  flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:.58rem;font-weight:800;letter-spacing:.11em;color:#0E7A45;
  background:var(--up-soft);border:1px solid rgba(22,201,104,.30);
  padding:5px 10px;border-radius:var(--r-pill);
}

/* ---------- category tabs ---------- */
.tvx-cats{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--line);
  background:var(--surface);
}
.tvx-cats button{
  font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  color:var(--body);background:var(--surface);cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 15px;display:inline-flex;align-items:center;gap:7px;
  transition:color var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.tvx-cats button i{font-size:.72em;opacity:.8}
.tvx-cats button:hover{color:var(--ink);border-color:var(--navy-600);background:var(--surface-2)}
.tvx-cats button[aria-selected="true"]{
  color:var(--navy-900);border-color:transparent;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  box-shadow:0 6px 16px rgba(212,175,55,.28);
}
.tvx-cats button:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px}

/* ---------- chart body ---------- */
.tvx-chart{
  position:relative;
  height:clamp(460px,64vh,680px);
  background:var(--surface);
}
.tvx-mount{position:absolute;inset:0}
.tvx-chart iframe{display:block;border:0;width:100%!important;height:100%!important}
.tvx-mount .tradingview-widget-container,
.tvx-mount .tradingview-widget-container__widget{height:100%;width:100%}

/* loading + failure states, both centred over the chart box */
.tvx-state{
  position:absolute;inset:0;z-index:2;background:var(--surface);
  display:grid;place-content:center;justify-items:center;
  gap:12px;text-align:center;padding:24px;
}
.tvx-state[hidden]{display:none}
.tvx-state p{font-size:.85rem;color:var(--body);max-width:42ch;line-height:1.6}
.tvx-spin{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--gold);
  animation:tvxSpin .9s linear infinite;
}
@keyframes tvxSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tvx-spin{animation-duration:2.4s}}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .tvx-bar{padding:10px 13px;gap:10px}
  .tvx-cats{padding:10px 13px}
  .tvx-cats button{font-size:.68rem;padding:5px 12px}
  .tvx-chart{height:clamp(400px,70vh,540px)}
}
@media (max-width:600px){
  .tvx-brand{font-size:.66rem}
  .tvx-cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tvx-cats::-webkit-scrollbar{display:none}
  .tvx-cats button{flex:none}
  .tvx-chart{height:420px}
}

/*========================= 30. SECTION MOCKUPS =========================*/
/*
  Pure CSS/SVG product mockups that replaced four multi-megabyte screenshots
  (images/dashboard.png was 2.1 MB and appeared twice, images/hero.png 2.2 MB
  twice more). Each is built for the section it sits in:

    .mock-assets   about.html      — the multi-asset account
    .mock-mt5      platforms #mt5  — depth of market + strategy tester

  COMPLIANCE: every number in here is illustrative interface furniture, never
  live pricing. The panels carry a DEMO/illustration marker and the sections
  around them make no pricing claim.
*/
.mock{position:relative;isolation:isolate}
.mock-shell{
  position:relative;z-index:1;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,#0C1A3B,#060F27 62%,#040A1D);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 34px 80px -26px rgba(4,11,34,.62),0 0 0 1px rgba(255,255,255,.03) inset;
  color:#C4D0E8;font-variant-numeric:tabular-nums;
}
.mock-shell::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 260px at 78% -14%,rgba(40,96,215,.20),transparent 68%);
}

.mock-head{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.mock-title{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:.78rem;font-weight:800;
  letter-spacing:.09em;color:#fff;
}
.mock-title i{color:var(--gold)}
.mock-title small{
  display:block;font-size:.62rem;font-weight:600;letter-spacing:.04em;
  color:#7E8DB2;margin-top:2px;
}
.mock-badge{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:.56rem;font-weight:800;letter-spacing:.11em;color:#9BF3C4;
  background:rgba(22,201,104,.13);border:1px solid rgba(22,201,104,.28);
  padding:5px 10px;border-radius:var(--r-pill);
}
.mock-badge.gold{color:var(--gold-200);background:rgba(212,175,55,.13);border-color:rgba(212,175,55,.30)}

/* Floating accent cards that break the panel edge. Offsets stay smaller than
   the container gutter so they can never push the page sideways. */
.mock-float{
  position:absolute;z-index:3;border-radius:16px;padding:14px 16px;
  box-shadow:0 22px 46px -14px rgba(4,11,34,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mock-float.dark{background:rgba(10,24,55,.94);border:1px solid rgba(255,255,255,.12);color:#DCE4F6}
.mock-float.light{background:rgba(255,255,255,.97);border:1px solid var(--line);color:var(--ink)}
.mock-float.blue{background:linear-gradient(140deg,var(--navy-500),var(--navy-700));border:1px solid rgba(255,255,255,.16);color:#fff}
.mock-float.gold{background:linear-gradient(140deg,var(--gold-300),var(--gold-500));border:1px solid rgba(255,255,255,.22);color:var(--navy-900)}
.mf-tr{top:-16px;right:-16px}
.mf-br{right:-16px;bottom:-18px}
.mf-bl{left:-16px;bottom:-18px}
.mf-tl{left:-16px;top:-16px}
.mock-float small{display:block;font-size:.6rem;letter-spacing:.1em;font-weight:800;text-transform:uppercase;opacity:.72}
.mock-float b{display:block;font-family:var(--font-display);font-size:1.18rem;line-height:1.2;margin-top:3px}
.mock-float .delta{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;margin-top:5px}

/* --- drift ---
   The panel and the accent cards ride on deliberately mismatched cycles. If
   they share a duration they rise and fall in lockstep, which is what makes a
   float read as cheap; offset periods make it read as depth. Negative delays
   start each one mid-cycle so nothing is synchronised on load.

   transform only, so this stays on the compositor and costs nothing per
   frame. The global prefers-reduced-motion reset already disables it. */
.mock-shell{animation:mockDrift 9s ease-in-out infinite}
.mock-float{animation:mockFloat 6.5s ease-in-out infinite}
.mf-tr{animation-duration:7.2s;animation-delay:-.8s}
.mf-tl{animation-duration:7.6s;animation-delay:-3.1s}
.mf-br{animation-duration:6.1s;animation-delay:-2.4s}
.mf-bl{animation-duration:7.9s;animation-delay:-1.5s}
@keyframes mockDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes mockFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* The hover lift would fight the drift, so it scales the shadow instead. */
.mock-float:hover{animation-play-state:paused}

.up{color:#4ADE9E}
.down{color:#FF8E96}
.mock-shell .up{color:#4ADE9E}
.mock-shell .down{color:#FF8E96}

/* ---------------- 1. Multi-asset account (about.html) ---------------- */
.ma-list{padding:6px 8px 10px}
.ma-list li{
  display:grid;grid-template-columns:34px minmax(0,1fr) 78px 62px;
  align-items:center;gap:12px;padding:9px 10px;border-radius:11px;
  transition:background var(--t) var(--ease);
}
.ma-list li:hover{background:rgba(255,255,255,.05)}
.ma-ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  color:var(--gold-300);font-size:.82rem;
}
.ma-name{
  min-width:0;font-family:var(--font-display);font-size:.86rem;font-weight:700;color:#EAF0FB;
}
.ma-name small{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:500;color:#7E8DB2;margin-top:1px}
.ma-spark{width:78px;height:26px;overflow:visible}
.ma-spark polyline{
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:190;stroke-dashoffset:190;
  animation:maDraw 1.5s var(--ease) forwards;
}
.ma-spark.up polyline{stroke:#3FD597}
.ma-spark.down polyline{stroke:#F0737C}
.ma-list li:nth-child(2) polyline{animation-delay:.12s}
.ma-list li:nth-child(3) polyline{animation-delay:.24s}
.ma-list li:nth-child(4) polyline{animation-delay:.36s}
.ma-list li:nth-child(5) polyline{animation-delay:.48s}
.ma-list li:nth-child(6) polyline{animation-delay:.60s}
@keyframes maDraw{to{stroke-dashoffset:0}}
.ma-chg{text-align:right;font-size:.76rem;font-weight:700}
.mock-assets .mf-tr{max-width:190px}
.mock-assets .mf-bl b{font-size:1.34rem}

/* ---------------- 2. MetaTrader 5 (platforms #mt5) ---------------- */
.mt5-body{display:grid;grid-template-columns:minmax(0,1fr) 148px}
.mt5-chart{position:relative;min-width:0;padding:14px 12px 8px}
.mt5-candles{display:flex;align-items:flex-end;gap:4px;height:168px}
.mt5-candles i{
  flex:1;min-width:0;display:block;border-radius:1.5px;position:relative;
  transform-origin:bottom;animation:mt5Rise .7s var(--ease-out) backwards;
}
.mt5-candles i::before{
  content:"";position:absolute;left:50%;width:1.5px;transform:translateX(-50%);
  top:-7px;bottom:-7px;background:inherit;opacity:.55;
}
@keyframes mt5Rise{from{transform:scaleY(.15);opacity:0}to{transform:scaleY(1);opacity:1}}
.mt5-tfs{
  display:flex;gap:4px;flex-wrap:wrap;padding:10px 14px 14px;
  border-top:1px solid rgba(255,255,255,.07);
}
.mt5-tfs i{
  font-style:normal;font-size:.6rem;font-weight:700;color:#8090B4;
  padding:3px 7px;border-radius:5px;border:1px solid rgba(255,255,255,.10);
}
.mt5-tfs i.on{background:rgba(212,175,55,.18);color:var(--gold-200);border-color:transparent}

/* depth of market ladder */
.mt5-dom{border-left:1px solid rgba(255,255,255,.08);padding:12px 12px;background:rgba(255,255,255,.02)}
.dom-h{font-size:.55rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6F7EA2;margin-bottom:9px}
.dom-row{position:relative;display:flex;justify-content:space-between;font-size:.66rem;padding:3.5px 6px;border-radius:4px;margin-bottom:2px}
.dom-row span{position:relative;z-index:1}
.dom-row::before{
  content:"";position:absolute;top:0;bottom:0;right:0;border-radius:4px;
  width:var(--w,40%);animation:domPulse 3.4s var(--ease) infinite alternate;
}
.dom-row.ask::before{background:rgba(239,69,76,.22)}
.dom-row.bid::before{background:rgba(22,201,104,.22)}
.dom-row.ask{color:#FF9AA0}
.dom-row.bid{color:#6EE7A6}
.dom-row:nth-child(odd)::before{animation-delay:-1.7s}
@keyframes domPulse{from{width:var(--w,40%)}to{width:calc(var(--w,40%) * .55)}}
.dom-mid{
  text-align:center;font-family:var(--font-display);font-size:.78rem;color:#fff;
  padding:7px 0;margin:5px 0;border-block:1px dashed rgba(255,255,255,.14);
}
.mock-mt5 .mf-br{min-width:196px}
.st-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden;margin-top:9px}
.st-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold-300),var(--gold-500));animation:stFill 4.5s var(--ease) infinite}
@keyframes stFill{0%{width:8%}70%{width:87%}100%{width:87%}}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
  .mock-float{padding:12px 14px}
  .mock-float b{font-size:1.05rem}
}
@media (max-width:600px){
  /* Pull the floats fully inside — a negative offset here would hand the page
     a horizontal scrollbar on the narrowest phones. */
  .mf-tr{top:-10px;right:0;max-width:66%}
  .mf-br{right:0;bottom:-10px}
  .mf-bl{left:0;bottom:-10px}
  .mf-tl{left:0;top:-10px}
  .mt5-body{grid-template-columns:minmax(0,1fr)}
  .mt5-dom{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .ma-list li{grid-template-columns:30px minmax(0,1fr) 56px}
  .ma-spark{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ma-spark polyline{animation:none;stroke-dashoffset:0}
  .mt5-candles i{animation:none}
  .dom-row::before,.st-bar i{animation:none}
  .st-bar i{width:87%}
}

/*========================= 31. BRAND LOCKUP =========================*/
/*
  The badge on its own was doing too much work: a 1254px circular mark with
  "CSO MARKETS" baked inside it, shrunk to 42px, so the name was unreadable
  and the artwork looked mushy. Now it is a proper lockup — the mark as a
  mark, with the name set in live type beside it — served from a 192px asset
  (images/logo-mark.png, 55 KB against the original 1.9 MB).

  Three placements share it:
    .brand                header, on navy
    .brand.brand-on-light drawer head, on white
    .brand.brand-lg       footer, with the descriptor line
*/
.brand{flex:none;display:inline-flex;align-items:center;gap:11px;min-width:0}

.brand-mark{
  flex:none;position:relative;display:block;
  width:var(--mark,44px);height:var(--mark,44px);border-radius:50%;
  box-shadow:0 0 0 1px rgba(212,175,55,.42),0 8px 20px -7px rgba(212,175,55,.42);
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.brand-mark img{display:block;width:100%;height:100%;border-radius:50%}
.brand:hover .brand-mark{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(232,199,102,.72),0 12px 26px -7px rgba(212,175,55,.60);
}

.brand-word{
  display:flex;align-items:baseline;gap:7px;min-width:0;
  font-family:var(--font-display);line-height:1;white-space:nowrap;
}
.brand-word b{
  font-size:var(--word,1.12rem);font-weight:800;letter-spacing:.04em;
  color:var(--gold-300);
  background:linear-gradient(135deg,var(--gold-200),var(--gold) 52%,var(--gold-500));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-word i{
  font-style:normal;font-size:calc(var(--word,1.12rem) * .70);
  font-weight:600;letter-spacing:.24em;color:#C6D2EA;
}

/* Drawer head sits on white, so the silver half needs real contrast. */
.brand-on-light .brand-word i{color:var(--body)}
.brand-on-light .brand-word b{
  background:linear-gradient(135deg,var(--gold-500),var(--gold-600));
  -webkit-background-clip:text;background-clip:text;
  color:var(--gold-600);
}

/* Footer has the room for the descriptor, so the lockup stacks there. */
.brand-lg{--mark:72px;--word:1.24rem;align-items:center}
/* The footer mark sits alone on a large dark field, so it can carry a real
   glow. Outer box-shadows paint behind the element background, so the halo
   lands under the artwork without any stacking-context juggling. */
.brand-lg .brand-mark{
  box-shadow:
    0 0 0 1px rgba(212,175,55,.55),
    0 0 26px rgba(212,175,55,.42),
    0 0 72px 14px rgba(212,175,55,.18);
}
.brand-lg:hover .brand-mark{
  box-shadow:
    0 0 0 1px rgba(232,199,102,.85),
    0 0 32px rgba(212,175,55,.60),
    0 0 88px 18px rgba(212,175,55,.26);
}
.brand-lg .brand-word{flex-wrap:wrap;row-gap:5px}
.brand-lg .brand-word em{
  flex:0 0 100%;font-style:normal;font-family:var(--font-body);
  font-size:.66rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:#7E8DB2;white-space:normal;
}

@media (max-width:640px){
  .brand{--mark:36px;--word:1rem;gap:9px}
  .brand-lg{--mark:60px;--word:1.14rem}
}
/* Below this the header runs out of room next to the CTA and the burger.
   The drawer head has the whole panel to itself, so it keeps the full name. */
@media (max-width:430px){
  .brand-word i{display:none}
  .brand-on-light .brand-word i{display:inline}
}

/*========================= 32. TRADINGVIEW EMBEDS =========================*/
/*
  The advanced-chart widget runs with autosize:true, which makes TradingView's
  script overwrite the container's inline height with 100%. That only resolves
  if an ancestor has a real height — against an auto-height parent it collapses
  to the iframe's 150px default and the chart renders as a sliver. This wrapper
  supplies the height the widget is measuring against.

  The calendar and heatmap widgets carry their own fixed height, so they do not
  need it — only autosize embeds do.
*/
.tv-frame{
  height:clamp(420px,64vh,620px);
  padding:0;
  overflow:hidden;
}
.tv-frame>.tradingview-widget-container,
.tv-frame .tradingview-widget-container__widget{height:100%;width:100%}
.tv-frame iframe{display:block;height:100%!important;width:100%!important}

/* ── CTA band button row ──────────────────────────────────────────────────
   The duplicate CFD line that sat under these buttons has gone (the full
   risk warning still runs on every page, above the footer), so the row is
   now the last thing in the band and has to close the block on its own.

   Equal minimum widths turn three labels of three different lengths into a
   deliberate set rather than a ragged line, and the margin restores the
   breathing room the removed paragraph used to provide. */
.cta-band .btn-row{
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-bottom:2px;
}
.cta-band .btn-row .btn{ min-width:250px; }

@media (max-width:640px){
  /* Full-width stacked on a phone, so a minimum width would fight the layout. */
  .cta-band .btn-row .btn{ min-width:0; }
}

/* ── Education articles ────────────────────────────────────────────────────
   Long-form reading, so the body column is capped near 68 characters. Wider
   than that and the eye loses the line; narrower and the page feels cramped
   on a laptop. The rest of the site keeps its full-width container. */
.art-body{
  max-width:68ch;
  margin:0 auto;
}
.art-body h2{ margin-top:2.2em; }
.art-body h3{ margin-top:1.6em; }
.art-body > *:first-child{ margin-top:0; }

/* The dateline under the H1: present, but never competing with it. */
.art-meta{
  font-size:.82rem;
  letter-spacing:.04em;
  opacity:.72;
  margin-top:14px;
}

/* Worked examples inside an article — a figure with its own ground so the
   numbers read as a worked case rather than as body copy. */
.art-body .example{
  background:var(--surface-2);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:18px 20px;
  margin:1.8em 0;
}
.art-body .example p:last-child{ margin-bottom:0; }
.art-body .example .lbl{
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  color:var(--muted);
  margin-bottom:8px;
}

/* Figures line up in columns when they sit in a table. */
.art-body .tbl td.num,
.art-body .tbl th.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* The risk note closing every article. Deliberately not styled to blend in —
   it is a compliance surface, not decoration, and must stay legible. */
.art-risk{
  max-width:68ch;
  margin:2.4em auto 0;
  border-left-width:4px;
  font-size:.92rem;
}

/* Related articles at the foot of a piece. */
.art-related{
  max-width:1100px;
  margin:3.2em auto 0;
  padding-top:2.4em;
  border-top:1px solid var(--line);
}
.art-related h2{ margin-bottom:22px; font-size:1.3rem; }

/* Category heading on the Learn hub listing. */
.art-group{
  margin:2.6em 0 18px;
  font-size:1.15rem;
  letter-spacing:-.01em;
}
.art-group:first-of-type{ margin-top:1.4em; }

@media (max-width:640px){
  .art-body, .art-risk{ max-width:none; }
}