/* TheTraderWiki — stylesheet (v4).

   Concept: a light, open reference in the manner of a modern learning site.
   Near-white page, white cards with a soft shadow and a generous radius,
   one warm orange used for the primary action, the current section and a
   single accent bar under the title; dark ink, a bold sans for headings, a
   dark footer band. Light only for now: the dark palette (a prefers-color-scheme
   block) was removed on 2026-09-19 and is in git history to restore.

   What changed from v3 and why:
     dark-first terminal, blue accent      → light-first, orange accent; the
                                             operator asked for the look of a
                                             modern education site
     flat cards on a darker page           → white cards, soft shadow, 20px
                                             radius; the title block is a
                                             tinted hero band
     surface footer                        → dark footer band
   Unchanged: every table rule, the key and its pills, the pinned header and
   provider column, the caption, the rail.

   What this stylesheet must never do, whatever it looks like: hide text,
   move text into CSS, or shrink mandated risk copy relative to body copy. The
   page an agent fetches is the page a person reads; only the paint differs. */

/* The one webfont the site carries: Caveat, a script face, for the two lines
   the reference writes by hand. Self-hosted — no request leaves the site —
   and recorded in NOTICE.md with its licence. Latin and Latin-ext only: the
   Arabic edition has no script face here and falls back to its own. */
/* Inter, self-hosted like Caveat: the stack named it first but nothing loaded
   it, so every visitor got their system font instead. Variable font, weights
   400 to 800, from Google Fonts (SIL Open Font License 1.1), latin and latin-ext
   subsets. Arabic and Thai fall through to their own stacks. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------ tokens */
:root {
  color-scheme: light;
  --paper: #f4f5f9;
  --surface: #ffffff;
  --paper-2: #f1f2f6;
  --paper-code: #f1f2f6;
  --warn-paper: #fff3ea;
  --note-paper: #eef7f0;
  --mark-paper: #fff3c4;
  --ink: #1e2130;
  /* the mock's headline navy, a step deeper than body ink */
  --ink-strong: #121a2e;
  --ink-2: #5b6070;
  --ink-soft: #5b6070;
  --rule: #e6e8ef;
  --rule-strong: #7d8392;
  --link: #0b7a66;
  --link-visited: #0b7a66;
  --accent: #0b7a66;
  --focus: #0b7a66;
  --brand: #0e9079;
  /* the light end of the mock's button, for its gradient */
  --brand-2: #14a68e;
  --on-primary: #ffffff;
  /* Fills that carry white text. --brand is 3.97:1 under white, short of the
     4.5:1 normal text needs, so a button uses these instead (4.86 and 5.26). */
  --fill: #0b7a66;
  --fill-2: #0d806c;
  /* A loss in a worked example: brick, not alarm red, 5.9:1 on white. */
  --loss: #b23b33;
  --chip-on: #d9f0e7;
  --chip-on-ink: #075744;
  --hero: linear-gradient(135deg, #f3faf7 0%, #e6f4ee 100%);
  /* The home hero's own ground, measured off the reference at its own 1024px:
     flat across the band, a shade lighter and cooler than --paper, with the
     white sections below it reading as a step up rather than down. */
  --hero-ground: #f8fafc;
  --foot-bg: #1b1c22;
  --foot-ink: #e6e7ee;
  --foot-ink-2: #b4b7c4;
  --foot-link: #7fdcba;
  --shadow: 0 8px 28px rgba(28, 33, 56, 0.07);
  --radius: 20px;  --band-head: #ffffff;
  --band-dark: #051f35;
  /* The icon set is fixed-palette artwork drawn against a light ground, so it
     keeps that ground in both schemes rather than losing its navy strokes. */
  --icon-tile: #f4f7fa;
  /* The four learning cards and their icon tiles, measured off the reference. */
  --card-1: #f3f9fe;  --tile-1: #dce8fd;
  --card-2: #effcf8;  --tile-2: #d5f3e8;
  --card-3: #fefaf2;  --tile-3: #feeed1;
  --card-4: #fef8f6;  --tile-4: #fddbd9;
  --band-ink: #cfe0dd;
  --band-accent: #5ed6ad;
  /* The fall side of the worked example, against the same dark band. */
  --band-down: #ff8a90;

}
:root {
  /* One sans. Google Sans where it is installed, otherwise the system face:
     Segoe UI Variable on Windows, SF via "system-ui" elsewhere. */
  --font-text: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Leelawadee UI", Thonburi, "Noto Sans Thai", sans-serif;
  --font-display: Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Leelawadee UI", Thonburi, "Noto Sans Thai", sans-serif;
  --font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  --measure: 42rem;
  --rail: 17rem;
  --gutter: 1.25rem;
  --shell: 80rem;   /* masthead and colophon are full-bleed; their contents
                       and the main grid share this width and left edge */
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font-family: var(--font-text);
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html[lang="ar"] {
  --font-text: "Segoe UI", "Al Nile", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-display: "Sakkal Majalla", "Geeza Pro", "Noto Naskh Arabic", Tahoma, serif;
  --measure: 36rem;
  line-height: 1.9;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.95rem;
  min-inline-size: 0;
  overflow-wrap: break-word;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
html[lang="ar"] body { font-size: 1.15rem; }

a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration: underline; }
/* Links inside running text keep an underline; a colour alone is not enough. */
article p a, article li a, article td a, article dd a, article figcaption a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  text-underline-offset: 0.16em;
}
article p a:hover, article li a:hover, article td a:hover, article dd a:hover { text-decoration-color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
a.cite { text-decoration-style: dotted; text-underline-offset: 0.18em; }
a.cite::after { content: "\2009\2197"; font-size: 0.75em; text-decoration: none; vertical-align: 0.15em; }

code { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-code); padding: 0.1em 0.3em; }
strong { font-weight: 600; }
em { font-style: italic; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin-block: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem); letter-spacing: -0.02em; margin-block-end: 0.5rem; }
/* one accent bar under the title; otherwise the orange is kept for actions */
h1::after { content: ""; display: block; inline-size: 3.5rem; block-size: 0.3rem; margin-block-start: 0.7rem; border-radius: 999px; background: var(--brand); }
h2 { font-size: 1.3rem; line-height: 1.3; margin-block: 0 0.55rem; }
h3 { font-size: 1.05rem; margin-block: 1.3rem 0.3rem; }
html[lang="ar"] h1 { font-size: 2.2rem; letter-spacing: 0; line-height: 1.4; }
html[lang="ar"] h2 { letter-spacing: 0; line-height: 1.45; }
html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.5; }

p { margin-block: 0 1.15em; line-height: 1.55; }
ul, ol { padding-inline-start: 1.35em; margin-block: 0 1.15em; }
li { margin-block-end: 0.45em; }
li:last-child { margin-block-end: 0; }
dl { margin-block: 0 1.15em; }
img, svg, video { max-inline-size: 100%; block-size: auto; }
time { font-variant-numeric: tabular-nums lining-nums; }
hr { border: 0; border-block-start: 1px solid var(--rule); margin-block: 2rem; }

.vh { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 0.5rem; inset-block-start: -4rem; z-index: 20; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; text-decoration: none; }
.skip:focus { inset-block-start: 0.5rem; }

mark.placeholder {
  background: var(--mark-paper); color: var(--ink);
  padding: 0 0.25em; font-style: italic; font-size: 0.95em;
  text-decoration: underline dotted var(--rule-strong); text-underline-offset: 0.15em;
}

/* The standing warning is deliberately set at reading size, not as fine
   print. Shrinking or muting mandated risk text relative to body copy is the
   defining tell of an affiliate funnel; this site is the opposite of one. */

/* ------------------------------------------------------------ masthead: brand + tools, then navigation on its own line */
.masthead {
  max-inline-size: none;
  padding: 0.65rem max(1.5rem, calc((100vw - var(--shell)) / 2 + 1.5rem)) 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--rule), var(--shadow);
  /* Above anything the page lays over its own content: at 3 it tied with the
     home hero's chips, which come later in the document and so were painted
     over the open language menu (operator, 2026-10-18). */
  position: relative; z-index: 10;
}
.brand {
  order: 1;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0;
}
/* The mark is the site's bull, the same character as the hero mascot. */
.brand::before {
  content: "";
  inline-size: 4.4rem; block-size: 4.4rem;
  margin-inline-end: 0.6rem;
  background: url("/assets/logo.webp") center / contain no-repeat;
}
.brand b { font-weight: inherit; color: var(--accent); }
/* On the narrowest phones the full-size brand and the toggle together exceed
   the viewport, so both step down. */
/* The mark fills the bar, so it runs out of room sooner; two steps keep the
   brand and the toggle inside the narrowest viewports. */
/* The bar carries a mark, a wordmark and two controls, so the brand steps
   down twice to stay inside the narrowest viewports. */
/* The first step starts at 25.5rem, not 23rem: a 390px phone (the most common
   width) had the full-size brand, and with the search and menu buttons and the
   gaps the bar came to 413px, so every page scrolled sideways by 6px. */
@media (max-width: 25.5rem) {
  .brand { font-size: 1.2rem; }
  .brand::before { inline-size: 3.4rem; block-size: 3.4rem; }
  .masthead { column-gap: 0.75rem; }
}
@media (max-width: 20.5rem) {
  .brand { font-size: 0.95rem; }
  .brand::before { inline-size: 2.6rem; block-size: 2.6rem; margin-inline-end: 0.4rem; }
  .search-icon, .menu > summary { inline-size: 2.4rem; block-size: 2.4rem; }
}
.tools {
  order: 2;
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
}
.primary {
  order: 3;
  flex-basis: 100%;
  margin-block-start: 0.15rem;
}

/* The navigation and tools sit in a disclosure. On a wide screen the toggle is
   hidden and the panel is forced open, by overriding both the old rule (a
   closed details hides its non-summary children) and the current one
   (::details-content is hidden), so the markup is the same at every width and
   no script is involved. The switch is at 62rem, not 48rem: the one-row bar
   carries six section links beside the brand and two controls, and at 768px
   that row overflowed. */
.menu > summary, .menu-home, .search-icon { display: none; }
@media (max-width: 61.99rem) { .primary .nav-home { display: none; } }
@media (min-width: 62rem) {
  /* The disclosure is transparent: its children become masthead flex items
     again, in their own order, so the wide layout is exactly as it was. */
  .menu, .menu-body { display: contents; }
  /* One row: the brand, the sections, then the two controls. The reference
     carries neither the compare pill nor an open search field on the bar —
     the field lives on the search page the icon leads to. */
  .masthead { flex-wrap: nowrap; gap: 0.5rem 1.5rem; padding-block: 0.5rem; }
  .masthead .search { display: none; }
  .search-icon { display: inline-flex; order: 4; }
  .primary { order: 2; flex-basis: auto; flex: 1 1 auto; margin-block-start: 0; }
  .masthead .primary ul { flex-wrap: nowrap; justify-content: center; gap: 0.15rem; }
  .masthead .primary a {
    padding: 0.5rem 0.85rem;
    background: none; border: 0; border-radius: 8px;
    font-size: 0.95rem; font-weight: 500; white-space: nowrap;
  }
  .masthead .primary a:hover { background: var(--paper-2); }
  /* The current section is underlined on the bar, not filled. */
  .masthead .primary a[aria-current] {
    background: none; color: var(--accent); font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: 0;
  }
  .tools { order: 5; margin-inline-start: 0; gap: 0.35rem; flex-wrap: nowrap; }
  /* A hairline between the search icon and the language control. */
  .tools::before { content: ""; inline-size: 1px; block-size: 1.5rem; background: var(--rule); margin-inline-end: 0.35rem; }
  .brand { font-size: 1.15rem; }
  .brand::before { inline-size: 2.9rem; block-size: 2.9rem; margin-inline-end: 0.45rem; }
  .search-icon {
    inline-size: 2.4rem; block-size: 2.4rem; border-radius: 999px;
    align-items: center; justify-content: center; color: var(--ink-2);
  }
  /* The mark is the child, so the link can take a ground of its own — the
     mint disc the search control wears while the overlay is open. A mask on
     the link itself would clip any background it was given. */
  .search-icon > span {
    inline-size: 1.15rem; block-size: 1.15rem; background: currentColor;
    -webkit-mask: url("/assets/icons/nav-search.svg") center/contain no-repeat;
    mask: url("/assets/icons/nav-search.svg") center/contain no-repeat;
  }
  .search-icon:hover { color: var(--ink); }
  /* The language control is a globe and the edition's code. */
  .lang-name { display: none; }
  /* Scoped to .tools: the narrow layout's own `details.lang summary` rule sits
     later in the sheet at the same weight, and it was winning — resetting the
     padding that holds the globe's column, so the code sat under the icon. */
  .tools details.lang > summary { display: inline-flex; align-items: center; gap: 0.3rem; padding-block: 0.45rem; padding-inline: 1.95rem 0.55rem; position: relative; font-size: 0.9rem; font-weight: 500; color: var(--ink); }
  .tools details.lang > summary::after {
    content: ""; inline-size: 0.7rem; block-size: 0.7rem; background: currentColor;
    -webkit-mask: url("/assets/icons/chevron-down.svg") center/contain no-repeat;
    mask: url("/assets/icons/chevron-down.svg") center/contain no-repeat;
  }
  .tools details.lang > summary::before {
    content: ""; position: absolute; inset-inline-start: 0.55rem;
    inline-size: 1.15rem; block-size: 1.15rem; background: currentColor;
    -webkit-mask: url("/assets/icons/nav-globe.svg") center/contain no-repeat;
    mask: url("/assets/icons/nav-globe.svg") center/contain no-repeat;
  }
  /* The control is the last thing on the bar, so its menu opens from the
     control's end edge inwards. From the start edge it ran off the window on
     a narrow desktop (1024px). */
  .tools details.lang > ul { inset-inline-start: auto; inset-inline-end: 0; }
  /* Chrome wraps a disclosure's children in ::details-content, which forms a
     box of its own and would sort ahead of the brand; flatten that too. */
  .menu::details-content { display: contents; content-visibility: visible; block-size: auto; overflow: visible; }
}
@media (max-width: 61.99rem) {
  .search-icon {
    display: inline-flex; order: 2; flex: none; margin-inline-start: auto;
    align-items: center; justify-content: center;
    inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px;
    color: var(--ink);
  }
  .search-icon > span {
    inline-size: 1.45rem; block-size: 1.45rem; background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4.2-4.2'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4.2-4.2'/></svg>") center/contain no-repeat;
  }
  .menu { order: 3; flex: 0 0 auto; }
  .menu > summary {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2.75rem; block-size: 2.75rem;
    border-radius: 999px; cursor: pointer; list-style: none;
    color: var(--ink);
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary:hover { background: var(--paper-2); }
  .menu > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* three bars, becoming a cross when the menu is open */
  .bars, .bars::before, .bars::after { display: block; inline-size: 1.25rem; block-size: 2px; border-radius: 2px; background: currentColor; }
  .bars { position: relative; }
  .bars::before, .bars::after { content: ""; position: absolute; inset-inline-start: 0; }
  .bars::before { inset-block-start: -0.4rem; }
  .bars::after { inset-block-start: 0.4rem; }
  .menu[open] > summary .bars { background: transparent; }
  .menu[open] > summary .bars::before { inset-block-start: 0; transform: rotate(45deg); }
  .menu[open] > summary .bars::after { inset-block-start: 0; transform: rotate(-45deg); }
  /* The panel spans the masthead rather than hanging off the toggle, so the
     rows are full-width targets. */
  .menu { position: static; }
  /* Open, the masthead and the panel are one surface: the masthead drops the
     rule under it and the panel carries no rule above, so there is no seam
     between the bar and the menu — only the hairlines between the rows. */
  .masthead:has(.menu[open]) { box-shadow: none; }
  .menu-body {
    display: block;
    position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 20;
    background: var(--surface);
    border-block-start: 0;
    border-block-end: 1px solid var(--rule);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.07);
    padding: 0 max(1.1rem, calc((100vw - var(--shell)) / 2 + 1.1rem)) 1rem;
  }
  .menu-home {
    display: block; padding: 0.85rem 0.25rem; font-size: 1rem; font-weight: 600;
    color: var(--ink); text-decoration: none;
  }
  .menu-home[aria-current] { color: var(--accent); }
  /* sections as a list, one per row */
  .menu-body .primary { order: 0; margin: 0; flex-basis: auto; }
  .menu-body .primary ul { display: block; }
  .menu-body .primary li + li { border-block-start: 1px solid var(--rule); }
  .menu-body .primary li { border-block-start: 1px solid var(--rule); }
  .menu-body .primary li + li { border-block-start: 1px solid var(--rule); }
  .menu-body .primary a {
    display: flex; align-items: center; justify-content: space-between;
    border: 0; border-radius: 0; background: none;
    padding: 0.85rem 0.25rem; font-size: 1rem; font-weight: 500;
  }
  /* a chevron drawn from a rotated corner, so nothing textual is generated */
  .menu-body .primary a::after {
    content: ""; inline-size: 0.5rem; block-size: 0.5rem;
    border-inline-end: 2px solid var(--rule-strong); border-block-start: 2px solid var(--rule-strong);
    transform: rotate(45deg); margin-inline-end: 0.25rem; flex: none;
  }
  html[dir="rtl"] .menu-body .primary a::after { transform: rotate(-135deg); }
  .menu-body .primary a[aria-current] { color: var(--accent); border-radius: 10px; padding-inline: 0.7rem; margin-inline: -0.45rem; }
  .menu-body .primary a[aria-current]::after { border-color: var(--accent); }
  .menu-body .tools {
    order: 1; margin: 0.5rem 0 0; inline-size: auto;
    flex-direction: column; align-items: stretch; gap: 0.5rem;
    border-block-start: 1px solid var(--rule); padding-block-start: 0.6rem;
  }
  .menu-body .search { inline-size: 100%; }
    .menu-body .search input { inline-size: 100%; max-inline-size: none; }
  .menu-body details.lang > summary { padding-inline-start: 1.9rem; position: relative; }
  .menu-body details.lang > summary::before {
    content: ""; position: absolute; inset-inline-start: 0.35rem; inset-block-start: 50%;
    inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: -0.52rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/></svg>") center/contain no-repeat;
  }
  .masthead { padding-block: 0.92rem; flex-wrap: nowrap; align-items: center; }
  /* The primary action can wrap in the menu rather than set the panel's width. */
  .brand { order: 1; }
}
.primary ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.primary li { margin: 0; }
/* chips */
.primary a {
  display: inline-block;
  padding: 0.4rem 1rem;
  color: var(--ink);
  font-size: 0.88rem; font-weight: 500;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.primary a:hover { background: var(--paper-2); text-decoration: none; }
.primary a[aria-current] { background: var(--chip-on); border-color: transparent; color: var(--chip-on-ink); font-weight: 700; }

/* language menu */
details.lang { position: relative; }
details.lang summary { cursor: pointer; list-style: none; color: var(--ink-2); padding: 0.45rem 0.6rem; border-radius: 999px; }
details.lang summary::-webkit-details-marker { display: none; }
details.lang summary::after { content: "\00a0\25BE"; font-size: 0.8em; }
details.lang summary:hover { color: var(--ink); background: var(--paper-2); }
details.lang > ul {
  position: absolute; inset-inline-start: 0; inset-block-start: 1.7em; z-index: 10;
  margin: 0; padding: 0.5rem 0; list-style: none;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-inline-size: 10rem;
}
details.lang li { margin: 0; }
details.lang li a { display: block; padding: 0.28rem 0.9rem; color: var(--ink); text-decoration: none; }
details.lang li a:hover { background: var(--paper-2); }
details.lang li a[aria-current] { font-weight: 600; }

/* search */
.search { display: flex; align-items: center; gap: 0.35rem; }
.search label { display: block; }
.search input {
  font: inherit; font-size: 0.9rem;
  inline-size: 20rem; max-inline-size: 48vw;
  padding: 0.55rem 0.9rem 0.55rem 2.4rem;
  color: var(--ink);
  border: 0; border-radius: 999px;
  background: var(--paper-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2380868b'><path d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/></svg>") no-repeat 0.85rem center / 1.05rem;
}
.search input::placeholder { color: var(--ink-2); opacity: 1; }
.search input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.search button {
  font: inherit; font-size: 0.85rem;
  padding: 0.45rem 0.7rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--link); cursor: pointer;
}
.search button:hover { background: var(--paper-2); }

/* theme: three radios, shown only when the script is present */

/* An in-page link scrolls rather than jumps, so a reader keeps their place on
   the way to the section. Dropped for anyone who asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

/* ------------------------------------------------------------ layout: article first in the DOM, rail beside it visually */
main {
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding: 1.75rem 1.5rem 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
article, .rail { min-inline-size: 0; }
article { max-inline-size: var(--measure); }

/* Comparison pages are table-heavy. The rail flows beneath the tables until
   there is room for it beside them, which at an 80 rem shell is 72 rem. */
body.kind-comparison main { --measure: none; }
@media (min-width: 64rem) and (max-width: 71.99rem) {
  body.kind-comparison main { grid-template-columns: minmax(0, 1fr); }
  body.kind-comparison .rail { position: static; max-block-size: none; }
  body.kind-comparison .toc ol, body.kind-comparison .related ul { columns: 2; column-gap: 3rem; }
}
@media (min-width: 72rem) {
  body.kind-comparison main { grid-template-columns: minmax(0, 1fr) minmax(0, var(--rail)); justify-content: stretch; }
}

@media (min-width: 64rem) {
  main {
    grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--rail));
    justify-content: center;
    column-gap: var(--gutter);
    row-gap: 0;
  }
  article { max-inline-size: none; }
  .rail {
    position: sticky;
    inset-block-start: 1rem;
    align-self: start;
    max-block-size: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------ article furniture */
.crumbs ol {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 0.4rem;
  font-size: 0.875rem; color: var(--ink-2);
}
.crumbs li + li::before { content: "\203A"; margin-inline-end: 0.4rem; color: var(--rule-strong); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* the title block is the page's hero: a tinted band holding the title and byline */
.article-head { margin-block-end: 1.25rem; padding: 1.75rem 2rem 1.6rem; background: var(--hero); border: 1px solid var(--rule); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); }
.byline {
  margin-block: 0.7rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.byline a { color: var(--ink-2); text-decoration-color: var(--rule-strong); }
.byline a:hover { color: var(--ink); }
.byline .sep, .footer-links .sep, .footer-langs .sep { color: var(--rule-strong); margin-inline: 0.3rem; }

.lead { margin-block-end: 2rem; }
.lead p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  margin-block-end: 0.8em;
}
html[lang="ar"] .lead p { line-height: 1.75; }
.lead p:last-child { margin-block-end: 0; }

/* ------------------------------------------------------------ blocks */
/* Every section is a surface: a rounded card on the page background. */
.block {
  margin-block: 0 1.25rem;
  padding: 1.4rem 1.6rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.block > h2 { margin-block-end: 0.5rem; }
.block > :last-child { margin-block-end: 0; }
/* Key points as list rows, the way a market summary reads. */
#key-points ul { list-style: none; padding: 0; margin: 0; }
#key-points li { padding-block: 0.6rem; margin: 0; border-block-end: 1px solid var(--rule); }
#key-points li:last-child { border-block-end: 0; padding-block-end: 0; }
.basis {
  margin-block: -0.2rem 1rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-2);
}
.sub { margin-block-end: 1.5rem; }
.sub:last-child { margin-block-end: 0; }

/* callouts — a tinted card, on the same radius as every other section */
.callout {
  margin-block: 0 1rem;
  padding: 1.1rem 1.35rem;
  background: var(--note-paper);
  border: 1px solid var(--rule);
}
.callout > h2 { padding-block-start: 0; border-block-start: 0; font-size: 1.2rem; margin-block-end: 0.5rem; }
.callout > p:last-child { margin-block-end: 0; }
.callout .kicker {
  margin-block: 0 0.15rem;
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.callout-warning { background: var(--warn-paper); border-color: var(--accent); }
.callout-warning .kicker { color: var(--accent); }
.callout-example { background: var(--paper-2); }

/* tables — hairlines, tabular figures, own scroll container */
/* Provider marks. A supplied logo renders as an image; otherwise initials in a
   neutral chip. The chip is deliberately not brand-coloured: it identifies a row
   without imitating a mark the site has no licence to reproduce. */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  margin-inline-end: 0.5rem;
  vertical-align: -0.25rem;
  border-radius: 0.25rem;
  flex: none;
}
.mark-text {
  background: var(--rule);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
img.mark { object-fit: contain; background: transparent; }
th[scope="row"] { white-space: nowrap; }
/* The mark is lifted out of the line and its space reserved with padding:
   0.6rem gutter + 1.35rem mark + 0.5rem gap. Inline, the image was not counted
   when the browser worked out the column's minimum width — measured, the
   column came out 21.6px narrower than its contents, which is the mark exactly
   — and because the cell is nowrap the longest names, "CMC Markets" and
   "Pepperstone", painted past the cell into the column beside them. Reserving
   the space as padding makes the minimum padding + text, which the browser
   does count. Keep this padding in step with the mark's own size above.
   The mark needs a positioned cell: narrow screens get one from the sticky
   rule below, wide ones from the `relative` that replaced `static` there. */
th[scope="row"]:has(.mark) { padding-inline-start: 2.45rem; }
th[scope="row"] .mark {
  position: absolute;
  inset-inline-start: 0.6rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  margin-inline-end: 0;
}

/* The country control, in the page head under the lead: an eyebrow saying
   what it is for and one link per country to the page for its regime. It
   replaced a select that filtered rows in place, which nothing without a
   script could use and which a crawler saw as eight tables in a row; these
   are links, so the control is the same for everyone, and the script builds
   its select from them. */
.country-nav { margin-block-start: 1.2rem; }
.country-nav .kicker { margin-block-end: 0.45rem; }
.country-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.country-list a { font-weight: 500; }
.country-list a[aria-current="page"] { color: var(--ink); text-decoration: none; border-block-end: 2px solid var(--link); }
.country-list[hidden] { display: none; }
.country-blurb { margin: 0.7rem 0 0; max-inline-size: 40rem; font-size: 0.95rem; color: var(--ink-2); }
.country-filter { margin: 0.4rem 0 0.6rem; font-size: 0.95rem; color: var(--ink-2); }
.country-filter a { font-weight: 600; }
/* The select the script builds from the links, and the two links beside it:
   the way to the chosen country's page when it is another page, and the way
   back to every row after the tables were narrowed. */
.country-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-block: 0; font-size: 0.92rem; color: var(--ink-2); }
.country-pick label { display: inline-flex; align-items: center; gap: 0.5rem; }
.country-pick select { font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 0.4rem 2rem 0.4rem 0.9rem; }
.country-pick .country-go { font-weight: 600; }

/* Tables read as list rows: small grey labels, tabular figures, hairlines,
   a hover tint. The caption is the table's label and sits above it. On a
   narrow screen the provider column pins while the rest scrolls; on a wide
   one the table fits, so the wrapper stops being a scroll container and the
   header row pins to the page instead. */
.table-wrap { overflow-x: auto; max-inline-size: 100%; margin-block: 0.6rem 0; container-type: inline-size; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 4px; }
/* The key to any code a table's cells use, set just above it. */
/* When a table's figures were checked: a source line in the caption's small
   slate, as data sites set one under a chart, not a paragraph of copy. The
   banded pages' copy rule (`.block > p`, 1.08rem) would otherwise take it. */
.checked-note,
body.banded article > .block > p.checked-note { margin: 0.6rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-2); }
/* The banded pages' copy rule (`.block > p`, 1.08rem) outranked this and set
   the key at body size, so the rule names that selector too. */
.table-key,
body.banded article > .block > p.table-key { margin: 0.5rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-2); }
.table-key .key-label { font-weight: 500; color: var(--ink); margin-inline-end: 0.35em; }
/* Key codes, in the key and in the cells: a small pill. */
.code { display: inline-block; font-size: 0.75rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em; padding: 0 0.55em; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule); vertical-align: 0.05em; white-space: nowrap; }
.code-hard { padding-inline: 0.45em; font-size: 0.8rem; line-height: 1.3; background: var(--chip-on); color: var(--chip-on-ink); border-color: transparent; }
th .code-hard, td .code-hard { margin-inline-start: 0.3em; }
.table-key .code { margin-inline-end: 0.1em; }
.table-key .sep { margin-inline: 0.35em; }
/* min- rather than a fixed 100%: the wrapper scrolls, so a table must be
   allowed to grow past it. Pinned to 100% it was squeezed below its own
   content and a nowrap provider name spilled into the next column. */
table { border-collapse: collapse; min-inline-size: 100%; font-size: 0.875rem; font-variant-numeric: tabular-nums lining-nums; }
/* The caption lives inside the table, so when the table is wider than its
   scroller the caption would be too. Size it to the scroller instead and pin
   it, so it wraps at the visible width and stays put while the rows scroll. */
caption { caption-side: top; text-align: start; font-size: 0.8rem; color: var(--ink-2); padding: 0 0 0.7rem; line-height: 1.45; inline-size: 100cqi; position: sticky; inset-inline-start: 0; }
th, td { padding: 0.62rem 0.75rem; text-align: start; vertical-align: middle; line-height: 1.35; border-block-end: 1px solid var(--rule); }
th:first-child, td:first-child { padding-inline-start: 0; }
th:last-child, td:last-child { padding-inline-end: 0; }
tbody th[scope="row"] { padding-inline-end: 1.25rem; }
thead th {
  font-family: var(--font-text);
  font-size: 0.8125rem; font-weight: 600;
  color: var(--ink-2);
  background: var(--paper-2);
  border-block-end: 1px solid var(--rule);
  white-space: normal;
  vertical-align: bottom;
}
thead th:first-child { border-start-start-radius: 10px; padding-inline-start: 0.6rem; }
thead th:last-child { border-start-end-radius: 10px; padding-inline-end: 0.6rem; }
tbody th[scope="row"] { padding-inline-start: 0.6rem; }
tbody tr > td:last-child { padding-inline-end: 0.6rem; }
tbody th { font-weight: 500; }
tbody tr:last-child th, tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover > th, tbody tr:hover > td { background: var(--paper-2); }
tbody th[scope="row"], thead th:first-child { position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1; }
/* A pinned cell composites separately and its hairline can rasterise away at a fractional offset; draw it as a shadow too. */
tbody th[scope="row"] { box-shadow: inset 0 -1px 0 var(--rule); }
tbody tr:last-child th[scope="row"] { box-shadow: none; }
@media (min-width: 64rem) {
  .table-wrap { overflow-x: clip; }
  thead th { position: sticky; inset-block-start: 0; background: var(--paper-2); z-index: 2; }
  /* not sticky here: the wrap clips rather than scrolls at this width. Stays
     positioned so the mark above can be placed against it. */
  tbody th[scope="row"] { position: relative; }
}
td.num, th.num {
  text-align: end;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* steps — number set in the margin */
ol.steps { list-style: none; padding-inline-start: 2.4rem; counter-reset: step; margin-block: 1.25rem; }
ol.steps > li { position: relative; margin-block-end: 1rem; counter-increment: step; }
ol.steps > li::before {
  content: counter(step);
  position: absolute; inset-inline-start: -2.4rem;
  inline-size: 1.6rem; text-align: end;
  font-family: var(--font-display);
  font-size: 1rem; font-variant-numeric: lining-nums;
  color: var(--ink-2);
}
.step-title { display: block; font-weight: 600; }

/* definition lists */
dt { font-weight: 600; margin-block-start: 1rem; }
dt:first-child { margin-block-start: 0; }
/* A definition list wraps each pair, so every dt is a first child; the space
   between items goes on the wrapper instead. */
.pair + .pair { margin-block-start: 1rem; }
dd { margin-inline-start: 0; margin-block: 0.15rem 0; color: var(--ink); }

/* quotation — hanging mark, no box */
figure.quote { margin: 1.75rem 0; padding-inline-start: 1.6rem; position: relative; }
figure.quote::before {
  content: "\201C";
  position: absolute; inset-inline-start: 0; inset-block-start: -0.15em;
  font-family: var(--font-display); font-size: 2.4rem; line-height: 1;
  color: var(--accent);
}
figure.quote blockquote { margin: 0; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.55; }
figure.quote blockquote p:last-child { margin-block-end: 0; }
figure.quote figcaption { margin-block-start: 0.7rem; font-size: 0.85rem; color: var(--ink-2); }
.translated { font-style: italic; }

/* question and answer */
.qa { margin-block-end: 1.6rem; }
.qa:last-child { margin-block-end: 0; }
.qa h3 { margin-block-start: 0; }

/* generated listings */
/* Region groups on the comparison pages. Countries wrap into columns rather
   than forming one long ranked column, because a single ordered list of
   countries reads as a league table however it is sorted. */
.regionlist { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.5rem 1.75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.regionlist > li { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.regionlist a { font-weight: 600; }
.regionlist a[aria-current="page"] { color: var(--ink); text-decoration: none; border-block-end: 2px solid var(--link); }
.regionlist .blurb { display: inline; color: var(--ink-soft); font-size: 0.85em; }

.pagelist { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.pagelist > li { padding-block: 0.85rem; border-block-end: 1px solid var(--rule); }
/* The divider between rows, dropped after the last row. Not where the list
   is drawn as cards: there the rule below is the card's own border, and
   :last-child outranks .cardgrid > li, so the final card lost its bottom
   edge. Visible the moment the topic band gained a sixth tile. */
.pagelist:not(.cardgrid):not(.cardrow) > li:last-child { border-block-end: 0; }
.pagelist > li > a { font-weight: 600; text-decoration: none; }
.pagelist > li > a:hover { text-decoration: underline; }
.pagelist .blurb { display: block; margin-block-start: 0.15rem; color: var(--ink-2); font-size: 0.95rem; }
/* Category cards: the home page's "browse by category" block and the site index. */
.pagelist-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; margin-block-start: 0.5rem; }
.pagelist-cats > li { padding: 1.25rem 1.35rem 1.2rem; margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow); border-block-end: 1px solid var(--rule); }
.pagelist-cats > li > a { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.pagelist-cats > li:first-child > a::before { content: ""; display: inline-block; inline-size: 0.55em; block-size: 0.55em; border-radius: 50%; background: var(--brand); margin-inline-end: 0.45em; vertical-align: 0.08em; }
.pagelist-cats .count { display: inline-block; margin-block: 0.4rem 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--chip-on-ink); background: var(--chip-on); padding: 0.1em 0.65em; border-radius: 999px; }
.pagelist-cats .blurb { display: block; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); margin-block-end: 0.7rem; }
.pagelist-cats ul { display: block; margin: 0; padding: 0; border-block-start: 1px solid var(--rule); padding-block-start: 0.6rem; font-size: 0.88rem; }
.pagelist-cats ul li { margin: 0; padding-block: 0.22rem; }
.pagelist-cats ul li:first-child a { color: var(--ink); font-weight: 600; }
/* the block holding the cards is not itself a card */
/* The category band takes its ground from the band rules like the others. */
/* The home page runs full width so the category cards can sit four across;
   its rail flows beneath, as on the comparison pages. */
@media (min-width: 64rem) {
  body.kind-home main { grid-template-columns: minmax(0, 1fr); }
  body.kind-home .rail { position: static; max-block-size: none; }
  body.kind-home .toc ol, body.kind-home .related ul { columns: 2; column-gap: 3rem; }
  body.kind-home .pagelist-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.kind-home .lead, body.kind-home .article-head { max-inline-size: 58rem; }
}
@media (min-width: 64rem) and (max-width: 79.99rem) { body.kind-home .pagelist-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Home hero: title and lead on the left, the mascot on the right, the two
   links in the lead's last paragraph set as buttons. Decoration only — the
   image is a background and the DOM is the same article as every other page. */
body.kind-home .article-head { background: none; border: 0; box-shadow: none; padding: 0.9rem 0 0; margin-block-end: 0.3rem; max-inline-size: none; }
body.kind-home h1 { font-size: clamp(1.8rem, 1rem + 1.85vw, 2.7rem); line-height: 1.15; max-inline-size: 28.5rem; text-wrap: wrap; }
body.kind-home h1::after { display: none; }
h1 .accent { font-style: normal; color: var(--accent); }
/* The mock's pairing, which ours had the other way about: the headline heavier
   and tighter than the site's default, the lead a size larger and a shade
   lighter, so the two read as statement and explanation rather than two
   weights of the same voice. */
body.kind-home article > .article-head h1 { font-weight: 800; letter-spacing: -0.022em; color: var(--ink-strong); }
body.kind-home .lead p { font-size: 1.02rem; line-height: 1.55; color: color-mix(in srgb, var(--ink-2) 92%, var(--paper)); }
/* Section headings on the light bands, as the mock sets them: heavier and a
   step darker than body ink, with the line under them in the secondary grey
   rather than the same ink as the heading — ours read as one voice at two
   sizes. The dark bands keep their own colours. */
body.kind-home article > .block:not(#how-it-works):not(#most-accounts-lose):not(#compare-providers-band) > h2 {
  font-weight: 800; letter-spacing: -0.02em; color: var(--ink-strong);
}
body.kind-home article > .block:not(#how-it-works):not(#most-accounts-lose):not(#compare-providers-band) > p:not(.more):not(.basis) {
  color: var(--ink-2);
}
body.kind-home article > .block:not(#how-it-works):not(#most-accounts-lose):not(#compare-providers-band) > .more a {
  font-size: 0.95rem; font-weight: 600;
}
body.kind-home .lead { margin-block-end: 0.9rem; }
body.kind-home .lead p { font-family: var(--font-text); font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); max-inline-size: 24rem; }
body.kind-home .lead p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-block-start: 1.1rem; }
body.kind-home .lead p:last-child a { text-decoration: none; padding: 0.75rem 1.4rem; border-radius: 10px; font-weight: 700; font-size: 0.98rem; }
body.kind-home .lead p:last-child a:first-of-type { background: linear-gradient(100deg, var(--fill-2), var(--fill)); color: var(--on-primary); box-shadow: 0 6px 16px rgba(14, 144, 121, 0.3); }
body.kind-home .lead p:last-child a:first-of-type::after {
  content: ""; display: inline-block; vertical-align: -0.12em;
  inline-size: 1.05rem; block-size: 1.05rem; margin-inline-start: 0.45rem;
  background: currentColor;
  -webkit-mask: url("/assets/icons/arrow-right.svg") center/contain no-repeat;
  mask: url("/assets/icons/arrow-right.svg") center/contain no-repeat;
}
:root[dir="rtl"] body.kind-home .lead p:last-child a:first-of-type::after { scale: -1 1; }
body.kind-home .lead p:last-child a:last-of-type { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow); }
/* Narrow screens: the full body would crowd the hero and lose its detail at
   that size, so the bull sits beside the buttons. It is a flex item in the
   same row, so it wraps with them rather than reserving a column — at 360px
   the primary button keeps to one line. */
@media (max-width: 63.99rem) {
  /* Narrow: the candle field and the reading bull are the chip list's own
     ground, and the chips sit on them — three down the left, two down the
     right — rather than stacking underneath as a second row of buttons. One
     element carries the art, so the chips cannot drift away from it. */
  body.kind-home .lead::after { content: none; }
  /* The buttons sit on the field rather than above it, so the lead keeps its
     own layer and paints over the art that now rises behind it. */
  body.kind-home .lead { position: relative; z-index: 1; margin-block-end: 0; }
  /* Measured off the mock: pills rather than rounded boxes, a larger label in
     a shallower box — 16px type in a 36px pill against 14px in a 42px one —
     and a wider gap before the arrow. The second button is a hairline outline
     with no lift, since on the field a shadow reads as a second pill. */
  /* Scoped through article, or the compact rule further down the sheet — same
     weight, later in the file — keeps the 14px label and the 42px box. */
  body.kind-home article > .lead p:last-child a {
    border-radius: 999px; padding: 0.5rem 1.05rem; font-size: 1rem; line-height: 1.15;
  }
  body.kind-home article > .lead p:last-child a:first-of-type::after {
    inline-size: 1.1rem; block-size: 1.1rem; margin-inline-start: 0.8rem;
  }
  body.kind-home article > .lead p:last-child a:last-of-type { box-shadow: inset 0 0 0 1px var(--rule); }
  body.kind-home .hero-chips {
    /* The field runs to the page's edges, as the reference draws it, so the
       art bleeds past the gutter the text keeps to; the chips stay inside it.
       It begins under the buttons rather than behind them. */
    position: relative; z-index: 0; display: block;
    padding: 0 var(--gut);
    /* No gap either side: the field starts where the buttons end and the
       next band's ground starts where the field ends. */
    margin: 0 calc(-1 * var(--gut));
    block-size: min(18.5rem, 74vw);
    /* The field is a panel, not just artwork: a pale mint ground under the
       candles, so the buttons at its top edge sit on the field rather than
       above it. The chart's own upper left is empty, which is why raising the
       image alone left white behind them. */
    /* A veil between the bull and the candles: the reference's field is a pale
       wash, not the full-strength chart, and the bull sits above the veil so
       only the candles lighten. */
    background: url("/assets/hero-bull.webp") center bottom / auto 90% no-repeat,
                linear-gradient(to bottom,
                  color-mix(in srgb, var(--surface) 18%, transparent),
                  transparent),
                url("/assets/hero-chart.webp") center 50% / 140% auto no-repeat,
                /* a soft top edge rather than a ruled line across the column */
                linear-gradient(to bottom, var(--surface), transparent 14%);
    /* After the shorthand, which would otherwise reset it to transparent. */
    background-color: color-mix(in srgb, var(--chip-on) 85%, var(--surface));
  }
  /* Offsets measured off the mock against the bull rather than the column:
     each pill sits a share of his height below his top edge — 10 %, 21 %,
     34 %, 43 %, 65 % — which is what keeps them beside him rather than over
     him, and three of the five step outward as they descend. */
  body.kind-home .hero-chips li { position: absolute; margin: 0; max-inline-size: 47%; }
  /* The pills the reference floats: a little larger, a softer shadow and no
     hairline, since on the field the ring reads as an outline rather than a
     lift. */
  body.kind-home .hero-chips a {
    /* Tighter than the wide layout's: on a phone the pills sit over the bull,
       and every millimetre of pill is a millimetre of him covered. */
    padding: 0.5rem 0.9rem 0.5rem 0.68rem; gap: 0.45rem;
    font-size: 0.88rem;
    box-shadow: 0 8px 20px rgba(15, 35, 30, 0.1);
  }
  body.kind-home .hero-chips a:hover { box-shadow: 0 10px 24px rgba(15, 35, 30, 0.16); }
  body.kind-home .hero-chips a::before { inline-size: 1.15rem; block-size: 1.15rem; }
  body.kind-home .hero-chips li[data-chip="0"] { inset-block-start: 18.7%; inset-inline-start: calc(var(--gut) + 0.8rem); }
  /* Clear of the ear: the pill keeps to the page's own edge here. */
  body.kind-home .hero-chips li[data-chip="1"] { inset-block-start: 28%; inset-inline-end: 0.4rem; }
  body.kind-home .hero-chips li[data-chip="2"] { inset-block-start: 41%; inset-inline-start: var(--gut); }
  body.kind-home .hero-chips li[data-chip="3"] { inset-block-start: 49%; inset-inline-end: var(--gut); }
  /* Strategy moves off the left column to the right horn's tip, above Leverage. */
  body.kind-home .hero-chips li[data-chip="4"] { inset-block-start: 10%; inset-inline-end: var(--gut); inset-inline-start: auto; }
}
@media (min-width: 64rem) {
  /* One column, with the illustration and the chips laid over the same rows as
     the text rather than beside them. In the reference the headline runs to
     545px and the mascot starts behind its last line; a second grid column
     could only ever put them side by side. */
  body.kind-home article { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  body.kind-home article > * { grid-column: 1; }
  /* The decoration is pinned to rows one and two, so the text has to be
     pinned there too — left to auto-placement it lands in the rows after,
     which put the mascot above the headline instead of behind it. */
  body.kind-home article > .article-head { grid-row: 1; position: relative; z-index: 2; }
  body.kind-home article > .lead { grid-row: 2; position: relative; z-index: 2; }
  /* The mascot. The box is the artwork's own size, not a wider one it is
     centred in: at 24.5rem with `contain` the drawn mascot was 282px against
     the reference's 318 and sat 51px further from the right, because `contain`
     fitted it to the box's height and then centred the slack. Sized to the
     reference it docks where the reference docks it, 73px inside the content's
     right edge. Its height is the band's, so the crop stays a tenth of the
     mascot whatever the copy does to the band, and its right edge is the box's
     right edge, so the dock does not move when the drawn width does. */
  body.kind-home article::before {
    content: ""; grid-column: 1; grid-row: 1 / 3; z-index: 1;
    justify-self: end; margin-inline-end: 4.5rem;
    margin-block-start: 0.7rem;
    inline-size: 22rem; block-size: calc(100% - 0.7rem); min-block-size: 18rem;
    /* The whole drawing, standing on the band's floor and docked to the box's
       right edge. Sized to 111% of the band from the top, it came out wider
       than this 22rem box, so the box cut its left side (the book's edge and
       his arm) and the band cut his hands. `contain` fits it inside the box
       on both axes whatever the band's height. */
    background: url("/assets/hero-bull.webp") right bottom / contain no-repeat;
  }
  /* The chips are scattered over the illustration rather than stacked under
     the buttons: three down its left side, two down its right, at the offsets
     the reference places them from the page's right edge. */
  body.kind-home .hero-chips {
    grid-column: 1; grid-row: 1 / 3; align-self: start;
    position: relative; z-index: 3; display: block; margin: 0; block-size: 0;
  }
  body.kind-home .hero-chips li { position: absolute; }
  /* Offsets taken from the reference, measured to each chip's right edge and
     expressed from the article's own right edge. */
  body.kind-home .hero-chips li[data-chip="0"] { inset-block-start: 2.7rem;  inset-inline-end: 23.4rem; }
  body.kind-home .hero-chips li[data-chip="1"] { inset-block-start: 7.55rem; inset-inline-end: 21.25rem; }
  body.kind-home .hero-chips li[data-chip="2"] { inset-block-start: 12.3rem; inset-inline-end: 24.3rem; }
  body.kind-home .hero-chips li[data-chip="3"] { inset-block-start: 2.7rem;  inset-inline-end: -0.8rem; }
  body.kind-home .hero-chips li[data-chip="4"] { inset-block-start: 7.55rem; inset-inline-end: -1.4rem; }
  /* The hero's right half: the candle field, full height, with the mascot in
     front of it. In the reference the candles run from 464px to the page's
     right edge and the whole height of the band, so this is a field rather
     than the sweep across the top corner it was. It is a grid item in the same
     two rows as the text and the mascot, one layer below the mascot.
     The field runs to the page's right edge. It can do that without leaving
     the mascot behind now the margin is a twentieth of the width: the field is
     35rem and the mascot sits within it at every width this page is read at. */
  body.kind-home article { position: relative; overflow-x: clip; }
  body.kind-home article::after {
    content: ""; grid-column: 1; grid-row: 1 / 3; z-index: 0; pointer-events: none;
    justify-self: end; margin-inline-end: calc(-1 * var(--gut));
    /* Wide enough for the whole image: at 35rem the field was 560px and the
       chart, drawn 1102x620 and sized to the band's height, about 640px, so
       its left end was cut off at the field's edge, a hard vertical line with
       the first candles starting halfway up. The left edge now fades in, and
       the image sits 2.6rem low so the empty glow under its lowest candles
       falls below the band and the candles rise from its foot. */
    inline-size: min(42rem, 58vw); block-size: 100%; min-block-size: 19.5rem;
    background: url("/assets/hero-chart.webp") right 0 bottom -2.6rem / auto 100% no-repeat;
    -webkit-mask: linear-gradient(to right, transparent, black 28%);
    mask: linear-gradient(to right, transparent, black 28%);
  }
  /* Right to left the field is on the left, so the chart is mirrored: it rises
     towards the page edge and fades in towards the text. */
  :root[dir="rtl"] body.kind-home article::after { scale: -1 1; }
}
.pagelist-cats ul {
  list-style: none; padding: 0; margin: 0.5rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.25rem 1.5rem; font-size: 0.92rem;
}
.pagelist-cats ul li { margin: 0; }
.pagelist-cats ul a { color: var(--ink-2); text-decoration: none; }
.pagelist-cats ul a:hover { color: var(--ink); text-decoration: underline; }

/* glossary */
.term { padding-block: 1rem; border-block-end: 1px solid var(--rule); }
.term:last-child { border-block-end: 0; }
.term h3 { margin-block: 0 0.25rem; }
.term abbr { font-family: var(--font-text); font-size: 0.85rem; font-weight: 400; color: var(--ink-2); text-decoration: none; margin-inline-start: 0.4rem; }
.term p { margin-block-end: 0; }
.see { margin-block-start: 0.4rem; font-size: 0.88rem; color: var(--ink-2); }

/* sources */
ol.sources { font-size: 0.92rem; color: var(--ink-2); padding-inline-start: 1.5em; }
ol.sources li { margin-block-end: 0.5rem; }

/* author profile */
.profile { margin-block: 1rem 0; }
.profile dt { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); margin-block-start: 1.1rem; }
.profile dd { margin-block-start: 0.2rem; }
.profile ul { margin: 0; padding-inline-start: 1.2em; }

/* ------------------------------------------------------------ rail */
.rail {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow);
}
.rail-label {
  margin-block: 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
}
.toc ol, .related ul { list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: 0.85rem; line-height: 1.45; }
.toc ol ol { padding-inline-start: 0.9rem; margin-block: 0.35rem 0; }
.toc li, .related li { margin-block-end: 0.35rem; }
.toc a, .related a { color: var(--ink-2); text-decoration: none; }
.toc a:hover, .related a:hover { color: var(--ink); text-decoration: underline; }
.toc a[aria-current="location"] { color: var(--ink); font-weight: 600; }
.related a { color: var(--link); }
.related a:hover { color: var(--link); }

/* ------------------------------------------------------------ colophon */
.colophon {
  max-inline-size: none;
  padding: 1.5rem max(1.5rem, calc((100vw - var(--shell)) / 2 + 1.5rem)) 2.5rem;
  background: var(--foot-bg);
  border-block-start: 0;
  margin-block-start: 1rem;
  /* Body size, not smaller: the footer carries the risk disclosure, and risk
     text set below body copy is the affiliate-funnel tell noted above. */
  font-size: 0.95rem;
  color: var(--foot-ink-2);
}
.colophon a { color: var(--foot-link); }
.colophon a:hover { color: var(--foot-ink); }
.footer-links .sep, .footer-langs .sep { color: var(--foot-ink-2); }
.risk-footer { max-inline-size: 46rem; color: var(--foot-ink); }
.footer-links, .footer-langs { margin-block: 0.5rem; }
.copyright { margin-block: 0.9rem 0; }

/* ------------------------------------------------------------ search results (script only) */
.search-panel { max-inline-size: var(--shell); margin-inline: auto; padding: 1rem 1.5rem 0; }
/* The masthead, the colophon and the search panel align with the page's own
   content. On every reading page that is the centred shell, which is what they
   already track; on the home page it is the 5.1vw margin. In the reference the
   logo and the first band start on the same 52px line. */
body.kind-home .masthead,
body.kind-home .colophon { padding-inline: var(--gut); }
body.kind-home .search-panel { max-inline-size: none; margin-inline: 0; padding-inline: var(--gut); }
.search-results { list-style: none; padding: 0; margin: 0.5rem 0 0; max-inline-size: var(--measure); }
.search-results li { padding-block: 0.6rem; border-block-end: 1px solid var(--rule); }
.search-results .blurb { display: block; font-size: 0.9rem; color: var(--ink-2); }

/* ------------------------------------------------------------ root language selector */
.root { display: block; padding-block: 4rem; }
.root article { margin-inline: auto; max-inline-size: 34rem; }
.root .article-head { text-align: center; }
.root .lead { text-align: center; }
.editions { list-style: none; padding: 0; margin: 0; }
.editions li { border-block-end: 1px solid var(--rule); }
.editions a { display: block; padding: 0.85rem 0; font-size: 1.15rem; text-decoration: none; }
.editions a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ narrow */
@media (max-width: 44rem) {
  .masthead, main, .colophon, .search-panel { padding-inline: 1.1rem; }
  .tools { margin-inline-start: 0; inline-size: 100%; order: 4; padding-block-end: 0.8rem; }
  .primary { order: 3; margin-block-start: 0.2rem; }
  main { padding-block-start: 1.5rem; }
  th, td { padding: 0.5rem 0.7rem; }
}

@media print {
  .masthead, .rail, .search, .skip, .search-panel { display: none; }
  body { font-size: 11pt; }
  a { color: inherit; }
  a.cite::after { content: " (" attr(href) ")"; font-size: 0.75em; vertical-align: baseline; }
  .block { break-inside: auto; border: 0; padding: 0; }
  thead { display: table-header-group; }
  tr, caption { break-inside: avoid; }
  .table-wrap { overflow: visible; }
  h2, h3 { break-after: avoid; }
  table, figure.quote, .callout { break-inside: avoid; }
}

/* ------------------------------------------------------------ home: kickers and card grids */
/* A kicker is a short label above a heading — the page's, or a section's. */
.kicker {
  margin: 0 0 0.5rem;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}
body.kind-home .article-head .kicker { margin-block-end: 0.55rem; font-size: 0.75rem; letter-spacing: 0.09em; color: var(--ink-2); }

/* Topic and market cards: a tinted panel per page, its blurb beneath. */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1rem; margin-block-start: 1.25rem; }
/* Six topics, so three across rather than a row of five and one stranded
   on its own. Only the home page's topic band uses this grid. */
@media (min-width: 52rem) { .cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cardgrid > li {
  margin: 0; padding: 1.25rem 1.35rem 1.35rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px;
  border-block-end: 1px solid var(--rule);
}
.cardgrid > li:nth-child(4n+1) { background: var(--card-1); }
.cardgrid > li:nth-child(4n+2) { background: var(--card-2); }
.cardgrid > li:nth-child(4n+3) { background: var(--card-3); }
.cardgrid > li:nth-child(4n+4) { background: var(--card-4); }
.cardgrid > li > a {
  display: block; font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.cardgrid > li > a:hover { color: var(--accent); }
.cardgrid .blurb { display: block; margin-block-start: 0.4rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
/* Card-grid sections are bands like the rest; the band rules set their ground. */

/* ------------------------------------------------------------ home: bands */
/* Each section spans the shell with its own ground, alternating light, white
   and dark, rather than sitting in a card. The negative margin cancels main's
   padding and the matching padding puts the content back on the same edge. */
/* The reference's measurements, taken off the mock at its own 1024px: content
   starts 52px from the edge, each band runs the full width, and a band carries
   about 27px of space above and below its content — not the other way round,
   which is what this had. */
/* The home page's margin is a share of the width, not whatever is left after
   centring the shell. In the reference the content runs 52px from each edge of
   a 1024px page — a twentieth — and the shell-centred version matched that at
   1024 and nowhere else: at 1637 it left 230px, near a seventh, so the page
   read as a column in a wide frame rather than the reference's full-width
   bands. The floor keeps the tablet margin where it was. The reading pages are
   untouched: their measure is the point of the shell. */
body.kind-home { --gut: 1.1rem; }
@media (min-width: 48rem) { body.kind-home { --gut: max(3.25rem, 5.1vw); } }
/* Every home section is a full-width band with its own padding, so main adds
   none of its own: the 2.5rem it used to add below the last band read as a
   gap twice the one above that band's first line. */
body.kind-home main { max-inline-size: none; padding-inline: 0; padding-block: 0; gap: 0; }
/* The colophon's 1rem stand-off is for an article's measure-width column. The
   home page's bands run to the edges, so the dark band meets the last one and
   the gap below the final section is the section's own padding, as above it. */
body.kind-home .colophon { margin-block-start: 0; }
/* The hero is the one part of the page no band covers, so the article's own
   ground is the hero's ground; every band below paints over it. */
/* The reading measure caps the article at 42rem below 64rem, which is right
   for a page of prose and wrong for this one: between 672px and 1024px the
   full-bleed bands stopped at 672 and left the rest of the window empty. */
body.kind-home article { padding-inline: var(--gut); background: var(--hero-ground); max-inline-size: none; }
body.kind-home article > .block {
  margin-inline: calc(-1 * var(--gut));
  padding: 1.7rem var(--gut);
  margin-block: 0;
  border: 0; border-radius: 0; box-shadow: none;
  background: var(--surface);
}
@media (max-width: 47.99rem) { body.kind-home article > .block { padding-block: 1.5rem; } }
body.kind-home article > #follow-the-fundamentals,
body.kind-home article > #sections-of-the-site,
body.kind-home article > #three-questions,
body.kind-home article > #who-this-is-for { background: var(--paper); }
/* The two bands the reference sets on dark navy. */
body.kind-home article > #how-it-works,
body.kind-home article > #most-accounts-lose {
  background: var(--band-dark);
  color: var(--band-ink);
}
/* The worked example is a light band, not a dark one (operator, 2026-10-18).
   Midnight navy with neon mint and red, a spotlight and glowing rails read as a
   generated trading dashboard. The band's tokens are redefined here, so every
   rule below that mixes them follows: page ground, ink for headings, slate for
   copy, the site's link green for a gain and a brick red for a loss, both at
   least 4.5:1 on white. The risk band further down keeps the dark set. */
body.kind-home article > #how-it-works {
  --band-dark: var(--paper);
  --band-head: var(--ink);
  --band-ink: var(--ink-2);
  --band-accent: var(--accent);
  --band-down: var(--loss);
  background: var(--paper);
}
body.kind-home article > #how-it-works h2,
body.kind-home article > #most-accounts-lose h2 { color: var(--band-head); }
body.kind-home article > #how-it-works .kicker { color: color-mix(in srgb, var(--band-ink) 82%, var(--band-dark)); letter-spacing: 0.14em; }
body.kind-home article > #most-accounts-lose .kicker { color: color-mix(in srgb, var(--band-ink) 82%, var(--band-dark)); letter-spacing: 0.14em; }
body.kind-home article > #how-it-works .basis,
body.kind-home article > #most-accounts-lose .basis { color: color-mix(in srgb, var(--band-ink) 80%, var(--band-dark)); }
body.kind-home article > #how-it-works dt,
body.kind-home article > #how-it-works dd { color: var(--band-head); }
body.kind-home article > #how-it-works dd:nth-of-type(3),
body.kind-home article > #how-it-works dd:nth-of-type(4) { color: color-mix(in srgb, var(--band-head) 93%, var(--band-dark)); }
body.kind-home article > #how-it-works a,
body.kind-home article > #most-accounts-lose a { color: var(--band-accent); text-decoration-color: color-mix(in srgb, var(--band-accent) 50%, transparent); }
body.kind-home article > #most-accounts-lose { border: 0; }

/* ------------------------------------------------------------ home: card icons */
/* The icon set ships as flat SVG files under /assets/icons/. They are two-tone
   by design, so they are painted as a background rather than masked to one
   colour. Purely decorative: every card already names itself in text. */
.cardgrid > li { position: relative; }
.cardgrid > li::before {
  content: ""; display: block;
  inline-size: 2.8rem; block-size: 2.8rem; margin-block-end: 0.7rem;
  border-radius: 12px; background: var(--icon-tile) center/2rem 2rem no-repeat;
}
#start-learning   .cardgrid > li[data-slot="0"]::before { background-image: url("/assets/icons/card-cfds.svg"); }
#start-learning   .cardgrid > li[data-slot="1"]::before { background-image: url("/assets/icons/card-markets.svg"); }
/* One family across the tiles: single-colour marks in the brand green, drawn
   for the mint tile the card gives them. */
#start-learning   .cardgrid > li[data-slot="2"]::before { background-image: url("/assets/icons/pill-leverage.svg"); }
#start-learning   .cardgrid > li[data-slot="3"]::before { background-image: url("/assets/icons/card-costs.svg"); }
#start-learning   .cardgrid > li[data-slot="4"]::before { background-image: url("/assets/icons/card-risk.svg"); }
#start-learning   .cardgrid > li[data-slot="5"]::before { background-image: url("/assets/icons/card-compare.svg"); }

.cardgrid .note { display: block; margin-block-start: 0.15rem; font-size: 0.82rem; font-weight: 600; color: var(--accent); }
/* The card's one anchor covers the whole tile, so the tile is clickable
   without a second link to the same page for an agent to walk twice. */
.cardgrid > li > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cardgrid .cta {
  display: block; margin-block-start: 0.9rem;
  font-size: 0.85rem; font-weight: 700; color: var(--accent);
}
.cardgrid .cta::after {
  content: ""; display: inline-block; vertical-align: -0.12em;
  inline-size: 1.05rem; block-size: 1.05rem; margin-inline-start: 0.3rem;
  background: url("/assets/icons/arrow-right.svg") center/contain no-repeat;
  transition: translate 0.15s ease;
}
.cardgrid > li:hover .cta::after { translate: 0.2rem 0; }
:root[dir="rtl"] .cardgrid .cta::after { scale: -1 1; }

/* ------------------------------------------------------------ home: onward links */
/* "View all markets" sits under its section, in every representation. */
.block .more { margin-block-start: 1.4rem; font-weight: 700; font-size: 0.95rem; }
.block .more a { text-decoration: none; }
.block .more a::after {
  content: ""; display: inline-block; vertical-align: -0.12em;
  inline-size: 1.05rem; block-size: 1.05rem; margin-inline-start: 0.35rem;
  background: url("/assets/icons/arrow-right.svg") center/contain no-repeat;
}
:root[dir="rtl"] .block .more a::after { scale: -1 1; }



/* ------------------------------------------------------------ home: the risk band */
/* The reference runs the retail-loss warning as a dark full-width band, not a
   bordered callout. The text is unchanged: it is the one figure every
   regulator requires beside a CFD offer. */
body.kind-home article > #most-accounts-lose { border: 0; border-radius: 0; }
body.kind-home article > #most-accounts-lose .kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; }

/* ------------------------------------------------------------ home: category cards */
/* Each section of the site takes its own mark, on the same light tile the rest
   of the icon set sits on. */
.pagelist-cats > li[data-cat] { position: relative; }
.pagelist-cats > li[data-cat]::before {
  content: ""; display: block; margin-block-end: 0.85rem;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 12px;
  background: var(--icon-tile) center/1.65rem 1.65rem no-repeat;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.pagelist-cats > li[data-cat="cfds"]::before      { background-image: url("/assets/icons/chip-cfds.svg"); }
.pagelist-cats > li[data-cat="basics"]::before    { background-image: url("/assets/icons/learn-cfd.svg"); }
.pagelist-cats > li[data-cat="markets"]::before   { background-image: url("/assets/icons/chip-markets.svg"); }
.pagelist-cats > li[data-cat="analysis"]::before  { background-image: url("/assets/icons/chip-analysis.svg"); }
.pagelist-cats > li[data-cat="practical"]::before { background-image: url("/assets/icons/chip-strategy.svg"); }
.pagelist-cats > li[data-cat="company"]::before   { background-image: url("/assets/icons/learning-step.svg"); }
.pagelist-cats > li[data-cat="legal"]::before     { background-image: url("/assets/icons/compare-regulation.svg"); }

/* ------------------------------------------------------------ home: hero chips */
/* Five section links, laid over the illustration on a wide screen and set as
   an ordinary wrapping row on a narrow one. Each takes its mark from the pack;
   the marks are decoration and every chip names itself in text. */
.hero-chips { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hero-chips li { margin: 0; }
.hero-chips a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.05rem 0.55rem 0.7rem;
  background: var(--surface); border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 35, 30, 0.12), inset 0 0 0 1px var(--rule);
  color: var(--ink); text-decoration: none;
  font-size: 0.92rem; font-weight: 600; white-space: nowrap;
}
.hero-chips a:hover { box-shadow: 0 6px 18px rgba(15, 35, 30, 0.18), inset 0 0 0 1px var(--rule); }
.hero-chips a::before {
  content: ""; inline-size: 1.35rem; block-size: 1.35rem; flex: none;
  background: center/contain no-repeat;
}
/* The pills carry their own marks: single-colour artwork in the brand green,
   drawn for a white pill. The two-tone set the rest of the site uses needs the
   light tile it is drawn against, and a tile inside a pill reads as a second
   chip; these are one colour, so they need none. */
.hero-chips li[data-chip="0"] a::before { background-image: url("/assets/icons/pill-cfds.svg"); }
.hero-chips li[data-chip="1"] a::before { background-image: url("/assets/icons/pill-leverage.svg"); }
.hero-chips li[data-chip="2"] a::before { background-image: url("/assets/icons/pill-markets.svg"); }
.hero-chips li[data-chip="3"] a::before { background-image: url("/assets/icons/pill-analysis.svg"); }
.hero-chips li[data-chip="4"] a::before { background-image: url("/assets/icons/pill-strategy.svg"); }

/* ------------------------------------------------------------ home: the action beside a heading */
/* The reference sets "Explore all topics" on the heading's own line, hard
   right, rather than under the cards. */
/* The onward link sits on the heading's own line at every width, as the mock
   has it — not under the cards on a phone and beside the heading on a desk. */
@media (min-width: 0) {
  body.kind-home article > .block:has(.more):not(#how-it-works):not(#compare-providers-band):not(#follow-the-fundamentals):not(#most-accounts-lose) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
    column-gap: 1.5rem;
  }
  body.kind-home article > .block:has(.more):not(#how-it-works):not(#compare-providers-band):not(#follow-the-fundamentals):not(#most-accounts-lose) > * { grid-column: 1; }
  /* The line under the heading runs the full width, as the mock has it: kept
     to the heading's column it shared 355px with the action and broke in two. */
  body.kind-home article > .block:has(.more):not(#how-it-works):not(#compare-providers-band):not(#follow-the-fundamentals):not(#most-accounts-lose) > p:not(.more):not(.basis) { grid-column: 1 / -1; }
  /* The card list spans both columns. Left in column one it was sized against
     the width the action had taken, which pushed four cards onto two rows. */
  body.kind-home article > .block:has(.more):not(#how-it-works):not(#compare-providers-band):not(#follow-the-fundamentals):not(#most-accounts-lose) > ul { grid-column: 1 / -1; }
  /* The action keeps to the heading's own row, which is the second where a
     section carries an eyebrow and the first where it does not. Pinned to
     row 2 outright, it dropped to the tagline's line the moment an eyebrow
     came off. */
  body.kind-home article > .block:has(.more):not(#how-it-works):not(#compare-providers-band):not(#follow-the-fundamentals):not(#most-accounts-lose) > .more {
    grid-column: 2; grid-row: 1; margin-block: 0; justify-self: end; white-space: nowrap;
  }
  body.kind-home article > .block:has(.more):has(> .kicker):not(#how-it-works):not(#compare-providers-band):not(#follow-the-fundamentals):not(#most-accounts-lose) > .more {
    grid-row: 2;
  }
}

/* The topic tiles, as the mock draws them on a phone: two across, white
   rather than tinted, the mark on a mint tile beside the words rather than
   above them, and the onward cue an arrow in the corner — the "Learn more"
   it replaces is decoration the card's own link already carries, which is
   why it is marked aria-hidden and never reaches the mirrors. */
/* The same tile on every width (operator, 2026-10-04): white, the mark on a
   mint tile beside the words, and the arrow at the end of the line. Larger
   type and mark here; the phone sizes follow in the media query below. */
#start-learning .cardgrid > li {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.85rem; align-content: start;
  padding: 1rem 1.05rem; border-radius: 14px;
  background: var(--surface);
}
#start-learning .cardgrid > li::before {
  grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 12px;
  background-color: color-mix(in srgb, var(--chip-on) 55%, var(--surface));
  background-size: 1.6rem 1.6rem;
}
#start-learning .cardgrid > li > a { grid-column: 2; font-size: 1.02rem; line-height: 1.3; }
#start-learning .cardgrid .blurb { grid-column: 2; margin-block-start: 0.3rem; padding-inline-end: 0.15rem; font-size: 0.9rem; line-height: 1.45; }
#start-learning .cardgrid .cta { display: none; }
#start-learning .cardgrid .blurb::after {
  content: ""; float: inline-end; clear: none;
  inline-size: 1.05rem; block-size: 1.05rem;
  margin-inline-start: 0.35rem; margin-block-start: 0.15rem;
  background: var(--brand);
  -webkit-mask: url("/assets/icons/card-arrow.svg") center/contain no-repeat;
  mask: url("/assets/icons/card-arrow.svg") center/contain no-repeat;
}
:root[dir="rtl"] #start-learning .cardgrid .blurb::after { scale: -1 1; }

@media (max-width: 47.99rem) {
  #start-learning .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  /* An odd last tile takes the row rather than sitting half-width beside a gap. */
  #start-learning .cardgrid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #start-learning .cardgrid > li {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.5rem; align-content: start;
    padding: 0.68rem 0.6rem; border-radius: 14px;
    background: var(--surface);
  }
  /* Measured off the mock's tile: a 28px mark, a 13px title that keeps to one
     line, and an 11.5px line under it. */
  #start-learning .cardgrid > li::before {
    grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0;
    inline-size: 1.85rem; block-size: 1.85rem; border-radius: 10px;
    background-color: color-mix(in srgb, var(--chip-on) 55%, var(--surface));
    background-size: 1.2rem 1.2rem;
  }
  /* 0.78rem is the size at which every tile's name keeps to one line — "The
     Global Markets" and "Leverage & Margin" both broke in two above it. */
  #start-learning .cardgrid > li > a { grid-column: 2; font-size: 0.78rem; line-height: 1.3; }
  /* The words run the column's full width and the arrow sits beside their
     last line, as the mock has it — reserving a column for the arrow on every
     line cost two lines of wrapping. Each tile's line is written to end
     short, which is what keeps the two clear of one another. */
  #start-learning .cardgrid .blurb {
    grid-column: 2; margin-block-start: 0.18rem; padding-inline-end: 0.15rem;
    font-size: 0.75rem; line-height: 1.42;
  }
  /* The arrow is floated out of the line's end, so it shares the last line of
     the tile's words rather than starting a line of its own beneath them.
     Positioned absolutely it sat below the text; floated it sits beside it,
     which is what the mock draws. */
  #start-learning .cardgrid .cta { display: none; }
  #start-learning .cardgrid .blurb::after {
    content: ""; float: inline-end; clear: none;
    inline-size: 0.9rem; block-size: 0.9rem;
    margin-inline-start: 0.28rem; margin-block-start: 0.1rem;
    background: var(--brand);
    -webkit-mask: url("/assets/icons/card-arrow.svg") center/contain no-repeat;
    mask: url("/assets/icons/card-arrow.svg") center/contain no-repeat;
  }
  :root[dir="rtl"] #start-learning .cardgrid .blurb::after { scale: -1 1; }
  :root[dir="rtl"] #start-learning .cardgrid .cta::after { scale: -1 1; }
}

/* ------------------------------------------------------------ home: the market row */
/* Low, wide cards: a large mark, the name and its example, and a chevron.
   The one-line description each page carries stays in the Markdown and JSON
   listings, where a card's shape is not a constraint. */
.cardrow { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
/* Measured off the reference: a 173x106 card with a 62px mark at the top left,
   the name and its example stacked beneath, and the chevron floating at the
   right on the text's own centre line rather than the card's. No tile — the
   mark sits straight on the card. */
.cardrow > li {
  margin: 0; position: relative; display: block;
  padding: 0.25rem 0.9rem 0.65rem;
  min-block-size: 6.6rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
}
.cardrow > li:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.cardrow > li::before {
  content: ""; display: block;
  inline-size: 3.5rem; block-size: 3.5rem; margin-inline-start: 0.05rem; margin-block-end: -0.1rem;
  background: center/contain no-repeat;
}
.cardrow > li > a {
  display: block; min-inline-size: 0;
  font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink); text-decoration: none; text-wrap: nowrap;
}
.cardrow > li > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cardrow .note { display: block; margin-block-start: 0.05rem; font-size: 0.8rem; line-height: 1.25; color: var(--ink-2); }
.cardrow > li::after {
  content: ""; position: absolute;
  inset-inline-end: 0.85rem; inset-block-end: 1.35rem;
  inline-size: 0.72rem; block-size: 0.72rem; background: var(--ink-2);
  -webkit-mask: url("/assets/icons/chevron-right.svg") center/contain no-repeat;
  mask: url("/assets/icons/chevron-right.svg") center/contain no-repeat;
}
:root[dir="rtl"] .cardrow > li::after { scale: -1 1; }
#explore-markets .cardrow > li[data-slot="0"]::before { background-image: url("/assets/icons/market-forex.svg"); }
#explore-markets .cardrow > li[data-slot="1"]::before { background-image: url("/assets/icons/market-indices.svg"); }
#explore-markets .cardrow > li[data-slot="2"]::before { background-image: url("/assets/icons/market-commodities.svg"); }
#explore-markets .cardrow > li[data-slot="3"]::before { background-image: url("/assets/icons/market-shares.svg"); }
#explore-markets .cardrow > li[data-slot="4"]::before { background-image: url("/assets/icons/market-crypto.svg"); }

/* ------------------------------------------------------------ home: section actions as buttons */
/* Four bands end on a button rather than a text link. Same markup as the
   onward links beside a heading; only the ground changes. */
body.kind-home #how-it-works .more a,
body.kind-home #compare-providers-band .more a,
body.kind-home #most-accounts-lose .more a,
body.kind-home #follow-the-fundamentals .more a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1.3rem; border-radius: 10px;
  font-size: 0.95rem; font-weight: 700; text-decoration: none;
  background: var(--fill); color: var(--on-primary);
}
body.kind-home #how-it-works .more a::after,
body.kind-home #compare-providers-band .more a::after,
body.kind-home #most-accounts-lose .more a::after,
body.kind-home #follow-the-fundamentals .more a::after {
  background: currentColor;
  -webkit-mask: url("/assets/icons/arrow-right.svg") center/contain no-repeat;
  mask: url("/assets/icons/arrow-right.svg") center/contain no-repeat;
}
/* Outlined, not filled: on the closing panel the mock draws the action as a
   hairline box on the band's own ground, as the risk band already has it. */
body.kind-home article > #how-it-works > .outro > .more a {
  background: none; color: var(--band-head);
  padding: 0.72rem 1.6rem; gap: 0.75rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--band-ink) 28%, transparent);
}
body.kind-home article > #how-it-works > .outro > .more a:hover {
  background: color-mix(in srgb, var(--band-head) 8%, transparent);
}
/* On the dark risk band the button is outlined, not filled. */
body.kind-home #most-accounts-lose .more a { color: var(--band-head); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--band-head) 45%, transparent); }

/* ------------------------------------------------------------ home: how a CFD works */
/* The worked example is a diagram: a deposit, the leverage that multiplies it,
   the position that buys, and the two outcomes a 2 % move produces. It stays a
   definition list, so every label keeps its figure in the Markdown and the JSON
   too; the panels, the rails and the charts are CSS and artwork, and say
   nothing the text does not.
   Each pair is one box. As two — a label joined to a figure at their shared
   edge — a card could only ever be centred on that join, which is above its
   middle whenever the figure is the taller half, and the rails and the pill sat
   on the join rather than on the cards' centre line. */
body.kind-home article > #how-it-works .more { margin-block-start: 1.1rem; text-align: center; }
#how-it-works .deflist, #how-it-works > .outro { max-inline-size: 42rem; margin-inline: auto; }
#how-it-works dl {
  margin: 1.3rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.85rem; row-gap: 0; align-content: start;
}
#how-it-works .pair {
  position: relative; margin: 0; min-inline-size: 0;
  /* Opaque, not a wash: the rails pass behind these and would show through. */
  background-color: color-mix(in srgb, var(--band-head) 5%, var(--band-dark));
  border: 1px solid color-mix(in srgb, var(--band-head) 13%, transparent);
  border-radius: 12px;
}
#how-it-works dt {
  margin: 0; padding: 0.7rem 0.85rem 0;
  font-size: 0.75rem; font-weight: 400; text-align: center;
  color: color-mix(in srgb, var(--band-ink) 88%, var(--band-dark));
}
#how-it-works dd { margin: 0; padding: 0 0.85rem 0.8rem; text-align: center; font-size: 1rem; }
#how-it-works .fig {
  display: block; font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 700; line-height: 1.25; color: var(--band-head);
}
#how-it-works dd .note, #how-it-works dd .after {
  margin: 0; font-family: var(--font-text); font-size: 0.75rem; line-height: 1.45; font-weight: 400;
  color: color-mix(in srgb, var(--band-ink) 85%, var(--band-dark));
}

/* 1 — the deposit, and 3 — the position it controls. The mark sits beside the
   pair, on its centre line. */
#how-it-works .pair:nth-of-type(1) { grid-column: 1 / -1; grid-row: 1; justify-self: center; inline-size: min(100%, 21rem); }
#how-it-works .pair:nth-of-type(3) { grid-column: 1 / -1; grid-row: 3; justify-self: center; inline-size: min(100%, 25rem); margin-block-start: 2.2rem; }
#how-it-works .pair:nth-of-type(1) dt, #how-it-works .pair:nth-of-type(1) dd,
#how-it-works .pair:nth-of-type(3) dt, #how-it-works .pair:nth-of-type(3) dd { padding-inline: 4.4rem 1.2rem; }
#how-it-works .pair:nth-of-type(1)::before, #how-it-works .pair:nth-of-type(3)::before {
  content: ""; position: absolute; inset-inline-start: 1.4rem;
  inset-block-start: 50%; translate: 0 -50%;
  inline-size: 2.7rem; block-size: 2.7rem; background: center/contain no-repeat;
}
#how-it-works .pair:nth-of-type(1)::before { background-image: url("/assets/icons/coin-stack.svg"); }
#how-it-works .pair:nth-of-type(3)::before { background-image: url("/assets/icons/cfd-bars.svg"); block-size: 2.3rem; }
#how-it-works .pair:nth-of-type(3) .note {
  margin-block-start: 0.55rem; padding-block-start: 0.5rem;
  border-block-start: 1px solid color-mix(in srgb, var(--band-head) 13%, transparent);
}
#how-it-works .pair:nth-of-type(3) .note strong { color: var(--band-accent); font-weight: 700; }

/* 2 — the leverage that multiplies it: a pill on the line, its note below. */
#how-it-works .pair:nth-of-type(2) {
  grid-column: 1 / -1; grid-row: 2; justify-self: center;
  background: none; border: 0; border-radius: 0; margin-block-start: 2.4rem;
}
#how-it-works .pair:nth-of-type(2) dt {
  padding: 0.32rem 0.95rem; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--band-accent) 70%, transparent); border-radius: 999px;
  background-color: color-mix(in srgb, var(--band-accent) 6%, var(--band-dark));
  font-size: 0.78rem; font-weight: 700;
}
/* The page class is needed: `body.kind-home article > #how-it-works dt` paints
   every label in --band-head and outweighs an id with a pseudo-class. */
body.kind-home #how-it-works .pair:nth-of-type(2) dt { color: var(--band-head); }
body.kind-home #how-it-works .pair:nth-of-type(2) dt strong { color: var(--band-accent); font-size: 1.15rem; line-height: 1; }
#how-it-works .pair:nth-of-type(2) dd {
  padding: 0.5rem 0 0; max-inline-size: 13rem;
  font-size: 0.75rem; line-height: 1.45;
  color: color-mix(in srgb, var(--band-ink) 85%, var(--band-dark));
}
/* The line the pill sits on, above it and above the position below it. */
#how-it-works .pair:nth-of-type(2)::before, #how-it-works .pair:nth-of-type(3)::after {
  content: ""; position: absolute; inset-inline-start: 50%; translate: -50% 0;
  inline-size: 3px; border-radius: 2px;
  background: linear-gradient(color-mix(in srgb, var(--band-accent) 25%, transparent), var(--band-accent));
  box-shadow: 0 0 7px color-mix(in srgb, var(--band-accent) 42%, transparent);
}
#how-it-works .pair:nth-of-type(2)::before { inset-block-start: -2.4rem; block-size: 2.4rem; }
#how-it-works .pair:nth-of-type(3)::after {
  inset-block-start: -2.2rem; block-size: 2.2rem;
  background: linear-gradient(var(--band-accent), color-mix(in srgb, var(--band-accent) 25%, transparent));
}

/* the fork into the two outcomes */
#how-it-works dl::after {
  content: ""; grid-column: 1 / -1; grid-row: 4; margin-block: 0.15rem 0.35rem;
  aspect-ratio: 619 / 33; max-block-size: 2.4rem; justify-self: center; inline-size: 100%;
  background: url("/assets/icons/cfd-branch.svg") center/contain no-repeat;
}

/* 4 and 5 — the two outcomes, side by side because they are the two halves of
   one step rather than a sequence. */
#how-it-works .pair:nth-of-type(4) { grid-column: 1; grid-row: 5; }
#how-it-works .pair:nth-of-type(5) { grid-column: 2; grid-row: 5; }
#how-it-works .pair:nth-of-type(4), #how-it-works .pair:nth-of-type(5) { border-width: 2px; border-radius: 16px; overflow: clip; }
#how-it-works .pair:nth-of-type(4) { border-color: var(--band-accent); background-color: color-mix(in srgb, var(--band-accent) 9%, var(--band-dark)); }
#how-it-works .pair:nth-of-type(5) { border-color: var(--band-down); background-color: color-mix(in srgb, var(--band-down) 8%, var(--band-dark)); }
#how-it-works .pair:nth-of-type(4) dt, #how-it-works .pair:nth-of-type(5) dt {
  padding: 0.9rem 0.9rem 0; text-align: start;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--band-head);
}
body.kind-home #how-it-works .pair:nth-of-type(4) dt strong { color: var(--band-accent); }
body.kind-home #how-it-works .pair:nth-of-type(5) dt strong { color: var(--band-down); }
#how-it-works .pair:nth-of-type(4) dd, #how-it-works .pair:nth-of-type(5) dd {
  position: relative; padding: 0 0.9rem 1.1rem; text-align: start;
  display: flex; flex-direction: column; align-items: flex-start;
}
#how-it-works .pair:nth-of-type(4) .note, #how-it-works .pair:nth-of-type(5) .note { order: -1; margin-block-end: 0.5rem; max-inline-size: 12.5rem; font-size: 0.75rem; }
#how-it-works .pair:nth-of-type(4) .fig, #how-it-works .pair:nth-of-type(5) .fig { font-size: 2.05rem; letter-spacing: -0.03em; }
#how-it-works .pair:nth-of-type(4) .fig { color: var(--band-accent); }
#how-it-works .pair:nth-of-type(5) .fig { color: var(--band-down); }
#how-it-works .pair:nth-of-type(4) .after, #how-it-works .pair:nth-of-type(5) .after {
  margin-block-start: 0.55rem; padding-block-start: 0.55rem; max-inline-size: 9.5rem;
  border-block-start: 1px solid color-mix(in srgb, var(--band-head) 22%, transparent);
}
#how-it-works dd .after + .after { margin-block-start: 0.5rem; padding-block-start: 0; border-block-start: 0; }
/* The chart stands at the card's bottom right at full strength, and the copy
   below the figure keeps to the left half so the two never meet. It takes its
   size from the card's height: from its width, a card twice as wide as it is
   tall drew a chart half as high again as the card. */
#how-it-works .pair:nth-of-type(4) dd::after, #how-it-works .pair:nth-of-type(5) dd::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-block-end: 0.35rem; inset-inline-end: 0.55rem;
  block-size: calc(100% - 0.6rem); inline-size: auto; aspect-ratio: 282 / 312;
  background: center/contain no-repeat;
}
#how-it-works .pair:nth-of-type(4) dd > *, #how-it-works .pair:nth-of-type(5) dd > * { position: relative; z-index: 1; }
#how-it-works .pair:nth-of-type(4) dd::after { background-image: url("/assets/icons/cfd-market-rise.svg"); }
#how-it-works .pair:nth-of-type(5) dd::after { background-image: url("/assets/icons/cfd-market-fall.svg"); }
/* Every step is the same plain white card, the outcomes included: the colour
   is carried by the figure and its percentage, not by an outline and a tinted
   fill. The rails and the fork are flat, without the glow. */
body.kind-home #how-it-works .pair:not(:nth-of-type(2)) {
  background-color: var(--surface); border: 1px solid var(--rule);
}
body.kind-home #how-it-works .pair:nth-of-type(2) dt {
  background-color: var(--surface);
  border-color: color-mix(in srgb, var(--band-accent) 45%, var(--surface));
}
body.kind-home #how-it-works .pair:nth-of-type(2)::before,
body.kind-home #how-it-works .pair:nth-of-type(2)::after,
body.kind-home #how-it-works .pair:nth-of-type(3)::after {
  background: color-mix(in srgb, var(--band-accent) 40%, var(--surface)); box-shadow: none;
}
/* Right to left, the example runs the other way: the fork leaves the position
   on the right, and each chart's bars keep to the edge away from the copy. */
/* Where the outcome cards are narrowest, the copy's column steps in so the
   chart in the corner keeps clear of its last lines. */
@media (min-width: 64rem) and (max-width: 71.99rem) {
  body.kind-home #how-it-works .pair:nth-of-type(4) .after, body.kind-home #how-it-works .pair:nth-of-type(5) .after { max-inline-size: 11rem; }
}
/* A term's tip: a small info button with a short explanation, opened by
   hover, keyboard focus or a tap (the button takes focus). The text is in
   the page and the mirrors either way; only its display waits. */
.tip { position: relative; display: inline-block; vertical-align: 0.1em; }
.tip-btn {
  display: inline-grid; place-items: center;
  inline-size: 1.05rem; block-size: 1.05rem; margin-inline-start: 0.2rem; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font: italic 700 0.7rem/1 var(--font-display); cursor: help;
}
.tip-btn:hover, .tip-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.tip-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tip-text {
  position: absolute; z-index: 5; inset-block-end: calc(100% + 0.45rem); inset-inline-start: 50%;
  translate: -50% 0; inline-size: max-content; max-inline-size: 15rem;
  padding: 0.5rem 0.7rem; border-radius: 8px;
  background: var(--ink); color: var(--surface);
  font-family: var(--font-text); font-size: 0.8rem; font-weight: 400; line-height: 1.4; text-align: start;
  white-space: normal; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
}
:root[dir="rtl"] .tip-text { translate: 50% 0; }
.tip:hover .tip-text, .tip:focus-within .tip-text { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .tip-text { transition: none; } }
/* On a phone the bubble hangs back from the button's end rather than centring
   on it: centred, it ran past the screen's right edge. */
@media (max-width: 47.99rem) {
  .tip-text, :root[dir="rtl"] .tip-text { inset-inline-start: auto; inset-inline-end: -0.6rem; translate: none; max-inline-size: min(15rem, 70vw); }
}

/* The worked example's controls, added by site.js: the margin and the
   leverage as sliders, each with its value read out in the example's own
   format. One plain card, like the steps above it. */
#how-it-works .calc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem;
  margin: 1.4rem 0 0; padding: 0.85rem 1.1rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
}
#how-it-works .calc-title { margin: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--ink); }
#how-it-works .calc-row { display: flex; align-items: center; gap: 0.7rem; }
#how-it-works .calc-label { font-size: 0.88rem; color: var(--ink-2); }
#how-it-works .calc input[type="range"] { inline-size: 12rem; accent-color: var(--fill); }
#how-it-works .calc-value { min-inline-size: 4.5rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
body.kind-home #how-it-works .calc-wipe { color: var(--loss); font-weight: 600; }
/* Below the wide layout the diagram is a tall column, so the controls go
   above it: under it, a phone had to scroll back up to see a figure move. */
@media (max-width: 63.99rem) {
  #how-it-works .deflist:has(.calc) { display: flex; flex-direction: column; }
  #how-it-works .calc { order: -1; margin-block: 1.2rem 0; }
}
@media (max-width: 47.99rem) {
  #how-it-works .calc-row { inline-size: 100%; }
  #how-it-works .calc input[type="range"] { flex: 1 1 auto; inline-size: auto; min-inline-size: 0; }
}
:root[dir="rtl"] #how-it-works dl::after,
:root[dir="rtl"] #how-it-works .pair:nth-of-type(4) dd::after,
:root[dir="rtl"] #how-it-works .pair:nth-of-type(5) dd::after { scale: -1 1; }

/* From 64rem the example reads left to right, as the reference for wide screens
   draws it, and the band keeps the height of one outcome pair rather than of
   six stacked cards. */
@media (min-width: 64rem) {
  #how-it-works .deflist { max-inline-size: none; }
  #how-it-works dl {
    grid-template-columns: minmax(0, 0.85fr) minmax(7.6rem, 0.5fr) minmax(0, 1.05fr) minmax(0, 1.6fr);
    grid-template-rows: auto auto auto; column-gap: 2.4rem; margin-block-start: 1.6rem;
  }
  /* Gives back the ground the outcome cards' lift (below) leaves at the foot.
     The selector outranks the home page's `margin-block: 0.95rem 0` on the dl. */
  body.kind-home article > #how-it-works dl { margin-block-end: -5rem; }
  /* The closing panel and the button move up into the ground the three cards
     leave under them, and sit side by side there. The section is a three
     column grid for that: the panel, the button, and a third column holding
     the width the outcome cards occupy above, so neither can run under them.
     The diagram spans all three, so none of this reaches it. */
  body.kind-home article > #how-it-works {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 34%);
    column-gap: 1.3rem;
  }
  body.kind-home article > #how-it-works > * { grid-column: 1 / -1; }
  /* The panel carries the action now, so it takes the ground the button used
     to occupy beside it; the third column still holds the width the outcome
     cards have above, so neither can run under them. */
  /* The panel closes the band across its whole width, the two lines on the
     left and the action on the right, level with them. */
  body.kind-home article > #how-it-works > .outro {
    grid-column: 1 / -1; max-inline-size: none; margin-inline: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 2rem;
    padding-block: 1.35rem; padding-inline-end: 3rem;
  }
  body.kind-home article > #how-it-works > .outro > p:not(.more) { grid-column: 1; max-inline-size: 46rem; }
  /* The action keeps to the panel's right, level with the two lines. */
  body.kind-home article > #how-it-works > .outro > .more {
    grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0;
  }
  /* The diagram gives back the ground the three cards leave under it, and the
     footer rises into it — panel and button together, so the two keep the
     alignment the grid gives them. Pulling the panel alone left the button
     where the row had put it, half a panel lower. */
  #how-it-works .deflist { margin-block-end: 0; }
  /* The outcome column starts level with the eyebrow, beside the heading
     rather than under it: the band was carrying the heading's height twice,
     once for the words and once again as empty ground to the right of them.
     The heading keeps to the width of the three cards so the two never meet. */
  body.kind-home article > #how-it-works > .kicker,
  body.kind-home article > #how-it-works > h2,
  body.kind-home article > #how-it-works > p:not(.more) { max-inline-size: 34rem; }
  /* The outcome column is pulled up beside the heading rather than starting
     under it. 7rem — the eyebrow, the heading and two lines of intro — put it
     18px below the band's top edge against 84px above its bottom one, so the
     column read as hanging from the top. 5rem centres it: ~50px at each end.
     The intro is capped rather than left to the column so it wraps to two
     lines at every desktop width and the pull stays exact. */
  /* The lift is a translate, not a negative margin, so the card keeps its full
     height in the grid and the fall card's row starts where it ends. With a
     margin, the fall card's place depended on how tall the three cards beside
     them were, and on a very wide screen, where their copy stops wrapping,
     the two outcome cards overlapped (4px at 1280, 21px from 1855). */
  #how-it-works .pair:nth-of-type(4) { align-self: start; translate: 0 -5rem; }
  /* The three cards sit on the first outcome's line rather than midway down
     the pair: centred against both, they left the top of the band empty on the
     left while the outcomes started under the intro. The fork is drawn to
     match — it leaves the position where the position now is. */
  #how-it-works .pair:nth-of-type(1) { grid-column: 1; grid-row: 1; align-self: center; justify-self: stretch; inline-size: auto; margin: 0; }
  #how-it-works .pair:nth-of-type(2) { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; inline-size: auto; margin: 0; }
  #how-it-works .pair:nth-of-type(3) { grid-column: 3; grid-row: 1; align-self: center; justify-self: stretch; inline-size: auto; margin: 0; }
  /* The rise card spans the three cards' row and the one after it, so those
     rows always reach its foot, and the fall card's own row starts there, at
     every width. The fall card takes the same lift and sits 1.9rem below,
     the gap the medium layout already had. */
  #how-it-works .pair:nth-of-type(4) { grid-column: 4; grid-row: 1 / 3; }
  #how-it-works .pair:nth-of-type(5) { grid-column: 4; grid-row: 3; align-self: start; margin-block-start: 1.9rem; translate: 0 -5rem; }
  /* The note hangs under the pill without moving the pill off the line. */
  #how-it-works .pair:nth-of-type(2) dd {
    position: absolute; inset-block-start: 100%; inset-inline: -1.5rem;
    margin-block-start: 0.7rem; max-inline-size: none; text-align: center;
  }
  /* The rails: a short bar each side of the pill, fading at both ends, as the
     reference draws them — not a line running from card to card. */
  #how-it-works .pair:nth-of-type(3)::after { display: none; }
  #how-it-works .pair:nth-of-type(2)::before, #how-it-works .pair:nth-of-type(2)::after {
    content: ""; position: absolute;
    inset-block: calc(50% - 3.5px) auto; inline-size: 2.3rem; block-size: 7px;
    translate: none; border-radius: 999px; box-shadow: none;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--band-accent) 14%, transparent),
      color-mix(in srgb, var(--band-accent) 92%, transparent) 50%,
      color-mix(in srgb, var(--band-accent) 14%, transparent));
  }
  #how-it-works .pair:nth-of-type(2)::before { inset-inline-end: calc(100% + 0.45rem); inset-inline-start: auto; }
  #how-it-works .pair:nth-of-type(2)::after { inset-inline-start: calc(100% + 0.45rem); }
  /* The exposure's copy goes back under its figure behind a rule across the
     card, which is where the wide reference puts it. */
  #how-it-works .pair:nth-of-type(3) .note { margin-block-start: 0.7rem; padding-block-start: 0.55rem; }
  /* The reference gives the first two cards more height than their content
     needs, so the row of three does not read as a thin line beside the pair. */
  #how-it-works .pair:nth-of-type(1) dt, #how-it-works .pair:nth-of-type(3) dt { padding-block-start: 1.5rem; }
  #how-it-works .pair:nth-of-type(1) dd, #how-it-works .pair:nth-of-type(3) dd { padding-block-end: 1.6rem; }
  /* A tighter scale on a wide screen, so the band is the height of the flow
     and no more: the outcome cards carry five lines apiece and at the narrow
     layout's sizes they were 220px each. */
  #how-it-works .pair:nth-of-type(4) dt, #how-it-works .pair:nth-of-type(5) dt { padding: 0.75rem 0.85rem 0; font-size: 0.92rem; }
  #how-it-works .pair:nth-of-type(4) dd, #how-it-works .pair:nth-of-type(5) dd { padding: 0 0.85rem 0.85rem; }
  #how-it-works .pair:nth-of-type(4) .fig, #how-it-works .pair:nth-of-type(5) .fig { font-size: 1.75rem; }
  /* Wide enough that each of the three lines stays one line: the chart is only
     as wide as it is tall, so the copy has the rest of the card. Two-line wraps
     were what made the cards tall. */
  #how-it-works .pair:nth-of-type(4) .note, #how-it-works .pair:nth-of-type(5) .note { font-size: 0.75rem; margin-block-end: 0.35rem; max-inline-size: 18rem; }
  #how-it-works .pair:nth-of-type(4) .after, #how-it-works .pair:nth-of-type(5) .after { font-size: 0.75rem; margin-block-start: 0.45rem; padding-block-start: 0.45rem; max-inline-size: 14rem; }
  #how-it-works .pair:nth-of-type(1) .fig, #how-it-works .pair:nth-of-type(3) .fig { font-size: 1.4rem; }
  #how-it-works .pair:nth-of-type(1) dt, #how-it-works .pair:nth-of-type(3) dt { padding-block-start: 1.2rem; }
  #how-it-works .pair:nth-of-type(1) dd, #how-it-works .pair:nth-of-type(3) dd { padding-block-end: 1.3rem; }
  /* The band gives back what it was not using: its own padding, the space
     above the diagram, and the gaps around the closing panel and the button.
     Measured before this at 1637: 27px of padding each side, 15 above the
     diagram, 19 before the panel and 18 before the button. */
  body.kind-home article > #how-it-works { padding-block: 0.75rem 1.25rem; }
  body.kind-home article > #how-it-works > .kicker { margin-block: 0 0.25rem; }
  body.kind-home article > #how-it-works > h2 { margin-block-end: 0.15rem; }
  body.kind-home article > #how-it-works > p { margin-block: 0.2rem 0.2rem; }
  #how-it-works dl { margin-block-start: 0.2rem; }
  body.kind-home article > #how-it-works .more { margin-block-start: 0.75rem; }
  /* and each outcome card gives back a little of its own spacing */
  #how-it-works .pair:nth-of-type(4) dt, #how-it-works .pair:nth-of-type(5) dt { padding-block-start: 0.6rem; }
  #how-it-works .pair:nth-of-type(4) dd, #how-it-works .pair:nth-of-type(5) dd { padding-block-end: 0.7rem; }
  #how-it-works .pair:nth-of-type(4) .note, #how-it-works .pair:nth-of-type(5) .note { margin-block-end: 0.3rem; }
  #how-it-works .pair:nth-of-type(4) .after, #how-it-works .pair:nth-of-type(5) .after { margin-block-start: 0.4rem; padding-block-start: 0.4rem; }
  /* The chart sits in the space its card leaves it rather than against the
     edge, which is what lets the card be this narrow without the two meeting. */
  #how-it-works .pair:nth-of-type(4) dd::after, #how-it-works .pair:nth-of-type(5) dd::after { inset-inline-end: 1.6rem; }
  /* The fork leaves the position on the centre line and arrives at each card's
     own; it is drawn for this span rather than the narrow one. */
  #how-it-works dl::after {
    grid-column: 4; grid-row: 1 / 4; align-self: stretch; justify-self: start;
    margin-block: -7rem 5rem; margin-inline: -2.4rem 0; inline-size: 2.4rem; block-size: auto; max-block-size: none;
    aspect-ratio: auto;
    background-image: url("/assets/icons/cfd-branch-wide.svg"); background-size: 100% 100%;
  }
}

/* Past 80rem the outcome cards had more width than their contents use: the
   copy is 232px and the chart is only as wide as it is tall, which left a gap
   in the middle of each card. The surplus goes to the three cards on the left
   instead. Below this the outcome column needs all of it. */
@media (min-width: 80rem) {
  #how-it-works dl {
    grid-template-columns: minmax(0, 1fr) minmax(7.6rem, 0.5fr) minmax(0, 1.15fr) minmax(0, 1.35fr);
  }
}

/* Below 30rem the two outcome cards have no room side by side: each carries a
   sentence, a figure and the arithmetic under it. Stacked, the fork would point
   at nothing, so each card takes the line instead, in its own colour. */
@media (max-width: 29.99rem) {
  #how-it-works .pair:nth-of-type(4), #how-it-works .pair:nth-of-type(5) { grid-column: 1 / -1; }
  #how-it-works .pair:nth-of-type(5) { grid-row: 6; margin-block-start: 2rem; }
  #how-it-works dl::after { display: none; }
  #how-it-works .pair:nth-of-type(4) { margin-block-start: 2rem; }
  #how-it-works .pair:nth-of-type(4)::before, #how-it-works .pair:nth-of-type(5)::before {
    content: ""; position: absolute; inset-block-start: -2rem; inset-inline-start: 50%;
    translate: -50% 0; inline-size: 2px; block-size: 2rem;
  }
  #how-it-works .pair:nth-of-type(4)::before { background: linear-gradient(color-mix(in srgb, var(--band-accent) 25%, transparent), var(--band-accent)); }
  #how-it-works .pair:nth-of-type(5)::before { background: linear-gradient(color-mix(in srgb, var(--band-down) 25%, transparent), var(--band-down)); }
}

/* ------------------------------------------------------------ home: compare providers */
/* Three columns: the claim and its button, the six points, then the standing
   note about sourcing and paid placements. */
#compare-providers-band ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.6rem 1.4rem; }
#compare-providers-band li { margin: 0; position: relative; padding-inline-start: 2.3rem; font-size: 0.87rem; line-height: 1.7rem; }
#compare-providers-band li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: -0.2rem;
  inline-size: 1.7rem; block-size: 1.7rem; border-radius: 8px;
  background: var(--icon-tile) center/1.15rem 1.15rem no-repeat;
}
#compare-providers-band li:nth-child(1)::before { background-image: url("/assets/icons/compare-regulation.svg"); }
#compare-providers-band li:nth-child(2)::before { background-image: url("/assets/icons/compare-markets.svg"); }
#compare-providers-band li:nth-child(3)::before { background-image: url("/assets/icons/compare-conditions.svg"); }
#compare-providers-band li:nth-child(4)::before { background-image: url("/assets/icons/compare-platforms.svg"); }
#compare-providers-band li:nth-child(5)::before { background-image: url("/assets/icons/compare-payments.svg"); }
#compare-providers-band li:nth-child(6)::before { background-image: url("/assets/icons/compare-country.svg"); }
@media (min-width: 60rem) {
  body.kind-home article > #compare-providers-band {
    /* Two columns: the standing note that took a third was removed on
       2026-10-18, and the list takes its room. */
    display: grid; grid-template-columns: minmax(0, 19.5rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 1.75rem; align-items: start;
  }
  body.kind-home article > #compare-providers-band > * { grid-column: 1; }
  body.kind-home article > #compare-providers-band > ul { grid-column: 2; grid-row: 1 / -1; align-self: start; min-inline-size: 0; }
  /* Three across, two deep, held to a width where the items still read as
     one list rather than drifting to the far edge. */
  #compare-providers-band ul { grid-template-columns: repeat(3, minmax(0, 1fr)); max-inline-size: 46rem; }
}


/* ------------------------------------------------------------ home: the risk band */
@media (min-width: 60rem) {
  body.kind-home article > #most-accounts-lose {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr; column-gap: 2rem; align-items: start;
  }
  body.kind-home article > #most-accounts-lose > * { grid-column: 1; max-inline-size: 40rem; }
  body.kind-home article > #most-accounts-lose > .more { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; max-inline-size: none; }
}

/* ------------------------------------------------------------ home: the reference's scale */
/* Measured off the mock at 1024px: the eyebrow is 7px of cap height, the
   heading 19px, a card's name 16px and its sentence 13px on 19px leading. */
body.kind-home article > .block > .kicker {
  margin: 0 0 0.45rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
}
body.kind-home article > .block > h2 {
  margin: 0; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.015em;
}
body.kind-home article > .block > h2 + p { margin-block-start: 0.55rem; }
body.kind-home article > .block > .basis { margin-block: 0.35rem 0; }
body.kind-home .cardgrid, body.kind-home .cardrow, body.kind-home .pagelist-cats,
body.kind-home ol.steps, body.kind-home #compare-providers-band ul, body.kind-home #how-it-works dl {
  margin-block-start: 0.95rem;
}
body.kind-home article > .block > .more { margin-block-start: 0.95rem; }

/* A card, to the mock's 164px: 16px of padding, a 34px mark, then the name,
   two lines and the link. */
.cardgrid > li { padding: 1.05rem 1.15rem 1.1rem; border-radius: 14px; }
.cardgrid > li > a { font-size: 1.02rem; }
.cardgrid .blurb { margin-block-start: 0.3rem; font-size: 0.885rem; line-height: 1.45; }
.cardgrid .cta { margin-block-start: 0.75rem; font-size: 0.84rem; font-weight: 500; }
.cardgrid { gap: 0.85rem; }

/* A button, to the mock's 35px. */
body.kind-home #how-it-works .more a,
body.kind-home #compare-providers-band .more a,
body.kind-home #most-accounts-lose .more a,
body.kind-home #follow-the-fundamentals .more a,
body.kind-home .lead p:last-child a { padding: 0.62rem 1.1rem; font-size: 0.88rem; }

/* The reference's vertical rhythm inside a band: the eyebrow, 10px, the
   heading, 15px, then the content. A paragraph's default margins were adding
   another 26px at each of those joints. */
body.kind-home article > .block > p { margin-block: 0; }
body.kind-home article > .block > h2 + p,
body.kind-home article > .block > .basis { margin-block-start: 0.5rem; }
body.kind-home article > .block > p + p { margin-block-start: 0.6rem; }
body.kind-home .cardgrid, body.kind-home .cardrow, body.kind-home .pagelist-cats,
body.kind-home ol.steps, body.kind-home #compare-providers-band ul, body.kind-home #how-it-works dl {
  margin-block: 0.95rem 0;
}
body.kind-home article > .block > .more { margin-block: 0.95rem 0; }
body.kind-home #how-it-works > .basis { font-size: 0.78rem; }

/* Column widths measured off the mock: 336px of text, 360px of points, 168px
   of standing note at its own 1024px. */
@media (min-width: 60rem) {
  body.kind-home article > #how-it-works > .more { margin-block-start: 1rem; }
  body.kind-home article > #compare-providers-band > .more { margin-block-start: 1.2rem; }
}

/* ------------------------------------------------------------ the supplied illustrations */
/* The risk band's ridge line, drawn to bleed off the right edge behind the
   text. Decoration: the band says everything it has to say in words. */
body.kind-home article > #most-accounts-lose { position: relative; overflow: clip; isolation: isolate; }
body.kind-home article > #most-accounts-lose::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* The box is the artwork: full band height, and a width the range's own
     proportions give it. Sized to a share of the band instead, the range stood
     at four fifths of the height because the file carried a fifth of its own
     canvas as empty sky above and below the peaks. That padding is now out of
     the viewBox, so a box this shape holds the range edge to edge, and the
     fade below runs across the range rather than across empty space. */
  inset-block: 0 auto; aspect-ratio: 645 / 313;
  /* 130 % of the band, or as much more as it takes for the range to reach the
     page edge while its centre stays on the button: with the centre fixed at
     the button, the corner is reached when the range is twice as wide as the
     gap between them. 313/645 turns that width back into a height. The ceiling
     holds to about 2050px, where the visible slice is already down to a third
     of the range; past that the range keeps this size and gives up the corner,
     because a slice much thinner than that stops reading as a mountain. */
  block-size: 130%;
  /* Wide enough to reach the page edge with its centre on the button: twice
     the gap between the two. Below that the range keeps its own proportions
     and overshoots the edge, which is the narrower desktop widths; above it
     the range is drawn wider than it is tall, because the alternative — more
     height — crops the feet so far up that the lower slopes never reach the
     edge and the range stops short of the corner. */
  min-inline-size: calc((var(--gut) + 6.2rem) * 2);
  /* Centred on the button at every width. The button sits at the content's
     right edge, which the band does not follow — the band is full-bleed — so
     anchoring the range to the page corner instead drifted it off the button
     as the screen widened. 6.2rem is half the button's width, and translate
     turns the offset into the range's centre line rather than its right edge.
     A longer label in another edition shifts the centre by half the change. */
  inset-inline-end: calc(var(--gut) + 6.2rem); translate: 50% 0;
  background: url("/assets/icons/risk-mountain.svg") center / 100% 100% no-repeat;
  /* A backdrop, not a subject: the reference's range is barely separated from
     its ground, and this one is flat vector with harder caps. */
  opacity: 0.45;
  -webkit-mask: linear-gradient(to right, transparent, black 45%);
  mask: linear-gradient(to right, transparent, black 45%);
}
/* The button carries its own ground so its label never depends on what the
   artwork happens to put behind it. */
body.kind-home #most-accounts-lose .more a {
  background: color-mix(in srgb, var(--band-dark) 87%, transparent);
}
:root[dir="rtl"] body.kind-home article > #most-accounts-lose::after { translate: -50% 0; scale: -1 1; }
/* On a phone the range stops being a backdrop and becomes an object the words
   go round: a float carrying the artwork, with shape-outside reading the
   silhouette out of the file's own alpha, so the lines break to the ridge
   rather than running across it. The float has to lead the section's content,
   which is why this is ::before — a float only pushes what follows it. */
@media (max-width: 47.99rem) {
  body.kind-home article > #most-accounts-lose::after { display: none; }
  body.kind-home article > #most-accounts-lose::before {
    content: ""; float: inline-end;
    inline-size: 47%; aspect-ratio: 645 / 313;
    margin-block-start: 1.6rem; margin-inline-start: 0.55rem;
    margin-inline-end: calc(-1 * var(--gut));
    background: url("/assets/icons/risk-mountain.svg") center / 100% 100% no-repeat;
    shape-outside: url("/assets/icons/risk-mountain.svg");
    shape-margin: 0.35rem;
    opacity: 0.5;
  }
  :root[dir="rtl"] body.kind-home article > #most-accounts-lose::before { scale: -1 1; }
}

/* Below the band's own breakpoint the copy runs four or five lines and the
   button drops under it, so a range sized to that height stands behind the
   heading. There it sits on the horizon instead, and lighter. */
@media (max-width: 59.99rem) {
  body.kind-home article > #most-accounts-lose::after {
    inset-block: auto 0; block-size: 68%; min-inline-size: 0; opacity: 0.34;
    /* No button column below the band's own breakpoint, so nothing to centre
       on: the range runs to the page corner instead. */
    inset-inline-end: -1.05rem; translate: none;
  }
}


/* The hand-lettered aside, set against the mascot. */
@media (min-width: 64rem) {
  body.kind-home .hero-chips::after {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    /* Where the reference puts it: a block 89 by 87px, its right edge 31px
       past the content's right edge, sitting under the Strategy chip and clear
       of the mascot's shoulder. It was half as tall and a third higher. */
    inset-block-start: 13.6rem; inset-inline-end: -1.95rem;
    inline-size: 5.6rem; block-size: 5.4rem;
    background: url("/assets/icons/handwritten-annotation.svg") center/contain no-repeat;
  }
  :root[dir="rtl"] body.kind-home .hero-chips::after { display: none; }
}

/* ------------------------------------------------------------ home: the learning path */
/* The lessons on one card, each behind a numbered disc, joined left to right
   by a hairline so the row reads as a path rather than separate links.
   The ordinal is drawn from data-step and the arrow is masked artwork, so the
   only text an agent reads is the lesson's name and its reading time — and
   that time is the linked page's own word count, not a typed figure. */
body.kind-home #follow-the-fundamentals .path-meta {
  margin-block: 0.75rem 0; color: var(--ink-2);
  font-size: 0.76rem; font-weight: 700; font-variant-numeric: lining-nums;
}
body.kind-home #follow-the-fundamentals ol.path {
  list-style: none; margin: 1rem 0 0; padding: 1.15rem 0.6rem 1rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
  /* Steps are squares, not bands: the column takes the width the reference
     gives it and the label wraps, rather than the columns stretching to the
     shell. One column per lesson, however many there are: a fixed count of
     five pushed a sixth lesson onto a second row, and the fifth step's
     hairline ran past the card towards it. The card shrinks to the row it
     holds, and the tracks give way on a narrow window before the vertical
     layout takes over. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 11.5rem);
  inline-size: fit-content; max-inline-size: 100%; margin-inline: auto;
}
body.kind-home #follow-the-fundamentals ol.path > li {
  position: relative; min-inline-size: 0; margin: 0;
  padding: 2.9rem 0.9rem 0.6rem;
  border-radius: 13px;
  transition: background-color 0.18s ease;
}
/* The step lights up under the pointer, as the reference has it. Hover only:
   the card is not itself a control, the lesson's name is. */
body.kind-home #follow-the-fundamentals ol.path > li:hover {
  background-color: color-mix(in srgb, var(--chip-on) 26%, var(--surface));
}
@media (prefers-reduced-motion: reduce) {
  body.kind-home #follow-the-fundamentals ol.path > li { transition: none; }
}
/* The disc, and the hairline that reaches the next one. Drawn from this item
   rather than between items, so the line cannot detach from the circles. */
body.kind-home #follow-the-fundamentals ol.path > li::before {
  content: attr(data-step);
  position: absolute; inset-block-start: 0; inset-inline-start: 0.9rem;
  display: grid; place-items: center;
  inline-size: 2.3rem; block-size: 2.3rem; border-radius: 999px;
  background: var(--surface); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--surface));
  font-size: 0.78rem; font-weight: 700; font-variant-numeric: lining-nums;
  z-index: 1;
}
body.kind-home #follow-the-fundamentals ol.path > li:first-child::before {
  background: var(--fill); color: var(--on-primary); border-color: var(--fill);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 12%, transparent);
}
body.kind-home #follow-the-fundamentals ol.path > li:not(:last-child)::after {
  content: ""; position: absolute;
  inset-block-start: 1.15rem; inset-inline-start: 3.2rem; inset-inline-end: -0.9rem;
  block-size: 1px; background: color-mix(in srgb, var(--brand) 30%, var(--surface));
}
body.kind-home #follow-the-fundamentals ol.path .step-link a {
  font-family: var(--font-display); font-size: 0.88rem; font-weight: 700;
  line-height: 1.3; color: var(--ink); text-decoration: none;
  text-wrap: balance;
  /* A long single word ("Risikomanagement") breaks at a hyphen, not at
     whatever letter meets the column edge. */
  hyphens: auto;
}
body.kind-home #follow-the-fundamentals ol.path .step-link a:hover { color: var(--accent); }
body.kind-home #follow-the-fundamentals ol.path .step-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-block-start: 0.7rem; color: var(--ink-2);
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: lining-nums;
}
body.kind-home #follow-the-fundamentals ol.path .arrow {
  inline-size: 0.78rem; block-size: 0.78rem; flex: 0 0 auto;
  background: var(--brand);
  -webkit-mask: url("/assets/icons/arrow-right.svg") center/contain no-repeat;
  mask: url("/assets/icons/arrow-right.svg") center/contain no-repeat;
}
:root[dir="rtl"] body.kind-home #follow-the-fundamentals ol.path .arrow { scale: -1 1; }

/* Below room for one row of six: the row becomes one continuous descent,
   each lesson its own card beside the disc, the hairline running down
   between the discs. Rows of three in a small floating card left wide
   margins and the arrows far from the names on medium screens (operator,
   2026-10-18), so medium screens take the phone layout, in two columns. */
@media (max-width: 77.49rem) {
  body.kind-home #follow-the-fundamentals ol.path {
    display: block; padding: 0; background: none; border: 0; box-shadow: none;
    /* Each lesson is its own card here, so the list takes the full column. */
    inline-size: auto;
  }
  body.kind-home #follow-the-fundamentals ol.path > li,
  body.kind-home #follow-the-fundamentals ol.path > li:hover {
    display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: 0.85rem; padding: 0; margin-block-end: 0.75rem;
    background: none; border-radius: 0;
  }
  body.kind-home #follow-the-fundamentals ol.path > li::before {
    position: static; inline-size: 2.6rem; block-size: 2.6rem;
    grid-row: 1 / span 2; align-self: start;
  }
  body.kind-home #follow-the-fundamentals ol.path > li:not(:last-child)::after {
    inset-block-start: 2.6rem; inset-block-end: -0.75rem;
    inset-inline-start: 1.3rem; inset-inline-end: auto;
    inline-size: 1px; block-size: auto;
  }
  body.kind-home #follow-the-fundamentals ol.path .step-link,
  body.kind-home #follow-the-fundamentals ol.path .step-foot {
    background: var(--surface); border: 1px solid var(--rule);
  }
  body.kind-home #follow-the-fundamentals ol.path .step-link {
    padding: 0.7rem 0.9rem 0.15rem; border-block-end: 0;
    border-start-start-radius: 13px; border-start-end-radius: 13px;
  }
  body.kind-home #follow-the-fundamentals ol.path .step-foot {
    margin-block-start: 0; padding: 0.35rem 0.9rem 0.6rem; border-block-start: 0;
    border-end-start-radius: 13px; border-end-end-radius: 13px;
  }
  body.kind-home #follow-the-fundamentals ol.path > li:first-child .step-link,
  body.kind-home #follow-the-fundamentals ol.path > li:first-child .step-foot {
    background: color-mix(in srgb, var(--chip-on) 30%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 22%, var(--surface));
  }
}
/* Medium: the descent in two columns, the first half of the lessons down the
   start column and the rest down the other, so the list is half as tall. The
   hairline stops at the foot of each column. */
@media (min-width: 48rem) and (max-width: 77.49rem) {
  body.kind-home #follow-the-fundamentals ol.path {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto); grid-auto-flow: column;
    column-gap: 1.5rem;
  }
  body.kind-home #follow-the-fundamentals ol.path > li:nth-child(3)::after { content: none; }
  /* Full width under the heading and the button, not centred at the width of
     its content: the wide layout's auto margins would win over stretch. One
     element more than the centring rule below, which comes later in the file. */
  body.kind-home main article > #follow-the-fundamentals > ol.path { justify-self: stretch; margin-inline: 0; }
}
@media (max-width: 47.99rem) {
  /* The action closes the column at the width of the cards above it, as the
     reference has it, rather than sitting small under the last card. */
  body.kind-home #follow-the-fundamentals .more { margin-block-start: 1.35rem; }
  body.kind-home #follow-the-fundamentals .more a {
    display: flex; inline-size: 100%; justify-content: center;
    padding-block: 0.85rem; font-size: 0.95rem;
  }
}
body.kind-home #follow-the-fundamentals .more { margin-block-start: 1.1rem; }
@media (min-width: 60rem) {
  /* The button sits beside the heading, as the reference has it, and the card
     runs the full width beneath both. */
  body.kind-home article > #follow-the-fundamentals {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.75rem; align-items: start;
  }
  body.kind-home article > #follow-the-fundamentals > * { grid-column: 1; }
  /* Centred under the heading and the button, not left under the text. */
  body.kind-home article > #follow-the-fundamentals > ol.path { grid-column: 1 / -1; justify-self: center; }
  body.kind-home article > #follow-the-fundamentals > .more {
    grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: end;
    margin-block: 0;
  }
}

/* The home page carries the basis declaration as data on the section and in
   the Markdown and JSON representations, not as a line of its own: the
   reference has none, and the figures beside it are plainly a diagram. */
body.kind-home article > .block > .basis { display: none; }

/* The closing lines belong under the diagram, not under the column beside it,
   so both live in the .deflist wrapper: a sub-heading and a smaller line,
   centred, exactly as the reference closes the band. */
/* One box, not two stacked halves: the panel now holds the action as well, so
   the ground, the outline and the mark belong to the panel itself. */
#how-it-works > .outro {
  position: relative;
  /* Logical, so the mark's room is at the inline start in Arabic too: as a
     physical left padding the mark sat on the first line of the copy. */
  margin-block-start: 1.2rem; padding-block: 0.95rem 1rem; padding-inline: 5.15rem 0.95rem;
  background-color: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
/* The mark sits on the panel's centre line, with a hairline between it and
   the words — the mock's arrangement, drawn from the band's own ink. */
#how-it-works > .outro::before {
  content: ""; position: absolute; inset-inline-start: 1.1rem;
  inset-block-start: 50%; translate: 0 -50%;
  inline-size: 2.6rem; block-size: 2.6rem;
  background: url("/assets/icons/cfd-alert-plain.svg") center/contain no-repeat;
}
#how-it-works > .outro::after {
  content: ""; position: absolute; inset-inline-start: 4.35rem;
  inset-block-start: 50%; translate: 0 -50%;
  inline-size: 1px; block-size: 3.1rem;
  background: color-mix(in srgb, var(--band-head) 16%, transparent);
}
/* Narrow: the mark returns to the first line and the hairline goes, or the
   panel would carry a 5rem indent across a 390px column. */
@media (max-width: 47.99rem) {
  #how-it-works > .outro { padding-inline-start: 3.6rem; }
  #how-it-works > .outro::before {
    inline-size: 2.1rem; block-size: 2.1rem;
    inset-block-start: 1rem; translate: none; inset-inline-start: 0.85rem;
  }
  #how-it-works > .outro::after { display: none; }
}
#how-it-works > .outro > p:not(.more):nth-of-type(1) {
  margin: 0;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  color: var(--band-head);
}
#how-it-works > .outro > p:not(.more):nth-of-type(2) {
  margin: 0.25rem 0 0;
  font-size: 0.78rem; line-height: 1.5;
  color: color-mix(in srgb, var(--band-ink) 85%, var(--band-dark));
}
/* The action closes the panel from its own corner. */
body.kind-home article > #how-it-works > .outro > .more {
  margin: 0.85rem 0 0; text-align: end;
}

/* The icon tile takes its card's hue, as the reference does, and carries no
   outline. The neutral --icon-tile stays for every other use of the set. */
.cardgrid > li:nth-child(4n+1)::before { background-color: var(--tile-1); }
.cardgrid > li:nth-child(4n+2)::before { background-color: var(--tile-2); }
.cardgrid > li:nth-child(4n+3)::before { background-color: var(--tile-3); }
.cardgrid > li:nth-child(4n+4)::before { background-color: var(--tile-4); }

/* The eyebrow is muted slate in the reference, not the accent, and the onward
   link beside the heading is regular weight at 13px rather than bold at 15. */
body.kind-home article > .block > .kicker { color: var(--ink-2); font-size: 0.75rem; letter-spacing: 0.12em; }
body.kind-home article > .block > .more { font-size: 0.82rem; font-weight: 500; }
body.kind-home article > .block > .more a::after { inline-size: 0.95rem; block-size: 0.95rem; }

/* Open, the menu is the page's subject: everything behind it dims and stays
   put, so the panel reads as a layer rather than as more masthead. The bar
   keeps its own ground — it carries the close control. Script-only, because
   the scrim would otherwise be a dead layer over a menu that cannot close. */
:root.menu-open body { overflow: hidden; }
:root.menu-open body::after {
  content: ""; position: fixed; inset: 0; z-index: 2;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
}

/* The menu's search form is the no-script fallback; with the overlay running,
   the masthead's magnifier does the same job from the bar, so the form goes
   rather than sitting in the menu as a second control. */
:root.search-js .menu-body .search { display: none; }

/* ------------------------------------------------------------ search overlay */
/* Built by site.js when the masthead's search control is used; nothing here
   is in the HTML a fetch tool takes. The control itself stays a link to the
   site index, so the index remains the page an agent finds and the page a
   reader without this script lands on. Artwork is the shipped icon set on its
   own light tile, as everywhere else. */
:root.search-open, :root.search-open body { overflow: hidden; }
/* The masthead stays where it is and the overlay begins beneath it, so a
   reader keeps the site's own navigation while searching. */
:root.search-open .masthead { position: relative; z-index: 60; background: var(--surface); }
.search-icon.on { background: var(--chip-on); color: var(--accent); border-radius: 999px; }
.search-overlay {
  position: fixed; inset: var(--so-top, 0) 0 0 0; z-index: 50;
  background: var(--surface);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem max(1.5rem, calc((100vw - var(--shell)) / 2 + 1.5rem)) 3rem;
}
.so-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
  align-items: start; column-gap: 2.5rem; padding-block-start: 0.5rem;
}
.so-left { min-inline-size: 0; }
/* the field */
.so-field {
  position: relative; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 0.15rem 0.75rem 0.15rem 2.6rem; min-block-size: 3rem;
}
.so-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.so-magnifier {
  inline-size: 1.05rem; block-size: 1.05rem; flex: 0 0 auto; background: var(--ink-2);
  -webkit-mask: url("/assets/icons/nav-search.svg") center/contain no-repeat;
  mask: url("/assets/icons/nav-search.svg") center/contain no-repeat;
}
.so-field > .so-magnifier { position: absolute; inset-inline-start: 0.9rem; }
.so-input {
  flex: 1 1 auto; min-inline-size: 0; border: 0; background: none;
  font: inherit; font-size: 1rem; color: var(--ink); padding-block: 0.6rem;
}
.so-input:focus { outline: none; }
.so-input::-webkit-search-cancel-button { display: none; }
.so-clear {
  inline-size: 1.3rem; block-size: 1.3rem; flex: 0 0 auto; border: 0; padding: 0;
  border-radius: 999px; background: var(--paper-2); cursor: pointer; position: relative;
}
.so-clear::before {
  content: ""; position: absolute; inset: 0.3rem; background: var(--ink-2);
  -webkit-mask: url("/assets/icons/nav-close.svg") center/contain no-repeat;
  mask: url("/assets/icons/nav-close.svg") center/contain no-repeat;
}
.so-clear:hover { background: var(--rule); }
/* popular searches */
.so-popular-label { margin: 0.55rem 0 0.7rem; font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.so-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.so-chips button {
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 0.5rem 0.95rem; background: var(--paper-2); color: var(--ink);
  font: inherit; font-size: 0.82rem; font-weight: 600;
}
.so-chips button:hover { background: var(--chip-on); color: var(--chip-on-ink); }
.so-chips button.on { background: var(--chip-on); color: var(--chip-on-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent); }
/* close */
.so-close {
  justify-self: end; display: grid; justify-items: center; gap: 0.15rem;
  border: 0; background: none; cursor: pointer; padding: 0.2rem; color: var(--ink-2);
}
.so-close-x {
  inline-size: 1.15rem; block-size: 1.15rem; background: currentColor;
  -webkit-mask: url("/assets/icons/nav-close.svg") center/contain no-repeat;
  mask: url("/assets/icons/nav-close.svg") center/contain no-repeat;
}
.so-close-esc { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.so-close:hover { color: var(--ink); }
/* suggestions */
.so-suggest {
  list-style: none; margin: 0.55rem 0 0; padding: 0.4rem 0;
  inline-size: 100%;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: var(--shadow);
}
.so-suggest button {
  inline-size: 100%; display: flex; align-items: center; gap: 0.7rem;
  border: 0; background: none; cursor: pointer; text-align: start;
  padding: 0.5rem 1rem; font: inherit; font-size: 0.92rem; color: var(--ink);
}
.so-suggest li:first-child button { background: color-mix(in srgb, var(--chip-on) 45%, var(--surface)); }
.so-suggest button:hover { background: var(--paper-2); }
/* results */
.so-results { margin-block-start: 1.6rem; }
.so-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.so-results-title { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.so-q { color: var(--accent); }
.so-count { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--ink-2); }
.so-sort { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--ink-2); }
.so-sort select {
  font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 8px; padding: 0.45rem 0.7rem;
}
.so-filter-toggle { display: none; }
.so-body { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.75rem; margin-block-start: 1.1rem; align-items: start; }
.so-filters {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 0.9rem 1rem;
}
.so-filter-box + .so-filter-box { margin-block-start: 1.1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--rule); }
.so-filter-label { margin: 0 0 0.55rem; font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.so-types, .so-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.so-types button {
  inline-size: 100%; text-align: start; border: 0; cursor: pointer; background: none;
  border-radius: 6px; padding: 0.4rem 0.55rem; font: inherit; font-size: 0.82rem; color: var(--ink-2);
}
.so-types button:hover { background: var(--paper-2); color: var(--ink); }
.so-types button.on { background: color-mix(in srgb, var(--chip-on) 55%, var(--surface)); color: var(--accent); font-weight: 700; }
.so-topics label { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.55rem; font-size: 0.82rem; color: var(--ink-2); cursor: pointer; }
.so-topics input { accent-color: var(--brand); inline-size: 0.95rem; block-size: 0.95rem; }
.so-list { list-style: none; margin: 0; padding: 0; }
.so-list > li + li { border-block-start: 1px solid var(--rule); }
.so-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 1rem; padding: 1.05rem 0.5rem; text-decoration: none; border-radius: 10px;
}
.so-row:hover { background: var(--paper-2); }
.so-thumb {
  inline-size: 3.5rem; block-size: 2.75rem; border-radius: 8px; flex: 0 0 auto;
  background-color: var(--icon-tile); background-repeat: no-repeat;
  background-position: center; background-size: 1.5rem;
}
.so-thumb.kind-article { background-image: url("/assets/icons/learn-cfd.svg"); }
.so-thumb.kind-comparison { background-image: url("/assets/icons/compare-conditions.svg"); }
.so-thumb.kind-glossary { background-image: url("/assets/icons/topic-search.svg"); }
.so-thumb.kind-faq { background-image: url("/assets/icons/chip-analysis.svg"); }
.so-thumb.kind-legal { background-image: url("/assets/icons/cfd-alert.svg"); }
.so-thumb.kind-about, .so-thumb.kind-policy, .so-thumb.kind-contact { background-image: url("/assets/icons/chip-strategy.svg"); }
.so-thumb.kind-home { background-image: url("/assets/icons/chip-cfds.svg"); }
.so-thumb.kind-sitemap { background-image: url("/assets/icons/topic-search.svg"); }
.so-thumb.kind-category { background-image: url("/assets/icons/chip-markets.svg"); }
.so-row-text { display: grid; gap: 0.12rem; min-inline-size: 0; }
.so-kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.so-row-title { font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.so-row-blurb { font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); }
.so-chevron {
  inline-size: 0.85rem; block-size: 0.85rem; background: var(--ink-2);
  -webkit-mask: url("/assets/icons/chevron-right.svg") center/contain no-repeat;
  mask: url("/assets/icons/chevron-right.svg") center/contain no-repeat;
}
:root[dir="rtl"] .so-chevron { scale: -1 1; }
.so-none { padding: 1.5rem 0.5rem; color: var(--ink-2); }

/* narrow: the overlay is the whole screen, the filters a sheet behind a button */
@media (max-width: 47.99rem) {
  .search-overlay { padding: 1rem 1.15rem 2.5rem; }
  .so-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .so-left { grid-column: 1; grid-row: 2; }
  .so-close { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .so-popular { grid-column: 1 / -1; grid-row: 3; margin-block-start: 1rem; }
  .so-suggest { inline-size: 100%; }
  .so-results-head { align-items: center; }
  .so-results-title { font-size: 1.15rem; }
  .so-sort { order: 3; margin-inline-start: auto; }
  .so-filter-toggle {
    display: inline-flex; align-items: center; gap: 0.45rem; order: 2;
    border: 1px solid var(--rule); border-radius: 8px; background: var(--surface);
    padding: 0.45rem 0.8rem; font: inherit; font-size: 0.82rem; color: var(--ink); cursor: pointer;
  }
  .so-body { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .so-filters { display: none; }
  .so-filters.open { display: block; }
  .so-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.85rem 0.25rem; }
  .so-thumb { inline-size: 2.75rem; block-size: 2.25rem; background-size: 1.2rem; }
  .so-row-title { font-size: 0.9rem; }
  .so-row-blurb { font-size: 0.78rem; }
}

/* the overlay's empty state: the site, grouped as the site index groups it */
.so-browse {
  margin-block-start: 1.75rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.5rem 2.5rem; align-items: start;
}
.so-group-title {
  margin: 0 0 0.6rem; padding-block-end: 0.45rem;
  border-block-end: 1px solid var(--rule);
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.so-group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
/* One section on its own spreads across the panel rather than hugging the
   first column, which is what the chips leave behind when they filter: the
   outer grid gives up its tracks and the list takes them instead. */
.so-browse:has(> .so-group:only-child) { grid-template-columns: minmax(0, 1fr); }
.so-browse > .so-group:only-child .so-group-list { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); column-gap: 2.5rem; }
.so-browse-row {
  display: grid; gap: 0.1rem; padding: 0.45rem 0.55rem;
  border-radius: 8px; text-decoration: none;
}
.so-browse-row:hover { background: var(--paper-2); }
.so-browse-title { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.so-browse-blurb { font-size: 0.8rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 47.99rem) {
  .so-browse { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-block-start: 1.25rem; }
  .so-browse-blurb { font-size: 0.76rem; }
}

/* ------------------------------------------------------------ menu: the card that closes it */
/* One width only: the panel exists on phones, and on the bar there is nowhere
   for it. The mark is the brand's own, already fetched for the masthead. */
.menu-promo { display: none; }
@media (max-width: 61.99rem) {
  .menu-body .menu-promo {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: end; column-gap: 0.5rem;
    margin-block-start: 1.1rem;
    padding: 1.25rem 0 0 1.15rem;
    background: var(--paper-2); border-radius: 16px;
    overflow: clip;
  }
  .menu-promo-kicker {
    grid-column: 1; margin: 0 0 0.4rem;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-2);
  }
  .menu-promo-text {
    grid-column: 1; margin: 0 0 1.3rem;
    font-family: var(--font-display); font-size: 0.97rem; font-weight: 600;
    line-height: 1.34; color: var(--ink); text-wrap: balance;
  }
  /* The narrowest phones give the mark less room, so the eyebrow keeps its
     one line rather than breaking after "TRADE". */
  @media (max-width: 23.75rem) {
    .menu-body .menu-promo-mark { inline-size: 6.3rem; }
    .menu-body .menu-promo-kicker { letter-spacing: 0.03em; }
  }
  .menu-promo-mark {
    grid-column: 2; grid-row: 1 / span 2; align-self: end;
    /* The artwork carries transparent ground below the shoulders, so it is
       pulled down until the suit meets the card's edge; the card clips it. */
    inline-size: 7.4rem; block-size: auto;
    margin-inline-end: 0.15rem; margin-block-end: -0.7rem;
  }
}

/* ------------------------------------------------------------ learning series */
/* A run of lessons taken in order. Three parts, all drawn from the same data:
   the eyebrow says where the reader is, the rail lists the run, and the foot
   of the page offers the next lesson and the pair either side. */
.kicker-series { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; }
.kicker-series-name { color: var(--accent); }
.kicker-series-lesson { position: relative; padding-inline-start: 0.75rem; }
.kicker-series-lesson::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%;
  inline-size: 0.25rem; block-size: 0.25rem; border-radius: 999px;
  background: currentColor; translate: 0 -50%;
}

/* the rail's run */
.series-rail { margin-block-end: 1.6rem; }
.series-name { margin: 0 0 0.7rem; font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.series-count { font-family: var(--font-text); font-size: 0.8rem; font-weight: 500; color: var(--ink-2); }
.series-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; counter-reset: lesson; }
.series-list > li { position: relative; margin: 0; counter-increment: lesson; }
.series-list > li > a {
  display: block; padding: 0.4rem 0.5rem 0.4rem 2rem;
  border-radius: 8px; font-size: 0.85rem; line-height: 1.35;
  color: var(--ink-2); text-decoration: none;
}
/* The number is drawn, not written: the list's order is the lesson's number,
   so a reader and an agent cannot be told different ones. */
.series-list > li > a::before {
  content: counter(lesson) "."; position: absolute; inset-inline-start: 0.55rem;
  font-size: 0.82rem; font-variant-numeric: lining-nums; color: var(--ink-2);
}
.series-list > li > a:hover { background: var(--paper-2); color: var(--ink); }
.series-list > li[aria-current] > a { background: color-mix(in srgb, var(--chip-on) 55%, var(--surface)); color: var(--accent); font-weight: 700; }
.series-list > li[aria-current] > a::before { color: var(--accent); }

/* the next lesson, at the foot of the article */
.series-next {
  margin-block-start: 2.25rem; padding: 1.15rem 1.25rem 1.2rem;
  background: color-mix(in srgb, var(--chip-on) 30%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--surface));
  border-radius: 16px;
}
.series-next-label {
  margin: 0 0 0.45rem; display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
}
.series-next-lesson { color: var(--accent); }
/* A paragraph, not a heading: the card is navigation to another page, and a
   heading here would claim a section of this one — which the output audit
   catches, because the mirrors carry no such section. */
.series-next-title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.series-next-title a { color: var(--ink-strong); text-decoration: none; }
.series-next-title a:hover { color: var(--accent); }
.series-next-blurb { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.series-next-go { display: flex; align-items: center; gap: 0.9rem; margin: 0.95rem 0 0; }
.series-next-go a {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1.15rem; border-radius: 999px;
  background: linear-gradient(100deg, var(--fill-2), var(--fill));
  color: var(--on-primary); font-size: 0.92rem; font-weight: 700; text-decoration: none;
}
.series-next-go a::after {
  content: ""; inline-size: 0.95rem; block-size: 0.95rem; background: currentColor;
  -webkit-mask: url("/assets/icons/card-arrow.svg") center/contain no-repeat;
  mask: url("/assets/icons/card-arrow.svg") center/contain no-repeat;
}
:root[dir="rtl"] .series-next-go a::after { scale: -1 1; }
.series-next-mins { font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: lining-nums; }

/* the pair either side */
.series-pager {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
  margin-block-start: 1.5rem; padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
}
.series-pager a { display: grid; gap: 0.15rem; text-decoration: none; }
.series-pager .series-next-link { text-align: end; }
.series-pager-label { font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.series-pager-title { font-size: 0.88rem; color: var(--ink-2); }
.series-pager a:hover .series-pager-title { color: var(--ink); }
@media (max-width: 47.99rem) {
  .series-next-title { font-size: 1.05rem; }
  .series-pager { gap: 0.75rem; margin-block-start: 1.25rem; }
  .series-pager-title { font-size: 0.82rem; }
}

/* ------------------------------------------------------------ lesson pages */
/* A page in a learning series opens on a band: the eyebrow, the title, the
   line under it and two facts — how long it takes to read and when it last
   changed — with the reading bull on the candle field beside them. */
/* The head is a band across the page, not a card in the column: the two
   columns start beneath it, as the mock has them. */
.lesson-hero {
  /* The band's own light grey, with no tint across it. */
  background: var(--hero-ground);
  border-block-end: 1px solid var(--rule);
  /* The artwork hangs off the band, not off the text column, so it reaches
     the edge of the page as the reference has it; the band clips it. */
  position: relative; overflow: clip;
}
.lesson-hero-inner {
  position: relative; z-index: 1;
  max-inline-size: var(--shell); margin-inline: auto;
  padding: 1.1rem 1.5rem 1.6rem;
}
/* Once the page is two columns, the band's words line up with the column
   beneath them: main centres measure + gutter + rail, so the band does too. */
@media (min-width: 64rem) {
  .lesson-hero-inner {
    max-inline-size: calc(var(--measure) + var(--gutter) + var(--rail));
    padding-inline: 0;
  }
}
.lesson-hero .crumbs { margin-block-end: 0.9rem; }
.lesson-head, .article-head.lesson-head {
  position: relative; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.lesson-head .lesson-lead { margin: 0.85rem 0 0; max-inline-size: 30rem; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.lesson-head .lesson-meta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1rem 0 0; font-size: 0.85rem; color: var(--ink-2); }
.lesson-head .lesson-meta time { color: inherit; }
.lesson-head .byline { margin-block-start: 0.9rem; font-size: 0.8rem; }
@media (min-width: 64rem) {
  .lesson-head { padding-inline-end: 26rem; min-block-size: 14rem; }
  /* The title shares the band with the script line, which is placed against
     the artwork. Padding alone leaves a long title room to run under it, so
     the words keep a column of their own. */
  /* Every banded page but a comparison keeps its heading clear of the artwork;
   a comparison's heading runs the full width by the operator's earlier choice. */
body.banded:not(.kind-comparison) .lesson-head h1 { max-inline-size: 30rem; }
  /* A comparison's heading still runs wider than a lesson's, but stops short
     of the artwork: the mascot stands in the last ~27rem of the band, and a
     long title such as a broker review's ran straight through him. */
  body.banded.kind-comparison .lesson-head h1 { max-inline-size: calc(100vw - max(1.5rem, 5.5vw) - 27rem); }
  body.banded .lesson-head h1 { text-wrap: balance; }
  .lesson-hero::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-end: 0;
    inline-size: 36rem; pointer-events: none;
    /* The mascot in front, the candle field behind him: the reference's own
       arrangement, with the field drawn as vector rather than carried as a
       photograph so it scales with the band. The field runs the whole width
       of this box and the mascot stands short of its right edge, so the run's
       peak stays clear of him as it does in the reference. */
    /* 93% of the band, but capped: the band grows with the lead, and an
       uncapped mascot scales with it until it runs into the script line.
       At the reference's band height the cap is inactive. */
    background: url("/assets/lesson-bull.webp") right 7rem bottom -1.5rem / auto min(93%, 20rem) no-repeat,
                url("/assets/lesson-candles.svg") right 0 top 0 / 100% 100% no-repeat;
  }
}

/* the row of short claims */
.features { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
/* Four across once there is room, as the mock has them; two before that. */
@media (min-width: 48rem) { .features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.features > li {
  margin: 0; padding: 1.1rem 0.9rem 1.15rem; text-align: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
}
.features > li[data-mark]::before {
  content: ""; display: block; inline-size: 2.3rem; block-size: 2.3rem;
  margin-inline: auto; margin-block-end: 0.7rem;
  background: center / contain no-repeat;
}
.features > li[data-mark="chart"]::before { background-image: url("/assets/icons/card-cfds.svg"); }
.features > li[data-mark="coins"]::before { background-image: url("/assets/icons/pill-leverage.svg"); }
.features > li[data-mark="globe"]::before { background-image: url("/assets/icons/card-markets.svg"); }
.features > li[data-mark="leverage"]::before { background-image: url("/assets/icons/pill-strategy.svg"); }
.features > li[data-mark="risk"]::before { background-image: url("/assets/icons/card-risk.svg"); }
.features > li[data-mark="costs"]::before { background-image: url("/assets/icons/card-costs.svg"); }
.feature-title { display: block; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1.25; color: var(--ink-strong); }
.feature-body { display: block; margin-block-start: 0.45rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); }

/* one line on its own ground, with the mascot beside it */
.block-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 1rem; margin-block-start: 1.6rem; padding: 0.5rem 1.6rem 0.5rem 1rem;
  background: color-mix(in srgb, var(--chip-on) 30%, var(--surface));
  border: 0; border-radius: 14px;
}
.block-banner::before {
  content: ""; inline-size: 7rem; block-size: 6rem; align-self: end;
  /* The banner's own mascot: the pointing pose, not the menu card's. */
  background: url("/assets/banner-bull.webp") center bottom / contain no-repeat;
}
/* Centred in the space beside the mascot, as the mock sets it — measured
   there at 400→690 in a band running 72→860, rather than beginning where
   the mascot ends. */
.banner-line {
  margin: 0; justify-self: center; text-align: center;
  font-family: var(--font-display); font-size: 1.2rem; font-style: italic;
  color: var(--ink-strong);
}
@media (max-width: 47.99rem) {
  .block-banner { padding-inline: 0.75rem 1rem; }
  .banner-line { font-size: 1rem; }
}

/* the lesson rail's cards, and its related list with marks and times */
.related li[data-cat] { position: relative; padding-inline-start: 3.1rem; min-block-size: 2.4rem; display: grid; align-content: center; }
.related li[data-cat]::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.1rem;
  inline-size: 2.5rem; block-size: 2rem; border-radius: 8px;
  background: var(--icon-tile) center / 1.2rem no-repeat;
}
.related li[data-cat="cfds"]::before { background-image: url("/assets/icons/card-cfds.svg"); }
.related li[data-cat="basics"]::before { background-image: url("/assets/icons/pill-cfds.svg"); }
.related li[data-cat="markets"]::before { background-image: url("/assets/icons/card-markets.svg"); }
.related li[data-cat="analysis"]::before { background-image: url("/assets/icons/pill-analysis.svg"); }
.related li[data-cat="practical"]::before { background-image: url("/assets/icons/card-risk.svg"); }
.related li[data-cat="company"]::before { background-image: url("/assets/icons/compare-regulation.svg"); }
.related li[data-cat="legal"]::before { background-image: url("/assets/icons/learn-risk-shield.svg"); }
.related-mins { display: block; font-size: 0.76rem; color: var(--ink-2); font-variant-numeric: lining-nums; }

.rail-card { margin-block-start: 1.4rem; padding: 1.05rem 1.1rem 1.1rem; border-radius: 16px; }
.rail-card-title { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 0.98rem; font-weight: 800; color: var(--ink-strong); }
.rail-card-text { margin: 0 0 0.85rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); }
.rail-card-go { margin: 0; }
.rail-card-go a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.95rem; border-radius: 999px;
  background: var(--surface); color: var(--ink-strong);
  font-size: 0.85rem; font-weight: 700; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.rail-card-go a::after {
  content: ""; inline-size: 0.85rem; block-size: 0.85rem; background: var(--brand);
  -webkit-mask: url("/assets/icons/card-arrow.svg") center/contain no-repeat;
  mask: url("/assets/icons/card-arrow.svg") center/contain no-repeat;
}
:root[dir="rtl"] .rail-card-go a::after { scale: -1 1; }
.rail-hub { background: color-mix(in srgb, var(--chip-on) 32%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, var(--surface)); }
/* The closing card is the band's own dark ground, as the mock draws it. */
.rail-explore { background: linear-gradient(160deg, var(--band-dark), color-mix(in srgb, var(--band-dark) 72%, var(--brand))); }
.rail-explore .rail-card-title { color: var(--band-head); }
.rail-explore .rail-card-text { color: color-mix(in srgb, var(--band-ink) 88%, var(--band-dark)); }

/* ------------------------------------------------------------ lesson page layout */
/* Measured off the mock at its own 1290px: the body column runs 72→865 and
   the rail 907→1222, so the margins are a twentieth of the page rather than
   the 158px a centred measure leaves, and the two columns fill what is left.
   The ground under the head is the masthead's white, and the sections sit on
   it rather than in cards. */
body.banded { background: var(--surface); }
body.banded main {
  max-inline-size: none; justify-content: stretch;
  padding-inline: max(1.5rem, 5.5vw);
  column-gap: 2.6rem;
}
@media (min-width: 64rem) {
  body.banded main { grid-template-columns: minmax(0, 1fr) 19.5rem; }
  /* Three children now, not two: the promo sits beside the article rather
     than inside it, so the two of them share the first column and the rail
     runs down the second alongside both. */
  body.banded main > .lesson-promo { grid-column: 1; grid-row: 1; }
  body.banded main > article { grid-column: 1; grid-row: 2; }
  body.banded main > .rail { grid-column: 2; grid-row: 1 / span 2; }
  body.banded .lesson-hero-inner { max-inline-size: none; padding-inline: max(1.5rem, 5.5vw); }
}
body.banded article > .block {
  margin: 0 0 1.9rem; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
body.banded article > .block > h2 { margin-block-end: 0.55rem; }
/* The column fills the page beside the rail, so running text gets a measure of
   its own: at 1440 a paragraph ran 101 to 122 characters a line, against about
   75 for comfortable reading. 58ch comes to about 75 in Inter. Tables, card rows and
   grids keep the full width. */
body.banded article p,
body.banded article dd,
body.banded article ul:not([class]) > li,
body.banded article ol:not([class]) > li { max-inline-size: 58ch; }
/* The three that keep a ground of their own: the row of claims is a row of
   cards, the banner is a band, and a risk warning has to stay a warning —
   stripped of its panel it reads as ordinary prose with a small kicker,
   which is the one block on the page that must not be skimmable. */
body.banded article > .block-callout {
  padding: 1.1rem 1.35rem; background: var(--note-paper);
  border: 1px solid var(--rule); border-radius: 14px;
}
body.banded article > .callout-warning { background: var(--warn-paper); border-color: var(--accent); }
body.banded article > .block-callout > h2 { font-size: 1.35rem; margin-block: 0 0.5rem; }
body.banded article > .block-banner { padding: 0.5rem 1.6rem 0.5rem 1rem; background: color-mix(in srgb, var(--chip-on) 30%, var(--surface)); border-radius: 14px; }
/* The rail is a column of cards, not one panel with everything inside it:
   the series, the page's contents and the related list each take a card of
   their own, as the mock draws them. */
body.banded .rail { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
body.banded .rail > .series-rail,
body.banded .rail > .toc,
body.banded .rail > .related {
  margin: 0 0 1.4rem; padding: 1.05rem 1.1rem 1.1rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px;
}
body.banded .rail > :last-child { margin-block-end: 0; }
body.banded .rail .rail-label { margin-block-start: 0; }

/* the strip under a lesson's head */
.lesson-promo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 1rem; margin-block-end: 2rem;
  padding: 1rem 0 1rem 1.3rem; overflow: clip;
  background: color-mix(in srgb, var(--chip-on) 26%, var(--surface));
  border-radius: 16px;
}
.lesson-promo-kicker {
  margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.lesson-promo-text {
  margin: 0; max-inline-size: 26rem;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  line-height: 1.35; color: var(--ink-strong);
}
.lesson-promo-mark { inline-size: 7rem; block-size: auto; margin-block-end: -1.1rem; margin-inline-end: 0.6rem; }
@media (max-width: 47.99rem) {
  .lesson-promo { padding-inline-start: 1rem; margin-block-end: 1.5rem; }
  .lesson-promo-text { font-size: 0.95rem; }
  .lesson-promo-mark { inline-size: 5.5rem; }
}

/* A lesson's body type, measured off the mock at its own 1290px: a 31px
   heading in near-black at 800, and 17.5px copy in a blue-grey at 1.62 —
   against the 20.8px/700 heading and 15.2px near-black copy an article page
   otherwise uses. The cards under "Key features" take the same copy colour. */
body.banded article > .block > h2 {
  font-size: 1.95rem; font-weight: 800; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink-strong);
  margin-block: 2.4rem 0.7rem;
}
body.banded article > .block:first-of-type > h2 { margin-block-start: 0; }
/* No measure cap of its own: the grid column is the measure, and it was
   itself taken off the mock, where the copy fills the column. A 46rem cap
   left the words 50px short of the headings and of the cards above them,
   which reads as a mistake rather than as a measure. */
/* The tail of the lead opens the article on a lesson, so it takes the same
   copy as the sections under it rather than the display face a non-lesson
   page sets its whole lead in. */
body.banded article > .lead p,
body.banded article > .block > p,
body.banded article > .block > .intro p,
body.banded article > .block > .sub > p {
  font-size: 1.08rem; line-height: 1.62;
  color: color-mix(in srgb, var(--ink-2) 78%, var(--ink));
}
/* A list block's items are copy too: same size, leading and colour, with the
   lead-in of each item in the heading's near-black so the four read as a set. */
body.banded article > .block > ul,
body.banded article > .block > ol {
  font-size: 1.08rem; line-height: 1.62;
  color: color-mix(in srgb, var(--ink-2) 78%, var(--ink));
  margin-block: 0 1.15rem;
}
body.banded article > .block > ul > li,
body.banded article > .block > ol > li { margin-block-end: 0.7em; }
body.banded article > .block > ul > li > strong,
body.banded article > .block > ol > li > strong { color: var(--ink-strong); }
/* A subsection's heading sits between the two: the mock has no h3 of its own,
   so it keeps the site's step down from the h2 rather than inventing a size. */
body.banded article > .block > .sub > h3 {
  font-size: 1.28rem; font-weight: 700; line-height: 1.25;
  color: var(--ink-strong); margin-block: 1.9rem 0.45rem;
}
body.banded article > .block > .sub { margin-block-end: 0; }
body.banded article > .lead p { font-family: var(--font-text); }
body.banded .feature-body { color: color-mix(in srgb, var(--ink-2) 78%, var(--ink)); }
body.banded .features { margin-block-start: 1.25rem; }

/* the two facts under a lesson's title, each with its mark */
.lesson-meta { align-items: center; }
.lesson-meta > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.lesson-meta > span::before {
  content: ""; inline-size: 1rem; block-size: 1rem; flex: none;
  background: currentColor;
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat;
}
.lesson-meta .lesson-mins::before {
  -webkit-mask-image: url("/assets/icons/meta-clock.svg");
  mask-image: url("/assets/icons/meta-clock.svg");
}
.lesson-meta .lesson-updated::before {
  -webkit-mask-image: url("/assets/icons/meta-calendar.svg");
  mask-image: url("/assets/icons/meta-calendar.svg");
}
/* The byline is the author's name alone: no picture, by the operator's choice
   (2026-10-03), so the authors' faces are never shown. */
.lesson-meta .lesson-author::before { content: none; }

/* the line written by hand beside a lesson's mascot, and the banner's own */
.lesson-script { display: none; }
@media (min-width: 64rem) {
  .lesson-script {
    display: block; position: absolute;
    inset-block-start: 1.1rem; inset-inline-end: 17rem;
    max-inline-size: 21rem; margin: 0;
    font-family: var(--font-script); font-size: 2.15rem; font-weight: 600;
    line-height: 1.15; color: var(--ink-strong);
    rotate: -7deg; text-align: center; pointer-events: none;
  }
}
/* Scoped through the article: the lesson's own paragraph rule carries more
   weight and was holding this line at 17px, where the mock sets it at 30. */
body.banded article > .block-banner > .banner-line,
.block-banner .banner-line {
  font-family: var(--font-script); font-size: 1.9rem; font-style: normal;
  line-height: 1.25; rotate: -1.5deg;
}
.block-banner .banner-line::before { content: "\201C"; }
.block-banner .banner-line::after { content: "\201D"; }

/* The learning hub: the overlay's search field and section chips over the
   list of every page, which ships complete in the HTML. */
.hub-bar { display: grid; gap: 0.9rem; margin-block: 1rem 1.5rem; }
.hub-bar .so-field { max-inline-size: 34rem; }
.hub-group[hidden], .hub .pagelist li[hidden], .hub-intro[hidden] { display: none; }
.hub-intro { margin: 0.2rem 0 0.8rem; color: var(--ink-2); max-inline-size: 46rem; }
.hub-none { color: var(--ink-2); }

/* ------------------------------------------------------------ broker page: your company */
.your-company { margin-block: 0.4rem 1rem; }
.page-country { margin-block-start: 1.1rem; }
.page-country-form label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.95rem; font-weight: 600; color: var(--ink-strong); }
.page-country-form select { font: inherit; font-weight: 400; padding: 0.45rem 0.7rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 14rem; }
.awaiting-page-country { opacity: 0.3; pointer-events: none; user-select: none; filter: grayscale(1); transition: opacity 0.2s; }
.page-country.is-asking .page-country-form select { border: 2px solid var(--accent); outline: 3px solid var(--focus); outline-offset: 2px; }
.page-country-ask { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.page-country-ask a { font-weight: 600; }
.country-ask { margin: 0.6rem 0 1rem; padding: 0.8rem 1rem; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); font-size: 0.95rem; color: var(--ink); }
.country-ask a { font-weight: 600; }
.awaiting-country > :not(h2):not(.country-ask):not(.your-company) { opacity: 0.4; transition: opacity 0.2s; }
.yc-choose label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--ink-2); }
.yc-choose select { font: inherit; padding: 0.35rem 0.6rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); }
.yc-cards { display: grid; gap: 1rem; margin-block-start: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .yc-cards { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.yc-card { padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.yc-card.is-unavailable { opacity: 0.55; background: var(--hero-ground); }
.yc-label { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.yc-name { margin: 0.3rem 0 0.7rem; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink-strong); }
.yc-facts { margin: 0; display: grid; gap: 0.45rem; }
.yc-facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; font-size: 0.92rem; }
.yc-facts dt { color: var(--ink-2); }
.yc-facts dd { margin: 0; color: var(--ink); }
.yc-note { margin: 0.8rem 0 0; font-size: 0.88rem; color: var(--ink-2); }
.yc-tradeoff { margin: 0.8rem 0 0; font-size: 0.92rem; color: var(--ink-2); }
.yc-all { display: inline-block; margin-block-start: 0.6rem; font-size: 0.9rem; font-weight: 600; }
.yc-visit { display: inline-block; margin-block-start: 0.6rem; padding: 0.5rem 0.95rem; border-radius: 10px; background: var(--accent); color: var(--on-primary); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.yc-visit:hover { filter: brightness(1.08); }
.yc-visit-box { margin-block-start: 1rem; padding-block-start: 0.85rem; border-block-start: 1px solid var(--rule); }
.yc-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.yc-visit-box .yc-note { margin-block-start: 0.35rem; }
.signup-box { margin-block-start: 0.6rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.signup-box .yc-visit { margin-block-start: 0.5rem; }
.lesson-signup { font-weight: 600; text-decoration: none; }
.lesson-signup:hover { text-decoration: underline; }
.signup-box p:not(.yc-eyebrow) { margin: 0.45rem 0 0; color: var(--ink-2); }
.signup-box .yc-visit { margin-block-start: 0.9rem; }