/*fern-site-stylesheet*/@font-face {
    font-family: 'Geist';
    src: url('/_fern-files/ninjatrader-partner.docs.buildwithfern.com/2ffebe993e969069a9789d15164b7715d42491b5835516c5e3b935d5f81b05f1/fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/_fern-files/ninjatrader-partner.docs.buildwithfern.com/2ffebe993e969069a9789d15164b7715d42491b5835516c5e3b935d5f81b05f1/fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GeistMono';
    src: url('/_fern-files/ninjatrader-partner.docs.buildwithfern.com/afaacc4c5fbba89d2ebf7a02dc4070208540874592a5504d57175782fe893101/fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 32px;
  --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Geist', 'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'GeistMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #f0f1f3;
  --accent-2: #e9edf3;
  --accent-3: #dde5f2;
  --accent-4: #cdddf6;
  --accent-5: #bbd2f7;
  --accent-6: #a5c4f6;
  --accent-7: #8cb1ee;
  --accent-8: #6898e7;
  --accent-9: #0161e7;
  --accent-10: #0054ce;
  --accent-11: #0050ca;
  --accent-12: #0f2f64;

  --accent-a1: #285b9005;
  --accent-a2: #0a5fcb0c;
  --accent-a3: #0a5bd719;
  --accent-a4: #0013ff1a;
  --accent-a5: #004aff33;
  --accent-a6: #0000ff1a;
  --accent-a7: #0157e56d;
  --accent-a8: #0255dd93;
  --accent-a9: #0060e7fe;
  --accent-a10: #0054ce;
  --accent-a11: #0050ca;
  --accent-a12: #01235bf0;

  --accent-contrast: #fff;
  --accent-surface: #e6ebf3cc;
  --accent-indicator: #0161e7;
  --accent-track: #0161e7;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(95.9% 0.0022 260);
      --accent-2: oklch(94.5% 0.0094 260);
      --accent-3: oklch(92% 0.0198 260);
      --accent-4: oklch(89.3% 0.0386 260);
      --accent-5: oklch(85.8% 0.0578 260);
      --accent-6: oklch(81.5% 0.0786 260);
      --accent-7: oklch(75.7% 0.0973 260);
      --accent-8: oklch(67.9% 0.1288 260);
      --accent-9: oklch(53.3% 0.2171 260);
      --accent-10: oklch(48.6% 0.2016 260);
      --accent-11: oklch(47.3% 0.2016 260);
      --accent-12: oklch(31.6% 0.1012 260);

      --accent-a1: color(display-p3 0.0353 0.2667 0.502 / 0.017);
      --accent-a2: color(display-p3 0.0039 0.2902 0.6745 / 0.041);
      --accent-a3: color(display-p3 0.0118 0.3137 0.7922 / 0.091);
      --accent-a4: color(display-p3 0.0039 0.3216 0.9373 / 0.148);
      --accent-a5: color(display-p3 0.0039 0.3294 0.9412 / 0.218);
      --accent-a6: color(display-p3 0.0039 0.3176 0.9176 / 0.3);
      --accent-a7: color(display-p3 0.0039 0.2902 0.8431 / 0.398);
      --accent-a8: color(display-p3 0 0.2745 0.8157 / 0.533);
      --accent-a9: color(display-p3 0 0.2588 0.8588 / 0.837);
      --accent-a10: color(display-p3 0 0.2235 0.7529 / 0.861);
      --accent-a11: color(display-p3 0 0.2118 0.7373 / 0.869);
      --accent-a12: color(display-p3 0 0.0941 0.3137 / 0.902);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9059 0.9216 0.9529 / 0.8);
      --accent-indicator: oklch(53.3% 0.2171 260);
      --accent-track: oklch(53.3% 0.2171 260);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfc;
  --grayscale-2: #f9f9f9;
  --grayscale-3: #f0f0f0;
  --grayscale-4: #e8e8e8;
  --grayscale-5: #e0e0e0;
  --grayscale-6: #d9d9d9;
  --grayscale-7: #cecece;
  --grayscale-8: #bbbbbb;
  --grayscale-9: #8d8d8d;
  --grayscale-10: #838383;
  --grayscale-11: #646464;
  --grayscale-12: #202020;

  --grayscale-a1: #00000003;
  --grayscale-a2: #00000006;
  --grayscale-a3: #0000000f;
  --grayscale-a4: #00000017;
  --grayscale-a5: #0000001f;
  --grayscale-a6: #00000026;
  --grayscale-a7: #00000031;
  --grayscale-a8: #00000044;
  --grayscale-a9: #00000072;
  --grayscale-a10: #0000007c;
  --grayscale-a11: #0000009b;
  --grayscale-a12: #000000df;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d8d;
  --grayscale-track: #8d8d8d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.988);
      --grayscale-2: color(display-p3 0.975 0.975 0.975);
      --grayscale-3: color(display-p3 0.939 0.939 0.939);
      --grayscale-4: color(display-p3 0.908 0.908 0.908);
      --grayscale-5: color(display-p3 0.88 0.88 0.88);
      --grayscale-6: color(display-p3 0.849 0.849 0.849);
      --grayscale-7: color(display-p3 0.807 0.807 0.807);
      --grayscale-8: color(display-p3 0.732 0.732 0.732);
      --grayscale-9: color(display-p3 0.553 0.553 0.553);
      --grayscale-10: color(display-p3 0.512 0.512 0.512);
      --grayscale-11: color(display-p3 0.392 0.392 0.392);
      --grayscale-12: color(display-p3 0.125 0.125 0.125);

      --grayscale-a1: #00000003;
      --grayscale-a2: #00000006;
      --grayscale-a3: #0000000f;
      --grayscale-a4: #00000017;
      --grayscale-a5: #0000001f;
      --grayscale-a6: #00000026;
      --grayscale-a7: #00000031;
      --grayscale-a8: #00000044;
      --grayscale-a9: #00000072;
      --grayscale-a10: #0000007c;
      --grayscale-a11: #0000009b;
      --grayscale-a12: #000000df;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.553 0.553 0.553);
      --grayscale-track: color(display-p3 0.553 0.553 0.553);
    }
  }
}


.dark {
  --accent-1: #1b222d;
  --accent-2: #1d2532;
  --accent-3: #203352;
  --accent-4: #1e3b6c;
  --accent-5: #26467c;
  --accent-6: #30528c;
  --accent-7: #3b60a0;
  --accent-8: #4471bc;
  --accent-9: #639dff;
  --accent-10: #5891f2;
  --accent-11: #87b5ff;
  --accent-12: #d0e2ff;

  --accent-a1: #0023ed09;
  --accent-a2: #0055f20f;
  --accent-a3: #2476fe34;
  --accent-a4: #1c6ffd53;
  --accent-a5: #307cfd66;
  --accent-a6: #4488ff78;
  --accent-a7: #5190fe90;
  --accent-a8: #5594feb1;
  --accent-a9: #639dff;
  --accent-a10: #5b98fff0;
  --accent-a11: #87b5ff;
  --accent-a12: #d0e2ff;

  --accent-contrast: #fff;
  --accent-surface: #1c283e80;
  --accent-indicator: #639dff;
  --accent-track: #639dff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(25.1% 0.0235 260.3);
      --accent-2: oklch(26.4% 0.0272 260.3);
      --accent-3: oklch(32% 0.062 260.3);
      --accent-4: oklch(35.7% 0.0911 260.3);
      --accent-5: oklch(39.9% 0.0991 260.3);
      --accent-6: oklch(44.3% 0.1032 260.3);
      --accent-7: oklch(49.4% 0.1114 260.3);
      --accent-8: oklch(55.3% 0.1282 260.3);
      --accent-9: oklch(70.1% 0.1568 260.3);
      --accent-10: oklch(66.3% 0.1568 260.3);
      --accent-11: oklch(77.1% 0.1217 260.3);
      --accent-12: oklch(90.8% 0.0454 260.3);

      --accent-a1: color(display-p3 0 0.1333 0.9922 / 0.028);
      --accent-a2: color(display-p3 0.051 0.3647 0.9961 / 0.051);
      --accent-a3: color(display-p3 0.2078 0.4588 1 / 0.194);
      --accent-a4: color(display-p3 0.1922 0.4392 1 / 0.309);
      --accent-a5: color(display-p3 0.2745 0.498 1 / 0.378);
      --accent-a6: color(display-p3 0.3333 0.5412 1 / 0.452);
      --accent-a7: color(display-p3 0.3804 0.5765 1 / 0.54);
      --accent-a8: color(display-p3 0.3922 0.5922 0.9961 / 0.669);
      --accent-a9: color(display-p3 0.451 0.6275 1 / 0.968);
      --accent-a10: color(display-p3 0.4235 0.6078 1 / 0.908);
      --accent-a11: color(display-p3 0.5804 0.7216 1 / 0.973);
      --accent-a12: color(display-p3 0.8392 0.8941 1 / 0.987);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1176 0.1569 0.2353 / 0.5);
      --accent-indicator: oklch(70.1% 0.1568 260.3);
      --accent-track: oklch(70.1% 0.1568 260.3);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(1, 97, 231, 1);
  --background: rgba(244, 244, 245, 1);
  --border: rgba(229, 231, 234, 1);
  --sidebar-background: initial;
  --header-background: rgba(253, 253, 253, 1);
  --card-background: rgba(253, 253, 253, 1);
  --theme-color: #f4f4f5;
}

.dark {
  color-scheme: dark;
  --accent: rgba(99, 157, 255, 1);
  --background: rgba(31, 34, 38, 1);
  --border: rgba(63, 67, 73, 1);
  --sidebar-background: initial;
  --header-background: rgba(7, 9, 14, 1);
  --card-background: rgba(31, 34, 38, 1);
  --theme-color: #1f2226;
}

/* ================================================================
   NinjaTrader Partner Docs — Strata landing page (NT-52529)

   Reproduces the Strata look via design tokens + custom CSS (no
   component imports — custom React does not render on this Fern
   instance). Values sourced from the Figma "Partners Home Page"
   (node 153:13936, light) and the interior/dark tokens (102:10216).

   The design is LIGHT-primary; :root carries the real Strata light
   values, `.dark` overrides with the Strata dark values.
   ================================================================ */

:root {
  /* Brand + accents */
  --tpp-accent: #0161e7;                     /* button/color/primary/high */
  --tpp-accent-hover: #0a6ff0;
  --tpp-brand: #ff4200;                      /* skin/icon/brand (orange) */
  --tpp-link: #0161e7;

  /* Radii (Strata) */
  --tpp-radius-md: 8px;
  --tpp-radius-lg: 10px;
  --tpp-radius-xl: 16px;

  /* LIGHT theme (Strata light tokens, node 153:13936) */
  --tpp-surface-1: #fdfdfd;                  /* skin/bg/surface/level-01 */
  --tpp-surface-2: #f4f4f5;                  /* skin/bg/surface/level-02 / screen */
  --tpp-text-1: #0a0b0e;                     /* skin/text/primary */
  --tpp-text-2: #424346;                     /* skin/text/secondary */
  --tpp-text-3: #57585b;                     /* skin/text/tertiary */
  --tpp-border: #e5e7ea;                     /* skin/border/subtle */
  --tpp-badge-bg: rgba(148, 120, 254, 0.10); /* status/color/info/badge (#9478fe1a) */
  --tpp-badge-text: #7b37ff;                 /* skin/text/info */
  --tpp-ai-1: #0161e7;                       /* gradient/brand/ai stop-01 (light) */
  --tpp-ai-2: #037a59;                       /* gradient/brand/ai stop-02 (light) */
}

.dark {
  /* DARK theme (Strata dark tokens) */
  --tpp-surface-1: #07090e;
  --tpp-surface-2: #1f2226;
  --tpp-text-1: #eef2f7;
  --tpp-text-2: #b3b8bf;
  --tpp-text-3: #9a9fa6;
  --tpp-border: #3f4349;
  --tpp-badge-bg: rgba(148, 120, 254, 0.15);
  --tpp-badge-text: #a28dff;
  --tpp-link: #639dff;
  --tpp-ai-1: #6aa2fe;                        /* AI gradient (dark) */
  --tpp-ai-2: #08d49d;
}

/* ---------- Layout shell ---------- */
.tpp-landing {
  max-width: 1160px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* ---------- Hero (no buttons — CTA lives in the closing section) ---------- */
.tpp-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  align-items: center;
  background: var(--tpp-surface-1);
  border: 1px solid var(--tpp-border);
  border-radius: var(--tpp-radius-xl);
  padding: 3rem;
  overflow: hidden;
  position: relative;
}
.tpp-hero-copy { position: relative; z-index: 2; }
.tpp-hero-title {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);  /* Strata Display Medium ~56px */
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tpp-text-1);
  margin: 0 0 1rem;
}
.tpp-hero-sub {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tpp-text-2);
  max-width: 32rem;
  margin: 0;
}

/* Hero visual — the dashboard is IN-FLOW, so its rendered height (which scales
   with its width) drives the row height. It always shows complete and never
   clips, at every breakpoint — there's no fixed row height to overflow. The
   code editor is an absolute overlay in front. !important beats Fern's base
   reset `img,video{max-width:100%}`. */
.tpp-hero-visual {
  position: relative;
}
.tpp-hero-dashboard {
  display: block;
  width: 100%;
  max-width: none !important;
  height: auto;
  border-radius: var(--tpp-radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
/* Code editor: overlaps in front, lower-left of the dashboard. */
.tpp-hero-code {
  position: absolute;
  left: -2%;
  bottom: 8%;
  width: 46%;
  max-width: none !important;
  height: auto;
  border-radius: var(--tpp-radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30);
}

/* ---------- Buttons ---------- */
.tpp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 1.1rem;
  border-radius: var(--tpp-radius-md);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tpp-btn-primary {
  background: var(--tpp-accent);
  color: #ffffff !important;
}
.tpp-btn-primary:hover { background: var(--tpp-accent-hover); }
.tpp-btn-primary:focus-visible { background: var(--tpp-accent-hover); outline: none;
}
.tpp-btn-secondary {
  background: transparent;
  color: var(--tpp-text-1) !important;
  border: 1px solid var(--tpp-border);
}
.tpp-btn-secondary:hover { background: var(--tpp-surface-2); }
.tpp-btn-secondary:focus-visible { background: var(--tpp-surface-2); outline: none;
}

/* ---------- Ask AI (deep-links to Ask Fern) ---------- */
.tpp-askai {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 785px;
  margin: -1.75rem auto 0;                    /* overlaps up under the hero, per design */
  padding: 0.85rem 1rem;
  border-radius: var(--tpp-radius-lg);
  color: var(--tpp-text-2);
  text-decoration: none !important;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--tpp-surface-1), var(--tpp-surface-1)) padding-box,
    linear-gradient(90deg, var(--tpp-ai-1), var(--tpp-ai-2)) border-box;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.10);
  transition: box-shadow 0.15s ease;
}
.tpp-askai:hover { box-shadow: 0 10px 38px rgba(1, 97, 231, 0.16); }
.tpp-askai:focus-visible { box-shadow: 0 10px 38px rgba(1, 97, 231, 0.16); outline: none;
}
.tpp-askai-icon { color: var(--tpp-ai-1); font-size: 1rem; }
.tpp-askai-text { flex: 1; font-size: 0.95rem; }
.tpp-askai-kbd {
  font-size: 0.72rem;
  color: var(--tpp-text-3);
  border: 1px solid var(--tpp-border);
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
}

/* ---------- Browse documents by integration ---------- */
.tpp-browse { margin-top: 4rem; }
.tpp-browse-title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--tpp-text-1);
  margin: 0 0 1.75rem;
}
.tpp-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 785px;
  margin: 0 auto;
}
.tpp-card {
  display: flex;
  flex-direction: column;
  background: var(--tpp-surface-1);
  border: 1px solid var(--tpp-border);
  border-radius: var(--tpp-radius-lg);
  padding: 1.5rem;
  text-decoration: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tpp-card:hover {
  border-color: var(--tpp-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.tpp-card:focus-visible {
  border-color: var(--tpp-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); outline: none;
}
.tpp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
/* Product logos (real Strata brand SVGs). Light variant shows by default; the dark
   variant (white product word) swaps in under .dark. Both live in the MDX; CSS toggles. */
.tpp-card-logo { display: inline-flex; align-items: center; }
.tpp-card-logo img { height: 26px; width: auto; display: block; }
/* Scope the swap under .tpp-card-logo so it out-specifies `.tpp-card-logo img` above
   (0-2-0 > 0-1-1); otherwise the dark logo stays visible in light mode. */
.tpp-card-logo .tpp-logo-dark { display: none; }
.dark .tpp-card-logo .tpp-logo-light { display: none; }
.dark .tpp-card-logo .tpp-logo-dark { display: block; }
.tpp-badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tpp-badge-text);
  background: var(--tpp-badge-bg);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.tpp-card-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tpp-text-2);
  margin: 0;
}

/* ---------- Closing CTA — "Not a NinjaTrader partner yet?" ---------- */
.tpp-cta {
  max-width: 785px;
  margin: 3.5rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--tpp-border);
}
.tpp-cta-title {
  font-size: 1.875rem;                        /* Strata Headline Small ~30px */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tpp-text-1);
  margin: 0 0 0.5rem;
}
.tpp-cta-sub {
  font-size: 1rem;
  color: var(--tpp-text-2);
  margin: 0 0 1.5rem;
}
.tpp-cta-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {

  .tpp-hero {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
  }
  .tpp-hero-code { width: 42%; }
  .tpp-askai { margin-top: 1.25rem; }
  .tpp-card-grid { grid-template-columns: 1fr; }

}
/* Keep the wide NinjaTrader wordmark from overflowing the shared header on
   small phones (~250px logo vs. ~288px available minus the menu button). */
@media (max-width: 640px) {

  .fern-header-logo-container img,
  [data-fern-logo] img {
    max-width: 160px;
    height: auto !important;
  }

}