/* ==========================================================================
   AQ Markets — Base Stylesheet
   Brand: dark purple elevation system (surface-0..3) + gold accents.
          No white/off-white surfaces anywhere; text is warm ivory on dark.
   Type:  "Plus Jakarta Sans" (display) / "IBM Plex Sans" (body, data)
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plusjakartasans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plusjakartasans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plusjakartasans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plusjakartasans-800.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibmplexsans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibmplexsans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibmplexsans-600.woff2') format('woff2');
}

:root {
  /* Elevation tiers (dark, purple-hued — no pure black) */
  --surface-0: #1C0F2A;
  --surface-1: #2A1740;
  --surface-2: #341B49;
  --surface-3: #432160;

  /* Brand-fixed */
  --color-purple: #4A266A;
  --color-purple-light: #6B3E93; /* borders/dividers only, never text */
  --color-gold: #C08F2D;
  --color-gold-light: #D9AE55;

  /* Text */
  --text-primary: #F4EFE6;
  --text-secondary: #C9BEDD;
  --text-muted: #8E7FA8; /* surface-0/1/2/3 only */
  --text-on-gold: #241333;

  /* Semantic */
  --color-error: #E5636B;
  --color-success: #4FB286;

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;

  /* Layout + kept structural tokens (redefined for the dark system) */
  /* Fluid content column: holds a tuned 1200px on laptops/tablets, then grows
     smoothly with the viewport — a constant ~12% side gutter across every common
     desktop/QHD monitor — and caps at 2160px so 4K screens fill to ~78% width
     without stretching text to unreadable line lengths. Every band, the header
     capsule, and container-anchored decorations read this one token, so the whole
     layout scales as a single seamless system from phone to 4K. */
  --container: clamp(1200px, 76vw, 2160px);
  --radius: 6px;
  /* Rounded-corner scale (shared by dropdowns, cards, tables, inputs, wizard). */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 12px 30px rgba(0,0,0,0.35);
  --color-border: rgba(217,174,85,0.16); /* gold-tinted hairline for cards/inputs on dark surfaces */

  /* Luxury depth — layered shadows read richer than a single blur. */
  --shadow-soft: 0 2px 6px rgba(0,0,0,0.20), 0 10px 24px rgba(0,0,0,0.28);
  --shadow-lift: 0 6px 14px rgba(0,0,0,0.30), 0 26px 56px rgba(0,0,0,0.46);
  --shadow-gold: 0 18px 44px rgba(192,143,45,0.22);

  /* Signature gold — used for accents, gradient text, sheens. */
  --grad-gold: linear-gradient(120deg, #E9C877 0%, #D9AE55 38%, #C08F2D 100%);
  --grad-gold-soft: linear-gradient(135deg, var(--color-gold-light), var(--color-gold) 70%);

  /* Motion — one shared easing vocabulary so everything moves as one system. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
/* overflow-x: clip prevents horizontal scroll from decorative brand trails and
   pre-reveal transforms, without establishing a scroll container (so fixed/
   sticky positioning and vertical scrolling are unaffected). */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  /* Floating fixed header (top:14px + capsule height) clears content below it.
     Capsule height 68px (50px logo + 8px*2 vertical padding + 2px border) + 14px top gap = 82px. */
  padding-top: 82px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The off-canvas mobile menu parks at translateX(100%); clip so it never
     adds horizontal scroll. Decorative brand trails are also clipped by this.
     clip (not hidden): hidden silently makes body a programmatic scroll
     container; clip truncates without creating one. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 16px;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; }
h3 { font-size: 1.3rem; line-height: 1.3; }
/* balance kills widowed last words on multi-line headings; break-word guarantees
   long terms (e.g. "Cryptocurrencies") can never force horizontal scroll at 320px. */
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0 0 16px; color: var(--text-secondary); }
/* Anchored jumps must clear the floating fixed header capsule. */
[id] { scroll-margin-top: 120px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Fluid side gutters: 24px on phones (unchanged), breathing room on big screens. */
  padding: 0 clamp(24px, 2.6vw, 56px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 12px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-gold);
  display: inline-block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-gold);
  color: var(--text-on-gold);
}
.btn-primary:hover { background: var(--color-gold-light); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  border-color: rgba(217,174,85,0.4);
  color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--color-gold); color: var(--color-gold-light); }
/* Alternate outline (legacy "on light" variant) — kept dark-legible: gold on dark */
.btn-outline-dark {
  background: transparent;
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}
.btn-outline-dark:hover { background: var(--color-gold); color: var(--text-on-gold); border-color: var(--color-gold); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--surface-0);
  color: var(--text-secondary);
  font-size: 0.82rem;
}
.topbar .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a { color: var(--text-secondary); }
.topbar a:hover { color: var(--color-gold-light); }
.topbar .sep { opacity: 0.3; }

/* ---------- Header: liquid-glass floating capsule ---------- */
.site-header {
  position: fixed;
  top: 14px;
  /* Centered via auto margins, NOT transform: a transform here would become the
     containing block for the off-canvas mobile menu (position:fixed), trapping it
     inside the short capsule instead of filling the viewport. Auto-margin centering
     keeps the capsule aligned to .container while leaving fixed children viewport-fixed. */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 24px);
  /* The text container caps at 1200px, which is too narrow for the full 8-item nav +
     3 CTAs and silently crushed the logo to 0px on laptops. Let the capsule grow wider
     than the text container on mid widths (down to the nav's real needs) while still
     matching the container on large monitors, where it is already wide enough. */
  max-width: max(var(--container), 1340px);
  z-index: 100;
  border-radius: 20px;
  border: 1px solid rgba(217,174,85,0.28);
  /* Tint is deliberately light: the blur below does the work, and letting more
     of the page show through is what reads as glass rather than a solid bar.
     Every surface behind it is dark purple, so nav contrast holds at this alpha. */
  background: rgba(42,23,64,0.64);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    /* PERF: this is a position:fixed element that stays on screen, so the GPU
       re-samples + re-blurs everything behind it on EVERY scroll frame. Blur
       cost scales with radius, so keep the radius modest (10px still reads as
       frosted glass) and keep it CONSTANT across scroll states (see below) so
       the filter is never torn down / rebuilt mid-scroll. */
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--surface-1); }
}
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,239,230,0.12), transparent);
  pointer-events: none;
}
/* PERF: on scroll we only deepen the background tint + shadow (cheap, composited).
   We deliberately do NOT change the backdrop-filter radius here — changing it
   forces the browser to re-initialise the (expensive) blur mid-scroll, which was
   the primary cause of scroll jank. The blur stays constant at blur(10px). */
.site-header.scrolled {
  background: rgba(42,23,64,0.80);
  box-shadow: 0 10px 36px rgba(0,0,0,0.42);
}
/* Fill the capsule: the base .container caps at var(--container) (1200px) and would
   re-narrow inside the wider header, re-starving the nav. Let the header's own
   max-width govern the chrome width instead. */
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 26px; max-width: none; }
.site-header .logo { flex: 0 0 auto; }                 /* never let the logo be squeezed to 0px */
/* Tight-cropped lockup at 50px in a 68px capsule (8+50+8 padding + 2px border) —
   the capsule is 12px trimmer than the old 80px bar (12+56+12) while the tighter
   crop keeps the wordmark visually larger. No added shadow — the enhanced lockup
   carries its own embossed shading (brand rule: never decorate the logo).
   body padding-top (82px desktop / 68px mobile) depends on this height. */
.site-header .logo img { height: 50px; width: auto; display: block; flex-shrink: 0; }
.logo img { width: auto; display: block; }

.main-nav { display: flex; align-items: center; gap: 6px; }
/* Top-level nav list only (child combinator) — never the nested .dropdown ul. */
.main-nav > ul { display: flex; gap: 15px; align-items: center; list-style: none; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  position: relative;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus-visible,
.main-nav > ul > li.active > a,
.main-nav > ul > li > a[aria-current="page"] { color: var(--color-gold-light); }
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.active > a::after,
.main-nav > ul > li > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--color-gold-light);
  border-radius: 2px;
}
.main-nav .caret { font-size: 0.6em; opacity: 0.7; display: inline-block; transition: transform 0.2s ease; }
.has-dropdown:hover > a .caret,
.has-dropdown:focus-within > a .caret { transform: rotate(180deg); }

.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(42,23,64,0.95);
  min-width: 230px;
  border: 1px solid rgba(217,174,85,0.22);
  border-radius: 14px;
  box-shadow: 0 18px 44px -12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 10px;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .has-dropdown .dropdown {
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
  }
}
/* Invisible hover bridge across the 10px margin gap (same trick as .mega-menu's
   ::before) so the pointer never crosses dead space between trigger and panel —
   that dead zone is what made hover dropdowns flicker shut. */
.has-dropdown .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* Glass top sheen, mirroring the header capsule. */
.has-dropdown .dropdown::after {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,239,230,0.14), transparent);
  pointer-events: none;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown li a {
  display: block;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
}
.dropdown li a:hover { background: rgba(217,174,85,0.09); color: var(--color-gold-light); }
/* The Login menu lives in .header-cta (a <span>, not a nav <li>), so it has no
   positioned ancestor of its own: without this, its panel anchors to the fixed
   header capsule and renders at the far-left of the bar. Anchor it to the button
   and right-align so it can't spill past the capsule edge. */
.header-cta .has-dropdown { position: relative; display: inline-flex; }
.header-cta .has-dropdown .dropdown { left: auto; right: 0; }

.header-cta { display: flex; align-items: center; gap: 10px; margin-left: 14px; flex: 0 0 auto; }
.header-cta .btn { padding: 9px 16px; font-size: 0.85rem; white-space: nowrap; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--text-primary);
  margin: 6px 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(120deg, var(--surface-0) 0%, var(--color-purple) 55%, var(--surface-2) 100%);
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
  padding: 90px 0 70px;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(55% 65% at 80% 45%, rgba(192,143,45,0.14), transparent 70%);
  pointer-events: none;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
/* Grid children default to min-width:auto — without this a wide chart/headline
   can stretch its column instead of shrinking with the viewport. */
.hero .container > * { min-width: 0; }
.hero h1 { color: var(--text-primary); }
.hero h1 span { color: var(--color-gold); }
.hero p.lead { color: rgba(244,239,230,0.82); font-size: 1.08rem; max-width: 520px; }
/* Hero NAV panel — "smoked amethyst" liquid glass. Layered violet translucency +
   gold rim-light + top sheen give the slab its own depth; the backdrop blur refracts
   the hero gradient behind it so the glass reads as glass, not a flat card. */
.hero-visual {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  min-height: 300px;
  padding: 24px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(158deg, rgba(46,24,66,0.85) 0%, rgba(21,11,34,0.78) 100%);
  border: 1px solid rgba(217,174,85,0.26);
  box-shadow:
    0 30px 70px -24px rgba(0,0,0,0.6),
    0 42px 120px -42px rgba(192,143,45,0.16),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hero-visual {
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    /* No corner bloom: an even, deeper smoke reads calmer and lets the gold line
       be the only warm element on the slab. */
    background: linear-gradient(158deg, rgba(46,24,66,0.7) 0%, rgba(21,11,34,0.6) 100%);
  }
}
/* Hairline sheen skimming the top edge — the tell-tale of a glass surface. */
.hero-visual::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
}
.hero-visual img { border-radius: 12px; }

/* Panel typography */
.nav-glass__head { display: flex; flex-direction: column; gap: 6px; }
.nav-glass__eyebrow {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(217,174,85,0.74);
}
.nav-glass__eyebrow i { font-style: normal; letter-spacing: 0.12em; color: var(--text-muted); }
.nav-glass__figure {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.3rem, 3vw, 2.75rem);
  line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(92deg, #E7C36B 0%, #C08F2D 58%, #9A7526 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-glass__foot {
  display: flex; justify-content: space-between; padding: 0 2px;
  font-family: var(--font-body); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,239,230,0.3);
}

/* Precision-instrument graph */
.hero-chart { width: 100%; height: auto; display: block; flex: 1 1 auto; }
.hero-chart .chart-grid { stroke: rgba(244,239,230,0.06); stroke-width: 1; }
.hero-chart .chart-baseline { stroke: rgba(217,174,85,0.32); stroke-width: 1; }
.hero-chart .chart-guide { stroke: rgba(217,174,85,0.26); stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; }
/* Crisp hairline stroke, no glow blur: deep gold that brightens only at the tip. */
.hero-chart .chart-line { fill: none; stroke: url(#heroLineGrad); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-chart .chart-fill { fill: url(#heroChartFade); }
.hero-chart .chart-dot { fill: var(--color-gold-light); stroke: rgba(15,8,26,0.85); stroke-width: 1.25; }
.hero-chart .chart-tick { font: 500 9px var(--font-body); letter-spacing: 0.06em; fill: rgba(244,239,230,0.34); }

.hero-strip {
  background: var(--surface-1);
  border-top: 1px solid var(--color-border);
}
.hero-strip .container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* The disclaimer is a grid child, so span the full track set rather than letting
   it take a single stat cell. Kept out of the .stat-label text on purpose: the
   marker only fits one label on two lines, which leaves the stat row ragged. */
.hero-strip .illustrative-note {
  grid-column: 1 / -1;
  text-align: center;
  /* .hero-strip has no padding of its own — the band's rhythm comes from
     .stat's 28px. Match it below the note, or the note sits on the band edge. */
  margin: 14px 0 28px;
}
.hero-strip .stat {
  padding: 28px 20px;
  text-align: center;
  border-left: 1px solid var(--color-border);
}
.hero-strip .stat:first-child { border-left: none; }
.stat-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* small hero variant for interior pages */
.page-hero {
  background: linear-gradient(120deg, var(--surface-0), var(--color-purple));
  color: var(--text-primary);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero h1 { color: var(--text-primary); margin-bottom: 10px; }
.page-hero p { color: rgba(244,239,230,0.78); max-width: 560px; margin-bottom: 26px; }
.page-hero .btn-row { margin-top: 8px; }

/* ---------- Sections ---------- */
section { padding: 76px 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Band whitespace hygiene ----------
   Two defects made nearly every band bottom-heavy, and some of them hollow:

   1. TRAILING MARGINS. The last element in a band keeps its bottom margin. That
      margin separates it from nothing, then stacks on top of the section's own
      76px padding — measured across the site as a clean 76px above the content
      but 85-120px below it. That asymmetry is what reads as "off": the heading
      sits high in the band with a pool of dead space under it. Zero it at both
      levels, since an inner trailing margin would otherwise collapse straight
      back out through its parent and reappear.

   2. HEADING-ONLY BANDS. A .section-head alone in its container has no grid
      beneath it to introduce, yet still reserves the 44px gap meant for one and
      still sets a 640px measure inside a 1200px container. The result is a tall
      band, half of it empty, with a ~560px gutter to the right. Such a band is
      an interlude rather than a full section, so tighten its rhythm and let the
      measure run wider. Alignment is deliberately left untouched: these blocks
      carry multi-line prose, which this design system sets ragged-right
      everywhere except short centred CTA heads.

   The :has() rule is additive — where it is unsupported the first two rules
   still remove the dead space, just without the tighter padding.

   Reach matters here: the trailing margin can sit several levels down (e.g.
   section > .container > .grid-2 > div > p), so a child-combinator chain misses
   it. Match the last flow element at any depth inside the band's final block,
   restricted to the elements that actually carry a bottom margin. */
section > .container > :last-child,
section > .container > :last-child :last-child:is(p, ul, ol, dl, h1, h2, h3, h4, h5, h6) { margin-bottom: 0; }

section > .container > .section-head:only-child { max-width: 820px; }
/* Widening the block is for the heading, not the prose: 820px is ~100ch, well past
   the 68-72ch measure in design.md §3. Keep the paragraph readable. */
section > .container > .section-head:only-child > p { max-width: 68ch; }
section:has(> .container > .section-head:only-child) { padding: 54px 0; }

/* Heading-only bands on very large screens.
   These 18 bands (eyebrow + h2 + one lead paragraph, no content beneath) are the
   only place the 4K void is real: the block holds its 820px measure while the
   container grows to 1946px at 2560 and 2160px at 3840, so it fills 42% of the
   band and the rest is bare. Bands that DO have content below are not affected —
   a narrow head over a wide grid is normal, and widening those was the mistake in
   the reverted pass.

   The fix splits the block instead of stretching it: heading in column one, lead
   in column two. Column two is fixed at the reading measure, so the paragraph
   never widens past 68ch; column one is 1fr and absorbs all surplus width, which
   display type carries happily. The band ends up completely filled with no
   trailing hole — capping the text alone could only ever move the void, not
   remove it.

   Below 1920 nothing changes: at 1440 the block already fills 68% of a 1200px
   container, which needs no help. .center is excluded — those five bands are a
   different component (they carry a CTA button) and are already balanced. */
@media (min-width: 1920px) {
  section > .container > .section-head:only-child:not(.center) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    column-gap: clamp(64px, 4vw, 112px);
    align-items: start;
  }
  /* Eyebrow labels the whole band, so it sits alone on row 1; the heading and the
     lead share row 2 and top-align against each other. */
  section > .container > .section-head:only-child:not(.center) > .eyebrow { grid-area: 1 / 1; }
  section > .container > .section-head:only-child:not(.center) > h2 { grid-area: 2 / 1; }
  section > .container > .section-head:only-child:not(.center) > p:not(.eyebrow) { grid-area: 2 / 2; }
}

/* Same principle for a bare trust strip: a single row of chips is a one-line
   reassurance, not a section. Wrapping 23px of chips in 76px/76px of padding
   reads as an empty spacer (open-account.html, between hero and "Account setup").
   Where the strip sits UNDER a heading it is part of a real section and this
   :only-child rule correctly does not match. */
section:has(> .container > .trust-strip:only-child) { padding: 30px 0; }
/* Alternate elevation tier for section rhythm (was the light "paper" tier in v1).
   Faint gold hairlines seam the tier changes — the elevation steps read as
   deliberate strata rather than abutting rectangles. */
.bg-off { background: var(--surface-1);
  border-top: 1px solid rgba(217,174,85,0.06); border-bottom: 1px solid rgba(217,174,85,0.06); }
/* Deepest tier — same as body baseline, used for emphasis/contrast vs .bg-off. */
.bg-dark {
  background: var(--surface-0);
  color: var(--text-secondary);
}
.bg-dark h2, .bg-dark h3 { color: var(--text-primary); }
.bg-dark p { color: var(--text-secondary); }

/* Instruments / feature cards.
   minmax(0,1fr), never bare 1fr: a bare 1fr track's min-size is the content's
   min-content width, so one long word or wide image can blow the whole grid past
   the viewport on small screens. */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: center; }

.card {
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  /* PERF: only animate the GPU-composited transform + a cheap background tint.
     box-shadow is intentionally NOT transitioned — animating a 48px-radius shadow
     repaints the whole card every frame on hover. It settles instantly instead,
     which is imperceptible next to the smooth lift. */
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.card:hover { transform: translateY(-4px); background: var(--surface-3); box-shadow: 0 24px 48px rgba(0,0,0,0.45); }
.card .card-media { height: 170px; background: var(--surface-1); overflow: hidden; }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.card .card-body { padding: 26px; }
.card .card-body h3 { margin-bottom: 8px; }
.card .card-body p { margin-bottom: 14px; font-size: 0.95rem; }
.card .card-body a.link { color: var(--color-gold); font-weight: 700; font-size: 0.9rem; }
.card .card-body a.link:hover { color: var(--color-gold-light); text-decoration: underline; }

.feature {
  display: flex;
  gap: 16px;
  padding: 28px;
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.feature .icon {
  flex: none;
  width: 50px;
  height: 50px;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  color: var(--text-on-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.feature h3 { margin-bottom: 6px; font-size: 1.1rem; }
.feature p { margin: 0; font-size: 0.92rem; }

/* Trading conditions split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
/* Hanging marker, NOT flex. As a flex container the li turns every inline child
   into its own flex item, so an item containing links becomes several items that
   cannot wrap as one sentence — the text then runs off-screen (12 pages here mix
   links into checklist copy). Absolute-positioning the tick keeps the content in
   normal inline flow, so it wraps however long it gets. */
.checklist li {
  position: relative;
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--text-primary);
}
.checklist li:last-child { border-bottom: none; }
.checklist .tick {
  position: absolute;
  left: 0;
  top: 12px;            /* == li padding-top, so the tick sits on the first line */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--text-on-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
}
.split-media {
  background: var(--surface-2);
  border-radius: 16px;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.step { position: relative; padding: 0 30px; text-align: left; }
.step .step-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: rgba(217,174,85,0.22);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}
.step h3 { margin-bottom: 8px; }
.step::after {
  content: "";
  position: absolute;
  top: 22px;
  right: -10px;
  width: 20px;
  border-top: 2px dashed var(--color-gold);
}
.step:last-child::after { display: none; }

/* Pricing (legacy — repurposed as performance stat cards, and as the
   Investor Portal preview card on investor-access.html, in later tasks) */
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 800px; margin: 0 auto; }
/* 3-tier variant (e.g. account-types Standard/Pro/VIP). auto-fit degrades 3->2->1 columns
   with the viewport on its own; higher specificity than the base + the mobile collapse rule,
   so it governs at every width without a media-query fight. */
.pricing-grid.tiers-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 1100px; }
/* auto-fit resolves to TWO tracks across a wide middle band, which strands the
   third tier alone with an empty cell beside it. Below the width where three
   tracks still fit, stack instead: widening one tier into the spare cell would
   read as "this is the recommended plan", a claim the layout should not make.
   .tiers-3 has to be named explicitly here — it outranks a bare .pricing-grid. */
@media (max-width: 880px) {
  .pricing-grid, .pricing-grid.tiers-3 { grid-template-columns: 1fr; }
}
.price-card {
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.price-card.popular { border: 2px solid var(--color-gold); box-shadow: var(--shadow-card); }
/* Premium tier (VIP / Raw) — top of the hierarchy: a 2px gold-gradient ring, a faint
   gold glow from the crown, and a gold-filled CTA, so it clearly outranks "Most Popular". */
.price-card.premium {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad-gold) border-box;
  box-shadow: var(--shadow-gold), var(--shadow-card);
}
.price-card.premium::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 50% 0%, rgba(217,174,85,0.12), transparent 62%);
  pointer-events: none;
}
.price-card.premium .badge { background: var(--grad-gold); color: var(--text-on-gold); }
.price-card.premium .plan-price { color: var(--color-gold-light); }
.price-card .badge {
  position: absolute;
  top: -14px;
  right: 28px;
  background: var(--color-gold);
  color: var(--text-on-gold);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price-card .plan-name { color: var(--color-gold); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.06em; }
.price-card .plan-price { font-family: var(--font-display); font-size: 2.6rem; color: var(--text-primary); margin: 6px 0 2px; }
.price-card .plan-sub { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 20px; }
.price-card ul { margin-bottom: 26px; }
.price-card ul li {
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  display: flex;
  gap: 10px;
}
.price-card ul li:last-child { border-bottom: none; }
.price-card .btn { width: 100%; }
.price-card .pattern-corner { width: 130px; height: 130px; opacity: 0.35; }

/* Performance stat card (performance.html) */
.performance-card {
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
}
.performance-card .stat-figure { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--color-gold); }
.performance-card .stat-label { font-family: var(--font-body); color: var(--text-secondary); font-size: 0.9rem; margin-top: 6px; }
.performance-card .stat-note { font-family: var(--font-body); color: var(--text-muted); font-size: 0.78rem; margin-top: 10px; }

/* Platform / portal badges */
.platform-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.platform-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.9rem;
}
.platform-badge:hover { border-color: var(--color-gold); color: var(--color-gold-light); }

/* Blog / news */
.news-card .card-media { position: relative; }
.news-card .tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--color-gold);
  color: var(--text-on-gold);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* Payment strip (legacy — removed from markup in a later task) */
.payment-strip { text-align: center; padding: 50px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.payment-strip .label { font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; margin-bottom: 26px; }
.payment-strip .grid-5 img { max-height: 34px; width: auto; margin: 0 auto; filter: grayscale(1); opacity: 0.6; }

/* CTA banner */
/* The banner is space-between: heading left, buttons right. Left to fill the full
   container it keeps growing past the point where that reads as a layout — on a
   2560px screen it spans ~1945px and the middle third is an empty purple gap with
   the two halves stranded at the edges. Cap it so the heading and the buttons stay
   visually related. 75rem is a no-op at <=1440 (the banner is already ~1120px
   there), and being rem it tracks the root font-size steps at 1920/2560 rather
   than shrinking in relative terms on the screens it exists to fix. */
.cta-banner {
  background: var(--color-purple);
  color: var(--text-primary);
  border-radius: 20px;
  padding: 50px 56px;
  max-width: 75rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { color: var(--text-primary); margin-bottom: 6px; }
.cta-banner p { color: rgba(244,239,230,0.78); margin: 0; }

/* ---------- Footer ---------- */
/* content-visibility: the footer is a large identical subtree on all 44 pages and
   is never in the first viewport — skipping its layout/paint until scroll approach
   shortens first render. The intrinsic-size placeholder keeps the scrollbar stable. */
.site-footer { background: var(--surface-0); color: var(--text-secondary); padding-top: 66px;
  border-top: 1px solid rgba(217,174,85,0.10);
  content-visibility: auto; contain-intrinsic-size: auto 720px; }
.footer-top {
  display: grid;
  /* Six children (brand + five link columns). A 4-track grid wrapped the last two
     onto a second row and left tracks 3-4 empty — a ~534x163px void at the foot
     of all 44 pages, the most-repeated dead space on the site. One track each. */
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 36px;
  /* measured: 0 wrapped labels at 1100px and up */
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(217,174,85,0.12);
}
/* Between the 6-track desktop footer and the 2-track mobile one sits a window
   (~981-1080px) where five link columns fall under ~120px and labels like
   "Trading Conditions" wrap to two lines. Three tracks take the 6 children as
   exactly two full rows — no empty cell, and columns come back to ~290px.
   MUST stay after the base rule: a media query adds no specificity, so source
   order is what decides which of the two .footer-top rules wins. */
@media (min-width: 981px) and (max-width: 1080px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Two rows here instead of one, so the footer is ~939px rather than ~706px.
     Reserve for it in-range only — raising the base would over-reserve ~276px at
     1440px and make the page shrink on paint instead of grow. */
  .site-footer { contain-intrinsic-size: auto 945px; }
}
.footer-brand .logo img { height: 46px; margin-bottom: 16px; }
.footer-brand p { color: var(--text-muted); font-size: 0.9rem; max-width: 280px; }
.footer-col h4 {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
/* Footer links are bare <a> children of .footer-col — force each onto its own line. */
.footer-col a { display: block; margin-bottom: 11px; font-size: 0.9rem; color: var(--text-secondary); }
.footer-col a:last-child { margin-bottom: 0; }
.footer-col a:hover { color: var(--color-gold-light); }
.footer-col.contact li { display: flex; flex-direction: column; gap: 2px; }
.footer-col.contact .label { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom .legal-links { display: flex; gap: 20px; }
.footer-bottom .legal-links a:hover { color: var(--color-gold-light); }
.social { display: flex; gap: 10px; }
.social a {
  width: 34px; height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}
.social a:hover { border-color: var(--color-gold); color: var(--color-gold-light); }

.footer-legal {
  background: var(--surface-0);
  border-top: 1px solid rgba(217,174,85,0.10);
  padding: 26px 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.footer-legal p { color: var(--text-muted); margin-bottom: 10px; font-size: 0.78rem; }
.footer-legal p:last-child { margin-bottom: 0; }
.footer-legal strong { color: var(--text-secondary); }

/* Restricted-jurisdiction list. A neutral dash rather than the gold tick used elsewhere —
   these are countries we refuse, so a checkmark would read exactly backwards. */
.restricted-list {
  display: grid;
  /* Capped rather than auto-fit across the full callout: nine short country names spread
     over seven columns scan as a scattered row, not as a list you can check yourself against. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 640px;
  gap: 10px 24px;
  margin: 0 0 20px;
}
.restricted-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-primary);
}
.restricted-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 8px;
  height: 1px;
  background: var(--color-gold);
}

/* The non-regulation notice is the most consequential sentence on the site. Give the band a
   real heading so assistive tech can jump to it, without adding a second visible title to a
   footer that already reads as fine print. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Brand mark decorations — the α-mark lifted from the brand wordmark
   Single source of truth for the shape: images/mark.svg (vectorised 1:1 from
   the official icon). Every decorative logo on the site is painted by masking a
   gold gradient through that exact mark, so nothing is ever an approximation.
   Tint + opacity + tiling are all controlled here in CSS.
   ========================================================================== */

/* Single crisp gold mark (used for section watermarks / accents). */
.brand-mark {
  display: block;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold) 70%);
  -webkit-mask: url('../images/mark.svg') no-repeat center / contain;
  mask: url('../images/mark.svg') no-repeat center / contain;
  aspect-ratio: 735.5 / 525;
}

/* Corner "logo trail" — a receding field of the real mark, faded into the
   corner along the arrow's diagonal. Parent applies the radial fade; the ::before
   tiles the actual mark. The two masks compose (mark ∩ fade) without needing
   mask-composite, so it is robust across engines. */
.pattern-corner {
  position: absolute;
  z-index: 0;
  right: -40px;
  bottom: -40px;
  width: clamp(380px, 20vw, 620px);
  height: clamp(300px, 16vw, 480px);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(130% 130% at 90% 90%, #000 10%, rgba(0,0,0,0.6) 38%, rgba(0,0,0,0.15) 65%, transparent 86%);
  mask-image: radial-gradient(130% 130% at 90% 90%, #000 10%, rgba(0,0,0,0.6) 38%, rgba(0,0,0,0.15) 65%, transparent 86%);
}
.pattern-corner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-gold);
  opacity: 0.5;
  -webkit-mask: url('../images/mark.svg') repeat;
  mask: url('../images/mark.svg') repeat;
  -webkit-mask-size: 88px 62.8px;
  mask-size: 88px 62.8px;
}
/* Hero brand trail: paint the α-mark only in the GUTTERS — the empty space between the
   viewport edge and the centred content container — fading it fully to transparent
   before it reaches the copy. --gutter mirrors the container's own centring math,
   (100vw - container) / 2, so the clear zone tracks the text column at EVERY width and
   the marks can never touch hero copy (the previous fixed 216px bands bled into the
   text on narrow laptops, where the gutter is tiny). When the container fills the
   viewport (≈≤1200px) the gutter is 0, so the trail gracefully vanishes rather than
   overlapping. Band reads identically from laptop to ultrawide. */
.hero > .pattern-corner,
.page-hero > .pattern-corner {
  inset: 0;            /* fills the hero; resets the base right/bottom:-40px */
  width: auto;         /* let the four offsets define the box (NOT shrink-to-fit) */
  height: auto;
  --gutter: max(0px, (100vw - var(--container)) / 2);
  /* Peak at 55% black (not 100%) so the marks never hit the viewport edge at full
     strength — the trail reads as a faint engraving, not a wallpaper. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0, transparent var(--gutter), transparent calc(100% - var(--gutter)), rgba(0,0,0,0.55) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.55) 0, transparent var(--gutter), transparent calc(100% - var(--gutter)), rgba(0,0,0,0.55) 100%);
}
.hero > .pattern-corner::before,
.page-hero > .pattern-corner::before { opacity: 0.22; }
/* Pattern-corner is always the last child of these containers — keep real
   content painted above it regardless of container size (absolute-positioned
   elements otherwise paint above static content irrespective of DOM order). */
.hero > *:not(.pattern-corner),
.page-hero > *:not(.pattern-corner),
.cta-banner > *:not(.pattern-corner),
.contact-panel > *:not(.pattern-corner),
.price-card > *:not(.pattern-corner) {
  position: relative;
  z-index: 1;
}

/* Full-bleed faint mark watermark for dark feature sections. */
.pattern-wash { position: relative; }
.pattern-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-gold);
  opacity: 0.05;
  -webkit-mask: url('../images/mark.svg') repeat;
  mask: url('../images/mark.svg') repeat;
  -webkit-mask-size: 150px 107px;
  mask-size: 150px 107px;
  pointer-events: none;
}

/* ---------- Photo duotone ---------- */
.card-media.duotone { position: relative; }
.card-media.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(74,38,106,0.75), rgba(192,143,45,0.35));
  mix-blend-mode: multiply;
}
.card-media.duotone img { filter: grayscale(0.3) contrast(1.05); }

/* ---------- Callouts ---------- */
.callout {
  border-left: 4px solid var(--color-gold);
  background: var(--surface-2);
  padding: 18px 22px;
  border-radius: 0 10px 10px 0;
  margin: 0 0 20px;
}
.callout p:last-child { margin-bottom: 0; }
.callout-risk { border-left-color: var(--color-gold); }
.callout p { color: var(--text-primary); }

/* Registered office block. The decorative locator sits beside the address rather
   than above it, so the callout reads as one balanced unit instead of an
   illustration with text stranded underneath. */
.office-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  padding: 28px 32px;
}
.office-callout .label {
  display: block;
  color: var(--color-gold-light);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
/* <address> is the correct element here, but its UA italic default fights the
   display face — reset to the body voice. */
.office-address {
  font-style: normal;
  color: var(--text-primary);
  line-height: 1.9;
}
@media (max-width: 760px) {
  .office-callout { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .office-callout svg { order: 2; }
}

/* ---------- Contact split ---------- */
.contact-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.contact-panel {
  background: var(--color-purple);
  color: var(--text-primary);
  padding: 46px 40px;
  position: relative;
  overflow: hidden;
}
.contact-panel h3 { color: var(--text-primary); }
.contact-panel .contact-item { margin-bottom: 22px; }
.contact-panel .contact-item .label { display:block; color: var(--color-gold-light); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.contact-panel .contact-item a { color: var(--text-primary); }
/* Deepens toward the base as it descends + a gold hairline set into the top edge,
   so the form reads as a distinct engraved panel beside the purple contact panel.
   All field styling lives in the single form system further down (recessed wells). */
.contact-form-card {
  background: linear-gradient(180deg, var(--surface-2) 0%, #2A1539 100%);
  padding: 46px 40px;
  box-shadow: inset 0 1px 0 rgba(217,174,85,0.22);
}

/* Form status + validation states (consumed by main.js in Task 3).
   Status is a bordered chip, not bare coloured text — it reads as a system
   response rather than an afterthought. */
.form-status { font-size: 0.9rem; font-weight: 600; margin-top: 14px; display: none;
  padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.form-status.visible { display: block; }
.form-status.success { color: var(--color-success); border-color: rgba(79,178,134,0.35); background: rgba(79,178,134,0.08); }
.form-status.error { color: var(--color-error); border-color: rgba(229,99,107,0.35); background: rgba(229,99,107,0.08); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------- Luxury micro-finish ---------- */
/* Text selection in brand gold — the smallest surfaces carry the system too. */
::selection { background: rgba(217,174,85,0.30); color: var(--text-primary); }
/* Gold-tinted scrollbars: standard properties for Chrome/Firefox, -webkit
   pseudos as the Safari fallback (Safari has no scrollbar-color). */
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: rgba(166,124,45,0.6) var(--surface-0); }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb { background: rgba(217,174,85,0.26); border-radius: 8px; border: 3px solid var(--surface-0); }
::-webkit-scrollbar-thumb:hover { background: rgba(217,174,85,0.42); }

/* ==========================================================================
   Motion system — scroll reveals, orchestrated entrances, micro-interactions.
   Everything shares --ease-out / --ease-spring so the whole site moves as one.
   All of this is disabled under prefers-reduced-motion (see end of file).
   ========================================================================== */

/* Scroll reveal: elements start lowered + transparent, settle when in view.
   JS adds .is-visible via IntersectionObserver and staggers grouped children. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.rv-left  { transform: translateX(-30px); }
.reveal.rv-right { transform: translateX(30px); }
.reveal.rv-scale { transform: translateY(26px) scale(0.96); }
/* will-change: auto once settled — releases the GPU layer each reveal element
   holds; dozens of permanently-promoted layers add up on low-end phones. */
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

/* Hero entrance — a single orchestrated load sequence, top to bottom. */
.hero-anim > * { opacity: 0; animation: heroIn 0.9s var(--ease-out) forwards; }
.hero-anim .eyebrow    { animation-delay: 0.05s; }
.hero-anim h1          { animation-delay: 0.15s; }
.hero-anim p.lead      { animation-delay: 0.30s; }
.hero-anim .btn-row    { animation-delay: 0.45s; }
.hero-anim .hero-metrics { animation-delay: 0.58s; }
.hero-visual-anim { opacity: 0; animation: heroVisualIn 1.1s var(--ease-out) 0.35s forwards; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Gold gradient text — for the accented word in the hero headline. */
.text-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Animated hero chart: the line draws itself, fill + dot follow.
   Dash length ≈ the real path length (538.5), so the draw is visible for the
   full 2.2s instead of spending the first half off-screen. */
.hero-chart .chart-line {
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: drawLine 2.2s var(--ease-out) 0.5s forwards;
}
.hero-chart .chart-fill { opacity: 0; animation: fadeIn 1.2s ease 1.6s forwards; }
.hero-chart .chart-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: popDot 0.5s var(--ease-spring) 2.6s forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes popDot { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }

/* Pulsing halo on the live chart dot — quiet sign of "real-time". */
.hero-chart .chart-pulse {
  fill: var(--color-gold-light);
  transform-box: fill-box;
  transform-origin: center;
  animation: pulseRing 2.4s ease-out 2.85s infinite;
}
@keyframes pulseRing {
  0%   { opacity: 0.5; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(3.2); }
  100% { opacity: 0;   transform: scale(3.2); }
}

/* ---------- Micro-interactions ---------- */

/* Primary buttons get a light sheen that sweeps across on hover + a spring lift. */
.btn { position: relative; overflow: hidden; }
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn-primary:active { transform: translateY(0); }
.btn-outline:hover, .btn-outline-dark:hover { transform: translateY(-2px); }

/* Cards: lift, warm the surface, glow a gold rim, and slow-zoom the photo. */
.card { position: relative; transition: transform 0.35s var(--ease-out), background-color 0.35s ease, border-color 0.35s ease; }
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px transparent;
  transition: box-shadow 0.35s ease;
  pointer-events: none;
}
.card:hover { transform: translateY(-6px); background: var(--surface-3); box-shadow: var(--shadow-lift); }
.card:hover::after { box-shadow: 0 0 0 1px rgba(217,174,85,0.55), 0 0 30px rgba(192,143,45,0.14); }
.card .card-media img { transition: transform 0.6s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.06); }
.card .card-body a.link { position: relative; display: inline-block; transition: transform 0.25s var(--ease-out); }
.card:hover .card-body a.link { transform: translateX(3px); }

/* Feature tiles + performance/portal cards share the lift language. */
.feature, .performance-card, .platform-badge, .price-card {
  transition: transform 0.35s var(--ease-out), border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}
.feature:hover, .performance-card:hover {
  transform: translateY(-5px);
  border-color: rgba(217,174,85,0.4);
  box-shadow: var(--shadow-lift);
}
.feature:hover .icon { transform: rotate(-4deg) scale(1.05); }
.feature .icon { transition: transform 0.4s var(--ease-spring); }

/* Nav underline animates open from the left instead of snapping in. */
.main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--grad-gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a:focus-visible::after,
.main-nav > ul > li.active > a::after,
.main-nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }

/* Checklist ticks pop slightly on row hover. */
.checklist li { transition: color 0.25s ease; }
.checklist .tick { transition: transform 0.3s var(--ease-spring); }
.checklist li:hover .tick { transform: scale(1.12) rotate(-6deg); }

/* Social + footer links get a gentle lift. */
.social a { transition: transform 0.3s var(--ease-spring), border-color 0.25s ease, color 0.25s ease; }
.social a:hover { transform: translateY(-3px); }

/* Section headings can carry a hairline gold rule that draws in on reveal. */
.section-head.center .eyebrow { justify-content: center; }

/* Focus-visible: a clear gold ring everywhere for keyboard users. */
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Luxury polish ---------- */

/* Lock the page behind the open mobile menu. */
body.nav-lock { overflow: hidden; }

/* Hamburger morphs into an X when the menu is open. */
.nav-toggle span { transform-origin: center; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Inline hero metric row (replaces the detached strip look on the homepage). */
.hero-metrics {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}
.hero-metrics .m-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-metrics .m-label {
  margin-top: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Warmer gradient sheen over the deepest sections for depth. */
.bg-off { position: relative; }

/* Eyebrow gets a small mark glyph so the brand recurs quietly through the page. */
.eyebrow.with-mark::after {
  content: "";
  width: 15px;
  height: 11px;
  margin-left: 2px;
  background: var(--color-gold-light);
  -webkit-mask: url('../images/mark.svg') no-repeat center / contain;
  mask: url('../images/mark.svg') no-repeat center / contain;
  display: inline-block;
}

/* Stat figures in the strip animate gold like the hero metrics. */
.hero-strip .stat-figure { transition: transform 0.3s var(--ease-out); }
.hero-strip .stat:hover .stat-figure { transform: translateY(-2px); }

/* Steps: number sits in a soft gold-tinted well; connector is a gradient. */
.step .step-num {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
}
.step::after { border-top-color: rgba(217,174,85,0.5); }

/* Dropdown items slide their gold cue in on hover. */
.dropdown li a { transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease; }
.dropdown li a:hover { padding-left: 18px; }

/* CTA banner: quiet gold top-edge highlight for a premium finish. */
.cta-banner::after {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,174,85,0.6), transparent);
}

/* ---------- Responsive ---------- */

/* Nav collapses to the hamburger at <=1240px. The full horizontal nav — five links
   plus two CTA buttons — has a natural width of ~1127px and needs a ~1210px viewport
   to sit on one row; below that it wraps and overflows the capsule (e.g. the Request
   Access button gets clipped on tablets). So tablets and small laptops get the clean
   off-canvas menu; the floating capsule chrome is kept until the phone breakpoint. */
@media (max-width: 1240px) {
  /* Solid (not frosted) header once the off-canvas menu can open. A backdrop-filter
     (like a transform) makes the header the containing block for the position:fixed
     menu, trapping it inside the short capsule. Dropping it lets the menu fill the
     viewport. Desktop (>=1241px) keeps the frosted-glass capsule. */
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-1);
  }
  .site-header.scrolled { background: var(--surface-2); }
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--color-purple);
    flex-direction: column;
    padding: 90px 24px 24px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    /* No z-index here on purpose: the .nav-toggle (the X) comes after .main-nav in
       the DOM, so it must paint on top to stay tappable. A positive z-index here
       would lift the panel above the X and hide the close button. */
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; width: 100%; gap: 4px; }
  .has-dropdown .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; margin-top: 0; background: rgba(244,239,230,0.06); display: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Desktop-only glass details (hover bridge + sheen) have no place in the accordion. */
  .has-dropdown .dropdown::before, .has-dropdown .dropdown::after { content: none; }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown li a { color: var(--text-primary); }
  .header-cta { flex-direction: column; align-items: stretch; margin-left: 0; margin-top: 20px; width: 100%; }
  /* In the drawer the Login menu behaves like every other accordion row. */
  .header-cta .has-dropdown { display: block; position: static; }
  .header-cta .has-dropdown > .btn { width: 100%; }
}

@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { min-height: 240px; }
  .split { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* 6 children over 2 tracks = 3 full rows, so no empty trailing cell. */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Dropping to 2 columns strands an odd-numbered final card alone with an empty
     cell beside it — the 3-up feature grids are the common case. Let that last
     card span the row instead. An even item count already fills its last row and
     is deliberately not matched. */
  .grid-3 > :last-child:nth-child(odd),
  .grid-4 > :last-child:nth-child(odd) { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .step::after { display: none; }
  /* Footer stacks 2-col here — keep the pre-render placeholder honest (measured). */
  /* Measured worst case in this range is 1122px (404.html @900px). The old 1000px
     under-reserved, so the page grew as the footer painted and the scrollbar
     jumped under the user near the page end. */
  .site-footer { contain-intrinsic-size: auto 1130px; }
  .hero-strip .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-strip .stat:nth-child(3) { border-left: none; }
  .contact-split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* MUST come with the 1-column collapse below. The <=980px rule lets a stranded
     odd final card span 2 tracks; once the grid is a single column, `span 2`
     invents an implicit second column sized to content and OUTSIDE the container,
     pushing cards off-canvas. body{overflow-x:clip} means there is no scrollbar,
     so that content becomes unreachable rather than merely ugly. Reset it. */
  .grid-3 > :last-child:nth-child(odd),
  .grid-4 > :last-child:nth-child(odd) { grid-column: auto; }
  /* Collapse the floating capsule back to a flush, full-width bar on phones. */
  .site-header {
    top: 0; left: 0; transform: none;
    width: 100%; max-width: none;
    border-radius: 0; border-width: 0 0 1px 0;
  }
  /* Desktop's 82px reserves the 14px floating-capsule gap + 68px header;
     the flush mobile bar drops that gap and its top border (67px tall), so 68px. */
  body { padding-top: 68px; }
  .topbar .container { justify-content: center; }
  .grid-3, .grid-4, .grid-2, .pricing-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  /* Fully stacked footer is ~1650px tall (measured at 375px). */
  /* Measured worst case 2037px (404.html @390px); 1650px was ~390px short. */
  .site-footer { contain-intrinsic-size: auto 2040px; }
  .cta-banner { flex-direction: column; text-align: center; }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Small phones (<=480px): tighten the vertical rhythm — desktop-scale paddings
   read as dead space on a 320-480px canvas — and step outsized display numbers
   down a notch. Nothing structural changes; the page just breathes correctly. */
@media (max-width: 480px) {
  section { padding: 56px 0; }
  .hero { padding: 64px 0 48px; }
  .section-head { margin-bottom: 32px; }
  .btn { padding: 13px 22px; }
  .btn-row { gap: 12px; }
  .cta-banner { padding: 36px 24px; }
  .hero-metrics { gap: 20px 26px; margin-top: 26px; }
  .hero-strip .stat { padding: 18px 12px; }
  .stat-figure { font-size: 1.55rem; }
  .step { padding: 0; }
  .contact-panel, .contact-form-card { padding: 34px 24px; }
  .price-card { padding: 28px 22px; }
}

/* Large monitors (QHD -> 4K): step the rem root up so type and spacing keep their
   laptop proportions on a 27-40" panel, while the px-based chrome (header capsule,
   logo, hairlines) intentionally holds its jewel scale. The fluid --container token
   already widens the column; this keeps the type from rattling around inside it. */
@media (min-width: 1920px) { html { font-size: 17px; } }
@media (min-width: 2560px) { html { font-size: 18px; } }

/* ==========================================================================
   Forex redesign — new component classes (Task 0.1 Steps 3-10)
   ========================================================================== */

/* Tabular figures everywhere numbers must align */
.tabular, .stat-figure, .spec-table td, .compare-table td, .conditions-table td,
.price-board td, .calc-result, .leaderboard td { font-variant-numeric: tabular-nums; }

/* Illustrative-data microlabel */
.illustrative-note { font-size: .75rem; color: var(--text-muted); letter-spacing: .02em; margin-top: 12px; }
.illustrative-note::before { content: "◆ "; color: var(--color-gold); }
/* Fine-print / disclaimer notes should never sit flush against a CTA row or element. */
.btn-row + p, .btn-row + .illustrative-note, .btn-row + small { margin-top: 20px; }

/* Risk warning — pinned to the viewport bottom rather than scrolling away at the top.
   ESMA prominence guidance treats a warning that stays fixed on screen while the user
   scrolls as good practice, and one that must be scrolled to — or parked under a heading
   like 'Legal'/'Disclaimers' — as poor practice. Hence pinned, not moved into the footer.
   Flat surface colour (never over a pattern wash) and its own top border for the same reason.
   Sits above .mobile-cta-bar (z-60); the two stack rather than overlap at <=760px. */
.risk-band { position: fixed; bottom: 0; left: 0; right: 0; z-index: 65;
  background: var(--surface-0); border-top: 1px solid var(--color-purple-light);
  color: var(--text-secondary); font-size: .78rem; line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom); }
/* Horizontal padding mirrors .container's fluid gutter — a fixed 24px left the
   risk text misaligned with everything else on wide monitors. */
.risk-band .container { padding: 8px clamp(24px, 2.6vw, 56px); }
.risk-band strong { color: var(--text-primary); }
/* Reserve room so the pinned warning can never cover the end of the page.
   The band measures ~54px at desktop widths; the extra ~20px keeps the footer's
   last line off the band's border instead of flush against it. */
body { padding-bottom: 76px; }
.trust-strip { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: center; }
.trust-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary);
  font-size: .9rem; } .trust-chip svg { width: 20px; height: 20px; color: var(--color-gold); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.spec-table, .compare-table, .conditions-table { width: 100%; border-collapse: collapse;
  background: var(--surface-2); font-size: .95rem; }
.spec-table th, .compare-table th, .conditions-table th { background: var(--surface-1);
  color: var(--color-gold-light); text-align: left; font-weight: 600; padding: 14px 16px;
  position: sticky; top: 0; }
.spec-table td, .compare-table td, .conditions-table td { padding: 13px 16px;
  border-top: 1px solid var(--color-purple-light); color: var(--text-primary); }
.compare-table td:first-child, .compare-table th:first-child { position: sticky; left: 0;
  background: var(--surface-1); }
.spec-table tbody tr:hover, .compare-table tbody tr:hover { background: var(--surface-3); }
.cell-up { color: var(--color-success); } .cell-down { color: var(--color-error); }

.price-board { width: 100%; border-collapse: collapse; }
.price-board th { color: var(--text-muted); font-weight: 500; font-size: .8rem; text-align: right; padding: 8px 14px; }
.price-board th:first-child { text-align: left; }
.price-board td { padding: 10px 14px; text-align: right; border-top: 1px solid var(--color-purple-light); }
.price-board td:first-child { text-align: left; font-weight: 600; }
.price-cell { transition: background-color 320ms ease; border-radius: 4px; }
.price-cell.flash-up { background: rgba(79,178,134,.22); } .price-cell.flash-down { background: rgba(229,99,107,.22); }
@media (prefers-reduced-motion: reduce){ .price-cell{ transition:none } .price-cell.flash-up,.price-cell.flash-down{ background:transparent } }

.tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--color-purple-light); flex-wrap: wrap; }
/* Narrow phones cannot fit four tabs, and wrapping drops the last one onto its
   own line under a full-width border — that reads as a broken control rather
   than a wrap. Scroll the strip instead (the standard mobile tab pattern); a
   part-visible tab at the edge is the affordance. */
@media (max-width: 560px) {
  .tabs-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex: none; }
}
.tab-btn { background: none; border: 0; color: var(--text-secondary); padding: 12px 18px; cursor: pointer;
  font: 600 .95rem var(--font-display); border-bottom: 2px solid transparent; }
.tab-btn[aria-selected="true"] { color: var(--color-gold-light); border-bottom-color: var(--color-gold); }
.tab-panel[hidden] { display: none; }
.accordion-item { border-bottom: 1px solid var(--color-purple-light); }
.accordion-trigger { width: 100%; text-align: left; background: none; border: 0; color: var(--text-primary);
  font: 600 1.05rem var(--font-display); padding: 18px 0; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; }
.accordion-trigger .chevron { color: var(--color-gold); transition: transform 200ms ease; }
.accordion-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.accordion-panel[hidden] { display: none; }
/* Answer sits in a darker, recessed purple box so it reads as distinct from the
   surface behind it (not just floating on the section background). */
.accordion-panel { margin: 2px 0 18px; padding: 16px 20px; color: var(--text-secondary);
  background: var(--surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.accordion-panel > :last-child { margin-bottom: 0; }

.wizard { background: var(--surface-2); border: 1px solid rgba(217,174,85,.22); border-radius: var(--radius-lg); padding: clamp(20px,4vw,40px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(217,174,85,0.2); }
.stepper { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.stepper li { flex: 1 1 0; min-width: 90px; list-style: none; color: var(--text-muted); font-size: .82rem; }
.stepper li .dot { width: 28px; height: 28px; border-radius: 50%; background: rgba(15,8,26,0.55);
  border: 1px solid var(--color-purple-light); display: grid; place-items: center; margin-bottom: 7px;
  font-size: .78rem; font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
/* Current step: gold with a soft halo; its label steps up to primary ink. */
.stepper li[aria-current="step"] .dot { background: var(--color-gold); color: var(--text-on-gold); border-color: var(--color-gold);
  box-shadow: 0 0 0 4px rgba(217,174,85,0.16); }
.stepper li[aria-current="step"] { color: var(--text-primary); }
.stepper li.done .dot { background: var(--color-success); color: var(--text-on-gold); border-color: var(--color-success); }
.wizard-step[hidden] { display: none; }
.form-field { margin-bottom: 20px; }
/* Editorial micro-labels — same voice as the section eyebrows, so forms read as part
   of the same system rather than default browser chrome. */
.form-field label { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 8px; color: var(--text-secondary); }
/* Recessed ink wells: fields sit BELOW the card surface — a deep translucent well
   with an inset shade — instead of floating flat on it. The well colour is
   translucent so it settles correctly on every card tier (contact card, wizard,
   login card) without per-context overrides. */
.form-field input, .form-field select, .form-field textarea { width: 100%;
  background: rgba(15,8,26,0.55);
  border: 1px solid rgba(217,174,85,0.15); border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 13px 16px; font: 400 1rem var(--font-body); caret-color: var(--color-gold-light);
  box-shadow: inset 0 1.5px 4px rgba(0,0,0,0.32);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: rgba(217,174,85,0.38); }
/* Gold ring on focus; the transparent outline keeps a visible ring in forced-colors mode.
   transition: none — focus indicators must appear instantly for keyboard users. */
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  outline: 2px solid transparent; outline-offset: 2px; border-color: var(--color-gold);
  background-color: rgba(24,12,40,0.72);
  box-shadow: inset 0 1.5px 4px rgba(0,0,0,0.32), 0 0 0 3px rgba(217,174,85,0.16); transition: none; }
.form-field textarea { resize: vertical; min-height: 120px; }
/* Dark-theme autofill: without this Chrome floods the well with pale yellow. The
   inset box-shadow paints over Chrome's forced background; the ~3h transition
   duration stretches the colour swap so it reads as frozen (standard trick). */
.form-field input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #180C28;
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--color-gold-light);
  transition: background-color 9999s ease-out; }
/* Native select chrome → discreet gold chevron (CSP allows data: images). */
.form-field select { appearance: none; -webkit-appearance: none; color-scheme: dark; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23D9AE55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
/* Bespoke checkboxes/radios — jewel-set controls instead of the browser's grey
   defaults. They escape the width:100% text-input rule (fixed 19px), share the
   ink-well recess, and fill gold when checked; the radio keeps a dark inner ring
   so the dot reads as a set stone. Label + control are one continuous hit target. */
.form-field input[type="checkbox"], .form-field input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 19px; height: 19px; flex: 0 0 auto; margin: 1px 0 0; padding: 0;
  background: rgba(15,8,26,0.55); border: 1px solid rgba(217,174,85,0.4); border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease; }
.form-field input[type="radio"] { border-radius: 50%; }
.form-field input[type="checkbox"]:checked {
  background: var(--color-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5l3 3L10 1' fill='none' stroke='%23241333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 9px no-repeat;
  border-color: var(--color-gold); box-shadow: none; }
.form-field input[type="radio"]:checked {
  background: var(--color-gold); border-color: var(--color-gold);
  box-shadow: inset 0 0 0 3.5px #180C28; }
.form-field input[type="checkbox"]:focus-visible, .form-field input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-gold-light); outline-offset: 2px; }
.form-field label:has(> input[type="checkbox"]), .form-field label:has(> input[type="radio"]) {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 500; font-size: .95rem; letter-spacing: normal; text-transform: none;
  color: var(--text-primary); cursor: pointer; margin-bottom: 0; }
.field-hint { font-size: .8rem; color: var(--text-muted); margin-top: 6px; }
.field-error { font-size: .82rem; color: var(--color-error); margin-top: 5px; display: none; }
.form-field.invalid .field-error { display: block; }
.form-field.invalid input, .form-field.invalid select { border-color: var(--color-error); }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.wizard.is-demo .live-only { display: none; }  /* demo mode hides live-only KYC steps */

.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width:760px){ .calc-grid{ grid-template-columns:1fr } }
.calc-result { background: var(--surface-1); border: 1px solid var(--color-gold); border-radius: var(--radius-md);
  padding: 20px; font: 700 1.6rem var(--font-display); color: var(--color-gold-light); }
.leaderboard { width: 100%; border-collapse: collapse; }
.leaderboard td, .leaderboard th { padding: 12px 14px; border-top: 1px solid var(--color-purple-light); }
.spark { height: 28px; width: 90px; }
/* PERF: no backdrop blur here — a fixed bottom bar re-blurs on every scroll frame,
   and phones (the only place this bar exists) are exactly where that costs most.
   A near-opaque tint reads the same at this size. */
.mobile-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: none;
  gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(26,13,40,0.97); border-top: 1px solid rgba(217,174,85,.22); }
@media (max-width:760px){
  .mobile-cta-bar{ display: flex } .mobile-cta-bar .btn{ flex:1 }
  /* The pinned risk warning stacks directly above the CTA bar instead of behind it.
     76px is the CTA bar's measured height (10px padding + 56px button + border), not 72px —
     the old 72px estimate here left the two bars overlapping by 3px.
     The safe-area inset belongs to the CTA bar down here, so drop it from the warning. */
  .risk-band { bottom: calc(76px + env(safe-area-inset-bottom)); padding-bottom: 0; }
  /* Tighter gutters than .container's 24px: on a 320px screen those gutters cost 15% of the
     line and pushed the warning to an extra wrapped line. Narrower here = shorter band. */
  .risk-band .container { padding: 7px 14px; }
  /* Reserve space so neither fixed bar can sit over the last of the page
     (footer legal was unreachable behind it). 120px covers the warning's tallest wrap
     (measured 110px at 320px); over-reserving only adds trailing whitespace at the page
     end, whereas under-reserving hides the copyright line behind the band. */
  body { padding-bottom: calc(76px + 120px + env(safe-area-inset-bottom)); }
}
.login-card { max-width: 440px; margin: 0 auto; background: var(--surface-2);
  border: 1px solid rgba(217,174,85,.22); border-radius: var(--radius-lg); padding: clamp(24px,5vw,44px);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(217,174,85,0.2); }
/* Auth split: pair the form with a brand/benefits aside so the card never floats in
   a wide empty band. Aside fills the free space on the left; card sits on the right. */
.auth-split { display: grid; grid-template-columns: 1fr minmax(360px, 440px); gap: clamp(32px, 5vw, 76px); align-items: center; }
.auth-aside { max-width: 460px; }
.auth-aside h2 { margin: 12px 0 22px; font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1.14; }
.auth-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.auth-points li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-secondary); font-size: 0.98rem; }
.auth-points svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--color-gold-light); margin-top: 1px; }
.auth-foot { margin-top: 26px; text-align: center; }
@media (max-width: 880px) {
  .auth-split { grid-template-columns: 1fr; gap: 30px; }
  .auth-aside { max-width: none; }
  .auth-foot { margin-top: 20px; }
}
/* minmax(0,1fr) is load-bearing: with no explicit template the single implicit
   column is `auto`, which sizes to the widest child's MAX-content — here the
   6-column positions table (~507px). That stretched every sibling past the
   viewport, and with body{overflow-x:clip} the excess was unreachable rather
   than scrollable. Constraining the track lets .table-scroll scroll internally. */
.portal-preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

/* Market-hours session badges — JS renders <div class="session is-open|is-closed">
   into any [data-market-hours] container (used on market-hours.html). */
[data-market-hours] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
/* Four tracks need 636px of container (4x150 + 3x12), i.e. ~684px of viewport.
   Below that auto-fit drops to THREE and strands the fourth session on its own
   row; below ~522px it reaches two, which already suits four sessions. So pin an
   even 2x2 only under 684px — going earlier would break up a perfectly good
   single row of four. */
@media (max-width: 683px) {
  [data-market-hours] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.session { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2);
  border: 1px solid var(--color-purple-light); }
.session > span:first-child { color: var(--text-primary); font-weight: 600; }
.session > span:last-child { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem;
  font-weight: 500; letter-spacing: .02em; color: var(--text-muted); }
.session > span:last-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted); flex: none; }
.session.is-open { border-color: rgba(79,178,134,.4); }
.session.is-open > span:last-child { color: var(--color-success); }
.session.is-open > span:last-child::before { background: var(--color-success); box-shadow: 0 0 0 3px rgba(79,178,134,.18); }

/* Testimonial — layers on .card. Markup: figure.card.testimonial > .card-body > blockquote + figcaption */
.testimonial { margin: 0; }
.testimonial .card-body { padding: 30px 28px; }
.testimonial blockquote { margin: 0 0 18px; color: var(--text-primary); font-family: var(--font-display);
  font-size: 1.06rem; line-height: 1.55; }
.testimonial blockquote::before { content: "\201C"; display: block; font-family: var(--font-display);
  font-size: 2.6rem; line-height: .5; color: var(--color-gold); opacity: .55; margin-bottom: 8px; }
.testimonial figcaption { color: var(--text-muted); font-size: .88rem; font-style: normal; letter-spacing: .01em; }

/* Must out-specify `.main-nav > ul > li { position: relative }` (0,1,2) or the mega
   panel anchors to the narrow <li> and its columns spill across the page. Static here
   makes the absolute .mega-menu anchor to the fixed .site-header → true full-width panel. */
.main-nav > ul > li.has-mega { position: static; }
/* Full-width panel anchored under the header capsule; columns are sized to their
   content and centred, so 2- and 3-column menus stay balanced (no empty tracks). */
.mega-menu { position: absolute; left: 0; right: 0; top: 100%; margin-top: 8px; z-index: 5;
  background: rgba(42,23,64,0.96); border: 1px solid rgba(217,174,85,.24); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); padding: 28px 30px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 240px); justify-content: center; gap: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 180ms ease, transform 180ms ease; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mega-menu { -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); }
}
/* Columns carry their own gutters so a hairline rule can sit centred between them. */
.mega-col { padding: 2px 34px; }
.mega-col + .mega-col { border-left: 1px solid rgba(244,239,230,0.07); }
/* Invisible hover bridge spanning the margin gap so the pointer never lands in dead
   space between the trigger and the panel (belt-and-braces with the JS close-delay).
   Inherits the panel's visibility, so it captures nothing while the menu is closed. */
.mega-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.has-mega:hover .mega-menu, .has-mega:focus-within .mega-menu, .mega-menu.open {
  opacity: 1; visibility: visible; transform: none; }
.mega-col h4 { color: var(--color-gold-light); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin: 4px 0 10px; }
.mega-col a { display: block; color: var(--text-secondary); padding: 7px 0; transition: color 0.18s ease, padding-left 0.18s ease; }
.mega-col a:hover, .mega-col a:focus-visible { color: var(--color-gold-light); padding-left: 4px; }
/* Breakpoint aligned to the nav's off-canvas breakpoint (1240px) so the mega-menu
   is always in its static/accordion form whenever the hamburger nav is active —
   otherwise 1024-1240px would show an untappable absolute panel inside the drawer. */
@media (max-width:1240px){
  .mega-menu{ position: static; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr;
    justify-content: start; box-shadow: none; background: transparent;
    border: 0; padding: 0 0 0 12px; display: none; opacity: 1; visibility: visible; transform: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mega-col { padding: 0; }
  .mega-col + .mega-col { border-left: 0; }
  .has-dropdown.open > .mega-menu { display: block; }  /* mobile: reveal on accordion open (same pattern as .dropdown) */
}

/* ---------- Reduced motion ----------
   Honour users who ask for less motion: kill smooth-scroll and collapse
   transitions/animations. This is both an accessibility win and a perf win
   (no animation frames scheduled at all for these users). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Never leave reveal/entrance content invisible when motion is off. */
  .reveal, .hero-anim > *, .hero-visual-anim {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-chart .chart-line { stroke-dashoffset: 0 !important; }
  .hero-chart .chart-fill, .hero-chart .chart-dot { opacity: 1 !important; }
  .hero-chart .chart-pulse { display: none !important; }
}

/* ==========================================================================
   Cross-document view transitions — softens same-origin page navigation from a
   hard white cut into a short cross-fade. Pure progressive enhancement: this is
   a CSS at-rule, so browsers without support skip it and navigate normally, and
   it adds no JS and no CSP surface.
   ========================================================================== */
@view-transition { navigation: auto; }

/* The chrome is byte-identical on every page, so naming these lets the browser
   carry each one across the navigation as the same element rather than fading it
   out and back in — the risk band and floating nav stay planted while only the
   page body swaps beneath them. Each name must be unique per document; both of
   these appear exactly once. */
.risk-band   { view-transition-name: risk-band; }
.site-header { view-transition-name: site-header; }

/* Deliberately shorter than the scroll reveals (0.75s): a navigation should feel
   instant, and anything slower reads as latency rather than polish. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: var(--ease-out);
}

/* The global reduced-motion block above cannot reach these: the universal
   selector does not match view-transition pseudo-elements, so the navigation
   itself has to be switched off explicitly. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==========================================================================
   Home redesign (2026-07) — live-spread hero panel, USP spread cards,
   MetaTrader 5 terminal mock. Renders the "lowest spreads" USP as proof,
   not adjectives. Tokens only; no new colours. Reduced-motion is handled by
   the global media query above and by the price-board gate in main.js.
   ========================================================================== */

/* Generic gold text-link (was previously styled only inside .card). */
.link {
  color: var(--color-gold);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;      /* ≥44px tap target (a11y §13) */
  padding: 6px 0;
  transition: color 0.2s ease, gap 0.2s var(--ease-out);
}
.link:hover { color: var(--color-gold-light); gap: 10px; }
.link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: 3px; }

/* Hero live-spread board — reuses the .hero-visual "smoked amethyst" glass slab. */
.hero-board__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.hero-board__figure {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: 0.01em; color: var(--text-secondary); white-space: nowrap;
}
.hero-board__figure b {
  font-weight: 800; font-size: 1.85rem; letter-spacing: -0.02em;
  color: var(--color-gold-light); font-variant-numeric: tabular-nums;
}
.hero-visual .table-scroll { margin: 0; }
.hero-visual .price-board th { padding: 6px 10px; font-size: 0.7rem; }
.hero-visual .price-board td { padding: 8px 10px; font-size: 0.85rem; }
.hero-visual .price-board td:first-child { font-weight: 700; }
/* Spotlight the Spread column — it is the USP. */
.hero-visual .price-board th:nth-child(4),
.hero-visual .price-board td:nth-child(4) { color: var(--color-gold-light); font-weight: 700; }
.hero-board__note {
  font-size: 0.66rem; color: var(--text-muted); letter-spacing: 0.02em; margin: 0 2px;
}

/* USP proof — three big "spread from" figures. */
.spread-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.spread-card {
  background: var(--surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 24px 16px; text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.spread-card:hover { transform: translateY(-3px); border-color: rgba(217,174,85,0.4); }
.spread-card .sc-sym {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary);
}
.spread-card .sc-fig {
  font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.3rem); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--color-gold); margin: 8px 0 2px;
}
.spread-card .sc-unit { font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; }
@media (max-width: 560px) { .spread-grid { grid-template-columns: 1fr; } }

/* Padded media panel variant — houses the MT5 terminal mock. */
.split-media.pad { padding: 24px; }
.mt5-mock { width: 100%; height: auto; display: block; }

/* Split refinements (review): top-align proof with its heading (kills the
   "floating centred emblem" dead-space), alternate the media side on desktop
   for rhythm, and frame + enlarge the line-art emblem panels so they read built. */
.split.top { align-items: start; }
.split-media.framed { border: 1px solid var(--color-border); }
.split-media svg { max-width: 100%; }
.split-media .emblem { width: min(320px, 80%); height: auto; }
@media (min-width: 761px) { .split.reverse .split-media { order: -1; } }

/* Hero disclaimer sits over the purple hero gradient — muted fails AA there. */
.hero .illustrative-note { color: var(--text-secondary); }

/* Smallest screens: drop the hero board's Ask column so the gold Spread column
   stays legible without a cramped 5-column scroll. */
@media (max-width: 560px) {
  .hero-visual .price-board th:nth-child(3),
  .hero-visual .price-board td:nth-child(3) { display: none; }
}

/* MT5 "also available" badge row under the platform CTA. */
.also-on { margin-top: 24px; }
.also-on .also-label {
  display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.also-on .platform-badges { margin-top: 0; }

/* Print: the pinned bars are viewport chrome, not document content. Left fixed, the risk
   warning would overlay the printed flow and the CTA bar would print as dead furniture.
   Returning the warning to normal flow prints it once, at the top of the document, where
   it sits in the DOM — a printed page still has to carry the warning. Placed last so it
   overrides the <=760px offsets and body reserve without fighting specificity. */
@media print {
  .risk-band { position: static; bottom: auto; padding-bottom: 0; }
  .mobile-cta-bar { display: none; }
  body { padding-bottom: 0; }
}