/* ======================================
   Poppins, served from this site
   ====================================== */

/* Self-hosted rather than loaded from fonts.googleapis.com. Fetching a font
   from Google hands the visitor's IP address to a third party before the page
   has painted, which several EU regulators treat as a transfer requiring
   consent, and this site is offered internationally. Serving the files here
   also drops two DNS lookups and a render-blocking stylesheet from the
   critical path.

   Files and unicode-ranges are Google's own woff2 subsets (Poppins v24), so
   the rendering is byte-identical to what the CDN was serving. Only the
   ranges a page actually uses are downloaded. Devanagari is kept because the
   footer language switcher offers Hindi. */

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/poppins-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/poppins-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/poppins-300-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/poppins-400-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/poppins-500-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/poppins-600-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/poppins-700-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/poppins-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/poppins-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../assets/fonts/poppins-800-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../assets/fonts/poppins-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../assets/fonts/poppins-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../assets/fonts/poppins-900-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* ======================================
   PNL Prop Trading - Stylesheet
   Primary: White | Secondary: Green accents
   Font: Poppins
   ====================================== */

/* ---------- CSS Variables ----------
   Default palette:
     - White is the primary surface
     - --green-* now holds the navy #1A1A1A secondary palette
     - --emerald-* are reserved tertiary accents used for small hints
*/
/* Ambient sound toggle. A circle in the navbar between the language flag and
   the theme toggle, built to the same 34px round as the theme control so the
   three read as one row. It replaces a small fixed label in the bottom-left
   corner, which sat over the page content and said its state in words.

   The icon shows the state, not the action: a speaker with waves while the
   track is playing, a crossed speaker while it is not. State also rides on
   aria-pressed, which is what a screen reader announces, so the label itself
   stays constant and needs no second translation. */
.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(25, 64, 122, 0.22);
  border-radius: 50%;
  background: transparent;
  color: #19407a;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  /* .nav-pages is absolutely centred at z-index 2 and spans the middle of the
     bar; in a language with long words it reaches this far and would swallow
     the clicks. */
  position: relative;
  z-index: 3;
}
.sound-toggle:hover { border-color: rgba(25, 64, 122, 0.5); background: rgba(25, 64, 122, 0.06); }
/* It sits between the flag and the burger in the markup, which is where it
   stays on a phone. Above the burger's breakpoint js/nav-lang.js carries it
   into .nav-actions, ahead of the theme toggle, so the two rounds sit
   together at the head of the actions group and take that group's spacing. */
/* Its desktop margin is set with the rest of the bar's ordering, further down. */
@media (max-width: 999px) {
  .sound-toggle { margin-right: 0; width: 40px; height: 40px; }
}
.sound-toggle:focus-visible { outline: 2px solid #19407a; outline-offset: 2px; }
.sound-icon { width: 17px; height: 17px; display: block; }
.sound-icon--on { display: none; }
.sound-toggle[aria-pressed="true"] .sound-icon--on { display: block; }
.sound-toggle[aria-pressed="true"] .sound-icon--off { display: none; }
[data-theme="dark"] .sound-toggle { border-color: rgba(214, 228, 250, 0.28); color: #d6e4fa; }
[data-theme="dark"] .sound-toggle:hover { border-color: rgba(214, 228, 250, 0.55); background: rgba(214, 228, 250, 0.08); }

/* Present to a screen reader, absent on screen. Used for form labels whose
   visual role is carried by the placeholder. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:root {
  --green-primary: var(--c-bg-1a1a1a);
  --green-dark:    var(--c-bg-1a1a1a);
  --white: var(--c-bg-ffffff);
  --gray-100: var(--c-bg-e5e8e6);
  --gray-200: var(--c-bg-c8cfc9);
  --gray-300: var(--c-bg-9ba39c);
  --gray-400: var(--c-bg-6b756c);
  --gray-500: var(--c-bg-3a3f3b);
  --gray-600: var(--c-bg-2a2e2b);
  --gray-700: var(--c-bg-1a1d1b);
  --black: var(--c-bg-0c0f0d);
  --card-bg: var(--c-bg-ffffff);
  --font-heading: 'Poppins', sans-serif;
  --font-eyebrow: 'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 3px var(--c-bg-re000006);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  /* Guard against any stray element (decorative pill, off-screen absolute,
     wide section) ever exceeding the viewport width. Applying this to <body>
     alone is not enough on mobile — elements positioned against the initial
     containing block escape body's clip and still create page-level
     horizontal scroll, which mobile browsers lock into a left-shift of all
     centered content. `clip` (with `hidden` fallback) avoids creating a
     scroll container, so the sticky navbar keeps working. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--gray-700);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  /* Companion to max-width. Every <img> carries width and height attributes so
     the browser can reserve the right box before the file arrives; without
     height:auto those attributes are honoured literally and an image sized by
     CSS width alone comes out stretched. With it they only supply the aspect
     ratio, which is the point. */
  height: auto;
  display: block;
}

/* ---------- Container ---------- */
/* 1264 - 48px padding = 1216px of content, the width the homepage Magic
   Bento sits at. Every page shares it so blocks line up site-wide. */
.container {
  max-width: 1264px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Homepage uses a wider container so its sections/widgets aren't squashed. */
/* Heading accent words: solid brand navy (#1d2e5f, sampled from the logo) to
   match every title and header. These were a blue sheen gradient; they now sit
   in the same navy as the base heading so titles read as one colour. */
.text-green-sheen {
  background: none;
  -webkit-text-fill-color: var(--c-fg-1d2e5f);
  color: var(--c-fg-1d2e5f);
}
body .text-blue-sheen {
  background: none;
  -webkit-text-fill-color: var(--c-fg-1d2e5f);
  color: var(--c-fg-1d2e5f);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

/* ========== NAVBAR ========== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 24px;
  background: transparent;
  transition: padding 0.28s ease;
}

/* Floating rounded bar (does not span full width) */
.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--c-bg-ffffff);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  padding: 0 14px 0 22px;
  box-shadow: 0 6px 22px var(--c-sh-re164284008);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.28s ease, padding 0.28s ease;
}

.navbar.scrolled {
  padding: 10px 24px;
}
.navbar.scrolled .nav-inner {
  box-shadow: 0 12px 30px var(--c-sh-re164284016);
  /* .nav-inner has no vertical padding — its height is its tallest child.
     Unscrolled that is the 80px logo; once the logo collapses the buttons
     become the tallest child and the pill shrink-wraps them. */
  padding-top: 9px;
  padding-bottom: 9px;
}

/* Homepage: the nav sits flush on the page — no pill,
border,
or shadow —
   until scrolling begins,
at which point the bordered pill fades in and
   stays pinned to the top. */
body.home .navbar:not(.scrolled) .nav-inner {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* ...but an open mobile menu is a panel, not an overlay: it needs a solid
   ground of its own or the page reads straight through the links. Gated to
   the hamburger's own breakpoint, so a resize with the menu left open can
   never carry it onto desktop. */
@media (max-width: 999px) {
  body.home .navbar:not(.scrolled) .nav-inner:has(.nav-pages.active) {
    background: var(--c-bg-ffffff);
    border-color: var(--gray-100);
    box-shadow: 0 12px 30px var(--c-sh-re164284016);
  }
}

/* Sub-pages: same hidden-until-scroll nav and logo-fade as homepage */
body.page-body .navbar:not(.scrolled) .nav-inner {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  z-index: 2;
}
.nav-logo img {
  /* Logo art is trimmed (no built-in whitespace), so this height is the
     actual wordmark height — keeps the bar slim while the logo reads large. */
  height: 80px;
  width: auto;
  display: block;
  transition: opacity 0.22s ease, height 0.3s ease;
}
/* Once the pill navbar appears on scroll, the logo fades and collapses so
   the bar stays thin and sleek. */
.navbar.scrolled .nav-logo img {
  opacity: 0;
  height: 0;
}
.navbar.scrolled .nav-logo { pointer-events: none; }

@keyframes navSloganIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes navCtaSheen { 0% { background-position: -140% 0; } 55%, 100% { background-position: 240% 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-cta-mobile { transition: none; }
  .navbar.scrolled .nav-cta-mobile { animation: none; transition-delay: 0s; }
  .nav-cta-mobile::after { animation: none; opacity: 0; }
}
/* Desktop keeps the button in .nav-actions; this one is phones only. */
.nav-cta-mobile { display: none; position: relative; }
/* Fills the empty top row of the open mobile menu once the logo has
   collapsed on scroll. Hidden everywhere else. */
.nav-slogan { display: none; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.nav-signin {
  padding: 8px 20px;
  line-height: 1.2;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-fg-19407a);
  background: transparent;
  border: 1px solid var(--c-bg-re256412203);
  border-radius: 8px;
  transition: var(--transition);
}
.nav-signin:hover {
  border-color: var(--c-bg-19407a);
  background: var(--c-bg-re2564122006);
}

/* Gold to match the hero CTA (same face, navy label). */
.nav-cta {
  padding: 8px 22px;
  line-height: 1.2;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-fg-000000);
  border-radius: 999px;
  border: 1px solid var(--c-bg-re1409620065);
  text-shadow: 0 1px 0 var(--c-sh-re255255255035);
  background:
    linear-gradient(180deg, var(--c-gl-re255255255062) 0%, var(--c-gl-re2552552550) 46%),
    linear-gradient(180deg, var(--c-bg-f9edbf) 0%, var(--c-bg-eacd6f) 30%, var(--c-bg-dbb24a) 50%, var(--c-bg-e6c25c) 62%, var(--c-bg-b07f28) 100%);
  box-shadow: 0 6px 16px var(--c-sh-re15011020034), inset 0 1px 0 var(--c-sh-re25525525509), inset 0 -2px 6px var(--c-sh-re120801004);
  transition: var(--transition);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px var(--c-sh-re15011020042), inset 0 1px 0 var(--c-sh-re255255255095), inset 0 -2px 6px var(--c-sh-re1208010042);
}

/* Page links in the main navbar — centered absolutely */
.nav-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 26px;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* ...but only as the mobile drawer. Above the burger's breakpoint the bar is
   three parts, logo | links | actions, and the links are a column of their
   own rather than an overlay.

   Absolute centring was written for the English bar, where the row is 543px
   and the corner controls are 359px, and it fits. Translated, the row grows
   to as much as 631px while Sign In and Get Funded grow with it, and the row
   ran straight over the corner: in thirteen of the fifteen languages, by up
   to 98px. Nothing in CSS can tell an absolutely centred box how much room
   the corner has left it.

   Giving the two outer parts an equal share of whatever the links do not use
   keeps the row centred on the bar to the pixel while it fits, which is what
   English and most of the rest do, and slides it off centre by however much
   the corner overruns its share rather than letting the two overlap. */
@media (min-width: 1000px) {
  /* The bar's desktop arrangement, done here rather than by moving elements
     after load.

     The markup is ordered for a phone: logo, links, flag, sound, burger,
     actions. A script used to lift the flag into the links and drop the sound
     toggle into the actions group once the page was up, which meant the bar
     painted in its phone order first and rearranged a moment later, in view.

     Every one of these is already a child of the same flex row, so the
     desktop order is a property of the row and needs no DOM change at all.
     Below this breakpoint no order is set and the markup order stands, which
     is the phone layout.

     The negative margins pull back part of the row's 24px gap: the flag sits
     14px from Home, because the button already carries its own padding either
     side and 24 read as a hole, and the sound toggle sits 10px from the theme
     toggle, the spacing the actions group uses internally. */
  .nav-logo     { order: 1; }
  .nav-lang     { order: 2; margin-right: -10px; }
  .nav-pages    { order: 3; }
  .sound-toggle { order: 4; margin-right: -14px; }
  .nav-actions  { order: 5; }

  .nav-pages { position: static; transform: none; flex: 0 1 auto; }
  /* All of the bar's spare width goes to the logo, so the links are anchored
     to the controls rather than floating somewhere between the two.

     Sharing the spare width instead, in any ratio, makes the gap after the
     last link a function of how long that language's words are: it ran from
     40px in Spanish to 247px in Korean, so the row looked pinned to the
     wordmark in one language and adrift in the next. Anchored, every language
     ends the same 40px before the sound toggle and the variation lands in the
     gap after the wordmark, where there is nothing to line up against.

     24px of that 40 is the bar's own gap, which the row shares with the logo;
     the margin is the part that reads as a deliberate step back rather than
     as the row having run out of room. */
  /* 1 0 auto, not 1 1 0: the wordmark absorbs the spare width but never gives
     any back. On a flex basis of zero its minimum is its own min-content, and
     .nav-logo is itself a flex box, whose min-content a shrinkable image does
     not defend, so at 1000px it was squeezing the 163px wordmark down to 33.
     Anything the row then cannot fit is handled by the band below rather than
     by crushing the logo. */
  .nav-logo { flex: 1 0 auto; }
  .nav-actions { flex: 0 0 auto; justify-content: flex-end; }
  .nav-pages { margin-right: 16px; }
  /* The logo's box now reaches to the first link, and it is a link home: an
     empty third of the bar would navigate. Only the mark itself should. The
     scrolled bar already does this, for the same reason. */
  .nav-logo { pointer-events: none; }
  .nav-logo img { pointer-events: auto; }
  /* Programs and Rules are buttons, the rest are links, and the two sat on
     baselines 0.7px apart: a button takes its own normal line height while
     an inline link takes the page's 1.6. Whichever label is the current page
     is the one being looked at, so the odd one out was always the gold one.
     Laying every item out the same way puts all six on one baseline. Desktop
     only: below this the same list is the drawer, a column of its own. */
  .nav-pages > li { display: flex; align-items: center; }
  .nav-pages > li > a { display: flex; align-items: center; line-height: normal; }
}
.nav-pages a {
  color: var(--c-fg-19407a);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 2px;
  position: relative;
  transition: color 0.2s ease;
}
.nav-pages a:hover,
.nav-pages a.active {
  color: var(--c-fg-0d244a);
}
/* Hover only. The current page is already marked by the gold its label is
   filled with, and a rule under it as well read as two answers to the same
   question. */
.nav-pages a:not(.active):hover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--c-bg-19407a);
  border-radius: 2px;
}

/* ---- Programs dropdown -------------------------------------------------
   A button rather than a link: it opens the two program pages instead of
   going anywhere itself, so it must not read as a destination. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 6px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  color: var(--c-fg-19407a);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
.nav-drop-toggle:hover,
.nav-drop-toggle.active,
.nav-drop-open > .nav-drop-toggle { color: var(--c-fg-0d244a); }
.nav-drop-toggle.active::after,
.nav-drop-toggle:hover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--c-bg-19407a);
  border-radius: 2px;
}
.nav-drop-caret { transition: transform 0.2s ease; }
.nav-drop-open > .nav-drop-toggle .nav-drop-caret { transform: rotate(180deg); }
/* Bridges the gap to the panel so a diagonal mouse move doesn't close it */
.nav-drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 5;
  min-width: 212px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 14px;
  box-shadow: 0 18px 40px var(--c-sh-re204179014);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-drop-open > .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-pages .nav-drop-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-pages .nav-drop-menu a:hover { background: var(--c-bg-f2f6fd); }
.nav-pages .nav-drop-menu a::after { display: none; }
@media (hover: hover) and (min-width: 1000px) {
  .nav-drop:hover > .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .nav-drop:hover > .nav-drop-toggle .nav-drop-caret { transform: rotate(180deg); }
}
/* .nav-pages is absolutely centred, so it can run under the sign-in button
   rather than push it aside. The two dropdowns widened the row enough to do
   that on small laptops; tighten the row and the buttons to keep them clear. */
@media (min-width: 1000px) and (max-width: 1320px) {
  .nav-pages { gap: 15px; }
  .nav-pages a,
  .nav-drop-toggle { font-size: 0.82rem; }
  .nav-actions { gap: 7px; }
  /* The sound toggle sits outside that group but reads as part of it, so its
     own gap follows the group's at every step down. */
  .sound-toggle { margin-right: -17px; }
  .nav-signin { padding: 8px 13px; font-size: 0.82rem; }
  .nav-cta { padding: 8px 15px; font-size: 0.82rem; }
  /* The flag rides in this row too. Its button's own padding is most of a
     15px gap on its own, so the pull-back that keeps it from reading as a
     hole at the full 26px gap would have it touching Home here. */
  .nav-lang-item { margin-right: 0; }
  .nav-lang-toggle { width: 34px; }
  .nav-lang-current { width: 22px; }
}
/* Small laptops, where the tightening above is not enough on its own. The
   English bar fits at 1000px with 14px to spare; Spanish needs 121px more
   than there is, because every label, Sign In and Get Funded are all longer
   at once. The wordmark comes down with the row rather than being squeezed
   by it: at this size it is a third of the bar, so it is where the width is.
   Measured clean in all fifteen languages at 1000, 1100 and 1199. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav-logo img { height: 56px; }
  .nav-pages { gap: 10px; margin-right: 8px; }
  .nav-pages a,
  .nav-drop-toggle { font-size: 0.78rem; }
  .nav-actions { gap: 5px; }
  .sound-toggle { margin-right: -19px; }
  .nav-signin { padding: 8px 9px; font-size: 0.78rem; }
  .nav-cta { padding: 8px 11px; font-size: 0.78rem; }
  .nav-lang-toggle { width: 30px; }
  .nav-lang-current { width: 20px; }
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green-dark);
  transition: var(--transition);
  border-radius: 2px;
}

.mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ========== HERO ========== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 120px 0 56px;
  overflow: hidden;
  background: var(--c-bg-ffffff);
}

/* ==================================================================
   HOMEPAGE BACKGROUND (light mode only)
   Plain white page. Every homepage section is transparent so the animated
   binary "ocean" (fixed, behind content) shows through continuously with no
   horizontal breaks; components keep their own surfaces on top. ================================================================== */ body.home {
  background-color: var(--c-bg-ffffff);
}
body.home .hero,
body.home .section,
body.home .challenges,
body.home .platforms,
body.home .broker,
body.home .features,
body.home .why-pnl,
body.home .roi,
body.home .payouts,
body.home .faq,
body.home .cta,
body.home .journey,
body.home .section--alt {
  background: transparent;
}

/* Lightweight animated binary "ocean" — fixed layer over the depth grid,
   behind page content. Homepage + default light theme only. */
.binary-wave {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: none;
}
body.home .binary-wave { display: block; }

/* Sub-pages that opt into the currency ocean (e.g. How It Works) show it in light and dark themes,
hidden on grey like the homepage. */ body.page-wave .binary-wave { display: block; }
/* The shared page-hero band goes transparent on wave pages so the ocean
   flows continuously from the top. */
body.page-wave .page-hero {
  background: transparent;
  border-bottom: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}

.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.globe-wrap {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 540px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.globe-wrap.is-ready {
  opacity: 1;
}
/* Hero text + buttons fade in identically to the globe (same 0.4s ease,
   triggered at the same moment by globe.js). */
.hero-left {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero-left.is-ready {
  opacity: 1;
}
.hero-globe {
  display: block;
  width: 100%;
}
.hero-globe svg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}
.globe-wrap .pill {
  position: absolute;
  left: 50%;
  bottom: 5.5%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--c-bg-re252252253078);
  border: 1px solid var(--c-bg-re224063008);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px var(--c-sh-re203560008);
  white-space: nowrap;
}
.globe-wrap .pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-bg-c9a24b);
  animation: globeBeat 2.4s ease-in-out infinite;
}
@keyframes globeBeat {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-sh-re20116275045); }
  50% { box-shadow: 0 0 0 6px var(--c-sh-re201162750); }
}
#regionName {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fg-41506b);
  transition: opacity 0.22s;
}

.hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5.2vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  text-align: left;
  line-height: 1.04;
  margin: 0 0 22px;
  /* Solid brand navy, sampled from assets/pnl-logo-navy.png. No gradient or
     lighter-blue fade. */
  color: var(--c-fg-1d2e5f);
}
@media (max-width: 1200px) { .hero-br { display: none; } }
/* Line break in the challenge selector subtitle: desktop only, so narrow
   screens don't get a stray break mid-wrap. */
@media (max-width: 768px) { .sub-br-desktop { display: none; } }

.hero-subtitle {
  font-size: 1.42rem;
  line-height: 1.6;
  margin: 0 0 34px;
  max-width: 560px;
  color: var(--c-fg-19407a);
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 0 40px;
}

/* "Trade Your Money" — deep black pill with a subtle top sheen.
   Same structural recipe as the gold "Trade Our Accounts" CTA, just a
   darker palette and a much fainter highlight. */

/* Hero two-column responsive: stack on tablet/mobile */
@media (max-width: 860px) {
  .hero { padding: 96px 0 56px; }
  .hero-content {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .hero-right { order: -1; }
  
  .globe-wrap { max-width: 300px; }
  .hero-tagline { text-align: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  
}

/* ========== SECTIONS (shared) ========== */
.section {
  padding: 44px 0;
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-eyebrow);
  font-size: 12.6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--c-fg-244488);
  padding: 9px 18px;
  border: 1px solid var(--c-bg-re255255255065);
  border-radius: 12.6px;
  background: linear-gradient(180deg, var(--c-bg-re255255255055), var(--c-bg-re255255255025));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 7.2px 21.6px var(--c-sh-re366813601), inset 0 1px 0 var(--c-sh-re25525525508);
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-heading);
  /* Cap at 46px to match the homepage's other section headings ("Meet CXM.",
     "Simple Principles", "Trade On Your Favourite Platforms"), which sit at
     min(46px, …). At the old 3rem (48px) this heading read a touch larger. */
  font-size: clamp(2rem, 4vw, 2.875rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1px;
  text-wrap: balance;
  margin-bottom: 16px;
  color: var(--c-fg-14294f);
}

.section-subtitle {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--c-fg-46587a);
  max-width: 738px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ========== CHALLENGES / PRICING ========== */
.challenges {
  background: var(--white);
}

/* ========== WHY PNL / COMPARISON ========== */
.why-pnl {
  background: var(--white);
  position: relative;
}

/* Industry rule grid */

/* ========== ROI CALCULATOR ========== */
.roi {
  background: var(--white);
}

/* "How Your Rewards Add Up" — blue controls + graph,
light mode only. Dark mode keeps its gold via the existing dark overrides / inline SVG,
and the projected-earnings figure (.roi-stat-big) and ROI number (.roi-invest-highlight .roi-invest-value) stay gold in both modes. */ 
body {
  --chart-dot-dark: var(--c-bg-19407a);
  --chart-dot-light: var(--c-bg-2f6bb5);
  --chart-stroke-rgba: var(--c-bg-re2564122035);
}

/* ========== FEATURES ========== */

/* ========== TRADER JOURNEY ========== */
.journey {
  background: var(--white);
}
/* No divider line between the hero and the Trader's Journey section */
.journey::before {
  display: none;
}

/* Trader's Journey title + subtext: match the hero's entrance exactly — a
   0.4s opacity fade with no slide. Overrides the site-wide section-header
   fade-up (inline 0.8s opacity+transform set by main.js) so the page's
   entrances read as one uniform animation. Opacity 0->1 is still driven by
   the shared .visible scroll trigger. */
.journey .section-header {
  opacity: 0; /* hidden from first paint so it never flashes before the JS hides it */
  transition: opacity 0.4s ease !important;
  transform: none !important;
}

/* Stack the three journey cards on smaller screens */

/* ---- Ecosystem animations ---- */

/* Soft breathing on the OR badge */

/* Radiating glow ring around each node icon (very subtle) */

/* ========== PLATFORMS ========== */
.platforms {
  padding: 44px 0;
  background: var(--white);
}

/* ========== BROKER / MEET CXM ========== */
.broker {
  background: var(--white);
}

/* ========== FAQ ========== */

.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.faq-item.active {
  border-color: var(--c-bg-re000025);
  box-shadow: 0 2px 12px var(--c-sh-re000006);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: none;
  border: none;
  color: var(--gray-700);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  gap: 16px;
  transition: var(--transition);
}

.faq-question:hover {
  color: var(--green-primary);
}

.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gray-300);
  transition: var(--transition);
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: var(--green-primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
  max-height: 4000px;
}

.faq-answer p {
  padding: 0 24px 20px;
  font-size: 0.9rem;
  color: var(--gray-400);
  line-height: 1.7;
}

/* ========== CTA ========== */
.cta {
  padding: 32px 0 64px;
  background: var(--white);
}

/* Gold glossy CTA button */

.cta .btn {
  position: relative;
  z-index: 1;
}

/* ========== FOOTER ========== */
.footer {
  background: var(--c-bg-13233f);
  color: var(--c-fg-re255255255055);
  padding: 48px 0 0;
  border-top: none;
}

/* Top bar: logo + social */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-bg-re255255255008);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--c-fg-ffffff);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.footer-logo img {
  height: 49px;
  width: auto;
  display: block;
}

.footer-social {
  display: flex;
  gap: 18px;
}
.footer-social .social-link {
  width: 22px;
  height: 22px;
  background: transparent;
  border-radius: 0;
  color: var(--c-fg-re255255255055);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.footer-social .social-link svg {
  width: 20px;
  height: 20px;
}
.footer-social .social-link:hover {
  background: transparent;
  color: var(--c-fg-ffffff);
}

/* Main columns */
.footer-main {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.1fr 1fr;
  gap: 40px;
  padding: 44px 0 48px;
}
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-fg-ffffff);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-col li,
.footer-col a {
  color: var(--c-fg-re255255255055);
  font-size: 0.88rem;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--c-fg-ffffff);
}

/* "Top Searches" column uses arrow icons */
.footer-col--arrows a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-col--arrows a::before {
  content: '';
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.45'><path d='M7 17L17 7M7 7h10v10'/></svg>") center/contain no-repeat;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Second panel: newsletter + legal */
.footer-panel {
  background: var(--c-bg-13233f);
  padding: 44px 0 24px;
}
.footer-newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-bg-re255255255008);
}
.footer-newsletter h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-fg-ffffff);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.footer-newsletter-features {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-newsletter-features span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.87rem;
  color: var(--c-fg-re25525525506);
}
.footer-newsletter-features svg {
  color: var(--c-fg-e8c56a);
  width: 14px;
  height: 14px;
}
.footer-newsletter-form {
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer-newsletter-form .glass-button-wrap { flex-shrink: 0; }
/* Footer Subscribe reads whiter than the hero frost: on the dark navy footer
   the translucent recipe let the background show through and muted it, so the
   underlay is lifted to near-solid white. 0,3,0 to win over the light/dark
   mode .glass-button rules. */
.footer .footer-newsletter-form .glass-button {
  background:
    linear-gradient(135deg, var(--c-bg-re255255255088) 0%, var(--c-bg-re255255255062) 48%, var(--c-bg-re25525525508) 100%),
    linear-gradient(180deg, var(--c-bg-re248251255096) 0%, var(--c-bg-re228238251092) 100%);
  border-color: var(--c-bg-re25525525507);
  color: var(--c-fg-14294f);
}
.footer .footer-newsletter-form .glass-button-text { color: var(--c-fg-14294f); }
.footer .footer-newsletter-form .glass-button:hover {
  background:
    linear-gradient(135deg, var(--c-bg-re255255255096) 0%, var(--c-bg-re255255255072) 48%, var(--c-bg-re25525525509) 100%),
    linear-gradient(180deg, var(--c-bg-ffffff) 0%, var(--c-bg-re232241252096) 100%);
}
.footer-newsletter-form input {
  flex: 1;
  padding: 10px 14px;
  background: var(--c-bg-re255255255005);
  border: 1px solid var(--c-bg-re255255255015);
  border-radius: 4px;
  color: var(--c-fg-ffffff);
  font-size: 0.9rem;
  font-family: inherit;
}
.footer-newsletter-form input::placeholder {
  color: var(--c-fg-re255255255035);
}
.footer-newsletter-form input:focus {
  outline: none;
  border-color: var(--green-primary);
}

.footer-disclaimer {
  padding: 20px 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--c-fg-re255255255035);
  text-align: left;
  margin: 0;
  max-width: 100%;
  border-bottom: 1px solid var(--c-bg-re255255255008);
}

/* Single row of accepted-payment logos — each shown once, no duplication. */
.pay-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.pay-item { flex: 0 0 auto; display: inline-flex; }
.pay-tile {
  height: 34px;
  padding: 0 12px;
  border-radius: 5px;
  background: var(--c-bg-ffffff);
  box-shadow: 0 1px 3px var(--c-sh-re000028);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pay-logo { width: auto; display: block; }

/* Centred stack: legal links, then the tagline in the middle, then region. */
.footer-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px 0 0;
  flex-wrap: wrap;
  gap: 12px;
  text-align: center;
}
.footer-bottom .footer-legal-links { justify-content: center; }
.footer-bottom .footer-meta { flex-direction: column; gap: 8px; align-items: center; }
/* Tagline in the metallic gold used on the eyebrows */
.footer-meta > span:not(.footer-region) {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(105deg, var(--c-bg-b8901f) 0%, var(--c-bg-e8c56a) 30%, var(--c-gl-fffbe8) 50%, var(--c-bg-e8c56a) 70%, var(--c-bg-b8901f) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.footer-legal-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.78rem;
  color: var(--c-fg-re255255255045);
}
.footer-legal-links a {
  color: var(--c-fg-re255255255055);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal-links a:hover {
  color: var(--c-fg-ffffff);
}
.footer-meta {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--c-fg-re25525525506);
}

/* Was a dead "Region: Global" control with a caret and no handler. It is now
   the only sitewide route to the restricted-jurisdiction list, and it sits in
   the legal-links row after Privacy Policy, so it takes that row's styling
   rather than carrying an underline its neighbours do not have. */
.footer-region {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-fg-re255255255055);
  text-decoration: none;
  transition: color .16s ease;
}
.footer-region:hover,
.footer-region:focus-visible {
  color: var(--c-fg-ffffff);
}

@media (max-width: 1024px) {
  .footer-main {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 768px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-newsletter {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .footer-newsletter-form input {
    min-width: 0;
  }
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
  /* The bottom bar stays centred on mobile too. */
  .footer-bottom { flex-direction: column; align-items: center; }
  .footer-top { gap: 20px; }
  .footer-top .pay-row { justify-content: flex-start; }

  /* Larger tap targets, visually unchanged: hit areas ~40px via negative margins */
  .footer-social .social-link {
    width: 40px;
    height: 40px;
    margin: -9px;
  }
  .footer-col li a,
  .footer-legal-links a {
    padding: 10px 8px;
    margin: -10px -8px;
  }
}
@media (max-width: 480px) {
  .footer-main {
    grid-template-columns: 1fr;
  }
  .footer-newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }
  .footer-newsletter-form .glass-button-wrap {
    width: 100%;
  }
  .footer-newsletter-form .glass-button {
    display: block;
    width: 100%;
  }
  .footer-newsletter-form .glass-button-text {
    text-align: center;
  }
}

/* ========== RESPONSIVE ========== */

@media (max-width: 999px) {
  .mobile-toggle { display: flex; }
  .navbar { padding: 12px 16px; }
  .nav-inner { flex-wrap: wrap; }
  /* A third control in the bar tipped the row over: it needed 374px in a
     340px box, of which 96px was gap, so the burger wrapped to a second line
     and the navbar doubled in height. A tighter gap buys back more than the
     control costs. Declared here rather than beside the other sound-toggle
     rules because .nav-inner's own 24px gap is set further down the file and
     would otherwise win on order. */
  .nav-inner { column-gap: 8px; }

  .nav-pages,
  .nav-actions { display: none; }
  /* The logo collapses on scroll to keep the pill bar slim, which on a phone
     left only the hamburger. This CTA is the one thing that should never
     leave the bar, so it lives outside .nav-actions and stays put. */
  .nav-cta-mobile {
    /* Collapsed to zero width at the top of the page rather than display:none,
       so it can animate open — and so it never occupies a row while the logo
       is still there. The hero carries its own CTA up here. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;          /* far left, in the space the logo vacates */
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    padding: 6px 0;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    color: var(--c-fg-000000);
    text-shadow: 0 1px 0 var(--c-sh-re255255255035);
    text-decoration: none;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    /* Gold face + navy label, matching the desktop nav CTA and hero button */
    background:
      linear-gradient(180deg, var(--c-gl-re255255255062) 0%, var(--c-gl-re2552552550) 46%),
      linear-gradient(180deg, var(--c-bg-f9edbf) 0%, var(--c-bg-eacd6f) 30%, var(--c-bg-dbb24a) 50%, var(--c-bg-e6c25c) 62%, var(--c-bg-b07f28) 100%);
    border: 1px solid var(--c-bg-re1409620065);
    box-shadow:
      inset 0 1px 0 var(--c-sh-re25525525509),
      inset 0 -2px 6px var(--c-sh-re120801004),
      0 4px 14px var(--c-sh-re15011020038);
    transition: max-width .3s cubic-bezier(.22,1,.36,1), padding .3s ease,
                opacity .24s ease, transform .2s cubic-bezier(.22,1,.36,1);
  }
  /* The logo takes 0.3s to fade and collapse. Opening any earlier puts both
     in the bar at once, which wraps the hamburger to a second row for a
     frame or two — so the whole reveal waits that out. */
  .navbar.scrolled .nav-cta-mobile {
    max-width: 220px;
    opacity: 1;
    padding: 6px 15px;
    transition-delay: .32s;
  }
  /* The open menu carries its own Get Funded, so the bar's one collapses
     away rather than showing the same action twice. Higher specificity than
     the .scrolled rule above, so it wins while the menu is open. */
  .navbar.scrolled .nav-inner:has(.nav-pages.active) .nav-cta-mobile {
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    transition-delay: 0s;
  }
  /* With the logo collapsed and the bar's CTA hidden, the menu's top row is
     empty but for the close button — so the slogan takes the logo's place. */
  /* The bar's 24px column gap sits between the collapsed logo and the
     slogan, indenting it past the links below. Zero it so the slogan starts
     on the same left edge as the page links. */
  .navbar.scrolled .nav-inner:has(.nav-pages.active) { column-gap: 0; }
  .navbar.scrolled .nav-inner:has(.nav-pages.active) .nav-slogan {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
    margin-top: -6px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--c-fg-14294f);
    white-space: nowrap;
    animation: navSloganIn .3s cubic-bezier(.22,1,.36,1);
  }
  /* The pill's left padding is what holds the button off the edge. With the
     logo collapsed there is nothing else on that side, so pull it in. */
  .navbar.scrolled .nav-inner { padding-left: 8px; }
  /* And the same handover in reverse: scrolling back up collapses the CTA
     first, then the logo grows back, so the two never share the bar. */
  .nav-logo img { transition-delay: .26s; }
  .navbar.scrolled .nav-logo img { transition-delay: 0s; }
  .nav-cta-mobile:active { transform: scale(.96); }
  /* Light sweeps across the glass, so the button reads as live rather than
     a flat chip — the pulse is on the outer glow only, never the layout. */
  .nav-cta-mobile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, var(--c-gl-re2552552550) 38%,
                var(--c-gl-re255255255042) 50%, var(--c-gl-re2552552550) 62%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    animation: navCtaSheen 3.6s ease-in-out infinite;
    pointer-events: none;
  }
  .nav-cta-mobile > span { position: relative; z-index: 1; }
  @media (max-width: 380px) {
    .navbar.scrolled .nav-cta-mobile { padding: 6px 13px; font-size: 12.5px; }
  }

  /* .nav-inner's 24px gap becomes a row-gap once the menu wraps onto its own
     row, stacking with the panel's margin — 36px of dead space under the
     logo. Collapse both so the divider sits directly beneath it. */
  .nav-inner:has(.nav-pages.active) {
    row-gap: 0;
    /* scrolled, the pill adds 9px below; zero it so the button row's own
       padding is the only thing between the divider and the panel foot */
    padding-bottom: 0;
  }
  .nav-pages.active {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: static;
    transform: none;
    order: 3;
    width: 100%;
    gap: 2px;
    margin-top: 0;
    padding: 10px 0 6px;
    border-top: 1px solid var(--gray-100);
  }
  /* Block, not inline: the vertical padding on an inline link paints outside
     its line box, so the <li> stayed at the 26px text height while the
     dropdown <button> next to it, being inline-block, counted its padding and
     came out 45px. That alternation is what made the gaps uneven. */
  .nav-pages a { color: var(--c-fg-19407a); font-size: 1rem; padding: 10px 2px;
                 display: block; line-height: 1.5; }
  .nav-pages a.active::after,
  .nav-pages a:hover::after { display: none; }

  /* Programs dropdown inside the hamburger panel: an inline accordion rather
     than a floating card, so it pushes the links below it down. */
  .nav-pages.active .nav-drop { flex-direction: column; align-items: stretch; }
  .nav-pages.active .nav-drop::after { display: none; }
  .nav-pages.active .nav-drop-toggle {
    justify-content: space-between;
    font-size: 1rem;
    padding: 10px 2px;
    /* matches the plain links either side of it, so every row is one height */
    line-height: 1.5;
  }
  .nav-pages.active .nav-drop-toggle::after { display: none; }
  .nav-pages.active .nav-drop-menu {
    position: static;
    min-width: 0;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.26s ease;
  }
  /* Room for the longest menu (Rules, three items at 41px). It was 120px,
     which fitted while these links were inline and their padding did not
     count; as blocks the third item was clipped by 3px. */
  .nav-pages.active .nav-drop-open > .nav-drop-menu { max-height: 160px; }
  .nav-pages.active .nav-drop-menu a { font-size: 0.95rem; padding: 9px 2px; color: var(--c-fg-46587a); }

  .nav-actions.active {
    display: flex;
    /* side by side, splitting the width, with the primary action first */
    flex-direction: row;
    align-items: stretch;
    order: 4;
    width: 100%;
    gap: 12px;
    margin-top: 1px;
    /* equal above and below, so the row sits centred between the divider
       and the bottom of the panel */
    padding: 9px 0;
    border-top: 1px solid var(--gray-100);
  }
  .nav-actions.active .nav-cta { order: -1; }
  .nav-actions.active .nav-signin,
  .nav-actions.active .nav-cta {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
  }
  /* Icy blue glass, matching the hero button — the pale counterpart to the
     navy Get Funded beside it. */
  .nav-actions.active .nav-signin {
    border-radius: 999px;
    border: 1px solid var(--c-bg-re2564122028);
    color: var(--c-fg-19407a);
    background:
      linear-gradient(135deg, var(--c-bg-re25525525507) 0%, var(--c-bg-re255255255018) 45%, var(--c-bg-re25525525504) 100%),
      linear-gradient(180deg, var(--c-bg-re22023525505) 0%, var(--c-bg-re190215245035) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    box-shadow:
      inset 0 1px 0 var(--c-sh-re255255255085),
      inset 0 -2px 6px var(--c-sh-re2564122012),
      0 6px 18px var(--c-sh-re2564122016);
  }
  .nav-actions.active .nav-signin:hover {
    border-color: var(--c-bg-re2564122042);
    background:
      linear-gradient(135deg, var(--c-bg-re25525525508) 0%, var(--c-bg-re255255255024) 45%, var(--c-bg-re255255255048) 100%),
      linear-gradient(180deg, var(--c-bg-re220235255062) 0%, var(--c-bg-re190215245045) 100%);
  }
  .nav-signin, .nav-cta { text-align: center; }

  

  

  

  

  

  

  /* 50K */

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

}

/* Not a navbar rule; it was inside the block above when that block was the
   phone breakpoint, and it stays on the phone breakpoint now that the block
   has moved up to cover tablets as well. */
@media (max-width: 768px) {
  .section {
    padding: 40px 0;
  }
}

@media (max-width: 480px) {
  

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  

  

  

  

  

  

  

  .section-title {
    font-size: 1.8rem;
  }
}

/* Chart vars used by main.js via getComputedStyle.
   Default values black; --canvas-wave-* sets the homepage binary-ocean RGB. */
:root {
  --slider-fill-color: var(--c-bg-19407a);
  --chart-dot-dark: var(--c-bg-1a1a1a);
  --chart-dot-light: var(--c-bg-2a2a2a);
  --chart-stroke-rgba: var(--c-bg-re000025);
}

/* ========== SUB-PAGES ========== */
.page-body {
  background: var(--white);
}

/* Page hero */
.page-hero {
  padding: 160px 0 60px;
  background: linear-gradient(180deg, var(--c-bg-f9fafb) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--gray-100);
  text-align: center;
}
.page-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-primary);
  margin-bottom: 14px;
}
.page-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--black);
}

/* Titles and headers in one solid brand navy (#1d2e5f), matching the home
   hero. Accent words inside them are neutralised at the .text-*-sheen source
   above; here we set the base colour so the whole heading is uniform. */
.fc-hero-title,
.hiw-hero-title,
.page-hero-title,
.section-title,
.hiw-step-title,
.fc-path-title { color: var(--c-fg-1d2e5f); }
.page-hero-subtitle {
  font-size: 1.1rem;
  color: var(--gray-600);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.55;
}

/* FAQ category tabs */
.faq-search {
  position: relative;
  max-width: 560px;
  margin: 0 auto 24px;
}
.faq-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  pointer-events: none;
}
.faq-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 46px 15px 48px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-search-input::placeholder { color: var(--gray-400); }
.faq-search-input:focus {
  outline: none;
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px var(--c-sh-re202020006);
}
.faq-search-input::-webkit-search-cancel-button { display: none; }
.faq-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.faq-search-clear svg { width: 15px; height: 15px; }
.faq-search-clear:hover { background: var(--gray-200); color: var(--black); }
.faq-no-results {
  max-width: 780px;
  margin: 8px auto 0;
  text-align: center;
  color: var(--gray-600);
}
.faq-no-results a { color: var(--green-primary); font-weight: 600; }

.faq-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}
.faq-category {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.faq-category.active,
.faq-category:hover {
  border-color: var(--green-primary);
  color: var(--green-primary);
  background: var(--c-bg-re202020006);
}
.faq-group {
  max-width: 780px;
  margin: 0 auto 48px;
}
.faq-group h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--black);
  margin: 0 0 16px;
}
.faq-entry {
  border-bottom: 1px solid var(--gray-100);
  padding: 18px 0;
}
.faq-entry summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--black);
  font-size: 1rem;
}
.faq-entry summary::-webkit-details-marker { display: none; }
.faq-entry summary::after {
  content: '+';
  color: var(--green-primary);
  font-size: 1.4rem;
  font-weight: 400;
  transition: transform 0.2s;
}
.faq-entry[open] summary::after {
  content: '–';
}
.faq-entry p {
  color: var(--gray-700);
  line-height: 1.6;
  margin: 12px 0 0;
}

/* Inline links inside an answer. These carried no styling at all, so they
   rendered in the body colour with no underline and were invisible as links.
   Colour alone is not enough (it fails for colour-blind readers and against
   the WCAG "not by colour alone" rule), hence the underline as well. */
a.faq-link {
  color: var(--c-fg-244488);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-fg-re3668136045);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.16s ease, text-decoration-color 0.16s ease;
}
a.faq-link:hover,
a.faq-link:focus-visible {
  color: var(--c-fg-16305f);
  text-decoration-color: var(--c-fg-244488);
}

/* Single-card layout when only the "Do care" column is shown */

/* Rules chart iframes */

/* How-it-works embedded visual cards */
.hiw-cards {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hiw-card-embed {
  --chart-scale: 0.9;
  overflow: hidden;
  margin: 0 auto;
  border-radius: calc(32px * var(--chart-scale));
}
@media (max-width: 768px) {
  .hiw-card-embed { --chart-scale: 0.5; }
}

/* Once js/fit-embeds.js hits its scale floor it wraps the embed in this
   scroller: the card keeps a readable scale and pans sideways under the
   thumb while the page itself stays a single fixed-width column. The
   wrapper only ever exists below the floor, so desktop is untouched. */
.embed-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
/* These embeds are fixed-size canvases, so below the readability floor they
   pan rather than reflow. Fade the scroller's edges so the cut reads as more
   content to swipe to, instead of a card sliced off mid-chart. The mask sits
   on the scroll port, not the content, so it stays put while the card pans. */
@media (max-width: 860px) {
  .embed-scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--c-bg-000000) 18px,
                        var(--c-bg-000000) calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, var(--c-bg-000000) 18px,
                        var(--c-bg-000000) calc(100% - 34px), transparent 100%);
  }
}
.embed-scroll > .rules-chart-item,
.embed-scroll > .hiw-card-embed {
  width: calc(var(--canvas-w, 1536px) * var(--chart-scale));
  max-width: none;
}
.embed-scroll > .fc-path-embed {
  width: calc(var(--canvas-w, 1272px) * var(--path-scale));
  max-width: none;
  margin: 0;
}

/* Available markets — symbol chips (used in FAQ answers) */
.mkt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.mkt-chip {
  display: inline-block;
  padding: 5px 11px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gray-700);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Contact page */

@media (max-width: 768px) {
  .page-hero { padding: 56px 0 44px; }
  
  
}

/* ========== FORBIDDEN PRACTICES PAGE ========== */
/* Forbidden practices as rules-style cards: same navy radial canvas, faint
   blueprint grid, gold iconography and panel asides as the rules charts —
   but fluid native DOM with CSS animations, not fixed scaled canvases.
   Each card is gated behind data-anim for js/reveal.js. */
.fpc-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 32px;
}
.fpc-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--c-bg-re3668136014);
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  box-shadow: 0 16px 44px var(--c-sh-re3668136008);
  padding: 40px 48px 42px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.fpc-card:hover {
  border-color: var(--c-bg-re160294803);
  box-shadow: 0 22px 54px var(--c-sh-re3668136014);
  transform: translateY(-3px);
}
/* Faint blueprint grid, as on the rules canvases */
.fpc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--c-bg-re3668136005) 1px, transparent 1px),
                    linear-gradient(90deg, var(--c-bg-re3668136005) 1px, transparent 1px);
  background-size: 96px 96px;
  pointer-events: none;
}
/* Soft gold wash in the top-right corner, like the Profit Target card */
.fpc-card::after {
  content: '';
  position: absolute;
  right: -140px;
  top: -120px;
  width: 520px;
  height: 420px;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re160294801), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.fpc-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  animation: fpcRise 0.55s cubic-bezier(0.22, 0.9, 0.25, 1) 0.05s both;
}
.fpc-icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid var(--c-bg-re160294803);
  background: var(--c-bg-re1602948006);
  animation: fpcPop 0.5s cubic-bezier(0.22, 0.9, 0.25, 1) 0.12s both;
}
.fpc-icon svg { display: block; }
.fpc-num {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--c-fg-a01d30);
  border: 1px solid var(--c-bg-re1602948038);
  border-radius: 999px;
  padding: 5px 12px;
}
.fpc-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 700;
  color: var(--c-fg-14294f);
  letter-spacing: -0.3px;
}
/* Dashed gold rule that wipes in, echoing the charts' dashed target lines */
.fpc-divider {
  position: relative;
  z-index: 1;
  height: 0;
  border-top: 1px dashed var(--c-bg-re1602948032);
  margin: 24px 0 26px;
  transform-origin: left center;
  animation: fpcWipe 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.28s both;
}
.fpc-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 34px;
  align-items: start;
}
.fpc-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--c-fg-46587a);
  text-wrap: pretty;
  animation: fpcRise 0.55s cubic-bezier(0.22, 0.9, 0.25, 1) 0.2s both;
}
/* Aside panel, styled like the rules cards' info panels */
.fpc-aside {
  margin: 0;
  padding: 20px 24px;
  border-radius: 18px;
  border: 1px solid var(--c-bg-re3668136016);
  background: linear-gradient(160deg, var(--c-bg-re25525525509), var(--c-bg-re23624225008));
  box-shadow: inset 0 1px 0 var(--c-sh-re25525525509);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-fg-46587a);
  animation: fpcRise 0.55s cubic-bezier(0.22, 0.9, 0.25, 1) 0.32s both;
}
.fpc-aside strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-fg-a01d30);
}
/* How-we-handle-violations: one icy/navy card, narrower than the practice
   cards, holding the four stages as a dashed-divided sequence. */
.fpv-card {
  position: relative;
  overflow: hidden;
  max-width: 940px;
  margin: 0 auto;
  border-radius: 28px;
  border: 1px solid var(--c-bg-re3668136014);
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  box-shadow: 0 16px 44px var(--c-sh-re3668136008);
  padding: 44px 48px 20px;
}
.fpv-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--c-bg-re3668136005) 1px, transparent 1px),
                    linear-gradient(90deg, var(--c-bg-re3668136005) 1px, transparent 1px);
  background-size: 96px 96px;
  pointer-events: none;
}
.fpv-card::after {
  content: '';
  position: absolute;
  right: -140px;
  top: -120px;
  width: 520px;
  height: 420px;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re120175240018), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.fpv-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px dashed var(--c-bg-re3668136024);
  animation: fpcRise 0.55s cubic-bezier(0.22, 0.9, 0.25, 1) 0.05s both;
}
.fpv-icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid var(--c-bg-re3668136024);
  background: var(--c-bg-re12017524001);
  animation: fpcPop 0.5s cubic-bezier(0.22, 0.9, 0.25, 1) 0.12s both;
}
.fpv-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  color: var(--c-fg-14294f);
  letter-spacing: -0.3px;
}
.fpv-head p {
  margin: 4px 0 0;
  font-size: 0.98rem;
  color: var(--c-fg-46587a);
}
.fpv-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  padding: 26px 0 28px;
  animation: fpcRise 0.55s cubic-bezier(0.22, 0.9, 0.25, 1) both;
}
.fpv-step + .fpv-step { border-top: 1px dashed var(--c-bg-re3668136018); }
.fpv-step:nth-of-type(1) { animation-delay: 0.18s; }
.fpv-step:nth-of-type(2) { animation-delay: 0.28s; }
.fpv-step:nth-of-type(3) { animation-delay: 0.38s; }
.fpv-step:nth-of-type(4) { animation-delay: 0.48s; }
.fpv-num {
  width: 34px;
  height: 34px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-bg-re3668136035);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-fg-244488);
  background: var(--c-bg-re255255255075);
}
.fpv-step h3 {
  margin: 4px 0 8px;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--c-fg-14294f);
}
.fpv-step p {
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--c-fg-46587a);
  text-wrap: pretty;
}
.fpv-step ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;  /* the global reset strips markers */
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--c-fg-46587a);
}
.fpv-step li::marker { color: var(--c-fg-7cabef); }
.fpv-step strong { color: var(--c-fg-244488); }
@media (max-width: 680px) {
  .fpv-card { padding: 30px 22px 12px; }
  .fpv-step { grid-template-columns: 1fr; gap: 6px; }
  .fpv-num { display: none; }
}

/* ==================================================================
   PNL PATHWAY
   The stage cards reuse the forbidden-practices card wholesale and
   only swap its accent: navy and gold in place of the dark red. The
   ladder and the panel below are built from the same tokens — icy
   gradient, hairline navy border, fpcRise on entry — so the page reads
   as one system with the rules and policy pages.
   ================================================================== */
.fpc-stack--pathway .fpc-card:hover { border-color: var(--c-bg-re3668136032); }
.fpc-stack--pathway .fpc-card::after {
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re12017524002), transparent 70%);
}
.fpc-stack--pathway .fpc-icon {
  border-color: var(--c-bg-re3668136026);
  background: var(--c-bg-re12017524001);
}
.fpc-stack--pathway .fpc-num { color: var(--c-fg-244488); border-color: var(--c-bg-re3668136034); }
.fpc-stack--pathway .fpc-divider { border-top-color: var(--c-bg-re3668136026); }
.fpc-stack--pathway .fpc-aside strong { color: var(--c-fg-a8801c); }
/* Tighter vertical rhythm than the forbidden-practices cards these inherit
   from, which were drawn around longer copy. The padding and the space either
   side of the dashed rule come in, and the aside stretches to its row instead
   of floating as a short box with a pool of space beneath it: on these three
   cards the two columns differ by 28 to 86px, and that gap was the emptiness.
   The columns are rebalanced a little too, which brings the two nearer the
   same height before the stretch has to do any work. */
.fpc-stack--pathway .fpc-card { padding: 30px 44px 32px; }
/* The dashed rule and the 39px it occupied both go, which lifts the aside and
   the body text up under the title. It stays on the forbidden-practices cards,
   where it echoes that page's dashed target lines. */
.fpc-stack--pathway .fpc-divider { display: none; }
/* The aside is centred against the whole card, not just the paragraph.
   It was the taller of the two columns, so it set the row height and no
   alignment inside that row could move it: sitting below the title, it ended
   up around 38px under the card's middle and read as bottom-heavy. The card
   itself becomes the grid instead, with the title and paragraph stacked in the
   left column and the aside spanning both rows in the right, where centring
   finally has room to work. .fpc-body carries display: contents so its two
   children join that grid directly, rather than nesting a second one. */
.fpc-stack--pathway .fpc-card {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  column-gap: 30px;
  align-items: start;
}
.fpc-stack--pathway .fpc-body { display: contents; }
.fpc-stack--pathway .fpc-head { grid-column: 1; grid-row: 1; }
.fpc-stack--pathway .fpc-text { grid-column: 1; grid-row: 2; margin-top: 20px; }
.fpc-stack--pathway .fpc-aside { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* Phones get one column, which has to be restated here for two reasons: the
   shared phone rules are single-class selectors that the rules above outrank,
   and the grid now lives on the card, so overriding .fpc-body no longer
   reaches it. The explicit row and column placements are cleared as well,
   otherwise the aside stays pinned beside the title in a 150px track. */
@media (max-width: 900px) {
  .fpc-stack--pathway .fpc-card { padding: 24px 24px 26px; grid-template-columns: 1fr; }
  .fpc-stack--pathway .fpc-head,
  .fpc-stack--pathway .fpc-text,
  .fpc-stack--pathway .fpc-aside { grid-column: 1; grid-row: auto; align-self: auto; }
  .fpc-stack--pathway .fpc-aside { margin-top: 20px; }
}

/* Requirements / benefits, as one icy card split in two */
.pw-panel {
  position: relative;
  overflow: hidden;
  max-width: 940px;
  margin: 34px auto 0;
  border-radius: 28px;
  border: 1px solid var(--c-bg-re3668136014);
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  box-shadow: 0 16px 44px var(--c-sh-re3668136008);
  padding: 40px 48px 42px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 38px;
  animation: fpcRise 0.55s cubic-bezier(0.22, 0.9, 0.25, 1) 0.1s both;
}
.pw-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--c-bg-re3668136005) 1px, transparent 1px),
                    linear-gradient(90deg, var(--c-bg-re3668136005) 1px, transparent 1px);
  background-size: 96px 96px;
  pointer-events: none;
}
.pw-panel-rule { background: var(--c-bg-re3668136014); }
.pw-panel h3 {
  position: relative;
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-fg-244488);
}
.pw-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pw-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--c-fg-46587a);
}
.pw-list svg { width: 22px; height: 22px; margin-top: 1px; }
.pw-list strong { color: var(--c-fg-244488); font-weight: 600; }
@media (max-width: 780px) {
  .pw-panel { padding: 30px 22px 32px; grid-template-columns: 1fr; gap: 26px; }
  .pw-panel-rule { height: 1px; }
}

/* ==================================================================
   RULES CARDS
   Rebuilt from fixed 1536x1024 canvases into flow layout. The canvases
   could only scale as a unit, so on a phone they either panned off the
   screen or shrank body copy to ~5px. Here the type is set in rem and
   the charts are fluid SVG (they already carried a viewBox), so the card
   reflows to one column instead of being cropped.
   ================================================================== */
.rc-stack { display: flex; flex-direction: column; gap: 30px; }

/* ---- Program switch ----------------------------------------------------
   Freedom and Instant share most objectives but differ on the profit target
   and on how the maximum loss behaves, so the stack swaps those cards rather
   than duplicating the page. */
.rc-switch {
  align-self: center;
  display: inline-flex;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--gray-100);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c-bg-ffffff) 0%, var(--c-bg-eef4fc) 100%);
  box-shadow: inset 0 1px 0 var(--c-sh-re25525525509), 0 10px 28px var(--c-sh-re366813601);
}
.rc-switch-btn {
  margin: 0;
  padding: 16px 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--c-fg-46587a);
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.rc-switch-btn:hover { color: var(--c-fg-19407a); }
.rc-switch-btn.is-on {
  color: var(--white);
  border-color: var(--c-bg-re60606004);
  background: linear-gradient(180deg, var(--c-bg-37568c) 0%, var(--c-bg-1d3560) 100%);
  box-shadow: 0 6px 16px var(--c-sh-re164284028), inset 0 1px 0 var(--c-sh-re25525525503);
  text-shadow: 0 1px 2px var(--c-sh-re000025);
}
/* Three programs now, so every card that names one is hidden under the other
   two. Cards marked data-prog="both" are shared and are named by none of
   these selectors, which is what keeps them on screen throughout. */
.rc-stack[data-prog-on="freedom"] .rc-card[data-prog="legacy"],
.rc-stack[data-prog-on="freedom"] .rc-card[data-prog="instant"],
.rc-stack[data-prog-on="legacy"] .rc-card[data-prog="freedom"],
.rc-stack[data-prog-on="legacy"] .rc-card[data-prog="instant"],
.rc-stack[data-prog-on="instant"] .rc-card[data-prog="freedom"],
.rc-stack[data-prog-on="instant"] .rc-card[data-prog="legacy"] { display: none; }
/* Minimum profitable days is one card for all three programs, because the
   rule is the same one; only the size of a qualifying day differs, 0.5% of
   the starting balance on Freedom against 1% on Legacy and Instant. Rather
   than three copies of a card that is otherwise identical, the few figures
   that change carry both values and the tab picks one. */
.rc-stack[data-prog-on="freedom"] .mp-o,
.rc-stack[data-prog-on="legacy"] .mp-f,
.rc-stack[data-prog-on="instant"] .mp-f { display: none; }
/* Clears any animation mid-flight so a card swapped into view replays its
   entrance from the top rather than resuming where it left off. */
.rc-card.rc-replay * { animation: none !important; }
@media (max-width: 560px) {
  .rc-switch { align-self: stretch; }
  .rc-switch-btn { flex: 1 1 0; padding: 14px 10px; font-size: 1rem; }
}
/* Forbidden-practices banner. Also a fixed canvas before; the chip marquee
   now runs at any width and the copy reflows with it. */
/* Red-hued forbidden-practices card, matching the restricted-jurisdictions
   card (same rgba(160, 29, 48, …) family). */
.rc-banner {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: clamp(22px, 2.8vw, 34px) 0 clamp(24px, 3vw, 36px);
  background: linear-gradient(155deg, var(--c-bg-fffafa) 0%, var(--c-bg-fdf1f2) 48%, var(--c-bg-f9e4e7) 100%);
  border: 1px solid var(--c-bg-re1602948024);
  box-shadow: 0 16px 44px var(--c-sh-re160294801);
  text-align: center;
}
/* Soft red wash in the top-right corner */
.rc-banner::after {
  content: '';
  position: absolute;
  right: -140px;
  top: -120px;
  width: 520px;
  height: 420px;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re1602948012), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}
.rc-banner-inner, .rc-banner .rc-marquee { position: relative; z-index: 1; }
.rc-banner-inner { padding: 0 clamp(20px, 3vw, 48px); }

.rc-banner h2 {
  margin: 14px 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 3.6vw, 2.6rem);
  font-weight: 700; letter-spacing: -.6px; color: var(--c-fg-8c1a2c);
  text-wrap: balance;
}
.rc-banner > .rc-banner-inner > p {
  margin: 14px auto 0;
  max-width: 620px;
  font-size: clamp(.95rem, 1.15vw, 1.08rem);
  line-height: 1.7; color: var(--c-fg-5a4048); text-wrap: pretty;
}
/* Marquee pills in the same red family */
.rc-banner .rc-pill {
  border-color: var(--c-bg-re1602948024);
  box-shadow: 0 4px 14px var(--c-sh-re1602948007);
  color: var(--c-fg-7d1a2a);
}
/* Marquee: two identical runs sliding one full run's width */
.rc-marquee {
  margin: clamp(18px, 2.4vw, 26px) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--c-bg-000000) 9%, var(--c-bg-000000) 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--c-bg-000000) 9%, var(--c-bg-000000) 91%, transparent);
}
.rc-marquee-track {
  display: flex; width: max-content; gap: 14px;
  animation: rcMarquee 34s linear infinite;
}
.rc-marquee-run { display: flex; gap: 14px; padding-right: 14px; }
.rc-pill {
  flex-shrink: 0;
  padding: 11px 22px;
  border: 1px solid var(--c-bg-re3668136018);
  border-radius: 999px;
  background: var(--c-bg-ffffff);
  box-shadow: 0 4px 14px var(--c-sh-re3668136006);
  font-size: .92rem; font-weight: 500; color: var(--c-fg-33456b); white-space: nowrap;
}
@keyframes rcMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rc-marquee-track { animation: none; } }

.rc-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: clamp(26px, 4vw, 52px) clamp(20px, 3.4vw, 56px) clamp(28px, 4vw, 50px);
  background: radial-gradient(120% 90% at 12% 4%, var(--c-bg-26529c) 0%, var(--c-bg-1b3d78) 38%, var(--c-bg-14294f) 72%, var(--c-bg-0f1f3d) 100%);
  box-shadow: 0 22px 60px var(--c-sh-re10265803);
  color: var(--c-fg-eef3ff);
}
/* Blueprint grid + warm corner wash, as on the original canvases */
.rc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--c-bg-re120160255005) 1px, transparent 1px),
                    linear-gradient(90deg, var(--c-bg-re120160255005) 1px, transparent 1px);
  background-size: 74px 74px;
  pointer-events: none;
}
.rc-card::after {
  content: '';
  position: absolute;
  right: -90px; top: -80px;
  width: 460px; height: 380px;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re232197106016), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}
.rc-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 18px;
  animation: fpcRise .55s cubic-bezier(.22,.9,.25,1) .05s both;
}
.rc-head svg { flex-shrink: 0; width: clamp(40px, 5vw, 60px); height: auto; }
.rc-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--c-fg-ffffff);
}
/* Text column beside the chart on desktop, stacked under it on phones */
.rc-body {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
  margin-top: clamp(20px, 2.6vw, 34px);
}
.rc-copy { animation: fpcRise .55s cubic-bezier(.22,.9,.25,1) .16s both; }
.rc-copy p {
  margin: 0 0 1em;
  font-size: clamp(0.95rem, 1.15vw, 1.16rem);
  line-height: 1.75;
  color: var(--c-fg-ccd6e8);
  text-wrap: pretty;
}
.rc-copy p:last-child { margin-bottom: 0; }
/* Legend panel under the copy */
.rc-legend {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px);
  border: 1px solid var(--c-bg-re120160255022);
  border-radius: 20px;
  background: var(--c-bg-re102452042);
  display: flex; flex-direction: column; gap: 20px;
  animation: fpcRise .55s cubic-bezier(.22,.9,.25,1) .26s both;
}
.rc-legend-row { display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: start; }
.rc-legend-key { display: flex; justify-content: center; padding-top: 4px; }
.rc-legend h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: .82rem; font-weight: 600; letter-spacing: .8px;
  color: var(--c-fg-e8c56a); text-transform: uppercase;
}
.rc-legend p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--c-fg-b9c4d8); }
/* Chart: fluid, driven by the SVG's own viewBox */
.rc-chart { position: relative; animation: fpcRise .55s cubic-bezier(.22,.9,.25,1) .2s both; }
.rc-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Stat strip along the card foot */
.rc-stats {
  position: relative; z-index: 1;
  margin-top: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  animation: fpcRise .55s cubic-bezier(.22,.9,.25,1) .34s both;
}
.rc-stat {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--c-bg-re120160255022);
  border-radius: 18px;
  background: var(--c-bg-re9224805);
}
.rc-stat-badge {
  flex-shrink: 0;
  width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--c-bg-re232197106055);
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700; color: var(--c-fg-e8c56a);
}
.rc-stat-badge--warn { border-color: var(--c-bg-re255909006); color: var(--c-fg-ff6b6b); }
.rc-stat h4 {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: .8rem; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--c-fg-e8c56a);
}
.rc-stat--warn h4 { color: var(--c-fg-ff6b6b); }
.rc-stat p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--c-fg-b9c4d8); }
/* Tiles used by the day / practice / step cards */
.rc-tiles {
  position: relative; z-index: 1;
  margin-top: clamp(22px, 2.8vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.rc-tile {
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px);
  border: 1px solid var(--c-bg-re120160255024);
  border-radius: 22px;
  background: var(--c-bg-re102452045);
  animation: fpcRise .55s cubic-bezier(.22,.9,.25,1) both;
}
.rc-tile:nth-child(1) { animation-delay: .18s; }
.rc-tile:nth-child(2) { animation-delay: .28s; }
.rc-tile:nth-child(3) { animation-delay: .38s; }
.rc-tile-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.rc-tile-step {
  font-family: var(--font-heading);
  font-size: .78rem; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--c-fg-6f8ab5);
}
.rc-chip {
  padding: 6px 14px;
  border: 1px solid var(--c-bg-re232197106045);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: .72rem; font-weight: 600; letter-spacing: 1px;
  color: var(--c-fg-e8c56a); white-space: nowrap;
}
.rc-chip--blue { border-color: var(--c-bg-re120160255045); color: var(--c-fg-8fb6ff); }
.rc-chip--ok { border-color: var(--c-bg-re150190255055); color: var(--c-fg-eaf1ff); }
.rc-chip--warn { border-color: var(--c-bg-re255909005); color: var(--c-fg-ff6b6b); }
.rc-tile-art { display: flex; justify-content: center; margin-bottom: 16px; }
.rc-tile-art svg { display: block; width: 100%; max-width: 240px; height: auto; }
.rc-tile h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 600; color: var(--c-fg-ffffff);
}
.rc-tile p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--c-fg-bcc7da); }
.rc-tile-figure {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--c-bg-re120160255024);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
/* Direct children only: the amount and the delta each hold a pair of spans
   now, one per program, and a descendant selector picked those up instead,
   handing the delta the amount's size and gold. */
.rc-tile-figure > span:first-child {
  font-size: .76rem; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--c-fg-6f8ab5);
}
.rc-tile-figure > span:nth-child(2) {
  font-family: var(--font-heading);
  /* Freedom's figures and the other two's have the same digit count but not
     the same width in this face: $50,500 runs 3px wider than $50,250, which
     at some viewports was the whole margin between the row fitting and the
     badge wrapping under it, so the tile changed height when you switched
     tabs. Tabular figures where the face has them, and a floor measured in
     the face's own digit width, which tracks the clamp above, so every
     variant is laid out in the same box. */
  font-variant-numeric: tabular-nums;
  min-width: 6.6ch;
  font-size: clamp(1.6rem, 4.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -1px;
  /* the original card's gold, with its slow sheen sweep */
  background: linear-gradient(100deg, var(--c-bg-b8862f) 0%, var(--c-bg-f9ecc0) 22%, var(--c-bg-e8c56a) 42%,
              var(--c-gl-fffbe8) 55%, var(--c-bg-d9ad4e) 72%, var(--c-bg-a9782a) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mpSheen 4.615s ease-in-out infinite;
}
.rc-tile-figure { align-items: flex-end; flex-wrap: wrap; }
.rc-tile-delta {
  display: inline-flex; align-items: center; gap: 5px;
  /* No left margin: the row already has a 10px gap. And a floor on the width,
     because this badge now reads 0.5% on Freedom and 1% on the other two: at
     their natural widths the wider one wrapped to a line of its own at some
     viewports and the narrower one did not, so the tile changed height when
     you switched tabs. Both are laid out in the wider one's box, so the row
     either fits for every program or wraps for every program. */
  min-width: 52px; justify-content: flex-end;
  padding-bottom: 6px;
  font-family: var(--font-heading);
  font-size: .95rem; font-weight: 500; color: var(--c-fg-e8c56a);
  white-space: nowrap;
}
.rc-tile-delta svg { width: 12px; height: 14px; }
/* Trailing Drawdown runs its stat strip down the right-hand column instead of
   along the card foot: the chart leaves that column half empty, and stacking
   the stats beside the legend takes a chunk off the card's height. */
/* Trailing Drawdown lays out as two rows rather than one: copy beside the
   chart, then the legend beside the stats. Sharing a row is what lets the
   stats centre against the legend exactly, whatever height either grows to. */
.rc-body--tall { row-gap: 26px; }
.rc-body--tall > .rc-legend { margin-top: 0; }
.rc-body--tall > .rc-stats--side { align-self: center; }
/* Three across in a column roughly half the card's width, so the badge sits
   over its label rather than beside it. */
.rc-stats--side {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
}
.rc-stats--side .rc-stat { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.rc-stats--side .rc-stat-badge { width: 44px; height: 44px; font-size: .92rem; }

@media (max-width: 900px) {
  .rc-body { grid-template-columns: minmax(0, 1fr); }
  /* chart first on phones: it carries the idea, the copy explains it */
  .rc-chart { order: -1; }
  /* Single column already — the stats go back to the foot of the card */
  .rc-body--tall > .rc-legend { margin-top: 0; }
  .rc-stats--side {
    order: 1;
    margin-top: clamp(24px, 3vw, 40px);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
  .rc-stats--side .rc-stat { flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; }
  .rc-stats--side .rc-stat-badge { width: 54px; height: 54px; font-size: 1rem; }
}

@keyframes fpcRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fpcPop { from { opacity: 0; transform: scale(0.75); } to { opacity: 1; transform: none; } }
@keyframes fpcWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .fpc-card { padding: 28px 24px 30px; }
  .fpc-body { grid-template-columns: 1fr; gap: 20px; }
  .fpc-head { flex-wrap: wrap; gap: 14px; }
}

/* Closing principle: glossy navy gradient panel, like the hiw callout */
.fp-principle {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 36px;
  background:
    linear-gradient(135deg, var(--c-gl-re255255255014) 0%, var(--c-gl-re2552552550) 40%, var(--c-gl-re255255255004) 100%),
    linear-gradient(115deg, var(--c-bg-0d244a) 0%, var(--c-bg-19407a) 55%, var(--c-bg-2f6bb5) 100%);
  border: 1px solid var(--c-bg-re14817822004);
  border-radius: var(--radius-xl);
  box-shadow:
    0 18px 44px var(--c-sh-re133674028),
    inset 0 1px 0 var(--c-sh-re255255255022);
}
.fp-principle h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-fg-ffffff);
  margin: 0 0 18px;
}
.fp-principle p {
  color: var(--c-fg-re255255255092);
  line-height: 1.65;
  font-size: 1.05rem;
  margin: 0 0 14px;
}
.fp-principle p strong { color: var(--c-fg-e3bc45); }
.fp-principle-footnote {
  font-size: 0.85rem !important;
  color: var(--c-fg-re25525525506) !important;
  font-style: italic;
  margin-top: 18px !important;
}
/* ========== SCALING PLAN PAGE ========== */
/* The page is built from the Pathway page's components (.pw-gates, .pw-gate,
   .fpc-stack--pathway, .ac-card), so it inherits their light and dark
   treatment and adds only the one modifier below.

   The ladder runs to seven levels, so the seventh would sit alone in the
   left-hand column. It keeps the same width as the six above it and is centred
   under them instead.

   The grid is pinned to three columns on desktop rather than left on the
   shared auto-fit track: auto-fit gives four columns past ~1250px, and then
   "the middle column" is not the middle of anything. Three columns makes the
   ladder read as two rows of three with the milestone centred beneath.
   At two columns the card spans the row and is sized to one column so it stays
   the same width while centring; at one column it is already centred.
   Doubled class in the selector: this block sits above .pw-gates in the file,
   so at equal specificity the shared auto-fit track would win on source order. */
@media (min-width: 940px) {
  .pw-gates.pw-gates--ladder { grid-template-columns: repeat(3, 1fr); }
  .pw-gates--ladder .pw-gate--centre { grid-column: 2; }
}

/* The three process cards run tighter than the forbidden-practices cards they
   inherit from. The dashed rule between the head and the body goes, and with it
   the 51px it occupied, which lifts the aside and the body text up under the
   title; the card's own padding comes in so the block is not left sitting in a
   pool of empty space. Scoped to this stack: the forbidden-practices and
   forbidden-practices stack keeps its dashed rule, which is part of that page;
   the Pathway stack drops it above, so this stack inherits that.

   The aside is folded into the paragraph here rather than sitting beside it,
   so the body is a single column and the card narrows to a comfortable reading
   measure instead of running the full container width. */
.fpc-stack--tight { max-width: 820px; margin-left: auto; margin-right: auto; }
.fpc-stack--tight .fpc-card { padding: 30px 40px 32px; }
/* One column: this stack has no asides, and the two-column grid it inherits
   from the Pathway cards would otherwise hold an empty right-hand track and
   squeeze the paragraph into 407px of the card's 820. */
.fpc-stack--tight .fpc-card { grid-template-columns: 1fr; }
.fpc-stack--tight .fpc-text { margin-top: 20px; }
@media (max-width: 900px) {
  .fpc-stack--tight .fpc-card { padding: 24px 24px 26px; }
  .fpc-stack--tight .fpc-body { margin-top: 18px; }
}
@media (min-width: 620px) and (max-width: 939px) {
  .pw-gates.pw-gates--ladder { grid-template-columns: repeat(2, 1fr); }
  .pw-gates--ladder .pw-gate--centre {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 20px) / 2);
  }
}

/* ========== CHALLENGE BUILDER ========== */
/* Hero USP marquee: fixed-height strip under the hero content. The hero
   is a centered flex column, so its containers need an explicit width to
   stretch (otherwise the marquee frame collapses to content width). */
.hero > .container { width: 100%; }

/* Bento grid section */
.section.bento { padding: 20px 0 44px; }
/* The homepage container is wider than About's, so the same cards
   fill more width at identical type size. */
.usp-bento--wide .usp-bento-grid { max-width: 1216px; }

/* ========== DARK MODE PALETTE ==========
   Deep navy-blue base with a blue-tinted surface ramp, so cards, borders and
   inputs each sit a step above the page.

   This ramp was already in the stylesheet but had never applied: its selector
   had been swallowed by an unterminated comment, leaving the literal word
   "borders" as the selector. It is wired to the theme attribute here.

   The values are deliberately literal rather than tokens. These properties are
   already the dark side of the mapping, and a token would be inverted a second
   time by the generated block below. ========== */
[data-theme="dark"] {
  --white: #0b1f35;
  --gray-100: #1d3a5c;
  --gray-200: #2b4d73;
  --gray-300: #4a6b91;
  --gray-400: #7e96b5;
  --gray-500: #a6b8ce;
  --gray-600: #c9d5e5;
  --gray-700: #e6edf6;
  --black: #ffffff;
  --card-bg: #102741;
  /* Canvas currency ocean renders white on the dark blue page */
}

/* The floating white nav pill stays white in dark mode (the logo art and
   buttons are designed for it), so its links keep their navy light-mode
   colour for contrast; 

/* Comparison rule table — header strip,
rows { border-bottom-color: var(--c-bg-1d3a5c); }

/* ---------- Dark mode: containers,
icons,
and text accents ---------- */

/* Section cards — subtle dark wash {
  background: linear-gradient(135deg, var(--c-gl-re255255255005), var(--c-gl-re255255255002));
  border-color: transparent;
}

/* Hidden-rules cards: faint white outline by default; 

/* Icon containers (.pnl-rule-icon,
.feature-icon,
.eco-node-icon {
  background:
    linear-gradient(135deg, var(--c-bg-re000018) 0%, var(--c-bg-re0000) 35%, var(--c-bg-re0000) 60%, var(--c-bg-re000008) 100%),
    linear-gradient(180deg, var(--c-bg-f5f5f5) 0%, var(--c-bg-e0e0e0) 35%, var(--c-bg-bfbfbf) 70%, var(--c-bg-a0a0a0) 100%);
  border-color: var(--c-bg-re255255255055);
  color: var(--c-fg-111111);
  box-shadow:
    0 12px 32px var(--c-sh-re000055),
    0 4px 10px var(--c-sh-re000035),
    inset 0 2px 1px var(--c-sh-re255255255085),
    inset 0 -3px 6px var(--c-sh-re000022),
    inset 0 0 0 1px var(--c-sh-re25525525506);
}

/* The navy recolour of black thematic elements is light-mode only. These
   shared elements have no other dark-mode treatment {
  background:
    linear-gradient(135deg, var(--c-gl-re255255255022) 0%, var(--c-gl-re2552552550) 35%, var(--c-gl-re2552552550) 60%, var(--c-gl-re255255255006) 100%),
    linear-gradient(180deg, var(--c-bg-24466e) 0%, var(--c-bg-152f4d) 35%, var(--c-bg-152f4d) 70%, var(--c-bg-061426) 100%);
}

/* Section titles,
descriptions {
  color: var(--c-fg-ffffff);
}

/* Ecosystem graph (dark) — gold arrows + dots,
faint grey cards { stroke: var(--c-fg-daa520); }

/* Platform tiles (dark) — let the body BG show through {
  background: transparent;
}

/* ===== Synthetic-bold flags for Varela Round Bold (or any font with
   .bold === true). Each data-font-*-bold attribute force-bolds the
   primary content selectors for that section. ===== */

/* Display: hero title stack */

/* "Do" tick icons pick up the gold accent in dark mode; 

/* ==================================================================
   HOW IT WORKS PAGE
   ================================================================== */
.hiw-hero {
  padding: 172px 0 32px;
  text-align: center;
  /* Transparent so the fixed currency ocean shows through, like the
     homepage hero. */
  background: transparent;
}
/* Hero content fades up on load, in step with the homepage hero. */
.hiw-hero .container {
  animation: hiwHeroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hiwHeroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hiw-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  margin: 14px 0 18px;
}
.hiw-hero-subtitle {
  max-width: 620px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--gray-400);
}
.hiw-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

/* Quiet track so the selected tab reads as the glass CTA sitting in it */
.hiw-toggle {
  display: inline-flex;
  background: var(--c-bg-re255255255034);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--c-bg-re2564122012);
  border-radius: 999px;
  padding: 5px;
  gap: 4px;
  box-shadow: inset 0 1px 0 var(--c-sh-re25525525506);
}
.hiw-toggle-btn {
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--c-fg-re2564122062);
  padding: 11px 24px;
  border-radius: 999px;
  transition: var(--transition);
  white-space: nowrap;
}
.hiw-toggle-btn:hover { color: var(--c-fg-19407a); }
/* Selected tab is the homepage hero CTA recipe verbatim (body .glass-button) so the two match. */ .hiw-toggle-btn.active {
  background:
    linear-gradient(135deg, var(--c-bg-re25525525507) 0%, var(--c-bg-re255255255018) 45%, var(--c-bg-re25525525504) 100%),
    linear-gradient(180deg, var(--c-bg-re22023525505) 0%, var(--c-bg-re190215245035) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--c-bg-re2564122028);
  color: var(--c-fg-19407a);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 var(--c-sh-re255255255085),
    inset 0 -2px 6px var(--c-sh-re2564122012),
    0 6px 18px var(--c-sh-re2564122016);
}

/* ---- Step blocks ---- */
/* Top padding applies only to each flow's first step (the second is
   zeroed below), so this is the gap under the program selector. */
.hiw-step { padding: 20px 0 72px; }
.hiw-step + .hiw-step { padding-top: 0; }
.hiw-step-head {
  text-align: center;
  margin-bottom: 40px;
}
/* Step number: metallic sheen numeral over a soft halo, with a glossy
   check medallion ringed by the page colour so it reads punched-in. */

.hiw-step-title {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 800;
}

/* ---- Comparison link ---- */
.hiw-compare {
  padding: 40px 0 90px;
  text-align: center;
}
.hiw-compare .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gray-500);
  font-size: 1rem;
}
.hiw-compare svg { width: 22px; height: 22px; color: var(--c-fg-19407a); }
.hiw-compare a { color: var(--c-fg-19407a); font-weight: 700; text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .hiw-toggle-wrap { flex-direction: column; gap: 10px; }
  
  
  
  
  
}
/* The nowrap segmented control is ~370px wide at full size; shrink it in
   two steps so it clears the 24px gutters down to 320px viewports. */
@media (max-width: 430px) {
  .hiw-toggle-btn { padding: 11px 14px; font-size: 0.85rem; }
}
@media (max-width: 350px) {
  .hiw-toggle-btn { padding: 11px 9px; font-size: 0.78rem; }
}

/* Worked example box */

/* ==================================================================
   FREEDOM CHALLENGE PAGE
   ================================================================== */
.fc-hero {
  padding: 148px 0 70px;
  background: linear-gradient(180deg, var(--c-bg-f6f9fe) 0%, var(--white) 100%);
  overflow: hidden;
}
.fc-hero .container {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: 30px;
  align-items: stretch;
  max-width: 1008px;
}

.fc-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  font-weight: 900;
  line-height: 1.04;
  margin-bottom: 26px;
}
.fc-hero-sub {
  font-size: 1.16rem;
  line-height: 1.62;
  color: var(--gray-400);
  max-width: 480px;
  margin-bottom: 38px;
}
.fc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }

/* Trader's Path */
.fc-path { padding: 44px 0 84px; }
.fc-path-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 44px;
}

.fc-path-foot {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 34px;
}
/* Label only — must not reach inside the glass button's own spans. */
.fc-path-foot > span:not(.glass-button-wrap) { color: var(--gray-500); font-size: 1rem; }

/* Objectives stat grid */
.fc-objectives { padding: 30px 0 90px; }

@media (max-width: 860px) {
  .fc-hero .container { grid-template-columns: 1fr; }
  
  
  
  
  
  
  
  
}

/* ==================================================================
   NAVBAR ACTIVE PAGE — metallic gold in every navbar state (white pill,
dark pill,
and the homepage's flat-over-navy state). Pages not listed
   in the navbar simply have no .active link,
so nothing highlights.
   ================================================================== */
.nav-pages a.active {
  background: linear-gradient(135deg, var(--c-bg-806000) 0%, var(--c-bg-b8860b) 30%, var(--c-bg-daa520) 45%, var(--c-bg-e3bc45) 55%, var(--c-bg-daa520) 65%, var(--c-bg-b8860b) 80%, var(--c-bg-806000) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==================================================================
   GLASS BUTTON — vanilla-CSS port of the GlassButton React component.
   Use the same DOM the component renders:
     <span class="glass-button-wrap">
       <button class="glass-button glass-button--default">
         <span class="glass-button-text glass-button-text--default">Label</span>
       </button>
       <span class="glass-button-shadow"></span>
     </span>
   Size modifiers: --default | --sm | --lg | --icon on both .glass-button
   and .glass-button-text (mirrors the cva `size` variants).
   ================================================================== */
.glass-button-wrap {
  position: relative;
  display: inline-block;
  border-radius: 999px;
  cursor: pointer;
  isolation: isolate;
}
.glass-button {
  position: relative;
  display: inline-block;
  isolation: isolate;
  z-index: 1;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  font-family: var(--font-heading);
  color: var(--c-fg-ffffff);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
  /* Frosted glass: translucent fill + blur + glossy rim */
  background:
    linear-gradient(135deg, var(--c-bg-re255255255028) 0%, var(--c-bg-re255255255004) 45%, var(--c-bg-re25525525501) 100%),
    linear-gradient(180deg, var(--c-bg-re2564122055) 0%, var(--c-bg-re123471045) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--c-bg-re255255255028);
  box-shadow:
    inset 0 1px 0 var(--c-sh-re25525525505),
    inset 0 -2px 6px var(--c-sh-re000022),
    0 6px 18px var(--c-sh-re102858032);
}
.glass-button-text {
  position: relative;
  display: block;
  z-index: 2;
  user-select: none;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-shadow: 0 1px 2px var(--c-sh-re000028);
}
/* Top-edge specular highlight */
.glass-button::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, var(--c-gl-re255255255045), var(--c-gl-re2552552550));
  pointer-events: none;
  z-index: 1;
}
.glass-button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 var(--c-sh-re25525525506),
    inset 0 -2px 6px var(--c-sh-re000024),
    0 12px 28px var(--c-sh-re10285804);
}
.glass-button:active { transform: translateY(0); }
.glass-button:focus-visible {
  outline: 2px solid var(--c-bg-re12518024009);
  outline-offset: 2px;
}
/* Soft drop shadow layer (mirrors .glass-button-shadow) */
.glass-button-shadow {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 82%;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, var(--c-bg-re102858035), var(--c-bg-re1028580) 70%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

/* ---- size variants ---- */
.glass-button--default { font-size: 1rem; font-weight: 500; }

.glass-button--lg      { font-size: 1.125rem; font-weight: 500; }

.glass-button-text--default { padding: 0.875rem 1.5rem; }

.glass-button-text--lg      { padding: 1rem 2rem; }

/* ---- light theme: brighter glass,
navy label ---- */ body .glass-button {
  background:
    linear-gradient(135deg, var(--c-bg-re25525525507) 0%, var(--c-bg-re255255255018) 45%, var(--c-bg-re25525525504) 100%),
    linear-gradient(180deg, var(--c-bg-re22023525505) 0%, var(--c-bg-re190215245035) 100%);
  border-color: var(--c-bg-re2564122028);
  color: var(--c-fg-19407a);
  box-shadow:
    inset 0 1px 0 var(--c-sh-re255255255085),
    inset 0 -2px 6px var(--c-sh-re2564122012),
    0 6px 18px var(--c-sh-re2564122016);
}
body .glass-button-text { text-shadow: none; }

/* Icy frosted glass with a slight red tint + red label. Keeps the .glass-button
   blur and top-highlight, just recoloured toward the red card family. */
.glass-button--red-ice,
body .glass-button.glass-button--red-ice {
  background:
    linear-gradient(135deg, var(--c-bg-re255255255072) 0%, var(--c-bg-re25525525502) 45%, var(--c-bg-re255255255042) 100%),
    linear-gradient(180deg, var(--c-bg-re25323523806) 0%, var(--c-bg-re24722022504) 100%);
  border-color: var(--c-bg-re1602948032);
  color: var(--c-fg-8c1a2c);
  box-shadow:
    inset 0 1px 0 var(--c-sh-re255255255085),
    inset 0 -2px 6px var(--c-sh-re1602948012),
    0 6px 18px var(--c-sh-re1602948016);
}
body .glass-button--red-ice .glass-button-text { color: var(--c-fg-8c1a2c); text-shadow: none; }
.glass-button--red-ice:hover {
  border-color: var(--c-bg-re160294805);
  box-shadow:
    inset 0 1px 0 var(--c-sh-re25525525509),
    inset 0 -2px 6px var(--c-sh-re1602948014),
    0 12px 26px var(--c-sh-re1602948024);
}

/* Gold metal variant — polished-gold surface with a navy label. The vertical
   ramp re-brightens near the base so the face reads as fine metal rather than
   a flat fill; the ::before specular highlight (shared) sits on top of it for
   the glossed top edge. */
.glass-button--gold,
body .glass-button.glass-button--gold {
  overflow: hidden;
  color: var(--c-fg-0c2247);
  border-color: var(--c-bg-re1409620065);
  background:
    linear-gradient(180deg, var(--c-gl-re255255255062) 0%, var(--c-gl-re2552552550) 46%),
    linear-gradient(180deg, var(--c-bg-f9edbf) 0%, var(--c-bg-eacd6f) 30%, var(--c-bg-dbb24a) 50%, var(--c-bg-e6c25c) 62%, var(--c-bg-b07f28) 100%);
  box-shadow:
    inset 0 1px 0 var(--c-sh-re25525525509),
    inset 0 -2px 6px var(--c-sh-re120801004),
    0 8px 22px var(--c-sh-re15011020038);
}
body .glass-button--gold .glass-button-text {
  color: var(--c-fg-000000);
  text-shadow: 0 1px 0 var(--c-sh-re255255255035);
}
.glass-button--gold:hover {
  box-shadow:
    inset 0 1px 0 var(--c-sh-re255255255095),
    inset 0 -2px 6px var(--c-sh-re1208010042),
    0 14px 30px var(--c-sh-re15011020048);
}

/* ==================================================================
   Sitewide glass buttons — the legacy button classes (.btn-*,
.nav-*,
.hiw-btn-*,
footer subscribe) adopt the frosted-glass treatment so
   every CTA matches the .glass-button component.
   ================================================================== */

/* Secondary buttons: bright frosted glass with navy label */
.btn-outline,
.btn-white,
.nav-signin,
.hiw-btn--ghost {
  border-radius: 999px;
  background:
    linear-gradient(135deg, var(--c-bg-re25525525507) 0%, var(--c-bg-re255255255018) 45%, var(--c-bg-re25525525504) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--c-bg-re25525525505);
  color: var(--c-fg-19407a);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 var(--c-sh-re255255255085),
    inset 0 -2px 6px var(--c-sh-re2564122012),
    0 6px 18px var(--c-sh-re2564122016);
}
.btn-outline:hover,
.btn-white:hover,
.nav-signin:hover,
.hiw-btn--ghost:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, var(--c-bg-re25525525508) 0%, var(--c-bg-re255255255028) 45%, var(--c-bg-re25525525505) 100%);
  border-color: var(--c-bg-re25525525507);
  color: var(--c-fg-19407a);
  box-shadow:
    inset 0 1px 0 var(--c-sh-re25525525509),
    inset 0 -2px 6px var(--c-sh-re2564122014),
    0 12px 26px var(--c-sh-re2564122024);
}

/* Sign In gets the icy blue glass of the hero button: the shared frosted
   rule above is white only, so add the blue-tinted layer and a navy rim. */
.nav-signin {
  background:
    linear-gradient(135deg, var(--c-bg-re25525525507) 0%, var(--c-bg-re255255255018) 45%, var(--c-bg-re25525525504) 100%),
    linear-gradient(180deg, var(--c-bg-re22023525505) 0%, var(--c-bg-re190215245035) 100%);
  border-color: var(--c-bg-re2564122028);
}
.nav-signin:hover {
  background:
    linear-gradient(135deg, var(--c-bg-re25525525508) 0%, var(--c-bg-re255255255024) 45%, var(--c-bg-re255255255048) 100%),
    linear-gradient(180deg, var(--c-bg-re220235255062) 0%, var(--c-bg-re190215245045) 100%);
  border-color: var(--c-bg-re2564122042);
}

/* Freedom Challenge trader's-path card (iframe-embedded navy cards) */
.fc-path-embed { --path-scale: 0.78; }
@media (max-width: 900px) { .fc-path-embed { --path-scale: 0.56; } }
@media (max-width: 620px) { .fc-path-embed { --path-scale: 0.38; } }

/* Freedom Challenge hero: single centred stack — globe, title, subtitle,
   buttons, rating, chips. Overrides the original two-column grid. */
.fc-hero--stacked .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 860px;
  gap: 0;
}
.fc-hero-globe {
  --globe-scale: 0.34;
  width: calc(1536px * var(--globe-scale));
  height: calc(1024px * var(--globe-scale));
  overflow: hidden;
  margin-top: -10px;
  margin-bottom: -8px;
  transform: translateX(54px);
  pointer-events: none;
}
.fc-hero--stacked .fc-hero-title { margin-bottom: 30px; }
.fc-hero--stacked .fc-hero-sub { margin: 0 auto 28px; max-width: 620px; }
.fc-hero--stacked .fc-hero-actions { justify-content: center; margin-bottom: 40px; }

@media (max-width: 760px) {
  .fc-hero-globe {
    --globe-scale: 0.23;
    margin-top: -10px;
    margin-bottom: 0;
    transform: translateX(36px);
  }
}

/* Instant hero emblem — occupies the same top-centre slot as the
   Freedom hero's globe, with the same float. */

/* ==================================================================
   Magic Bento — vanilla port (see js/magic-bento.js).
   Palette follows the site's navy card system rather than the
   component's stock purple.
   ================================================================== */
.bento-section {
  position: relative;
  user-select: none;
}
.magic-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  /* Semantic <ul> of objectives — strip list chrome, keep the grid. */
  list-style: none;
  margin: 0;
  padding: 0;
}
.magic-bento-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 300px;
  --glow-color: 125, 180, 240;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  min-height: 190px;
  padding: 26px 28px;
  border-radius: 20px;
  border: 1px solid var(--c-bg-re140175235028);
  background: linear-gradient(115deg, var(--c-bg-14294f) 0%, var(--c-bg-1a3364) 42%, var(--c-bg-2b52a0) 100%);
  box-shadow: 0 18px 44px var(--c-sh-re204179026), inset 0 1px 0 var(--c-sh-re255255255014);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.3s ease;
}
.magic-bento-card:hover {
  box-shadow: 0 24px 56px var(--c-sh-re204179038), inset 0 1px 0 var(--c-sh-re25525525502);
}
.magic-bento-card__label {
  margin: 0;
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-fg-8fb0dc);
}
.magic-bento-card__content { position: relative; z-index: 2; }
.magic-bento-card__value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-fg-ffffff);
}
.magic-bento-card__value--gold {
  background: linear-gradient(100deg, var(--c-bg-b8862f) 0%, var(--c-bg-f9ecc0) 22%, var(--c-bg-e8c56a) 42%, var(--c-gl-fffbe8) 55%, var(--c-bg-d9ad4e) 72%, var(--c-bg-a9782a) 100%);
  background-size: 260% 100%;
  animation: bentoGoldSheen 4.6s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Long values ("Up to $10,000 Monthly") used to be nowrapped at a fixed size,
   which clipped them at most widths: these grids change column count at several
   breakpoints, so one viewport gives wildly different card widths and no
   viewport-based size can fit them all. Sizing is now against the card itself
   (cqi), with wrapping allowed so a long string can never be cut off. */
.magic-bento-card { container-type: inline-size; }
/* Containment zeroes the cards' intrinsic width, so any shrink-to-fit parent
   (the why-pnl section centres its children in a flex column) would collapse
   the whole grid to padding-width strips. Claim the row explicitly. */
.magic-bento-grid { width: 100%; }
.magic-bento-card__value--currency {
  font-size: min(2.2rem, 8.2cqi);
  white-space: normal;
  text-wrap: balance;
}
/* Two figures rather than one; keep each whole so a wrap lands at the comma. */
.magic-bento-card__value--pair { font-size: min(2.1rem, 9cqi); line-height: 1.12; }
.magic-bento-card__value--pair span { display: inline-block; white-space: nowrap; }
.magic-bento-card__description {
  margin: 10px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--c-fg-re255255255072);
}

/* Border glow that tracks the cursor across the whole grid */
.magic-bento-card--border-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 5px;
  border-radius: inherit;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.8)) 0%,
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.4)) 30%,
    transparent 60%
  );
  -webkit-mask: linear-gradient(var(--c-bg-ffffff) 0 0) content-box, linear-gradient(var(--c-bg-ffffff) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--c-bg-ffffff) 0 0) content-box, linear-gradient(var(--c-bg-ffffff) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.magic-bento-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
.magic-bento-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
}
.magic-bento-spotlight {
  position: fixed;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  /* Light cards throughout, so darken rather than lighten. */
  mix-blend-mode: multiply;
  will-change: transform, opacity;
  transition: opacity 0.25s ease, left 0.1s linear, top 0.1s linear;
  z-index: 200;
}

/* ---- Icy white variant ------------------------------------------------
   The homepage runs light, so the navy cards read as a hole in the page.
   This restates the surface in the same language as the USP bento above
   it: white-to-ice gradient, navy type, gold labels. The golds change ramp
   rather than just colour -- the navy card's gold runs through #fffbe8 and
   #fffbe8 is invisible on a light surface. */
.magic-bento-grid--icy .magic-bento-card {
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  border: 1px solid var(--c-bg-re3668136016);
  box-shadow: 0 16.2px 39.6px var(--c-sh-re366813601), inset 0 1px 0 var(--c-sh-re25525525509);
  /* Stack from the top rather than spreading. With space-between, a card whose
     description ran shorter than its row-mates pushed its value down to fill
     the height, so the big figures no longer lined up across a row. Anchored
     to the top, every label and value sits at the same height and any spare
     height falls to the card foot. */
  justify-content: flex-start;
}
.magic-bento-grid--icy .magic-bento-card:hover {
  border-color: var(--c-bg-re140175235055);
  box-shadow: 0 21.6px 50.4px var(--c-sh-re3668136016), 0 0 27px var(--c-sh-re12518024002),
              inset 0 1px 0 var(--c-sh-re25525525509);
}
.magic-bento-grid--icy .magic-bento-card__label {
  background: linear-gradient(105deg, var(--c-bg-8f6c12) 0%, var(--c-bg-b8901f) 34%, var(--c-bg-d8b246) 52%, var(--c-bg-a8861d) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.magic-bento-grid--icy .magic-bento-card__value { color: var(--c-fg-14294f); }
/* One value size across every homepage card, matching the two-figure Loss
   Principles card. Scoped to the icy grid so the navy program bentos keep
   their larger 2.6rem values. */
/* Values keep one size across the grid so cards read as a set; 13cqi only bites
   on the narrowest cards, where the alternative is a clipped figure. */
.magic-bento-grid--icy .magic-bento-card__value { font-size: min(2.1rem, 13cqi); line-height: 1.15; }
/* background-image, not the shorthand: the shorthand resets background-clip
   back to border-box and the gold renders as a solid bar. */
.magic-bento-grid--icy .magic-bento-card__value--gold {
  background-image: linear-gradient(105deg, var(--c-bg-8f6c12) 0%, var(--c-bg-b8901f) 30%, var(--c-bg-e8c56a) 50%, var(--c-bg-a8861d) 72%, var(--c-bg-8f6c12) 100%);
  -webkit-text-fill-color: transparent;
}
.magic-bento-grid--icy .magic-bento-card__description { color: var(--c-fg-46587a); }

@media (max-width: 900px) {
  .magic-bento-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .magic-bento-grid { grid-template-columns: 1fr; gap: 14px; }
  .magic-bento-card { min-height: 150px; padding: 22px; }
  .magic-bento-card__value { font-size: 2.1rem; }
}

/* Instant hero vault — same top-centre slot as the Freedom globe */
.fc-hero-vault {
  /* Portrait artwork: scales chosen so the rendered height matches the old
     landscape stage, keeping the hero's vertical rhythm unchanged. */
  --vault-scale: 0.351;
  width: calc(639px * var(--vault-scale));
  height: calc(1003px * var(--vault-scale));
  overflow: hidden;
  margin-top: -34px;
  /* Positive bottom margin pushes the text stack down while the image
     itself stays put (its position is set by hero padding + margin-top). */
  margin-bottom: 18px;
  pointer-events: none;
}
@media (max-width: 760px) { .fc-hero-vault { --vault-scale: 0.239; margin-top: -22px; margin-bottom: 10px; } }

/* Rules hero book — same top-centre slot again. The artwork is landscape, so
   the scale matches the Freedom globe on width (521px) rather than height,
   and the shortfall is made up with bottom margin to keep the same rhythm. */

/* Freedom and Instant carry a marquee strip below the buttons; Rules ends on
   the buttons, so their bottom margin and the hero's padding stack into dead
   space above the cards. */
.fc-hero--tight { padding-bottom: 34px; }
.fc-hero--tight .fc-hero-actions { margin-bottom: 0; }

/* Challenge builder sections: tighten the gap under the header so the
   builder sits close to it (the global .section-header gap is wider). */
#challenges .section-header,
#fc-pricing .section-header {
  margin-bottom: 16px;
}

@keyframes bentoGoldSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .magic-bento-card__value--gold { animation: none; }
}

/* ==================================================================
   ABOUT PAGE
   Five stacked cards, all native DOM. These were iframed React bundles
   until they were unpacked; the card markup keeps its inline styles
   (pre-scaled by the 0.9 the frames used to apply) and only the shared
   pieces live here.
   ================================================================== */
.about-section { padding: 10px 0 80px; }  /* top spacing now comes from .ab-hero */
.about-stack { display: flex; flex-direction: column; gap: 10px; }
.ab-card { width: 100%; }

/* Card entrance and ambient motion, lifted from the unpacked components */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

/* ---- USP bento ----------------------------------------------------
   Namespaced away from .magic-bento-* / .bento-section, which the
   program pages' objectives grids already own. */
.usp-bento {
  --white: hsl(0, 0%, 100%);
  --card-bg: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  --border-color: var(--c-bg-re3668136016);
  --icy-glow: var(--c-bg-re12518024002);
  --icy-border: var(--c-bg-re140175235055);
  --text-muted: var(--c-bg-46587a);
  --text-strong: var(--c-bg-14294f);
  --label-gold: linear-gradient(105deg, var(--c-bg-8f6c12) 0%, var(--c-bg-b8901f) 34%, var(--c-bg-d8b246) 52%, var(--c-bg-a8861d) 100%);
  --title-gold: linear-gradient(105deg, var(--c-bg-8f6c12) 0%, var(--c-bg-b8901f) 30%, var(--c-bg-e8c56a) 50%, var(--c-bg-a8861d) 72%, var(--c-bg-8f6c12) 100%);
  --card-shadow: 0 16.2px 39.6px var(--c-bg-re366813601), inset 0 1px 0 var(--c-bg-re25525525509);
  --card-shadow-hover: 0 21.6px 50.4px var(--c-bg-re3668136016), inset 0 1px 0 var(--c-bg-re25525525509);
  --spot-color: 58, 104, 183;
}
.usp-bento { position: relative; display: flex; justify-content: center; padding: 3.6px 0 7.2px; }
.usp-bento-grid { display: grid; gap: 16.2px; padding: 0; max-width: 1144.8px; width: 100%; box-sizing: border-box; grid-auto-rows: 202.5px; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); position: relative; }
.usp-card {
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; width: 100%; height: 100%; box-sizing: border-box;
  padding: 1.25em; border-radius: 18px; border: 1px solid var(--border-color);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  font-weight: 300; overflow: hidden;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease; transform-style: preserve-3d;
  --glow-x: 50%; --glow-y: 50%; --glow-intensity: 0; --glow-radius: 306px;
  --glow-color: 125, 180, 240;
}
.usp-card:hover { transform: translateY(-1.8px); box-shadow: var(--card-shadow-hover); }
.usp-card__header, .usp-card__content { display: flex; position: relative; z-index: 2; color: var(--text-strong); }
.usp-card__header { gap: 0.75em; justify-content: space-between; }
/* The four small cards centre their label and sit it a little closer to the
   top edge; the two large cards (3 and 4) keep theirs left-aligned. */
.usp-card:nth-child(1) .usp-card__header,
.usp-card:nth-child(2) .usp-card__header,
.usp-card:nth-child(5) .usp-card__header,
.usp-card:nth-child(6) .usp-card__header {
  justify-content: center;
  margin-top: -0.3em;
}
.usp-card__content { flex-direction: column; }
.usp-card__content { margin-bottom: -0.55em; }
.usp-card:nth-child(3) .usp-card__content, .usp-card:nth-child(4) .usp-card__content { margin-bottom: 0; }
.usp-card__description { margin: 0; }
.usp-card:nth-child(3) .usp-card__description, .usp-card:nth-child(4) .usp-card__description { margin: 1em 0; }
.usp-card__label { font-size: 12.6px; font-weight: 700; letter-spacing: 1.62px; text-transform: uppercase;
  background: var(--label-gold);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.usp-card__title, .usp-card__description { --clamp-title: 1; --clamp-desc: 2; }
.usp-card__title { font-weight: 600; font-size: 14.4px; margin: 0 0 0.25em; color: var(--text-strong); }
.usp-card__title--gold {
  background: var(--title-gold); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: uspGoldSheen 4.6s ease-in-out infinite;
}
@keyframes uspGoldSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.usp-card__description { font-size: 13.05px; line-height: 1.45; color: var(--text-muted); }
.usp-card--text-autohide .usp-card__title, .usp-card--text-autohide .usp-card__description {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.usp-card--text-autohide .usp-card__title { -webkit-line-clamp: var(--clamp-title); line-clamp: var(--clamp-title); }
.usp-card--text-autohide .usp-card__description { -webkit-line-clamp: var(--clamp-desc); line-clamp: var(--clamp-desc); }
/* Desktop only. The two large cards kept their label left while the four
   small ones centred, which read as an inconsistency across the grid, and
   there is room at this width to set the labels a little larger: the widest
   measures 216px in a 292px card, so they still hold one line in every
   language. Below the bento breakpoint the cards restack and the original
   sizing stands. */
@media (min-width: 900px) {
  .usp-card .usp-card__header { justify-content: center; margin-top: -0.3em; }
  .usp-card__label { font-size: 13.6px; }
}

.usp-bento-grid { grid-template-columns: repeat(4, 1fr); }
.usp-card:nth-child(3) { grid-column: span 2; grid-row: span 2; }
.usp-card:nth-child(4) { grid-column: 1 / span 2; grid-row: 2 / span 2; }
.usp-card:nth-child(6) { grid-column: 4; grid-row: 3; }
.usp-card--border-glow::after {
  content: ''; position: absolute; inset: 0; padding: 1px;
  background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.8)) 0%,
    rgba(var(--glow-color), calc(var(--glow-intensity) * 0.4)) 30%,
    transparent 60%);
  border-radius: inherit;
  -webkit-mask: linear-gradient(var(--c-bg-ffffff) 0 0) content-box, linear-gradient(var(--c-bg-ffffff) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--c-bg-ffffff) 0 0) content-box, linear-gradient(var(--c-bg-ffffff) 0 0);
  mask-composite: exclude;
  pointer-events: none; opacity: 1; transition: opacity 0.3s ease; z-index: 1;
}
.usp-card--border-glow:hover { border-color: var(--icy-border); box-shadow: var(--card-shadow-hover), 0 0 27px var(--icy-glow); }
.usp-particle-host { position: relative; overflow: hidden; }
.usp-particle-host:hover { box-shadow: var(--card-shadow-hover), 0 0 27px var(--icy-glow); }
.usp-card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(576px circle at var(--glow-x) var(--glow-y), rgba(var(--spot-color), calc(var(--spot-intensity, 0) * 0.16)) 0%, rgba(var(--spot-color), calc(var(--spot-intensity, 0) * 0.07)) 30%, transparent 70%);
  transition: opacity 0.3s ease; }
.usp-platform-label { color: var(--text-strong); }
@media (prefers-reduced-motion: reduce) { .usp-card__title--gold { animation: none; } }

/* Parent-theme sync (cb-embed.js posts { __cbMode }). The card art is
   transparent webp,
so only the surfaces {
  --card-bg: linear-gradient(155deg, var(--c-bg-17365d) 0%, var(--c-bg-132d50) 45%, var(--c-bg-102743) 100%);
  --border-color: var(--c-bg-re15019024002);
  --icy-border: var(--c-bg-re14017523507);
  --icy-glow: var(--c-bg-re125180240028);
  --text-strong: var(--c-bg-eaf1fa);
  --text-muted: var(--c-bg-a6b8ce);
  --spot-color: 125, 180, 240;
}

/* The 100% and 2x artwork is navy chrome, so it all but vanishes on a dark
   card. Lift it and ring it with a faint halo; the gold {
  filter: brightness(1.7) drop-shadow(0 0 2.7px var(--c-sh-re19022025507));
}

/* ---- Build Your Challenge CTA ---- */
@keyframes acRise { from { opacity: 0; transform: translateY(14.4px); } to { opacity: 1; transform: none; } }
@keyframes acFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes acSheen { 0% { transform: translateX(-130%); } 100% { transform: translateX(260%); } }

.ac-card {
  position: relative; width: 100%; min-height: 306px; overflow: hidden;
  border-radius: 28.8px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 52px 126px 30px;
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  border: 1px solid var(--c-bg-re3668136014);
  box-shadow: 0 21.6px 54px var(--c-sh-re366813601);
}
/* Two soft washes and a faint grid, all masked back to the middle */
.ac-glow-blue { position: absolute; right: -108px; top: -135px; width: 468px; height: 468px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re12017524003), var(--c-gl-re2552552550) 70%);
  animation: acFloat 9s ease-in-out infinite; }
.ac-glow-soft { position: absolute; left: -81px; bottom: -153px; width: 414px; height: 414px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re160200245028), var(--c-gl-re2552552550) 70%); }
.ac-grid { position: absolute; inset: 0;
  background-image: linear-gradient(var(--c-bg-re3668136005) 1px, transparent 1px),
                    linear-gradient(90deg, var(--c-bg-re3668136005) 1px, transparent 1px);
  background-size: 64.8px 64.8px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, var(--c-bg-000000) 30%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 40%, var(--c-bg-000000) 30%, transparent 100%); }

.ac-title { position: relative; margin: 0; font-size: 50.4px; line-height: 1.1; font-weight: 700;
  color: var(--c-fg-1d2e5f); letter-spacing: -1.2px; text-align: center; white-space: nowrap;
  animation: acRise .7s cubic-bezier(.22, .9, .25, 1) .14s both; }
.ac-title span { background: none;
  -webkit-text-fill-color: var(--c-fg-1d2e5f); color: var(--c-fg-1d2e5f); }
.ac-sub { position: relative; margin: 14.4px 0 0; max-width: 684px; font-size: 18px; line-height: 1.65;
  color: var(--c-fg-46587a); text-align: center; text-wrap: pretty;
  animation: acRise .7s cubic-bezier(.22, .9, .25, 1) .24s both; }

.ac-actions { position: relative; margin-top: 23.4px; display: flex; flex-direction: column; align-items: center; gap: 12.6px;
  animation: acRise .7s cubic-bezier(.22, .9, .25, 1) .34s both; }
/* Gold face + black label, matching the other primary CTAs */
.ac-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12.6px;
  padding: 18px 36px; border: 1px solid var(--c-bg-re1409620065); border-radius: 899.1px;
  background:
    linear-gradient(180deg, var(--c-gl-re255255255062) 0%, var(--c-gl-re2552552550) 46%),
    linear-gradient(180deg, var(--c-bg-f9edbf) 0%, var(--c-bg-eacd6f) 30%, var(--c-bg-dbb24a) 50%, var(--c-bg-e6c25c) 62%, var(--c-bg-b07f28) 100%);
  box-shadow: 0 12.6px 27px var(--c-sh-re15011020034), inset 0 1px 0 var(--c-sh-re25525525509), inset 0 -2px 6px var(--c-sh-re120801004);
  font-size: 18px; font-weight: 700; color: var(--c-fg-000000); text-shadow: 0 1px 0 var(--c-sh-re255255255035); text-decoration: none; white-space: nowrap;
  transition: transform .25s cubic-bezier(.22, .9, .25, 1), box-shadow .25s ease, border-color .25s ease; }
.ac-btn:hover { transform: translateY(-1.8px); color: var(--c-fg-000000); border-color: var(--c-bg-re120801008);
  box-shadow: 0 18px 36px var(--c-sh-re15011020044), inset 0 1px 0 var(--c-sh-re255255255095), inset 0 -2px 6px var(--c-sh-re1208010042); }
.ac-btn-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  background: linear-gradient(100deg, var(--c-gl-re2552552550), var(--c-gl-re255255255034), var(--c-gl-re2552552550));
  animation: acSheen 4.5s ease-in-out 1.4s infinite; }
.ac-note { font-size: 14.4px; color: var(--c-fg-56688a); }

/* The nowrap 50.4px title needs roughly 930px of card to sit on one line.
   Narrower than that it was running under the card's overflow:hidden and
   losing a word off each end, so let it wrap and scale below 1080px. */
@media (max-width: 1080px) {
  .ac-card { padding: 40px; }
  .ac-title { white-space: normal; font-size: clamp(30px, 4.4vw, 50.4px); }
  .ac-sub { font-size: clamp(15.5px, 1.7vw, 18px); }
}
@media (max-width: 560px) {
  .ac-card { padding: 32px 22px; border-radius: 22px; }
  .ac-title { letter-spacing: -.6px; }
  .ac-btn { padding: 15px 26px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-glow-blue, .ac-btn-sheen { animation: none; }
  .ac-title, .ac-sub, .ac-actions { animation-duration: .01ms; }
}

/* ==================================================================
   CHALLENGE BUILDER
   The card keeps the original component's inline styles; only these rules
   sit on top. Tooltips were driven by React state and are now hover and
   focus, so they are keyboard-reachable, and :has() means the template
   itself needed no extra hooks.
   ================================================================== */
[data-challenge-builder] { display: flex; justify-content: center; padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
[data-challenge-builder] .cb-tip { opacity: 0; visibility: hidden; transition: opacity .16s ease; }
[data-challenge-builder] *:has(> .cb-tip) { cursor: help; }
/* Pointer devices: hover and keyboard focus. Gated to hover-capable devices
   so touch does not inherit sticky-hover, which can be shown by a tap but not
   cleared by tapping the same marker again. */
@media (hover: hover) {
  [data-challenge-builder] *:has(> .cb-tip):hover > .cb-tip,
  [data-challenge-builder] *:has(> .cb-tip):focus-within > .cb-tip { opacity: 1; visibility: visible; }
}
/* Touch: js/challenge-builder.js toggles this class on tap — a second tap on
   the marker, or a tap elsewhere, removes it. */
[data-challenge-builder] .cb-tip-open > .cb-tip { opacity: 1; visibility: visible; }
[data-challenge-builder] [data-pick-type]:hover,
[data-challenge-builder] [data-pick-size]:hover,
[data-challenge-builder] [data-pick-phase]:hover { transform: translateY(-1px); }
@media (max-width: 760px) { [data-challenge-builder] { padding: 0 10px; } }

/* ==================================================================
   EARNINGS CALCULATOR
   Keeps the original component's inline styles; these are the keyframes
   and the range-input chrome the bundle shipped in its own stylesheet.
   ================================================================== */
[data-earnings-calculator] { display: block; }
/* After the first paint the component re-renders on every slider tick;
   replaying the entrance and draw-on animations there would leave the
   chart stuck part-drawn. */
[data-earnings-calculator][data-settled] * { animation: none !important; }
[data-earnings-calculator][data-settled] [style*="stroke-dashoffset"] { stroke-dashoffset: 0 !important; }
[data-earnings-calculator][data-settled] [style*="opacity:0"] { opacity: 1 !important; }

[data-anim="wait"] *{animation-play-state:paused !important}
input[type=range].pnl-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;outline:none;cursor:pointer}
input[type=range].pnl-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,var(--c-bg-3a63b0) 0%,var(--c-bg-264a80) 45%,var(--c-bg-14294a) 100%);border:2px solid var(--c-bg-ffffff);box-shadow:inset 0 1px 0 var(--c-sh-re255255255035),0 3px 8px var(--c-sh-re15307004)}
input[type=range].pnl-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(180deg,var(--c-bg-3a63b0) 0%,var(--c-bg-264a80) 45%,var(--c-bg-14294a) 100%);border:2px solid var(--c-bg-ffffff);box-shadow:0 3px 8px var(--c-sh-re15307004)}

/* ==================================================================
   THE PNL WAY
   Lifted out of its React bundle. The bundle carried a mode toggle, an
   animated counter and a ten-rule wall in its logic, but its template
   never referenced any of it — dead code from an earlier revision, so
   only the three principle cards are real. Entrance animations still
   gate on data-anim, now driven by js/reveal.js.
   ================================================================== */

/* USP banner art entrance. Opacity-only so it never fights the arts' own
   positioning transforms (translateY(-50%) centring, the cardFloat idle
   loops). Paused with the rest of the section until reveal, then it plays
   on the same clock as the fadeLeft text, so image and copy arrive together. */

[data-anim="wait"] *{animation-play-state:paused !important}

/* ==================================================================
   HOMEPAGE COMPONENT ANIMATIONS
   Keyframes lifted from the marquee, journey, broker, gold and
   platform bundles as each came out of its iframe. The data-anim
   gate is driven by js/reveal.js.
   ================================================================== */

[data-anim="wait"] *{animation-play-state:paused !important}

/* ==================================================================
   CARD COMPONENT STYLES
   Keyframes and hover helpers lifted from the hand-written card
   documents as each came out of its iframe. Animation names were
   already prefixed per component; the .hv* hover helpers were
   duplicated across several and are kept once.
   ================================================================== */

/* The CTA lives inside the scaled hero canvas, so at the mobile fit floor
   (0.45) its inline 20px/19px metrics would render as a ~29px-tall target.
   Enlarged pre-scale (!important beats the inline styles) it lands at
   ~44x249 on screen — same pill, phone-sized. */

@keyframes mpSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.hv1:hover { transform: translateY(-1px); box-shadow: 0 8px 18px var(--c-sh-re366813601); }
.hv2:hover { transform: translateY(-1px); box-shadow: 0 8px 18px var(--c-sh-re366813601); }
.hv3:hover { transform: translateY(-1px); box-shadow: 0 8px 18px var(--c-sh-re366813601); }
.hv4:hover { transform: translateY(-1px); box-shadow: 0 16px 30px var(--c-sh-re204179038), inset 0 1px 0 var(--c-sh-re255255255024); }
.hv5:hover { transform: translateY(-2px); box-shadow: 0 18px 38px var(--c-sh-re204179042), inset 0 1px 0 var(--c-sh-re255255255028); border-color: var(--c-bg-re255255255032); }

.hv1:hover { transform: translateY(-2px); box-shadow: 0 16px 34px var(--c-sh-re366813602), inset 0 1px 0 var(--c-sh-ffffff); border-color: var(--c-bg-re366813605); }

.hv1:hover { transform: translateY(-2px); box-shadow: 0 20px 40px var(--c-sh-re204179044), inset 0 1px 0 var(--c-sh-re25525525503); border-color: var(--c-bg-re255255255034); }

/* ===== Embedded homepage banners (.cxm / .gold-banner / .plat-banner): mobile stack ===== */
/* Below 760px the fixed 1272x500 canvases shrink with max-width:100% but their
   absolutely-positioned columns keep desktop coordinates and get clipped by
   overflow:hidden. Switch to stacked flow: copy first, artwork below, and
   rotate the brand gradient vertical so the copy keeps its contrast side. */
@media (max-width: 760px) {
  div.home-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto !important;
    padding: 36px 22px 40px;
    gap: 30px;
  }
  /* dark-left canvases (CXM, Platforms): copy keeps the dark tones on top */
  div.cxm.home-banner,
  div.plat-banner.home-banner {
    background: linear-gradient(180deg, var(--c-bg-0f1e3d) 0%, var(--c-bg-1d3560) 34%, var(--c-bg-3c5c96) 52%, var(--c-bg-c6d4ea) 72%, var(--c-bg-eef3fa) 88%, var(--c-bg-eef3fa) 100%) !important;
  }
  /* CXM shortened the same way the platforms card did, so its stops move for
     the same reason: the checklist must not land on the light band. */
  div.cxm.home-banner {
    background: linear-gradient(180deg, var(--c-bg-0f1e3d) 0%, var(--c-bg-1d3560) 38%, var(--c-bg-3c5c96) 62%, var(--c-bg-c6d4ea) 78%, var(--c-bg-eef3fa) 92%, var(--c-bg-eef3fa) 100%) !important;
  }
  /* Platforms runs its tiles in one row, so the card is short and the stops
     above would lift the light band into the checklist. Hold the dark longer. */
  div.plat-banner.home-banner {
    background: linear-gradient(180deg, var(--c-bg-0f1e3d) 0%, var(--c-bg-1d3560) 44%, var(--c-bg-3c5c96) 70%, var(--c-bg-c6d4ea) 84%, var(--c-bg-eef3fa) 95%, var(--c-bg-eef3fa) 100%) !important;
  }
  /* light-left canvas (Gold 24/7): dark-ink copy on the light top, globe on the dark base */
  div.gold-banner.home-banner {
    background: linear-gradient(180deg, var(--c-bg-f8fafd) 0%, var(--c-bg-eef3fa) 32%, var(--c-bg-c6d4ea) 50%, var(--c-bg-3c5c96) 68%, var(--c-bg-1d3560) 80%, var(--c-bg-0f1e3d) 100%) !important;
  }

  /* Decorative absolute leftovers (side glow washes, bottom sheen, empty
     float tiles) read as streaks/seams on the tall stacked canvas */
  div.home-banner > div:not(.banner-copy):not(.banner-art) { display: none; }

  div.home-banner .banner-copy {
    position: static !important;
    order: -1;
    width: 100% !important;
    max-width: 520px;
    height: auto !important;
  }
  div.home-banner .banner-copy > div { flex-wrap: wrap; }
  div.home-banner .banner-copy h2 { font-size: clamp(27px, 8.4vw, 34px) !important; }
  div.home-banner .banner-copy p { font-size: 16px !important; }
  /* Gold banner's oversized "TRADE GOLD 24/7" strap */
  div.gold-banner .banner-copy > div > span { font-size: clamp(22px, 7vw, 30px) !important; }
  /* Its action row is the only line that doesn't fill the column, so left
     alignment leaves a gap on the right. Centre it under the copy, and trim
     the button padding enough that the pair holds one row rather than
     stacking into a narrow centred column. */
  div.gold-banner .banner-copy > div:last-child { justify-content: center; gap: 12px !important; }
  div.gold-banner .banner-copy > div:last-child > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  div.home-banner .banner-art {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    display: flex;
    justify-content: center;
  }
  div.home-banner .banner-art img {
    position: static !important;
    width: min(78%, 300px) !important;
  }
  /* CXM: the artwork and its award caption are the tallest thing on the phone
     layout. Shrink the mark, then size the caption off the viewport so it
     holds one line down to 320px instead of wrapping to two. */
  div.cxm .banner-art img { width: min(46%, 150px) !important; }
  div.cxm .banner-art span { white-space: nowrap !important; text-align: center; }
  div.cxm .banner-art span + span {
    font-size: clamp(10px, 3.6vw, 15px) !important;
    letter-spacing: 0.16em !important;
  }
  div.cxm .banner-art span + span + span {
    font-size: clamp(9px, 2.9vw, 13px) !important;
    letter-spacing: 0.14em !important;
  }
  /* Platforms: run the three tiles left to right instead of stacking them, so
     the card stays short. The copy claims a full row of its own, which forces
     the wrap; the tiles then share the row beneath it. */
  div.plat-banner.home-banner { flex-flow: row wrap; justify-content: center; gap: 26px 10px; }
  div.plat-banner.home-banner .banner-copy { flex: 0 0 100%; }
  /* Share the row rather than sizing off the viewport, so three tiles always
     fit on one line however narrow the phone is. The MT webps carry baked-in
     transparent padding (77% fill) where the TradingView tile fills 63%, so
     TradingView takes the larger share to match it on screen. */
  div.plat-banner .banner-art { width: auto !important; flex: 1 1 0; min-width: 0; }
  div.plat-banner .banner-art:has(img[alt="TradingView"]) { flex-grow: 1.2; }
  div.plat-banner .banner-art img { width: 100% !important; max-width: 100px; }
  div.plat-banner .banner-art img[alt="TradingView"] { max-width: 120px; }
  div.plat-banner .banner-art + .banner-art { margin-top: 0; }
}

/* ---- USP bento: tablet and phone collapse ------------------------
   The 4-column template only works above ~900px; below that the small
   cards shrink to double-digit widths. Two columns down to 561px, one
   column on phones, with the big cards keeping their two-row height. */
@media (max-width: 899px) {
  .usp-bento-grid,
  .usp-bento--wide .usp-bento-grid {
    max-width: 560px;
    grid-template-columns: repeat(2, 1fr);
  }
  .usp-card:nth-child(3) { grid-column: 1 / -1; grid-row: auto / span 2; }
  .usp-card:nth-child(4) { grid-column: 1 / -1; grid-row: auto / span 2; }
  .usp-card:nth-child(6) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) {
  .usp-bento-grid,
  .usp-bento--wide .usp-bento-grid {
    grid-template-columns: 1fr;
    max-width: 430px;
  }
  /* Keep the flat art at its desktop size now the cards are full width */
  .usp-card:nth-child(1) img, .usp-card:nth-child(2) img { max-width: 205.2px; }
  .usp-card:nth-child(6) img { max-width: 117px; }
}

@media (max-width: 560px) {
  /* Freedom Evaluation: now the headline holds one line there is room to
     make the dove the feature of the card — larger, lower, and pulled left
     of centre so it fills the space rather than floating in it. */
  .usp-card:nth-child(3) img {
    height: 54% !important;
    top: 48px !important;                        /* clear of the EVALUATION label */
    transform: translateX(-46%) !important;      /* a touch left of centre */
  }
  /* Freedom Evaluation: the headline and copy sit at fixed px offsets
     tuned for the ~600px desktop card; on phones they return to flow,
     pinned to the card foot below the dove. */
  .usp-card:nth-child(3) .usp-card__title,
  .usp-card:nth-child(3) .usp-card__description {
    position: static !important;
    transform: none !important;
    width: auto !important;
  }
  .usp-card:nth-child(3) .usp-card__title {
    margin-top: auto;
    /* "The Freedom Evaluation" is long enough that 7.4vw wrapped it onto two
       lines at every phone width. Size it to fit one line and hold it there;
       the clamp floor keeps it legible on the narrowest screens. */
    --clamp-title: 1;
    font-size: clamp(17px, 6vw, 26px) !important;
    white-space: nowrap;
  }
  .usp-card:nth-child(3) .usp-card__description {
    --clamp-desc: 4;
    font-size: 13.5px !important;
  }
}

@media (max-width: 560px) {
  /* 24/7 Gold Trading headline no longer fits at 39.6px */
  .usp-card:nth-child(4) .usp-card__title {
    --clamp-title: 2;
    font-size: clamp(23.4px, 8vw, 32.4px) !important;
  }
}

/* Mobile: the calculator's size chips can never line-break (inline flex:1 1 0
   + nowrap), so $10K-$100K run out of the card's overflow:hidden. Let them
   wrap like the builder's chips; square the pill up once it is multi-row. */
@media (max-width: 760px) {
  [data-earnings-calculator] div[style*="background:var(--c-bg-eef2f7)"] { flex-wrap: wrap; border-radius: 26px !important; }
  [data-earnings-calculator] [data-pick-size] { flex-basis: auto !important; }
  /* ACCOUNT SIZE sits left of a full-width picker on desktop; centred on a
     phone it lines up with the slider labels below it. */
  [data-earnings-calculator] div[style*="flex:1 1 420px"] { align-items: center !important; }

  /* Same treatment for the builder's size picker. Its pills are flex:0 1 auto
     in an inline-flex pill, so they sit at content width and leave the second
     row short; growing them fills both rows the way the calculator does. The
     type and phase toggles keep their own pill, hence the :has() scope. */
  [data-challenge-builder] div:has(> [data-pick-size]) {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
    gap: 4px !important;
    border-radius: 26px !important;
  }
  [data-challenge-builder] [data-pick-size] { flex: 1 1 auto; text-align: center; }

  /* The feature list (leverage, consistency, overnight holds) repeats what the
     rules table below it already says, and it is the first thing to cut on a
     phone. Matched on its inline style so the rule covers both the pre-render
     markup and what challenge-builder.js writes over it. */
  [data-challenge-builder] div[style*="gap:12px;margin-top:6px"] { display: none !important; }
  /* Platforms block: heading and icons centre in the column */
  [data-challenge-builder] div[style*="margin-top:14px"] { align-items: center; }
  [data-challenge-builder] div[style*="align-items:flex-start;gap:20px"] {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* An 8px-tall slider is a needle on touch screens. Pad the hit area to 32px;
   background-clip pulls the inline track gradient back to the 8px content
   box so nothing changes visually. */
@media (max-width: 760px) {
  input[type=range].pnl-range { height: 32px; padding: 12px 0; box-sizing: border-box; background-clip: content-box !important; }
  /* The slider blocks are flex:0 1 auto in a wrapping row, so once wrapped
     their width comes from their widest child — the "TIME PERIOD" label —
     stranding half the card. Give them the whole row, and lift the 230px cap
     that keeps them beside the size picker on desktop. */
  [data-earnings-calculator] div:has(> div > input[type=range].pnl-range) {
    flex: 1 1 100% !important;
    align-self: stretch;
  }
  [data-earnings-calculator] div:has(> input[type=range].pnl-range) { max-width: none !important; }
  /* Scale labels: space-between pins the first and last hard against the track
     ends. Equal thirds centre each one over its share of the track instead. */
  [data-earnings-calculator] input[type=range].pnl-range + div > span {
    flex: 1 1 0;
    text-align: center;
  }
}

/* Stat cards: minmax(240px,1fr) refuses to shrink below 240px, which is wider
   than the card's content on sub-370px phones, so the right border clipped.
   minmax(0,1fr) sizes identically wherever a 240px column already fit. */
@media (max-width: 560px) {
  [data-earnings-calculator] div[style*="minmax(240px"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* 40px gutters are a quarter of a small phone: tighten them so the closing
   copy and CTA stop wrapping word-per-line. */
@media (max-width: 560px) {
  [data-earnings-calculator] div[style*="padding:30px 40px 24px"] { padding: 26px 20px 22px !important; }
  [data-earnings-calculator] div[style*="padding:26px 40px 0"] { padding: 26px 20px 0 !important; }
  [data-earnings-calculator] div[style*="margin:22px 40px 0"] { margin: 22px 20px 0 !important; }
  [data-earnings-calculator] div[style*="margin:22px 40px 30px"] { margin: 22px 20px 26px !important; padding: 22px 20px 18px !important; }
  [data-earnings-calculator] .glass-button-text--lg { padding: 1rem 1.25rem; }
}

/* Platform row: img{max-width:100%} squeezes MT4/MT5 to ~41px on small
   phones while the TradingView crop box (flex-shrink:0) holds 78px. Scale
   the three tiles together; the TradingView values keep the original
   97/78 zoom-crop ratio (72 = 97 x 58/78, margins likewise). */
@media (max-width: 400px) {
  [data-challenge-builder] div[style*="align-items:flex-start"] { gap: 12px !important; }
  [data-challenge-builder] div[style*="align-items:flex-start"] span { font-size: 13px !important; }
  [data-challenge-builder] div[style*="align-items:flex-start"] img[style*="width:78px"] { width: 58px !important; height: 58px !important; }
  [data-challenge-builder] div[style*="width:78px;height:78px;overflow:hidden"] { width: 58px !important; height: 58px !important; }
  [data-challenge-builder] div[style*="width:78px;height:78px;overflow:hidden"] > img { width: 72px !important; height: 72px !important; margin: -7.8px 0 0 -7px !important; }
}

/* Builder size chips wrap to 2-3 rows on phones: square the pill up and open
   the rows so the POPULAR tag clears the chip above it. */
@media (max-width: 760px) {
  [data-challenge-builder] div[style*="gap:2px"] { border-radius: 26px !important; row-gap: 12px !important; }
}

/* Tooltips carry 250-280px inline max-widths; keep them inside sub-340px
   screens. min() leaves 360px+ phones exactly as they were. */
@media (max-width: 760px) {
  [data-challenge-builder] .cb-tip { max-width: min(270px, calc(100vw - 70px)) !important; }
}

/* Small phones: the fixed hero-globe scale (0.23) plus its 36px optical
   shift clips the dove's right wing below ~425px viewports — scale it to
   fit and drop the shift (the artwork is centred enough at this size). */
@media (max-width: 430px) {
  .fc-hero-globe {
    --globe-scale: 0.2;
    transform: none;
  }
}

/* Narrowest phones: the Instant hero bottle canvas (1200px x 0.3 = 360px)
   is wider than a <360px viewport; step it down where it stops fitting. */
@media (max-width: 359px) {
  .fc-hero-vault {
    --vault-scale: 0.207;
  }
}

/* Mobile: inline links inside section subtitles (e.g. "can be found
   here") are only ~20px tall; grow the tap target without shifting the
   layout — the padding is cancelled out by the negative margin. */
@media (max-width: 899px) {
  p.section-subtitle a {
    display: inline-block;
    padding: 8px 2px;
    margin: -8px -2px;
  }
}

/* ===== Mobile tap targets (cluster G): bigger hit areas, same visuals ===== */
@media (max-width: 900px) {
  /* Hamburger: 32x24 visual grows to a ~48x44 hit box without moving */
  .mobile-toggle { padding: 12px 8px; margin: -8px -4px; }

  /* FAQ search clear: 24px circle keeps its look inside a 44px hit area */
  .faq-search-clear::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
  }

  /* Inline FAQ answer links: expand the line-box hit area invisibly */
  a.faq-link { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
}

/* POPULAR chip on the size picker: 8.5px type is below the readable floor on
   phones. The chip is inline-styled (static copies + the JS template), so an
   attribute-keyed override keeps all four sources in sync. */
@media (max-width: 760px) {
  [data-challenge-builder] span[style*="font-size:8.5px"] { font-size: 10px !important; }
}

/* ===== Footer language row =====
   Thirteen flags, each an SVG in assets/flags/ named for the language it
   stands for. The row sits inside .footer-lang, the last child of
   .footer-bottom, under a "Choose Language" heading at the very bottom of
   every page. The divider and the outer padding live on .footer-lang so the
   heading falls inside them. The language names are carried by aria-label and
   title rather than shown, so the row reads as a band of flags.

   The flags are presentational for now: the translation service they used to
   drive has been removed, so they are <span>s rather than links. Whatever
   replaces it wires up here and in the footer markup. */
.footer-lang {
  width: 100%;
  max-width: 760px;
  margin: 4px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-bg-re255255255008);
  text-align: center;
}
.footer-lang-label {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-fg-re25525525504);
}
.footer-lang .lang-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* Tight enough that all fifteen sit on one line at desktop width. Adding
     Kazakh and Russian needed 710px against the old 640px cap, so the row is
     wider and the gap a little tighter rather than wrapping two items onto a
     second line by themselves. */
  gap: 8px;
  line-height: 1;
}
.footer-lang .lang-flag {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  line-height: 1;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.footer-lang .lang-flag:hover {
  opacity: 1;
}
/* The flags are 4:3, so only the width is set and the height follows. */
.footer-lang .lang-flag img {
  display: block;
  width: 30px;
  height: auto;
  border-radius: 2px;
}
/* Kazakh and Russian have no flag artwork yet, so they show a two-letter mark.
   It is sized to the 30x22 flag box and given the same corner radius, so the
   row keeps one rhythm rather than one odd item. */
.footer-lang .lang-flag__code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: 2px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* Phones: 13 flags wrap to three or four rows, so tighten the gaps and shrink
   the flags rather than letting the row eat the bottom of the screen. Each link
   still clears the 44px touch target via the vertical padding. */
@media (max-width: 760px) {
  /* 420px would be wider than the narrowest phones, and the row would run off
     the side of the screen rather than wrapping. */
  .footer-lang {
    max-width: 100%;
    padding-top: 14px;
  }
  .footer-lang-label { margin-bottom: 14px; font-size: 0.66rem; }
  .footer-lang .lang-flags {
    gap: 6px 10px;
  }
  /* The padding carries the touch target and sets the space between rows. */
  .footer-lang .lang-flag {
    padding: 7px 5px;
  }
  .footer-lang .lang-flag img {
    width: 26px;
  }
  .footer-lang .lang-flag__code { width: 26px; height: 19px; font-size: 10px; }
}
@media (max-width: 380px) {
  .footer-lang .lang-flags { gap: 6px 8px; }
  .footer-lang .lang-flag { padding: 7px 4px; }
  .footer-lang .lang-flag img { width: 24px; }
  .footer-lang .lang-flag__code { width: 24px; height: 18px; font-size: 9.5px; }
}

/* ==================================================================
   HOMEPAGE MOBILE: CENTRED TEXT
   The phone layout stacks every section into one narrow column, where
   left-aligned copy reads as ragged against centred headings. Centre the
   lot below 760px. The navbar is excluded (its slogan is deliberately
   aligned to the page links) and so is the rules/value table inside the
   challenge builder, where the label-left/value-right pairing is the
   point.
   ================================================================== */
@media (max-width: 760px) {
  body.home > section { text-align: center; }
  /* Icon-and-text rows are flex, so centring their text does nothing until
     the row itself is centred: banner checklists, journey steps, bento
     card feet. */
  body.home div.home-banner .banner-copy > div > div { justify-content: center; }
  body.home div.home-banner .banner-copy > div { align-items: center; }
  /* Card headers and labels are flex children, so they shrink-wrap and sit at
     flex-start however their text is aligned. */
  body.home .usp-card__header { justify-content: center; }
  body.home .magic-bento-card { align-items: center; }
  body.home > section.journey div[style*="align-items:center;gap:10px"] { justify-content: center; }
  /* The footer reads from a left margin on a phone, like the rest of the
     page and like the footer already did on every page but this one: the
     homepage was centring its own copy of it, so the same footer came out
     two different ways depending on which page you scrolled to the bottom
     of. Column headings, their links, the newsletter and the disclaimer all
     start at the same left edge. */
  body.home > footer { text-align: left; }
  body.home > footer ul { padding-left: 0; list-style: none; }
  body.home .footer-newsletter-features { justify-content: flex-start; }
  body.home .footer-disclaimer { text-align: left; }
  /* The bottom bar is a centred row on desktop, which is right while it is a
     row. Stacked on a phone it left over three centred blocks under a
     left-aligned footer. It is also the one block in the tinted band that
     sits outside that band's own container, so it needs the container's
     gutter or its copy starts 24px left of everything above it. */
  .footer-bottom {
    padding-left: 24px;
    padding-right: 24px;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
  }
  /* Matching the weight of the rules that centre these, which are written
     against their parent rather than on the element itself. */
  .footer-bottom .footer-legal-links { justify-content: flex-start; }
  .footer-bottom .footer-meta { align-items: flex-start; }
  .footer-lang .lang-flags { justify-content: flex-start; }
  .footer-meta,
  .footer-lang,
  .footer-lang-label { text-align: left; }
}

/* ==================================================================
   TRADER'S PATH — MOBILE
   The desktop card is a fixed 1272x500 canvas whose children sit at
   absolute coordinates, so it can only be scaled, not reflowed. Below
   760px the fit falls under the readability floor (0.27 of designed
   size, i.e. 9px body copy) and the card is clipped instead. Swap it
   for a stacked pair of panels carrying the same content at full size.
   ================================================================== */
.fc-path-mobile { display: none; }
@media (max-width: 760px) {
  /* fit-embeds.js wraps the embed in .embed-scroll once it clamps, so hide
     both rather than only a direct child of the container. */
  .fc-path .fc-path-embed,
  .fc-path .embed-scroll { display: none !important; }
  .fc-path-mobile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 auto;
  }
  .fcm-panel {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 24px 22px 26px;
    border-radius: 24px;
    border: 1px solid var(--c-bg-re140175235028);
    background: linear-gradient(115deg, var(--c-bg-14294f) 0%, var(--c-bg-1a3364) 52%, var(--c-bg-2b52a0) 100%);
    box-shadow: 0 18px 40px var(--c-sh-re12265803);
    text-align: center;
  }
  .fcm-panel::after {
    content: '';
    position: absolute;
    right: -70px;
    top: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re120175240026), var(--c-gl-re2552552550) 70%);
    pointer-events: none;
  }
  .fcm-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--c-fg-e8c56a);
  }
  .fcm-panel h3 {
    position: relative;
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 1.32rem;
    line-height: 1.24;
    font-weight: 700;
    color: var(--c-fg-ffffff);
    letter-spacing: -0.3px;
  }
  .fcm-panel p {
    position: relative;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--c-fg-c9d6ee);
    text-wrap: pretty;
  }
  .fcm-panel p strong { font-weight: 700; color: var(--c-fg-f3dc9a); }
  /* Node row: the circular icons from the canvas, at full size */
  .fcm-nodes {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
  }
  .fcm-node { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 116px; }
  .fcm-node-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid var(--c-bg-re232197106055);
    background: var(--c-bg-re102246055);
  }
  .fcm-node-ring svg { width: 26px; height: 26px; }
  .fcm-node b {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--c-fg-e8c56a);
  }
  .fcm-node span { font-size: 0.82rem; color: var(--c-fg-c9d6ee); }
  /* Day markers / reward badges */
  .fcm-chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }
  .fcm-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--c-bg-re232197106042);
    background: var(--c-bg-re10224605);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c-fg-e8c56a);
  }
  .fcm-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
  .fcm-callout {
    position: relative;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--c-bg-re232197106042);
    background: linear-gradient(180deg, var(--c-bg-re232197106014), var(--c-bg-re232197106004));
  }
  .fcm-callout b {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--c-fg-e8c56a);
    margin-bottom: 5px;
  }
  .fcm-callout span { font-size: 1.02rem; font-weight: 700; color: var(--c-fg-ffffff); }
  /* The arrow that sits on the canvas divider, turned to point downward */
  .fcm-arrow {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -4px 0;
    border-radius: 50%;
    background: var(--c-bg-ffffff);
    box-shadow: 0 6px 16px var(--c-sh-re122658028);
  }
  .fcm-arrow svg { width: 18px; height: 18px; color: var(--c-fg-1a3364); transform: rotate(90deg); }
}

/* ==================================================================
   HOW IT WORKS — MOBILE REFLOW
   These cards are fixed 1272px canvases painted through
   transform: scale(), so on a phone the measured fit lands under the
   readability floor and fit-embeds.js hands them to a horizontal
   scroller — which is why the copy reads as sliced off.

   Unlike the Trader's Path canvas they are laid out with flex, not
   absolute coordinates, so they can simply be let go: drop the fixed
   width, cancel the transform, stack the two columns and bring the
   type down to phone sizes.
   ================================================================== */
@media (max-width: 760px) {
  .hiw-card-embed,
  .embed-scroll > .hiw-card-embed {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* inline radius is calc(28px * --chart-scale) — at the clamped scale that
       is ~13px against the card's 22px, so the clip cut inside the card's own
       corners and let the canvas fill show through as four pale notches */
    border-radius: 22px !important;
  }
  /* the scaled canvas and the card inside it */
  .hiw-card-embed > div,
  .hiw-card-embed > div > div {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }
  /* The canvas fill only ever existed to back the card inside the desktop
     clip. Nothing should sit behind the rounded corners here. */
  .hiw-card-embed > div { background: transparent !important; }
  .hiw-card-embed > div > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }
  /* the fixed-width visual panel beside the copy */
  .hiw-card-embed > div > div > div[style*="flex: 0 0 auto"] { width: 100% !important; }
  /* the scroller has nothing left to scroll */
  .hiw-cards .embed-scroll,
  .hiw-flow .embed-scroll {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* The two closing cards put a 68px badge beside their copy, which leaves the
     heading about 210px to wrap into. Stack those as well. */
  .hiw-card-embed div[style*="gap: 26px"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  /* Canvas type is sized for a 1272px stage; bring it to phone sizes */
  .hiw-card-embed h1 { font-size: 26px !important; line-height: 1.18 !important; }
  .hiw-card-embed h2 { font-size: 22px !important; line-height: 1.2 !important; }
  .hiw-card-embed h3 { font-size: 18px !important; line-height: 1.25 !important; }
  .hiw-card-embed p { font-size: 15px !important; line-height: 1.6 !important; }
}

/* Short CTA card closing the forbidden practices page — the same icy panel
   as the PNL Pathway's requirements card and the calculator's CTA. */
.fp-cta {
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 36px 36px;
  border-radius: 24px;
  border: 1px solid var(--c-bg-re3668136016);
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  box-shadow: 0 16px 44px var(--c-sh-re366813601);
  text-align: center;
}
.fp-cta::before {
  content: '';
  position: absolute;
  right: -70px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re12017524002), var(--c-gl-re2552552550) 70%);
  pointer-events: none;
}
.fp-cta h2 {
  position: relative;
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 4.6vw, 1.75rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-fg-14294f);
}
.fp-cta p {
  position: relative;
  margin: 0 0 20px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--c-fg-46587a);
  text-wrap: pretty;
}
.fp-cta .glass-button-wrap { position: relative; }
@media (max-width: 560px) {
  .fp-cta { padding: 26px 20px 28px; border-radius: 20px; }
}

/* ==================================================================
   AFFILIATES PAGE
   ================================================================== */
.af-section { padding: 64px 0; }
.af-section--tint { background: linear-gradient(180deg, var(--c-bg-f6f9fe) 0%, var(--white) 100%); }
/* The terms section reads straight into the apply card, so it does not need a
   full section gap between the fine print and the CTA. */
.af-section--flush { padding-bottom: 22px; }
.af-section--flush + .af-section { padding-top: 22px; }
.af-head { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.af-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-fg-a8861d);
  text-transform: uppercase;
}
.af-head h2 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-fg-14294f);
}
.af-head p { margin: 0; font-size: 1.04rem; line-height: 1.65; color: var(--c-fg-46587a); text-wrap: pretty; }

/* Commission cards */
.af-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.af-card {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 28px;
  border-radius: 22px;
  border: 1px solid var(--c-bg-re3668136016);
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  box-shadow: 0 14px 36px var(--c-sh-re3668136008);
}
.af-card--gold { border-color: var(--c-bg-re2011623905); background: linear-gradient(160deg, var(--c-gl-fffdf6) 0%, var(--c-gl-fdf8e9) 46%, var(--c-gl-f7edd2) 100%); }
.af-card-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fg-8593ad);
}
.af-rate {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-fg-14294f);
}
.af-card--gold .af-rate {
  background-image: linear-gradient(105deg, var(--c-bg-a8801c) 0%, var(--c-bg-cfa634) 32%, var(--c-bg-dcbb57) 48%, var(--c-bg-c39c2c) 66%, var(--c-bg-9c7a19) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.af-card p { margin: 10px 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--c-fg-46587a); text-wrap: pretty; }

/* Entity panels — the three books one link opens */
.af-entity {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 28px;
  border-radius: 22px;
  border: 1px solid var(--c-bg-re140175235028);
  background: linear-gradient(150deg, var(--c-bg-14294f) 0%, var(--c-bg-1a3364) 52%, var(--c-bg-2b52a0) 100%);
  box-shadow: 0 18px 40px var(--c-sh-re122658026);
  color: var(--c-fg-ffffff);
}
.af-entity-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--c-bg-re232197106045);
  background: var(--c-bg-re10224605);
}
.af-entity-ico svg { width: 22px; height: 22px; }
.af-entity h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--c-fg-ffffff);
}
.af-entity span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--c-fg-e8c56a); text-transform: uppercase; }
.af-entity p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--c-fg-c9d6ee); text-wrap: pretty; }

/* Numbered steps */
.af-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: af; }
.af-step {
  position: relative;
  padding: 24px 24px 26px;
  border-radius: 20px;
  border: 1px solid var(--gray-100);
  background: var(--white);
  box-shadow: 0 10px 28px var(--c-sh-re3668136006);
}
.af-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--c-bg-37568c) 0%, var(--c-bg-1d3560) 100%);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-fg-ffffff);
}
.af-step h3 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1.06rem; font-weight: 700; color: var(--c-fg-14294f); }
.af-step p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--c-fg-46587a); text-wrap: pretty; }

/* Terms at a glance */
.af-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.af-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--gray-100);
  background: var(--white);
}
.af-fact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--c-fg-244488); }
.af-fact b { display: block; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; color: var(--c-fg-14294f); }
.af-fact span { font-size: 0.88rem; line-height: 1.5; color: var(--c-fg-46587a); }

/* Fine print */
.af-fine {
  max-width: 820px;
  margin: 30px auto 0;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid var(--gray-100);
  background: var(--c-bg-f8fafd);
}
.af-fine h3 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-8593ad);
}
.af-fine ul { margin: 0; padding-left: 20px; list-style: disc; }
.af-fine li::marker { color: var(--c-fg-a9b7cd); }
.af-fine li { margin-bottom: 7px; font-size: 0.88rem; line-height: 1.55; color: var(--c-fg-46587a); }
.af-fine li:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .af-section { padding: 44px 0; }
  .af-section--flush { padding-bottom: 16px; }
  .af-section--flush + .af-section { padding-top: 16px; }
  .af-head { margin-bottom: 28px; }
  body.affiliates > section { text-align: center; }
  .af-entity { align-items: center; }
  .af-fact { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .af-fine { text-align: left; }
}

/* PNL Pathway — assessment gates */
.pw-gates { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.pw-gate {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 28px;
  border-radius: 22px;
  border: 1px solid var(--c-bg-re3668136016);
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  box-shadow: 0 14px 36px var(--c-sh-re3668136008);
}
.pw-gate--gold { border-color: var(--c-bg-re2011623905); background: linear-gradient(160deg, var(--c-gl-fffdf6) 0%, var(--c-gl-fdf8e9) 46%, var(--c-gl-f7edd2) 100%); }
.pw-gate-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fg-8593ad);
}
.pw-gate-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-fg-14294f);
}
.pw-gate--gold .pw-gate-value {
  background-image: linear-gradient(105deg, var(--c-bg-a8801c) 0%, var(--c-bg-cfa634) 32%, var(--c-bg-dcbb57) 48%, var(--c-bg-c39c2c) 66%, var(--c-bg-9c7a19) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pw-gate h3 {
  margin: 12px 0 8px;
  font-family: var(--font-heading);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--c-fg-14294f);
}
.pw-gate p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--c-fg-46587a); text-wrap: pretty; }

/* "Not for everyone" block — the qualifying counterweight to the CTA */
/* Red hues matching the restricted-jurisdictions card (.faq-restricted):
   same rgba(160, 29, 48, …) family, red gradient face and corner wash. Kept
   left-aligned because it carries a bulleted list. */
.nfy {
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 34px 32px;
  border-radius: 22px;
  border: 1px solid var(--c-bg-re1602948024);
  background: linear-gradient(155deg, var(--c-bg-fffafa) 0%, var(--c-bg-fdf1f2) 48%, var(--c-bg-f9e4e7) 100%);
  box-shadow: 0 14px 38px var(--c-sh-re160294801);
  text-align: left;
}
.nfy::after {
  content: '';
  position: absolute;
  right: -140px;
  top: -120px;
  width: 460px;
  height: 380px;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re1602948014), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.nfy > * { position: relative; z-index: 1; }
.nfy h2 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 3.4vw, 1.5rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-fg-8c1a2c);
}
.nfy ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.nfy li { margin-bottom: 8px; font-size: 0.98rem; line-height: 1.6; color: var(--c-fg-5a4048); }
.nfy li:last-child { margin-bottom: 0; }
.nfy li::marker { color: var(--c-fg-re1602948055); }
.nfy p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--c-fg-8c1a2c); font-weight: 700; }
@media (max-width: 560px) { .nfy { padding: 24px 20px 26px; border-radius: 18px; } }

/* ------------------------------------------------------------------
   About page on mobile.
   The cards carry 90-108px of horizontal padding from the desktop
   design, which on a phone leaves ~120px of text column and breaks the
   headings to one word a line. The promise grid is also a hard 1fr 1fr
   inline, so its two cards sit side by side at ~150px each and clip.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .about-stack .ab-card { padding: 34px 20px 36px !important; border-radius: 22px !important; }
  .about-stack h2 {
    font-size: clamp(26px, 7.4vw, 46.8px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.6px !important;
  }
  .about-stack h3 { font-size: clamp(18px, 5.2vw, 23.4px) !important; line-height: 1.25 !important; }
  .about-stack p { font-size: 15.5px !important; line-height: 1.65 !important; }
  /* promises stack instead of sharing a row */
  .about-stack div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    margin-top: 26px !important;
  }
  .about-stack div[style*="padding: 30.6px 32.4px 32.4px"] { padding: 22px 20px 24px !important; }
}

/* Restricted jurisdictions: deliberately not an accordion. The list must be
   readable without a click, so it sits as plain text below the FAQ groups
   and is never hidden by the category filter. */
/* Restricted jurisdictions: sits above every FAQ group and is never filtered
   out, so it reads as a standing notice rather than an answer. Red hues echo
   the forbidden-practices cards (same rgba(160, 29, 48, …) family). */
.faq-restricted {
  position: relative;
  overflow: hidden;
  margin: 0 0 34px;
  padding: 28px 30px 30px;
  border: 1px solid var(--c-bg-re1602948024);
  border-radius: 18px;
  background: linear-gradient(155deg, var(--c-bg-fffafa) 0%, var(--c-bg-fdf1f2) 48%, var(--c-bg-f9e4e7) 100%);
  box-shadow: 0 14px 38px var(--c-sh-re160294801);
  text-align: center;
}
/* Soft red wash in the top-right corner, as on .fpc-card */
.faq-restricted::after {
  content: '';
  position: absolute;
  right: -140px;
  top: -120px;
  width: 460px;
  height: 380px;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re1602948014), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.faq-restricted > * { position: relative; z-index: 1; }
.faq-restricted h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--c-fg-8c1a2c);
}
.faq-restricted h3 svg { flex-shrink: 0; width: 22px; height: 22px; }
.faq-restricted p { margin: 0 0 10px; font-size: 0.93rem; line-height: 1.65; color: var(--c-fg-5a4048); }
.faq-restricted-list { font-weight: 600; color: var(--c-fg-7d1a2a) !important; }
.faq-restricted-warn { margin-bottom: 0 !important; font-weight: 700; color: var(--c-fg-8c1a2c) !important; }
.faq-restricted[hidden] { display: none; }
/* Acknowledgement, not a dismissal of the rule: the copy mirrored into the
   Terms & Model group has this button stripped and can never be hidden. */
.faq-restricted-ack {
  margin-top: 22px;
  padding: 14px 38px;
  border: 1px solid var(--c-bg-7d1523);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c-bg-b2223a) 0%, var(--c-bg-8c1a2c) 100%);
  box-shadow: 0 8px 20px var(--c-sh-re1602948032);
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-fg-ffffff);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .faq-restricted-ack:hover {
    background: linear-gradient(180deg, var(--c-bg-c22843) 0%, var(--c-bg-9c1d31) 100%);
    box-shadow: 0 12px 26px var(--c-sh-re1602948042);
    transform: translateY(-2px);
  }
}
.faq-restricted-ack:active { transform: translateY(0); box-shadow: 0 5px 14px var(--c-sh-re160294803); }
.faq-restricted-ack:focus-visible { outline: 2px solid var(--c-bg-7d1523); outline-offset: 3px; }
/* Permanent copy inside the Terms & Model group */
.faq-restricted--inline { margin: 22px 0 0; }
@media (max-width: 560px) {
  .faq-restricted { padding: 20px 18px 22px; }
  .faq-restricted h3 { font-size: 1.02rem; }
  .faq-restricted-ack { width: 100%; }
}

/* ==================================================================
   TRADINGVIEW PLATFORM PAGE  (tradingview/index.html)
   PNL styling: navy headings, gold accents/CTAs, white glass cards.
   ================================================================== */
.tv-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  /* Deeper gold ramp: the old mid-stop (var(--c-bg-e8c56a)) blew out to near-white on a
     light background and washed the middle letters. */
  background: linear-gradient(105deg, var(--c-bg-8a6712) 0%, var(--c-bg-a8801c) 32%, var(--c-bg-c1992a) 52%, var(--c-bg-a8801c) 72%, var(--c-bg-8a6712) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tv-hero-title, .tv-split h2 { color: var(--c-fg-1d2e5f); }

/* ---- Hero: centred stack, TradingView logo on top (like the Freedom hero) ---- */
.tv-hero { padding: 148px 0 44px; overflow: hidden; }
.tv-hero .container {
  display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 820px;
}
.tv-hero-logo { margin-bottom: 10px; }
.tv-hero-logo img {
  display: block; width: 190px; max-width: 52vw; height: auto;
  filter: drop-shadow(0 22px 44px var(--c-sh-re153070028));
}
@media (min-width: 901px) { .tv-hero-logo img { width: 280px; } }
/* Hard break on desktop only; on mobile the title wraps naturally, balanced so
   it still lands on two lines. */
@media (max-width: 900px) { .tv-br-desktop { display: none; } }
.tv-hero-title--balance { text-wrap: balance; }
.tv-hero-title {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; font-weight: 800;
  letter-spacing: -0.01em;
}
.tv-hero-sub { margin: 0 auto 28px; max-width: 560px; font-size: 1.06rem; line-height: 1.7; color: var(--c-fg-46587a); }
.tv-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---- Why TradingView: one icy white panel (no logo) ---- */
.tv-why-card {
  position: relative; overflow: hidden;
  max-width: 880px; margin: 0 auto;
  padding: 46px 48px 48px; border-radius: 26px;
  border: 1px solid var(--c-bg-re140175235055);
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  box-shadow: 0 16px 44px var(--c-sh-re366813601);
  text-align: center;
}
.tv-why-card::before {
  content: ''; position: absolute; right: -80px; top: -100px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re120175240022), var(--c-gl-re2552552550) 70%);
  pointer-events: none;
}
.tv-why-card::after {
  content: ''; position: absolute; left: -90px; bottom: -110px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re160200245018), var(--c-gl-re2552552550) 70%);
  pointer-events: none;
}
.tv-why-card > * { position: relative; z-index: 1; }
.tv-why-card h2 {
  margin: 0 0 16px; font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; color: var(--c-fg-1d2e5f);
}
.tv-why-card p { margin: 0 auto 22px; max-width: 620px; font-size: 1.04rem; line-height: 1.72; color: var(--c-fg-46587a); }
.tv-chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tv-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: var(--c-bg-ffffff); border: 1px solid var(--c-bg-re14017523505); box-shadow: 0 4px 14px var(--c-sh-re3668136006);
  font-size: 0.9rem; font-weight: 600; color: var(--c-fg-33456b);
}
.tv-chip svg { width: 15px; height: 15px; color: var(--c-fg-5a91d7); }

/* ---- Feature grid ---- */
.tv-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
/* Header with no subtitle: close the gap down to the cards. */
.section-header--tight { margin-bottom: 12px; }
.section-header--tight + .tv-feature-grid { margin-top: 18px; }
.tv-card {
  position: relative; text-align: center; padding: 34px 28px 30px; border-radius: 20px;
  background: var(--c-bg-ffffff); border: 1px solid var(--c-bg-re3668136012);
  box-shadow: 0 14px 40px var(--c-sh-re3668136007);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tv-card:hover { transform: translateY(-4px); box-shadow: 0 22px 54px var(--c-sh-re3668136013); border-color: var(--c-bg-re2011623904); }
.tv-card-icon {
  width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--c-bg-f4f8fd) 0%, var(--c-bg-e6eff9) 100%);
  border: 1px solid var(--c-bg-re14017523504);
}
.tv-card-icon svg { width: 26px; height: 26px; color: var(--c-fg-3a6fb5); }
.tv-card h3 { margin: 0 0 10px; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--c-fg-14294f); }
.tv-card p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--c-fg-46587a); }

/* ---- Steps ---- */
.tv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.tv-step {
  position: relative; text-align: center; padding: 32px 22px; border-radius: 20px;
  background: var(--c-bg-ffffff); border: 1px solid var(--c-bg-re3668136012); box-shadow: 0 14px 40px var(--c-sh-re3668136007);
}
.tv-step-icon { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--c-bg-f2f7fd), var(--c-bg-e2ecf8)); border: 1px solid var(--c-bg-re3668136014); }
.tv-step-icon svg { width: 24px; height: 24px; color: var(--c-fg-244488); }
.tv-step-num { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-fg-b8901f); }
.tv-step h3 { margin: 6px 0 8px; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--c-fg-14294f); }
.tv-step p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--c-fg-46587a); }
.tv-cta-center { display: flex; justify-content: center; margin-top: 36px; }

/* ---- Apps row ---- */
.tv-apps {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
  padding: 38px 44px; border-radius: 24px;
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 44%, var(--c-bg-e6eef9) 100%);
  border: 1px solid var(--c-bg-re3668136014); box-shadow: 0 18px 48px var(--c-sh-re3668136009);
}
.tv-apps-copy h3 { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--c-fg-1d2e5f); }
.tv-apps-copy p { margin: 0; font-size: 0.98rem; color: var(--c-fg-46587a); max-width: 440px; }
.tv-apps-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.tv-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 14px;
  background: linear-gradient(180deg, var(--c-bg-16386b) 0%, var(--c-bg-0f2a54) 100%); color: var(--c-fg-eef3ff); text-decoration: none;
  border: 1px solid var(--c-bg-re9014022004); box-shadow: 0 8px 20px var(--c-sh-re102858028);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tv-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 26px var(--c-sh-re10285804); }
.tv-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
/* Fixed column for the mark, so a wide logo and a narrow one leave their
   labels starting in the same place down a stacked row. */
.tv-badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex-shrink: 0; }
.tv-badge span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.tv-badge b { font-size: 0.92rem; font-weight: 700; }
.tv-badge small { font-size: 0.68rem; opacity: 0.8; letter-spacing: 0.5px; }

/* ---- Platform download row (the MetaTrader pages) ----
   Four links on MT5 and five on MT4, where the row beside the copy held
   three. Past three the row wrapped into an uneven two-and-two, so the copy
   moves above it and the links take the width of the card as one grid. Equal
   columns rather than shrink-to-fit: Windows and Web Terminal are different
   lengths in every language, and buttons that each end somewhere different
   stop reading as one set. */
.tv-apps--platforms { flex-direction: column; align-items: stretch; text-align: center; }
.tv-apps--platforms .tv-apps-copy p { margin: 0 auto; }
.tv-apps-badges--platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.tv-apps-badges--platforms .tv-badge { justify-content: center; }

/* ---- Region gate ----
   The right-hand half of the apps row holds three states, one at a time: the
   question, the download badges, and the MetaTrader alternative. They share a
   column so the row's height does not jump as the visitor answers. */
.tv-apps-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.tv-region-q {
  margin: 0 0 10px; font-family: var(--font-heading); font-size: 0.98rem;
  font-weight: 700; color: var(--c-fg-1d2e5f); text-align: left;
}
.tv-region-opts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
/* Same face as the badges beside them, so answering does not look like a
   different kind of control from what it reveals. */
.tv-region-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border-radius: 14px; cursor: pointer;
  font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700;
  background: linear-gradient(180deg, var(--c-bg-16386b) 0%, var(--c-bg-0f2a54) 100%);
  color: var(--c-fg-eef3ff);
  border: 1px solid var(--c-bg-re9014022004); box-shadow: 0 8px 20px var(--c-sh-re102858028);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tv-region-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px var(--c-sh-re10285804); }
.tv-region-btn:focus-visible { outline: 2px solid var(--c-bg-19407a); outline-offset: 3px; }
.tv-region-alt { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.tv-region-note {
  /* The block hugs the right of the card, but the sentence inside it reads
     left to right: ragged-left copy makes every line start somewhere new and
     is markedly slower to read than a straight left edge. */
  margin: 0; max-width: 420px; text-align: left;
  font-size: 0.92rem; line-height: 1.5; color: var(--c-fg-46587a);
}
/* Quiet by design: it is the way back out of a wrong answer, not a call to
   action competing with the two links above it. */
.tv-region-reset {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--c-fg-46587a);
  text-decoration: underline; text-underline-offset: 3px;
}
.tv-region-reset:hover { color: var(--c-fg-19407a); }
.tv-region-reset:focus-visible { outline: 2px solid var(--c-bg-19407a); outline-offset: 3px; border-radius: 4px; }
.tv-region[hidden], .tv-region-alt[hidden], .tv-apps-badges[hidden], .tv-region-reset[hidden] { display: none; }

@media (max-width: 900px) {
  .tv-hero .container, .tv-split .container { grid-template-columns: 1fr; gap: 34px; }
  /* Tighter vertical rhythm on mobile: lift the whole stack, close the gap the
     logo art's transparent padding leaves above the eyebrow, and pull the
     title, subtext and CTAs up. */
  .tv-hero { padding-top: 84px; text-align: center; }
  .tv-hero-logo { margin-bottom: -34px; }
  /* Cancel the container's 34px row gap so the title sits tight under the
     eyebrow, matching the eyebrow-to-heading spacing used site wide. */
  .tv-hero-title { margin: -34px 0 3px; }
  .tv-hero-sub { margin: 0 auto 6px; }
  .tv-hero-actions { justify-content: center; }
  
  
  .tv-chip-row { justify-content: center; }
  
  .tv-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .tv-steps { grid-template-columns: repeat(2, 1fr); }
  .tv-apps { flex-direction: column; text-align: center; }
  .tv-apps-copy p { margin: 0 auto; }
  .tv-apps-badges { justify-content: center; }
  /* The row stacks here, so the gate centres with everything else. */
  .tv-apps-side, .tv-region-alt { align-items: center; }
  .tv-region-q, .tv-region-note { text-align: center; }
  .tv-region-opts { justify-content: center; }
  .tv-region-note { margin: 0 auto; }
}
@media (max-width: 540px) {
  .tv-feature-grid, .tv-steps { grid-template-columns: 1fr; }
}

/* ==================================================================
   CAREERS PAGE  (careers/index.html)
   Reuses the platform-page hero rhythm plus an icy enquiry form card.
   ================================================================== */
.cr-hero { padding: 148px 0 30px; text-align: center; }
.cr-hero .container { max-width: 820px; }
.cr-hero h1 {
  margin: 0 0 16px; font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; font-weight: 800;
  letter-spacing: -0.01em; color: var(--c-fg-1d2e5f); text-wrap: balance;
}
.cr-hero p { margin: 0 auto; max-width: 620px; font-size: 1.06rem; line-height: 1.7; color: var(--c-fg-46587a); }

/* Value cards */
.cr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.cr-card {
  padding: 30px 26px; border-radius: 20px; text-align: center;
  background: var(--c-bg-ffffff); border: 1px solid var(--c-bg-re3668136012);
  box-shadow: 0 14px 40px var(--c-sh-re3668136007);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cr-card:hover { transform: translateY(-4px); box-shadow: 0 22px 54px var(--c-sh-re3668136013); border-color: var(--c-bg-re140175235055); }
.cr-card-icon {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--c-bg-f4f8fd) 0%, var(--c-bg-e6eff9) 100%);
  border: 1px solid var(--c-bg-re14017523504);
}
.cr-card-icon svg { width: 24px; height: 24px; color: var(--c-fg-3a6fb5); }
.cr-card h3 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--c-fg-14294f); }
.cr-card p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--c-fg-46587a); }

/* Enquiry form, on the icy panel */
.cr-form-card {
  position: relative; overflow: hidden;
  max-width: 760px; margin: 0 auto;
  padding: 42px 44px 44px; border-radius: 26px;
  border: 1px solid var(--c-bg-re140175235055);
  background: linear-gradient(155deg, var(--c-bg-ffffff) 0%, var(--c-bg-f2f7fd) 42%, var(--c-bg-e2ecf8) 100%);
  box-shadow: 0 16px 44px var(--c-sh-re366813601);
}
.cr-form-card::before {
  content: ''; position: absolute; right: -80px; top: -100px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--c-bg-re120175240022), var(--c-gl-re2552552550) 70%);
  pointer-events: none;
}
.cr-form-card > * { position: relative; z-index: 1; }
.cr-form-head { text-align: center; margin-bottom: 26px; }
.cr-form-head h2 { margin: 0 0 10px; font-family: var(--font-heading); font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; color: var(--c-fg-1d2e5f); }
.cr-form-head p { margin: 0 auto; max-width: 520px; font-size: 1rem; line-height: 1.65; color: var(--c-fg-46587a); }

.cr-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-field { display: flex; flex-direction: column; gap: 7px; }
.cr-field--full { grid-column: 1 / -1; }
.cr-field label { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--c-fg-14294f); }
.cr-field input, .cr-field select, .cr-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--c-bg-re366813602);
  background: var(--c-bg-ffffff); color: var(--c-fg-14294f);
  font-family: inherit; font-size: 0.95rem; line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cr-field textarea { min-height: 130px; resize: vertical; }
.cr-field input::placeholder, .cr-field textarea::placeholder { color: var(--c-fg-93a3bd); }
.cr-field input:focus, .cr-field select:focus, .cr-field textarea:focus {
  outline: none; border-color: var(--c-bg-re5811118107);
  box-shadow: 0 0 0 3px var(--c-sh-re120175240018);
}
.cr-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; line-height: 1.55; color: var(--c-fg-46587a); }
.cr-consent input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--c-bg-3a6fb5); }
.cr-actions { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 6px; }
.cr-note { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font-size: 0.84rem; color: var(--c-fg-7286a6); }
.cr-success {
  grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-radius: 12px;
  background: var(--c-bg-re3417114801); border: 1px solid var(--c-bg-re34171148035);
  color: var(--c-fg-12705f); font-size: 0.93rem; text-align: center;
}
.cr-success[hidden] { display: none; }

@media (max-width: 900px) {
  .cr-hero { padding-top: 104px; }
  .cr-grid { grid-template-columns: repeat(2, 1fr); }
  .cr-form-card { padding: 32px 22px 34px; }
}
@media (max-width: 620px) {
  .cr-grid { grid-template-columns: 1fr; }
  .cr-form { grid-template-columns: 1fr; }
}

/* ==================================================================
   SITEWIDE EYEBROWS
   Every eyebrow uses the same metallic gold text and sits on the page
   with no pill/box behind it. The .fcm-eyebrow variant is left alone:
   it sits on a navy card, where this dark ramp would be unreadable.
   ================================================================== */
.eyebrow-gold,
.af-eyebrow,
.page-hero-eyebrow,
.section-tag,
body .section-tag {
  background: linear-gradient(105deg, var(--c-bg-8a6712) 0%, var(--c-bg-a8801c) 32%, var(--c-bg-c1992a) 52%, var(--c-bg-a8801c) 72%, var(--c-bg-8a6712) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* An eyebrow sits tight against the heading it introduces. The reference
   pairing is "Get Started" / "How to Get Started" on the platform pages,
   where the eyebrow carries no bottom margin and the heading no top
   margin, so the only separation is the two line boxes' own leading. */
.eyebrow-gold,
.af-eyebrow,
.page-hero-eyebrow,
.tv-eyebrow,
body .section-tag {
  margin-bottom: 0;
}
/* The headings those eyebrows introduce carry no top margin either; see
   .tv-hero-title, .tv-why-card h2, .cr-hero h1 and .cr-form-head h2. */

/* No box around eyebrows: the homepage section tag was the only one still
   carrying the glass pill. */
body .section-tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* ==================================================================
   TRANSLATION RESILIENCE
   A pseudo-localisation pass (every string grown 40%, the usual
   German/Portuguese expansion over English) found the breakages
   concentrated in a handful of places. Two moves fix them: let the
   containers give, and let the type shrink rather than the box grow.
   Everything here is a no-op in English, where the text already fits.
   ================================================================== */

/* Bento cards clamp their title to one line and body to two, which is exactly
   right in English and truncates everything else. One more line each, with the
   type easing down, absorbs the expansion inside the same card height. */
.usp-card__title, .usp-card__description { --clamp-title: 2; --clamp-desc: 3; }
.usp-card__title { font-size: clamp(12.6px, 1.05vw, 14.4px); }
.usp-card__description { font-size: clamp(11.6px, 0.95vw, 13.05px); }
.usp-card__label { overflow-wrap: anywhere; }

/* This heading was nowrap at 50px, so a longer translation ran straight out of
   the section. It already wrapped on phones; it should wrap everywhere. */
.ac-title {
  white-space: normal;
  font-size: clamp(28px, 4.2vw, 50.4px);
  text-wrap: balance;
}
/* The CTA below it is a single inline-flex pill that could not shrink or wrap,
   so a longer label pushed it past the viewport. */
.ac-actions { width: 100%; }
.ac-btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  padding: 18px clamp(20px, 3vw, 36px);
  font-size: clamp(14px, 1.3vw, 17px);
}

/* Program switches: fixed generous padding plus nowrap left nothing to give
   once a label grew. The track may wrap, the buttons may shrink. */
.rc-switch { max-width: 100%; flex-wrap: wrap; justify-content: center; }
.rc-switch-btn {
  min-width: 0;
  padding: 16px clamp(16px, 4vw, 44px);
  font-size: clamp(0.95rem, 3vw, 1.18rem);
}
.hiw-toggle-wrap { max-width: 100%; flex-wrap: wrap; justify-content: center; }
.hiw-toggle { max-width: 100%; }
.hiw-toggle-btn {
  min-width: 0;
  padding: 11px clamp(12px, 3.2vw, 24px);
  font-size: clamp(0.78rem, 2.6vw, 0.92rem);
}

/* One bento description is inline-styled nowrap with negative side margins, so
   its two <br>-separated lines can bleed past the card padding. In English they
   just fit; anything longer is cut off. The <br> already sets the break, so
   dropping nowrap keeps the two-line shape and lets a long line wrap. */
.usp-card__description { white-space: normal !important; }

/* Home banners: the award strapline sits in .banner-art, not .banner-copy, and
   its wide letter-spacing makes it the first thing to run out of the card. */
div.home-banner .banner-copy,
div.home-banner .banner-art { max-width: 100%; min-width: 0; }
div.home-banner span[style*="letter-spacing:0.26em"],
div.home-banner span[style*="letter-spacing: 0.26em"] {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Footer legal row: the links could not shrink below their own text, so the
   last one nudged past the container edge. */
.footer-legal-links { max-width: 100%; column-gap: 14px; row-gap: 8px; }
.footer-legal-links a,
.footer-legal-links span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* Flex children default to min-width:auto, which means they refuse to shrink
   below their content and push the row instead. These are the rows the audit
   showed doing it. */
.nav-actions > *,
.footer-bottom > *,
.rc-stats > *,
.hiw-toggle > * { min-width: 0; }

/* ===== RTL: hand-written, for what the mirror cannot reach =====
   The generator only rewrites rules in this stylesheet, and it runs after this
   block, truncating everything from its own marker down. Keep hand-written RTL
   here, above the marker, or a regeneration will delete it. */

/* Challenge-builder tooltips are inline-styled left:0 and would open off the
   wrong edge of a right-aligned row. */
[dir="rtl"] .cb-tip { left: auto !important; right: 0 !important; }

/* A paragraph that is entirely a figure or a product name should sit with the
   right-aligned text around it rather than being repositioned by the bidi
   algorithm. */
[dir="rtl"] [translate="no"] { unicode-bidi: isolate; }

/* ...but two adjacent ones are the two halves of a single product name
   ("Freedom" + "Evaluation"), and isolating each separately makes them
   independent runs that the RTL parent then orders backwards, so the heading
   read "Evaluation Freedom". Letting an adjacent pair rejoin the surrounding
   run keeps the name in its own order. */
[dir="rtl"] [translate="no"]:has(+ [translate="no"]),
[dir="rtl"] [translate="no"] + [translate="no"] { unicode-bidi: normal; }

/* The gold banner pins its copy column left:48px and its artwork right:60px,
   and the two overlap by design: the copy is 710px wide in a 1272px canvas
   and the art starts at 552px. In English that is invisible, because the copy
   is left-aligned and its paragraph is capped at 500px, so the text stops
   well short of the art. Under dir="rtl" the box stayed on the left while its
   text right-aligned, running the Arabic under the globe.

   Mirroring the boxes alone put the copy on the dark end of the canvas, where
   navy on navy is unreadable, so the 96deg brand gradient is mirrored to
   264deg as well and the copy keeps the light side it was designed for. The
   phone layout already rotates this gradient vertical for the same reason.

   !important throughout: the offsets are inline on the elements, and an
   inline declaration beats a stylesheet rule at any specificity. Override
   only one side and the box ends up with both left and right set, at which
   point an over-constrained absolute box in RTL drops left rather than right,
   moving the copy onto the artwork instead of away from it.

   Scoped above 760px, where the banner is already stacked and static. */
/* The offsets and the gradients are now mirrored per element as the page is
   built, so there is nothing left to override here. What stood in this block
   could not tell the three banner artworks apart: one left offset applied to
   all of them, which stacked the platform logos on top of each other. */

/* The dove is the one piece of card artwork placed by a transform alone, with
   no offset to mirror: it hangs off its own static position, which sits at the
   opposite edge under dir="rtl". Pulling it a further 38% in the same direction
   then took it out of the card entirely, 170px clear of it on a desktop and
   276px on a phone. Flipping the sign puts it exactly where its mirror image
   belongs, measured against the English card at both widths.

   The magnitude is repeated rather than shared because the phone rule below
   560px uses its own, and a transform cannot be half overridden. */
[dir="rtl"] .usp-card:nth-child(3) img { transform: translateX(38%) !important; }
@media (max-width: 560px) {
  [dir="rtl"] .usp-card:nth-child(3) img { transform: translateX(46%) !important; }
}

/* Arabic has no capital forms, so uppercasing is a no-op, but the tracking on
   these labels pulls the glyphs apart and breaks the cursive joins. */
[dir="rtl"] .section-tag,
[dir="rtl"] .eyebrow-gold,
[dir="rtl"] .af-eyebrow,
[dir="rtl"] .page-hero-eyebrow,
[dir="rtl"] .usp-card__label,
[dir="rtl"] .footer-lang-label { letter-spacing: 0; text-transform: none; }

/* Range sliders would run right to left, reading backwards against the axis
   labels printed beneath them. */
[dir="rtl"] [data-earnings-calculator] input[type="range"] { direction: ltr; }

/* Both components are mostly figures, sizes and platform names, so they read
   from the inline start rather than being force-aligned. */
[dir="rtl"] [data-challenge-builder],
[dir="rtl"] [data-earnings-calculator] { text-align: start; }

/* Arabic is mirrored, so direction and alignment come from dir="rtl" on the
   root and nothing here needs to force them. This block used to hold the
   opposite: unicode-bidi:plaintext with text-align:left, which gave each
   paragraph its own direction so the punctuation landed correctly while the
   block still started at the left margin. That was the price of running an
   unmirrored layout, and it is not what an Arabic page looks like. */

/* ==================================================================
   LOCATION BANNER AND JURISDICTION NOTICE  (js/geo.js)
   The bar offers another language and never redirects; the notice tells a
   visitor in a restricted jurisdiction before they pay. Both are appended to
   the body at the end, so they sit above the page without the layout above
   them moving.

   Both are centred with logical properties rather than left plus a negative
   translate. The bar carries its own dir, because it speaks a language the
   page does not, and a mirrored left/right pair would have fought the
   full-width mobile rule; inset-inline with an auto margin centres itself in
   either direction and needs no RTL override at all.
   ================================================================== */
.geo-bar {
  position: fixed; inset-inline: 16px; bottom: 18px;
  width: fit-content; max-width: calc(100% - 32px); margin-inline: auto;
  z-index: 80; display: flex; align-items: center; gap: 14px;
  padding-block: 11px; padding-inline: 18px 12px;
  border-radius: 999px; border: 1px solid var(--c-bg-re3668136014);
  background: var(--c-bg-ffffff); box-shadow: 0 16px 40px rgba(16, 39, 65, 0.18);
  font-size: 0.9rem; color: var(--c-fg-22314f);
  animation: geoIn 0.32s cubic-bezier(.3, .8, .35, 1) both;
}
@keyframes geoIn { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .geo-bar { animation: none; } }
.geo-bar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-bar-go {
  flex-shrink: 0; padding: 7px 16px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-heading); font-size: 0.86rem; font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, var(--c-bg-33599f) 0%, var(--c-bg-22406e) 55%, var(--c-bg-192c49) 100%);
  color: var(--c-fg-ffffff);
}
.geo-bar-close {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--c-fg-46587a); cursor: pointer;
}
.geo-bar-close:hover { background: var(--c-bg-eef2f7); }
.geo-bar-go:focus-visible, .geo-bar-close:focus-visible { outline: 2px solid var(--c-bg-19407a); outline-offset: 2px; }
@media (max-width: 600px) {
  .geo-bar { width: auto; flex-wrap: wrap; border-radius: 18px; }
  .geo-bar-text { white-space: normal; flex: 1 1 100%; }
}

.geo-note {
  position: fixed; inset-inline: 16px; bottom: 18px; margin-inline: auto;
  z-index: 90; width: min(420px, calc(100% - 32px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 18px 20px; border-radius: 18px;
  border: 1px solid var(--c-bg-re255909006); background: var(--c-bg-ffffff);
  box-shadow: 0 18px 44px rgba(16, 39, 65, 0.22);
}
/* Deep enough to read as a heading on white; the dark block lifts it. */
.geo-note-title { font-family: var(--font-heading); font-size: 0.98rem; color: #b8322a; }
.geo-note-body { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--c-fg-46587a); }
.geo-note-link { font-size: 0.85rem; font-weight: 600; color: var(--c-fg-19407a); }
.geo-note-ack {
  align-self: stretch; margin-top: 4px; padding: 9px 16px; border: 0; border-radius: 10px;
  font-family: var(--font-heading); font-size: 0.86rem; font-weight: 700; cursor: pointer;
  background: var(--c-bg-19407a); color: var(--c-fg-ffffff);
}
/* The two never share the screen: js/geo.js holds the language offer back
   until the notice has been acknowledged, so neither has to make room. */

/* ==================================================================
   MARQUEES, MIRRORED
   Both tickers are one track of max-content width holding two identical
   copies, slid sideways by exactly one copy so the seam never shows.

   Which way it slides is direction-dependent, and the generated mirror below
   cannot fix it: the movement lives in @keyframes, which the generator skips,
   and on the homepage strip it lives in an inline style, which no selector can
   outrank without !important.

   Left to itself the Arabic strip drains. Measured on the homepage: the track
   spans -1700 to 1216 relative to the strip, because a max-content box in a
   right-to-left container hangs its right edge on the container's right edge
   and overflows leftwards. The copy in view is therefore the first one, at
   -242 to 1216, and the second waits off-screen to its left. Sliding left, as
   the left-to-right keyframes do, walks the visible copy away with nothing
   behind it: coverage fell from 87% to 35% over seventeen seconds and kept
   going, while English held at 94%.

   The waiting copy is to the left, so the track has to travel right, and it is
   the travel that has to change rather than its direction in time.
   animation-direction: reverse moves the right way but starts a whole copy
   left, which opens on an empty strip and fills up. So: its own keyframes,
   same distance, opposite sign.
   ================================================================== */
@keyframes marqueeRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
[dir="rtl"] .rc-marquee-track { animation-name: marqueeRtl; }
/* The homepage track carries its animation in an inline style, which no
   selector outranks on its own. */
[dir="rtl"] .usp-marquee-strip > div { animation-name: marqueeRtl !important; }

/* ===== GENERATED: RTL MIRROR ===== */
/* Mirrored from the rules above by scratchpad/rtl.py. Only
   direction-dependent declarations are repeated here; flex and grid
   reverse on their own once dir="rtl" is set on <html>. Regenerate
   rather than editing by hand. */
@media (max-width: 999px) {
  [dir="rtl"] .sound-toggle {
    margin-right: 0;
    margin-left: 0;
  }
  [dir="rtl"] .nav-cta-mobile {
    margin-right: 0;
    margin-left: auto;
  }
  [dir="rtl"] .navbar.scrolled .nav-inner:has(.nav-pages.active) .nav-slogan {
    margin-right: 0;
    margin-left: auto;
  }
  [dir="rtl"] .navbar.scrolled .nav-inner {
    padding-left: 0;
    padding-right: 8px;
  }
  [dir="rtl"] .nav-pages.active .nav-drop-menu {
    padding: 0 14px 0 0;
  }
}
[dir="rtl"] .nav-inner {
  padding: 0 22px 0 14px;
}
[dir="rtl"] .nav-drop-open > .nav-drop-menu {
  transform: translate(50%, 0);
}
[dir="rtl"] .hero-content {
  text-align: right;
}
[dir="rtl"] .hero-tagline {
  text-align: right;
}
[dir="rtl"] .faq-question {
  text-align: right;
}
[dir="rtl"] .footer-disclaimer {
  text-align: right;
}
[dir="rtl"] .faq-search-icon {
  left: auto;
  right: 18px;
}
[dir="rtl"] .faq-search-input {
  padding: 15px 48px 15px 46px;
}
[dir="rtl"] .faq-search-clear {
  right: auto;
  left: 14px;
}
[dir="rtl"] .fpc-card::after {
  right: auto;
  left: -140px;
}
[dir="rtl"] .fpv-card::after {
  right: auto;
  left: -140px;
}
[dir="rtl"] .fpv-step ul {
  padding-left: 0;
  padding-right: 20px;
}
[dir="rtl"] .rc-banner::after {
  right: auto;
  left: -140px;
}
[dir="rtl"] .rc-marquee-run {
  padding-right: 0;
  padding-left: 14px;
}
[dir="rtl"] .rc-card::after {
  right: auto;
  left: -90px;
}
[dir="rtl"] .fc-hero-globe {
  transform: translateX(-54px);
}
[dir="rtl"] .magic-bento-spotlight {
  transform: translate(50%, -50%);
}
[dir="rtl"] .ac-glow-blue {
  right: auto;
  left: -108px;
}
[dir="rtl"] .ac-glow-soft {
  left: auto;
  right: -81px;
}
[dir="rtl"] .ac-btn-sheen {
  left: auto;
  right: 0;
}
[dir="rtl"] .fp-cta::before {
  right: auto;
  left: -70px;
}
[dir="rtl"] .af-fine ul {
  padding-left: 0;
  padding-right: 20px;
}
[dir="rtl"] .nfy {
  text-align: right;
}
[dir="rtl"] .nfy::after {
  right: auto;
  left: -140px;
}
[dir="rtl"] .nfy ul {
  padding-left: 0;
  padding-right: 20px;
}
[dir="rtl"] .faq-restricted::after {
  right: auto;
  left: -140px;
}
[dir="rtl"] .tv-why-card::before {
  right: auto;
  left: -80px;
}
[dir="rtl"] .tv-why-card::after {
  left: auto;
  right: -90px;
}
[dir="rtl"] .tv-badge span {
  text-align: right;
}
[dir="rtl"] .tv-region-q {
  text-align: right;
}
[dir="rtl"] .tv-region-note {
  text-align: right;
}
[dir="rtl"] .cr-form-card::before {
  right: auto;
  left: -80px;
}
@media (min-width: 1000px) {
  [dir="rtl"] .nav-lang {
    margin-right: 0;
    margin-left: -10px;
  }
  [dir="rtl"] .sound-toggle {
    margin-right: 0;
    margin-left: -14px;
  }
  [dir="rtl"] .nav-pages {
    margin-right: 0;
    margin-left: 16px;
  }
}
@media (hover: hover) and (min-width: 1000px) {
  [dir="rtl"] .nav-drop:hover > .nav-drop-menu {
    transform: translate(50%, 0);
  }
}
@media (min-width: 1000px) and (max-width: 1320px) {
  [dir="rtl"] .sound-toggle {
    margin-right: 0;
    margin-left: -17px;
  }
  [dir="rtl"] .nav-lang-item {
    margin-right: 0;
    margin-left: 0;
  }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  [dir="rtl"] .nav-pages {
    margin-right: 0;
    margin-left: 8px;
  }
  [dir="rtl"] .sound-toggle {
    margin-right: 0;
    margin-left: -19px;
  }
}
@media (max-width: 760px) {
  [dir="rtl"] .fc-hero-globe {
    transform: translateX(-36px);
  }
  [dir="rtl"] body.home > footer {
    text-align: right;
  }
  [dir="rtl"] body.home > footer ul {
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] body.home .footer-disclaimer {
    text-align: right;
  }
  [dir="rtl"] .footer-bottom {
    padding-right: 24px;
    padding-left: 24px;
    text-align: right;
  }
  [dir="rtl"] .footer-meta, [dir="rtl"] .footer-lang, [dir="rtl"] .footer-lang-label {
    text-align: right;
  }
  [dir="rtl"] .fcm-panel::after {
    right: auto;
    left: -70px;
  }
  [dir="rtl"] .af-fine {
    text-align: right;
  }
}
@media (max-width: 400px) {
  [dir="rtl"] [data-challenge-builder] div[style*="width:78px;height:78px;overflow:hidden"] > img {
    margin: -7.8px -7px 0 0 !important;
  }
}
/* ===== END GENERATED: RTL MIRROR ===== */

/* ==================================================================
   DARK MODE: hand-written
   The generated token block below handles every colour that was written
   as a value. This covers what it cannot: the toggle itself, surfaces
   that were never given a colour and inherited white from the browser,
   and images that assume a light page behind them.
   Keep this above the generated marker; the generator truncates from
   there down on every run.
   ================================================================== */

/* The jurisdiction notice. Its red is chosen for contrast on white and goes
   muddy on navy, so dark mode takes the lighter warning red the rules tables
   already use. */
[data-theme="dark"] .geo-note-title { color: #f47676; }

/* The page canvas. Nothing declared a colour for it, so it was the
   browser default and the token swap had nothing to bite on. */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body,
[data-theme="dark"] .page-body { background: #0e1a2f; color: #e6edf9; }

/* One ground for the whole page.
   In light mode the sections alternate between white and a faint grey wash,
   which is what gives a bright page its rhythm. Inverted, that same alternation
   reads as banding: the page appears to change colour section by section for no
   reason. So every section-level tint is dropped in dark mode and the page
   carries a single navy, the one the Freedom header uses.
   Cards, banners and the footer keep their own surfaces. Those are objects
   sitting on the page rather than the page itself, and they are what gives the
   dark layout its depth once the bands are gone. */
[data-theme="dark"] .challenges,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .fc-hero,
[data-theme="dark"] .af-section,
[data-theme="dark"] .ab-hero,
[data-theme="dark"] .section[style*="linear-gradient"] { background: transparent !important; }

/* Photographic and 3D assets are lit for a white page. Easing the
   brightness stops them glaring against the navy. */
[data-theme="dark"] .usp-card img,
[data-theme="dark"] .banner-art img,
[data-theme="dark"] .hiw-card-embed img { filter: brightness(0.92) saturate(1.02); }

/* Three of those assets go the other way. The 100%, the 2x and the bento dove
   are deep navy wireframes drawn to sit on a white card, so easing them down
   pushed them into the card they stand on and they all but vanished. They are
   lifted instead, to a lighter blue that still holds the artwork's depth.
   Matched on the file so both copies of the dove are covered, the homepage
   bento and the one on the About page. Must follow the rule above: the two
   have the same weight, so order is what decides.
   The hero dove on the Freedom page is a different, brighter file that carries
   no filter at all, and it reads correctly as it is. */
[data-theme="dark"] img[src$="payout-100-percent.webp"],
[data-theme="dark"] img[src$="zero-commissions.webp"],
[data-theme="dark"] img[src$="freedom-dove-card.webp"] {
  filter: brightness(1.7) saturate(1.12);
}

/* The Instant hero's lightning bolt reads muted on both grounds: a deep-blue
   wireframe that is heavy on white and lost on navy. One filter for both themes
   rather than a per-theme swap, so the emblem is a single consistent image:
   saturation lifts the blue to something electric and a little brightness opens
   the mesh, tuned to stop short of the neon glare a heavier hand gave the dark
   page. The theme-inversion generator never touched this img, so nothing here
   is undoing its work; this is the artwork's own colour, made vibrant. */
img[src$="instant-lightning-bolt.webp"] {
  filter: saturate(1.55) brightness(1.22);
}

/* The navy logo disappears against a navy bar, so the white one takes over.
   A filter used to fake it, and `brightness(0) invert(1)` flattens everything
   it touches: the gold candle in the wordmark came out white along with the
   rest. The real white artwork, the same file the footer already uses, keeps
   the candle and the silver bevel. Both files are in the markup and only one
   is ever displayed, so there is no flash and nothing to fetch on a toggle.

   Scoped through .nav-logo on purpose: `.nav-logo img` already sets
   `display: block`, and a lone class loses to a class plus an element, so the
   hidden one was not hidden and both logos rendered side by side. */
.nav-logo .nav-logo-img--dark { display: none; }
[data-theme="dark"] .nav-logo .nav-logo-img--light { display: none; }
[data-theme="dark"] .nav-logo .nav-logo-img--dark { display: block; }

/* Toggle button. Sits with the nav actions and matches their height. */
/* Language picker in the navbar. It sits immediately before the burger in the
   markup, which puts it left of the burger on a phone and left of the theme
   toggle on desktop, where the burger is hidden. One position, both layouts.
   The footer keeps its own flag row; this is a second way in, not a
   replacement. Sized and coloured off .theme-toggle so the two read as a pair.

   Flags only, no names: fifteen names in a list made a panel tall enough to
   run off a phone. The language each flag stands for is on its title and
   aria-label, so it is still announced and still shown on hover. */
.nav-lang {
  position: relative;
  display: inline-flex;
  /* .nav-pages is absolutely centred at z-index 2 and spans the middle of the
     bar, so without this it covers the button and swallows the clicks. */
  z-index: 3;
}
/* .nav-inner is space-between, so a plain flow item lands in the middle of the
   bar. This pushes it up against .nav-actions, whose first child is the theme
   toggle, which is where it belongs on desktop. On a phone .nav-actions is
   hidden and the burger is the last item, so the picker already sits to its
   left and needs nothing. */
/* Above the burger's breakpoint the picker belongs ahead of Home, where it
   reads as part of the row rather than as a sixth control crowding the corner.
   It gets there by flex order rather than by being moved in the DOM: see the
   ordering block in the 1000px media query.

   The panel hangs off whichever end of the trigger has room. In the corner
   that is the right; in the middle of the bar the trigger's left edge is the
   one the eye follows down. */
@media (min-width: 1000px) {
  .nav-lang-menu { inset-inline-end: auto; inset-inline-start: -8px; }
}
/* Just the flag, no pill and no caret: a flag in a navbar reads as a language
   switch on its own. The button keeps padding so the target stays finger sized
   while the mark itself stays small. */
.nav-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.nav-lang-current {
  display: block;
  width: 26px;
  height: auto;
  border-radius: 2px;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.nav-lang-toggle:hover .nav-lang-current { transform: scale(1.08); }
/* Japan, South Korea and Indonesia are white to their edges, so on the white
   bar and on the white panel the flag lost its bottom or its sides and read
   as a floating red mark. A hairline of the navy the bar already uses gives
   them an edge without turning into a frame: it is drawn as a shadow rather
   than a border so the 26px mark keeps its size and the row does not move.
   Matched on the file name, so a flag only needs listing here, not marking
   up on sixteen pages in fifteen languages. */
.nav-lang img[src$="/ja.svg"],
.nav-lang img[src$="/ko.svg"],
.nav-lang img[src$="/id.svg"] {
  box-shadow: 0 0 0 1px rgba(25, 64, 122, 0.32);
}
/* ...and the open state's ring replaces that hairline rather than losing to
   it, hence img here: same weight as the rule above, and later. */
.nav-lang-toggle[aria-expanded="true"] img.nav-lang-current {
  box-shadow: 0 0 0 2px rgba(25, 64, 122, 0.35);
}
/* Keyboard users still need to see where they are. */
.nav-lang-toggle:focus-visible { outline: 2px solid rgba(25, 64, 122, 0.55); outline-offset: 2px; }

/* One row of the language menu. Five of these are what the menu shows before
   it starts scrolling, so the height and the count are stated in one place. */
.nav-lang { --lang-row: 38px; }
.nav-lang-menu {
  position: absolute;
  top: calc(100% + 9px);
  /* The end edge, not the right one. On a phone the trigger sits against the
     side the bar's controls are on, so the panel has to open away from it:
     leftwards in English, rightwards in Arabic, where anchoring to the right
     hung 77px of the panel off the screen. */
  inset-inline-end: 0;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  /* One language per row, named, with five rows in view and the rest a scroll
     away. As a grid of flags this needed nine rows to hold twenty-seven
     languages, which is taller than the viewport on a phone and asks the
     reader to recognise a country rather than read a language. It also had no
     answer for two languages under one flag: Mandarin and Cantonese are both
     spoken in China, and only the name separates them. */
  display: block;
  width: 15rem;
  max-height: calc(var(--lang-row) * 5 + 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  border: 1px solid var(--c-bg-re366813602);
  background: var(--c-bg-ffffff);
  box-shadow: 0 18px 44px rgba(16, 39, 65, 0.16);
}
.nav-lang-menu[hidden] { display: none; }
.nav-lang-menu .lang-flag {
  display: flex;
  align-items: center;
  gap: 10px;
  /* the whole row is the target, and it is taller than a fingertip minimum */
  height: var(--lang-row);
  padding: 0 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.86rem;
  line-height: 1;
  color: var(--c-fg-22314f);
}
.nav-lang-menu .lang-flag img { display: block; flex: 0 0 auto; width: 24px; height: auto; border-radius: 2px; }
.lang-flag-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The footer row is flags only, so its name would sit under the flag. */
.lang-flags .lang-flag-name { display: none; }
/* A scrollbar the menu can own, so the fact that it scrolls is visible. */
.nav-lang-menu { scrollbar-width: thin; scrollbar-color: var(--c-bg-re3668136014) transparent; }
.nav-lang-menu::-webkit-scrollbar { width: 8px; }
.nav-lang-menu::-webkit-scrollbar-thumb {
  background: var(--c-bg-re3668136014); border-radius: 99px;
  border: 2px solid var(--c-bg-ffffff);
}
.nav-lang-menu .lang-flag:hover { background: var(--c-bg-f2f6fd); }
.nav-lang-menu .lang-flag[aria-current="true"] {
  background: var(--c-bg-f2f6fd);
  outline: 2px solid rgba(25, 64, 122, 0.35);
  outline-offset: -2px;
}

/* Phones: it stays in the bar beside the burger rather than moving into the
   drawer, so switching language never needs the menu opened first. The navbar
   is already fixed, so it rides along while scrolling. */
@media (max-width: 999px) {
  .nav-lang { margin-right: 2px; }
  /* a finger-sized target on touch, while the flag itself stays small */
  .nav-lang-toggle { width: 44px; height: 40px; }
  .nav-lang-current {
    width: 24px;
    /* Optical, not geometric: the boxes already share a centre, but the flag
       is a solid 18px block against 16px of burger bars, so its top edge read
       as sitting a pixel high. This lines the two top edges up. translate
       rather than margin so it cannot disturb the row. */
    transform: translateY(1px);
  }
  .nav-lang-toggle:hover .nav-lang-current { transform: translateY(1px) scale(1.08); }
}

/* Narrow phones have about 30px less to give and the logo alone takes 163 of
   it, so the three controls tighten rather than wrapping the burger onto a row
   of its own. Declared after the block above, not beside the other navbar
   breakpoints earlier in the file: these override rules of the same weight,
   and at equal weight the later one wins whatever the query says. */
@media (max-width: 380px) {
  .nav-inner { column-gap: 4px; }
  .sound-toggle { width: 32px; height: 32px; }
  .nav-lang-toggle { width: 34px; height: 36px; }
  .nav-lang-current { width: 22px; }
}
/* Smallest phones still in use, 320px. Tightening the controls is no longer
   enough on its own: the wordmark is more than half the bar, so it comes down
   with them, and the pill gives up most of its side padding. */
@media (max-width: 340px) {
  .nav-inner { padding-left: 10px; padding-right: 8px; }
  .nav-logo img { height: 64px; }
  .sound-toggle { width: 30px; height: 30px; }
  .nav-lang-toggle { width: 30px; height: 34px; }
  .nav-lang-current { width: 20px; }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(25, 64, 122, 0.22);
  border-radius: 50%;
  background: transparent;
  color: #19407a;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.theme-toggle:hover { border-color: rgba(25, 64, 122, 0.5); background: rgba(25, 64, 122, 0.06); }
.theme-toggle:focus-visible { outline: 2px solid #19407a; outline-offset: 2px; }
.theme-icon { width: 17px; height: 17px; display: block; }
/* One icon shows the action, not the state: a moon to go dark, a sun to
   come back. */
.theme-icon--moon { display: none; }
[data-theme="dark"] .theme-icon--sun { display: none; }
[data-theme="dark"] .theme-icon--moon { display: block; }
[data-theme="dark"] .theme-toggle { border-color: rgba(214, 228, 250, 0.28); color: #d6e4fa; }
[data-theme="dark"] .theme-toggle:hover { border-color: rgba(214, 228, 250, 0.55); background: rgba(214, 228, 250, 0.08); }

/* Gold keeps its own values in dark mode, which is right everywhere it is a
   highlight and wrong in the one place it is a surface: these two cards are a
   near-white wash that ends in cream. Left alone the card would fade from navy
   into a pale band. The gold border and the gold label above it are unchanged. */
[data-theme="dark"] .af-card--gold,
[data-theme="dark"] .pw-gate--gold {
  background: linear-gradient(160deg, #16294a 0%, #1a3054 46%, #24365a 100%);
}

/* The reward card's figure, back in silver.
   The card is navy in both themes and the figure is a white-to-silver ramp
   clipped to the text. Those stops are opaque, so they read as a page wash
   rather than as the sheen on a numeral, and inverting them painted the figure
   navy on navy. It is the only place this ramp is used.
   background-image, not the shorthand: the shorthand resets background-clip to
   border-box and the silver renders as a solid bar behind the text. */
[data-theme="dark"] [style*="--c-bg-c9d3e2"] {
  background-image:
    linear-gradient(180deg, #ffffff 0%, #f4f7fb 40%, #c9d3e2 52%, #eef2f8 66%, #ffffff 100%) !important;
}

/* Hero marquee icons, gold on the dark page.
   The tiles are a pale blue wash with a two-tone blue glyph, drawn for a white
   hero; on navy they go flat and grey. In dark mode the glyph itself turns
   gold and the tile behind it falls back to a faint translucent gold, almost
   the page showing through, so the icon reads as the gold thing rather than
   the whole square.
   background-image rather than the shorthand, which drops the inline
   border-radius handling on some engines; the inline styles are what these
   rules have to beat, hence !important. Scoped inside .usp-marquee-strip only,
   so icon tiles elsewhere are untouched. Home, Freedom and Instant heroes. */
[data-theme="dark"] .usp-marquee-strip span[style*="width:28px"] {
  background-image:
    linear-gradient(165deg, rgba(232, 197, 106, 0.14), rgba(184, 134, 47, 0.14)) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 197, 106, 0.28) !important;
}
/* The glyph, in two tones of gold. The light detail stroke goes dark so it
   still separates the shapes it draws on top of a gold body. */
[data-theme="dark"] .usp-marquee-strip [fill="#244488"] { fill: #e8c56a; }
[data-theme="dark"] .usp-marquee-strip [stroke="#244488"] { stroke: #b8862f; }
[data-theme="dark"] .usp-marquee-strip [fill="#5b8bd0"] { fill: #f3dc9a; }
[data-theme="dark"] .usp-marquee-strip [stroke="#dbe7f7"] { stroke: #6b4e12; }

/* Hero globe, two dark-only touches.
   The ocean disc carries a hairline stroke that is navy on navy in light mode,
   so it is invisible there. The colour generator inverts it and it becomes a
   pale ring around the globe on the dark page. Scoped through .hero-globe so it
   outweighs the generated [stroke="#0e2140"] rule regardless of source order,
   and dropped rather than recoloured because the disc never needed an edge. */
[data-theme="dark"] .hero-globe [stroke="#0e2140"] { stroke: transparent; }
/* The glow that pulses over the highlighted region is a white radial. Its
   stops are white, which the generator inverts to navy alongside every other
   white gradient stop, so the highlight vanished into the dark globe. Kept
   white here, the same as light mode. The #glowG id outweighs the generated
   [stop-color="#ffffff"] rule; scoped to this gradient so the sitewide swap of
   white stops is otherwise left as it is. */
[data-theme="dark"] #glowG stop { stop-color: #ffffff; }
/* The region pill's pulsing dot is gold, which is the accent on a white hero.
   On the dark page it goes white, and its pulse with it, so the blink matches
   the white region rings out on the globe. */
[data-theme="dark"] .globe-wrap .pill-dot {
  background: #ffffff;
  animation-name: globeBeatDark;
}
@keyframes globeBeatDark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* Labels on the small gold discs: the pathway step 4, and the POPULAR chip
   wherever it appears. The disc keeps its light-mode gold, so the label has to
   keep its light-mode near-black. Matched on the specular stop the gold ramp
   carries, which every one of them has and nothing else does. */
[data-theme="dark"] [style*="--c-gl-fffdf2"] { color: #111318 !important; }

/* ---------- Contrast fixes ----------
   Measured against the painted backdrop with a WCAG audit, not by eye. */

/* The footer runs navy in both themes, and its fine print was set at 0.35
   alpha white, which is 3.1:1 there. These four are raised in both modes
   because the defect is the same in both; the legal line is the one piece of
   text on the site most likely to be read closely. */
.footer-disclaimer { color: rgba(255, 255, 255, 0.62); }
.footer-legal-links { color: rgba(255, 255, 255, 0.66); }
.footer-lang-label { color: rgba(255, 255, 255, 0.62); }
.footer-meta { color: rgba(255, 255, 255, 0.72); }

/* Labels on surfaces that deliberately keep their light-mode colour.
   The gold buttons and the green PASSED chip do not invert, so their text must
   not invert either: a gold face with a near-white label is 2.3:1.
   .btn-primary is not one of them. It is the blue glass button, white on
   glass in both themes, and darkening its label was a mistake. */
[data-theme="dark"] .nav-cta,
[data-theme="dark"] .glass-button--gold .glass-button-text,
[data-theme="dark"] .ac-btn,
[data-theme="dark"] .nav-cta-mobile,
[data-theme="dark"] [data-challenge-builder] span[style*="POPULAR"] { color: #0d1a2e; }
/* The POPULAR chip is inline-styled, so it needs the weight of !important. */
[data-theme="dark"] [data-challenge-builder] [style*="letter-spacing:0.1em"] { color: #111318 !important; }

/* Icons drawn on those same gold faces. An SVG presentation attribute cannot
   take a var(), so the generated block inverts each mark colour sitewide by
   attribute value. That is right everywhere except here, where the surface
   under the mark did not invert either. Matched on the gold the host carries,
   which outweighs the generated rule. */
[data-theme="dark"] .ac-btn [stroke="#000000"] { stroke: #000000; }

[data-theme="dark"] [style*="--c-gl-fffdf2"] [stroke="#111318"] { stroke: #111318; }
[data-theme="dark"] [style*="--c-gl-fdf3d0"] [stroke="#3a2a08"] { stroke: #3a2a08; }
[data-theme="dark"] .pw-gate-pill span,
[data-theme="dark"] .rc-switch-btn.is-on { color: #f2f6fd; }

/* The eyebrow ramp, lifted for the dark page.
   An eyebrow is gold gradient clipped to the text, so its colour lives in a
   `background` and is read as a surface: gold passes through untouched and the
   ramp stays the dark bronze that was drawn for a white page. On navy the
   darkest stop measures 3.34:1, under the 4.5 small text needs.
   Each stop rises 12 points of lightness, which keeps the metallic sweep
   intact, its hue and its saturation, and takes the darkest stop to 5.95:1.
   .fcm-eyebrow keeps the original: it sits on a navy card in both themes. */
[data-theme="dark"] .eyebrow-gold,
[data-theme="dark"] .af-eyebrow,
[data-theme="dark"] .page-hero-eyebrow,
[data-theme="dark"] .tv-eyebrow,
[data-theme="dark"] .section-tag,
[data-theme="dark"] body .section-tag {
  background: linear-gradient(105deg, #c08f19 0%, #dba726 32%, #d9b44f 52%, #dba726 72%, #c08f19 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Inline styles win over the class rules above, so the handful of labels that
   carry their colour inline need the extra weight. */
[data-theme="dark"] .faq-restricted h3,
[data-theme="dark"] .faq-restricted p,
[data-theme="dark"] .faq-restricted-list,
[data-theme="dark"] .faq-restricted-warn { color: #f08fa0 !important; }
/* Two labels sit on surfaces that keep their light-mode colour, so their text
   has to stay dark too. Both are inline-styled with no class of their own, so
   they are matched on the inline gold and green they carry. */
[data-theme="dark"] [style*="--c-bg-f9edbf"] { color: #10203a !important; }
[data-theme="dark"] span[style*="letter-spacing: 1.3px"] { color: #06381d !important; }

/* Muted body copy inside cards was landing just under the line on the dark
   card surface. */
[data-theme="dark"] .usp-card__description { color: #a8bad6; }
[data-theme="dark"] .usp-platform-label { color: #dbe7f7; }
[data-theme="dark"] .af-card-label,
[data-theme="dark"] .pw-gate-label { color: #dde5f2; }

/* The rose used across the forbidden-practices and restricted-jurisdiction
   copy sits between 4.2 and 4.4 on the dark page: one step lighter clears it. */
[data-theme="dark"] .fpc-num,
[data-theme="dark"] .fpc-aside strong,
[data-theme="dark"] .faq-restricted h3,
[data-theme="dark"] .faq-restricted p,
[data-theme="dark"] .faq-restricted-list,
[data-theme="dark"] .faq-restricted-warn,
[data-theme="dark"] .rc-intro-warn { color: #f08fa0; }
/* That rose belongs to the forbidden-practices stack, whose numbers and aside
   labels are red in light mode too. The Pathway stack recolours them blue and
   gold, and the rule above was landing on it as well: on a dark page the
   Pathway and Scaling cards came out rose, matching neither their own light
   mode nor the page around them. They get the dark end of their own two
   colours instead. */
[data-theme="dark"] .fpc-stack--pathway .fpc-num { color: #a9c8f2; }
[data-theme="dark"] .fpc-stack--pathway .fpc-aside strong { color: #dcae3e; }

/* Dark-only. The rose used for forbidden-practice pills sits at 4.44:1 on the
   dark page, just under the line, so it lightens a step. */
[data-theme="dark"] .rc-pill { color: #e8798e; }

/* The active and hovered FAQ category chips take their colour from the
   --green-* accent scale, which is a near-black ramp. That scale is used for
   backgrounds as well as text, so inverting the whole ramp would turn dark
   chips white; these two rules are corrected directly instead. */
[data-theme="dark"] .faq-category.active,
[data-theme="dark"] .faq-category:hover {
  color: #e6edf6;
  border-color: rgba(230, 237, 246, 0.45);
  background: rgba(230, 237, 246, 0.10);
}

/* Phones: .nav-actions is hidden until the burger opens, so the toggle
   moves into the bar beside the burger, the way the language chip did. */
@media (max-width: 768px) {
  .theme-toggle { width: 36px; height: 36px; }
  .nav-actions.active { flex-wrap: wrap; }
  .nav-actions.active .theme-toggle { order: -2; align-self: center; }
}

/* ===== GENERATED: COLOUR TOKENS ===== */
/* Generated by tools-dark-palette.py, re-derived by tools-dark-palette-rederive.py.
   Every colour in the stylesheet and in inline styles is a token defined
   to itself here, so light mode is unchanged, and redefined under
   [data-theme="dark"]. Regenerate rather than editing by hand. */
:root {
  --c-bg-000000: #000000;
  --c-bg-061426: #061426;
  --c-bg-0a1322: #0a1322;
  --c-bg-0b1f35: #0b1f35;
  --c-bg-0c0f0d: #0c0f0d;
  --c-bg-0c1728: #0c1728;
  --c-bg-0d244a: #0d244a;
  --c-bg-0f1d33: #0f1d33;
  --c-bg-0f1e3d: #0f1e3d;
  --c-bg-0f1f3d: #0f1f3d;
  --c-bg-0f2a54: #0f2a54;
  --c-bg-0f7a35: #0f7a35;
  --c-bg-101d33: #101d33;
  --c-bg-102743: #102743;
  --c-bg-13233f: #13233f;
  --c-bg-132d50: #132d50;
  --c-bg-14294a: #14294a;
  --c-bg-14294f: #14294f;
  --c-bg-152f4d: #152f4d;
  --c-bg-16263f: #16263f;
  --c-bg-16386b: #16386b;
  --c-bg-17365d: #17365d;
  --c-bg-192c49: #192c49;
  --c-bg-19407a: #19407a;
  --c-bg-1a1a1a: #1a1a1a;
  --c-bg-1a1d1b: #1a1d1b;
  --c-bg-1a3364: #1a3364;
  --c-bg-1b3d78: #1b3d78;
  --c-bg-1d3560: #1d3560;
  --c-bg-1d3a5c: #1d3a5c;
  --c-bg-1e9e4a: #1e9e4a;
  --c-bg-22406e: #22406e;
  --c-bg-244488: #244488;
  --c-bg-24466e: #24466e;
  --c-bg-25406a: #25406a;
  --c-bg-264a80: #264a80;
  --c-bg-26529c: #26529c;
  --c-bg-2a2a2a: #2a2a2a;
  --c-bg-2a2e2b: #2a2e2b;
  --c-bg-2b4f96: #2b4f96;
  --c-bg-2b52a0: #2b52a0;
  --c-bg-2f6bb5: #2f6bb5;
  --c-bg-2f6cf6: #2f6cf6;
  --c-bg-2f9d5b: #2f9d5b;
  --c-bg-33599f: #33599f;
  --c-bg-37568c: #37568c;
  --c-bg-3a3f3b: #3a3f3b;
  --c-bg-3a63b0: #3a63b0;
  --c-bg-3a6fb5: #3a6fb5;
  --c-bg-3c5c96: #3c5c96;
  --c-bg-46587a: #46587a;
  --c-bg-4a7fd6: #4a7fd6;
  --c-bg-4ec27a: #4ec27a;
  --c-bg-5ed98a: #5ed98a;
  --c-bg-6b756c: #6b756c;
  --c-bg-7cabef: #7cabef;
  --c-bg-7d1523: #7d1523;
  --c-bg-806000: #806000;
  --c-bg-8a6712: #8a6712;
  --c-bg-8c1a2c: #8c1a2c;
  --c-bg-8f6c12: #8f6c12;
  --c-bg-9ba39c: #9ba39c;
  --c-bg-9c1d31: #9c1d31;
  --c-bg-9c7a19: #9c7a19;
  --c-bg-9ec5ff: #9ec5ff;
  --c-bg-a0a0a0: #a0a0a0;
  --c-bg-a6b8ce: #a6b8ce;
  --c-bg-a87d18: #a87d18;
  --c-bg-a8801c: #a8801c;
  --c-bg-a8861d: #a8861d;
  --c-bg-a9782a: #a9782a;
  --c-bg-b07f28: #b07f28;
  --c-bg-b2223a: #b2223a;
  --c-bg-b58a1f: #b58a1f;
  --c-bg-b8860b: #b8860b;
  --c-bg-b8862f: #b8862f;
  --c-bg-b8901f: #b8901f;
  --c-bg-bfbfbf: #bfbfbf;
  --c-bg-c09641: #c09641;
  --c-bg-c1992a: #c1992a;
  --c-bg-c22843: #c22843;
  --c-bg-c39c2c: #c39c2c;
  --c-bg-c6d4ea: #c6d4ea;
  --c-bg-c8cfc9: #c8cfc9;
  --c-bg-c99b25: #c99b25;
  --c-bg-c9a227: #c9a227;
  --c-bg-c9a24b: #c9a24b;
  --c-bg-c9a24d: #c9a24d;
  --c-bg-c9d3e2: #c9d3e2;
  --c-bg-ccd6e8: #ccd6e8;
  --c-bg-cfa634: #cfa634;
  --c-bg-cfa64f: #cfa64f;
  --c-bg-cfa951: #cfa951;
  --c-bg-d4ad33: #d4ad33;
  --c-bg-d5b465: #d5b465;
  --c-bg-d8b246: #d8b246;
  --c-bg-d9ad4e: #d9ad4e;
  --c-bg-d9bd72: #d9bd72;
  --c-bg-daa520: #daa520;
  --c-bg-dbb24a: #dbb24a;
  --c-bg-dbe7f7: #dbe7f7;
  --c-bg-dbe8f9: #dbe8f9;
  --c-bg-dcb43e: #dcb43e;
  --c-bg-dcbb57: #dcbb57;
  --c-bg-dde9f8: #dde9f8;
  --c-bg-dfe6f0: #dfe6f0;
  --c-bg-e0e0e0: #e0e0e0;
  --c-bg-e2b94a: #e2b94a;
  --c-bg-e2ecf8: #e2ecf8;
  --c-bg-e3bc45: #e3bc45;
  --c-bg-e5e8e6: #e5e8e6;
  --c-bg-e6bb52: #e6bb52;
  --c-bg-e6c25c: #e6c25c;
  --c-bg-e6d194: #e6d194;
  --c-bg-e6ebf4: #e6ebf4;
  --c-bg-e6eef8: #e6eef8;
  --c-bg-e6eef9: #e6eef9;
  --c-bg-e6eff9: #e6eff9;
  --c-bg-e7c04a: #e7c04a;
  --c-bg-e8c15f: #e8c15f;
  --c-bg-e8c352: #e8c352;
  --c-bg-e8c56a: #e8c56a;
  --c-bg-e8f0f9: #e8f0f9;
  --c-bg-e9eef7: #e9eef7;
  --c-bg-e9f1f9: #e9f1f9;
  --c-bg-eac468: #eac468;
  --c-bg-eacd6f: #eacd6f;
  --c-bg-eaf1fa: #eaf1fa;
  --c-bg-eaf3fc: #eaf3fc;
  --c-bg-edcb75: #edcb75;
  --c-bg-edf1f7: #edf1f7;
  --c-bg-eecd5f: #eecd5f;
  --c-bg-eef2f7: #eef2f7;
  --c-bg-eef2f8: #eef2f8;
  --c-bg-eef3fa: #eef3fa;
  --c-bg-eef4fc: #eef4fc;
  --c-bg-eef4fd: #eef4fd;
  --c-bg-f0d267: #f0d267;
  --c-bg-f0d47a: #f0d47a;
  --c-bg-f0d489: #f0d489;
  --c-bg-f0dda4: #f0dda4;
  --c-bg-f2f6fd: #f2f6fd;
  --c-bg-f2f7fd: #f2f7fd;
  --c-bg-f3d878: #f3d878;
  --c-bg-f3dc9a: #f3dc9a;
  --c-bg-f3f6fb: #f3f6fb;
  --c-bg-f4dc7e: #f4dc7e;
  --c-bg-f4f7fb: #f4f7fb;
  --c-bg-f4f8fd: #f4f8fd;
  --c-bg-f5f5f5: #f5f5f5;
  --c-bg-f5f9fd: #f5f9fd;
  --c-bg-f6e08e: #f6e08e;
  --c-bg-f6f9fd: #f6f9fd;
  --c-bg-f6f9fe: #f6f9fe;
  --c-bg-f6faff: #f6faff;
  --c-bg-f8fafd: #f8fafd;
  --c-bg-f9e4e7: #f9e4e7;
  --c-bg-f9ecae: #f9ecae;
  --c-bg-f9ecc0: #f9ecc0;
  --c-bg-f9edbf: #f9edbf;
  --c-bg-f9fafb: #f9fafb;
  --c-bg-fdf1f2: #fdf1f2;
  --c-bg-fdf3c0: #fdf3c0;
  --c-bg-fffafa: #fffafa;
  --c-bg-fffdf6: #fffdf6;
  --c-bg-ffffff: #ffffff;
  --c-bg-re0000: rgba(0, 0, 0, 0);
  --c-bg-re000006: rgba(0, 0, 0, 0.06);
  --c-bg-re000008: rgba(0, 0, 0, 0.08);
  --c-bg-re000018: rgba(0, 0, 0, 0.18);
  --c-bg-re000025: rgba(0, 0, 0, 0.25);
  --c-bg-re10224605: rgba(10, 22, 46, 0.5);
  --c-bg-re102246055: rgba(10, 22, 46, 0.55);
  --c-bg-re102452042: rgba(10, 24, 52, 0.42);
  --c-bg-re102452045: rgba(10, 24, 52, 0.45);
  --c-bg-re1028580: rgba(10, 28, 58, 0);
  --c-bg-re102858035: rgba(10, 28, 58, 0.35);
  --c-bg-re120150205014: rgba(120, 150, 205, 0.14);
  --c-bg-re120160255005: rgba(120, 160, 255, 0.05);
  --c-bg-re120160255022: rgba(120, 160, 255, 0.22);
  --c-bg-re120160255024: rgba(120, 160, 255, 0.24);
  --c-bg-re120160255045: rgba(120, 160, 255, 0.45);
  --c-bg-re12017524001: rgba(120, 175, 240, 0.1);
  --c-bg-re120175240018: rgba(120, 175, 240, 0.18);
  --c-bg-re12017524002: rgba(120, 175, 240, 0.2);
  --c-bg-re120175240022: rgba(120, 175, 240, 0.22);
  --c-bg-re120175240024: rgba(120, 175, 240, 0.24);
  --c-bg-re120175240026: rgba(120, 175, 240, 0.26);
  --c-bg-re120175240028: rgba(120, 175, 240, 0.28);
  --c-bg-re12017524003: rgba(120, 175, 240, 0.3);
  --c-bg-re120801008: rgba(120, 80, 10, 0.8);
  --c-bg-re123471045: rgba(12, 34, 71, 0.45);
  --c-bg-re12518024002: rgba(125, 180, 240, 0.2);
  --c-bg-re125180240028: rgba(125, 180, 240, 0.28);
  --c-bg-re12518024009: rgba(125, 180, 240, 0.9);
  --c-bg-re1401752350: rgba(140, 175, 235, 0);
  --c-bg-re140175235028: rgba(140, 175, 235, 0.28);
  --c-bg-re140175235035: rgba(140, 175, 235, 0.35);
  --c-bg-re14017523504: rgba(140, 175, 235, 0.4);
  --c-bg-re14017523505: rgba(140, 175, 235, 0.5);
  --c-bg-re140175235055: rgba(140, 175, 235, 0.55);
  --c-bg-re14017523507: rgba(140, 175, 235, 0.7);
  --c-bg-re1409620065: rgba(140, 96, 20, 0.65);
  --c-bg-re14817822004: rgba(148, 178, 220, 0.4);
  --c-bg-re15011926055: rgba(150, 119, 26, 0.55);
  --c-bg-re1501192606: rgba(150, 119, 26, 0.6);
  --c-bg-re1501192607: rgba(150, 119, 26, 0.7);
  --c-bg-re15019024002: rgba(150, 190, 240, 0.2);
  --c-bg-re150190255055: rgba(150, 190, 255, 0.55);
  --c-bg-re160200245018: rgba(160, 200, 245, 0.18);
  --c-bg-re160200245028: rgba(160, 200, 245, 0.28);
  --c-bg-re1602948006: rgba(160, 29, 48, 0.06);
  --c-bg-re160294801: rgba(160, 29, 48, 0.1);
  --c-bg-re1602948012: rgba(160, 29, 48, 0.12);
  --c-bg-re1602948014: rgba(160, 29, 48, 0.14);
  --c-bg-re1602948024: rgba(160, 29, 48, 0.24);
  --c-bg-re160294803: rgba(160, 29, 48, 0.3);
  --c-bg-re1602948032: rgba(160, 29, 48, 0.32);
  --c-bg-re1602948038: rgba(160, 29, 48, 0.38);
  --c-bg-re160294805: rgba(160, 29, 48, 0.5);
  --c-bg-re190215245035: rgba(190, 215, 245, 0.35);
  --c-bg-re190215245045: rgba(190, 215, 245, 0.45);
  --c-bg-re201162390: rgba(201, 162, 39, 0);
  --c-bg-re20116239006: rgba(201, 162, 39, 0.06);
  --c-bg-re2011623901: rgba(201, 162, 39, 0.1);
  --c-bg-re20116239018: rgba(201, 162, 39, 0.18);
  --c-bg-re2011623903: rgba(201, 162, 39, 0.3);
  --c-bg-re2011623904: rgba(201, 162, 39, 0.4);
  --c-bg-re2011623905: rgba(201, 162, 39, 0.5);
  --c-bg-re20116239055: rgba(201, 162, 39, 0.55);
  --c-bg-re2011623908: rgba(201, 162, 39, 0.8);
  --c-bg-re20168092: rgba(20, 16, 8, 0.92);
  --c-bg-re202020006: rgba(20, 20, 20, 0.06);
  --c-bg-re20417906: rgba(20, 41, 79, 0.6);
  --c-bg-re22023525505: rgba(220, 235, 255, 0.5);
  --c-bg-re220235255062: rgba(220, 235, 255, 0.62);
  --c-bg-re224063008: rgba(22, 40, 63, 0.08);
  --c-bg-re228238251092: rgba(228, 238, 251, 0.92);
  --c-bg-re232197106004: rgba(232, 197, 106, 0.04);
  --c-bg-re232197106014: rgba(232, 197, 106, 0.14);
  --c-bg-re232197106016: rgba(232, 197, 106, 0.16);
  --c-bg-re232197106042: rgba(232, 197, 106, 0.42);
  --c-bg-re232197106045: rgba(232, 197, 106, 0.45);
  --c-bg-re232197106055: rgba(232, 197, 106, 0.55);
  --c-bg-re232241252096: rgba(232, 241, 252, 0.96);
  --c-bg-re23624225008: rgba(236, 242, 250, 0.8);
  --c-bg-re24024625309: rgba(240, 246, 253, 0.9);
  --c-bg-re24722022504: rgba(247, 220, 225, 0.4);
  --c-bg-re248251255096: rgba(248, 251, 255, 0.96);
  --c-bg-re252252253078: rgba(252, 252, 253, 0.78);
  --c-bg-re25323523806: rgba(253, 235, 238, 0.6);
  --c-bg-re255255255004: rgba(255, 255, 255, 0.04);
  --c-bg-re255255255005: rgba(255, 255, 255, 0.05);
  --c-bg-re255255255008: rgba(255, 255, 255, 0.08);
  --c-bg-re25525525501: rgba(255, 255, 255, 0.1);
  --c-bg-re255255255015: rgba(255, 255, 255, 0.15);
  --c-bg-re255255255018: rgba(255, 255, 255, 0.18);
  --c-bg-re25525525502: rgba(255, 255, 255, 0.2);
  --c-bg-re255255255024: rgba(255, 255, 255, 0.24);
  --c-bg-re255255255025: rgba(255, 255, 255, 0.25);
  --c-bg-re255255255028: rgba(255, 255, 255, 0.28);
  --c-bg-re255255255032: rgba(255, 255, 255, 0.32);
  --c-bg-re255255255034: rgba(255, 255, 255, 0.34);
  --c-bg-re25525525504: rgba(255, 255, 255, 0.4);
  --c-bg-re255255255042: rgba(255, 255, 255, 0.42);
  --c-bg-re255255255048: rgba(255, 255, 255, 0.48);
  --c-bg-re25525525505: rgba(255, 255, 255, 0.5);
  --c-bg-re255255255055: rgba(255, 255, 255, 0.55);
  --c-bg-re255255255062: rgba(255, 255, 255, 0.62);
  --c-bg-re255255255065: rgba(255, 255, 255, 0.65);
  --c-bg-re25525525507: rgba(255, 255, 255, 0.7);
  --c-bg-re255255255072: rgba(255, 255, 255, 0.72);
  --c-bg-re255255255075: rgba(255, 255, 255, 0.75);
  --c-bg-re25525525508: rgba(255, 255, 255, 0.8);
  --c-bg-re255255255088: rgba(255, 255, 255, 0.88);
  --c-bg-re25525525509: rgba(255, 255, 255, 0.9);
  --c-bg-re255255255096: rgba(255, 255, 255, 0.96);
  --c-bg-re255909005: rgba(255, 90, 90, 0.5);
  --c-bg-re255909006: rgba(255, 90, 90, 0.6);
  --c-bg-re2564122006: rgba(25, 64, 122, 0.06);
  --c-bg-re2564122012: rgba(25, 64, 122, 0.12);
  --c-bg-re2564122028: rgba(25, 64, 122, 0.28);
  --c-bg-re256412203: rgba(25, 64, 122, 0.3);
  --c-bg-re2564122035: rgba(25, 64, 122, 0.35);
  --c-bg-re2564122042: rgba(25, 64, 122, 0.42);
  --c-bg-re2564122055: rgba(25, 64, 122, 0.55);
  --c-bg-re3163125035: rgba(31, 63, 125, 0.35);
  --c-bg-re3417114801: rgba(34, 171, 148, 0.1);
  --c-bg-re34171148035: rgba(34, 171, 148, 0.35);
  --c-bg-re3668136005: rgba(36, 68, 136, 0.05);
  --c-bg-re366813601: rgba(36, 68, 136, 0.1);
  --c-bg-re3668136012: rgba(36, 68, 136, 0.12);
  --c-bg-re3668136014: rgba(36, 68, 136, 0.14);
  --c-bg-re3668136016: rgba(36, 68, 136, 0.16);
  --c-bg-re3668136018: rgba(36, 68, 136, 0.18);
  --c-bg-re366813602: rgba(36, 68, 136, 0.2);
  --c-bg-re3668136024: rgba(36, 68, 136, 0.24);
  --c-bg-re3668136026: rgba(36, 68, 136, 0.26);
  --c-bg-re3668136028: rgba(36, 68, 136, 0.28);
  --c-bg-re366813603: rgba(36, 68, 136, 0.3);
  --c-bg-re3668136032: rgba(36, 68, 136, 0.32);
  --c-bg-re3668136034: rgba(36, 68, 136, 0.34);
  --c-bg-re3668136035: rgba(36, 68, 136, 0.35);
  --c-bg-re366813604: rgba(36, 68, 136, 0.4);
  --c-bg-re366813605: rgba(36, 68, 136, 0.5);
  --c-bg-re3668136066: rgba(36, 68, 136, 0.66);
  --c-bg-re463614092: rgba(46, 36, 14, 0.92);
  --c-bg-re5811118107: rgba(58, 111, 181, 0.7);
  --c-bg-re60606004: rgba(60, 60, 60, 0.4);
  --c-bg-re77139255018: rgba(77, 139, 255, 0.18);
  --c-bg-re9014022004: rgba(90, 140, 220, 0.4);
  --c-bg-re9224805: rgba(9, 22, 48, 0.5);
  --c-fg-000000: #000000;
  --c-fg-0c2247: #0c2247;
  --c-fg-0d244a: #0d244a;
  --c-fg-0f1e3d: #0f1e3d;
  --c-fg-111111: #111111;
  --c-fg-111318: #111318;
  --c-fg-12705f: #12705f;
  --c-fg-14294a: #14294a;
  --c-fg-14294f: #14294f;
  --c-fg-16305f: #16305f;
  --c-fg-192c49: #192c49;
  --c-fg-19407a: #19407a;
  --c-fg-1a3364: #1a3364;
  --c-fg-1c3564: #1c3564;
  --c-fg-1d2e5f: #1d2e5f;
  --c-fg-1f3f7d: #1f3f7d;
  --c-fg-22314f: #22314f;
  --c-fg-244488: #244488;
  --c-fg-2f9d5b: #2f9d5b;
  --c-fg-33415e: #33415e;
  --c-fg-33456b: #33456b;
  --c-fg-34486d: #34486d;
  --c-fg-3a6fb5: #3a6fb5;
  --c-fg-41506b: #41506b;
  --c-fg-44506b: #44506b;
  --c-fg-46587a: #46587a;
  --c-fg-56688a: #56688a;
  --c-fg-5a4048: #5a4048;
  --c-fg-5a91d7: #5a91d7;
  --c-fg-5b7099: #5b7099;
  --c-fg-6f8ab5: #6f8ab5;
  --c-fg-7286a6: #7286a6;
  --c-fg-7cabef: #7cabef;
  --c-fg-7d1a2a: #7d1a2a;
  --c-fg-8593ad: #8593ad;
  --c-fg-8b9cb8: #8b9cb8;
  --c-fg-8c1a2c: #8c1a2c;
  --c-fg-8fb0dc: #8fb0dc;
  --c-fg-8fb0e0: #8fb0e0;
  --c-fg-8fb6ff: #8fb6ff;
  --c-fg-93a3bd: #93a3bd;
  --c-fg-a01d30: #a01d30;
  --c-fg-a8801c: #a8801c;
  --c-fg-a8861d: #a8861d;
  --c-fg-a9b7cd: #a9b7cd;
  --c-fg-b8862f: #b8862f;
  --c-fg-b8901f: #b8901f;
  --c-fg-b9c4d8: #b9c4d8;
  --c-fg-bcc7da: #bcc7da;
  --c-fg-c9a24d: #c9a24d;
  --c-fg-c9d6ec: #c9d6ec;
  --c-fg-c9d6ee: #c9d6ee;
  --c-fg-ccd6e8: #ccd6e8;
  --c-fg-daa520: #daa520;
  --c-fg-dbe6f8: #dbe6f8;
  --c-fg-dfe6f2: #dfe6f2;
  --c-fg-e3bc45: #e3bc45;
  --c-fg-e4eaf5: #e4eaf5;
  --c-fg-e8c56a: #e8c56a;
  --c-fg-e8eefb: #e8eefb;
  --c-fg-e8eefc: #e8eefc;
  --c-fg-e9c860: #e9c860;
  --c-fg-eaf1ff: #eaf1ff;
  --c-fg-eef3ff: #eef3ff;
  --c-fg-f2f7ff: #f2f7ff;
  --c-fg-f3dc9a: #f3dc9a;
  --c-fg-ff6b6b: #ff6b6b;
  --c-fg-ffffff: #ffffff;
  --c-fg-re1602948055: rgba(160, 29, 48, 0.55);
  --c-fg-re255255255035: rgba(255, 255, 255, 0.35);
  --c-fg-re25525525504: rgba(255, 255, 255, 0.4);
  --c-fg-re255255255045: rgba(255, 255, 255, 0.45);
  --c-fg-re255255255055: rgba(255, 255, 255, 0.55);
  --c-fg-re25525525506: rgba(255, 255, 255, 0.6);
  --c-fg-re255255255072: rgba(255, 255, 255, 0.72);
  --c-fg-re255255255078: rgba(255, 255, 255, 0.78);
  --c-fg-re255255255092: rgba(255, 255, 255, 0.92);
  --c-fg-re2564122062: rgba(25, 64, 122, 0.62);
  --c-fg-re3668136045: rgba(36, 68, 136, 0.45);
  --c-gl-f7edd2: #f7edd2;
  --c-gl-fdf3d0: #fdf3d0;
  --c-gl-fdf8e9: #fdf8e9;
  --c-gl-fff6dc: #fff6dc;
  --c-gl-fffbe8: #fffbe8;
  --c-gl-fffdf2: #fffdf2;
  --c-gl-fffdf6: #fffdf6;
  --c-gl-re2552552550: rgba(255, 255, 255, 0);
  --c-gl-re255255255002: rgba(255, 255, 255, 0.02);
  --c-gl-re255255255004: rgba(255, 255, 255, 0.04);
  --c-gl-re255255255005: rgba(255, 255, 255, 0.05);
  --c-gl-re255255255006: rgba(255, 255, 255, 0.06);
  --c-gl-re255255255008: rgba(255, 255, 255, 0.08);
  --c-gl-re255255255014: rgba(255, 255, 255, 0.14);
  --c-gl-re25525525502: rgba(255, 255, 255, 0.2);
  --c-gl-re255255255022: rgba(255, 255, 255, 0.22);
  --c-gl-re255255255032: rgba(255, 255, 255, 0.32);
  --c-gl-re255255255034: rgba(255, 255, 255, 0.34);
  --c-gl-re255255255042: rgba(255, 255, 255, 0.42);
  --c-gl-re255255255045: rgba(255, 255, 255, 0.45);
  --c-gl-re255255255062: rgba(255, 255, 255, 0.62);
  --c-gl-re255255255075: rgba(255, 255, 255, 0.75);
  --c-gl-re255255255085: rgba(255, 255, 255, 0.85);
  --c-gl-re255255255095: rgba(255, 255, 255, 0.95);
  --c-sh-ffffff: #ffffff;
  --c-sh-re000006: rgba(0, 0, 0, 0.06);
  --c-sh-re000022: rgba(0, 0, 0, 0.22);
  --c-sh-re000024: rgba(0, 0, 0, 0.24);
  --c-sh-re000025: rgba(0, 0, 0, 0.25);
  --c-sh-re000028: rgba(0, 0, 0, 0.28);
  --c-sh-re000035: rgba(0, 0, 0, 0.35);
  --c-sh-re000055: rgba(0, 0, 0, 0.55);
  --c-sh-re10265803: rgba(10, 26, 58, 0.3);
  --c-sh-re102858028: rgba(10, 28, 58, 0.28);
  --c-sh-re102858032: rgba(10, 28, 58, 0.32);
  --c-sh-re10285804: rgba(10, 28, 58, 0.4);
  --c-sh-re120175240018: rgba(120, 175, 240, 0.18);
  --c-sh-re120801004: rgba(120, 80, 10, 0.4);
  --c-sh-re1208010042: rgba(120, 80, 10, 0.42);
  --c-sh-re120921504: rgba(120, 92, 15, 0.4);
  --c-sh-re122658026: rgba(12, 26, 58, 0.26);
  --c-sh-re122658028: rgba(12, 26, 58, 0.28);
  --c-sh-re12265803: rgba(12, 26, 58, 0.3);
  --c-sh-re12518024002: rgba(125, 180, 240, 0.2);
  --c-sh-re133674028: rgba(13, 36, 74, 0.28);
  --c-sh-re15011020034: rgba(150, 110, 20, 0.34);
  --c-sh-re15011020038: rgba(150, 110, 20, 0.38);
  --c-sh-re15011020042: rgba(150, 110, 20, 0.42);
  --c-sh-re15011020044: rgba(150, 110, 20, 0.44);
  --c-sh-re15011020048: rgba(150, 110, 20, 0.48);
  --c-sh-re153070005: rgba(15, 30, 70, 0.05);
  --c-sh-re153070025: rgba(15, 30, 70, 0.25);
  --c-sh-re153070028: rgba(15, 30, 70, 0.28);
  --c-sh-re15307003: rgba(15, 30, 70, 0.3);
  --c-sh-re153070035: rgba(15, 30, 70, 0.35);
  --c-sh-re15307004: rgba(15, 30, 70, 0.4);
  --c-sh-re1602948007: rgba(160, 29, 48, 0.07);
  --c-sh-re160294801: rgba(160, 29, 48, 0.1);
  --c-sh-re1602948012: rgba(160, 29, 48, 0.12);
  --c-sh-re1602948014: rgba(160, 29, 48, 0.14);
  --c-sh-re1602948016: rgba(160, 29, 48, 0.16);
  --c-sh-re1602948024: rgba(160, 29, 48, 0.24);
  --c-sh-re160294803: rgba(160, 29, 48, 0.3);
  --c-sh-re1602948032: rgba(160, 29, 48, 0.32);
  --c-sh-re1602948042: rgba(160, 29, 48, 0.42);
  --c-sh-re164284008: rgba(16, 42, 84, 0.08);
  --c-sh-re164284016: rgba(16, 42, 84, 0.16);
  --c-sh-re164284028: rgba(16, 42, 84, 0.28);
  --c-sh-re16913429012: rgba(169, 134, 29, 0.12);
  --c-sh-re16913429035: rgba(169, 134, 29, 0.35);
  --c-sh-re1691342905: rgba(169, 134, 29, 0.5);
  --c-sh-re1691342906: rgba(169, 134, 29, 0.6);
  --c-sh-re1841344703: rgba(184, 134, 47, 0.3);
  --c-sh-re19022025507: rgba(190, 220, 255, 0.7);
  --c-sh-re201162750: rgba(201, 162, 75, 0);
  --c-sh-re20116275045: rgba(201, 162, 75, 0.45);
  --c-sh-re202020006: rgba(20, 20, 20, 0.06);
  --c-sh-re203560008: rgba(20, 35, 60, 0.08);
  --c-sh-re204179014: rgba(20, 41, 79, 0.14);
  --c-sh-re204179026: rgba(20, 41, 79, 0.26);
  --c-sh-re20417903: rgba(20, 41, 79, 0.3);
  --c-sh-re204179032: rgba(20, 41, 79, 0.32);
  --c-sh-re204179034: rgba(20, 41, 79, 0.34);
  --c-sh-re204179038: rgba(20, 41, 79, 0.38);
  --c-sh-re204179042: rgba(20, 41, 79, 0.42);
  --c-sh-re204179044: rgba(20, 41, 79, 0.44);
  --c-sh-re23219710608: rgba(232, 197, 106, 0.8);
  --c-sh-re255246200035: rgba(255, 246, 200, 0.35);
  --c-sh-re255255255014: rgba(255, 255, 255, 0.14);
  --c-sh-re25525525502: rgba(255, 255, 255, 0.2);
  --c-sh-re255255255022: rgba(255, 255, 255, 0.22);
  --c-sh-re255255255024: rgba(255, 255, 255, 0.24);
  --c-sh-re255255255025: rgba(255, 255, 255, 0.25);
  --c-sh-re255255255028: rgba(255, 255, 255, 0.28);
  --c-sh-re25525525503: rgba(255, 255, 255, 0.3);
  --c-sh-re255255255032: rgba(255, 255, 255, 0.32);
  --c-sh-re255255255035: rgba(255, 255, 255, 0.35);
  --c-sh-re25525525505: rgba(255, 255, 255, 0.5);
  --c-sh-re25525525506: rgba(255, 255, 255, 0.6);
  --c-sh-re25525525507: rgba(255, 255, 255, 0.7);
  --c-sh-re25525525508: rgba(255, 255, 255, 0.8);
  --c-sh-re255255255085: rgba(255, 255, 255, 0.85);
  --c-sh-re25525525509: rgba(255, 255, 255, 0.9);
  --c-sh-re255255255095: rgba(255, 255, 255, 0.95);
  --c-sh-re2564122012: rgba(25, 64, 122, 0.12);
  --c-sh-re2564122014: rgba(25, 64, 122, 0.14);
  --c-sh-re2564122016: rgba(25, 64, 122, 0.16);
  --c-sh-re2564122024: rgba(25, 64, 122, 0.24);
  --c-sh-re3668136006: rgba(36, 68, 136, 0.06);
  --c-sh-re3668136007: rgba(36, 68, 136, 0.07);
  --c-sh-re3668136008: rgba(36, 68, 136, 0.08);
  --c-sh-re3668136009: rgba(36, 68, 136, 0.09);
  --c-sh-re366813601: rgba(36, 68, 136, 0.1);
  --c-sh-re3668136012: rgba(36, 68, 136, 0.12);
  --c-sh-re3668136013: rgba(36, 68, 136, 0.13);
  --c-sh-re3668136014: rgba(36, 68, 136, 0.14);
  --c-sh-re3668136016: rgba(36, 68, 136, 0.16);
  --c-sh-re366813602: rgba(36, 68, 136, 0.2);
  --c-sh-re408015001: rgba(40, 80, 150, 0.1);
  --c-sh-re4715791032: rgba(47, 157, 91, 0.32);
  --c-sh-re5122806: rgba(5, 12, 28, 0.6);
  --c-sh-re5122807: rgba(5, 12, 28, 0.7);
  --c-sh-re81632035: rgba(8, 16, 32, 0.35);
  --c-sh-re82048045: rgba(8, 20, 48, 0.45);
  --c-sh-re8204805: rgba(8, 20, 48, 0.5);
}

[data-theme="dark"] {
  --c-bg-000000: #141414;
  --c-bg-061426: #081b33;
  --c-bg-0a1322: #0d1a2e;
  --c-bg-0b1f35: #0e2642;
  --c-bg-0c0f0d: #131714;
  --c-bg-0c1728: #101e34;
  --c-bg-0d244a: #0f2a57;
  --c-bg-0f1d33: #12243f;
  --c-bg-0f1e3d: #122449;
  --c-bg-0f1f3d: #122549;
  --c-bg-0f2a54: #113061;
  --c-bg-0f7a35: #0f7a35;
  --c-bg-101d33: #14243f;
  --c-bg-102743: #132e4f;
  --c-bg-13233f: #172a4b;
  --c-bg-132d50: #16345c;
  --c-bg-14294a: #173056;
  --c-bg-14294f: #172f5b;
  --c-bg-152f4d: #183659;
  --c-bg-16263f: #1a2d4a;
  --c-bg-16386b: #1b4584;
  --c-bg-17365d: #1d4476;
  --c-bg-192c49: #1d3354;
  --c-bg-19407a: #1e4d93;
  --c-bg-1a1a1a: #222222;
  --c-bg-1a1d1b: #212523;
  --c-bg-1a3364: #203f7c;
  --c-bg-1b3d78: #214a91;
  --c-bg-1d3560: #244278;
  --c-bg-1d3a5c: #244973;
  --c-bg-1e9e4a: #1e9e4a;
  --c-bg-22406e: #294e85;
  --c-bg-244488: #2a50a0;
  --c-bg-24466e: #2c5585;
  --c-bg-25406a: #2d4e81;
  --c-bg-264a80: #2d5898;
  --c-bg-26529c: #2c5fb5;
  --c-bg-2a2a2a: #323232;
  --c-bg-2a2e2b: #313632;
  --c-bg-2b4f96: #325cae;
  --c-bg-2b52a0: #315eb8;
  --c-bg-2f6bb5: #377acb;
  --c-bg-2f6cf6: #293e6c;
  --c-bg-2f9d5b: #2f9d5b;
  --c-bg-33599f: #3a66b6;
  --c-bg-37568c: #4063a2;
  --c-bg-3a3f3b: #494f4a;
  --c-bg-3a63b0: #2c4574;
  --c-bg-3a6fb5: #2c4b74;
  --c-bg-3c5c96: #4569ac;
  --c-bg-46587a: #51668d;
  --c-bg-4a7fd6: #29436d;
  --c-bg-4ec27a: #4ec27a;
  --c-bg-5ed98a: #5ed98a;
  --c-bg-6b756c: #7a857b;
  --c-bg-7cabef: #263f63;
  --c-bg-7d1523: #7d1523;
  --c-bg-806000: #806000;
  --c-bg-8a6712: #8a6712;
  --c-bg-8c1a2c: #8c1a2c;
  --c-bg-8f6c12: #8f6c12;
  --c-bg-9ba39c: #46484c;
  --c-bg-9c1d31: #9c1d31;
  --c-bg-9c7a19: #9c7a19;
  --c-bg-9ec5ff: #212f49;
  --c-bg-a0a0a0: #484848;
  --c-bg-a6b8ce: #304257;
  --c-bg-a87d18: #a87d18;
  --c-bg-a8801c: #a8801c;
  --c-bg-a8861d: #a8861d;
  --c-bg-a9782a: #a9782a;
  --c-bg-b07f28: #b07f28;
  --c-bg-b2223a: #b2223a;
  --c-bg-b58a1f: #b58a1f;
  --c-bg-b8860b: #b8860b;
  --c-bg-b8862f: #b8862f;
  --c-bg-b8901f: #b8901f;
  --c-bg-bfbfbf: #434343;
  --c-bg-c09641: #c09641;
  --c-bg-c1992a: #c1992a;
  --c-bg-c22843: #c22843;
  --c-bg-c39c2c: #c39c2c;
  --c-bg-c6d4ea: #1f2c45;
  --c-bg-c8cfc9: #22304b;
  --c-bg-c99b25: #c99b25;
  --c-bg-c9a227: #c9a227;
  --c-bg-c9a24b: #c9a24b;
  --c-bg-c9a24d: #c9a24d;
  --c-bg-c9d3e2: #1f2d46;
  --c-bg-ccd6e8: #1e2c44;
  --c-bg-cfa634: #cfa634;
  --c-bg-cfa64f: #cfa64f;
  --c-bg-cfa951: #cfa951;
  --c-bg-d4ad33: #d4ad33;
  --c-bg-d5b465: #d5b465;
  --c-bg-d8b246: #d8b246;
  --c-bg-d9ad4e: #d9ad4e;
  --c-bg-d9bd72: #d9bd72;
  --c-bg-daa520: #daa520;
  --c-bg-dbb24a: #dbb24a;
  --c-bg-dbe7f7: #1b273d;
  --c-bg-dbe8f9: #1b273c;
  --c-bg-dcb43e: #dcb43e;
  --c-bg-dcbb57: #dcbb57;
  --c-bg-dde9f8: #1b263c;
  --c-bg-dfe6f0: #1c273d;
  --c-bg-e0e0e0: #1d2a41;
  --c-bg-e2b94a: #e2b94a;
  --c-bg-e2ecf8: #131f38;
  --c-bg-e3bc45: #e3bc45;
  --c-bg-e5e8e6: #1c283e;
  --c-bg-e6bb52: #e6bb52;
  --c-bg-e6c25c: #e6c25c;
  --c-bg-e6d194: #e6d194;
  --c-bg-e6ebf4: #131f38;
  --c-bg-e6eef8: #121f36;
  --c-bg-e6eef9: #121e36;
  --c-bg-e6eff9: #121e36;
  --c-bg-e7c04a: #e7c04a;
  --c-bg-e8c15f: #e8c15f;
  --c-bg-e8c352: #e8c352;
  --c-bg-e8c56a: #e8c56a;
  --c-bg-e8f0f9: #121e35;
  --c-bg-e9eef7: #121e35;
  --c-bg-e9f1f9: #121e35;
  --c-bg-eac468: #eac468;
  --c-bg-eacd6f: #eacd6f;
  --c-bg-eaf1fa: #111d34;
  --c-bg-eaf3fc: #111d33;
  --c-bg-edcb75: #edcb75;
  --c-bg-edf1f7: #111d34;
  --c-bg-eecd5f: #eecd5f;
  --c-bg-eef2f7: #111d33;
  --c-bg-eef2f8: #111d33;
  --c-bg-eef3fa: #111d32;
  --c-bg-eef4fc: #111c32;
  --c-bg-eef4fd: #101c31;
  --c-bg-f0d267: #f0d267;
  --c-bg-f0d47a: #f0d47a;
  --c-bg-f0d489: #f0d489;
  --c-bg-f0dda4: #f0dda4;
  --c-bg-f2f6fd: #101b30;
  --c-bg-f2f7fd: #101b30;
  --c-bg-f3d878: #f3d878;
  --c-bg-f3dc9a: #f3dc9a;
  --c-bg-f3f6fb: #101b30;
  --c-bg-f4dc7e: #f4dc7e;
  --c-bg-f4f7fb: #101b30;
  --c-bg-f4f8fd: #101b2f;
  --c-bg-f5f5f5: #111c32;
  --c-bg-f5f9fd: #101a2f;
  --c-bg-f6e08e: #f6e08e;
  --c-bg-f6f9fd: #0f1a2e;
  --c-bg-f6f9fe: #0f1a2e;
  --c-bg-f6faff: #0f1a2d;
  --c-bg-f8fafd: #0f1a2d;
  --c-bg-f9e4e7: #121f36;
  --c-bg-f9ecae: #f9ecae;
  --c-bg-f9ecc0: #f9ecc0;
  --c-bg-f9edbf: #f9edbf;
  --c-bg-f9fafb: #0f1a2e;
  --c-bg-fdf1f2: #101b30;
  --c-bg-fdf3c0: #fdf3c0;
  --c-bg-fffafa: #0f192c;
  --c-bg-fffdf6: #0f1a2d;
  --c-bg-ffffff: #0e182a;
  --c-bg-re0000: rgba(20, 20, 20, 0);
  --c-bg-re000006: rgba(20, 20, 20, 0.06);
  --c-bg-re000008: rgba(20, 20, 20, 0.08);
  --c-bg-re000018: rgba(20, 20, 20, 0.18);
  --c-bg-re000025: rgba(20, 20, 20, 0.25);
  --c-bg-re10224605: rgba(13, 28, 59, 0.5);
  --c-bg-re102246055: rgba(13, 28, 59, 0.55);
  --c-bg-re102452042: rgba(12, 30, 65, 0.42);
  --c-bg-re102452045: rgba(12, 30, 65, 0.45);
  --c-bg-re1028580: rgba(12, 34, 71, 0);
  --c-bg-re102858035: rgba(12, 34, 71, 0.35);
  --c-bg-re120150205014: rgba(40, 62, 104, 0.14);
  --c-bg-re120160255005: rgba(37, 55, 98, 0.05);
  --c-bg-re120160255022: rgba(37, 55, 98, 0.22);
  --c-bg-re120160255024: rgba(37, 55, 98, 0.24);
  --c-bg-re120160255045: rgba(37, 55, 98, 0.45);
  --c-bg-re12017524001: rgba(38, 66, 100, 0.1);
  --c-bg-re120175240018: rgba(38, 66, 100, 0.18);
  --c-bg-re12017524002: rgba(38, 66, 100, 0.2);
  --c-bg-re120175240022: rgba(38, 66, 100, 0.22);
  --c-bg-re120175240024: rgba(38, 66, 100, 0.24);
  --c-bg-re120175240026: rgba(38, 66, 100, 0.26);
  --c-bg-re120175240028: rgba(38, 66, 100, 0.28);
  --c-bg-re12017524003: rgba(38, 66, 100, 0.3);
  --c-bg-re120801008: rgba(120, 80, 10, 0.8);
  --c-bg-re123471045: rgba(14, 40, 84, 0.45);
  --c-bg-re12518024002: rgba(38, 67, 99, 0.2);
  --c-bg-re125180240028: rgba(38, 67, 99, 0.28);
  --c-bg-re12518024009: rgba(38, 67, 99, 0.9);
  --c-bg-re1401752350: rgba(37, 59, 98, 0);
  --c-bg-re140175235028: rgba(37, 59, 98, 0.28);
  --c-bg-re140175235035: rgba(37, 59, 98, 0.35);
  --c-bg-re14017523504: rgba(37, 59, 98, 0.4);
  --c-bg-re14017523505: rgba(37, 59, 98, 0.5);
  --c-bg-re140175235055: rgba(37, 59, 98, 0.55);
  --c-bg-re14017523507: rgba(37, 59, 98, 0.7);
  --c-bg-re1409620065: rgba(140, 96, 20, 0.65);
  --c-bg-re14817822004: rgba(37, 63, 99, 0.4);
  --c-bg-re15011926055: rgba(150, 119, 26, 0.55);
  --c-bg-re1501192606: rgba(150, 119, 26, 0.6);
  --c-bg-re1501192607: rgba(150, 119, 26, 0.7);
  --c-bg-re15019024002: rgba(35, 51, 79, 0.2);
  --c-bg-re150190255055: rgba(34, 48, 75, 0.55);
  --c-bg-re160200245018: rgba(34, 48, 75, 0.18);
  --c-bg-re160200245028: rgba(34, 48, 75, 0.28);
  --c-bg-re1602948006: rgba(160, 29, 48, 0.06);
  --c-bg-re160294801: rgba(160, 29, 48, 0.1);
  --c-bg-re1602948012: rgba(160, 29, 48, 0.12);
  --c-bg-re1602948014: rgba(160, 29, 48, 0.14);
  --c-bg-re1602948024: rgba(160, 29, 48, 0.24);
  --c-bg-re160294803: rgba(160, 29, 48, 0.3);
  --c-bg-re1602948032: rgba(160, 29, 48, 0.32);
  --c-bg-re1602948038: rgba(160, 29, 48, 0.38);
  --c-bg-re160294805: rgba(160, 29, 48, 0.5);
  --c-bg-re190215245035: rgba(31, 44, 68, 0.35);
  --c-bg-re190215245045: rgba(31, 44, 68, 0.45);
  --c-bg-re201162390: rgba(201, 162, 39, 0);
  --c-bg-re20116239006: rgba(201, 162, 39, 0.06);
  --c-bg-re2011623901: rgba(201, 162, 39, 0.1);
  --c-bg-re20116239018: rgba(201, 162, 39, 0.18);
  --c-bg-re2011623903: rgba(201, 162, 39, 0.3);
  --c-bg-re2011623904: rgba(201, 162, 39, 0.4);
  --c-bg-re2011623905: rgba(201, 162, 39, 0.5);
  --c-bg-re20116239055: rgba(201, 162, 39, 0.55);
  --c-bg-re2011623908: rgba(201, 162, 39, 0.8);
  --c-bg-re20168092: rgba(31, 25, 12, 0.92);
  --c-bg-re202020006: rgba(28, 28, 28, 0.06);
  --c-bg-re20417906: rgba(23, 47, 91, 0.6);
  --c-bg-re22023525505: rgba(18, 31, 55, 0.5);
  --c-bg-re220235255062: rgba(18, 31, 55, 0.62);
  --c-bg-re224063008: rgba(26, 47, 74, 0.08);
  --c-bg-re228238251092: rgba(18, 30, 54, 0.92);
  --c-bg-re232197106004: rgba(232, 197, 106, 0.04);
  --c-bg-re232197106014: rgba(232, 197, 106, 0.14);
  --c-bg-re232197106016: rgba(232, 197, 106, 0.16);
  --c-bg-re232197106042: rgba(232, 197, 106, 0.42);
  --c-bg-re232197106045: rgba(232, 197, 106, 0.45);
  --c-bg-re232197106055: rgba(232, 197, 106, 0.55);
  --c-bg-re232241252096: rgba(17, 29, 52, 0.96);
  --c-bg-re23624225008: rgba(17, 29, 51, 0.8);
  --c-bg-re24024625309: rgba(16, 27, 48, 0.9);
  --c-bg-re24722022504: rgba(27, 39, 60, 0.4);
  --c-bg-re248251255096: rgba(15, 25, 45, 0.96);
  --c-bg-re252252253078: rgba(15, 25, 44, 0.78);
  --c-bg-re25323523806: rgba(17, 29, 50, 0.6);
  --c-bg-re255255255004: rgba(14, 24, 42, 0.04);
  --c-bg-re255255255005: rgba(14, 24, 42, 0.05);
  --c-bg-re255255255008: rgba(14, 24, 42, 0.08);
  --c-bg-re25525525501: rgba(14, 24, 42, 0.1);
  --c-bg-re255255255015: rgba(14, 24, 42, 0.15);
  --c-bg-re255255255018: rgba(14, 24, 42, 0.18);
  --c-bg-re25525525502: rgba(14, 24, 42, 0.2);
  --c-bg-re255255255024: rgba(14, 24, 42, 0.24);
  --c-bg-re255255255025: rgba(14, 24, 42, 0.25);
  --c-bg-re255255255028: rgba(14, 24, 42, 0.28);
  --c-bg-re255255255032: rgba(14, 24, 42, 0.32);
  --c-bg-re255255255034: rgba(14, 24, 42, 0.34);
  --c-bg-re25525525504: rgba(14, 24, 42, 0.4);
  --c-bg-re255255255042: rgba(14, 24, 42, 0.42);
  --c-bg-re255255255048: rgba(14, 24, 42, 0.48);
  --c-bg-re25525525505: rgba(14, 24, 42, 0.5);
  --c-bg-re255255255055: rgba(14, 24, 42, 0.55);
  --c-bg-re255255255062: rgba(14, 24, 42, 0.62);
  --c-bg-re255255255065: rgba(14, 24, 42, 0.65);
  --c-bg-re25525525507: rgba(14, 24, 42, 0.7);
  --c-bg-re255255255072: rgba(14, 24, 42, 0.72);
  --c-bg-re255255255075: rgba(14, 24, 42, 0.75);
  --c-bg-re25525525508: rgba(14, 24, 42, 0.8);
  --c-bg-re255255255088: rgba(14, 24, 42, 0.88);
  --c-bg-re25525525509: rgba(14, 24, 42, 0.9);
  --c-bg-re255255255096: rgba(14, 24, 42, 0.96);
  --c-bg-re255909005: rgba(255, 90, 90, 0.5);
  --c-bg-re255909006: rgba(255, 90, 90, 0.6);
  --c-bg-re2564122006: rgba(30, 77, 147, 0.06);
  --c-bg-re2564122012: rgba(30, 77, 147, 0.12);
  --c-bg-re2564122028: rgba(30, 77, 147, 0.28);
  --c-bg-re256412203: rgba(30, 77, 147, 0.3);
  --c-bg-re2564122035: rgba(30, 77, 147, 0.35);
  --c-bg-re2564122042: rgba(30, 77, 147, 0.42);
  --c-bg-re2564122055: rgba(30, 77, 147, 0.55);
  --c-bg-re3163125035: rgba(37, 75, 150, 0.35);
  --c-bg-re3417114801: rgba(39, 197, 170, 0.1);
  --c-bg-re34171148035: rgba(39, 197, 170, 0.35);
  --c-bg-re3668136005: rgba(42, 80, 160, 0.05);
  --c-bg-re366813601: rgba(42, 80, 160, 0.1);
  --c-bg-re3668136012: rgba(42, 80, 160, 0.12);
  --c-bg-re3668136014: rgba(42, 80, 160, 0.14);
  --c-bg-re3668136016: rgba(42, 80, 160, 0.16);
  --c-bg-re3668136018: rgba(42, 80, 160, 0.18);
  --c-bg-re366813602: rgba(42, 80, 160, 0.2);
  --c-bg-re3668136024: rgba(42, 80, 160, 0.24);
  --c-bg-re3668136026: rgba(42, 80, 160, 0.26);
  --c-bg-re3668136028: rgba(42, 80, 160, 0.28);
  --c-bg-re366813603: rgba(42, 80, 160, 0.3);
  --c-bg-re3668136032: rgba(42, 80, 160, 0.32);
  --c-bg-re3668136034: rgba(42, 80, 160, 0.34);
  --c-bg-re3668136035: rgba(42, 80, 160, 0.35);
  --c-bg-re366813604: rgba(42, 80, 160, 0.4);
  --c-bg-re366813605: rgba(42, 80, 160, 0.5);
  --c-bg-re3668136066: rgba(42, 80, 160, 0.66);
  --c-bg-re463614092: rgba(58, 45, 18, 0.92);
  --c-bg-re5811118107: rgba(44, 75, 116, 0.7);
  --c-bg-re60606004: rgba(75, 75, 75, 0.4);
  --c-bg-re77139255018: rgba(39, 62, 103, 0.18);
  --c-bg-re9014022004: rgba(40, 66, 106, 0.4);
  --c-bg-re9224805: rgba(11, 28, 61, 0.5);
  --c-fg-000000: #ebebeb;
  --c-fg-0c2247: #dbe0e8;
  --c-fg-0d244a: #dadfe8;
  --c-fg-0f1e3d: #dce0e9;
  --c-fg-111111: #e7e7e7;
  --c-fg-111318: #e2e4ea;
  --c-fg-12705f: #d5e4e1;
  --c-fg-14294a: #d9dfe7;
  --c-fg-14294f: #d9dee7;
  --c-fg-16305f: #d6dce5;
  --c-fg-192c49: #d9dee7;
  --c-fg-19407a: #d2d9e2;
  --c-fg-1a3364: #d5dae4;
  --c-fg-1c3564: #d5dae4;
  --c-fg-1d2e5f: #d5d9e4;
  --c-fg-1f3f7d: #d1d7e2;
  --c-fg-22314f: #d7dce5;
  --c-fg-244488: #c3cbdc;
  --c-fg-2f9d5b: #5ace88;
  --c-fg-33415e: #d3d8e3;
  --c-fg-33456b: #d1d6e2;
  --c-fg-34486d: #d1d6e1;
  --c-fg-3a6fb5: #acbbce;
  --c-fg-41506b: #c4ccdb;
  --c-fg-44506b: #c4cbda;
  --c-fg-46587a: #bcc6d8;
  --c-fg-56688a: #b3bdd0;
  --c-fg-5a4048: #e0d3d7;
  --c-fg-5a91d7: #95a9c1;
  --c-fg-5b7099: #abb6cd;
  --c-fg-6f8ab5: #9aaac4;
  --c-fg-7286a6: #a1aec3;
  --c-fg-7cabef: #7cabef;
  --c-fg-7d1a2a: #da4e64;
  --c-fg-8593ad: #9aa6bb;
  --c-fg-8b9cb8: #8b9cb8;
  --c-fg-8c1a2c: #e8798e;
  --c-fg-8fb0dc: #8fb0dc;
  --c-fg-8fb0e0: #cfe0fa;
  --c-fg-8fb6ff: #8fb6ff;
  --c-fg-93a3bd: #93a3bd;
  --c-fg-a01d30: #de4a5f;
  --c-fg-a8801c: #e9be53;
  --c-fg-a8861d: #e8c454;
  --c-fg-a9b7cd: #a9b7cd;
  --c-fg-b8862f: #ddaf5f;
  --c-fg-b8901f: #e9c253;
  --c-fg-b9c4d8: #b9c4d8;
  --c-fg-bcc7da: #bcc7da;
  --c-fg-c9a24d: #d8b364;
  --c-fg-c9d6ec: #c9d6ec;
  --c-fg-c9d6ee: #c9d6ee;
  --c-fg-ccd6e8: #ccd6e8;
  --c-fg-daa520: #ecc050;
  --c-fg-dbe6f8: #dbe6f8;
  --c-fg-dfe6f2: #dfe6f2;
  --c-fg-e3bc45: #ebc551;
  --c-fg-e4eaf5: #e4eaf5;
  --c-fg-e8c56a: #edc765;
  --c-fg-e8eefb: #e8eefb;
  --c-fg-e8eefc: #e8eefc;
  --c-fg-e9c860: #eecb5b;
  --c-fg-eaf1ff: #eaf1ff;
  --c-fg-eef3ff: #eef3ff;
  --c-fg-f2f7ff: #f2f7ff;
  --c-fg-f3dc9a: #f6de97;
  --c-fg-ff6b6b: #f47676;
  --c-fg-ffffff: #ffffff;
  --c-fg-re1602948055: rgba(222, 74, 95, 0.55);
  --c-fg-re255255255035: rgba(255, 255, 255, 0.35);
  --c-fg-re25525525504: rgba(255, 255, 255, 0.4);
  --c-fg-re255255255045: rgba(255, 255, 255, 0.45);
  --c-fg-re255255255055: rgba(255, 255, 255, 0.55);
  --c-fg-re25525525506: rgba(255, 255, 255, 0.6);
  --c-fg-re255255255072: rgba(255, 255, 255, 0.72);
  --c-fg-re255255255078: rgba(255, 255, 255, 0.78);
  --c-fg-re255255255092: rgba(255, 255, 255, 0.92);
  --c-fg-re2564122062: rgba(210, 217, 226, 0.62);
  --c-fg-re3668136045: rgba(195, 203, 220, 0.45);
  --c-gl-f7edd2: #f7edd2;
  --c-gl-fdf3d0: #fdf3d0;
  --c-gl-fdf8e9: #fdf8e9;
  --c-gl-fff6dc: #fff6dc;
  --c-gl-fffbe8: #fffbe8;
  --c-gl-fffdf2: #fffdf2;
  --c-gl-fffdf6: #fffdf6;
  --c-gl-re2552552550: rgba(255, 255, 255, 0);
  --c-gl-re255255255002: rgba(255, 255, 255, 0.02);
  --c-gl-re255255255004: rgba(255, 255, 255, 0.04);
  --c-gl-re255255255005: rgba(255, 255, 255, 0.05);
  --c-gl-re255255255006: rgba(255, 255, 255, 0.06);
  --c-gl-re255255255008: rgba(255, 255, 255, 0.08);
  --c-gl-re255255255014: rgba(255, 255, 255, 0.14);
  --c-gl-re25525525502: rgba(255, 255, 255, 0.2);
  --c-gl-re255255255022: rgba(255, 255, 255, 0.22);
  --c-gl-re255255255032: rgba(255, 255, 255, 0.32);
  --c-gl-re255255255034: rgba(255, 255, 255, 0.34);
  --c-gl-re255255255042: rgba(255, 255, 255, 0.42);
  --c-gl-re255255255045: rgba(255, 255, 255, 0.45);
  --c-gl-re255255255062: rgba(255, 255, 255, 0.62);
  --c-gl-re255255255075: rgba(255, 255, 255, 0.75);
  --c-gl-re255255255085: rgba(255, 255, 255, 0.85);
  --c-gl-re255255255095: rgba(255, 255, 255, 0.95);
  --c-sh-ffffff: #ffffff;
  --c-sh-re000006: rgba(5, 7, 10, 0.06);
  --c-sh-re000022: rgba(5, 7, 10, 0.22);
  --c-sh-re000024: rgba(5, 7, 10, 0.24);
  --c-sh-re000025: rgba(5, 7, 10, 0.25);
  --c-sh-re000028: rgba(5, 7, 10, 0.28);
  --c-sh-re000035: rgba(5, 7, 10, 0.35);
  --c-sh-re000055: rgba(5, 7, 10, 0.55);
  --c-sh-re10265803: rgba(5, 12, 26, 0.3);
  --c-sh-re102858028: rgba(5, 13, 26, 0.28);
  --c-sh-re102858032: rgba(5, 13, 26, 0.32);
  --c-sh-re10285804: rgba(5, 13, 26, 0.4);
  --c-sh-re120175240018: rgba(24, 76, 138, 0.18);
  --c-sh-re120801004: rgba(50, 35, 9, 0.4);
  --c-sh-re1208010042: rgba(50, 35, 9, 0.42);
  --c-sh-re120921504: rgba(52, 40, 9, 0.4);
  --c-sh-re122658026: rgba(5, 12, 26, 0.26);
  --c-sh-re122658028: rgba(5, 12, 26, 0.28);
  --c-sh-re12265803: rgba(5, 12, 26, 0.3);
  --c-sh-re12518024002: rgba(25, 80, 140, 0.2);
  --c-sh-re133674028: rgba(6, 16, 33, 0.28);
  --c-sh-re15011020034: rgba(65, 49, 11, 0.34);
  --c-sh-re15011020038: rgba(65, 49, 11, 0.38);
  --c-sh-re15011020042: rgba(65, 49, 11, 0.42);
  --c-sh-re15011020044: rgba(65, 49, 11, 0.44);
  --c-sh-re15011020048: rgba(65, 49, 11, 0.48);
  --c-sh-re153070005: rgba(7, 13, 32, 0.05);
  --c-sh-re153070025: rgba(7, 13, 32, 0.25);
  --c-sh-re153070028: rgba(7, 13, 32, 0.28);
  --c-sh-re15307003: rgba(7, 13, 32, 0.3);
  --c-sh-re153070035: rgba(7, 13, 32, 0.35);
  --c-sh-re15307004: rgba(7, 13, 32, 0.4);
  --c-sh-re1602948007: rgba(72, 13, 22, 0.07);
  --c-sh-re160294801: rgba(72, 13, 22, 0.1);
  --c-sh-re1602948012: rgba(72, 13, 22, 0.12);
  --c-sh-re1602948014: rgba(72, 13, 22, 0.14);
  --c-sh-re1602948016: rgba(72, 13, 22, 0.16);
  --c-sh-re1602948024: rgba(72, 13, 22, 0.24);
  --c-sh-re160294803: rgba(72, 13, 22, 0.3);
  --c-sh-re1602948032: rgba(72, 13, 22, 0.32);
  --c-sh-re1602948042: rgba(72, 13, 22, 0.42);
  --c-sh-re164284008: rgba(7, 19, 38, 0.08);
  --c-sh-re164284016: rgba(7, 19, 38, 0.16);
  --c-sh-re164284028: rgba(7, 19, 38, 0.28);
  --c-sh-re16913429012: rgba(76, 60, 13, 0.12);
  --c-sh-re16913429035: rgba(76, 60, 13, 0.35);
  --c-sh-re1691342905: rgba(76, 60, 13, 0.5);
  --c-sh-re1691342906: rgba(76, 60, 13, 0.6);
  --c-sh-re1841344703: rgba(83, 60, 21, 0.3);
  --c-sh-re19022025507: rgba(190, 220, 255, 0.7);
  --c-sh-re201162750: rgba(96, 75, 29, 0);
  --c-sh-re20116275045: rgba(96, 75, 29, 0.45);
  --c-sh-re202020006: rgba(6, 8, 12, 0.06);
  --c-sh-re203560008: rgba(9, 16, 27, 0.08);
  --c-sh-re204179014: rgba(9, 18, 36, 0.14);
  --c-sh-re204179026: rgba(9, 18, 36, 0.26);
  --c-sh-re20417903: rgba(9, 18, 36, 0.3);
  --c-sh-re204179032: rgba(9, 18, 36, 0.32);
  --c-sh-re204179034: rgba(9, 18, 36, 0.34);
  --c-sh-re204179038: rgba(9, 18, 36, 0.38);
  --c-sh-re204179042: rgba(9, 18, 36, 0.42);
  --c-sh-re204179044: rgba(9, 18, 36, 0.44);
  --c-sh-re23219710608: rgba(129, 100, 23, 0.8);
  --c-sh-re255246200035: rgba(255, 246, 200, 0.35);
  --c-sh-re255255255014: rgba(255, 255, 255, 0.14);
  --c-sh-re25525525502: rgba(255, 255, 255, 0.2);
  --c-sh-re255255255022: rgba(255, 255, 255, 0.22);
  --c-sh-re255255255024: rgba(255, 255, 255, 0.24);
  --c-sh-re255255255025: rgba(255, 255, 255, 0.25);
  --c-sh-re255255255028: rgba(255, 255, 255, 0.28);
  --c-sh-re25525525503: rgba(255, 255, 255, 0.3);
  --c-sh-re255255255032: rgba(255, 255, 255, 0.32);
  --c-sh-re255255255035: rgba(255, 255, 255, 0.35);
  --c-sh-re25525525505: rgba(255, 255, 255, 0.5);
  --c-sh-re25525525506: rgba(255, 255, 255, 0.6);
  --c-sh-re25525525507: rgba(255, 255, 255, 0.7);
  --c-sh-re25525525508: rgba(255, 255, 255, 0.8);
  --c-sh-re255255255085: rgba(255, 255, 255, 0.85);
  --c-sh-re25525525509: rgba(255, 255, 255, 0.9);
  --c-sh-re255255255095: rgba(255, 255, 255, 0.95);
  --c-sh-re2564122012: rgba(11, 29, 55, 0.12);
  --c-sh-re2564122014: rgba(11, 29, 55, 0.14);
  --c-sh-re2564122016: rgba(11, 29, 55, 0.16);
  --c-sh-re2564122024: rgba(11, 29, 55, 0.24);
  --c-sh-re3668136006: rgba(16, 31, 61, 0.06);
  --c-sh-re3668136007: rgba(16, 31, 61, 0.07);
  --c-sh-re3668136008: rgba(16, 31, 61, 0.08);
  --c-sh-re3668136009: rgba(16, 31, 61, 0.09);
  --c-sh-re366813601: rgba(16, 31, 61, 0.1);
  --c-sh-re3668136012: rgba(16, 31, 61, 0.12);
  --c-sh-re3668136013: rgba(16, 31, 61, 0.13);
  --c-sh-re3668136014: rgba(16, 31, 61, 0.14);
  --c-sh-re3668136016: rgba(16, 31, 61, 0.16);
  --c-sh-re366813602: rgba(16, 31, 61, 0.2);
  --c-sh-re408015001: rgba(18, 36, 68, 0.1);
  --c-sh-re4715791032: rgba(21, 71, 41, 0.32);
  --c-sh-re5122806: rgba(2, 6, 13, 0.6);
  --c-sh-re5122807: rgba(2, 6, 13, 0.7);
  --c-sh-re81632035: rgba(4, 7, 14, 0.35);
  --c-sh-re82048045: rgba(4, 9, 21, 0.45);
  --c-sh-re8204805: rgba(4, 9, 21, 0.5);
}

/* The footer does not change theme. It is navy on a white page already, so
   every token it uses is pinned back to its light value here and the whole
   band, tiles and Subscribe button included, renders identically in both. */
[data-theme="dark"] .footer {
  --c-bg-13233f: #13233f;
  --c-bg-2a2a2a: #2a2a2a;
  --c-bg-b07f28: #b07f28;
  --c-bg-b8901f: #b8901f;
  --c-bg-dbb24a: #dbb24a;
  --c-bg-e6c25c: #e6c25c;
  --c-bg-e8c56a: #e8c56a;
  --c-bg-eacd6f: #eacd6f;
  --c-bg-f9edbf: #f9edbf;
  --c-bg-ffffff: #ffffff;
  --c-bg-re1028580: rgba(10, 28, 58, 0);
  --c-bg-re102858035: rgba(10, 28, 58, 0.35);
  --c-bg-re123471045: rgba(12, 34, 71, 0.45);
  --c-bg-re12518024009: rgba(125, 180, 240, 0.9);
  --c-bg-re1409620065: rgba(140, 96, 20, 0.65);
  --c-bg-re1602948032: rgba(160, 29, 48, 0.32);
  --c-bg-re160294805: rgba(160, 29, 48, 0.5);
  --c-bg-re190215245035: rgba(190, 215, 245, 0.35);
  --c-bg-re22023525505: rgba(220, 235, 255, 0.5);
  --c-bg-re228238251092: rgba(228, 238, 251, 0.92);
  --c-bg-re232241252096: rgba(232, 241, 252, 0.96);
  --c-bg-re24722022504: rgba(247, 220, 225, 0.4);
  --c-bg-re248251255096: rgba(248, 251, 255, 0.96);
  --c-bg-re25323523806: rgba(253, 235, 238, 0.6);
  --c-bg-re255255255004: rgba(255, 255, 255, 0.04);
  --c-bg-re255255255005: rgba(255, 255, 255, 0.05);
  --c-bg-re255255255008: rgba(255, 255, 255, 0.08);
  --c-bg-re25525525501: rgba(255, 255, 255, 0.1);
  --c-bg-re255255255015: rgba(255, 255, 255, 0.15);
  --c-bg-re255255255018: rgba(255, 255, 255, 0.18);
  --c-bg-re25525525502: rgba(255, 255, 255, 0.2);
  --c-bg-re255255255028: rgba(255, 255, 255, 0.28);
  --c-bg-re25525525504: rgba(255, 255, 255, 0.4);
  --c-bg-re255255255042: rgba(255, 255, 255, 0.42);
  --c-bg-re255255255062: rgba(255, 255, 255, 0.62);
  --c-bg-re25525525507: rgba(255, 255, 255, 0.7);
  --c-bg-re255255255072: rgba(255, 255, 255, 0.72);
  --c-bg-re25525525508: rgba(255, 255, 255, 0.8);
  --c-bg-re255255255088: rgba(255, 255, 255, 0.88);
  --c-bg-re25525525509: rgba(255, 255, 255, 0.9);
  --c-bg-re255255255096: rgba(255, 255, 255, 0.96);
  --c-bg-re2564122028: rgba(25, 64, 122, 0.28);
  --c-bg-re2564122055: rgba(25, 64, 122, 0.55);
  --c-fg-000000: #000000;
  --c-fg-0c2247: #0c2247;
  --c-fg-14294f: #14294f;
  --c-fg-19407a: #19407a;
  --c-fg-8c1a2c: #8c1a2c;
  --c-fg-e8c56a: #e8c56a;
  --c-fg-ffffff: #ffffff;
  --c-fg-re255255255035: rgba(255, 255, 255, 0.35);
  --c-fg-re25525525504: rgba(255, 255, 255, 0.4);
  --c-fg-re255255255045: rgba(255, 255, 255, 0.45);
  --c-fg-re255255255055: rgba(255, 255, 255, 0.55);
  --c-fg-re25525525506: rgba(255, 255, 255, 0.6);
  --c-gl-fffbe8: #fffbe8;
  --c-gl-re2552552550: rgba(255, 255, 255, 0);
  --c-gl-re255255255008: rgba(255, 255, 255, 0.08);
  --c-gl-re255255255022: rgba(255, 255, 255, 0.22);
  --c-gl-re255255255045: rgba(255, 255, 255, 0.45);
  --c-gl-re255255255062: rgba(255, 255, 255, 0.62);
  --c-sh-re000022: rgba(0, 0, 0, 0.22);
  --c-sh-re000024: rgba(0, 0, 0, 0.24);
  --c-sh-re000028: rgba(0, 0, 0, 0.28);
  --c-sh-re102858032: rgba(10, 28, 58, 0.32);
  --c-sh-re10285804: rgba(10, 28, 58, 0.4);
  --c-sh-re120801004: rgba(120, 80, 10, 0.4);
  --c-sh-re1208010042: rgba(120, 80, 10, 0.42);
  --c-sh-re15011020038: rgba(150, 110, 20, 0.38);
  --c-sh-re15011020048: rgba(150, 110, 20, 0.48);
  --c-sh-re1602948012: rgba(160, 29, 48, 0.12);
  --c-sh-re1602948014: rgba(160, 29, 48, 0.14);
  --c-sh-re1602948016: rgba(160, 29, 48, 0.16);
  --c-sh-re1602948024: rgba(160, 29, 48, 0.24);
  --c-sh-re255255255035: rgba(255, 255, 255, 0.35);
  --c-sh-re25525525505: rgba(255, 255, 255, 0.5);
  --c-sh-re25525525506: rgba(255, 255, 255, 0.6);
  --c-sh-re255255255085: rgba(255, 255, 255, 0.85);
  --c-sh-re25525525509: rgba(255, 255, 255, 0.9);
  --c-sh-re255255255095: rgba(255, 255, 255, 0.95);
  --c-sh-re2564122012: rgba(25, 64, 122, 0.12);
  --c-sh-re2564122016: rgba(25, 64, 122, 0.16);
}

/* SVG presentation attributes do not accept var(), so the dark values are
   applied as real declarations, which win over the attribute. */
[data-theme="dark"] [stroke="#000000"] { stroke: #ebebeb; }
[data-theme="dark"] [stop-color="#0a1830"] { stop-color: #0d1e3d; }
[data-theme="dark"] [fill="#0c1c38"] { fill: #dde1e9; }
[data-theme="dark"] [stop-color="#0d1d3a"] { stop-color: #102346; }
[data-theme="dark"] [stroke="#0e2140"] { stroke: #dce0e8; }
[data-theme="dark"] [stop-color="#101f3a"] { stop-color: #132546; }
[data-theme="dark"] [stroke="#111318"] { stroke: #e2e4ea; }
[data-theme="dark"] [fill="#14294f"] { fill: #d9dee7; }
[data-theme="dark"] [stop-color="#14294f"] { stop-color: #172f5b; }
[data-theme="dark"] [stop-color="#1d3556"] { stop-color: #25436d; }
[data-theme="dark"] [fill="#1f3f7d"] { fill: #d1d7e2; }
[data-theme="dark"] [stop-color="#1f3f7d"] { stop-color: #254b96; }
[data-theme="dark"] [stroke="#1f3f7d"] { stroke: #d1d7e2; }
[data-theme="dark"] [stroke="#22314f"] { stroke: #d7dce5; }
[data-theme="dark"] [fill="#244488"] { fill: #c3cbdc; }
[data-theme="dark"] [stroke="#244488"] { stroke: #c3cbdc; }
[data-theme="dark"] [fill="#2b52a0"] { fill: #b9c2d6; }
[data-theme="dark"] [stop-color="#2f5185"] { stop-color: #375f9c; }
[data-theme="dark"] [stop-color="#2f6cf6"] { stop-color: #293e6c; }
[data-theme="dark"] [stroke="#2f6cf6"] { stroke: #99a6c3; }
[data-theme="dark"] [stroke="#2f9d5b"] { stroke: #5ace88; }
[data-theme="dark"] [stroke="#3a2a08"] { stroke: #e9e6dd; }
[data-theme="dark"] [stop-color="#3a63b8"] { stop-color: #2c4373; }
[data-theme="dark"] [fill="#44506b"] { fill: #c4cbda; }
[data-theme="dark"] [fill="#4d8bff"] { fill: #4d8bff; }
[data-theme="dark"] [stop-color="#4d8bff"] { stop-color: #273e67; }
[data-theme="dark"] [stroke="#4d8bff"] { stroke: #4d8bff; }
[data-theme="dark"] [fill="#5b8bd0"] { fill: #97a9c2; }
[data-theme="dark"] [stop-color="#6d4a14"] { stop-color: #6d4a14; }
[data-theme="dark"] [stop-color="#744f14"] { stop-color: #744f14; }
[data-theme="dark"] [fill="#7cabef"] { fill: #7cabef; }
[data-theme="dark"] [stroke="#7cabef"] { stroke: #7cabef; }
[data-theme="dark"] [stop-color="#7ea4e6"] { stop-color: #263d64; }
[data-theme="dark"] [stop-color="#8f6417"] { stop-color: #8f6417; }
[data-theme="dark"] [fill="#8fa6c8"] { fill: #8fa6c8; }
[data-theme="dark"] [stroke="#8fa6c8"] { stroke: #8fa6c8; }
[data-theme="dark"] [stroke="#8fb0e0"] { stroke: #8fb0e0; }
[data-theme="dark"] [fill="#8fb6ff"] { fill: #8fb6ff; }
[data-theme="dark"] [stop-color="#8fb6ff"] { stop-color: #23314d; }
[data-theme="dark"] [stroke="#8fb6ff"] { stroke: #8fb6ff; }
[data-theme="dark"] [stop-color="#93661d"] { stop-color: #93661d; }
[data-theme="dark"] [stroke="#a01d30"] { stroke: #de4a5f; }
[data-theme="dark"] [stroke="#a5792a"] { stroke: #ddb05f; }
[data-theme="dark"] [stroke="#a8801c"] { stroke: #e9be53; }
[data-theme="dark"] [stop-color="#a97a1d"] { stop-color: #a97a1d; }
[data-theme="dark"] [stroke="#b6c4de"] { stroke: #b6c4de; }
[data-theme="dark"] [stop-color="#b8862f"] { stop-color: #b8862f; }
[data-theme="dark"] [stop-color="#bd8a2a"] { stop-color: #bd8a2a; }
[data-theme="dark"] [stop-color="#c08d26"] { stop-color: #c08d26; }
[data-theme="dark"] [stop-color="#c9962f"] { stop-color: #c9962f; }
[data-theme="dark"] [fill="#c9a24d"] { fill: #d8b364; }
[data-theme="dark"] [stop-color="#c9a24d"] { stop-color: #c9a24d; }
[data-theme="dark"] [stop-color="#cfe0ff"] { stop-color: #1c283e; }
[data-theme="dark"] [stop-color="#d9ad4e"] { stop-color: #d9ad4e; }
[data-theme="dark"] [stroke="#dbe7f7"] { stroke: #dbe7f7; }
[data-theme="dark"] [stop-color="#dcab42"] { stop-color: #dcab42; }
[data-theme="dark"] [stroke="#e8c352"] { stroke: #eec74e; }
[data-theme="dark"] [fill="#e8c56a"] { fill: #edc765; }
[data-theme="dark"] [stop-color="#e8c56a"] { stop-color: #e8c56a; }
[data-theme="dark"] [stroke="#e8c56a"] { stroke: #edc765; }
[data-theme="dark"] [stop-color="#eec766"] { stop-color: #eec766; }
[data-theme="dark"] [stroke="#f2f7ff"] { stroke: #f2f7ff; }
[data-theme="dark"] [fill="#f3dc9a"] { fill: #f6de97; }
[data-theme="dark"] [stop-color="#f3dc9a"] { stop-color: #f3dc9a; }
[data-theme="dark"] [stroke="#f3dc9a"] { stroke: #f6de97; }
[data-theme="dark"] [fill="#f6e3a8"] { fill: #f9e4a5; }
[data-theme="dark"] [stop-color="#f6e3a8"] { stop-color: #f6e3a8; }
[data-theme="dark"] [stroke="#f6e3a8"] { stroke: #f9e4a5; }
[data-theme="dark"] [stop-color="#f7dd93"] { stop-color: #f7dd93; }
[data-theme="dark"] [stop-color="#fdf3d0"] { stop-color: #fdf3d0; }
[data-theme="dark"] [stroke="#fdf3d0"] { stroke: #fdf3d0; }
[data-theme="dark"] [fill="#ff3b3b"] { fill: #f04a4a; }
[data-theme="dark"] [stop-color="#ff3b3b"] { stop-color: #ff3b3b; }
[data-theme="dark"] [stroke="#ff3b3b"] { stroke: #f04a4a; }
[data-theme="dark"] [stroke="#ff5a5a"] { stroke: #f36666; }
[data-theme="dark"] [stroke="#ff6a6a"] { stroke: #f47575; }
[data-theme="dark"] [stroke="#ff6b6b"] { stroke: #f47676; }
[data-theme="dark"] [stop-color="#ffdc88"] { stop-color: #ffdc88; }
[data-theme="dark"] [stroke="#ffe6a8"] { stroke: #fce5ab; }
[data-theme="dark"] [stop-color="#ffe79c"] { stop-color: #ffe79c; }
[data-theme="dark"] [stop-color="#fff0b4"] { stop-color: #fff0b4; }
[data-theme="dark"] [stop-color="#fff3c8"] { stop-color: #fff3c8; }
[data-theme="dark"] [stop-color="#fff4cd"] { stop-color: #fff4cd; }
[data-theme="dark"] [stop-color="#fff6dc"] { stop-color: #121f37; }
[data-theme="dark"] [fill="#ffffff"] { fill: #ffffff; }
[data-theme="dark"] [stop-color="#ffffff"] { stop-color: #0e182a; }
[data-theme="dark"] [stroke="#ffffff"] { stroke: #ffffff; }

/* ==================================================================
   Dark mode: gradient-clipped text that fell below AA
   ==================================================================
   Gold and green wordmarks are painted with background-clip:text, so a
   glyph is only as readable as the darkest stop of its ramp. Against a
   navy ground those bottom stops sat between 2.29:1 and 3.52:1 where AA
   asks 4.5:1, or 3:1 for large text. Only the failing stops are raised,
   by lightness alone with hue and saturation untouched, so the ramps
   keep their metallic roll. Light mode is not touched: on white the same
   stops are the readable end. */

/* Active navbar link, 15px, on the dark pill. Was 2.97:1. */
[data-theme="dark"] .nav-pages a.active {
  background: linear-gradient(135deg, #a87e00 0%, var(--c-bg-b8860b) 30%, var(--c-bg-daa520) 45%,
              var(--c-bg-e3bc45) 55%, var(--c-bg-daa520) 65%, var(--c-bg-b8860b) 80%, #a87e00 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Bento card labels and titles. The token is the floor of every gold ramp
   in these two components, so lifting it once keeps the labels, the values
   and the titles on the same gold. Was 3.52:1 on labels. */
[data-theme="dark"] .usp-bento,
[data-theme="dark"] .magic-bento-grid--icy {
  --c-bg-8f6c12: #a87f15;
}

/* "TRADE GOLD 24/7", 44px over the homepage banner. Was 2.58:1. */
[data-theme="dark"] .banner-copy [style*="--c-bg-8f6c12"] {
  background-image: linear-gradient(105deg, #a07914 0%, var(--c-bg-b8901f) 30%,
                    var(--c-bg-e8c56a) 50%, var(--c-bg-a8861d) 72%, #a07914 100%) !important;
}

/* Pathway reward figures, 21px and 18px over the blue banner. Was 2.42:1.
   Keyed on the stop position because the same ramp at different positions
   runs on how-it-works over a lighter surface, where it already passes. */
[data-theme="dark"] [style*="var(--c-bg-c9a24d) 55%"] {
  background-image: linear-gradient(100deg, #c08c31 0%, var(--c-bg-f0dda4) 30%,
                    var(--c-bg-c9a24d) 55%, var(--c-gl-fff6dc) 70%, #c28a30 100%) !important;
}

/* The label beside those figures is 18px, a shade under the 18.66px that
   makes bold text "large", so it answers to 4.5:1 rather than 3:1 and needs
   a paler ramp than the figure above it. Was 3.12:1. */
[data-theme="dark"] [style*="font-size: 18px"][style*="var(--c-bg-c9a24d) 55%"] {
  background-image: linear-gradient(100deg, #d9b069 0%, var(--c-bg-f0dda4) 30%,
                    #d2b26c 55%, var(--c-gl-fff6dc) 70%, #dab06b 100%) !important;
}

/* "CXM" in the broker banner heading, 46px. Was 2.29:1. */
[data-theme="dark"] .banner-copy [style*="--c-bg-1e9e4a"] {
  background-image: linear-gradient(105deg, var(--c-bg-1e9e4a) 0%,
                    var(--c-bg-5ed98a) 45%, #129340 100%) !important;
}

/* ==================================================================
   Entrance and accent keyframes driven from inline styles
   ==================================================================
   These are referenced only from `animation:` inside style="" attributes
   in the page markup, never from a rule in this file. An earlier pass
   that pruned unreferenced @keyframes read this stylesheet alone, did
   not see those references, and removed them; every element carrying
   `opacity:0` plus one of these animations then stayed invisible. Keep
   markup in scope when checking whether a keyframe is used. */


@keyframes ahRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@keyframes bannerArtIn{0%{opacity:0}100%{opacity:1}}

@keyframes cardFade{0%{opacity:0;transform:scale(0.94)}100%{opacity:1;transform:scale(1)}}

@keyframes cardFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@keyframes csDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@keyframes csKnob { from { opacity: 0; transform: translateX(-10px) scale(.6); } to { opacity: 1; transform: none; } }

@keyframes csRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@keyframes csSheen { 0% { transform: translateX(-120%); } 100% { transform: translateX(240%); } }

@keyframes daBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@keyframes daRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@keyframes dlDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

@keyframes dlFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes dotPop{0%{opacity:0;transform:scale(0.3)}70%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}

@keyframes drawPath{100%{stroke-dashoffset:0}}

@keyframes fadeLeft{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}

@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}

@keyframes fbRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@keyframes fbSheen { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }

@keyframes fdFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes ipArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

@keyframes ipDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

@keyframes ipFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes ipPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

@keyframes ipRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@keyframes ipSheenTxt { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@keyframes kyDash { to { stroke-dashoffset: -28; } }

@keyframes kyFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes kyScan { 0% { transform: translateY(0); } 50% { transform: translateY(52px); } 100% { transform: translateY(0); } }

@keyframes kyTick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes lineGrow{0%{height:0%}100%{height:100%}}

@keyframes mlDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

@keyframes mlFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes mlWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes mpDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

@keyframes mpFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes mpPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

@keyframes omFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@keyframes omRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@keyframes osDash { to { stroke-dashoffset: -28; } }

@keyframes osPulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

@keyframes peDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

@keyframes peDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@keyframes peFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes pePop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

@keyframes peRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@keyframes peSheen { 0% { transform: translateX(-120%); } 100% { transform: translateX(240%); } }

@keyframes peWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes ppArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

@keyframes ppDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

@keyframes ppFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes ppPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

@keyframes ppRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@keyframes ppSheenTxt { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@keyframes ppWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes ptDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

@keyframes ptDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@keyframes ptFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes ptGleam { 0%, 100% { opacity: .25; transform: rotate(0deg); } 50% { opacity: .6; transform: rotate(8deg); } }

@keyframes ptRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes ptSeal { from { opacity: 0; transform: scale(.6) rotate(-14deg); } to { opacity: 1; transform: none; } }

@keyframes ptTick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

@keyframes ptWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes rowIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}

@keyframes scPop { from { opacity: 0; transform: scale(.82) rotate(-8deg); } to { opacity: 1; transform: none; } }

@keyframes scRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes scSheen { 0% { transform: translateX(-130%); } 100% { transform: translateX(260%); } }

@keyframes stepIn{0%{opacity:0;transform:scale(0.4)}60%{opacity:1;transform:scale(1.14)}80%{transform:scale(0.96)}100%{opacity:1;transform:scale(1)}}

@keyframes tickIn{0%{opacity:0;transform:scale(0.3)}55%{opacity:1;transform:scale(1.3)}75%{transform:scale(0.94)}100%{opacity:1;transform:scale(1)}}

@keyframes tileFloat{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(10deg) translateY(-9px)}}

@keyframes tileFloat2{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-12px)}}

@keyframes twDraw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

@keyframes twDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@keyframes twFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes twPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

@keyframes twRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@keyframes uspMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@keyframes wbRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes wbSheen { 0% { transform: translateX(-130%) skewX(-14deg); } 100% { transform: translateX(260%) skewX(-14deg); } }

@keyframes wrDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@keyframes wrFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes wrGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@keyframes wrPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

@keyframes wrRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@keyframes wrSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@keyframes wrTick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

@keyframes wsRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* The hamburger and its close state are three plain bars, coloured for the
   white bar in light mode. On the dark panel they were #222 on navy, which is
   all but invisible. Track the panel's own link colour instead. */
[data-theme="dark"] .mobile-toggle span {
  background: var(--c-fg-19407a);
}