:root {
  --bg: #0a0a0a;
  --bg-2: #111111;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --surface-light: rgba(148, 163, 184, .05);
  --line: rgba(148, 163, 184, .14);
  --line-2: rgba(148, 163, 184, .3);
  --text: #e8edf7;
  --muted: #9aa6bf;
  --head: #fff;
  --brand-a: #ff0a8e;
  --brand-b: #ffa030;
  --blue: #4a4a4a;
  --cyan: #22d3ee;
  --green: #2dd4a0;
  --grad: linear-gradient(135deg, var(--brand-a), var(--brand-b));
  --chip: #1a1a1a;
  --shadow: 0 8px 24px -14px rgba(0, 0, 0, .4);
  --shadow-lg: 0 14px 34px -18px rgba(0, 0, 0, .5);
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 20px;
  --r-pill: 999px;
  --wrap: 1160px;
  /* ===== LAYOUT SYSTEM (one source of truth for widths + spacing) =====
     --wrap        page container width (every section uses .wrap)
     --wrap-narrow reading width for tables / prose (.fx-narrow)
     --sec-head-w  max width of every centered section title block (.sec-head)
     --sec-head-gap space between a section title block and its content
     --hero-copy-w max width of centered hero copy (.hero-copy-center)
     --panel-pad-* inner padding of every CTA / highlight panel           */
  --wrap-narrow: 860px;
  --sec-head-w: 760px;
  --sec-head-gap: clamp(32px, 4vw, 48px);
  --hero-copy-w: 860px;
  --panel-pad-y: clamp(28px, 4vw, 48px);
  --panel-pad-x: clamp(20px, 4.5vw, 56px);
  --header-h: 68px;
  --hero-pad-t: clamp(36px, 7vw, 96px);
  /* gap between header and hero eyebrow, same on every page */

  --brand-a-16: rgba(255, 10, 142, .16);

  --brand-a-55: rgba(255, 10, 142, .55);
  --blue-14: rgba(74, 74, 74, .14);
  --blue-65: rgba(74, 74, 74, .65);
  --blue-90: rgba(74, 74, 74, .9);
  --text-80: rgba(232, 237, 247, .8);
  --line-18: rgba(148, 163, 184, .18);
  --surface-72: rgba(20, 20, 20, .72);
  --white-04: rgba(255, 255, 255, .04);
  --white-12: rgba(255, 255, 255, .12);
  --surface-dark-96: rgba(10, 10, 10, .96);
  --surface-dark-90: rgba(15, 15, 15, .9);
  --green-12: rgba(45, 212, 160, .12);
  --green-32: rgba(45, 212, 160, .32);
  --blue-12: rgba(74, 74, 74, .12);
  --blue-32: rgba(74, 74, 74, .32);
  --brand-a-12: rgba(255, 10, 142, .12);
  --brand-a-32: rgba(255, 10, 142, .32);
  --brand-a-20: rgba(255, 10, 142, .2);

  --brand-b-12: rgba(255, 160, 48, .12);
  --brand-b-16: rgba(255, 160, 48, .16);
  --brand-b-20: rgba(255, 160, 48, .20);
  --brand-b-32: rgba(255, 160, 48, .32);
  --brand-b-55: rgba(255, 160, 48, .55);
  /* Icon fill on top of the --grad chip background (pf/stat/why/strategy icons,
     primary buttons): intentionally always white on the saturated gradient,
     in both themes, so it is a named token rather than a bare #fff per rule. */
  --on-brand: #fff;

  /* Video-carousel (.cf-item) thumbnail overlay: text/scrim sit on a YouTube
     photo, not the page surface, so these stay constant across themes. */
  --overlay-scrim: rgba(3, 6, 14, .88);
  --overlay-text: #fff;
  --overlay-text-dim: rgba(255, 255, 255, .72);
  --overlay-line: rgba(255, 255, 255, .25);
  --overlay-fill: rgba(255, 255, 255, .1);
  --overlay-fill-hover: rgba(255, 255, 255, .22);
  --cyan-12: rgba(34, 211, 238, .12);
  --cyan-32: rgba(34, 211, 238, .32);
  --tile-side: #b9c2e3;

  /* 3D bevel system: every button / icon chip / social chip is built from these. */
  --bevel-hi: rgba(255, 255, 255, .3);
  --bevel-hi-hover: rgba(255, 255, 255, .4);
  --bevel-lo: rgba(0, 0, 0, .2);
  --bevel-lo-deep: rgba(0, 0, 0, .35);
  --bevel-drop: rgba(0, 0, 0, .55);
  --bevel-edge: rgba(255, 255, 255, .2);
  --gloss-top: rgba(255, 255, 255, .15);
  --bevel: inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo);
  --bevel-hover: inset 0 1px 0 var(--bevel-hi-hover), inset 0 -1px 0 var(--bevel-lo);
  --bevel-pressed: inset 0 2px 4px var(--bevel-lo-deep), inset 0 1px 0 var(--bevel-edge);
  --bevel-chip: inset 0 1px 0 var(--bevel-hi), inset 0 -3px 0 var(--bevel-lo-deep), 0 6px 12px -4px var(--bevel-drop);
  --gloss: linear-gradient(180deg, var(--gloss-top) 0%, transparent 100%);

  /* Dark gradient-end stops for each .cf-item tone, paired with the matching
     brand color above it. */
  --tone-copy-dark: #3a0a2e;
  --tone-blue-dark: #0a0a0a;
  --tone-cyan-dark: #062a30;
  --tone-green-dark: #062e26;
  --tone-amber-dark: #2e1a06;
  --tile-face: #1a1d29;
  --tile-edge: #0b0d14;
  --tile-border: #2b3042;
  --tile-icon: 1;
}

[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-2: #eef1f8;
  --surface: #fff;
  --surface-2: #f3f5fb;
  --surface-light: rgba(15, 23, 42, .05);
  --line: rgba(15, 23, 42, .1);
  --line-2: rgba(15, 23, 42, .22);
  --text: #1b2438;
  --muted: #56627a;
  --head: #0a1020;
  --blue: #4a4a4a;
  --cyan: #0891b2;
  --green: #059669;
  --shadow: 0 8px 24px -16px rgba(15, 23, 42, .18);
  --shadow-lg: 0 14px 34px -20px rgba(15, 23, 42, .22);
  --brand-a-16: rgba(255, 10, 142, .16);
  --brand-a-55: rgba(255, 10, 142, .55);
  --blue-14: rgba(74, 74, 74, .14);
  --blue-65: rgba(74, 74, 74, .65);
  --blue-90: rgba(74, 74, 74, .9);
  --text-80: rgba(27, 36, 56, .8);
  --line-18: rgba(15, 23, 42, .18);
  --surface-72: rgba(15, 23, 42, .72);
  --white-04: rgba(0, 0, 0, .04);
  --white-12: rgba(0, 0, 0, .12);
  --surface-dark-96: rgba(235, 237, 242, .96);
  --surface-dark-90: rgba(230, 233, 240, .9);
  --green-12: rgba(5, 150, 105, .1);
  --green-32: rgba(5, 150, 105, .28);
  --blue-12: rgba(74, 74, 74, .1);
  --blue-32: rgba(74, 74, 74, .28);
  --brand-a-12: rgba(255, 10, 142, .1);
  --brand-a-32: rgba(255, 10, 142, .28);
  --cyan-12: rgba(8, 145, 178, .1);
  --cyan-32: rgba(8, 145, 178, .28);
  --bevel-hi: rgba(255, 255, 255, .55);
  --bevel-hi-hover: rgba(255, 255, 255, .7);
  --bevel-lo: rgba(15, 23, 42, .18);
  --bevel-lo-deep: rgba(15, 23, 42, .22);
  --bevel-drop: rgba(15, 23, 42, .25);
  --gloss-top: rgba(255, 255, 255, .35);
  --tile-face: #e6eaf7;
  --tile-edge: #b9c2e3;
  --tile-border: #fff;
  --tile-icon: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased
}

body.nav-open {
  overflow: hidden
}

img {
  max-width: 100%;
  height: auto
}

a {
  color: inherit;
  text-decoration: none
}

h1,
h2,
h3,
h4 {
  color: var(--head);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.02em
}

h1 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 800
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 750
}

h3 {
  font-size: 1.15rem;
  font-weight: 650
}

p {
  margin: 0 0 1em
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none
}

.wrap {
  width: min(var(--wrap), calc(100% - 32px));
  margin-inline: auto
}

.section {
  padding: clamp(48px, 8vw, 104px) 0
}

.section.alt {
  background: var(--bg-2);
  /* border-block: 1px solid var(--line) */
}

.eyebrow {
  display: inline-block;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-b);
  margin-bottom: 14px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word
}

.lead {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--muted);
  max-width: 62ch
}

.muted {
  color: var(--muted)
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.fine {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 .6em
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--surface);
  padding: 10px 14px;
  border-radius: 8px;
  z-index: 100
}

.skip:focus {
  left: 8px
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px
}

.icon {
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -.12em
}

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .8em 1.35em;
  border-radius: var(--r-sm);
  font-weight: 650;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .3s ease, filter .2s ease, background .3s ease, border-color .3s ease, color .3s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 2px solid var(--brand-a);
  outline-offset: 2px;
}

.btn-primary,
.btn-ghost {
  box-shadow: var(--bevel);
}

.btn-primary::before,
.btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: var(--gloss);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  pointer-events: none;
}

.btn-primary {
  background: var(--grad);
  color: var(--on-brand);
  border: 1px solid var(--bevel-edge);
}

.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: var(--bevel-hover);
  transform: translateY(-2px);
}

.btn-primary:active,
.btn-ghost:active {
  filter: brightness(.94);
  box-shadow: var(--bevel-pressed);
  transform: translateY(0);
}

.btn-ghost {
  border-color: var(--line-2);
  background: var(--surface-2);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--brand-a);
  color: var(--brand-a);
  box-shadow: var(--bevel-hover);
  transform: translateY(-2px);
}

.btn-sm {
  padding: .55em 1em;
  font-size: .875rem
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px
}

/* ---------- Shared page-header components (faq/refund-policy/terms-conditions/copytrading) ---------- */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 clamp(14px, 3vw, 26px);
  font-size: .875rem;
  color: var(--muted);
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.breadcrumbs a:hover {
  color: var(--text);
}

.breadcrumbs .icon {
  font-size: .875rem;
}

.breadcrumbs [aria-current] {
  color: var(--text);
}

/* Radial-gradient hero background + faint grid overlay, shared by every page
   hero. --hero-pad-b/--hero-mask-op/--hero-mask-pos let a page (faq.css) dial
   in a shorter, softer variant without repeating the whole rule. */
.hero-banner {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + var(--hero-pad-t)) 0 var(--hero-pad-b, clamp(36px, 6vw, 80px));
  background:
    radial-gradient(900px 480px at 82% -10%, var(--brand-a-16), transparent 60%),
    radial-gradient(700px 420px at 0% 10%, var(--white-04), transparent 60%);
}

/* .hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--hero-mask-op, .55);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at var(--hero-mask-pos, 60% 30%), #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at var(--hero-mask-pos, 60% 30%), #000 10%, transparent 70%);
} */


/* Centered hero-copy wrapper; --hero-copy-w overrides the max-width per page. */
.hero-copy-center {
  text-align: center;
  max-width: var(--hero-copy-w);
  margin-inline: auto;
}

/* Eyebrow with flanking bars, used inside a centered hero. Kept as an explicit
   class (not scoped off .hero-banner) because copytrading's hero eyebrow uses
   the plain base .eyebrow look and must not pick this up. */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brand-b);
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

/* Standard centered hero copy (privacy-policy, refund-policy, risk-disclosure,
   terms-conditions, pricing, contact): title/lead/eyebrow spacing shared by
   every hero that doesn't need its own variant. Heroes with a different shape
   (faq, brokers, copytrading) don't carry this class and set their own. */
.hero-standard h1 {
  margin-bottom: .45em;
}

.hero-standard .lead {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
  display: inline-flex;
  align-items: center;
}

.hero-standard .hero-eyebrow {
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .hero-standard {
    padding-bottom: 32px;
  }
}

/* Legal-page content card (refund-policy, terms-conditions): shared padding/
   border/background and heading-and-list rules; page CSS keeps only its deltas. */
.legal-section {
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: clamp(24px, 4vw, 40px);
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h2 {
  margin: 0 0 20px;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--head);
  line-height: 1.3;
}

.legal-section h3 {
  margin: 24px 0 12px;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--head);
  line-height: 1.4;
}

.legal-section p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;

}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  margin: 0 0 16px;
  padding-left: 24px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
}

.legal-section li {
  margin-bottom: 8px;
}

.legal-section li:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .legal-section {
    padding: 32px 40px;
  }

  .legal-section h2 {
    font-size: 1.6rem;
  }

  .legal-section h3 {
    font-size: 1.25rem;
  }

  .legal-section p,
  .legal-section ul {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  .legal-section {
    padding: 20px;
    margin-bottom: 20px;
  }

  .legal-section h2 {
    font-size: 1.3rem;
  }

  .legal-section h3 {
    font-size: 1.1rem;
  }
}

/* "Last update" highlight box shared by refund-policy and terms-conditions.
   --brand-a-8 is not defined in :root today, so this gradient background is a
   no-op in both places; kept as-is to avoid changing rendered output. */
.legal-highlight {
  border-color: var(--brand-a-32);
  background: linear-gradient(135deg, var(--brand-a-8), var(--surface));
}

.legal-highlight h2 {
  color: var(--brand-b);
}

.legal-highlight p {
  font-weight: 600;
  color: var(--text);
}

/* Padding rhythm around the .legal-section card(s) (privacy-policy,
   refund-policy, risk-disclosure, terms-conditions). */
.legal-content {
  padding: clamp(32px, 5vw, 64px) 0;
}

@media (max-width: 767px) {
  .legal-content {
    padding: 24px 0;
  }
}

/* Scroll offset for heading anchors on legal pages so they clear the sticky
   header (privacy-policy, refund-policy, risk-disclosure). terms-conditions
   uses .tc-section's own offset instead, since its anchors sit on a sidebar
   table of contents that needs a different value. */
.legal-page [id] {
  scroll-margin-top: calc(var(--header-h, 72px) + 12px);
}

/* .legal-section variant for a single card holding several h2 topics
   (refund-policy, risk-disclosure): adds the card shadow and keeps text
   left-aligned inside an otherwise centered page container, with heading
   rhythm between topics and styled inline links. */
.legal-card {
  box-shadow: var(--shadow);
  text-align: left;
}

.legal-card h2,
.legal-card h3,
.legal-card p,
.legal-card ul {
  text-align: left;
}

.legal-card h2 {
  margin-top: 28px;
}

.legal-card h2:first-child {
  margin-top: 0;
}

.legal-card a {
  color: var(--brand-b);
  font-weight: 600;
  text-decoration: none;
}

.legal-card a:hover {
  text-decoration: underline;
}

@media (max-width: 479px) {
  h1 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto
  }

  .lead {
    word-wrap: break-word;
    overflow-wrap: break-word
  }

  .btn-row {
    flex-direction: column
  }

  .btn-row .btn {
    width: 100%
  }
}

@media (min-width: 720px) {
  .wrap {
    width: min(var(--wrap), calc(100% - 40px))
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important
  }
}