/* ===========================================================================
   SVFxTrades canon — the homepage design system, applied site-wide.
   Single source of truth for tokens, type, spacing, container and chrome.
   Link LAST in <head>; conflicting per-page declarations are folded at source.
   Feed this file back into the generator; do not fork it per page.

   Type: Geist Sans (UI, headings, prose) + Geist Mono (code, tabular data),
   on a role-based ramp — a size alone is not a style. Four roles:
     heading  72 64 56 48 40 32 24 20 16 14   page and section titles
     copy     24 20 18 16 14 13 (+mono 13)    multi-line text, higher leading
     label    20 18 16 14 13 12 (+mono 14 13 12)  single lines, icon pairing
     button   16 (largest) 14 (default) 12 (in-field only)
   rhythm   4 8 12 16 20 24 28 36 + 48 64 80 128 192
   =========================================================================== */

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Aliases kept so existing rules keep resolving. One family now does both
     display and UI, so display and prose point at the same stack. */
  --font-display: var(--font-sans);
  --font-label:   var(--font-sans);
  --font-prose:   var(--font-sans);
  --font-kh:      var(--font-sans);
  --font-pp:      var(--font-sans);

  /* Heading ramp */
  --fs-heading-72: 72px;
  --fs-heading-64: 64px;
  --fs-heading-56: 56px;
  --fs-heading-48: 48px;
  --fs-heading-40: 40px;
  --fs-heading-32: 32px;
  --fs-heading-24: 24px;
  --fs-heading-20: 20px;
  --fs-heading-16: 16px;
  --fs-heading-14: 14px;

  /* Copy ramp — multi-line, higher leading */
  --fs-copy-24: 24px;
  --fs-copy-20: 20px;
  --fs-copy-18: 18px;
  --fs-copy-16: 16px;
  --fs-copy-14: 14px;
  --fs-copy-13: 13px;

  /* Label ramp — single line */
  --fs-label-20: 20px;
  --fs-label-18: 18px;
  --fs-label-16: 16px;
  --fs-label-14: 14px;
  --fs-label-13: 13px;
  --fs-label-12: 12px;

  /* Button ramp */
  --fs-button-16: 16px;
  --fs-button-14: 14px;
  --fs-button-12: 12px;

  /* Role defaults — what an unclassed h1/p/label resolves to */
  --fs-h1: var(--fs-heading-72);
  --fs-h2: var(--fs-heading-40);
  --fs-h3: var(--fs-heading-24);
  --fs-prose: var(--fs-copy-14);
  --fs-p:  var(--fs-prose);
  --fs-label: var(--fs-label-12);

  --lh-heading-tight: 1.1;
  --lh-heading: 1.2;
  --lh-copy: 1.5;
  --lh-label: 1.3;
  --lh-h1: var(--lh-heading-tight);
  --lh-h2: var(--lh-heading-tight);
  --lh-h3: var(--lh-heading);
  --lh-prose: var(--lh-copy);
  --lh-p:  var(--lh-copy);

  --tracking-h1: -.035em;
  --tracking-h2: -.028em;
  --tracking-h3: -.02em;
  --tracking-label: .04em;
  --tracking-caps: .12em;

  --bg:     #000000;
  --paper:  #0A0A0A;
  --fg:     #FAFAFA;
  --ink:    #FAFAFA;
  --ink-2:  #D4D4D4;
  --ink-4:  #A3A3A3;
  --ink-label: #FAFAFA;
  --accent: #FD5E0F;
  --hairline: #ffffff2e;
  --hair:      1px solid #ffffff2e;
  --hair-soft: 1px solid #ffffff17;

  /* Spacing — the homepage's own scale. The large steps are its --spacer-*
     tokens (48/64/80/128/192); the small steps are its component rhythm. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 36px;
  --spacer-xs: 48px;
  --spacer-sm: 64px;
  --spacer-md: 80px;
  --spacer-lg: 128px;
  --spacer-xl: 192px;
  --space-9: var(--spacer-xs);
  --space-band: var(--spacer-md);

  --column: 1496px;
  --measure: 74ch;
  --layout-margin-desktop: 36px;
  --layout-margin-mobile: 20px;
  --layout-columns-desktop: 38;
  --header-height-desktop: 98px;

  /* Guide-page aliases resolve to the canon instead of their own values. */
  --g-serif: var(--font-display);
  --g-sans:  var(--font-label);
  --g-ink:   var(--ink);
  --g-ink-2: var(--ink-2);
  --g-ink-4: var(--ink-4);
  --g-bg:    var(--bg);
  --g-paper: var(--paper);
  --g-accent: var(--accent);
  --g-hair:      var(--hair);
  --g-hair-soft: var(--hair-soft);
  --g-body: var(--fs-prose);
  --g-body-lh: var(--lh-prose);
  --g-col: var(--column);
  --g-measure: var(--measure);
  --g-pad: var(--layout-margin-desktop);
  --g-nav: var(--header-height-desktop);

  --text: var(--ink);
  --text-muted: var(--ink-4);
  --blue: var(--accent);
  --blue-light: var(--paper);
  --blue-mid: var(--hairline);
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
}

/* ─── Display ───────────────────────────────────────────────────────────── */

h1, .h1, .hero-h1, .book-hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 6vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  font-weight: 600;
  margin: 0 0 var(--space-6);
}

h2, .h2, .tp-h, .chapter > h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 4vw, var(--fs-h2));
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

h3, .h3, .gtitle, .col-card-title, .step-title, .data-num-title,
.example-title, .scenario-title, .mistake-title,
.summary-box-label + *, .nav-chapter {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

h4, h5, h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-heading-16);
  line-height: var(--lh-heading);
  letter-spacing: -.01em;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

/* Geist ships 100–900, so no weight needs synthesising. */
h1, h2, h3, h4, .gtitle, .h1, .h2, .h3 { font-synthesis-weight: none; }

/* ─── Prose ─────────────────────────────────────────────────────────────── */

p, li, dd, dt, blockquote,
.lede, .hero-sub, .tp-lede, .tp-cell-d, .col-card-desc, .step-desc,
.data-num-desc, .scenario-desc, .mistake-desc, .example-body,
.formula-text, .highlight, .callout, .chapter p, .tp-note {
  font-family: var(--font-sans);
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  font-feature-settings: "cv11";
  letter-spacing: normal;
  text-wrap: pretty;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li + li { margin-top: var(--space-2); }

.lede, .hero-sub, .tp-lede { max-width: var(--measure); }

/* The chapter content column fills the page column, like every other band.
   One edge, full width — no separate reading measure. */
.content-wrap .chapter, .page-wrap .chapter { max-width: none; }
.chapter p, .chapter li, .callout, .example-body, .summary-box p {
  max-width: none;
}

/* ─── Labels ────────────────────────────────────────────────────────────── */

.label, .eyebrow, .hero-eyebrow, .chapter-eyebrow, .tp-eyebrow,
.sb-section-label, .sb-progress-label, .hero-meta-label, .formula-label,
.summary-box-label, .example-label, .scenario-label, .mistake-num,
.step-num, .sb-nav-num, .reading-count, .footer-motto, .ch-nav-label,
.data-num-label, .tp-link, .ticker-item, .tp-cell-t, .term, .ch-nav-title {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.btn, .btn-ghost, .ghost, .tp-btn, .ch-nav-btn, .ch-tab, .sb-nav-link,
.nav-right a, .nav-left a, .links a, .footer-links a, .skip, .go {
  font-family: var(--font-sans);
  font-size: var(--fs-button-14);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-label);
  text-transform: none;
}

/* ─── Container and rhythm ──────────────────────────────────────────────── */

.wrap, .page-wrap, .content-wrap, .tp-wrap, .mx-wrap, .chapter, .cta-final,
.book-hero {
  max-width: var(--column);
  margin-inline: auto;
  padding-inline: var(--layout-margin-desktop);
  box-sizing: border-box;
}

/* Bare "main > section" is page layout, not a component, so it must not reach
   an application shell that loads this sheet only for its tokens. The terminal
   marks itself with data-app; marketing pages do not. */
body:not([data-app]) main > section {
  max-width: var(--column);
  margin-inline: auto;
  padding-inline: var(--layout-margin-desktop);
  box-sizing: border-box;
}

/* Containers nest three deep on the guide pages (page-wrap > content-wrap >
   chapter). Only the outermost carries the column and the margin. */
:is(.wrap, .page-wrap, .content-wrap, .tp-wrap, .mx-wrap, .chapter, .book-hero)
:is(.wrap, .page-wrap, .content-wrap, .tp-wrap, .mx-wrap, .cta-final, .book-hero) {
  max-width: none;
  padding-inline: 0;
}

/* .chapter is nested, so it drops the margin — but it keeps a max-width,
   which is the reading measure set in the prose section below. */
:is(.page-wrap, .content-wrap) .chapter { padding-inline: 0; margin-inline: 0; }

.chapter, .tp, .cta-final { padding-block: var(--space-band); }
body:not([data-app]) main > section { padding-block: var(--space-band); }

.book-hero { padding-block: var(--space-band) var(--space-9); }

.glist, .tp-grid, .two-col, .steps-grid, .scenario-grid, .data-numbers,
.chapter-nav, .footer-links, .hero-btns, .hero-meta, .links {
  gap: var(--space-6);
}

/* ─── Surfaces ──────────────────────────────────────────────────────────── */

.card, .col-card, .data-num-card, .step-item, .example-block,
.scenario-item, .mistake-item, .callout, .summary-box, .formula-box,
.tp-cell {
  background: var(--bg);
  border: var(--hair);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-7) var(--space-6);
}

button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

svg text, svg tspan { font-family: var(--font-sans); }

a { color: inherit; }
a:hover { color: var(--accent); }

/* ─── Brand lockup ──────────────────────────────────────────────────────── */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.brand-lockup img {
  display: block;
  height: 28px;
  width: auto;
}

.brand-lockup--sm img { height: 20px; }
.brand-lockup--lg img { height: 44px; }

.footer-logo { margin-bottom: var(--space-4); }
.footer-motto + .footer-motto { margin-top: var(--space-2); }

@media (max-width: 760px) {
  .wrap, .page-wrap, .content-wrap, .tp-wrap, .chapter, .cta-final,
  main > section, .book-hero {
    padding-inline: var(--layout-margin-mobile);
  }
  main > section, .chapter, .tp, .cta-final { padding-block: var(--space-9); }
  .brand-lockup img { height: 22px; }
}

/* ─── Role utilities ────────────────────────────────────────────────────────
   A size alone is not a style: the same 14px exists as heading, copy, label
   and button, each with its own weight and leading. Pick by role first. */

.text-heading-72, .text-heading-64, .text-heading-56, .text-heading-48,
.text-heading-40, .text-heading-32, .text-heading-24, .text-heading-20,
.text-heading-16, .text-heading-14 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -.02em;
  margin: 0;
}
.text-heading-72 { font-size: var(--fs-heading-72); line-height: var(--lh-heading-tight); letter-spacing: var(--tracking-h1); }
.text-heading-64 { font-size: var(--fs-heading-64); line-height: var(--lh-heading-tight); letter-spacing: var(--tracking-h1); }
.text-heading-56 { font-size: var(--fs-heading-56); line-height: var(--lh-heading-tight); letter-spacing: var(--tracking-h2); }
.text-heading-48 { font-size: var(--fs-heading-48); line-height: var(--lh-heading-tight); letter-spacing: var(--tracking-h2); }
.text-heading-40 { font-size: var(--fs-heading-40); line-height: var(--lh-heading-tight); letter-spacing: var(--tracking-h2); }
.text-heading-32 { font-size: var(--fs-heading-32); letter-spacing: var(--tracking-h3); }
.text-heading-24 { font-size: var(--fs-heading-24); letter-spacing: var(--tracking-h3); }
.text-heading-20 { font-size: var(--fs-heading-20); }
.text-heading-16 { font-size: var(--fs-heading-16); letter-spacing: -.01em; }
.text-heading-14 { font-size: var(--fs-heading-14); letter-spacing: -.01em; }

.text-copy-24, .text-copy-20, .text-copy-18, .text-copy-16,
.text-copy-14, .text-copy-13, .text-copy-13-mono {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--lh-copy);
  letter-spacing: normal;
  text-wrap: pretty;
}
.text-copy-24 { font-size: var(--fs-copy-24); line-height: 1.4; }
.text-copy-20 { font-size: var(--fs-copy-20); line-height: 1.45; }
.text-copy-18 { font-size: var(--fs-copy-18); }
.text-copy-16 { font-size: var(--fs-copy-16); }
.text-copy-14 { font-size: var(--fs-copy-14); }
.text-copy-13 { font-size: var(--fs-copy-13); }
.text-copy-13-mono { font-family: var(--font-mono); font-size: var(--fs-copy-13); }

.text-label-20, .text-label-18, .text-label-16, .text-label-14,
.text-label-13, .text-label-12,
.text-label-14-mono, .text-label-13-mono, .text-label-12-mono {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--lh-label);
  letter-spacing: normal;
  text-transform: none;
}
.text-label-20 { font-size: var(--fs-label-20); }
.text-label-18 { font-size: var(--fs-label-18); }
.text-label-16 { font-size: var(--fs-label-16); }
.text-label-14 { font-size: var(--fs-label-14); }
.text-label-13 { font-size: var(--fs-label-13); font-variant-numeric: tabular-nums; }
.text-label-12 { font-size: var(--fs-label-12); }
.text-label-14-mono { font-family: var(--font-mono); font-size: var(--fs-label-14); }
.text-label-13-mono { font-family: var(--font-mono); font-size: var(--fs-label-13); }
.text-label-12-mono { font-family: var(--font-mono); font-size: var(--fs-label-12); }

.text-button-16, .text-button-14, .text-button-12 {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: none;
}
.text-button-16 { font-size: var(--fs-button-16); }
.text-button-14 { font-size: var(--fs-button-14); }
.text-button-12 { font-size: var(--fs-button-12); }

/* Strong is a weight step inside a role, never a size change. */
.text-copy-24 strong, .text-copy-20 strong, .text-copy-18 strong,
.text-copy-16 strong, .text-copy-14 strong, .text-copy-13 strong,
.text-label-16 strong, .text-label-14 strong, .text-label-13 strong,
.text-label-12 strong { font-weight: 500; }

/* Subtle is the dimmed companion on a heading line. */
.subtle { color: var(--ink-4); font-weight: inherit; }

/* Numeric columns align on tabular figures. */
code, kbd, samp, pre, .mono, [data-mono] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}


/* ===========================================================================
   PORTED FROM THE TURBOPACK BUNDLE — 2026-10-21
   These rules lived in _next/static/chunks/03l-lo81d_1k9.css, which every page
   loaded before this file. The homepage was rebuilt as static HTML and the
   bundle deleted; without these ports, deleting it breaks real pages. Each
   entry records its verified consumers so nothing here looks speculative.

   NOT ported, deliberately, because nothing outside _next referenced them:
   [data-theme=light] (no page sets the attribute), @keyframes zk-run and
   caretBlink (unreferenced), the @media (max-width:640px) block of ~40
   [style*=...] selectors (it matches inline React styles, so it matched
   nothing in static HTML), and --theme-*, --bg-invert, --dot, --hair-bright,
   --layout-gap, --layout-columns-mobile, --radius-0, --zk-*.
   =========================================================================== */

:root {
  /* 13 files resolve this. Defined only in the bundle, so an unresolvable
     var() made height invalid-at-computed-value-time: five mobile headers
     collapsed to auto and eight guides lost their scroll anchor.
     Consumers: 404.html, indicators/, library/, log-in/, sign-up/ (header
     height) and the 8 event guides (--g-nav). */
  --header-height-mobile: 58px;

  /* The only easing token with consumers: 32 references across the 8 event
     guides. The bundle defined eighteen; the other seventeen were unused. */
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);

  /* The dot grid: the site's signature texture, on all 40 static pages.
     Gutters only, never behind the content column. The bundle hardcoded
     772px/748px, which is --column/2 + 24px and --column/2 — rewritten here
     so it tracks --column (1496px) instead of restating it. */
  --zk-dot-mask: linear-gradient(
    to right,
    #000 0,
    #000 calc(50% - (var(--column) / 2 + 24px)),
    #0000 calc(50% - (var(--column) / 2)),
    #0000 calc(50% + (var(--column) / 2)),
    #000 calc(50% + (var(--column) / 2 + 24px)),
    #000 100%
  );
}

body { background-image: none; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, #ffffff33 1px, #0000 1px);
  background-position: top;
  background-repeat: repeat;
  background-size: 44px 44px;
  -webkit-mask-image: var(--zk-dot-mask);
  mask-image: var(--zk-dot-mask);
}

canvas {
  -webkit-mask-image: var(--zk-dot-mask);
  mask-image: var(--zk-dot-mask);
}

/* The 8 event guides animate chapter entry and the ticker.
   The two fades degrade safely without these (display:block still applies);
   marquee does not -- .ticker-track is width:max-content and relies on
   translateX(-50%), so stopped it shows a static half-width strip. */
@keyframes zk-fade-in {
  0%  { opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: none; }
}

@keyframes marquee {
  0% { transform: translate(0); }
  to { transform: translate(-50%); }
}

/* Element-level control reset. shell.css styles .form/.field but has no
   element reset, so without this inputs on the six form pages (log-in,
   sign-up, forgot-password, reset-password, account, account/plan) fall back
   to 13px Arial. */
a, button, input, label, textarea, select {
  font-family: var(--font-pp);
  font-weight: 500;
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  color: inherit;
  cursor: pointer;
}

a { text-decoration: none; }

button {
  background: 0 0;
  border: none;
  padding: 0;
}

img  { display: block; }
main { display: block; }

/* Geist is loaded with the ital axis on every static page, so this resolves to
   a real italic rather than the faux oblique the bundle produced. */
em { font-style: italic; }

::selection { color: var(--bg); background: var(--accent); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--hairline); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }