/* Finance Illustrated — design tokens. THE single source of truth for colour, type, space and shape.
   Rules (specs/STYLEBOOK.md): every other stylesheet uses only these variables; no raw colours, font sizes,
   shadows or radii elsewhere (tools/style_lint.py fails the build if they appear).
   Direction: an editorial broadsheet on warm paper (after Monocle), black ink, hairline rules, no shadows,
   and ONE colour: the logo red, kept for the few things that must be seen. */

/* FI Serif = Lora (SIL OFL, Reserved Font Name "Lora", so renamed), variable weight 400–700, roman + italic.
   Inter for interface text: labels, buttons, numbers in the tools. Latin and "ext" ranges are disjoint on purpose. */
@font-face { font-family: "FI Serif"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/fiserif-var-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+20B9, U+20BD, U+20BF, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD; }
@font-face { font-family: "FI Serif"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/fiserif-var-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-04FF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20B8, U+20BA-20BC, U+20BE, U+20C0-20CF; }
@font-face { font-family: "FI Serif"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/fiserif-italic-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+20B9, U+20BD, U+20BF, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+FEFF, U+FFFD; }
@font-face { font-family: "FI Serif"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/fiserif-italic-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-04FF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20B8, U+20BA-20BC, U+20BE, U+20C0-20CF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-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+20B9, U+20BD, U+20BF, U+2122, U+2190-2199, U+21D5, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B2, U+25BC, U+25CF, U+2713, U+2717, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-04FF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20B8, U+20BA-20BC, U+20BE, U+20C0-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-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+20B9, U+20BD, U+20BF, U+2122, U+2190-2199, U+21D5, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B2, U+25BC, U+25CF, U+2713, U+2717, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-700-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+0300-036F, U+0370-03FF, U+0400-04FF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20B8, U+20BA-20BC, U+20BE, U+20C0-20CF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;

  /* ---- Surfaces: tonal layers, never shadows ---- */
  --canvas: #fbf9f3;         /* page: warm newsprint */
  --paper: #ffffff;          /* level 1: tools, tables, header */
  --margin: #f6f2e4;         /* level 2: the one featured block on a page (the Aha Lab) */
  --mist: #f0ede4;           /* recessed: quiet panels, empty tracks */
  --mist-2: #e4e0d5;
  --line: #dcd7cb;           /* hairline rules: the structure of every layout */
  --line-strong: #b3ad9f;

  /* ---- Ink ---- */
  --ink: #141414;            /* text, headlines, primary buttons: 17:1 on canvas */
  --ink-2: #48443d;          /* secondary text: 9:1 */
  --ink-3: #6b665d;          /* captions and meta, 15px and up only: 5.3:1 */
  --on-ink: #ffffff;         /* text on ink or red */

  /* ---- The one colour: logo red ---- */
  --brand: #e5202e;          /* logo, the main call to action, active markers, the Aha badge */
  --brand-ink: #b3121f;      /* red text and links on paper: 6.4:1 */
  --brand-wash: #fbe8e6;     /* rare: highlight behind a key phrase */

  /* ---- Meaning colours: market direction only, always with a sign or arrow ---- */
  --up: #0a6b45;   --up-wash: #e6f0e8;
  --down: #b3121f; --down-wash: #fbe8e6;

  /* ---- Old names kept so markup does not change: they all map onto the palette above ---- */
  --aha: var(--brand); --aha-wash: var(--margin); --aha-ink: var(--on-ink); --aha-edge: var(--ink);
  --forex: var(--ink); --stocks: var(--ink); --crypto: var(--ink); --skills: var(--ink);
  --forex-wash: var(--margin); --stocks-wash: var(--margin); --crypto-wash: var(--margin); --skills-wash: var(--margin);
  --neutral: var(--ink-2);

  /* ---- Type: serif for reading, sans for working ---- */
  --font-text: "FI Serif", Georgia, "Times New Roman", "Noto Serif", "Songti SC", serif;   /* body copy */
  --font-head: "FI Serif", Georgia, "Times New Roman", "Noto Serif", "Songti SC", serif;   /* headlines */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* The scale. Nothing else is allowed. */
  --fs-eyebrow: 0.875rem;    /* 14px, UPPERCASE + tracking only */
  --fs-small: 0.9375rem;     /* 15px: meta, captions, labels (the smallest running text) */
  --fs-ui: 1rem;             /* 16px: buttons, nav, form fields, widget body */
  --fs-ui-lg: 1.125rem;      /* 18px: slider values, small headings in tools */
  --fs-body: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);      /* 18 -> 20px reading text */
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);     /* 19 -> 22px standfirst */
  --fs-h3: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);      /* 19 -> 21px */
  --fs-h2: clamp(1.5rem, 1.32rem + 0.8vw, 1.875rem);          /* 24 -> 30px */
  --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);              /* 32 -> 44px */
  --fs-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);      /* 36 -> 52px, home page only */
  --fs-num: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);         /* 24 -> 30px, numbers in the tools (also capped by box width) */
  --fs-num-fit: clamp(1.125rem, 15cqi, var(--fs-num));   /* a readout number: shrinks with its box (cqi), never spills */
  --fs-chart: 14px;          /* text inside SVG charts (SVG units, scales with the chart) */
  --lh-body: 1.6;
  --lh-ui: 1.35;
  --track-head: -0.015em;
  --track-eyebrow: 0.08em;

  /* ---- Space: 4px base, 8px rhythm ---- */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

  /* ---- Layout ---- */
  --measure: 40rem;          /* ~66 characters of body text */
  --wide: 52rem;             /* the Aha Lab and wide tables */
  --page: 75rem;             /* 1200px */
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);
  --header-h: 64px;

  /* ---- Shape: almost square, like print ---- */
  --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-pill: 2px;
  --rule: 1px solid var(--line);
  --rule-strong: 2px solid var(--ink);
  --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);
  --tap: 44px;               /* minimum hit size for anything you can press */
  --tap-pad: 13px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 160ms;
}

/* Finance Illustrated v2 — base: reset, reading typography, links, focus, print. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); overflow-x: clip; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Interface text is sans (Inter). "cv05": lowercase l with a tail, so l, I and 1 never look alike in numbers and labels. */
button, input, select, textarea, label, nav, table, figcaption, .ui { font-family: var(--font-ui); font-feature-settings: "cv05" 1; }
button { touch-action: manipulation; }
a { color: inherit; touch-action: manipulation; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 100; padding: var(--s3) var(--s4); background: var(--ink); color: var(--on-ink); font: 700 var(--fs-ui)/1 var(--font-ui); }
.skip:focus { top: var(--s3); }

/* Headings: all serif, set tight like a magazine title. Eyebrows (.eyebrow) are the only small caps-style labels. */
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
h1 { font: 600 var(--fs-h1)/1.1 var(--font-head); letter-spacing: var(--track-head); margin: 0 0 var(--s4); }
h2 { font: 600 var(--fs-h2)/1.2 var(--font-head); letter-spacing: var(--track-head); margin: 0 0 var(--s3); }
h3 { font: 700 var(--fs-h3)/1.3 var(--font-head); margin: 0 0 var(--s2); }
h4 { font: 700 var(--fs-body)/1.35 var(--font-head); margin: 0 0 var(--s2); }
.eyebrow { font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink); }
p { margin: 0 0 1em; }
small { font-size: var(--fs-small); font-family: var(--font-ui); }
strong, b { font-weight: 700; }
abbr[title] { text-decoration: underline dotted; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* Inline links inside running text keep their place in the line, but their hit area is lifted to 44px:
   vertical padding on an inline box does not move the text, it only makes the box (and the focus ring) taller. */
:where(p, li, dd, dt, small, figcaption, td, th, .prose, .byline, .lead, .standfirst, .disclosure, .muted, .term-pop) a:where(:not([class])), .link { padding-block: var(--tap-pad); }

/* Numbers that should line up (prices, money, percentages) */
.num, td, .tnum { font-variant-numeric: tabular-nums; }

/* Long-form reading column */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 0; }
.prose p, .prose li { font-size: var(--fs-body); line-height: var(--lh-body); }
.prose p { margin: 0 0 1.15em; }
.prose h2 { margin: 2.2em 0 0.6em; }
.prose h3 { margin: 1.8em 0 0.5em; }
.prose h2 + h3, .prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.prose li { margin: 0 0 0.45em; padding-left: 0.2em; }
.prose li::marker { color: var(--brand); }
.prose ol li::marker { font: 700 var(--fs-small) var(--font-ui); color: var(--ink); }
.prose a:not([class]), .prose a.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:not([class]):hover, .prose a.link:hover { color: var(--brand-ink); }
.prose a:not([class]):active { color: var(--brand); }
.prose blockquote { margin: 1.6em 0; padding: 0 0 0 1em; border-left: 2px solid var(--brand); font-style: italic; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.prose figure { margin: 2em 0; }
.prose figure img { background: var(--mist); }
.prose figcaption { margin-top: var(--s2); color: var(--ink-3); font-size: var(--fs-small); line-height: 1.5; }
.prose code { font-size: 0.9em; background: var(--mist); padding: 1px 5px; }
.prose img, .prose svg, .prose pre { max-width: 100%; }
.prose pre { overflow-x: auto; }
.prose > details, .prose section > details { border-top: 1px solid var(--line); }
.prose > details:last-child, .prose section > details:last-of-type { border-bottom: 1px solid var(--line); }

/* Tables: scroll inside .table-wrap, never the page. The caption sticks to the left edge while the table scrolls. */
.prose table, .table-wrap table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font: 400 var(--fs-ui)/1.45 var(--font-ui); background: var(--paper); }
.prose th, .prose td, .table-wrap th, .table-wrap td { padding: 12px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 7rem; }
.prose th:first-child, .prose td:first-child, .table-wrap th:first-child, .table-wrap td:first-child { min-width: 6rem; }
.prose th, .table-wrap th { font-weight: 700; background: transparent; }
.prose thead th, .table-wrap thead th { border-bottom: var(--rule-strong); }
.prose tr:last-child td, .table-wrap tr:last-child td { border-bottom: 0; }
.prose caption, .table-wrap caption { caption-side: top; text-align: left; padding: 10px 12px; font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink); background: var(--paper); position: sticky; left: 0; }
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin: 1.5em 0; border-top: var(--rule-strong); border-bottom: var(--rule); background: var(--paper); scrollbar-width: thin; }
.table-wrap:focus-visible { outline-offset: 2px; }
.table-wrap table { margin: 0; }

/* Disclosure widgets: a full-width 44px row with a plus sign, in lessons and on the translated guides */
summary { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; min-height: var(--tap); padding: var(--s2) 0; cursor: pointer; font-weight: 700; font-family: var(--font-head); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; font: 400 var(--fs-h3)/1 var(--font-ui); color: var(--brand); }
details[open] > summary::after { content: "\2212"; }
summary:hover { color: var(--brand-ink); }
details > :not(summary) { margin-bottom: var(--s4); }
details > p:last-child { margin-bottom: var(--s4); }

/* Pressable things give a little, pointers show */
.btn:active, .filter:active, .icon-btn:active, .lesson-done:active, .az a:active, .menu-path:active, .path-pick:active, .lab-tile:active, .next-card:active, .store-link:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}

/* Print: the lesson, not the chrome */
@media print {
  @page { margin: 18mm; }
  html { font-size: 12pt; }
  body { color: #000; background: #fff; }
  .site-header, .menu-sheet, .search-panel, .skip, .rail, .site-footer, .related, .next-up, .practice-card, .aha-reveal[data-state="locked"] .aha-locked-note, .term-pop, .crumbs .lesson-steps, .filters, .icon-btn, .btn, .store-links { display: none !important; }
  .article-grid { display: block; }
  .prose, .article-main, .wrap { max-width: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; word-break: break-all; }
  .prose a, .link { color: #000; text-decoration: underline; }
  .aha-stage { break-inside: avoid; }            /* the widget prints as it stands; its 'aha' text is revealed below */
  .aha-reveal .aha-moment, .aha-reveal .aha-explain { display: block !important; }
  .aha, .callout, .tldr, .keywords, .faq details, .pick, table, figure { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .faq details { display: block; } .faq details > * { display: block; } summary::after { display: none; }
  .table-wrap { overflow: visible; border: 0; } .table-wrap table { width: 100%; }
  .aha { border: 1px solid #000; }
}

/* Finance Illustrated v2 — layout and components. Uses tokens.css. Mobile first.
   Rules of thumb used throughout: anything you can press is at least 44px tall (var(--tap)); inline links in running
   text get their height from base.css padding; weights are 400 and 700 only (the font files shipped). */

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--read { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.stack > * + * { margin-top: var(--s5); }
.muted { color: var(--ink-2); }
.center { text-align: center; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-top: 3px solid var(--brand); border-bottom: var(--rule); transition: transform var(--dur) var(--ease); }
.site-header[data-path="forex"] { --path-color: var(--forex); } .site-header[data-path="stocks"] { --path-color: var(--stocks); } .site-header[data-path="crypto"] { --path-color: var(--crypto); }
.site-header.is-hidden:not(:focus-within) { transform: translateY(-100%); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s3); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); min-width: 0; text-decoration: none; color: var(--ink); flex: none; border-radius: var(--r-sm); }
.brand img { width: 36px; height: 36px; flex: none; }
.brand-name { font: 700 var(--fs-h3)/1 var(--font-head); letter-spacing: var(--track-head); white-space: nowrap; }
.nav { display: none; margin-left: auto; align-items: center; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; color: var(--ink); text-decoration: none; font: 700 var(--fs-eyebrow)/1 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.nav a:hover { color: var(--brand-ink); }
.nav a[aria-current="page"], .nav a.is-active { box-shadow: inset 0 -2px 0 var(--brand); }
.nav .nav-forex { --nav-color: var(--forex); } .nav .nav-stocks { --nav-color: var(--stocks); } .nav .nav-crypto { --nav-color: var(--crypto); }
.header-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.icon-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--tap); min-height: var(--tap); padding: 0 10px; border: 0; background: none; color: var(--ink); font: 700 var(--fs-eyebrow)/1 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--mist); }
.icon-btn[aria-expanded="true"] { background: var(--ink); color: var(--on-ink); }
.icon-btn svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 23.4375rem) {                   /* 375px and narrower: a tighter header that still fits */
  .site-header .wrap { gap: var(--s2); }
  .brand { gap: 8px; } .brand img { width: 32px; height: 32px; } .brand-name { font-size: var(--fs-ui-lg); }
}
@media (max-width: 22.4375rem) {                   /* 359px and narrower: icon-only menu button (label stays for screen readers) */
  .menu-btn { padding: 0; } .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand-name { font-size: var(--fs-ui); }
}
@media (min-width: 64rem) {
  .nav { display: flex; }
  .header-tools { margin-left: var(--s2); }
  .menu-btn { display: none; }
  .site-header.is-hidden { transform: none; }      /* the header only hides on phones */
}

/* Mobile menu sheet */
.menu-sheet { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--canvas); overflow-y: auto; overscroll-behavior: contain; padding: var(--s5) var(--gutter) var(--s8); border-top: 1px solid var(--line); }
.menu-sheet[hidden] { display: none; }
.menu-paths { display: grid; margin-bottom: var(--s6); border-top: var(--rule-strong); }
.menu-path { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 72px; padding: var(--s3) 0; border-bottom: var(--rule); color: var(--ink); text-decoration: none; }
.menu-path:hover strong { color: var(--brand-ink); }
.menu-path strong { font: 600 var(--fs-h3)/1.2 var(--font-head); }
.menu-path span { color: var(--ink-2); font: 400 var(--fs-small)/1.4 var(--font-ui); }
.menu-path > span:last-child { color: var(--brand); font-size: var(--fs-h3); }
.menu-links { display: grid; gap: 2px; }
.menu-links a { display: flex; align-items: center; min-height: 52px; padding: 0; border-bottom: var(--rule); color: var(--ink); text-decoration: none; font: 700 var(--fs-ui)/1.2 var(--font-ui); }
.menu-links a:hover { color: var(--brand-ink); }
.menu-links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); padding-left: var(--s3); }
body.menu-open { overflow: hidden; }

/* Search dialog */
.search-panel { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 45%, transparent); display: flex; align-items: flex-start; justify-content: center; padding: max(2vh, env(safe-area-inset-top)) var(--s3) 0; }
.search-panel[hidden] { display: none; }
.search-box { width: min(100%, 40rem); max-height: calc(100vh - 4vh); display: flex; flex-direction: column; background: var(--paper); border-top: 3px solid var(--brand); overflow: hidden; font-family: var(--font-ui); }
.search-box label { display: block; padding: var(--s4) var(--s4) 0; font-weight: 700; }
.search-row { display: flex; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); border-bottom: 1px solid var(--line); }
.search-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--s3); border: 1px solid var(--ink); border-radius: var(--r-sm); font-size: var(--fs-ui-lg); }
.search-row input:focus-visible { outline-offset: 2px; }
.search-results { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: var(--s2); list-style: none; }
.search-results a { display: block; padding: var(--s3); border-bottom: var(--rule); color: var(--ink); text-decoration: none; }
.search-results a:hover, .search-results a:focus { background: var(--canvas); outline: none; box-shadow: inset 3px 0 0 var(--brand); }
.search-results strong { display: block; font: 600 var(--fs-ui-lg)/1.3 var(--font-head); }
.search-results span { color: var(--ink-2); font-size: var(--fs-small); }
.search-empty { padding: var(--s4); color: var(--ink-2); }
.search-hint { padding: 0 var(--s4) var(--s3); margin: 0; color: var(--ink-3); font-size: var(--fs-small); }
@media (min-width: 40rem) { .search-panel { padding-top: 10vh; } .search-box { max-height: 80vh; } }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 12px 22px; border-radius: var(--r-sm); border: 1px solid var(--brand); background: var(--brand); color: var(--on-ink); font: 700 var(--fs-ui)/1.2 var(--font-ui); text-decoration: none; cursor: pointer; text-align: center; }
.btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn--path { background: var(--brand); border-color: var(--brand); }
.btn--path:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; font: 700 var(--fs-ui)/inherit var(--font-ui); }
.link:hover { color: var(--brand-ink); }
/* A .link that sits in a flex row is a block: give it a real 44px row instead of inline padding */
.section-head .link, .practice-actions .link, .pick-actions .link { display: inline-flex; align-items: center; min-height: var(--tap); padding-block: 0; }

/* Path colour scopes */
.is-forex { --path-color: var(--forex); --path-wash: var(--forex-wash); }
.is-stocks { --path-color: var(--stocks); --path-wash: var(--stocks-wash); }
.is-crypto { --path-color: var(--crypto); --path-wash: var(--crypto-wash); }
.is-skills, .is-options { --path-color: var(--skills); --path-wash: var(--skills-wash); }

/* ---------- Home ---------- */
.home-hero { padding: var(--s7) 0 var(--s6); }
.home-hero-grid { display: grid; gap: var(--s6); align-items: start; }
.home-hero h1 { font-size: var(--fs-display); line-height: 1.05; max-width: 15ch; }
.home-hero .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 34rem; margin-bottom: var(--s5); }
.path-picker { display: grid; max-width: 34rem; border-top: var(--rule-strong); }
.path-pick { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--s3); min-height: 76px; padding: var(--s3) 0; border-bottom: var(--rule); color: var(--ink); text-decoration: none; }
.path-pick:hover strong { color: var(--brand-ink); }
.path-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 700 var(--fs-ui)/1 var(--font-ui); }
.path-pick strong { display: block; font: 600 var(--fs-h3)/1.2 var(--font-head); color: var(--ink); }
.path-pick .pp-sub { display: block; margin-top: 2px; color: var(--ink-2); font: 400 var(--fs-small)/1.4 var(--font-ui); }
.path-pick .go { width: 40px; height: 40px; display: grid; place-items: center; color: var(--brand); font: 700 var(--fs-h3)/1 var(--font-ui); }
.hero-try .aha { margin: 0; padding: var(--s5) var(--s4); }
@media (min-width: 64rem) {
  .home-hero-grid { grid-template-columns: 1fr 1.05fr; gap: var(--s7); }
  .home-hero { padding-top: var(--s8); }
}

.section { padding: var(--s7) 0; }
.section--mist { background: var(--margin); border-block: var(--rule); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s5); padding-top: var(--s3); border-top: var(--rule-strong); }
.section-head h2 { margin: 0; }
.section-head p { margin: var(--s2) 0 0; color: var(--ink-2); max-width: 40rem; }

.card-grid { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.card:focus-within .card-title a { text-decoration: underline; text-decoration-color: var(--brand); }
.card-media { aspect-ratio: 16 / 9; background: var(--mist); margin-bottom: var(--s3); }
.card-media img { width: 100%; height: 100%; object-fit: contain; }
.card-media picture { display: contents; }
.card-title a { color: inherit; text-decoration: none; display: inline-block; padding-block: 10px; margin-block: -10px; } /* 44px tall, no layout change */
.card-title a:focus-visible { outline-offset: -6px; }
.card:hover .card-title a { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.card-body { display: grid; gap: var(--s2); padding: 0; flex: 1; align-content: start; }
.card-kicker { font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink); }
.card-title { font: 600 var(--fs-h3)/1.25 var(--font-head); letter-spacing: var(--track-head); margin: 0; }
.card-text { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.5; }
.card-meta { margin-top: auto; padding-top: var(--s2); color: var(--ink-3); font: 400 var(--fs-small)/1.4 var(--font-ui); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.card a.stretch::after { content: ""; position: absolute; inset: 0; }

/* Our apps band */
.apps-band { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.app-tile { display: grid; gap: var(--s2); padding: var(--s3) 0 0; border-top: var(--rule-strong); }
.app-tile h3 { font: 600 var(--fs-h3)/1.2 var(--font-head); margin: 0; }
.app-tile p { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); }
.own-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 0; color: var(--ink); font: 700 var(--fs-eyebrow)/1.4 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.own-badge::before { content: ""; width: 8px; height: 8px; background: var(--brand); }
.disclosure { color: var(--ink-3); font: 400 var(--fs-small)/1.5 var(--font-ui); }

/* ---------- Path page: the learning map ---------- */
.path-hero { padding: var(--s6) 0 var(--s5); border-bottom: var(--rule); }
.path-hero-grid { display: grid; gap: var(--s5); align-items: center; }
.path-hero h1 { margin-bottom: var(--s3); }
.path-hero .lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 36rem; }
.path-hero .path-cta { margin-top: var(--s5); }
.path-hero img { max-width: 260px; justify-self: center; }
.path-stats { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.path-stat { padding: var(--s1) 0; font: 400 var(--fs-small)/1.4 var(--font-ui); color: var(--ink-2); }
.path-stat b { font-size: var(--fs-ui-lg); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 52rem) { .path-hero-grid { grid-template-columns: 1.4fr 1fr; } .path-hero img { max-width: 320px; } }

.map { position: relative; max-width: 44rem; margin: var(--s6) auto 0; padding: 0 0 var(--s6); }
.unit { margin: var(--s7) 0 var(--s3); padding: var(--s3) 0 0; border-top: var(--rule-strong); }
.unit h2 { font-size: var(--fs-h2); margin: 0 0 4px; }
.unit p { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); }
.stops { list-style: none; margin: 0; padding: 0; }
.stop { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--s4); align-items: center; padding: var(--s2) 0; }
.stop + .stop::before { content: ""; position: absolute; left: 23px; top: -14px; height: 28px; border-left: 1px solid var(--line-strong); }
.stop-node { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); font: 700 var(--fs-ui-lg)/1 var(--font-ui); }
.stop.is-done .stop-node { background: var(--ink); color: var(--on-ink); }
.stop.is-done .stop-node::before { content: "\2713"; font-size: var(--fs-ui-lg); position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink); border-radius: 50%; }
.stop.is-next .stop-node { border: 2px solid var(--brand); color: var(--brand-ink); }
.stop.has-aha .stop-node::after { content: ""; position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 2px solid var(--canvas); }
.stop a { display: block; padding: var(--s3) 0; border-bottom: var(--rule); color: var(--ink); text-decoration: none; }
.stop a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* the whole row, node included, opens the lesson */
.stop a:hover .stop-title, .stop a:focus-visible .stop-title { color: var(--brand-ink); }
.stop a:focus-visible { outline: none; } .stop a:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 2px; }
.stop-title { display: block; font: 600 var(--fs-h3)/1.3 var(--font-head); }
.stop-meta { display: block; margin-top: 4px; color: var(--ink-3); font: 400 var(--fs-small)/1.4 var(--font-ui); }
.stop-aha { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--brand-ink); font: 700 var(--fs-eyebrow)/1.4 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.stop-status { display: inline-block; margin-top: 6px; margin-right: 8px; color: var(--up); font: 700 var(--fs-eyebrow)/1.4 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
@media (min-width: 52rem) {
  .stop:nth-child(4n+2) { margin-left: 3rem; } .stop:nth-child(4n+3) { margin-left: 6rem; } .stop:nth-child(4n+4) { margin-left: 3rem; }
  .stop + .stop::before { display: none; }
}

/* ---------- Article page ---------- */
.article-top { padding-top: var(--s4); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 var(--s3); font: 400 var(--fs-small)/1.3 var(--font-ui); color: var(--ink-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; margin-left: -4px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--brand); }
.crumbs a + a, .crumbs span + a { margin-left: 0; }
.path-pill { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 8px 0 0; margin-left: 0; color: var(--ink); text-decoration: none; font: 700 var(--fs-eyebrow)/1 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.path-pill::before { content: ""; width: 8px; height: 8px; background: var(--brand); }
.path-pill:hover { color: var(--brand-ink); }
.lesson-steps { display: flex; flex-wrap: nowrap; gap: 2px; width: 100%; margin-top: 2px; }
.lesson-steps a { display: grid; place-items: center; flex: 1 1 0; min-width: 0; max-width: 64px; min-height: var(--tap); }
.lesson-steps i { display: block; width: 100%; height: 4px; background: var(--line); }
.lesson-steps a.is-here i { background: var(--brand); }
.lesson-steps a.is-done i { background: var(--ink); }
@media (min-width: 48rem) { .lesson-steps { width: auto; margin-left: var(--s2); } }
.standfirst { font: 400 var(--fs-lead)/1.5 var(--font-text); color: var(--ink-2); margin: 0 0 var(--s4); max-width: var(--measure); }
.byline { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 var(--s5); padding: var(--s2) 0; border-block: var(--rule); color: var(--ink-3); font: 400 var(--fs-small)/1.4 var(--font-ui); }
.byline a { color: var(--ink); font-weight: 700; }
.article-hero { margin: 0 0 var(--s5); }
.article-hero img { width: 100%; height: auto; max-height: 460px; object-fit: contain; object-position: left center; }
.article-grid { display: grid; gap: var(--s6); }
.article-main { min-width: 0; }
.rail { display: none; }
@media (min-width: 72rem) {
  .article-grid { grid-template-columns: minmax(0, var(--measure)) 17rem; justify-content: space-between; }
  .rail { display: block; }
  .rail-inner { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--s5); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.rail-card { padding: var(--s3) 0 0; border-top: var(--rule-strong); }
.rail-card h2 { font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; margin: 0 0 var(--s2); }
.rail-toc { list-style: none; margin: 0 0 0 calc(-1 * var(--s2)); padding: 0; }
.rail-toc a { display: flex; align-items: center; min-height: var(--tap); padding: 6px var(--s2) 6px 11px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font: 400 var(--fs-small)/1.4 var(--font-ui); }
.rail-toc a:hover { color: var(--ink); }
.rail-toc a[aria-current="true"] { color: var(--ink); font-weight: 700; border-left-color: var(--brand); }
.rail-toc a:focus-visible { outline-offset: -3px; }

/* Key points: three plain sentences under a hairline, no box */
.key-points { margin: 0 0 var(--s6); padding: var(--s3) 0 var(--s2); border-top: var(--rule-strong); border-bottom: var(--rule); }
.key-points ul { margin: 0; padding: 0; list-style: none; }
.key-points li { position: relative; padding-left: 1.1em; margin: 0 0 8px; font-size: var(--fs-body); line-height: 1.5; }
.key-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--brand); }

/* Callouts inside lessons */
.prose .callout { margin: 1.8em 0; padding: 0 0 0 var(--s4); border-left: 2px solid var(--ink); }
.prose .callout > :last-child { margin-bottom: 0; }
.prose .callout-title { margin: 0 0 6px; font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.prose .callout--warning { border-left-color: var(--brand); } .prose .callout--warning .callout-title { color: var(--brand-ink); }
.prose .callout--remember { border-left-color: var(--brand); }
.prose .up { color: var(--up); font-weight: 700; } .prose .down { color: var(--down); font-weight: 700; }

/* Translated PDF guides end with a bare run of source links in a <div>: give each its own row */
.prose section > div:not([class]) > a:not([class]) { display: block; min-height: var(--tap); padding: 10px 0; font: 400 var(--fs-small)/1.4 var(--font-ui); color: var(--ink-2); }
.prose section > div:not([class]) > a:not([class]) + a { border-top: var(--rule); }

/* Glossary terms: tap to explain. The box is padded to 44px tall and pulled back with negative margins, so the text
   does not move; the hover wash is clipped to the words themselves. */
.term { appearance: none; border: 0; margin: -12px -4px; padding: 12px 4px; background: none; background-clip: content-box; font: inherit; line-height: inherit; color: inherit; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--ink-3); text-decoration-thickness: 1.5px; text-underline-offset: 4px; vertical-align: baseline; }
.term:hover, .term[aria-expanded="true"] { background-color: var(--brand-wash); text-decoration-color: var(--brand); }
.term:focus-visible { outline-offset: -8px; }
.term-pop { position: absolute; z-index: 40; width: min(20rem, calc(100vw - 2rem)); padding: var(--s3) var(--s4); background: var(--ink); color: var(--on-ink); border-top: 3px solid var(--brand); font: 400 var(--fs-ui)/1.5 var(--font-ui); }
.term-pop strong { display: block; margin-bottom: 2px; }
.term-pop a { color: var(--on-ink); font-weight: 700; }
.term-pop a:focus-visible { outline-color: var(--on-ink); }

/* Product (our app) card inside a lesson */
.practice-card { margin: var(--s7) 0; padding: var(--s4) 0 var(--s5); border-top: var(--rule-strong); border-bottom: var(--rule); display: grid; gap: var(--s3); }
.practice-card h2 { font: 600 var(--fs-h2)/1.25 var(--font-head); margin: 0; }
.practice-card p { margin: 0; font-size: var(--fs-body); }
.practice-card .practice-actions { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; margin-top: var(--s2); }
.practice-card .disclosure { margin: 0; }
@media (max-width: 23.4375rem) { .practice-actions .btn { width: 100%; } }

/* FAQ */
.faq { margin: var(--s6) 0; }
.faq h2 { margin-bottom: var(--s3); }
.faq details { border-top: var(--rule); }
.faq details:last-child { border-bottom: var(--rule); }
.faq summary { min-height: 56px; padding: var(--s3) 0; font: 600 var(--fs-body)/1.4 var(--font-head); }
.faq details p { margin: 0 0 var(--s4); color: var(--ink); }

/* Key words list */
.keywords { margin: var(--s7) 0; padding: var(--s3) 0 0; border-top: var(--rule-strong); }
.keywords h2 { font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; margin: 0 0 var(--s3); }
.keywords dl { margin: 0; display: grid; gap: var(--s3); }
.keywords dt { font-weight: 700; }
.keywords dd { margin: 0; color: var(--ink-2); font-size: var(--fs-body); }

/* Next lesson */
.next-up { margin: var(--s6) 0; display: grid; gap: var(--s3); }
.next-card { display: grid; gap: 4px; padding: var(--s5); background: var(--ink); color: var(--on-ink); border-top: 3px solid var(--brand); text-decoration: none; }
.next-card span { font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.next-card strong { font: 600 var(--fs-h2)/1.2 var(--font-head); }
.next-card:hover { background: var(--ink-2); }
.lesson-done { appearance: none; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r-sm); border: 1px solid var(--ink); background: var(--paper); font: 700 var(--fs-ui)/1 var(--font-ui); cursor: pointer; }
.lesson-done:hover { background: var(--mist); }
.lesson-done[aria-pressed="true"] { background: var(--up-wash); border-color: var(--up); color: var(--up); }
.lesson-done[aria-pressed="true"]::before { content: "\2713"; font-size: var(--fs-ui-lg); }

.sources { margin: var(--s7) 0 0; padding-top: var(--s3); border-top: var(--rule-strong); }
.sources h2 { font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; margin: 0 0 var(--s2); }
.sources ol { margin: 0; padding-left: 1.3em; }
.sources li { margin: 0 0 6px; font: 400 var(--fs-small)/1.5 var(--font-ui); color: var(--ink-2); overflow-wrap: anywhere; }
.sources a { color: var(--ink-2); }
.risk-note { margin: var(--s5) 0 0; padding: var(--s3) 0 0; border-top: var(--rule); color: var(--ink-3); font: 400 var(--fs-small)/1.5 var(--font-ui); }
.related { padding: var(--s6) 0 var(--s7); margin-top: var(--s7); border-top: var(--rule-strong); }

/* ---------- Comparison (money) pages ---------- */
.comparison-start { margin: 0 0 var(--s3); }
.comparison-start a { display: inline-flex; align-items: center; min-height: var(--tap); }
.comparison-note { margin: var(--s3) 0; font-size: var(--fs-small); color: var(--ink-2); }
.comparison-index { margin: var(--s3) 0 var(--s5); }
.comparison-index summary, .pick-details summary { width: fit-content; max-width: 100%; min-height: var(--tap); padding: 10px 0; cursor: pointer; font: 600 var(--fs-ui)/1.5 var(--font-ui); color: var(--ink); }
.comparison-index summary:hover, .pick-details summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.comparison-index ol { columns: 2 14rem; column-gap: var(--s5); margin: 0; padding-left: 1.6em; }
.comparison-index li { break-inside: avoid; padding-left: 2px; font: 400 var(--fs-ui)/1.5 var(--font-ui); }
.comparison-index a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 6px 0; }
.picks { scroll-margin-top: calc(var(--header-h) + 1rem); }
.pick { margin: var(--s6) 0; padding: var(--s4) 0 0; border-top: var(--rule); scroll-margin-top: calc(var(--header-h) + 1rem); }
.pick:first-of-type { margin-top: 0; }
.pick-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.pick-head h3 { font: 600 var(--fs-h2)/1.2 var(--font-head); margin: 0; }
.pick .pick-for { margin: var(--s2) 0; color: var(--ink-2); font: 600 var(--fs-ui)/1.5 var(--font-ui); }
.pick p { margin: var(--s3) 0; }
.pick-details { margin-top: var(--s2); }
.pick-details > :last-child { margin-bottom: 0; }
.pros-cons { display: grid; gap: var(--s4); margin: var(--s4) 0; }
@media (min-width: 40rem) { .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros-cons h4 { margin: 0 0 6px; font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.pros-cons ul { margin: 0; padding-left: 1.2em; }
.pros-cons li { font-size: var(--fs-body); margin-bottom: 6px; line-height: 1.5; }
.pros h4 { color: var(--up); } .cons h4 { color: var(--down); }
.pros h4::before { content: "+ "; } .cons h4::before { content: "\2212\00a0"; }
.pick-facts { display: grid; gap: 6px var(--s4); grid-template-columns: max-content 1fr; margin: var(--s3) 0; font: 400 var(--fs-ui)/1.45 var(--font-ui); }
.pick-facts dt { color: var(--ink-2); font-weight: 700; }
.pick-facts dd { margin: 0; }
@media (max-width: 25.9375rem) { .pick-facts { grid-template-columns: 1fr; gap: 2px; } .pick-facts dd { margin-bottom: var(--s2); } }
.pick-actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; margin: var(--s3) 0 var(--s2); }
.pick-actions .btn { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .pick p, .pick-details li { font-size: 1rem; line-height: 1.6; } .pick { margin-block: var(--s5); } }
.how-chose { margin: var(--s7) 0; padding: var(--s3) 0 0; border-top: var(--rule-strong); }

/* ---------- Library, lists ---------- */
.list-head { padding: var(--s6) 0 var(--s4); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.filter { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: 700 var(--fs-small)/1 var(--font-ui); text-decoration: none; cursor: pointer; }
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"], .filter[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-item { display: grid; grid-template-columns: 88px 1fr; gap: var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: var(--rule); }
.row-item img { width: 88px; height: 66px; object-fit: cover; background: var(--mist); }
.row-item a { display: block; min-height: var(--tap); padding: var(--s1) 0; color: var(--ink); text-decoration: none; }
.row-item a:hover .row-title { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.row-title { display: block; font: 600 var(--fs-h3)/1.3 var(--font-head); }
.row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--ink-3); font: 400 var(--fs-small)/1.4 var(--font-ui); }
.topic-dot { display: inline-flex; align-items: center; gap: 6px; }
.topic-dot::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--brand); }
@media (max-width: 23.4375rem) { .row-item { grid-template-columns: 72px 1fr; gap: var(--s3); } .row-item img { width: 72px; height: 54px; } }

/* Lab (all hands-on tools) */
.lab-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.lab-tile { display: grid; gap: var(--s2); padding: var(--s3) 0 var(--s4); border-top: var(--rule-strong); color: var(--ink); text-decoration: none; }
.lab-tile:hover strong { color: var(--brand-ink); }
.lab-tile strong { font: 600 var(--fs-h3)/1.25 var(--font-head); }
.lab-tile span { color: var(--ink-2); font: 400 var(--fs-small)/1.4 var(--font-ui); }
.lab-tile .topic-dot { align-items: start; } .lab-tile .topic-dot::before { margin-top: 6px; }

/* Glossary page */
.az { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s4) 0; }
.az a { display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0; border: var(--rule); background: var(--paper); color: var(--ink); text-decoration: none; font: 700 var(--fs-ui)/1 var(--font-ui); }
.az a:hover { border-color: var(--ink); }
.gloss-list dt { margin-top: var(--s4); font: 600 var(--fs-h3)/1.3 var(--font-head); scroll-margin-top: calc(var(--header-h) + 1rem); }
.gloss-list dd { margin: 4px 0 0; color: var(--ink); }
.gloss-list dd small { display: block; margin-top: 4px; color: var(--ink-2); }
.prose h2[id^="letter-"] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Books */
.books { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.book { display: grid; gap: var(--s2); color: var(--ink); text-decoration: none; }
.book img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--mist); }
.book strong { font-weight: 700; }
.book span { color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--s8); padding: var(--s7) 0 var(--s6); background: var(--ink); color: var(--mist); border-top: 3px solid var(--brand); font-family: var(--font-ui); }
.site-footer a { color: var(--on-ink); }
.site-footer :focus-visible { outline-color: var(--on-ink); }
.footer-grid { display: grid; gap: var(--s5) var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.footer-grid h2 { font: 700 var(--fs-eyebrow)/1.3 var(--font-ui); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--on-ink); margin: 0 0 var(--s1); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin: 0; font-size: var(--fs-small); }
.footer-grid li a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; text-decoration: none; }
.footer-grid li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); }
.footer-brand img { width: 32px; height: 32px; }
.footer-legal { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--ink-2); font-size: var(--fs-small); color: var(--line); line-height: 1.6; }
.footer-legal p { max-width: 60rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } }
@media (max-width: 47.9375rem) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s4); } }

/* Utility: page heads for simple pages */
.page-head { padding: var(--s6) 0 var(--s4); }
.page-head .lead { font: 400 var(--fs-lead)/1.5 var(--font-text); color: var(--ink-2); max-width: 40rem; }

/* The aha band inside the two-column lesson layout: a contained, slightly wider panel instead of full-bleed */
@media (min-width: 72rem) {
  .article-main .aha { margin: var(--s7) calc(-1 * var(--s6)); padding: var(--s6); border-left: var(--rule); border-right: var(--rule); }
}

.store-links { display: inline-flex; gap: var(--s2); flex-wrap: wrap; }
.store-link { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font: 700 var(--fs-small)/1 var(--font-ui); }
.store-link:hover { background: var(--ink); color: var(--on-ink); }

/* Back to top of a long page (glossary, library) — the build may add <a class="to-top" href="#main"> */
.to-top { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 30; display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); background: var(--ink); color: var(--on-ink); text-decoration: none; }

/* At a glance on phones: no sideways table, each broker is one plain row */
@media (max-width: 40rem) {
  .at-a-glance .table-wrap { border: 0; border-top: var(--rule-strong); overflow: visible; background: transparent; }
  .at-a-glance thead { display: none; }
  .at-a-glance table, .at-a-glance tbody, .at-a-glance tr, .at-a-glance th, .at-a-glance td { display: block; width: 100%; min-width: 0; }
  .at-a-glance tr { padding: var(--s3) 0; border-bottom: var(--rule); }
  .at-a-glance th[scope="row"], .at-a-glance td { padding: 2px 0; border: 0; white-space: normal; }
  .at-a-glance th[scope="row"] { font-size: var(--fs-ui-lg); }
  .at-a-glance td { color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.45; }
  .at-a-glance td:last-child::before { content: "Where: "; font-weight: 600; color: var(--ink); }
}

/* extras.css: styles for the comparison, hub and "choose next" blocks (loaded after site.css). */

/* "Before you choose a broker/app" block on lessons (after the FAQ) */
.choose-next { margin: var(--s7) 0; padding: var(--s3) 0 0; border-top: var(--rule-strong); }
.choose-next h2 { font: 600 var(--fs-h2)/1.25 var(--font-head); margin: 0 0 var(--s2); }
.choose-next > p { margin: 0 0 var(--s3); color: var(--ink-2); font-size: var(--fs-body); line-height: 1.55; }
.choose-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s5); }
.choose-next li { display: grid; gap: 2px; padding: var(--s3) 0; border-bottom: var(--rule); }
.choose-next li a { font: 600 var(--fs-h3)/1.3 var(--font-head); color: var(--ink); text-decoration: none; }
.choose-next li a:hover { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.choose-next li span { color: var(--ink-2); font: 400 var(--fs-small)/1.5 var(--font-ui); }
@media (min-width: 48rem) { .choose-next ul { grid-template-columns: 1fr 1fr; } }

/* Hub introductions (60–120 words) */
.hub-intro { max-width: var(--measure, 42rem); margin: var(--s4) 0 var(--s5); }
.hub-intro p { margin: 0 0 var(--s3); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.hub-intro p:last-child { margin-bottom: 0; }
.path-about { max-width: 36rem; margin: var(--s3) 0 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }

/* Descriptions on list rows */
.row-desc { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.5; }
.row-item { align-items: start; }
.row-item img { margin-top: 2px; }

/* /apps/ page */
.app-cards { display: grid; gap: var(--s5); margin: var(--s5) 0 var(--s6); }
.app-card { display: grid; gap: var(--s3); padding: var(--s4) 0 var(--s5); border-top: var(--rule-strong); }
.app-card h2 { font: 600 var(--fs-h2)/1.2 var(--font-head); margin: 0; }
.app-card p, .app-card ul { margin: 0; }
.app-card ul { padding-left: 1.25rem; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.5; }
.app-card .practice-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.app-card .store-links { display: inline-flex; gap: var(--s2); }
.app-card .disclosure { margin: 0; }