/* ==========================================================================
   NAVIONFX — learning.css
   Learning, Trading Psychology, the Financial Dictionary's hero and the Resources tool pages.

   The design is the site's own: section-heading, section-sub, hero-heading, the buttons and backgrounds (base.css, backgrounds.css), and
   edge-card, price-driver-card, market-listing-sector-card, market-stat-card, how-to-card, basic-faq (markets.css, tools.css, basic-faq.css).
   This file does NOT redefine the container, type, buttons, cards, section spacing or backgrounds. It only holds what those components
   do not have: what goes inside a card (image band, date, ticker chips), filters, pagination, reading text, tables, and how a grid
   of these cards behaves.

   ONE ALIGNMENT RULE, at every size: heroes centred (the tool heroes' split: left text, image right; centred once they stack); section
   headings and subs centred (FAQ splits left); card content left-aligned; article text left-aligned in a centred column.
   ========================================================================== */

/* What changes with the band a thing sits on. Semantic up/down are the colours the calculator already uses on dark. */
.lr-page, .gl-page {
  --lr-up: #16a34a;
  --lr-down: #b91c1c;
  --lr-text: var(--color-text-dark);
  --lr-body: var(--color-text-dark-muted);
  --lr-muted: var(--color-text-muted-on-tint);
  --lr-link: var(--color-accent-on-tint);
  --lr-rule: rgba(37, 99, 235, 0.1);
  --lr-tile: rgba(37, 99, 235, 0.08);
  --lr-up-text: #15803d;
  --lr-down-text: #b91c1c;
  --lr-up-bg: rgba(22, 163, 74, 0.11);
  --lr-down-bg: rgba(185, 28, 28, 0.09);
}
.lr-page :is(.bg-dark, .bg-mesh, .bg-dark-steel, .bg-dark-aurora, .bg-dark-navy, .bg-dark-pulse, .bg-dark-mesh, .edge-card, .price-driver-card) {
  --lr-text: #f0f6ff;
  --lr-body: rgba(255, 255, 255, 0.6);
  --lr-muted: rgba(255, 255, 255, 0.6);
  --lr-link: #60a5fa;
  --lr-rule: rgba(255, 255, 255, 0.08);
  --lr-tile: rgba(255, 255, 255, 0.06);
  --lr-up-text: #4ade80;
  --lr-down-text: #f87171;
  --lr-up-bg: rgba(34, 197, 94, 0.13);
  --lr-down-bg: rgba(248, 113, 113, 0.13);
}
.lr-page :is(.how-to-card, .market-listing-sector-card, .market-stat-card--light, .lr-table-wrap, .lr-newslist) {
  --lr-text: var(--color-text-dark);
  --lr-body: var(--color-text-dark-muted);
  --lr-muted: var(--color-text-muted-on-tint);
  --lr-link: var(--color-accent-on-tint);
  --lr-rule: rgba(37, 99, 235, 0.1);
  --lr-tile: rgba(37, 99, 235, 0.08);
  --lr-up-text: #15803d;
  --lr-down-text: #b91c1c;
  --lr-up-bg: rgba(22, 163, 74, 0.11);
  --lr-down-bg: rgba(185, 28, 28, 0.09);
}
.lr-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lr-icon { flex-shrink: 0; }
.lr-up { color: var(--lr-up-text); }
.lr-down { color: var(--lr-down-text); }
.lr-page a:focus-visible, .lr-page button:focus-visible, .lr-page [tabindex="0"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* no single word left alone on the last line of a heading or a sub */
.lr-page :is(.hero-heading, .section-heading, .section-sub), .gl-page :is(.hero-heading, .section-heading, .section-sub) { text-wrap: balance; }

/* ── section head: label, heading, sub and the small "View all" under them ── */
/* the small label above a heading: the Introducing Broker page's .ib-eyebrow */
.lr-eyebrow { display: inline-block; margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #94a3b8; }
.lr-head--bare { margin-bottom: 36px; }
.lr-head:has(.lr-section-link) .section-sub { margin-bottom: 12px; }
.lr-head:has(.lr-section-link):not(:has(.section-sub)) .section-heading { margin-bottom: 12px; }
.lr-section-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 36px; font-size: 14px; font-weight: 600; color: var(--lr-link); transition: opacity var(--transition); }
.lr-section-link:hover { opacity: 0.7; }
.lr-section-link .lr-icon { width: 15px; height: 15px; }
.lr-note { margin-top: 20px; font-size: 12px; line-height: 1.6; text-align: center; color: var(--lr-muted); }
.lr-empty { padding: 24px; text-align: center; font-size: 15px; color: var(--lr-muted); }

/* ── heroes ── */
/* never clipped: the hero grows if its content is taller than the screen (the live class pins it to 100vh) */
.lr-hero.section-vh-hero, .gl-hero.section-vh-hero { height: auto; min-height: 100vh; padding-top: calc(var(--header-height) + 24px); padding-bottom: 48px; }
/* the stat cards under a landing hero's text (the market pages' .market-stat-cards) */
.lr-stats { margin: 30px 0 34px; }
.lr-stats:last-child, .lr-stats + .lr-breadcrumb { margin-bottom: 0; }
.lr-stats .market-stat-card--light { min-width: 170px; }
.lr-stats .market-stat-lbl { color: var(--color-text-muted-on-tint); }
@media (max-width: 767px) {
  .lr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 10px; margin: 24px 0 26px; }
  .lr-stats .market-stat-card--light { min-width: 0; padding: 12px 14px; gap: 10px; }
  .lr-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
  .lr-stats .market-stat-img { width: 30px; height: 30px; }
  .lr-stats .market-stat-val { font-size: 15px; }
  .lr-stats .market-stat-lbl { white-space: normal; }
}
.lr-hero > .container, .gl-hero > .container, .lr-article-head > .container { position: relative; z-index: 2; }
/* the accent second line */
.lr-hero .hero-heading span, .gl-hero .hero-heading span { display: block; color: var(--color-accent); }
.lr-hero .hero-heading--dark span { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 60%, #06b6d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lr-article-head .hero-heading { max-width: 900px; }
.lr-article-head .hero-heading span { color: var(--color-accent); }
.lr-lead { max-width: 640px; margin-bottom: 8px; }
.lr-lead + .lr-lead { margin-top: 8px; }
.lr-pill-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 8px; }
.lr-sample { display: inline-block; margin-top: 7px; padding: 3px 10px; border-radius: 100px; border: 1px dashed rgba(15, 23, 42, 0.2); font-size: 11px; font-weight: 700; color: var(--color-text-muted-on-tint); }

/* the breadcrumb closes the hero */
.lr-breadcrumb, .gl-breadcrumb { margin-top: 28px; }
.lr-breadcrumb ol, .gl-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 0; font-size: 13px; font-weight: 500; color: var(--color-text-muted-on-tint); }
.lr-breadcrumb li, .gl-breadcrumb li { display: inline-flex; align-items: center; }
.lr-breadcrumb li:not(:last-child)::after, .gl-breadcrumb li:not(:last-child)::after { content: '\203A'; margin: 0 8px; }
.lr-breadcrumb a, .gl-breadcrumb a { color: var(--color-text-muted-on-tint); transition: color var(--transition); }
.lr-breadcrumb a:hover, .gl-breadcrumb a:hover { color: var(--color-accent-on-tint); text-decoration: underline; }
.lr-breadcrumb [aria-current="page"], .gl-breadcrumb [aria-current="page"] { color: var(--color-text-dark); font-weight: 700; overflow-wrap: anywhere; }

/* the buttons of a group are one size, as on the live pages (200 x 48): 200px, or the longest label's width if that is wider,
   for every button in the group, so a longer label never leaves its neighbour a different size */
@media (min-width: 768px) {
  :is(.lr-page, .gl-page) .hero-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
  :is(.lr-page, .gl-page) .hero-buttons :is(.btn-primary, .btn-secondary) { width: auto; min-width: 184px; }
}

/* Explore All: the three small preview cards under the buttons */
.lr-hv { margin-top: 28px; }
.lr-hv .market-stat-card--light { max-width: 290px; min-height: 64px; }
.lr-hv .market-stat-val { font-size: 13px; line-height: 1.3; letter-spacing: -0.2px; font-weight: 700; }
.lr-hv .market-stat-lbl { white-space: normal; color: var(--color-text-muted-on-tint); }
.lr-hv-media { position: relative; flex: 0 0 40px; height: 40px; border-radius: var(--radius-sm); overflow: hidden; }
.lr-hv-media .lr-img-art { width: 30px; height: 30px; }
.lr-hv-date { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; height: 40px; border-radius: var(--radius-sm); background: var(--lr-tile); color: var(--color-accent-on-tint); }
.lr-hv-date span:first-child { font-size: 16px; font-weight: 800; }
.lr-hv-date span:last-child { font-size: 9px; font-weight: 800; }

/* Resources tool pages: the hero image and chips */
.lr-tool-art { width: 100%; max-width: 480px; height: auto; filter: drop-shadow(0 20px 60px rgba(37, 99, 235, 0.2)); }
.lr-hero .landing-split-chip { transition: border-color var(--transition); }
.lr-hero a.landing-split-chip:hover { border-color: rgba(96, 165, 250, 0.45); }

/* Stacked screens: "section-vh-*" heights are auto, so a hero is as tall as its content plus room to breathe. A tool hero stacked
   is centred from here down (the live page keeps left text over a centred image until 767px). */
@media (max-width: 991px) {
  .lr-hero.section-vh-hero, .gl-hero.section-vh-hero { min-height: 0; align-items: center; padding-top: calc(var(--header-height) + 56px); padding-bottom: 64px; }
  .lr-hv { display: none; }
  .lr-hero .landing-split-left { align-items: center; text-align: center; }
  .lr-hero .landing-split-left .pill-no-desc-dark { align-self: center; }
  .lr-hero .landing-split-chips { justify-content: center; }
  .lr-tool-art { max-width: 320px; }
}
@media (max-width: 767px) {
  .lr-article-head.section-pad { padding-top: calc(var(--header-height) + 24px); padding-bottom: 48px; }
  .lr-lead { max-width: none; }
}

/* ── grids: the market pages' grid (.edge-card-grid: three columns, 14px gap, 1000px wide), with equal heights ── */
.lr-grid > *, .lr-bento > *, .lr-feature-grid > *, .lr-toolrow > * { min-width: 0; }
/* two columns (tablet): an odd last card stays the same size, centred, rather than sitting alone on the left */
@media (min-width: 561px) and (max-width: 900px) {
  .lr-grid:not(:has(.lr-analysts)) > :last-child:nth-child(odd), .lr-bento:not(.lr-bento--4) > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}
[data-lr-item][hidden], .lr-event[hidden], tr[hidden] { display: none !important; }
.lr-page a.edge-card, .lr-page a.how-to-card, .lr-page a.price-driver-card { cursor: pointer; }

/* Explore All: four across, so the seven sections fit one screen (Academy takes two columns, its image beside the text) */
.lr-bento--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lr-bento--4 .edge-card--wide { grid-column: span 2; }
.lr-bento--4 .edge-card--wide .edge-card-img-wrap { width: 170px; padding: 18px; }
.lr-bento--4 .edge-card-img-wrap--sm { height: 112px; padding: 14px; }
.lr-bento--4 .edge-card-body { padding: 16px 18px 18px; gap: 6px; }
.lr-bento--4 .lr-bento-text { font-size: 12.5px; line-height: 1.6; }
@media (max-width: 900px) { .lr-bento--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lr-bento--4 .edge-card--wide .edge-card-img-wrap { width: 100%; height: 140px; } }
/* phones: still two across (Academy across both), small images, so the seven cards are not seven screens */
@media (max-width: 560px) {
  .lr-bento--4 { gap: 10px; }
  .lr-bento--4 .edge-card--wide .edge-card-img-wrap { height: 110px; }
  .lr-bento--4 .edge-card-img-wrap--sm { height: 84px; padding: 12px; }
  .lr-bento--4 .edge-card-body { padding: 12px 14px 14px; }
  .lr-bento--4 .lr-bento-text { display: none; }
  .lr-bento--4 .lr-bento-title { font-size: 14px; }
  .lr-bento--4 .lr-bento-link { font-size: 12px; }
}

/* Explore All, Latest News: a news desk, the lead story beside a list of the next headlines, on one screen */
.lr-desk { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; max-width: 1000px; }
/* the image band takes whatever height the list beside it adds, so the story's text sits together at the foot of the card */
.lr-desk-lead > .lr-card-media { flex: 1 1 auto; height: auto; min-height: 170px; }
.lr-desk-lead > .lr-card-body { flex: none; }
.lr-desk-lead .lr-card-excerpt { flex: none; }
.lr-desk-lead .lr-img-art { width: 140px; height: 140px; }
.lr-desk-lead-title { font-size: 20px; line-height: 1.3; letter-spacing: -0.3px; }
.lr-desk-lead-title a:hover, .lr-desk-title:hover { color: var(--lr-link); }
.lr-desk-list { gap: 0; padding: 22px 24px; }
.lr-desk-list-head { margin-bottom: 4px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lr-muted); }
.lr-desk-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--lr-rule); }
.lr-desk-item:last-child { border-bottom: 0; padding-bottom: 0; }
.lr-desk-title { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--lr-text); transition: color var(--transition); }
@media (max-width: 900px) { .lr-desk { grid-template-columns: minmax(0, 1fr); } }

/* Explore All: the links sit on one line along a row; a wide card's text is centred in its height */
.lr-bento-card .edge-card-body { flex: 1; }
.lr-bento-card.edge-card--wide .edge-card-body { justify-content: center; }
.lr-bento-card.edge-card--wide .edge-card-desc { flex: none; }
/* stacked, a wide card has its image on top like the others, so its text starts on the same line as theirs */
@media (max-width: 900px) { .lr-page .edge-card--wide .edge-card-body { padding: 20px 22px 22px; } }

/* a card's image band */
.lr-card-media { position: relative; display: block; overflow: hidden; }
.edge-card > .lr-card-media { padding: 0; }
.how-to-card > .lr-card-media { flex-shrink: 0; height: 130px; margin: -28px -24px 0; border-bottom: 1px solid rgba(59, 130, 246, 0.07); }
/* the band behind a 3D render: the homepage market cards' on a light card, the edge cards' tint on a dark one */
.lr-img { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; background: #f0f5ff; }
.lr-img-art { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(59, 130, 246, 0.15)); transition: transform 0.45s ease; }
.lr-card:hover .lr-img-art, .lr-feature:hover .lr-img-art, .lr-featured-article:hover .lr-img-art { transform: scale(1.06); }
:is(.edge-card, .bg-dark, .bg-dark-aurora, .bg-dark-navy, .bg-dark-pulse) .lr-img { background: transparent; }
:is(.edge-card, .bg-dark, .bg-dark-aurora, .bg-dark-navy, .bg-dark-pulse) .lr-img-art { filter: drop-shadow(0 4px 16px rgba(96, 165, 250, 0.15)); }
.lr-img--photo { display: block; object-fit: cover; }
.lr-badge { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 10px; border-radius: 100px; border: 1px solid rgba(37, 99, 235, 0.12); background: var(--color-bg-white); font-size: 11px; font-weight: 700; color: var(--color-accent-on-tint); }

/* what's inside a card */
.how-to-card > .lr-card-body { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; }
.edge-card-body.lr-card-body { flex: 1; }
.lr-card-title a:hover, .lr-news-title a:hover, .lr-feature-title a:hover, .lr-featured-title a:hover, .lr-event-title a:hover { color: var(--lr-link); }
.lr-meta, .lr-news-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; font-weight: 500; color: var(--lr-muted); }
.lr-meta--lg { justify-content: center; font-size: 14px; }
.lr-source { font-weight: 700; color: var(--lr-link); }
.lr-card-excerpt { flex: 1; }
.lr-news .lr-chips, .lr-feature .lr-chips, .lr-card .lr-chips { margin-top: auto; padding-top: 6px; }
.lr-author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 600; color: var(--lr-text); }
.lr-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--color-text-light); }
.lr-avatar--g1, .lr-avatar--g4 { background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent)); }
.lr-avatar--g2, .lr-avatar--g5 { background: linear-gradient(135deg, var(--color-bg-dark), var(--color-accent-dark)); }
.lr-avatar--g3, .lr-avatar--g6 { background: linear-gradient(135deg, var(--color-accent), var(--color-bg-dark)); }
.lr-avatar--lg { width: 52px; height: 52px; font-size: 17px; }
.lr-bento-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--lr-tile); color: var(--lr-link); }

/* ticker chips */
.lr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 1.3; }
.lr-chip--up { background: var(--lr-up-bg); color: var(--lr-up-text); }
.lr-chip--down { background: var(--lr-down-bg); color: var(--lr-down-text); }
.lr-chip-sym { font-weight: 800; color: var(--lr-text); }
.lr-chip-val { display: inline-flex; align-items: center; gap: 4px; }
.lr-chip-arrow { flex-shrink: 0; }
.lr-article-head .lr-chips { justify-content: center; margin-top: 16px; }
.lr-article-head .lr-note { margin-top: 10px; }

/* wide card: the first card of a grid, image beside the text, as .edge-card--wide */
.how-to-card.lr-wide { grid-column: span 2; flex-direction: row; align-items: stretch; gap: 20px; }
.how-to-card.lr-wide > .lr-card-media { flex: 0 0 200px; height: auto; margin: -28px 0 -28px -24px; border-bottom: 0; border-right: 1px solid rgba(59, 130, 246, 0.07); }
.lr-wide .lr-img-art { width: 120px; height: 120px; }
.edge-card--wide.lr-featured-article { max-width: 1000px; margin: 0 auto 14px; }
.lr-featured-article > .lr-card-media { width: 320px; }
.lr-featured-article .lr-img-art { width: 150px; height: 150px; }
.lr-featured-article .edge-card-body { align-items: flex-start; }
.lr-featured-title { margin: 0; }
.lr-featured-btn { margin-top: 6px; }
@media (max-width: 900px) {
  .how-to-card.lr-wide { flex-direction: column; gap: 12px; }
  .how-to-card.lr-wide > .lr-card-media { flex: 0 0 auto; height: 130px; margin: -28px -24px 0; border-right: 0; border-bottom: 1px solid rgba(59, 130, 246, 0.07); }
  .lr-wide .lr-img-art, .lr-featured-article .lr-img-art { width: 110px; height: 110px; }
  .lr-featured-article > .lr-card-media { width: 100%; height: 160px; }
}
@media (max-width: 560px) { .how-to-card.lr-wide { grid-column: span 1; } }

/* Tools: four small icon cards in one row; phones: icon, text and arrow on one line, so four of them do not fill a screen each */
.lr-toolrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* each tool with its own 3D render on the market cards' band, title, line and an Open link */
.lr-trcard-media { height: 150px; }
/* the tool's tag over its image band, and a soft accent glow on hover */
.lr-trcard-tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 10px; border: 1px solid rgba(37, 99, 235, 0.14); border-radius: 100px; background: #fff; font-size: 11px; font-weight: 700; color: var(--color-accent-on-tint); }
.lr-trcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, 0); transition: box-shadow var(--transition); pointer-events: none; }
.lr-trcard:hover::after { box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, 0.35); }
.lr-trcard .lr-img { background: radial-gradient(ellipse at 50% 60%, rgba(96, 165, 250, 0.22), transparent 70%), #f0f5ff; }
.lr-trcard .lr-img-art { width: 108px; height: 108px; }
.lr-trcard:hover .lr-img-art { transform: scale(1.06); }
.lr-trcard-body { gap: 8px; }
.lr-trcard-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--lr-link); }
.lr-trcard-go .lr-icon { transition: transform var(--transition); }
.lr-trcard:hover .lr-trcard-go .lr-icon { transform: translateX(4px); }
@media (max-width: 900px) { .lr-toolrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: two across, smaller images, no line of text */
@media (max-width: 560px) {
  .lr-toolrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lr-trcard { padding: 22px 16px 18px; }
  .lr-trcard > .lr-card-media { height: 96px; margin: -22px -16px 0; }
  .lr-trcard .lr-img-art { width: 70px; height: 70px; }
  .lr-trcard-title { font-size: 14.5px; }
  .lr-trcard-text { display: none; }
  .lr-trcard-go { font-size: 12.5px; }
}

/* Spotlight and the Trading Psychology section pages: two across, each card the width it has three across on the market pages, centred */
.lr-spotlight, .tp-cards--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
@media (min-width: 992px) { .lr-spotlight, .tp-cards--2col { grid-template-columns: repeat(2, minmax(0, calc((100% - 40px) / 3))); justify-content: center; } }
@media (max-width: 560px) { .lr-spotlight, .tp-cards--2col { grid-template-columns: minmax(0, 1fr); } }
.lr-spot .price-driver-card-top { display: flex; }
.lr-spot-link { font-size: 13.5px; font-weight: 700; color: var(--lr-link); }
.price-driver-card--accent .lr-spot-link { color: var(--color-text-light); }
.price-driver-card--accent .lr-bento-icon { background: rgba(255, 255, 255, 0.14); color: var(--color-text-light); }
.lr-spot .price-driver-title, .lr-spot .price-driver-body { display: block; }

/* whole card as a link */
.tp-card { position: relative; }
.tp-card--link .tp-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tp-card--link:has(.tp-card-title a:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tp-card-title a:hover { color: var(--lr-link); }
.tp-card-go { display: inline-flex; margin-top: auto; padding-top: 14px; color: var(--lr-link); transition: transform var(--transition); }
.tp-card--link:hover .tp-card-go { transform: translateX(4px); }

/* ── filter pills: the look of the platforms tabs ── */
.lr-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 36px; }
.lr-pills[hidden] { display: none; }
.lr-pill { padding: 9px 20px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); font-family: var(--font); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.6); transition: all 0.25s ease; }
.lr-pill:hover { color: #93c5fd; }
.lr-pill.is-active { background: rgba(37, 99, 235, 0.25); border-color: rgba(37, 99, 235, 0.4); color: #93c5fd; box-shadow: 0 2px 12px rgba(37, 99, 235, 0.2); }

/* pagination and load more */
.lr-pagination { margin-top: 36px; }
.lr-pagination[hidden] { display: none; }
.lr-pagination ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.lr-page-btn { min-width: 42px; height: 42px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; font-family: var(--font); font-size: 14px; font-weight: 600; color: #f0f6ff; transition: background var(--transition), border-color var(--transition); }
.lr-page-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
.lr-page-btn[aria-current="page"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-light); }
.lr-page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lr-more { display: flex; justify-content: center; }
.lr-more[hidden] { display: none; }

/* ── news: heading, then the market filter under it, then the stories in the three-column grid ── */
.lr-head--bare:has(+ .lr-pills) { margin-bottom: 22px; }
.lr-list .lr-more { margin-top: 28px; }
/* the "Our analysts" tile opens the grid as a wide card, so the five items make full rows: title and note on one side, the people on the other, centred in the height of the row */
.price-driver-card.lr-analysts { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; align-content: center; column-gap: 32px; }
.lr-analysts-title { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; align-self: end; }
.lr-analysts-note { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: 0; }
.lr-analysts-list { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; flex-direction: column; gap: 16px; }
.lr-analysts-list li { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-text-light); }
.lr-analysts-list strong { display: block; font-weight: 700; }
.lr-analysts-role { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.65); }
.lr-analysts .lr-avatar { background: rgba(255, 255, 255, 0.14); }
@media (max-width: 560px) {
  .price-driver-card.lr-analysts { grid-column: span 1; display: flex; }
  .lr-analysts-list { margin-bottom: 14px; }
}

/* ── webinars ── */
.lr-event { gap: 14px; }
.lr-event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 58px; height: 62px; border-radius: var(--radius-sm); background: var(--lr-tile); color: var(--lr-link); }
.lr-event-day { font-size: 22px; font-weight: 800; line-height: 1; }
.lr-event-month { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.lr-event-body, .lr-past-body { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.lr-event .price-driver-title, .lr-event .price-driver-body { margin: 0; }
.lr-event-host { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--lr-muted); }
.lr-event-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.lr-past-btn { align-self: flex-start; gap: 8px; }
[data-lr-upcoming-grid][hidden], [data-lr-past-grid][hidden], .lr-empty-state[hidden], [data-lr-live][hidden], [data-lr-ended][hidden] { display: none !important; }
.lr-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto; text-align: center; }
.price-driver-card.lr-empty-state { max-width: 640px; padding: 44px 32px; }
.lr-empty-title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: var(--lr-text); }
.lr-empty-text { font-size: 15px; line-height: 1.7; color: var(--lr-body); }
.lr-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.lr-empty-state--small { font-size: 15px; color: var(--lr-muted); }
.lr-event-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; max-width: 1000px; }
.lr-event-card { position: sticky; top: calc(var(--header-height) + 16px); }
.lr-facts { display: flex; flex-direction: column; gap: 14px; }
.lr-facts dt { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lr-muted); }
.lr-facts dd { font-size: 15px; font-weight: 600; color: var(--lr-text); }
.lr-event-btn { gap: 8px; width: 100%; }
@media (max-width: 991px) { .lr-event-detail { grid-template-columns: minmax(0, 1fr); } .lr-event-card { position: static; } }

/* the card that links to another tool: a strip (Webinars) or a how-to card (the tool pages' Related row) */
.lr-linkcard-row { max-width: 1000px; margin: 36px auto 0; }
.lr-linkcard { flex-wrap: nowrap; }
.lr-linkcard-body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.lr-linkcard-body strong { font-size: 15px; font-weight: 700; color: var(--lr-text); }
.lr-linkcard-body span { font-size: 13.5px; line-height: 1.6; color: var(--lr-body); }
.lr-linkcard-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--lr-link); white-space: nowrap; }
.how-to-card.lr-linkcard { gap: 12px; }
.how-to-card .lr-linkcard-body { gap: 8px; }
.how-to-card .lr-linkcard-body strong { font-size: 17px; line-height: 1.3; color: #0d1321; }
.how-to-card .lr-linkcard-body span { font-size: 13px; line-height: 1.7; color: rgba(15, 23, 42, 0.5); }
@media (max-width: 767px) { .price-driver-strip.lr-linkcard { flex-direction: column; align-items: flex-start; text-align: start; } }
@media (max-width: 560px) {
  .how-to-card.lr-linkcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 14px; }
  .how-to-card.lr-linkcard .lr-bento-icon { grid-row: 1 / span 2; }
  .how-to-card.lr-linkcard .lr-linkcard-cta { grid-column: 2; }
}
/* These strings are English on every locale. On a right-to-left page: their full stop stays at the end, the arrow points the way the page reads. */
.lr-linkcard-body span:dir(rtl), .lr-linkcard-cta:dir(rtl) { unicode-bidi: plaintext; text-align: right; }
.lr-linkcard-cta .lr-icon:dir(rtl) { transform: scaleX(-1); }

/* the note under a tool */
.lr-tool-note { margin-top: 20px; text-align: center; font-size: 11px; line-height: 1.6; color: rgba(240, 246, 255, 0.45); }

/* ── gold: the chart and historical-data cards ── */
.lr-gold-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.lr-gold-top > * { min-width: 0; }
.lr-gold-top .lr-chartcard { min-height: 400px; }
.lr-chartcard { min-width: 0; }
.how-to-card.lr-chartcard:hover { transform: none; box-shadow: 0 4px 24px rgba(37, 99, 235, 0.07); border-color: rgba(37, 99, 235, 0.1); }
.price-driver-card.lr-chartcard:hover { transform: none; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.07); }
.lr-tv { position: relative; display: flex; flex: 1; flex-direction: column; min-height: var(--lr-tv-h, 0); }
.lr-tv-frame { display: block; flex: 1; width: 100%; min-height: inherit; border: 0; }
.lr-tv-frame[hidden], .lr-tv-consent[hidden] { display: none; }
.lr-tv-consent { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--lr-body); }
.lr-panel-sub { margin-top: -6px; font-size: 13px; line-height: 1.6; color: var(--lr-muted); }
.lr-panel-subtitle { margin: 6px 0 -2px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lr-muted); }
.lr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.lr-tile-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lr-muted); }
.lr-tile-change { margin: 2px 0; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.lr-tile-range { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--lr-body); }
.lr-hist-wrap { overflow-x: auto; }
.lr-hist-table th, .lr-hist-table td { padding: 8px 10px; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lr-table.lr-hist-table td, .lr-table.lr-hist-table thead th:not(:first-child) { text-align: right; }
.lr-hist-body { display: flex; flex: 1; flex-direction: column; gap: 14px; min-height: 0; }
.lr-hist-body[hidden], .lr-hist-unavailable[hidden] { display: none; }
.lr-hist-unavailable { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 160px; padding: 24px; text-align: center; font-size: 15px; font-weight: 600; color: var(--lr-body); }
.lr-movers { max-width: 860px; }
@media (max-width: 991px) {
  .lr-gold-top { grid-template-columns: minmax(0, 1fr); }
  .lr-gold-top .lr-chartcard { min-height: 0; }
  .lr-gold-top > .lr-chartcard:first-child { min-height: 420px; }
}
@media (max-width: 575px) {
  .lr-gold-top > .lr-chartcard:first-child { min-height: 360px; }
  .lr-hist-table .lr-col-hl { display: none; }
}

/* cards that are not links do not lift on hover */
.how-to-card.lr-static-card:hover { transform: none; box-shadow: 0 4px 24px rgba(37, 99, 235, 0.07); border-color: rgba(37, 99, 235, 0.1); }
.price-driver-card.lr-static-card:hover, .price-driver-card.lr-empty-state:hover { transform: none; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.07); }

/* ── gold guide: About gold and Trading gold CFDs side by side ── */
.lr-guide-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1000px; }
.lr-guide-card { gap: 18px; padding: 32px 30px; scroll-margin-top: calc(var(--header-height) + 16px); }
.lr-guide-card-top { display: flex; align-items: center; gap: 16px; }
.lr-guide-card-art { flex-shrink: 0; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(59, 130, 246, 0.18)); }
.lr-guide-card-title { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.04em; color: var(--color-text-dark); }
.lr-guide-card-text { font-size: 15px; line-height: 1.75; }
.lr-guide-card-text p { margin-bottom: 14px; }
@media (max-width: 900px) { .lr-guide-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .lr-guide-card { padding: 26px 22px; } .lr-guide-card-title { font-size: 22px; } .lr-guide-card-art { width: 52px; height: 52px; } }
#gold-price-today, #gold-price-factors, #gold-risks { scroll-margin-top: var(--header-height); }
#gold-price-today .section-sub { max-width: 720px; }
/* a price factor: its 3D render on the market cards' band */
.lr-factor-art { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 110px; margin: -28px -24px 6px; background: #f0f5ff; border-bottom: 1px solid rgba(59, 130, 246, 0.07); }
.lr-factor-art img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(59, 130, 246, 0.15)); }
/* the risks: numbered dark cards, three then two, centred */
.lr-risk-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1000px; }
.lr-risk-grid > * { flex: 0 1 calc((100% - 40px) / 3); min-width: 0; }
.lr-risk-grid .lr-bento-icon { width: 40px; height: 40px; border-radius: 10px; }
.lr-risk-grid .price-driver-title { font-size: 18px; }
.lr-risk-close { margin-top: 32px; text-align: center; font-size: 15px; font-weight: 700; color: var(--color-text-light); }
@media (max-width: 900px) { .lr-risk-grid > * { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .lr-risk-grid > * { flex-basis: 100%; } }

/* "On this page" chips */
.lr-jump { justify-content: center; align-items: center; margin-bottom: 40px; }
.lr-jump-label { flex-basis: 100%; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lr-muted); }
.lr-jump a:hover { border-color: rgba(37, 99, 235, 0.3); color: var(--color-accent-on-tint); }

/* related news: rows in a white board (.scoreboard-board) */
.lr-newslist { margin-bottom: 0; }
.lr-newslist li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 16px 24px; border-bottom: 1px solid rgba(37, 99, 235, 0.08); }
.lr-newslist li:last-child { border-bottom: 0; }
.lr-newslist a { font-size: 14px; font-weight: 600; color: #0d1321; }
.lr-newslist a:hover { color: var(--lr-link); }
.lr-newslist-meta { display: flex; gap: 10px; font-size: 12px; font-weight: 500; color: var(--lr-muted); }
@media (max-width: 767px) { .lr-newslist li { padding: 14px 16px; } }

/* mobile sticky trade bar */
.lr-stickybar { display: none; }
.lr-sellbuy { display: flex; flex-direction: column; font-weight: 800; transition: filter var(--transition); }
.lr-sellbuy:hover { filter: brightness(1.06); }
.lr-sellbuy-label { font-size: 14px; }
.lr-sellbuy--sell { background: var(--lr-down); color: var(--color-text-light); }
.lr-sellbuy--buy { background: var(--color-accent); color: var(--color-text-light); }
@media (max-width: 767px) {
  .lr-page--bar { padding-bottom: 76px; }
  .lr-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 10px var(--container-pad) calc(10px + env(safe-area-inset-bottom)); background: var(--color-bg-white); border-top: 1px solid rgba(15, 23, 42, 0.16); box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1); transition: transform 0.25s ease; }
  .lr-stickybar.is-hidden { transform: translateY(110%); }
  .lr-stickybar-title { display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; color: var(--color-text-dark); }
  .lr-stickybar-title span { font-size: 12px; font-weight: 600; color: var(--color-text-muted-on-tint); }
  .lr-sellbuy--mini { min-width: 88px; padding: 10px 14px; border-radius: var(--radius-sm); align-items: center; }
}

/* ── reading text: left-aligned in a centred column, the section heading's style scaled down ── */
.lr-reading { max-width: 760px; text-align: start; }
.lr-prose { color: var(--lr-body); }
.lr-prose p { margin-bottom: 18px; }
.lr-prose > :last-child { margin-bottom: 0; }
.lr-prose h2 { margin: 44px 0 14px; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.04em; color: var(--lr-text); scroll-margin-top: 16px; }
.lr-prose > h2:first-child { margin-top: 0; }
.lr-prose strong { font-weight: 700; color: var(--lr-text); }
.lr-prose a { color: var(--lr-link); text-decoration: underline; text-underline-offset: 3px; }
.lr-prose ul, .lr-prose ol { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.lr-prose ul > li { position: relative; padding-inline-start: 22px; }
.lr-prose ul > li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.lr-prose ol { counter-reset: lr-ol; }
.lr-prose ol > li { position: relative; padding-inline-start: 38px; counter-increment: lr-ol; }
.lr-prose ol > li::before { content: counter(lr-ol); position: absolute; inset-inline-start: 0; top: 0.1em; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lr-tile); color: var(--lr-link); font-size: 13px; font-weight: 800; line-height: 1; }
.lr-prose .lr-note { text-align: start; }
@media (max-width: 991px) { .lr-prose h2 { font-size: 26px; } }
@media (max-width: 767px) { .lr-prose h2 { font-size: 22px; margin-top: 32px; } }

.lr-article-hero { margin-bottom: 36px; }
.lr-article-hero .lr-img { height: 260px; border-radius: var(--radius-lg); border: 1.5px solid rgba(37, 99, 235, 0.1); background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.16), transparent 65%), #f0f5ff; }
.lr-article-hero .lr-img-art { width: 190px; height: 190px; filter: drop-shadow(0 12px 32px rgba(37, 99, 235, 0.2)); }
@media (max-width: 767px) { .lr-article-hero .lr-img { height: 180px; } .lr-article-hero .lr-img-art { width: 130px; height: 130px; } }
.lr-article-foot { display: flex; flex-direction: column; gap: 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--lr-rule); }
.lr-author-card { display: flex; gap: 16px; }
.lr-author-card-name { font-size: 15px; font-weight: 700; color: var(--lr-text); }
.lr-author-card-role { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--lr-link); }
.lr-author-card-bio { font-size: 14px; line-height: 1.7; color: var(--lr-body); }
.lr-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lr-share-label { margin-inline-end: 4px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lr-muted); }
.lr-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 100px; border: 1px solid rgba(59, 59, 59, 0.12); background: transparent; font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--lr-text); transition: background var(--transition), border-color var(--transition); }
.lr-share-btn:hover { background: #f3f4f6; border-color: rgba(59, 59, 59, 0.25); }
.lr-share-copy { padding: 0 16px; font-size: 13px; }
@media (max-width: 767px) { .lr-author-card { flex-direction: column; } .lr-empty-actions > * { flex: 1 1 100%; max-width: 320px; } }

/* tables: a white card with a light header row. A wide table scrolls inside its card; the soft shadow at the edge shows there is more. */
.lr-table-wrap {
  max-width: 860px; overflow-x: auto; border: 1.5px solid rgba(37, 99, 235, 0.08); border-radius: var(--radius-lg); box-shadow: 0 2px 20px rgba(37, 99, 235, 0.06);
  background:
    linear-gradient(to right, #fff 24px, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat local,
    linear-gradient(to left, #fff 24px, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(13, 19, 33, 0.14), transparent) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(13, 19, 33, 0.14), transparent) 100% 0 / 14px 100% no-repeat scroll,
    var(--color-bg-white);
}
.lr-prose .lr-table-wrap { margin: 4px 0 24px; }
.lr-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; text-align: start; }
.lr-table th, .lr-table td { padding: 12px 18px; text-align: start; vertical-align: top; border-bottom: 1px solid rgba(37, 99, 235, 0.06); color: var(--color-text-dark-muted); }
.lr-table thead th { background: rgba(37, 99, 235, 0.04); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted-on-tint); white-space: nowrap; }
.lr-table tbody tr:last-child > * { border-bottom: 0; }
.lr-table tbody th { font-weight: 700; color: #0d1321; }
.lr-table td.lr-up { color: var(--lr-up-text); }
.lr-table td.lr-down { color: var(--lr-down-text); }
.tp-table { min-width: 520px; }
.tp-table .tp-fill { height: 52px; min-width: 200px; }
.tp-table strong { white-space: nowrap; }
@media (max-width: 767px) { .tp-table { font-size: 13px; } }
/* a table of chips wraps its chips: only a table of text needs to scroll. On a phone each row stacks: the section, then its chips. */
.tp-table:has(.tp-terms) { min-width: 0; }
@media (max-width: 575px) {
  .tp-table:has(.tp-terms), .tp-table:has(.tp-terms) tbody, .tp-table:has(.tp-terms) tr, .tp-table:has(.tp-terms) th, .tp-table:has(.tp-terms) td { display: block; width: 100%; }
  .tp-table:has(.tp-terms) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tp-table:has(.tp-terms) tbody tr { border-bottom: 1px solid rgba(37, 99, 235, 0.06); }
  .tp-table:has(.tp-terms) tbody tr:last-child { border-bottom: 0; }
  .tp-table:has(.tp-terms) tbody th { padding: 14px 16px 2px; border-bottom: 0; }
  .tp-table:has(.tp-terms) tbody td { padding: 2px 14px 14px; border-bottom: 0; }
}

/* ── Trading Psychology ── */
/* the risk warning (the compliance placeholder, data-compliance="placeholder"): on every page, above the H1, as a notice */
.tp-risk { display: flex; align-items: flex-start; gap: 10px; max-width: 680px; margin-bottom: 28px; padding: 12px 16px; border: 1px solid rgba(37, 99, 235, 0.14); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.72); font-size: 12px; line-height: 1.6; text-align: start; color: var(--color-text-dark-muted); }
.tp-risk .lr-icon { flex-shrink: 0; margin-top: 1px; color: var(--color-accent); }
/* the four sections: two across, each the width of a three-across sector card; the link lists end on one line */
.tp-cards.market-listing-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .tp-cards.market-listing-sectors { grid-template-columns: repeat(2, minmax(0, calc((100% - 32px) / 3))); justify-content: center; } }
/* alone in a column there is no neighbour to match, so the card is as tall as its content */
@media (max-width: 767px) { .tp-cards.market-listing-sectors { grid-template-columns: minmax(0, 1fr); } .tp-cards .market-listing-sector-card { min-height: 0; } }
.tp-cards .market-listing-sector-card { display: flex; flex-direction: column; }
.tp-cards .how-to-card-desc { margin-bottom: 12px; }
.tp-card-links { margin-top: auto; }
.tp-card-links li { padding: 4px 0; font-size: 12px; border-bottom: 1px solid rgba(37, 99, 235, 0.07); }
.tp-card-links li:last-child { border-bottom: 0; }
.tp-card-links a { position: relative; z-index: 1; font-weight: 600; color: var(--lr-link); }
.tp-card-links a:hover { text-decoration: underline; }
.market-listing-sector-top .lr-bento-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.tp-cards--2col .price-driver-title { margin-bottom: 8px; }
.tp-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; max-width: 860px; counter-reset: tp-check; }
.tp-checklist li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--lr-rule); font-size: 15px; line-height: 1.6; color: var(--lr-text); counter-increment: tp-check; text-align: start; }
.tp-checklist li::before { content: counter(tp-check); flex: 0 0 28px; display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 50%; background: var(--color-accent); color: var(--color-text-light); font-size: 13px; font-weight: 800; line-height: 1; }
@media (max-width: 767px) { .tp-checklist { grid-template-columns: minmax(0, 1fr); } }
.basic-faq-accordion-icon:empty::before { content: '+'; }
.lr-faq-q { font-size: inherit; font-weight: inherit; }
/* the live section is pinned to one screen; here it grows if an open answer needs the room */
.lr-page .basic-faq.section-vh-lg { height: auto; min-height: 100vh; padding-top: 60px; padding-bottom: 60px; }
.tp-terms .landing-split-chip { display: inline-flex; margin: 3px 2px; white-space: normal; transition: border-color var(--transition), color var(--transition); }
.tp-terms .landing-split-chip:hover { border-color: rgba(37, 99, 235, 0.3); color: var(--color-accent-on-tint); }
@media (pointer: coarse) { .tp-terms .landing-split-chip { padding: 9px 14px; font-size: 12px; } }
.tp-glossary { font-size: 14px; line-height: 1.8; color: var(--lr-text); }
.tp-glossary strong { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 700; }
.tp-next { padding-top: 6px; border-top: 1px solid var(--lr-rule); width: 100%; }
.tp-next-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--lr-link); }
.tp-next-link:hover { opacity: 0.7; }
.tp-end-card { align-items: center; max-width: 860px; padding: 30px 28px; text-align: center; }

/* a card's small 3D render, where a card would otherwise carry a line icon: every Learning card uses the site's renders */
.lr-art-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 56px; height: 56px; }
.lr-art-tile img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.18)); }
.market-listing-sector-top .lr-art-tile { width: 44px; height: 44px; }
.lr-empty-state .lr-art-tile { width: 80px; height: 80px; }
.lr-linkcard .lr-art-tile { width: 48px; height: 48px; }
/* article and topic headers: the page's 3D render above the pill */
.lr-head-art { margin-bottom: 18px; }
.lr-head-art img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 14px 34px rgba(37, 99, 235, 0.22)); }
@media (max-width: 767px) { .lr-head-art img { width: 96px; height: 96px; } }

/* in a full-screen section, the content a little larger so it fills its screen */
@media (min-width: 992px) {
  .lr-spotlight { grid-template-columns: repeat(2, minmax(0, 440px)); }
  .lr-spot { padding: 34px 32px; }
  .lr-spot .lr-spot-title { font-size: 24px; line-height: 1.25; }
  .lr-spot .lr-spot-text { font-size: 15px; }
  .lr-toolrow { gap: 18px; max-width: 1060px; }
  .lr-trcard { padding: 30px 26px 28px; }
  .lr-trcard > .lr-card-media { height: 220px; margin: -30px -26px 4px; }
  .lr-trcard .lr-img-art { width: 160px; height: 160px; }
  .lr-trcard-title { font-size: 20px; }
  .lr-trcard-text { font-size: 14.5px; }
  .lr-trcard-go { font-size: 14.5px; }
  /* Explore All hero: three preview cards a little wider, so a title next to its image stays on one line */
  .lr-hv .market-stat-card--light { max-width: 320px; }
  .lr-hv .market-stat-val { white-space: nowrap; }
  .lr-hv .market-stat-card--light:first-child .market-stat-val { white-space: normal; }
  .price-driver-card.lr-empty-state { max-width: 760px; padding: 64px 48px; }
  .lr-empty-title { font-size: 26px; }
  .lr-empty-text { font-size: 16px; }
  .lr-gold-top .lr-chartcard { min-height: 520px; }
  .lr-newslist li { padding: 22px 28px; }
  .lr-newslist a { font-size: 16px; }
  .lr-page .bg-dark > .container > .lr-reading { max-width: 860px; }
  .lr-page .bg-dark > .container > .lr-reading .lr-prose { font-size: 19px; }
  .tp-checklist { max-width: 1000px; }
  .tp-checklist li { padding: 22px 0; font-size: 17px; }
  .tp-table th, .tp-table td { padding: 16px 22px; font-size: 15px; }
  .lr-table-wrap.tp-table-wrap { max-width: 1000px; }
}

/* ══════════ Explore All: the Learning section's own front page ══════════ */
/* ── the Learning landing hero (TrayHero): text, a tray of glossy tiles in the middle, the buttons below ── */
.lr-hero-v.section-vh-hero { padding-top: calc(var(--header-height) + 48px); padding-bottom: 44px; }
.lr-hero-v .lr-lead { max-width: 640px; margin-bottom: 0; }
.lr-hero-v .lr-lead + .lr-lead { margin-top: 10px; }
.lr-hero-v .hero-heading span { color: var(--color-accent); }
.lr-hero-v .tp-risk { margin-bottom: 22px; }
.lr-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 26px 0 8px; }
.lr-tray-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 136px; height: 100%; padding: 16px 10px 14px; border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 24px; background: linear-gradient(160deg, #ffffff 0%, #eef4ff 100%); box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12), inset 0 1px 0 #fff; text-align: center; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.lr-tray > li { display: flex; }
.lr-tray-tile:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(37, 99, 235, 0.2), inset 0 1px 0 #fff; }
.lr-tray-art { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 20px; background: radial-gradient(circle at 50% 55%, rgba(96, 165, 250, 0.28), rgba(219, 234, 254, 0.5) 60%, transparent 75%); }
.lr-tray-art img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(30, 58, 138, 0.22)); }
.lr-tray-name { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--color-text-dark); }
.lr-tray-meta { margin-top: -4px; font-size: 11.5px; font-weight: 600; color: var(--color-text-muted-on-tint); }
.lr-tray-tile:hover .lr-tray-name { color: var(--color-accent-on-tint); }
/* the tile for the page you are on */
.lr-tray-tile.is-current { border-color: var(--color-accent); background: linear-gradient(160deg, #1e3a8a 0%, #1d4ed8 100%); box-shadow: 0 18px 40px rgba(37, 99, 235, 0.32); }
.lr-tray-tile.is-current .lr-tray-name, .lr-tray-tile.is-current:hover .lr-tray-name { color: #fff; }
.lr-tray-tile.is-current .lr-tray-meta { color: rgba(255, 255, 255, 0.75); }
.lr-tray-tile.is-current .lr-tray-art { background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.3), transparent 72%); }
.lr-hero-a .lr-breadcrumb { margin-top: 24px; }
@media (max-width: 767px) {
  .lr-hero-v.section-vh-hero { padding-top: calc(var(--header-height) + 40px); }
  .lr-hero-v .lr-lead + .lr-lead { margin-top: 8px; }
  .lr-tray { gap: 10px; margin-top: 22px; }
  .lr-tray > li { width: calc(33.33% - 7px); }
  .lr-tray-tile { width: 100%; padding: 12px 6px 10px; border-radius: 18px; }
  .lr-tray-art { width: 60px; height: 60px; }
  .lr-tray-art img { width: 50px; height: 50px; }
  .lr-tray-name { font-size: 12.5px; }
  .lr-tray-meta { font-size: 10.5px; }
}
@keyframes lr-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-3deg); } }


/* where to start: one panel per kind of trader, three linked steps each */
.lr-auds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1060px; }
.lr-aud { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 36px 34px 34px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; background: rgba(255, 255, 255, 0.04); transition: border-color var(--transition), transform var(--transition); }
.lr-aud:hover { border-color: rgba(96, 165, 250, 0.3); transform: translateY(-4px); }
.lr-aud--accent { border-color: rgba(96, 165, 250, 0.25); background: linear-gradient(145deg, #1e3a8a 0%, #1d4ed8 100%); box-shadow: 0 18px 50px rgba(37, 99, 235, 0.3); }
.lr-aud::after { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(96, 165, 250, 0.16), transparent 70%); pointer-events: none; }
.lr-aud-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.lr-aud-intro { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lr-aud-kicker { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #60a5fa; }
.lr-aud--accent .lr-aud-kicker { color: rgba(255, 255, 255, 0.72); }
.lr-aud-title { font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.8px; color: var(--color-text-light); }
/* both panel titles hold one line on desktop, so the two panels line up */
@media (min-width: 901px) { .lr-aud-title { white-space: nowrap; } }
/* up to 1399px a side-by-side image would squeeze the title: the image sits above it instead */
@media (max-width: 1399px) { .lr-aud-head { flex-direction: column-reverse; align-items: flex-start; gap: 14px; } .lr-aud-art { flex-basis: auto; width: 88px; height: 88px; } }
.lr-aud-text { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.6); }
.lr-aud--accent .lr-aud-text { color: rgba(255, 255, 255, 0.8); }
.lr-aud-art { flex: 0 0 116px; height: 116px; animation: lr-float 7s ease-in-out infinite; }
.lr-aud--accent .lr-aud-art { animation-delay: -3.5s; }
.lr-aud-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.35)); }
.lr-aud-points { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.lr-aud-points a { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-light); transition: color var(--transition); }
.lr-aud-check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
.lr-aud--accent .lr-aud-check { background: rgba(255, 255, 255, 0.18); color: var(--color-text-light); }
.lr-aud-point { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.4; }
.lr-aud-points a > .lr-icon { flex-shrink: 0; color: #93c5fd; transition: transform var(--transition); }
.lr-aud--accent .lr-aud-points a > .lr-icon { color: var(--color-text-light); }
.lr-aud-points a:hover .lr-aud-point { color: #bfdbfe; }
.lr-aud-points a:hover > .lr-icon { transform: translateX(4px); }
.lr-aud-btn { align-self: flex-start; margin-top: auto; }
.btn-primary.lr-aud-btn--light { background: var(--color-text-light); border-color: var(--color-text-light); color: #1e3a8a; }
.btn-primary.lr-aud-btn--light:hover { background: #dbeafe; border-color: #dbeafe; }
@media (max-width: 900px) { .lr-auds { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lr-aud { padding: 26px 22px; } .lr-aud-title { font-size: 23px; } .lr-aud-art { flex-basis: 78px; height: 78px; } .lr-aud-btn { align-self: stretch; } }
@media (prefers-reduced-motion: reduce) { .lr-aud, .lr-aud-art { transition: none; animation: none; } }

/* news desk with a market snapshot: snapshot, lead story, more headlines */
.lr-desk--3 { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.12fr) minmax(0, 1fr); max-width: 1060px; }
.lr-desk-snap { gap: 0; padding: 22px 22px 18px; }
.lr-snap-list li { border-bottom: 1px solid var(--lr-rule); }
.lr-snap-list li:last-child { border-bottom: 0; }
.lr-snap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; }
.lr-snap-sym { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lr-snap-sym strong { font-size: 14px; font-weight: 800; color: var(--lr-text); }
.lr-snap-sym span { font-size: 11px; font-weight: 600; color: var(--lr-muted); }
.lr-snap-row:hover strong { color: var(--lr-link); }
.lr-snap-note { margin-top: auto; padding-top: 12px; font-size: 11px; line-height: 1.5; color: var(--lr-muted); }
@media (max-width: 1100px) { .lr-desk--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lr-desk--3 .lr-desk-snap { grid-column: 1 / -1; order: 3; } .lr-desk--3 .lr-snap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 20px; } }
@media (max-width: 900px) { .lr-desk--3 { grid-template-columns: minmax(0, 1fr); } }

/* blog: the newest guide featured, the next three beside it */
.lr-blogdesk { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; max-width: 1060px; }
.lr-blog-lead > .lr-card-media { height: 230px; }
.lr-blog-lead .lr-img-art { width: 150px; height: 150px; }
.lr-blog-lead-title { font-size: 22px; line-height: 1.3; letter-spacing: -0.4px; }
.lr-blog-lead-title a:hover { color: var(--lr-link); }
.lr-blog-lead-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; }
.lr-blog-lead-foot .lr-author { margin-top: 0; padding-top: 0; }
.lr-blog-read { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--lr-link); }
.lr-blog-rows { display: flex; flex-direction: column; gap: 12px; }
.lr-blog-rows li { flex: 1; display: flex; }
.how-to-card.lr-blog-row { flex: 1; flex-direction: row; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; }
.lr-blog-row-art { flex: 0 0 118px; align-self: stretch; min-height: 96px; border-radius: 14px; overflow: hidden; }
.lr-blog-row-art .lr-img-art { width: 76px; height: 76px; }
.lr-blog-row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lr-blog-row-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--lr-text); transition: color var(--transition); }
.lr-blog-row:hover .lr-blog-row-title { color: var(--lr-link); }
.lr-blog-row-by { font-size: 12px; font-weight: 600; color: var(--lr-muted); }
@media (max-width: 900px) { .lr-blogdesk { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lr-blog-row-art { flex-basis: 88px; min-height: 84px; } .lr-blog-row-art .lr-img-art { width: 58px; height: 58px; } .lr-blog-row-title { font-size: 14.5px; } }

/* spotlight: a sliding row of cards, three in view, swipe or arrows, advancing on its own */
.lr-carousel { max-width: 1060px; }
.lr-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 8px; }
.lr-carousel-track::-webkit-scrollbar { display: none; }
.lr-carousel-track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 20px; }
.lr-slide { scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; background: rgba(255, 255, 255, 0.04); transition: border-color var(--transition), transform var(--transition); }
.lr-slide:hover { border-color: rgba(96, 165, 250, 0.3); transform: translateY(-4px); }
.lr-slide-media { display: flex; align-items: center; justify-content: center; height: 170px; background: rgba(255, 255, 255, 0.03); }
.lr-slide-media img { width: 128px; height: 128px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(96, 165, 250, 0.2)); transition: transform 0.45s ease; }
.lr-slide:hover .lr-slide-media img { transform: scale(1.06); }
.lr-slide-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.lr-slide-kicker { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #60a5fa; }
.lr-slide-title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; color: var(--color-text-light); }
.lr-slide-text { font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.55); }
.lr-slide-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; color: #93c5fd; }
/* centre spotlight (with the script): the card in the middle takes the site's accent card (the deep blue gradient), slightly larger; the ones either side
   step back. Spacers the width of a card at each end let the first and last cards reach the middle too. */
.lr-carousel.is-centered .lr-carousel-track { padding-top: 18px; padding-bottom: 24px; }
.lr-carousel.is-centered .lr-carousel-track::before, .lr-carousel.is-centered .lr-carousel-track::after { content: ''; }
.lr-carousel.is-centered .lr-slide { scroll-snap-align: center; opacity: 0.5; transform: scale(0.92); transition: transform 0.55s ease, opacity 0.55s ease, background 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease; }
.lr-carousel.is-centered .lr-slide:hover { opacity: 0.8; }
.lr-carousel.is-centered .lr-slide.is-center { opacity: 1; transform: scale(1.04); border-color: rgba(96, 165, 250, 0.25); background: linear-gradient(145deg, #1e3a8a, #1d4ed8); box-shadow: 0 26px 60px rgba(37, 99, 235, 0.38); }
.lr-slide.is-center .lr-slide-media { background: transparent; }
.lr-slide.is-center .lr-slide-media img { filter: drop-shadow(0 12px 26px rgba(37, 99, 235, 0.3)); }
.lr-slide.is-center .lr-slide-kicker { color: rgba(255, 255, 255, 0.72); }
.lr-slide.is-center .lr-slide-title { color: var(--color-text-light); }
.lr-slide.is-center .lr-slide-text { color: rgba(255, 255, 255, 0.8); }
.lr-slide.is-center .lr-slide-cta { color: var(--color-text-light); }
@media (prefers-reduced-motion: reduce) { .lr-carousel.is-centered .lr-slide { transition: none; } }
.lr-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.lr-carousel-nav[hidden] { display: none; }
.lr-carousel-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); color: var(--color-text-light); transition: background var(--transition), border-color var(--transition); }
.lr-carousel-btn:hover { background: var(--color-accent); border-color: var(--color-accent); }
.lr-carousel-btn[data-lr-prev] .lr-icon { transform: scaleX(-1); }
.lr-carousel-btn:disabled { opacity: 0.35; cursor: default; background: transparent; border-color: rgba(255, 255, 255, 0.15); }
.lr-carousel-dots { display: flex; gap: 8px; }
.lr-carousel-dot { width: 8px; height: 8px; padding: 0; border-radius: 100px; border: 0; background: rgba(255, 255, 255, 0.25); transition: width var(--transition), background var(--transition); }
.lr-carousel-dot[aria-current="true"] { width: 26px; background: var(--color-accent); }
@media (max-width: 991px) { .lr-carousel-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .lr-carousel-track { grid-auto-columns: 84%; gap: 12px; } .lr-slide-media { height: 130px; } .lr-slide-media img { width: 100px; height: 100px; } }
@media (prefers-reduced-motion: reduce) { .lr-carousel-track { scroll-behavior: auto; } .lr-slide { transition: none; } }

/* webinars, nothing scheduled: the message and its actions beside "While you wait", three places to learn meanwhile */
.price-driver-card.lr-empty-state.lr-webempty { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; gap: 0; max-width: 1000px; padding: 0; text-align: start; overflow: hidden; }
.lr-webempty-main { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 48px 44px; }
.lr-webempty-main .lr-art-tile { width: 84px; height: 84px; margin-bottom: 6px; }
.lr-webempty-kicker { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #60a5fa; }
.lr-webempty .lr-empty-title { font-size: 26px; line-height: 1.2; letter-spacing: -0.5px; }
.lr-webempty .lr-empty-text { font-size: 15.5px; }
.lr-webempty .lr-empty-actions { justify-content: flex-start; margin-top: 10px; }
.lr-webempty-side { display: flex; flex-direction: column; justify-content: center; padding: 40px 36px; border-inline-start: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); }
.lr-webempty-side-head { margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.lr-webempty-link { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: var(--color-text-light); }
.lr-webempty-list li:last-child .lr-webempty-link { border-bottom: 0; }
.lr-webempty-link .lr-art-tile { width: 52px; height: 52px; }
.lr-webempty-link-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.lr-webempty-link-body strong { font-size: 15.5px; font-weight: 700; }
.lr-webempty-link-body span { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); }
.lr-webempty-link > .lr-icon { flex-shrink: 0; color: #60a5fa; transition: transform var(--transition); }
.lr-webempty-link:hover strong { color: #93c5fd; }
.lr-webempty-link:hover > .lr-icon { transform: translateX(4px); }
@media (max-width: 860px) {
  .price-driver-card.lr-empty-state.lr-webempty { grid-template-columns: minmax(0, 1fr); }
  .lr-webempty-main { padding: 34px 24px 26px; }
  .lr-webempty-side { padding: 22px 24px 26px; border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
}
@media (max-width: 560px) { .lr-webempty .lr-empty-actions > * { flex: 1 1 100%; max-width: none; } }

/* ── section height: one section per screen, as the live pages' section-vh sections (Price Drivers, FAQ): a content section is
   at least the full screen tall with its content centred, so the end of the section before it never shows (only the
   closing band, just above the footer, is shorter) ── */
@media (min-width: 992px) {
  .lr-page > section:not(.lr-hero):not(.lr-closing):not(.how-it-works):not(.basic-faq), .gl-page > section.gl-hero:not(.section-vh-hero),
  .gl-page > section.gl-main { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; }
}
/* the related glossary terms close the section above them */
.lr-article-body .tp-end-card, .tp-cards + .tp-end-card { margin-top: 48px; }

/* ── stacked screens: sections stack with the live padding ── */
@media (max-width: 991px) {
  .lr-page .basic-faq.section-vh-lg { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
  /* the homepage's How it works section on these pages: the live class gives it no padding between 768px and 991px, and leaves its image off-centre */
  .lr-page .how-it-works.section-vh-lg { padding-top: 64px; padding-bottom: 64px; }
  .lr-page .how-it-works-visual { align-items: center; width: 100%; }
  .lr-page .how-it-works-frame { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lr-trcard-go .lr-icon, .tp-card-go, .lr-stickybar, .lr-sellbuy { transition: none; transform: none; }
}

/* ══════════ Gold (XAU/USD) page ══════════ */
.lr-hero .lr-jump { margin: 28px 0 0; }
#gold-in-60-seconds, #prices, #what-moves-gold, #holding-cost, #who-buys-gold, #events, #worked-trade, #risks, #myths, #questions, #reading, #news { scroll-margin-top: var(--header-height); }
.lr-tv-consent-title { font-size: 16px; font-weight: 800; color: var(--lr-text); }
/* gold in 60 seconds: four tiles in a row */
.lr-gold60 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1100px; }
.lr-gold60-tile { gap: 12px; }
.lr-gold60-label { align-self: flex-start; }
.lr-gold60-text { margin: 0; font-size: 17px; line-height: 1.4; }
/* prices: the fixed history card */
.lr-hist-source { margin-top: auto; padding-top: 4px; font-size: 11.5px; }
/* what moves gold */
.lr-gold-forces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1100px; }
.lr-gold-forces .price-driver-card-top { margin-bottom: 14px; }
.lr-gold-dollar { max-width: 760px; margin: 36px auto 0; text-align: center; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.lr-gold-dollar strong { color: #fff; }
/* the holding-cost calculator */
.lr-calc { max-width: 760px; gap: 18px; padding: 34px 34px 30px; }
.lr-calc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lr-calc-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--color-text-muted-on-tint); }
.lr-calc-field input { height: 50px; padding: 0 14px; border: 1.5px solid rgba(37, 99, 235, 0.16); border-radius: 12px; background: #f8fbff; font-family: var(--font); font-size: 17px; font-weight: 700; color: var(--color-text-dark); }
.lr-calc-field input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.lr-calc-result { padding: 18px 20px; border-radius: 14px; background: rgba(37, 99, 235, 0.07); font-size: 16px; line-height: 1.6; color: var(--color-text-dark); }
.lr-calc-result strong { font-size: 22px; font-weight: 800; color: var(--color-accent-on-tint); }
.lr-calc-after { font-size: 14.5px; line-height: 1.7; color: var(--color-text-dark-muted); }
.lr-calc-small { font-size: 12px; color: var(--color-text-muted-on-tint); }
/* who buys gold: a bar chart, one hue, values on the bars */
.lr-bars { max-width: 860px; margin: 0 auto; }
.lr-bars-list { display: flex; flex-direction: column; gap: 18px; }
.lr-bar { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) 72px; align-items: center; gap: 16px; }
.lr-bar-label { font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.lr-bar-track { height: 18px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.lr-bar-fill { display: block; width: var(--w); height: 100%; border-radius: 0 4px 4px 0; background: #3b82f6; transition: filter var(--transition); }
.lr-bar:hover .lr-bar-fill { filter: brightness(1.2); }
.lr-bar-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; color: #fff; }
.lr-bars-unit { margin-top: 14px; text-align: end; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.lr-bars-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 860px; margin: 36px auto 0; }
.lr-bars-notes p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); }
/* when gold moves most */
.lr-gold-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 960px; }
.lr-gold-events li { flex-direction: row; align-items: flex-start; gap: 16px; padding: 22px 24px; font-size: 15px; line-height: 1.65; color: var(--color-text-dark-muted); }
.lr-gold-events li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lr-gold-events strong { color: var(--color-text-dark); }
.lr-gold-events-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent); font-size: 13px; font-weight: 800; color: #fff; }
.lr-gold-cta-row { display: flex; justify-content: center; margin-top: 32px; }
/* worked trade */
.lr-gold-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1000px; }
.lr-gold-steps li { flex-direction: row; align-items: flex-start; gap: 16px; padding: 22px 24px; }
.lr-gold-steps p { font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.68); }
.lr-gold-steps strong { color: #fff; }
.lr-gold-steps .price-driver-num { flex-shrink: 0; padding-top: 3px; color: #60a5fa; }
.lr-gold-close { max-width: 760px; margin: 32px auto 0; text-align: center; }
.lr-gold-close p { font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); }
.lr-gold-close p + p { margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
/* risks, on a light section */
.lr-risk-card { gap: 10px; }
.lr-risk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lr-risk-num { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: rgba(37, 99, 235, 0.35); font-family: monospace; }
.lr-risk-close--light { color: var(--color-text-dark); }
/* myths and facts */
.lr-myths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1100px; }
.lr-myth { gap: 6px; }
.lr-myth .price-driver-title { font-size: 18px; margin-bottom: 8px; }
.lr-myth-tag { align-self: flex-start; padding: 3px 10px; border-radius: 100px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.lr-myth-tag--myth { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
.lr-myth-tag--fact { background: rgba(74, 222, 128, 0.13); color: #86efac; }
/* gold reading */
/* related news rows */
.lr-newslist-head { font-size: 15px; font-weight: 700; color: #0d1321; }
.lr-newslist-meta { flex-wrap: wrap; }
@media (max-width: 1100px) { .lr-gold60, .lr-gold-forces { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lr-myths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .lr-gold60, .lr-gold-forces, .lr-myths, .lr-gold-events, .lr-gold-steps, .lr-bars-notes { grid-template-columns: minmax(0, 1fr); }
  .lr-calc { padding: 24px 20px; }
  .lr-calc-fields { grid-template-columns: minmax(0, 1fr); }
  .lr-bar { grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 12px; }
  .lr-bar-label { grid-column: 1 / -1; font-size: 13.5px; }
}

/* ══════════ Final layouts: blog featured, news timeline, gold reading list, article rail, checklist ══════════ */
/* blog: the featured guide above the filter and grid */
#all-posts .lr-featured-article { margin-bottom: 30px; }

/* news: the roundup as a timeline feed, time on a rail with a dot per story */
.lr-timeline { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: 860px; padding-inline-start: 34px; }
.lr-timeline::before { content: ''; position: absolute; top: 10px; bottom: 10px; inset-inline-start: 9px; width: 2px; background: linear-gradient(180deg, rgba(96, 165, 250, 0.55), rgba(96, 165, 250, 0.08)); border-radius: 2px; }
.lr-timeline > .lr-news { position: relative; overflow: visible; }
.lr-timeline > .lr-news::before { content: ''; position: absolute; top: 26px; inset-inline-start: -31px; width: 14px; height: 14px; border-radius: 50%; background: #020c1b; border: 3px solid var(--color-accent); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18); }
.lr-timeline > .lr-news:first-child::before { background: var(--color-accent); animation: lr-ping 2.4s ease-out infinite; }
@keyframes lr-ping { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); } }
.lr-timeline .lr-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; padding: 18px 22px; }
.lr-timeline .lr-news-top { grid-column: 1 / -1; }
.lr-timeline .lr-news-title { margin: 0; font-size: 17px; }
.lr-timeline .lr-chips { margin: 0; padding: 0; justify-content: flex-end; }
@media (max-width: 767px) { .lr-timeline { padding-inline-start: 26px; } .lr-timeline > .lr-news::before { inset-inline-start: -24px; } .lr-timeline .lr-card-body { grid-template-columns: minmax(0, 1fr); } .lr-timeline .lr-chips { justify-content: flex-start; } }

/* gold articles: the featured guide, then a reading list of rows */
.lr-readlist { display: grid; gap: 18px; max-width: 1000px; }
.lr-readlist-lead .lr-featured-article { margin: 0; }
.lr-readlist-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lr-row { display: flex; align-items: stretch; gap: 16px; padding: 12px; border: 1.5px solid rgba(37, 99, 235, 0.1); border-radius: 18px; background: #fff; box-shadow: 0 4px 18px rgba(37, 99, 235, 0.06); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.lr-row:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, 0.28); box-shadow: 0 14px 32px rgba(37, 99, 235, 0.13); }
.lr-row-media { flex: 0 0 120px; min-height: 104px; overflow: hidden; border-radius: 12px; }
.lr-row-media .lr-img-art { width: 78px; height: 78px; }
.lr-row-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 4px 6px 4px 0; }
.lr-row-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--color-text-dark); }
.lr-row-title a:hover { color: var(--lr-link); }
.lr-row-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.6; color: var(--color-text-dark-muted); }
@media (max-width: 767px) { .lr-readlist-rows { grid-template-columns: minmax(0, 1fr); } .lr-row-media { flex-basis: 92px; } }

/* articles: a reading progress bar, and the contents rail beside the text from 1100px */
.lr-progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.lr-progress.is-on { opacity: 1; }
.lr-progress span { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); transform-origin: left center; transform: scaleX(0); }
.lr-toc { display: none; }
@media (min-width: 1100px) {
  .lr-reading--rail.has-toc { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 48px; max-width: 1030px; }
  .lr-reading--rail.has-toc > .lr-toc { display: block; grid-row: 1 / span 9; position: sticky; top: calc(var(--header-height) + 24px); align-self: start; padding: 20px 18px; border: 1.5px solid rgba(37, 99, 235, 0.1); border-radius: 18px; background: #f8fbff; }
  .lr-reading--rail.has-toc > :not(.lr-toc) { grid-column: 2; }
}
.lr-toc-head { margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-muted-on-tint); }
.lr-toc-list { display: flex; flex-direction: column; gap: 2px; }
.lr-toc-list a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--color-text-dark-muted); transition: background var(--transition), color var(--transition); }
.lr-toc-list a:hover { color: var(--color-accent-on-tint); }
.lr-toc-list a[aria-current="true"] { background: var(--color-accent); color: #fff; }
.lr-toc-n { flex-shrink: 0; font-size: 11px; font-weight: 800; opacity: 0.6; }

/* trading psychology: the interactive checklist */
.tp-check-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 520px; margin: -8px auto 28px; }
.tp-check-progress[hidden] { display: none; }
.tp-check-bar { display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 100px; background: rgba(255, 255, 255, 0.1); }
.tp-check-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #60a5fa); transform-origin: left center; transform: scaleX(0); transition: transform 0.4s ease; }
.tp-check-progress.is-done .tp-check-bar span { background: linear-gradient(90deg, #16a34a, #4ade80); }
.tp-check-count { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.tp-check-progress.is-done .tp-check-count { color: #86efac; }
.tp-checklist.is-interactive li { cursor: pointer; padding-inline: 12px; border-radius: 12px; transition: background var(--transition); }
.tp-checklist.is-interactive li:hover { background: rgba(255, 255, 255, 0.04); }
.tp-checklist.is-interactive li:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tp-checklist.is-interactive li[aria-checked="true"] { color: rgba(255, 255, 255, 0.55); }
.tp-checklist.is-interactive li[aria-checked="true"]::before { content: '\2713'; background: #16a34a; }
@media (prefers-reduced-motion: reduce) { .lr-timeline > .lr-news:first-child::before { animation: none; } .tp-check-bar span, .lr-row { transition: none; } }

/* fixes: the featured card on a light section takes the dark card fill; the article body clips without breaking sticky */
.lr-readlist-lead .edge-card.lr-featured-article { background: linear-gradient(145deg, #0f1c35 0%, #1e3a8a 100%); border-color: rgba(96, 165, 250, 0.2); box-shadow: 0 20px 50px rgba(30, 58, 138, 0.25); }
.lr-article-body { overflow: clip; }
@media (min-width: 1100px) { .lr-reading--rail.has-toc > .lr-toc { top: calc(var(--header-height) + 64px); } }

/* ══════════ Blog list (agent) ══════════ */
/* /learning/blog/ #all-posts, "Latest From the Blog": an editorial desk. One list (#blog-grid) that learning.js filters;
   each story's place comes from data-slot / data-w / data-tall (written by the build, moved by the "Blog desk" block of
   learning.js after a filter): the lead is the deep-blue card, two stories sit beside it, the rest are white tiles.
   The number on each story is a CSS counter, so it follows the stories on show. */
.lrb { --lrb-ease: cubic-bezier(0.16, 1, 0.3, 1); }
@media (min-width: 992px) { .lrb.section-pad-sm { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding-top: 72px; padding-bottom: 72px; } }
.lrb > .container { position: relative; z-index: 1; width: 100%; }
.lrb .lr-head { margin-bottom: 30px; }

/* ── the bar: filter on the left, tally on the right ── */
.lrb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto 26px; }
.lrb-filter { position: relative; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 5px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); overflow-x: auto; scrollbar-width: none; }
.lrb-filter::-webkit-scrollbar { display: none; }
.lrb-filter[hidden] { display: none; }
.lrb-filter-ind { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 100px; background: linear-gradient(145deg, #2563eb, #1d4ed8); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); opacity: 0; transition: transform 0.5s var(--lrb-ease), width 0.5s var(--lrb-ease), opacity 0.2s ease; pointer-events: none; }
.lrb-filter.has-ind .lrb-filter-ind { opacity: 1; }
.lrb-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 16px 10px 18px; border: 0; border-radius: 100px; background: transparent; font-family: var(--font); font-size: 13.5px; font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, 0.66); cursor: pointer; transition: color 0.3s ease, background 0.3s ease; }
.lrb-pill:hover { color: #fff; }
.lrb-pill.is-active { color: #fff; }
.lrb-filter:not(.has-ind) .lrb-pill.is-active { background: #2563eb; }
.lrb-pill-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.08); font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.7); transition: background 0.3s ease, color 0.3s ease; }
.lrb-pill.is-active .lrb-pill-n { background: rgba(255, 255, 255, 0.2); color: #fff; }
.lrb .lrb-pill:focus-visible { outline: 2px solid #93c5fd; outline-offset: -2px; }
.lrb-tally { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.lrb-tally strong { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: #fff; font-variant-numeric: tabular-nums; }

/* ── the desk ── */
.lrb-desk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 20px; max-width: 1180px; margin: 0 auto; counter-reset: lrb; }
.lrb-desk.is-sizing { transition: height 0.5s var(--lrb-ease); }
.lrb-story { position: relative; isolation: isolate; display: grid; min-width: 0; counter-increment: lrb; border-radius: 22px; border: 1.5px solid rgba(37, 99, 235, 0.1); background: #fff; box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12), 0 2px 6px rgba(2, 12, 27, 0.18); overflow: hidden;
  transition-property: opacity, translate, transform, box-shadow, border-color; transition-duration: 0.7s, 0.9s, 0.45s, 0.45s, 0.3s; transition-timing-function: ease, var(--lrb-ease), var(--lrb-ease), ease, ease; }
.lrb-story[hidden] { display: none; }
.lrb-story[data-w="4"] { grid-column: span 4; }
.lrb-story[data-w="5"] { grid-column: span 5; }
.lrb-story[data-w="6"] { grid-column: span 6; }
.lrb-story[data-w="7"] { grid-column: span 7; }
.lrb-story[data-w="12"] { grid-column: 1 / -1; }
.lrb-story[data-tall] { grid-row: span 2; }
/* the accent rail along the top edge, which runs the full width on hover */
.lrb-story::before { content: ''; position: absolute; left: 0; top: 0; z-index: 2; width: 64px; height: 3px; border-radius: 0 0 3px 0; background: linear-gradient(90deg, #2563eb, #60a5fa); transition: width 0.6s var(--lrb-ease); }

/* whole card is the link: the title's link covers it */
.lrb-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -0.3px; color: var(--color-text-dark); text-wrap: balance; }
.lrb-title a { color: inherit; transition: color 0.3s ease; }
.lrb-title a::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
@supports selector(:has(a)) {
  .lrb .lrb-title a:focus-visible { outline: none; }
  .lrb-story:has(.lrb-title a:focus-visible) { outline: 2px solid #93c5fd; outline-offset: 3px; }
}

/* art: one of the site's 3D renders in a tinted tile */
.lrb-art { position: relative; min-width: 0; }
.lrb-art-in { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 62%, rgba(96, 165, 250, 0.3), transparent 68%), linear-gradient(160deg, #f0f6ff, #e3eeff); }
.lrb-art-in::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(37, 99, 235, 0.09) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; }
.lrb .lrb-art .lr-img { position: relative; z-index: 1; background: transparent; }
.lrb .lrb-art .lr-img-art { width: 118px; height: 118px; filter: drop-shadow(0 14px 22px rgba(30, 58, 138, 0.25)); transition: transform 0.6s var(--lrb-ease); }

.lrb-body { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px 24px 22px; }
.lrb-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #2563eb; }
.lrb-num { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; color: rgba(30, 58, 138, 0.55); }
.lrb-num::before { content: counter(lrb, decimal-leading-zero); }
.lrb-num::after { content: ''; width: 18px; height: 1.5px; background: currentColor; opacity: 0.6; }
.lrb-flag { display: none; }
.lrb-excerpt { margin: 0; font-size: 14px; line-height: 1.65; color: var(--color-text-dark-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lrb-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(37, 99, 235, 0.1); }
.lrb-by { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.lrb-by .lr-avatar { width: 30px; height: 30px; font-size: 11px; }
.lrb-by-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lrb-by-name { font-size: 12.5px; font-weight: 700; color: var(--color-text-dark); }
.lrb-by-role { display: none; font-size: 11.5px; font-weight: 500; color: var(--color-text-muted-on-tint); }
.lrb-meta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; color: var(--color-text-muted-on-tint); white-space: nowrap; }
.lrb-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.lrb-read { display: inline-flex; align-items: center; gap: 5px; }
.lrb-cta { display: none; }
.lrb-go { position: absolute; right: 16px; top: 16px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(37, 99, 235, 0.14); background: rgba(255, 255, 255, 0.92); color: #2563eb; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.14); transform: rotate(-45deg); transition: transform 0.45s var(--lrb-ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

.lrb-kdate { display: none; }

/* tile: art band on top; the date moves up beside the category, so the foot is the author and the read time */
.lrb-story[data-slot="tile"] { grid-template-rows: 176px 1fr; }
.lrb-story[data-slot="tile"] .lrb-kdate { display: inline; margin-left: auto; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text-muted-on-tint); }
.lrb-story[data-slot="tile"] .lrb-meta time, .lrb-story[data-slot="tile"] .lrb-meta .lrb-dot { display: none; }

/* side: art tile on the left (with the arrow in its corner), text beside it */
.lrb-story[data-slot="side"] { grid-template-columns: 148px minmax(0, 1fr); }
.lrb-story[data-slot="side"] .lrb-art { padding: 12px 0 12px 12px; }
.lrb-story[data-slot="side"] .lrb-art-in { border-radius: 15px; }
.lrb-story[data-slot="side"] .lrb-art .lr-img-art { width: 104px; height: 104px; }
.lrb-story[data-slot="side"] .lrb-body { padding: 20px 22px 18px 20px; gap: 8px; }
.lrb-story[data-slot="side"] .lrb-title { font-size: 17.5px; }
.lrb-story[data-slot="side"] .lrb-excerpt { -webkit-line-clamp: 2; font-size: 13.5px; }
.lrb-story[data-slot="side"] .lrb-foot { padding-top: 12px; }
.lrb-story[data-slot="side"] .lrb-go { top: auto; right: auto; left: 20px; bottom: 20px; width: 32px; height: 32px; }
.lrb-story[data-slot="side"][data-w="12"] { grid-template-columns: 240px minmax(0, 1fr); }

/* lead: the deep-blue card, text left, the render in a glass tile on the right */
.lrb-story[data-slot="lead"] { grid-template-columns: minmax(0, 1fr) minmax(220px, 40%); border-color: rgba(147, 197, 253, 0.22); background: linear-gradient(145deg, #1e3a8a, #1d4ed8); box-shadow: 0 30px 70px rgba(29, 78, 216, 0.35), 0 4px 14px rgba(2, 12, 27, 0.35); color: #fff; }
.lrb-story[data-slot="lead"]::before { width: 96px; background: linear-gradient(90deg, #93c5fd, rgba(255, 255, 255, 0.9)); }
.lrb-story[data-slot="lead"]::after { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 70% 60% at 85% 20%, rgba(147, 197, 253, 0.22), transparent 70%), linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.1) 50%, transparent 65%) no-repeat; background-size: 100% 100%, 250% 100%; background-position: 0 0, 160% 0; transition: background-position 1.2s var(--lrb-ease); pointer-events: none; }
.lrb-story[data-slot="lead"] .lrb-art, .lrb-story[data-slot="lead"] .lrb-body { z-index: 1; }
.lrb-story[data-slot="lead"] .lrb-art { order: 2; padding: 18px 18px 18px 0; perspective: 900px; }
.lrb-story[data-slot="lead"] .lrb-art-in { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16); background: radial-gradient(circle at 50% 55%, rgba(147, 197, 253, 0.32), transparent 62%), rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); transform: rotateX(var(--lrb-rx, 0deg)) rotateY(var(--lrb-ry, 0deg)); transition: transform 0.5s var(--lrb-ease); }
.lrb-story[data-slot="lead"] .lrb-art-in::before { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px); }
/* two quiet rings round the render */
.lrb-story[data-slot="lead"] .lrb-art-in::after { content: ''; position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.025), 0 0 0 35px rgba(255, 255, 255, 0.08); pointer-events: none; }
.lrb-story[data-slot="lead"] .lrb-art .lr-img-art { width: 210px; height: 210px; filter: drop-shadow(0 26px 34px rgba(2, 12, 27, 0.45)); }
.lrb-story[data-slot="lead"] .lrb-body { order: 1; gap: 14px; padding: 34px 20px 30px 36px; }
.lrb-story[data-slot="lead"] .lrb-kicker { color: rgba(255, 255, 255, 0.8); }
.lrb-story[data-slot="lead"] .lrb-num { color: #93c5fd; }
.lrb-story[data-slot="lead"] .lrb-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; background: #fff; color: #1d4ed8; letter-spacing: 1.2px; }
.lrb-story[data-slot="lead"] .lrb-flag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); animation: lrbPing 2.4s ease-out infinite; }
.lrb-story[data-slot="lead"] .lrb-title { margin-top: 4px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.12; letter-spacing: -1px; color: #fff; }
.lrb-story[data-slot="lead"] .lrb-excerpt { font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); -webkit-line-clamp: 4; }
.lrb-story[data-slot="lead"] .lrb-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; order: 3; margin-top: 8px; padding: 12px 20px; border-radius: 100px; background: #fff; font-size: 14px; font-weight: 700; color: #1d4ed8; box-shadow: 0 10px 24px rgba(2, 12, 27, 0.25); transition: box-shadow 0.3s ease; }
.lrb-story[data-slot="lead"] .lrb-cta .lr-icon { transition: transform 0.4s var(--lrb-ease); }
.lrb-story[data-slot="lead"] .lrb-foot { order: 4; border-top-color: rgba(255, 255, 255, 0.16); padding-top: 16px; }
.lrb-story[data-slot="lead"] .lrb-by .lr-avatar { width: 38px; height: 38px; font-size: 13px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); }
.lrb-story[data-slot="lead"] .lrb-by-name { font-size: 13.5px; color: #fff; }
.lrb-story[data-slot="lead"] .lrb-by-role { display: block; color: rgba(255, 255, 255, 0.65); }
.lrb-story[data-slot="lead"] .lrb-meta { color: rgba(255, 255, 255, 0.72); }
.lrb-story[data-slot="lead"] .lrb-go { display: none; }
.lrb-story[data-slot="lead"][data-w="12"] { grid-template-columns: minmax(0, 1fr) minmax(260px, 38%); }
.lrb-story[data-slot="lead"][data-w="12"] .lrb-body { padding: 44px 32px 40px 48px; }
.lrb-story[data-slot="lead"][data-w="12"] .lrb-art .lr-img-art { width: 230px; height: 230px; }

/* hover and keyboard focus: lift, the render leans in, the arrow turns */
@media (hover: hover) {
  .lrb-story:hover { transform: translateY(-6px); border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 26px 54px rgba(37, 99, 235, 0.24), 0 4px 12px rgba(2, 12, 27, 0.22); }
  .lrb-story[data-slot="lead"]:hover { border-color: rgba(147, 197, 253, 0.4); box-shadow: 0 40px 90px rgba(29, 78, 216, 0.45), 0 6px 18px rgba(2, 12, 27, 0.35); }
  .lrb-story:hover::before { width: 100%; }
  .lrb-story:hover .lrb-art .lr-img-art { transform: scale(1.12) rotate(-4deg); }
  .lrb-story[data-slot="lead"]:hover .lrb-art .lr-img-art { transform: scale(1.06) rotate(-2deg); }
  .lrb-story:hover .lrb-title { color: #1d4ed8; }
  .lrb-story[data-slot="lead"]:hover .lrb-title { color: #fff; }
  .lrb-story:hover .lrb-go { transform: rotate(0deg); background: #2563eb; border-color: #2563eb; color: #fff; }
  .lrb-story[data-slot="lead"]:hover::after { background-position: 0 0, -60% 0; }
  .lrb-story[data-slot="lead"]:hover .lrb-cta { box-shadow: 0 14px 30px rgba(2, 12, 27, 0.35); }
  .lrb-story[data-slot="lead"]:hover .lrb-cta .lr-icon { transform: translateX(4px); }
}
.lrb-story:focus-within { transform: translateY(-6px); }
.lrb-story:focus-within::before { width: 100%; }
.lrb-story:focus-within .lrb-go { transform: rotate(0deg); background: #2563eb; border-color: #2563eb; color: #fff; }

/* the lead stays alive: the render floats */
.lrb-story[data-slot="lead"] .lrb-art .lr-img { animation: lrbFloat 6s ease-in-out infinite; }
@keyframes lrbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes lrbPing { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); } }

/* scroll reveal and filter swap (only once learning.js has added .lrb-js) */
.lrb-js .lrb-story { opacity: 0; translate: 0 34px; }
.lrb-js .lrb-story.is-in { opacity: 1; translate: 0 0; transition-delay: var(--lrb-d, 0s), var(--lrb-d, 0s), 0s, 0s, 0s; }
.lrb-desk.is-out .lrb-story { opacity: 0; translate: 0 14px; transition-duration: 0.22s, 0.22s, 0.45s, 0.45s, 0.3s; transition-delay: 0s; }

/* ── tablet: six columns, the lead across the top ── */
@media (max-width: 1023px) {
  .lrb-desk { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .lrb-story[data-w] { grid-column: span 3; }
  .lrb-story[data-w="4"] { grid-column: span 2; }
  .lrb-story[data-slot="lead"], .lrb-story[data-w="12"], .lrb-story[data-slot="tile"][data-w="5"] { grid-column: 1 / -1; }
  .lrb-story[data-tall] { grid-row: auto; }
  .lrb-story[data-slot="lead"] .lrb-body { padding: 30px 16px 28px 30px; }
  .lrb-story[data-slot="lead"] .lrb-art .lr-img-art { width: 180px; height: 180px; }
  .lrb-story[data-slot="side"] { grid-template-columns: 120px minmax(0, 1fr); }
  .lrb-story[data-slot="side"] .lrb-art .lr-img-art { width: 84px; height: 84px; }
  .lrb-story[data-slot="side"] .lrb-body { padding: 18px 18px 16px 16px; }
  .lrb-story[data-slot="side"] .lrb-excerpt { display: none; }
  .lrb-story[data-slot="side"] .lrb-go, .lrb-story[data-slot="tile"][data-w="4"] .lrb-go { display: none; }
  .lrb-story[data-slot="tile"] { grid-template-rows: 140px 1fr; }
  .lrb-story[data-slot="tile"] .lrb-art .lr-img-art { width: 96px; height: 96px; }
  .lrb-story[data-slot="tile"][data-w="4"] .lrb-body { padding: 18px 18px 18px; }
  .lrb-story[data-slot="tile"][data-w="4"] .lrb-title { font-size: 16.5px; }
  .lrb-story[data-slot="tile"][data-w="4"] .lrb-by { display: none; }
  .lrb-story[data-slot="tile"][data-w="5"] { grid-template-rows: none; grid-template-columns: 200px minmax(0, 1fr); }
}

/* ── phone: one column; the lead stacks, the rest become compact rows ── */
@media (max-width: 719px) {
  .lrb .lr-head { margin-bottom: 22px; }
  .lrb-bar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }
  .lrb-filter { align-self: center; }
  .lrb-tally { justify-content: center; font-size: 12px; }
  .lrb-tally strong { font-size: 20px; }
  .lrb-pill { padding: 9px 13px 9px 15px; font-size: 13px; }
  .lrb-desk { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lrb-story[data-w] { grid-column: 1 / -1; }
  .lrb-story[data-slot="lead"] { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .lrb-story[data-slot="lead"] .lrb-art { order: 0; padding: 14px 14px 0; height: 200px; }
  .lrb-story[data-slot="lead"] .lrb-art-in::after { width: 190px; height: 190px; margin: -95px 0 0 -95px; box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.025), 0 0 0 23px rgba(255, 255, 255, 0.07); }
  .lrb-story[data-slot="lead"] .lrb-art .lr-img-art, .lrb-story[data-slot="lead"][data-w="12"] .lrb-art .lr-img-art { width: 150px; height: 150px; }
  .lrb-story[data-slot="lead"] .lrb-body, .lrb-story[data-slot="lead"][data-w="12"] .lrb-body { padding: 20px 20px 22px; gap: 12px; }
  .lrb-story[data-slot="lead"] .lrb-title { font-size: 25px; letter-spacing: -0.6px; }
  .lrb-story[data-slot="lead"] .lrb-excerpt { font-size: 14.5px; -webkit-line-clamp: 5; }
  .lrb-story[data-slot="lead"] .lrb-cta { align-self: stretch; justify-content: center; }
  .lrb-story:not([data-slot="lead"]), .lrb-story[data-slot="tile"][data-w="5"] { grid-template-rows: none; grid-template-columns: 96px minmax(0, 1fr); border-radius: 18px; }
  .lrb-story:not([data-slot="lead"]) .lrb-art { padding: 10px 0 10px 10px; }
  .lrb-story:not([data-slot="lead"]) .lrb-art-in { border-radius: 12px; }
  .lrb-story:not([data-slot="lead"]) .lrb-art .lr-img-art { width: 66px; height: 66px; }
  .lrb-story:not([data-slot="lead"]) .lrb-body { gap: 6px; padding: 14px 16px 14px 14px; }
  .lrb-story:not([data-slot="lead"]) .lrb-kicker { font-size: 10px; letter-spacing: 1.3px; gap: 8px; }
  .lrb-story:not([data-slot="lead"]) .lrb-num::after { width: 12px; }
  .lrb-story:not([data-slot="lead"]) .lrb-title { font-size: 15.5px; line-height: 1.3; }
  .lrb-story:not([data-slot="lead"]) .lrb-excerpt, .lrb-story:not([data-slot="lead"]) .lrb-by, .lrb-story:not([data-slot="lead"]) .lrb-go { display: none; }
  .lrb-story:not([data-slot="lead"]) .lrb-foot { margin-top: 2px; padding-top: 0; border-top: 0; }
  .lrb-story:not([data-slot="lead"]) .lrb-meta { font-size: 11.5px; }
  .lrb-story:not([data-slot="lead"]) .lrb-kdate { display: none; }
  .lrb-story[data-slot="tile"] .lrb-meta time { display: inline; }
  .lrb-story[data-slot="tile"] .lrb-meta .lrb-dot { display: block; }
}
@media (max-width: 359px) {
  .lrb-story:not([data-slot="lead"]), .lrb-story[data-slot="tile"][data-w="5"] { grid-template-columns: 80px minmax(0, 1fr); }
  .lrb-story:not([data-slot="lead"]) .lrb-art .lr-img-art { width: 54px; height: 54px; }
  .lrb-story[data-slot="lead"] .lrb-title { font-size: 22px; }
  .lrb-story[data-slot="lead"] .lrb-foot { flex-direction: column; align-items: flex-start; }
}

/* no motion: everything in place, nothing floats, tilts or slides */
@media (prefers-reduced-motion: reduce) {
  .lrb-js .lrb-story, .lrb-desk.is-out .lrb-story { opacity: 1; translate: none; }
  .lrb-story, .lrb-story::before, .lrb-story::after, .lrb-go, .lrb-desk.is-sizing, .lrb-filter-ind, .lrb .lrb-art .lr-img-art, .lrb-art-in, .lrb-cta .lr-icon { transition: none; }
  .lrb-story[data-slot="lead"] .lrb-art .lr-img, .lrb-story[data-slot="lead"] .lrb-flag::before { animation: none; }
  .lrb-story:hover, .lrb-story:focus-within, .lrb-story[data-slot="lead"]:hover { transform: none; }
  .lrb-story:hover .lrb-art .lr-img-art, .lrb-story[data-slot="lead"]:hover .lrb-art .lr-img-art { transform: none; }
  .lrb-story[data-slot="lead"] .lrb-art-in { transform: none; }
}

/* ══════════ Trading Psychology (agent) ══════════
   The sections below the heroes of the 15 /trading-psychology/ pages (scripts/learning/psychology.js). Theme only: the accent
   #2563eb, the deep gradient for highlight cards, white cards with the soft blue border and shadow; dark bands use glass cards.
   Motion (js/pages/learning.js, TRADING PSYCHOLOGY) only runs when the root has .tp-motion, which the script never sets under
   prefers-reduced-motion; without it every element is simply visible. */
.lr-page {
  --tp-grad: linear-gradient(145deg, #1e3a8a, #1d4ed8);
  --tp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tp-card-border: 1.5px solid rgba(37, 99, 235, 0.1);
  --tp-card-shadow: 0 10px 40px rgba(37, 99, 235, 0.08);
  --tp-glass: rgba(255, 255, 255, 0.04);
  --tp-glass-border: 1px solid rgba(255, 255, 255, 0.09);
  --tp-tile: radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.3), transparent 64%), linear-gradient(160deg, #f6f9ff, #e4edff);
  --tp-tile-dark: radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.32), transparent 66%), rgba(255, 255, 255, 0.05);
}
.tp-sec > .container, .tp-body > .container { width: 100%; }
.tp-sec .lr-head { margin-bottom: 44px; }
.tp-kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-accent-on-tint); }
.tp-count { display: inline-block; font-size: 12px; font-weight: 700; color: var(--color-text-muted-on-tint); }
.tp-mistakes .tp-count, .tp-gloss-sec .tp-count, .tp-end--dark .tp-count { color: rgba(255, 255, 255, 0.55); }
.tp-sec img, .tp-upnext img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ── scroll reveal: an animation, not a transition, so it never fights a card's own hover transitions ── */
@keyframes tp-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes tp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tp-panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tp-art-in { from { opacity: 0; transform: scale(0.82) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes tp-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.tp-motion [data-tp-reveal] { opacity: 0; }
.tp-motion [data-tp-reveal].is-in { opacity: 1; animation: tp-rise 0.85s var(--tp-ease) backwards; animation-delay: calc(var(--tp-i, 0) * 95ms); }

/* ── chips: the glossary terms, each opening its Financial Dictionary entry ── */
.tp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-chip.landing-split-chip { padding: 8px 15px; font-size: 13px; line-height: 1.35; white-space: normal; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); }
.tp-chip.landing-split-chip:hover, .tp-chip.landing-split-chip:focus-visible { background: #2563eb; border-color: #2563eb; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35); }
.tp-chip.landing-split-chip--dark { border-color: rgba(96, 165, 250, 0.2); }
@media (pointer: coarse) { .tp-chip.landing-split-chip { padding: 10px 15px; } }

/* ── main: where mistakes start ── */
.tp-mistakes-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; max-width: 1160px; margin: 0 auto; }
.tp-quote-wrap { display: flex; }
.tp-quote { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; width: 100%; padding: 40px 38px; overflow: hidden; border-radius: 26px; background: var(--tp-grad); box-shadow: 0 28px 70px rgba(29, 78, 216, 0.38); isolation: isolate; }
.tp-quote::after { content: ''; position: absolute; z-index: -1; right: -30%; bottom: -45%; width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 68%); }
.tp-quote-mark { display: block; color: rgba(255, 255, 255, 0.32); }
.tp-quote-text { margin: 0; font-size: clamp(22px, 2.15vw, 31px); font-weight: 700; line-height: 1.32; letter-spacing: -0.02em; color: #fff; text-wrap: pretty; }
.tp-mistakes-side { display: flex; flex-direction: column; gap: 18px; }
.tp-mistakes-lead { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.tp-insights { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tp-insight-wrap { display: flex; }
.tp-insight { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; width: 100%; padding: 26px 26px 30px; overflow: hidden; border: var(--tp-glass-border); border-radius: 22px; background: var(--tp-glass); transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--tp-ease); }
.tp-insight:hover { border-color: rgba(96, 165, 250, 0.38); background: rgba(37, 99, 235, 0.12); transform: translateY(-4px); }
.tp-insight-n { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; background: linear-gradient(135deg, #60a5fa, #2563eb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tp-insight-text { display: block; font-size: 20px; font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; color: #f0f6ff; }
.tp-insight-text::first-letter { text-transform: uppercase; }
.tp-insight-bar { position: absolute; left: 26px; right: 26px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #2563eb, #60a5fa); transform: scaleX(0.3); transform-origin: left center; transition: transform 0.7s var(--tp-ease); }
.tp-motion .tp-insight-wrap:not(.is-in) .tp-insight-bar { transform: scaleX(0); }
.tp-motion .tp-insight-wrap.is-in .tp-insight-bar { transition-delay: calc(0.45s + var(--tp-i, 0) * 95ms); }
.tp-insight:hover .tp-insight-bar { transform: scaleX(1); transition-delay: 0s; }
.tp-shift { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 1160px; margin: 24px auto 0; padding: 24px 24px 24px 34px; border: var(--tp-glass-border); border-radius: 22px; background: linear-gradient(90deg, rgba(37, 99, 235, 0.2), rgba(255, 255, 255, 0.03) 70%); }
.tp-shift-text { margin: 0; max-width: 660px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.tp-shift-text strong { font-weight: 800; color: #fff; }
.tp-shift-go { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; min-height: 52px; padding: 8px 8px 8px 22px; border-radius: 100px; background: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; color: #0f172a; box-shadow: 0 12px 30px rgba(2, 6, 23, 0.3); transition: transform var(--transition), box-shadow var(--transition); }
.tp-shift-go-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--tp-grad); color: #fff; transition: transform 0.3s var(--tp-ease); }
.tp-shift-go:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(37, 99, 235, 0.4); }
.tp-shift-go:hover .tp-shift-go-icon { transform: translateY(3px); }
#tp-topics { scroll-margin-top: 0; }

/* ── main: the four topics, a selector beside one rich card (stacked cards without the script) ── */
.tp-topics { max-width: 1160px; margin: 0 auto; }
.tp-topic-panels { display: grid; gap: 20px; }
.tp-topics.is-tabs { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.tp-topics.is-tabs .tp-topic-panels { display: block; }
.tp-topic-nav { display: flex; flex-direction: column; gap: 12px; }
.tp-topic-nav[hidden] { display: none; }
.tp-topic-tab { position: relative; flex: 1; display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px 18px 12px 12px; border: var(--tp-card-border); border-radius: 20px; background: #fff; box-shadow: 0 4px 24px rgba(37, 99, 235, 0.06); font-family: var(--font); text-align: start; color: #0f172a; cursor: pointer; transition: transform 0.3s var(--tp-ease), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
.tp-topic-tab:hover { border-color: rgba(37, 99, 235, 0.32); transform: translateX(4px); box-shadow: 0 10px 30px rgba(37, 99, 235, 0.12); }
.tp-topic-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.tp-topic-tab[aria-selected="true"] { border-color: transparent; background: var(--tp-grad); color: #fff; box-shadow: 0 18px 44px rgba(29, 78, 216, 0.32); transform: translateX(6px); }
.tp-topic-tab-art { flex-shrink: 0; width: 62px; height: 62px; padding: 7px; border-radius: 15px; background: var(--tp-tile); transition: background 0.25s ease; }
.tp-topic-tab[aria-selected="true"] .tp-topic-tab-art { background: rgba(255, 255, 255, 0.14); }
.tp-topic-tab-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-topic-tab-k { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-accent-on-tint); }
.tp-topic-tab-name { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.tp-topic-tab-meta { font-size: 12px; font-weight: 600; color: var(--color-text-muted-on-tint); }
.tp-topic-tab[aria-selected="true"] :is(.tp-topic-tab-k, .tp-topic-tab-meta) { color: rgba(255, 255, 255, 0.72); }
.tp-topic-tab-go { display: inline-flex; margin-inline-start: auto; color: var(--color-accent); opacity: 0; transform: translateX(-6px); transition: opacity 0.25s ease, transform 0.3s var(--tp-ease); }
.tp-topic-tab:hover .tp-topic-tab-go { opacity: 0.6; transform: none; }
.tp-topic-tab[aria-selected="true"] .tp-topic-tab-go { opacity: 1; transform: none; color: #fff; }
.tp-topic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: 100%; overflow: hidden; border: var(--tp-card-border); border-radius: 28px; background: #fff; box-shadow: 0 24px 64px rgba(37, 99, 235, 0.1); }
.tp-topic[hidden] { display: none; }
.tp-topic-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 340px; padding: 64px 28px 28px; background: var(--tp-tile); }
.tp-topic-k { position: absolute; top: 20px; inset-inline-start: 20px; padding: 6px 12px; border: var(--tp-card-border); border-radius: 100px; background: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent-on-tint); }
.tp-topic-art { display: block; width: min(250px, 82%); aspect-ratio: 1; filter: drop-shadow(0 24px 34px rgba(37, 99, 235, 0.25)); }
.tp-motion .tp-topic-art img { animation: tp-float 6s ease-in-out infinite; }
.tp-topic-meta { padding: 6px 14px; border-radius: 100px; background: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 700; color: var(--color-accent-on-tint); }
.tp-topic-body { display: flex; flex-direction: column; gap: 16px; padding: 40px 42px 38px; }
.tp-topic-name { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; color: #0f172a; }
.tp-topic-name a { color: inherit; transition: color var(--transition); }
.tp-topic-name a:hover { color: var(--color-accent-on-tint); }
.tp-topic-text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--color-text-dark-muted); }
.tp-topic-links { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(37, 99, 235, 0.1); }
.tp-topic-links a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 10px 10px 4px; border-bottom: 1px solid rgba(37, 99, 235, 0.1); font-size: 15px; font-weight: 700; color: #0f172a; transition: background var(--transition), color var(--transition), padding var(--transition); }
.tp-topic-links a:hover { padding-inline-start: 10px; background: rgba(37, 99, 235, 0.04); color: var(--color-accent-on-tint); }
.tp-topic-link-n { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: rgba(37, 99, 235, 0.08); font-size: 12px; font-weight: 800; color: var(--color-accent-on-tint); transition: background var(--transition), color var(--transition); }
.tp-topic-links a:hover .tp-topic-link-n { background: var(--tp-grad); color: #fff; }
.tp-topic-link-name { flex: 1; min-width: 0; }
.tp-topic-links .lr-icon { color: var(--color-accent); opacity: 0.35; transition: opacity var(--transition), transform var(--transition); }
.tp-topic-links a:hover .lr-icon { opacity: 1; transform: translateX(4px); }
.tp-topic-btn { align-self: flex-start; margin-top: auto; }
.tp-topic.is-enter { animation: tp-panel-in 0.5s var(--tp-ease); }
.tp-topic.is-enter .tp-topic-art { animation: tp-art-in 0.7s var(--tp-ease); }

/* ── main: the checklist, six toggle cards and a meter ── */
.tp-check-sec .tp-intro { max-width: 640px; margin-left: auto; margin-right: auto; }
.tp-meter { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; margin: -12px auto 32px; }
.tp-meter[hidden] { display: none; }
.tp-meter .tp-check-bar { display: block; width: 100%; height: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 100px; background: rgba(255, 255, 255, 0.07); }
.tp-meter .tp-check-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #60a5fa); transform-origin: left center; transform: scaleX(0); transition: transform 0.5s var(--tp-ease), box-shadow 0.4s ease; }
.tp-meter.is-done .tp-check-bar span { box-shadow: 0 0 22px rgba(96, 165, 250, 0.75); }
.tp-meter .tp-check-count { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.7); transition: color 0.3s ease; }
.tp-meter.is-done .tp-check-count { color: #fff; }
.tp-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1160px; margin: 0 auto; padding: 0; list-style: none; }
.tp-checks li { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 176px; padding: 26px 26px 28px; border: var(--tp-glass-border); border-radius: 22px; background: var(--tp-glass); text-align: start; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--tp-ease); }
.tp-check-n { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #60a5fa; transition: color 0.3s ease; }
.tp-check-q { padding-inline-end: 30px; font-size: 18px; font-weight: 600; line-height: 1.45; color: #f0f6ff; }
.tp-check-box { position: absolute; top: 22px; inset-inline-end: 22px; display: none; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: transparent; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.tp-checks.is-interactive .tp-check-box { display: inline-flex; }
.tp-checks.is-interactive li { cursor: pointer; }
.tp-checks.is-interactive li:hover { border-color: rgba(96, 165, 250, 0.4); background: rgba(37, 99, 235, 0.1); transform: translateY(-3px); }
.tp-checks.is-interactive li:hover .tp-check-box { border-color: rgba(96, 165, 250, 0.8); }
.tp-checks.is-interactive li:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.tp-checks li[aria-checked="true"] { border-color: transparent; background: var(--tp-grad); box-shadow: 0 20px 48px rgba(29, 78, 216, 0.45); }
.tp-checks.is-interactive li[aria-checked="true"]:hover { background: var(--tp-grad); }
.tp-checks li[aria-checked="true"] .tp-check-n { color: rgba(255, 255, 255, 0.7); }
.tp-checks li[aria-checked="true"] .tp-check-box { border-color: #fff; background: #fff; color: #1d4ed8; }
.tp-checks li[aria-checked="true"] .tp-check-box svg { animation: tp-pop 0.4s var(--tp-ease); }

/* ── main: FAQ (the site's basic-faq), a render tile under its heading ── */
.tp-faq-art { display: block; width: 168px; height: 168px; margin-top: 28px; padding: 18px; border: var(--tp-card-border); border-radius: 28px; background: var(--tp-tile); box-shadow: var(--tp-card-shadow); }
.tp-faq-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(37, 99, 235, 0.22)); }
@media (max-width: 991px) { .tp-faq-art { display: none; } }

/* ── main: the glossary, the terms grouped by topic ── */
.tp-gloss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1160px; margin: 0 auto; }
.tp-gloss-wrap { display: flex; }
.tp-gloss { width: 100%; padding: 28px 28px 30px; border: var(--tp-glass-border); border-radius: 24px; background: var(--tp-glass); transition: border-color 0.3s ease, background 0.3s ease; }
.tp-gloss:hover { border-color: rgba(96, 165, 250, 0.3); background: rgba(255, 255, 255, 0.06); }
.tp-gloss-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.tp-gloss-art { flex-shrink: 0; width: 64px; height: 64px; padding: 8px; border: var(--tp-glass-border); border-radius: 16px; background: var(--tp-tile-dark); transition: transform 0.4s var(--tp-ease); }
.tp-gloss:hover .tp-gloss-art { transform: rotate(-6deg) scale(1.06); }
.tp-gloss-name { margin: 0 0 2px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.tp-gloss-name a { color: inherit; transition: color var(--transition); }
.tp-gloss-name a:hover { color: #60a5fa; }

/* ── the related glossary terms card that closes a band ── */
.tp-end { max-width: 1160px; margin: 24px auto 0; padding: 26px 28px 28px; border-radius: 24px; }
.tp-end--light { border: var(--tp-card-border); background: #fff; box-shadow: var(--tp-card-shadow); }
.tp-end--dark { border: var(--tp-glass-border); background: var(--tp-glass); }
.tp-end-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.tp-end-title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.tp-end--dark .tp-end-title { color: #fff; }

/* ── topic pages: the course path, numbered steps joined by a line ── */
.tp-path { --n: 4; --gap: 20px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); max-width: 1160px; margin: 0 auto; padding: 0; list-style: none; }
.tp-path--2 { --n: 2; --gap: 24px; max-width: 820px; }
.tp-path::before { content: ''; position: absolute; top: 23px; left: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) / 2); right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) / 2); height: 2px; background: linear-gradient(90deg, #2563eb, #60a5fa); transform-origin: left center; transition: transform 1.4s var(--tp-ease) 0.25s; }
.tp-motion .tp-path:not(.is-in)::before { transform: scaleX(0); }
.tp-step { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tp-step-node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tp-grad); font-size: 14px; font-weight: 800; color: #fff; box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.16), 0 10px 26px rgba(29, 78, 216, 0.5); }
.tp-step-card { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 18px 22px 24px; border: var(--tp-card-border); border-radius: 24px; background: #fff; box-shadow: 0 22px 54px rgba(2, 6, 23, 0.35); transition: transform 0.35s var(--tp-ease), box-shadow 0.35s ease; }
.tp-step-card:hover { transform: translateY(-6px); box-shadow: 0 30px 64px rgba(37, 99, 235, 0.38); }
.tp-step-card:has(a:focus-visible) { outline: 2px solid #60a5fa; outline-offset: 4px; }
.tp-step-art { display: flex; align-items: center; justify-content: center; height: 156px; margin: 0 -6px 8px; padding: 18px; border-radius: 18px; background: var(--tp-tile); }
.tp-step-art img { width: 128px; height: 128px; filter: drop-shadow(0 16px 22px rgba(37, 99, 235, 0.22)); transition: transform 0.5s var(--tp-ease); }
.tp-step-card:hover .tp-step-art img { transform: scale(1.08) rotate(-4deg); }
.tp-step-title { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #0f172a; }
.tp-step-title a { color: inherit; }
.tp-step-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tp-step-title a:focus-visible { outline: none; }
.tp-step-text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--color-text-dark-muted); }
.tp-step-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 700; color: var(--color-accent-on-tint); }
.tp-step-go .lr-icon { transition: transform 0.3s var(--tp-ease); }
.tp-step-card:hover .tp-step-go .lr-icon { transform: translateX(5px); }
.tp-path--2 .tp-step-art { height: 190px; }
.tp-path--2 .tp-step-art img { width: 150px; height: 150px; }

/* ── articles: the text on the dark band, with its rail ── */
.tp-body { --lr-body: rgba(255, 255, 255, 0.78); --lr-text: #fff; }
.tp-body .lr-reading { margin: 0 auto; }
.tp-body .lr-prose h2 { color: #fff; }
.tp-body .lr-prose h2::before { content: ''; display: block; width: 40px; height: 3px; margin-bottom: 16px; border-radius: 3px; background: linear-gradient(90deg, #2563eb, #60a5fa); }
.tp-body .lr-prose strong { color: #fff; }
.tp-body .lr-prose ul > li::before { background: #60a5fa; }
.tp-body .lr-prose ol > li::before { background: var(--tp-grad); color: #fff; box-shadow: 0 4px 12px rgba(29, 78, 216, 0.45); }
.tp-body .lr-prose .lr-table-wrap { box-shadow: 0 18px 50px rgba(2, 6, 23, 0.4); }
.tp-body .lr-prose .lr-table tbody th { color: #0f172a; }
.tp-body .lr-prose .lr-table strong { color: #0f172a; }
.tp-body .lr-prose .lr-table-wrap:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
@media (min-width: 1100px) {
  .tp-body .lr-reading--rail.has-toc { gap: 0 56px; }
  .tp-body .lr-reading--rail.has-toc > .lr-toc { border: var(--tp-glass-border); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); }
}
.tp-body .lr-toc-head { color: rgba(255, 255, 255, 0.5); }
.tp-body .lr-toc-list a { color: rgba(255, 255, 255, 0.62); }
.tp-body .lr-toc-list a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.tp-body .lr-toc-list a[aria-current="true"] { background: var(--tp-grad); color: #fff; box-shadow: 0 8px 20px rgba(29, 78, 216, 0.4); }

/* ── articles: what comes next ── */
.tp-next-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; max-width: 1160px; margin: 0 auto; }
.tp-next-wrap { display: flex; }
.tp-next-card { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 30px; width: 100%; padding: 34px; overflow: hidden; border-radius: 28px; background: var(--tp-grad); box-shadow: 0 30px 70px rgba(29, 78, 216, 0.34); isolation: isolate; transition: transform 0.35s var(--tp-ease), box-shadow 0.35s ease; }
.tp-next-card::after { content: ''; position: absolute; z-index: -1; left: -20%; top: -50%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%); }
.tp-next-card:hover { transform: translateY(-5px); box-shadow: 0 38px 80px rgba(29, 78, 216, 0.42); }
.tp-next-card:has(a:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.tp-next-art { display: flex; align-items: center; justify-content: center; width: 210px; aspect-ratio: 1; padding: 26px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 24px; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.3), transparent 66%), rgba(255, 255, 255, 0.08); }
.tp-next-art img { filter: drop-shadow(0 18px 26px rgba(2, 6, 23, 0.35)); transition: transform 0.5s var(--tp-ease); }
.tp-next-card:hover .tp-next-art img { transform: scale(1.07) rotate(-4deg); }
.tp-next-art--mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 22px; }
.tp-next-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tp-next-card .tp-kicker { color: rgba(255, 255, 255, 0.72); }
.tp-next-name { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; color: #fff; }
.tp-next-name a { color: inherit; }
.tp-next-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tp-next-name a:focus-visible { outline: none; }
.tp-next-text { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }
.tp-next-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 12px 20px; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 700; color: var(--color-accent-on-tint); box-shadow: 0 10px 24px rgba(2, 6, 23, 0.2); }
.tp-next-go .lr-icon { transition: transform 0.3s var(--tp-ease); }
.tp-next-card:hover .tp-next-go .lr-icon { transform: translateX(5px); }
.tp-route { display: flex; flex-direction: column; padding: 28px 26px; border: var(--tp-card-border); border-radius: 28px; background: #fff; box-shadow: var(--tp-card-shadow); }
.tp-route-title { margin: 4px 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.tp-route-title a { color: inherit; transition: color var(--transition); }
.tp-route-title a:hover { color: var(--color-accent-on-tint); }
.tp-route-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tp-route-list li { position: relative; }
.tp-route-list li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 26px; top: 42px; bottom: -8px; width: 2px; border-radius: 2px; background: rgba(37, 99, 235, 0.14); }
.tp-route-list a { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 12px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.35; color: #0f172a; transition: background var(--transition), color var(--transition); }
.tp-route-list a:hover { background: rgba(37, 99, 235, 0.05); color: var(--color-accent-on-tint); }
.tp-route-n { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #eef3ff; font-size: 12px; font-weight: 800; color: var(--color-accent-on-tint); box-shadow: 0 0 0 4px #fff; }
.tp-route-name { flex: 1; min-width: 0; }
.tp-route-list a .lr-icon { color: var(--color-accent); opacity: 0.35; transition: opacity var(--transition), transform var(--transition); }
.tp-route-list a:hover .lr-icon { opacity: 1; transform: translateX(4px); }
.tp-route-list a[aria-current="page"] { background: rgba(37, 99, 235, 0.07); font-weight: 800; }
.tp-route-list a[aria-current="page"] .tp-route-n { background: var(--tp-grad); color: #fff; }
.tp-route-here { flex-shrink: 0; padding: 4px 10px; border-radius: 100px; background: rgba(37, 99, 235, 0.1); font-size: 11px; font-weight: 700; color: var(--color-accent-on-tint); }

/* the "Up next" cue: slides in once most of the text is read, leaves when the next band arrives */
.tp-upnext { position: fixed; z-index: 55; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; max-width: 340px; padding: 9px 18px 9px 9px; border: 1.5px solid rgba(37, 99, 235, 0.14); border-radius: 18px; background: #fff; box-shadow: 0 22px 54px rgba(15, 23, 42, 0.2); color: #0f172a; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 0.35s ease, transform 0.4s var(--tp-ease), visibility 0s linear 0.4s, border-color var(--transition); }
.tp-upnext[hidden] { display: none; }
.tp-upnext.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.4s var(--tp-ease), visibility 0s, border-color var(--transition); }
.tp-upnext:hover { border-color: rgba(37, 99, 235, 0.4); }
.tp-upnext:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.tp-upnext-art { flex-shrink: 0; width: 50px; height: 50px; padding: 6px; border-radius: 13px; background: var(--tp-tile); }
.tp-upnext-body { display: flex; flex-direction: column; min-width: 0; }
.tp-upnext-k { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-accent-on-tint); }
.tp-upnext-name { font-size: 14px; font-weight: 800; line-height: 1.3; }
.tp-upnext > .lr-icon { margin-inline-start: 4px; color: var(--color-accent); transition: transform 0.3s var(--tp-ease); }
.tp-upnext:hover > .lr-icon { transform: translateX(4px); }

/* ── smaller screens ── */
@media (max-width: 1199px) {
  .tp-path--4 { --n: 2; }
  .tp-path--4::before { display: none; }
}
@media (max-width: 991px) {
  .tp-mistakes-grid, .tp-next-grid { grid-template-columns: minmax(0, 1fr); }
  .tp-shift { flex-direction: column; align-items: flex-start; padding: 24px; }
  .tp-topics.is-tabs { grid-template-columns: minmax(0, 1fr); }
  .tp-topic-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tp-topic-tab, .tp-topic-tab:hover, .tp-topic-tab[aria-selected="true"] { transform: none; }
  .tp-topic-tab-go { display: none; }
  .tp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-gloss-grid { grid-template-columns: minmax(0, 1fr); }
  .tp-next-card { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 28px; }
  .tp-next-art { width: 150px; padding: 18px; }
}
@media (max-width: 767px) {
  .tp-sec .lr-head { margin-bottom: 32px; }
  .tp-quote { padding: 30px 26px; gap: 24px; }
  .tp-insights { gap: 12px; }
  .tp-insight { padding: 20px 20px 24px; gap: 14px; }
  .tp-insight-n { font-size: 34px; }
  .tp-insight-text { font-size: 17px; }
  .tp-shift-text { font-size: 16px; }
  .tp-topic { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .tp-topic-visual { min-height: 0; padding: 56px 20px 22px; }
  .tp-topic-art { width: 150px; }
  .tp-topic-body { padding: 26px 22px 26px; }
  .tp-topic-name { font-size: 27px; }
  .tp-topic-btn { align-self: stretch; text-align: center; }
  .tp-topic-tab { gap: 10px; padding: 10px; border-radius: 16px; }
  .tp-topic-tab-art { width: 44px; height: 44px; padding: 5px; border-radius: 12px; }
  .tp-topic-tab-name { font-size: 14px; }
  .tp-topic-tab-k { font-size: 9px; letter-spacing: 1.2px; }
  .tp-topic-tab-meta { display: none; }
  .tp-checks li { min-height: 0; padding: 20px 20px 22px; gap: 10px; }
  .tp-check-q { font-size: 16px; }
  .tp-gloss { padding: 22px 20px 24px; }
  .tp-end { padding: 22px 20px 24px; }
  .tp-next-card { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; gap: 20px; }
  .tp-next-art { width: 120px; padding: 14px; border-radius: 20px; }
  .tp-next-name { font-size: 27px; }
  .tp-route { padding: 22px 16px; }
  .tp-upnext { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
@media (max-width: 600px) {
  .tp-path--4, .tp-path--2 { --n: 1; }
  .tp-path::before { display: none; }
  .tp-step { flex-direction: row; align-items: flex-start; gap: 12px; }
  .tp-step-node { flex-shrink: 0; width: 38px; height: 38px; font-size: 12px; box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.16); }
  .tp-step-art { height: 130px; }
  .tp-step-art img, .tp-path--2 .tp-step-art img { width: 104px; height: 104px; }
  .tp-path--2 .tp-step-art { height: 130px; }
  .tp-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .tp-insights { grid-template-columns: minmax(0, 1fr); }
  .tp-step-node { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lr-page [class*="tp-"], .lr-page [class*="tp-"]::before, .lr-page [class*="tp-"]::after, .tp-upnext { animation: none !important; transition: none !important; }
  .tp-topic-tab:hover, .tp-topic-tab[aria-selected="true"], .tp-insight:hover, .tp-step-card:hover, .tp-next-card:hover, .tp-checks.is-interactive li:hover, .tp-chip.landing-split-chip:hover, .tp-shift-go:hover { transform: none; }
}

/* ══════════ Market analysis (agent) ══════════
   The News page's Market Analysis section (pages.js "News list"; components AnalysisCard + AnalystsCard; behaviour in
   learning.js "Market analysis"). The notes on the left: the first one the market filter leaves showing is the wide lead
   card (.is-lead), the rest sit under it (data-rest = how many, so the row is always full). The analyst desk on the right is
   the deep-blue highlight card: who writes, their bio, how many notes and their latest one; each analyst highlights their notes. */
.lr-ma { --ma-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ma-line: rgba(37, 99, 235, 0.1); }
.lr-ma .lr-head { margin-bottom: 34px; }
.lr-ma-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: stretch; width: 100%; max-width: 1320px; margin: 0 auto; }
.lr-ma-main { display: flex; flex-direction: column; min-width: 0; }

/* ── the notes ── */
.lr-ma-grid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lr-ma-grid[data-rest="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lr-ma-grid[data-rest="1"], .lr-ma-grid[data-rest="0"] { grid-template-columns: minmax(0, 1fr); }
.lr-ma-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1.5px solid var(--ma-line); border-radius: 20px; box-shadow: 0 4px 24px rgba(37, 99, 235, 0.07); transition: transform 0.35s var(--ma-ease), box-shadow 0.35s var(--ma-ease), border-color 0.35s ease, opacity 0.35s ease, filter 0.35s ease; }
.lr-ma-card:hover { transform: translateY(-5px); border-color: rgba(37, 99, 235, 0.25); box-shadow: 0 18px 48px rgba(37, 99, 235, 0.14); }
.lr-ma-card:focus-within { border-color: rgba(37, 99, 235, 0.45); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 18px 48px rgba(37, 99, 235, 0.12); }
.lr-ma-card.is-lead { grid-column: 1 / -1; flex-direction: row; border-color: rgba(37, 99, 235, 0.16); box-shadow: 0 12px 44px rgba(37, 99, 235, 0.11); }

/* the render tile: the site's own 3D art on a soft blue field with a faint grid */
.lr-ma-media { position: relative; flex-shrink: 0; height: 136px; overflow: hidden; border-bottom: 1.5px solid rgba(37, 99, 235, 0.08); background: radial-gradient(ellipse 70% 80% at 50% 62%, rgba(96, 165, 250, 0.26), transparent 70%), linear-gradient(160deg, #f3f7ff, #e7f0ff); }
.lr-ma-media::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 72%); pointer-events: none; }
.lr-ma-media .lr-img { position: relative; z-index: 1; background: transparent; }
.lr-ma-media .lr-img-art { width: 100px; height: 100px; filter: drop-shadow(0 10px 18px rgba(37, 99, 235, 0.2)); transition: transform 0.55s var(--ma-ease), filter 0.55s var(--ma-ease); }
.lr-ma-card:hover .lr-img-art, .lr-ma-card:focus-within .lr-img-art { transform: translateY(-8px) rotate(-4deg) scale(1.08); filter: drop-shadow(0 20px 26px rgba(37, 99, 235, 0.3)); }
.lr-ma-card.is-lead .lr-ma-media { width: 42%; height: auto; min-height: 270px; border-bottom: 0; border-inline-end: 1.5px solid rgba(37, 99, 235, 0.1); background: radial-gradient(circle at 50% 56%, rgba(96, 165, 250, 0.45), transparent 58%), linear-gradient(150deg, #e3edff, #c9dcff); }
.lr-ma-card.is-lead .lr-ma-media::after { content: ''; position: absolute; left: 50%; top: 56%; width: 250px; height: 250px; border-radius: 50%; border: 1.5px dashed rgba(37, 99, 235, 0.16); transform: translate(-50%, -50%); box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.18), 0 0 0 35px rgba(37, 99, 235, 0.08); pointer-events: none; }
.lr-ma-card.is-lead .lr-img-art { width: 200px; height: 200px; }
.lr-ma-card.is-lead .lr-img { animation: maFloat 7s ease-in-out infinite; }
@keyframes maFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* the text */
.lr-ma-body { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px 16px; }
.lr-ma-card.is-lead .lr-ma-body { justify-content: center; gap: 14px; padding: 30px 34px 26px; }
.lr-ma-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; font-weight: 600; color: var(--color-text-muted-on-tint); }
.lr-ma-market { padding: 4px 10px; border-radius: 100px; background: rgba(37, 99, 235, 0.08); font-size: 11px; font-weight: 700; letter-spacing: 0.2px; color: var(--color-accent-on-tint); }
.lr-ma-flag { display: none; padding: 4px 10px; border-radius: 100px; background: linear-gradient(145deg, #1e3a8a, #1d4ed8); font-size: 11px; font-weight: 700; color: #fff; }
.lr-ma-card.is-lead .lr-ma-flag { display: inline-block; }
.lr-ma-top time { margin-inline-start: auto; }
.lr-ma-title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.35; letter-spacing: -0.2px; color: var(--color-text-dark); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lr-ma-title a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
.lr-ma-title a::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.lr-ma-card .lr-ma-title a:focus-visible { outline: none; }
.lr-ma-card:hover .lr-ma-title a { color: var(--color-accent-on-tint); }
.lr-ma-card.is-lead .lr-ma-title { font-size: clamp(22px, 2vw, 28px); line-height: 1.22; letter-spacing: -0.6px; -webkit-line-clamp: 4; }
.lr-ma-excerpt { margin: 0; font-size: 14px; line-height: 1.65; color: var(--color-text-dark-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lr-ma-card.is-lead .lr-ma-excerpt { font-size: 15.5px; line-height: 1.7; -webkit-line-clamp: 5; }
.lr-ma-chips { gap: 6px; }
.lr-ma-card:not(.is-lead) .lr-ma-chip-extra { display: none; }
.lr-ma-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(37, 99, 235, 0.08); }
.lr-ma-card.is-lead .lr-ma-foot { margin-top: 6px; }
.lr-ma-by { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lr-ma-by-name { font-size: 13px; font-weight: 700; color: var(--color-text-dark); }
.lr-ma-by-role { overflow: hidden; font-size: 11.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text-muted-on-tint); }
.lr-ma-read { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--color-accent-on-tint); }
.lr-ma-read .lr-icon { transition: transform 0.3s var(--ma-ease); }
.lr-ma-card:hover .lr-ma-read .lr-icon, .lr-ma-card:focus-within .lr-ma-read .lr-icon { transform: translateX(4px); }
.lr-ma-card.is-lead .lr-ma-read { padding: 9px 16px; border-radius: 100px; background: #2563eb; color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28); transition: background 0.25s ease; }
.lr-ma-card.is-lead:hover .lr-ma-read { background: #1d4ed8; }

/* an analyst's notes, highlighted from the desk */
.lr-ma-grid.is-hl .lr-ma-card:not(.is-hl) { opacity: 0.4; filter: saturate(0.5); transform: scale(0.985); }
.lr-ma-card.is-hl { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16), 0 18px 48px rgba(37, 99, 235, 0.16); }

/* no notes in the chosen market */
.lr-ma-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 320px; padding: 40px 24px; text-align: center; background: rgba(255, 255, 255, 0.7); border: 1.5px dashed rgba(37, 99, 235, 0.22); border-radius: 20px; }
.lr-ma-empty[hidden], .lr-ma-reset[hidden] { display: none !important; }
.lr-ma-empty .lr-art-tile { width: 96px; height: 96px; margin-bottom: 6px; }
.lr-ma-empty-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: var(--color-text-dark); }
.lr-ma-empty-text { max-width: 420px; margin: 0; font-size: 15px; line-height: 1.65; color: var(--color-text-dark-muted); }
.lr-ma-reset.btn-secondary { margin-top: 8px; padding: 11px 22px; border: 1.5px solid rgba(37, 99, 235, 0.3); border-radius: 100px; background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--color-accent-on-tint); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.lr-ma-reset.btn-secondary:hover { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ── the analyst desk ── */
.lr-ma-desk { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 26px 22px 18px; overflow: hidden; border-radius: 20px; background: linear-gradient(145deg, #1e3a8a, #1d4ed8); color: #fff; box-shadow: 0 22px 54px rgba(30, 58, 138, 0.28); }
.lr-ma-desk::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.16), transparent 42%), radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: auto, 22px 22px; pointer-events: none; }
.lr-ma-desk-head { display: flex; flex-direction: column; gap: 6px; }
.lr-ma-desk-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.lr-ma-desk-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: #fff; }
.lr-ma-desk-hint { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.lr-ma-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.lr-ma-stats li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; background: rgba(255, 255, 255, 0.08); }
.lr-ma-stats strong { font-size: 22px; font-weight: 800; line-height: 1.1; color: #fff; }
.lr-ma-stats span { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.lr-ma-people { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lr-ma-person { position: relative; padding: 12px; border: 1px solid transparent; border-radius: 16px; transition: background 0.3s ease, border-color 0.3s ease; }
.lr-ma-person + .lr-ma-person::before { content: ''; position: absolute; top: -3px; left: 12px; right: 12px; height: 1px; background: rgba(255, 255, 255, 0.12); }
.lr-ma-person.is-active { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); }
.lr-ma-person.is-active::before, .lr-ma-person.is-active + .lr-ma-person::before { opacity: 0; }
.lr-ma-person-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; }
button.lr-ma-person-btn { cursor: pointer; border-radius: 12px; }
.lr-ma-desk button:focus-visible, .lr-ma-desk a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lr-ma-avatar.lr-avatar { width: 44px; height: 44px; font-size: 14px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 6px 16px rgba(2, 12, 27, 0.25); transition: transform 0.35s var(--ma-ease), box-shadow 0.35s ease; }
.lr-ma-person:hover .lr-ma-avatar, .lr-ma-person.is-active .lr-ma-avatar { transform: scale(1.06); box-shadow: 0 0 0 2px #fff, 0 8px 20px rgba(2, 12, 27, 0.3); }
.lr-ma-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lr-ma-name { font-size: 15px; font-weight: 700; color: #fff; }
.lr-ma-role { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.lr-ma-count { flex-shrink: 0; margin-inline-start: auto; padding: 4px 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.14); font-size: 11.5px; font-weight: 700; color: #fff; transition: background 0.25s ease, color 0.25s ease; }
.lr-ma-person-btn[aria-pressed="true"] .lr-ma-count { background: #fff; color: #1d4ed8; }
.lr-ma-bio { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
.lr-ma-latest { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; min-width: 0; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; }
.lr-ma-latest-label { flex-shrink: 0; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.lr-ma-latest-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.25s ease; }
.lr-ma-latest .lr-icon { flex-shrink: 0; transition: transform 0.3s var(--ma-ease); }
.lr-ma-latest:hover .lr-ma-latest-title { text-decoration-color: rgba(255, 255, 255, 0.7); }
.lr-ma-latest:hover .lr-icon { transform: translateX(4px); }

/* ── motion (learning.js adds .is-motion only when motion is allowed) ── */
.lr-ma.is-motion .lr-ma-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ma-ease) var(--ma-d, 0ms), transform 0.7s var(--ma-ease) var(--ma-d, 0ms); }
.lr-ma.is-motion .lr-ma-reveal.is-in { opacity: 1; transform: none; }
.lr-ma-card.is-entering { animation: maEnter 0.55s var(--ma-ease) var(--ma-d, 0ms) both; }
@keyframes maEnter { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── stacked: the desk under the notes, its analysts side by side ── */
@media (max-width: 1099px) {
  .lr-ma-layout { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
  .lr-ma-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; column-gap: 24px; }
  .lr-ma-people { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .lr-ma-person { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); }
  .lr-ma-person + .lr-ma-person::before { display: none; }
  .lr-ma-bio, .lr-ma-latest { margin-inline-start: 0; }
}
@media (max-width: 899px) {
  .lr-ma-grid, .lr-ma-grid[data-rest="2"] { grid-template-columns: minmax(0, 1fr); }
  .lr-ma-card:not(.is-lead) { flex-direction: row; }
  .lr-ma-card:not(.is-lead) .lr-ma-media { width: 150px; height: auto; border-bottom: 0; border-inline-end: 1.5px solid rgba(37, 99, 235, 0.08); }
  .lr-ma-desk { display: flex; }
  .lr-ma-people { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .lr-ma .lr-head { margin-bottom: 28px; }
  .lr-ma-card.is-lead { flex-direction: column; }
  .lr-ma-card.is-lead .lr-ma-media { width: 100%; min-height: 0; height: 210px; border-inline-end: 0; border-bottom: 1.5px solid rgba(37, 99, 235, 0.08); }
  .lr-ma-card.is-lead .lr-ma-media::after { width: 190px; height: 190px; box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.22); }
  .lr-ma-card.is-lead .lr-img-art { width: 150px; height: 150px; }
  .lr-ma-card.is-lead .lr-ma-body { padding: 22px 20px 18px; gap: 12px; }
  .lr-ma-card.is-lead .lr-ma-excerpt { font-size: 15px; }
  .lr-ma-desk { padding: 24px 16px 14px; }
  .lr-ma-person { padding: 12px 10px; }
  .lr-ma-empty { min-height: 0; }
}
@media (max-width: 560px) {
  .lr-ma-card:not(.is-lead) .lr-ma-media { width: 104px; }
  .lr-ma-card:not(.is-lead) .lr-img-art { width: 76px; height: 76px; }
  .lr-ma-card:not(.is-lead) .lr-ma-body { padding: 14px 14px 12px; gap: 8px; }
  .lr-ma-card:not(.is-lead) .lr-ma-title { font-size: 15.5px; }
  .lr-ma-card:not(.is-lead) .lr-ma-excerpt { font-size: 13.5px; -webkit-line-clamp: 2; }
  .lr-ma-card:not(.is-lead) .lr-ma-by-role, .lr-ma-card:not(.is-lead) .lr-ma-foot .lr-avatar { display: none; }
  .lr-ma-card:not(.is-lead) .lr-ma-foot { padding-top: 10px; }
  .lr-ma-card.is-lead .lr-ma-foot .lr-ma-read { padding: 8px 14px; }
  .lr-ma-stats li { padding: 9px 10px; }
  .lr-ma-stats strong { font-size: 20px; }
  .lr-ma-stats span { font-size: 10px; letter-spacing: 0.2px; }
}
@media (max-width: 380px) {
  .lr-ma-card:not(.is-lead) .lr-ma-media { width: 84px; }
  .lr-ma-card:not(.is-lead) .lr-img-art { width: 62px; height: 62px; }
  .lr-ma-top time { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lr-ma-card, .lr-ma-card *, .lr-ma-desk, .lr-ma-desk * { animation: none !important; transition: none !important; }
  .lr-ma-card:hover, .lr-ma-grid.is-hl .lr-ma-card:not(.is-hl), .lr-ma-card:hover .lr-img-art, .lr-ma-card:focus-within .lr-img-art { transform: none; }
}

/* ══════════ Motion and polish (agent) ══════════ */
/* scroll reveal: the hidden state exists only once learning.js has set html.lr-motion and marked a below-the-fold element */
@keyframes lr-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes lr-grow { from { width: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.lr-motion .lr-rv:not(.lr-rv-in) { opacity: 0; }
  html.lr-motion .lr-rv.lr-rv-in { animation: lr-rise 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--lr-d, 0ms) backwards; }
  /* who buys gold: each bar grows from 0 to its width, one after another */
  .lr-bars.lr-seen .lr-bar-fill { animation: lr-grow 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--lr-d, 0ms) + 150ms) backwards; }
  .lr-bars.lr-seen .lr-bar:nth-child(2) .lr-bar-fill { animation-delay: calc(var(--lr-d, 0ms) + 270ms); }
  .lr-bars.lr-seen .lr-bar:nth-child(3) .lr-bar-fill { animation-delay: calc(var(--lr-d, 0ms) + 390ms); }
  .lr-bars.lr-seen .lr-bar:nth-child(4) .lr-bar-fill { animation-delay: calc(var(--lr-d, 0ms) + 510ms); }
}
@media print { html.lr-motion .lr-rv { opacity: 1 !important; animation: none !important; } }
.lr-bar-value { font-variant-numeric: tabular-nums; }

/* hover: linked cards lift (the shared cards already do); static information cards glow instead, and 3D renders scale gently */
.lr-row, .how-to-card.lr-blog-row { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.lr-blog-row .lr-img-art, .lr-row .lr-img-art { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.lr-blog-row:hover .lr-img-art, .lr-row:hover .lr-img-art, .lr-desk-lead:hover .lr-img-art, .lr-blog-lead:hover .lr-img-art { transform: scale(1.07) rotate(-2deg); }
.lr-tray-tile .lr-tray-art img, .lr-art-tile img { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.lr-tray-tile:hover .lr-tray-art img, .lr-tray-tile:focus-visible .lr-tray-art img { transform: scale(1.08) rotate(-3deg); }
.lr-tray-tile:focus-visible { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(37, 99, 235, 0.2), inset 0 1px 0 #fff; }
.lr-page .price-driver-card.lr-static-card:is(.lr-gold60-tile, .lr-myth):hover,
.lr-page .lr-gold-forces > .price-driver-card.lr-static-card:hover,
.lr-page .lr-gold-steps > .price-driver-card.lr-static-card:hover { border-color: rgba(96, 165, 250, 0.3); box-shadow: 0 14px 40px rgba(37, 99, 235, 0.18); }
.lr-page .how-to-card.lr-static-card.lr-risk-card:hover,
.lr-page .lr-gold-events > .how-to-card.lr-static-card:hover { border-color: rgba(37, 99, 235, 0.28); box-shadow: 0 14px 36px rgba(37, 99, 235, 0.12); }
.lr-page :is(.lr-gold60-tile, .lr-risk-card, .lr-gold-forces > *, .lr-webempty-link):hover .lr-art-tile img { transform: scale(1.08) rotate(-3deg); }
.lr-timeline > .lr-news::before { transition: box-shadow 0.3s ease, background 0.3s ease; }
.lr-timeline > .lr-news:hover::before { background: var(--color-accent); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.28); }
.lr-newslist li { transition: background 0.2s ease; }
.lr-newslist li:hover { background: rgba(37, 99, 235, 0.03); }
@media (prefers-reduced-motion: reduce) {
  .lr-row, .how-to-card.lr-blog-row, .lr-img-art, .lr-tray-art img, .lr-art-tile img, .lr-timeline > .lr-news::before { transition: none; }
  .lr-blog-row:hover .lr-img-art, .lr-row:hover .lr-img-art, .lr-desk-lead:hover .lr-img-art, .lr-blog-lead:hover .lr-img-art,
  .lr-tray-tile:hover .lr-tray-art img, .lr-tray-tile:focus-visible .lr-tray-art img, .lr-page :is(.lr-gold60-tile, .lr-risk-card, .lr-gold-forces > *, .lr-webempty-link):hover .lr-art-tile img { transform: none; }
}

/* ══════════ Gold in 60 seconds: a bento of the lead card, hours with a week strip, contract size and the drivers ══════════ */
.lr-g60-bento { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lead hours hours" "lead lot moves"; gap: 18px; max-width: 1160px; margin: 0 auto; }
.lr-g60-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px 26px 28px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.lr-g60-card:hover { transform: translateY(-4px); border-color: rgba(96, 165, 250, 0.4); box-shadow: 0 22px 48px rgba(2, 12, 27, 0.35); }
.lr-g60-lead { grid-area: lead; justify-content: flex-end; min-height: 440px; border-color: rgba(147, 197, 253, 0.3); background: radial-gradient(circle at 75% 25%, rgba(96, 165, 250, 0.45), transparent 55%), linear-gradient(160deg, #1e3a8a, #1d4ed8); }
.lr-g60-hours { grid-area: hours; }
.lr-g60-bento > :nth-child(3) { grid-area: lot; }
.lr-g60-bento > :nth-child(4) { grid-area: moves; }
.lr-g60-ticker { position: absolute; top: 24px; left: 26px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 3px; color: #fff; }
.lr-g60-ticker span { color: #93c5fd; }
.lr-g60-hero-art { position: absolute; top: 40px; right: -6px; width: 64%; max-width: 290px; height: auto; filter: drop-shadow(0 30px 40px rgba(2, 12, 27, 0.5)); animation: lr-g60-float 6s ease-in-out infinite; }
@keyframes lr-g60-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(-1deg); } }
.lr-g60-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #93c5fd; }
.lr-g60-big { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #fff; }
.lr-g60-head { display: flex; align-items: center; gap: 12px; }
.lr-g60-head .lr-art-tile { width: 44px; height: 44px; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.lr-g60-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.lr-g60-stat small { margin-left: -10px; font-size: 24px; font-weight: 700; color: #60a5fa; }
.lr-g60-stat span { font-size: 14px; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.6); }
.lr-g60-text { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.62); }
.lr-g60-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.lr-g60-day { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.lr-g60-bar { position: relative; width: 100%; height: 10px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.lr-g60-bar i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #2563eb, #60a5fa); }
.lr-g60-dname { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.65); }
.lr-g60-day.is-closed .lr-g60-dname { color: rgba(255, 255, 255, 0.3); }
.lr-g60-drivers { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lr-g60-drivers li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.05); font-size: 16px; font-weight: 700; color: #fff; transition: background 0.3s ease, transform 0.3s ease; }
.lr-g60-drivers li:hover { transform: translateX(4px); background: rgba(37, 99, 235, 0.25); }
.lr-g60-drivers li span { font-size: 11px; font-weight: 800; color: #60a5fa; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) {
  .lr-g60-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "lead lead" "hours hours" "lot moves"; }
  .lr-g60-lead { min-height: 320px; }
  .lr-g60-hero-art { width: 40%; max-width: 230px; }
}
@media (max-width: 640px) {
  .lr-g60-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "hours" "lot" "moves"; }
  .lr-g60-lead { min-height: 340px; }
  .lr-g60-hero-art { width: 58%; }
  .lr-g60-big { font-size: 22px; }
  .lr-g60-stat { font-size: 46px; }
  .lr-g60-week { gap: 5px; }
}

/* ══════════ Risks of trading gold: the warning on the left, the five risks as rows on the right ══════════ */
.lr-risks { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 56px; align-items: center; max-width: 1160px; margin: 0 auto; }
.lr-risks-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: start; }
.lr-risks-side .lr-eyebrow { margin: 0; }
.lr-risks-side .section-heading, .lr-risks-side .section-sub { max-width: none; margin: 0; text-align: start; }
.lr-risks-note { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding: 18px 22px; border-radius: 20px; background: linear-gradient(135deg, #1e3a8a, #1d4ed8); box-shadow: 0 18px 40px rgba(29, 78, 216, 0.25); }
.lr-risks-note p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; color: #fff; }
.lr-risks-note .lr-art-tile { width: 48px; height: 48px; }
.lr-riskrows { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lr-riskrow { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px 22px; overflow: hidden; border: 1.5px solid rgba(37, 99, 235, 0.1); border-radius: 18px; background: #fff; box-shadow: 0 4px 18px rgba(37, 99, 235, 0.06); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.lr-riskrow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, #2563eb, #60a5fa); transform: scaleY(0); transition: transform 0.35s ease; }
.lr-riskrow:hover { transform: translateX(6px); border-color: rgba(37, 99, 235, 0.28); box-shadow: 0 14px 32px rgba(37, 99, 235, 0.12); }
.lr-riskrow:hover::before { transform: scaleY(1); }
.lr-riskrow-num { min-width: 30px; font-size: 22px; font-weight: 800; color: rgba(37, 99, 235, 0.3); font-variant-numeric: tabular-nums; }
.lr-riskrow .lr-art-tile { width: 52px; height: 52px; }
.lr-riskrow-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--color-text-dark); }
.lr-riskrow-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-dark-muted); }
@media (max-width: 900px) { .lr-risks { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 560px) { .lr-riskrow { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; } .lr-riskrow-num { display: none; } .lr-riskrow .lr-art-tile { width: 44px; height: 44px; } }

/* ══════════ Trading Psychology: the risk warning as a slim line at the foot of the hero; the glossary on a light band ══════════ */
.tp-hero .tp-risk { justify-content: center; max-width: 760px; margin: 22px auto 0; padding: 0; border: 0; background: none; font-size: 12px; text-align: center; color: var(--color-text-dark-muted); }
.lr-hero-v.tp-hero .tp-risk { margin-bottom: 0; }
.tp-hero .tp-risk { display: block; }
.tp-hero .tp-risk .lr-icon { display: inline-block; margin: 0 6px 0 0; vertical-align: -3px; }
.lr-article-head.tp-hero .tp-risk { margin-inline: auto; text-align: center; }
.tp-gloss-sec--light .tp-gloss { border: 1.5px solid rgba(37, 99, 235, 0.1); background: #fff; box-shadow: 0 6px 24px rgba(37, 99, 235, 0.07); }
.tp-gloss-sec--light .tp-gloss:hover { border-color: rgba(37, 99, 235, 0.28); background: #fff; }
.tp-gloss-sec--light .tp-gloss-head { border-bottom-color: rgba(37, 99, 235, 0.1); }
.tp-gloss-sec--light .tp-gloss-art { border: 1px solid rgba(37, 99, 235, 0.1); background: #eef4ff; }
.tp-gloss-sec--light .tp-gloss-name { color: var(--color-text-dark); }
.tp-gloss-sec--light .tp-gloss-name a:hover { color: var(--color-accent); }
.tp-gloss-sec--light .tp-count { color: var(--color-text-muted-on-tint); }
@media (prefers-reduced-motion: reduce) { .lr-g60-hero-art { animation: none; } .lr-g60-card, .lr-riskrow, .lr-riskrow::before, .lr-g60-drivers li { transition: none; } }

/* ══════════ Tray heroes on short screens (laptops, zoomed browsers): tighter spacing so the whole hero, risk line included, fits one screen ══════════ */
.tp-hero .tp-risk { max-width: 1180px; }
@media (min-width: 768px) and (max-height: 860px) {
  .lr-hero-a.section-vh-hero { padding-top: 100px; padding-bottom: 28px; }
  .lr-hero-a .hero-heading { font-size: 52px; }
  .lr-hero-a .pill-with-desc { margin-bottom: 14px; }
  .lr-hero-a .lr-tray { margin: 20px 0 4px; gap: 14px; }
  .lr-hero-a .lr-tray-tile { width: 160px; gap: 6px; padding: 12px 10px; border-radius: 20px; }
  .lr-hero-a .lr-tray-art { width: 64px; height: 64px; border-radius: 16px; }
  .lr-hero-a .lr-tray-art img { width: 54px; height: 54px; }
  .lr-hero-a .hero-buttons { margin-top: 22px; }
  .lr-hero-a .tp-risk { margin-top: 14px; }
  .lr-hero-a .lr-breadcrumb { margin-top: 14px; }
}

/* ══════════ Trading Psychology: card type on the site's scale (titles 17 to 18px bold, body 14 to 15px regular) ══════════ */
.tp-quote-text { font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.tp-mistakes-lead { font-size: 15px; font-weight: 400; line-height: 1.7; }
.tp-insight-n { font-size: 32px; }
.tp-insight-text { font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: 0; color: rgba(255, 255, 255, 0.78); }
.tp-shift-text { font-size: 15px; }
.tp-shift-text strong { font-weight: 700; }
.tp-shift-go { font-size: 14px; }
.tp-topic-tab-name { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.tp-topic-name { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.tp-topic-text { font-size: 15px; }
.tp-topic-links a { font-size: 14px; font-weight: 600; }
.tp-check-q { font-size: 16px; font-weight: 500; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.tp-checks > li { min-height: 0; }
.tp-gloss-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tp-end-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tp-step-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tp-step-text { font-size: 14px; }
.tp-next-name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.tp-next-text { font-size: 15px; }
.tp-route-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tp-route-list a { font-size: 14px; font-weight: 500; }
.tp-route-list a[aria-current="page"] { font-weight: 700; }
.tp-upnext-name { font-weight: 700; }
@media (max-width: 767px) { .tp-quote-text { font-size: 19px; } .tp-topic-name, .tp-next-name { font-size: 22px; } }

/* ══════════ Very short screens (1366x768 laptops): one more step down so heroes still fit; article heads sit higher ══════════ */
@media (min-width: 768px) and (max-height: 700px) {
  .lr-hero-a.section-vh-hero { padding-top: 92px; padding-bottom: 20px; }
  .lr-hero-a .hero-heading { font-size: 46px; }
  .lr-hero-a .pill-with-desc { margin-bottom: 10px; }
  .lr-hero-a .lr-lead { font-size: 15px; }
  .lr-hero-a .lr-tray { margin: 16px 0 2px; }
  .lr-hero-a .lr-tray-tile { padding: 10px 10px; }
  .lr-hero-a .lr-tray-art { width: 54px; height: 54px; }
  .lr-hero-a .lr-tray-art img { width: 46px; height: 46px; }
  .lr-hero-a .hero-buttons { margin-top: 18px; }
  .lr-hero-a .tp-risk { margin-top: 10px; }
  .lr-hero-a .lr-breadcrumb { margin-top: 10px; }
  .lr-article-head.section-pad { padding-top: calc(var(--header-height) + 16px); }
}

/* ══════════ Feature titles kept within the site's scale (desktop; phone sizes stay as set above) ══════════ */
@media (min-width: 768px) {
  .lrb-story[data-slot="lead"] .lrb-title { font-size: 28px; letter-spacing: -0.6px; }
  .lr-ma-card.is-lead .lr-ma-title { font-size: 22px; }
  .lr-aud-title { font-size: 24px; letter-spacing: -0.5px; }
  .lr-empty-title, .lr-webempty .lr-empty-title { font-size: 22px; }
  .lr-ma-desk-title { font-size: 20px; }
  .lr-ma-empty-title { font-size: 18px; }
}

/* ══════════ Trading Psychology hero: the risk line wraps evenly; topic tiles wide enough for one-line names on short screens ══════════ */
.tp-hero .tp-risk { max-width: 980px; text-wrap: balance; }
.lr-tray-name { text-wrap: balance; }
@media (min-width: 768px) and (max-height: 860px) { .lr-hero-a .lr-tray-tile { width: 184px; } }

/* ══════════ The four topics: a fixed size whichever topic is open, the open tab stays put, and it steps on its own ══════════ */
.tp-topics.is-tabs .tp-topic-panels { display: grid; }
.tp-topics.is-tabs .tp-topic-panels > .tp-topic { grid-area: 1 / 1; }
.tp-topics.is-tabs .tp-topic[hidden] { display: grid; visibility: hidden; }
.tp-topic-tab:hover, .tp-topic-tab[aria-selected="true"] { transform: none; }
.tp-topic-tab { overflow: hidden; }
.tp-topic-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.85); transform: scaleX(0); transform-origin: left center; }
.tp-topics.is-timing .tp-topic-tab[aria-selected="true"]::after { animation: tp-timer 5s linear forwards; }
@keyframes tp-timer { to { transform: scaleX(1); } }
.tp-topic.is-enter .tp-topic-art img, .tp-topic.is-enter .tp-topic-name, .tp-topic.is-enter .tp-topic-text, .tp-topic.is-enter .tp-topic-links li { animation: tp-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.tp-topic.is-enter .tp-topic-text { animation-delay: 0.06s; }
.tp-topic.is-enter .tp-topic-links li:nth-child(1) { animation-delay: 0.1s; }
.tp-topic.is-enter .tp-topic-links li:nth-child(2) { animation-delay: 0.15s; }
.tp-topic.is-enter .tp-topic-links li:nth-child(3) { animation-delay: 0.2s; }
.tp-topic.is-enter .tp-topic-links li:nth-child(4) { animation-delay: 0.25s; }
@keyframes tp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ══════════ Pre-trade checklist: until the first tick a spotlight steps across the questions ══════════ */
.tp-checks li { overflow: hidden; }
.tp-checks li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.09) 48%, transparent 66%); transform: translateX(-110%); pointer-events: none; }
.tp-checks li.is-spot { border-color: rgba(96, 165, 250, 0.55); background: rgba(37, 99, 235, 0.16); box-shadow: 0 18px 44px rgba(29, 78, 216, 0.3); transform: translateY(-4px); }
.tp-checks li.is-spot::after { animation: tp-sheen 1.1s ease both; }
.tp-checks li.is-spot .tp-check-box { border-color: #60a5fa; animation: tp-ring 1.6s ease-out infinite; }
.tp-checks li.is-spot .tp-check-n { color: #93c5fd; }
@keyframes tp-sheen { to { transform: translateX(110%); } }
@keyframes tp-ring { 0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(96, 165, 250, 0); } }

/* ══════════ Related glossary terms: topic filters over a fixed wall of terms, and a live definition card ══════════ */
.tp-terms { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; max-width: 1160px; margin: 0 auto; }
.tp-terms-main { padding: 28px; border: 1.5px solid rgba(37, 99, 235, 0.1); border-radius: 28px; background: #fff; box-shadow: 0 18px 50px rgba(37, 99, 235, 0.08); }
.tp-terms-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(37, 99, 235, 0.1); }
.tp-terms-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px 6px 14px; border: 1.5px solid rgba(37, 99, 235, 0.14); border-radius: 100px; background: #f5f8ff; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--color-text-dark); cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.tp-terms-pill:has(.tp-terms-pill-art) { padding-left: 6px; }
.tp-terms-pill:hover { border-color: rgba(37, 99, 235, 0.35); transform: translateY(-1px); }
.tp-terms-pill:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tp-terms-pill > span:last-child { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 100px; background: rgba(37, 99, 235, 0.1); font-size: 11px; font-weight: 700; color: var(--color-accent-on-tint); }
.tp-terms-pill-art { display: inline-flex; width: 28px; height: 28px; }
.tp-terms-pill-art img { width: 100%; height: 100%; object-fit: contain; }
.tp-terms-pill.is-on { border-color: transparent; background: linear-gradient(135deg, #1e3a8a, #1d4ed8); color: #fff; box-shadow: 0 10px 24px rgba(29, 78, 216, 0.28); }
.tp-terms-pill.is-on > span:last-child { background: rgba(255, 255, 255, 0.2); color: #fff; }
.tp-terms-wall { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tp-terms-wall > li { display: flex; transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease; }
.tp-terms-wall > li.is-dim { opacity: 0.28; filter: grayscale(1); transform: scale(0.96); }
.tp-terms-wall > li.is-dim .tp-term { pointer-events: none; }
.tp-term { display: inline-flex; align-items: center; padding: 10px 16px; border: 1.5px solid rgba(37, 99, 235, 0.14); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; color: var(--color-text-dark); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.tp-term:hover, .tp-term.is-active { border-color: transparent; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.3); }
.tp-term:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tp-terms-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 360px; padding: 30px 30px 34px; overflow: hidden; border-radius: 28px; background: radial-gradient(circle at 85% 10%, rgba(96, 165, 250, 0.45), transparent 50%), linear-gradient(160deg, #1e3a8a, #1d4ed8); box-shadow: 0 24px 60px rgba(29, 78, 216, 0.3); color: #fff; }
.tp-terms-card-art { position: absolute; top: 18px; right: 18px; width: 92px; height: 92px; opacity: 0.95; animation: lr-g60-float 6s ease-in-out infinite; }
.tp-terms-card-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(2, 12, 27, 0.4)); }
.tp-terms-k { margin: 0; padding-right: 100px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #93c5fd; }
.tp-terms-name { margin: 0; padding-right: 100px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.tp-terms-def { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.tp-terms-card.is-swap :is(.tp-terms-k, .tp-terms-name, .tp-terms-def) { animation: tp-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.tp-terms-card.is-swap .tp-terms-name { animation-delay: 0.04s; }
.tp-terms-card.is-swap .tp-terms-def { animation-delay: 0.08s; }
.tp-terms-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 11px 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); font-size: 14px; font-weight: 700; color: #fff; transition: background 0.25s ease; }
.tp-terms-go:hover { background: rgba(255, 255, 255, 0.24); }
.tp-terms-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.12); }
.tp-terms-timer span { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.tp-terms-card.is-timing .tp-terms-timer span { animation: tp-timer 4.5s linear forwards; }
@media (max-width: 991px) { .tp-terms { grid-template-columns: minmax(0, 1fr); } .tp-terms-card { min-height: 300px; } }
@media (max-width: 560px) { .tp-terms-main { padding: 20px; } .tp-terms-card { padding: 24px; } .tp-terms-name { font-size: 22px; } .tp-terms-card-art { width: 70px; height: 70px; } .tp-terms-k, .tp-terms-name { padding-right: 76px; } }
@media (prefers-reduced-motion: reduce) {
  .tp-topic.is-enter *, .tp-checks li.is-spot::after, .tp-checks li.is-spot .tp-check-box, .tp-terms-card.is-swap *, .tp-terms-card-art { animation: none !important; }
  .tp-terms-wall > li, .tp-term, .tp-terms-pill { transition: none; }
}

/* glossary explorer: the five topic filters as an even row of tiles; the definition card's art sits at its foot */
.tp-terms-filter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tp-terms-pill, .tp-terms-pill:has(.tp-terms-pill-art) { position: relative; flex-direction: column; justify-content: flex-start; gap: 6px; min-height: 0; height: 100%; padding: 12px 8px 12px; border-radius: 18px; font-size: 13px; line-height: 1.3; text-align: center; text-wrap: balance; }
.tp-terms-pill-art { width: 40px; height: 40px; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.tp-terms-pill:hover .tp-terms-pill-art, .tp-terms-pill.is-on .tp-terms-pill-art { transform: translateY(-2px) rotate(-6deg) scale(1.08); }
.tp-terms-pill > span:last-child { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 20px; padding: 0 6px; font-size: 10.5px; }
.tp-terms-card-art { top: auto; bottom: 26px; right: 24px; width: 150px; height: 150px; }
.tp-terms-k, .tp-terms-name { padding-right: 0; }
.tp-terms-go { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .tp-terms-filter { display: flex; gap: 8px; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .tp-terms-filter::-webkit-scrollbar { display: none; }
  .tp-terms-pill, .tp-terms-pill:has(.tp-terms-pill-art) { flex: 0 0 116px; }
  .tp-terms-card-art { width: 96px; height: 96px; bottom: 20px; right: 18px; }
}
/* ══════════ Blog, News and Webinars: each section fits one laptop screen (from 992px) ══════════ */
/* the compact rows (Blog) and compact notes (Market Analysis), at every width */
.lrb-desk > .lrb-story:not([data-slot="lead"]) { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: none; border-radius: 18px; }
.lrb-story:not([data-slot="lead"]) .lrb-art { padding: 10px 0 10px 10px; }
.lrb-story:not([data-slot="lead"]) .lrb-art-in { border-radius: 12px; }
.lrb-story:not([data-slot="lead"]) .lrb-art .lr-img-art { width: 58px; height: 58px; }
.lrb-story:not([data-slot="lead"]) .lrb-body { justify-content: center; gap: 4px; padding: 11px 56px 11px 16px; }
.lrb-story:not([data-slot="lead"]) .lrb-title { font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lrb-story:not([data-slot="lead"]) .lrb-excerpt, .lrb-story:not([data-slot="lead"]) .lrb-by, .lrb-story:not([data-slot="lead"]) .lrb-kdate { display: none; }
.lrb-story:not([data-slot="lead"]) .lrb-foot { margin-top: 0; padding-top: 0; border-top: 0; }
.lrb-story:not([data-slot="lead"]) .lrb-meta time, .lrb-story:not([data-slot="lead"]) .lrb-meta .lrb-dot { display: inline-block; }
.lrb-story:not([data-slot="lead"]) .lrb-go { top: 50%; right: 14px; bottom: auto; left: auto; width: 32px; height: 32px; margin-top: -16px; }
.lr-ma-card:not(.is-lead) { flex-direction: row; }
.lr-ma-card:not(.is-lead) .lr-ma-media { width: 76px; height: auto; border-bottom: 0; border-inline-end: 1.5px solid rgba(37, 99, 235, 0.08); }
.lr-ma-card:not(.is-lead) .lr-img-art { width: 54px; height: 54px; }
.lr-ma-card:not(.is-lead) .lr-ma-body { gap: 6px; padding: 12px 14px; }
.lr-ma-card:not(.is-lead) .lr-ma-title { font-size: 14.5px; -webkit-line-clamp: 2; }
.lr-ma-card:not(.is-lead) .lr-ma-excerpt, .lr-ma-card:not(.is-lead) .lr-ma-chips, .lr-ma-card:not(.is-lead) .lr-ma-by-role, .lr-ma-card:not(.is-lead) .lr-avatar { display: none; }
.lr-ma-card:not(.is-lead) .lr-ma-top time { font-size: 11px; }
.lr-ma-card:not(.is-lead) .lr-ma-foot { padding-top: 8px; }
@media (max-width: 991px) {
  .lrb-desk > .lrb-story:not([data-slot="lead"]) { grid-column: 1 / -1; }
  .lr-ma-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (min-width: 992px) {
  /* Blog: the lead post on the left, every other post a compact row on the right */
  .lrb.section-pad-sm { padding-top: 48px; padding-bottom: 48px; }
  .lrb .lr-head { margin-bottom: 18px; }
  .lrb-bar { margin-bottom: 16px; }
  .lrb-desk { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 10px 20px; }
  .lrb-desk > .lrb-story:not([data-slot="lead"]) { grid-column: 2; grid-row: auto; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: none; border-radius: 18px; }
  .lrb-desk > .lrb-story[data-slot="lead"] { grid-column: 1; grid-row: 1 / span 5; grid-template-columns: minmax(0, 1fr) minmax(200px, 38%); }
  .lrb-desk > .lrb-story[data-slot="lead"][data-w="12"] { grid-column: 1 / -1; grid-row: auto; }
  .lrb-story[data-slot="lead"] .lrb-body { gap: 10px; padding: 26px 16px 22px 30px; }
  .lrb-story[data-slot="lead"] .lrb-title { font-size: clamp(24px, 2.1vw, 32px); }
  .lrb-story[data-slot="lead"] .lrb-excerpt { -webkit-line-clamp: 3; }
  .lrb-story[data-slot="lead"] .lrb-art { padding: 14px 14px 14px 0; }
  .lrb-story[data-slot="lead"] .lrb-art .lr-img-art { width: 170px; height: 170px; }
  .lrb-story[data-slot="lead"] .lrb-art-in::after { width: 200px; height: 200px; margin: -100px 0 0 -100px; }

  /* News Roundup: two columns of stories, the ticker chips under each headline */
  #roundup.section-pad-sm { padding-top: 48px; padding-bottom: 48px; }
  #roundup .lr-head { margin-bottom: 18px; }
  #roundup .lr-timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; max-width: 1180px; margin-inline: auto; padding-inline-start: 0; }
  #roundup .lr-timeline::before, #roundup .lr-timeline > .lr-news::before { display: none; }
  #roundup .lr-timeline .lr-card-body { grid-template-columns: minmax(0, 1fr); gap: 8px; height: 100%; padding: 16px 20px; }
  #roundup .lr-timeline .lr-news-title { font-size: 16.5px; }
  #roundup .lr-timeline .lr-chips { justify-content: flex-start; }

  /* Market Analysis: a shorter lead note, the other notes as compact cards, the analysts' panel as tall as the notes and
     scrolling on its own (contain: size keeps its list from making the row taller) */
  .lr-ma.section-pad-sm { padding-top: 48px; padding-bottom: 48px; }
  .lr-ma .lr-head { margin-bottom: 20px; }
  .lr-ma-grid { flex: none; gap: 14px; }
  .lr-ma-card.is-lead .lr-ma-media { width: 36%; min-height: 0; }
  .lr-ma-card.is-lead .lr-ma-media::after { width: 190px; height: 190px; }
  .lr-ma-card.is-lead .lr-img-art { width: 150px; height: 150px; }
  .lr-ma-card.is-lead .lr-ma-body { gap: 10px; padding: 22px 28px 20px; }
  .lr-ma-card.is-lead .lr-ma-title { font-size: clamp(21px, 1.8vw, 26px); -webkit-line-clamp: 2; }
  .lr-ma-card.is-lead .lr-ma-excerpt { font-size: 15px; -webkit-line-clamp: 2; }
}
@media (min-width: 992px) {
  .lr-ma-layout { grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 360px); max-width: 1320px; }
  .lr-ma-desk { display: flex; contain: size; gap: 14px; padding: 22px 18px 14px; }
  .lr-ma-people { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding-inline-end: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; }
  .lr-ma-person { border-color: transparent; background: none; }
  .lr-ma-person + .lr-ma-person::before { display: block; }
  .lr-ma-stats li { padding: 8px 12px; }
  .lr-ma-stats strong { font-size: 20px; }
}
/* the article heads: a larger render, still one screen on a 768px-tall laptop */
@media (min-width: 768px) {
  .lr-article-head .lr-head-art img { width: 180px; height: 180px; }
}
@media (min-width: 768px) and (max-height: 820px) {
  .lr-article-head.section-pad { padding-top: calc(var(--header-height) + 12px); padding-bottom: 28px; }
  .lr-article-head .lr-head-art { margin-bottom: 12px; }
  .lr-article-head .lr-head-art img { width: 150px; height: 150px; }
}
/* phones: the webinar panel is tighter, so it is close to one screen */
@media (max-width: 767px) {
  .lr-webempty-main { gap: 8px; padding: 24px 20px 22px; }
  .lr-webempty-main .lr-art-tile { width: 60px; height: 60px; margin-bottom: 2px; }
  .lr-webempty .lr-empty-title { font-size: 22px; }
  .lr-webempty-side { padding: 16px 20px 18px; }
  .lr-webempty-link { gap: 12px; padding: 12px 0; }
  .lr-webempty-link .lr-art-tile { width: 44px; height: 44px; }
}
@media (max-width: 719px) {
  /* the lead post: a shorter render band and excerpt */
  .lrb-story[data-slot="lead"] .lrb-art { height: 156px; }
  .lrb-story[data-slot="lead"] .lrb-art .lr-img-art, .lrb-story[data-slot="lead"][data-w="12"] .lrb-art .lr-img-art { width: 118px; height: 118px; }
  .lrb-story[data-slot="lead"] .lrb-art-in::after { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .lrb-story[data-slot="lead"] .lrb-excerpt { -webkit-line-clamp: 3; }
}
@media (max-width: 767px) {
  /* the analysts side by side, swiped */
  .lr-ma-people { display: flex; gap: 10px; margin-inline: -4px; padding: 2px 4px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .lr-ma-people::-webkit-scrollbar { display: none; }
  .lr-ma-person { flex: 0 0 84%; scroll-snap-align: start; }
  .lr-ma-person + .lr-ma-person::before { display: none; }
  .lr-ma-card.is-lead .lr-ma-media { min-height: 0; height: 170px; }
  .lr-ma-card.is-lead .lr-img-art { width: 130px; height: 130px; }
  .lr-ma-card.is-lead .lr-ma-excerpt { -webkit-line-clamp: 3; }
}
/* 992px to 1199px: the notes beside the analysts have less room, so they drop their thumbnails; the blog rows are tighter */
@media (min-width: 992px) and (max-width: 1199px) {
  .lr-ma-card:not(.is-lead) .lr-ma-media { display: none; }
  .lr-ma-card.is-lead .lr-ma-media { width: 32%; }
  .lrb .lr-head { margin-bottom: 12px; }
  .lrb-bar { margin-bottom: 12px; }
  .lrb-desk > .lrb-story:not([data-slot="lead"]) { grid-template-columns: 72px minmax(0, 1fr); }
  .lrb-story:not([data-slot="lead"]) .lrb-art .lr-img-art { width: 48px; height: 48px; }
  .lrb-story:not([data-slot="lead"]) .lrb-body { padding-top: 8px; padding-bottom: 8px; }
  .lrb-story:not([data-slot="lead"]) .lrb-title { font-size: 14.5px; }
}
@media (max-width: 767px) {
  .lr-webempty-link-body span { display: none; }
}
/* narrower (992px to 1199px) or shorter (up to 740px) laptops: the blog desk tightens so it still fits one screen; the rows keep
   their full titles and drop the date and read time, which the post's own page shows */
@media (min-width: 992px) and (max-width: 1199px), (min-width: 992px) and (max-height: 740px) {
  .lrb.section-pad-sm { padding-top: 26px; padding-bottom: 26px; }
  .lrb .lr-head { margin-bottom: 12px; }
  .lrb-bar { margin-bottom: 12px; }
  .lrb-story:not([data-slot="lead"]) .lrb-foot { display: none; }
  .lrb-story[data-slot="lead"] .lrb-title { font-size: clamp(22px, 1.9vw, 28px); }
  .lrb-story[data-slot="lead"] .lrb-excerpt { -webkit-line-clamp: 2; }
  .lrb-story[data-slot="lead"] .lrb-body { gap: 8px; padding: 20px 14px 16px 26px; }
  .lrb-story[data-slot="lead"] .lrb-cta { margin-top: 2px; padding: 10px 18px; }
  .lrb-story[data-slot="lead"] .lrb-foot { padding-top: 12px; }
}
/* ══════════ Gold page: every section fits one laptop screen (from 992px; .lr-page--bar is the gold page) ══════════ */
@media (min-width: 992px) {
  .lr-page--bar > section.section-pad-sm { padding-top: 44px; padding-bottom: 44px; }
  .lr-page--bar .lr-head:not(.lr-head--bare) .lr-section-sub { margin-bottom: 26px; }
  .lr-page--bar .lr-head--bare { margin-bottom: 26px; }

  /* Gold in 60 seconds: the same bento (three columns down to 992px), tighter */
  .lr-g60-bento { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "lead hours hours" "lead lot moves"; gap: 14px; }
  .lr-g60-card { gap: 10px; padding: 20px 22px; }
  .lr-g60-lead { min-height: 0; }
  .lr-g60-hero-art { top: 30px; width: 56%; max-width: 240px; }
  .lr-g60-big { font-size: 22px; }
  .lr-g60-stat { font-size: 46px; }
  .lr-g60-stat small { font-size: 20px; }
  .lr-g60-text { font-size: 13.5px; line-height: 1.55; }
  .lr-g60-drivers { gap: 6px; }
  .lr-g60-drivers li { padding: 8px 12px; font-size: 15px; }

  /* Prices: the chart and the history are as tall as the screen allows; the history table scrolls inside its card */
  .lr-gold-top .lr-chartcard, .lr-gold-top .lr-chartcard:first-child { min-height: 0; height: clamp(380px, calc(100vh - 230px), 560px); }
  .lr-gold-top .lr-histcard { display: flex; flex-direction: column; overflow: hidden; }
  .lr-gold-top .lr-hist-body { min-height: 0; }
  .lr-gold-top .lr-hist-wrap { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .lr-gold-top .lr-hist-table th, .lr-gold-top .lr-hist-table td { padding-top: 7px; padding-bottom: 7px; }

  /* what moves gold: the four forces stay in one row */
  .lr-gold-forces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .lr-gold-forces > .price-driver-card { padding: 22px 20px; }
  .lr-gold-dollar { margin-top: 22px; font-size: 15px; }

  /* a gold CFD trade in numbers: the four short steps in a row, the two long ones half a row each */
  .lr-gold-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1160px; }
  .lr-gold-steps li:nth-child(n+5) { grid-column: span 2; }
  .lr-gold-steps li { gap: 12px; padding: 16px 18px; }
  .lr-gold-steps p { font-size: 14px; line-height: 1.6; }
  .lr-gold-close { margin-top: 20px; }
  .lr-gold-close p { font-size: 15px; line-height: 1.6; }
  .lr-page--bar .lr-head:has(+ .lr-gold-steps) .lr-section-sub { max-width: 760px; }

  /* risks: the rows tighter */
  .lr-risks { gap: 40px; }
  .lr-riskrows { gap: 8px; }
  .lr-riskrow { gap: 14px; padding: 12px 18px; }
  .lr-riskrow .lr-art-tile { width: 44px; height: 44px; }
  .lr-riskrow-title { font-size: 16px; margin-bottom: 2px; }
  .lr-riskrow-text { font-size: 13.5px; line-height: 1.5; }

  /* myths: three a row, tighter */
  .lr-myths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .lr-myth.price-driver-card { padding: 18px 20px; }
  .lr-myth .price-driver-title { font-size: 16px; margin-bottom: 4px; }
  .lr-myth .price-driver-body { font-size: 13.5px; line-height: 1.55; }


  /* the FAQ on every Learning page: tighter rows, and the questions scroll inside their column if they would not fit */
  .lr-page .basic-faq.section-vh-lg { padding-top: 44px; padding-bottom: 44px; }
  .lr-page .basic-faq-left { padding-top: 14px; }
  .lr-page .basic-faq-accordion-trigger { padding: 15px 0; }
  .lr-page .basic-faq-right { max-height: calc(100vh - 88px); overflow-y: auto; padding-inline-end: 10px; scrollbar-width: thin; }
}
/* 992px to 1199px: less width, so the risks column gets more of it */
@media (min-width: 992px) and (max-width: 1199px) {
  .lr-risks { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 28px; }
  .lr-riskrow-num { display: none; }
  .lr-riskrow { grid-template-columns: auto minmax(0, 1fr); }
  .lr-gold-steps p, .lr-myth .price-driver-body { font-size: 13px; }
  .lr-myth.price-driver-card { padding: 16px 18px; }
  .lr-page--bar > section.section-pad-sm { padding-top: 36px; padding-bottom: 36px; }
  /* the worked trade: heading and closing note on the left, the six steps down the right (as the risks section) */
  .lr-page--bar section > .container:has(> .lr-gold-steps) { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "head steps" "close steps"; column-gap: 32px; align-content: center; align-items: start; width: 100%; }
  /* the site's content-width cap on container children (base.css) would shrink each grid column, so the grid sets the widths */
  .lr-page--bar .container:has(> .lr-gold-steps) > * { width: auto; max-width: none; }
  .lr-page--bar .container > .lr-head:has(+ .lr-gold-steps) { grid-area: head; align-self: end; text-align: start; }
  .lr-page--bar .container > .lr-head:has(+ .lr-gold-steps) :is(.lr-section-title, .lr-section-sub) { margin-inline: 0; text-align: start; }
  .lr-page--bar .container > .lr-gold-steps { grid-area: steps; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lr-page--bar .container > .lr-gold-steps li:nth-child(n+5) { grid-column: auto; }
  .lr-page--bar .container > .lr-gold-close { grid-area: close; margin: 16px 0 0; text-align: start; }
}
/* short laptop screens: the gold hero's tiles sit a little closer to the text */
@media (min-width: 992px) and (max-height: 740px) {
  .lr-page--bar .lr-hero .lr-tray { margin-top: 14px; }
}
/* ══════════ Trading Psychology: every section fits one laptop screen (from 992px) ══════════ */
@media (min-width: 992px) {
  .lr-page > section.tp-sec.section-pad-sm { padding-top: 44px; padding-bottom: 44px; }
  .tp-sec .lr-head--bare { margin-bottom: 26px; }
  /* the four sections: a tighter topic panel */
  .tp-topic-tab { padding-block: 10px; }
  .tp-topic-visual { min-height: 0; padding: 56px 22px 22px; }
  .tp-topic-art { width: min(200px, 78%); }
  .tp-topic-body { gap: 12px; padding: 28px 30px; }
  .tp-topic-name { font-size: 28px; }
  .tp-topic-text { font-size: 15px; line-height: 1.6; }
  .tp-topic-links a { min-height: 44px; padding-block: 7px; font-size: 14.5px; }
  /* related glossary terms: the terms scroll inside their card (no taller than the screen allows); the card beside it matches */
  .tp-terms-main { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 172px); padding: 22px; }
  .tp-terms-filter { flex: none; margin-bottom: 14px; padding-bottom: 14px; }
  .tp-terms-wall { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: flex-start; gap: 8px; padding-inline-end: 6px; scrollbar-width: thin; }
  .tp-term { padding: 8px 14px; font-size: 13.5px; }
  .tp-terms-card { min-height: 0; padding: 26px 26px 28px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .tp-topics.is-tabs { grid-template-columns: 250px minmax(0, 1fr); gap: 16px; }
  .tp-topic { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .tp-topic-tab { gap: 12px; }
  .tp-topic-tab-art { width: 48px; height: 48px; }
  .tp-topic-tab-name { font-size: 15.5px; }
  .tp-topic-name { font-size: 24px; }
  .tp-topic-body { padding: 24px 26px; }
}
/* Trading Psychology topic pages: the article path (and the related terms under it) in one screen */
@media (min-width: 992px) {
  .tp-step { gap: 12px; }
  .tp-step-node { width: 40px; height: 40px; font-size: 13px; }
  .tp-path::before { top: 19px; }
  .tp-step-card { gap: 8px; padding: 14px 18px 18px; }
  .tp-step-art, .tp-path--2 .tp-step-art { height: 100px; margin-bottom: 4px; padding: 10px; }
  .tp-step-art img, .tp-path--2 .tp-step-art img { width: 80px; height: 80px; }
  .tp-step-title { font-size: 18px; }
  .tp-step-text { font-size: 14px; line-height: 1.55; }
  .tp-step-go { padding-top: 6px; font-size: 13.5px; }
  .tp-path-sec .tp-end { margin-top: 18px; padding: 18px 22px 20px; }
  .tp-path-sec .tp-end-head { margin-bottom: 10px; }
}
/* 992px to 1199px: two articles a row, each a horizontal card (render on the left) */
@media (min-width: 992px) and (max-width: 1199px) {
  .tp-path--4 .tp-step-node { display: none; }
  .tp-path--4 .tp-step-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 16px; row-gap: 4px; align-items: start; }
  .tp-path--4 .tp-step-art { grid-row: 1 / -1; height: 96px; margin: 0; padding: 8px; }
  .tp-path--4 .tp-step-art img { width: 76px; height: 76px; }
  .tp-path--4 .tp-step-card > :not(.tp-step-art) { grid-column: 2; }
}
/* the next-article card and the route beside it; the path on short screens */
@media (min-width: 992px) {
  .tp-next-card { gap: 24px; padding: 26px; }
  .tp-route { padding: 22px 22px; }
  .tp-route-title { margin-bottom: 10px; }
  .tp-route-list a { min-height: 42px; padding-block: 6px; }
  .tp-next-sec .tp-end { margin-top: 18px; padding: 18px 22px 20px; }
  .tp-next-sec .tp-end-head { margin-bottom: 10px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .tp-next-card { grid-template-columns: 140px minmax(0, 1fr); gap: 18px; padding: 22px; }
  .tp-next-art { width: 140px; padding: 18px; }
}
@media (min-width: 992px) and (max-height: 740px) {
  .tp-path-sec .lr-head--bare { margin-bottom: 18px; }
  .tp-path-sec .tp-step-art { height: 88px; }
  .tp-path-sec .tp-step-art img { width: 70px; height: 70px; }
}
/* ══════════ Explore All and the Gold articles list: every section fits one laptop screen (from 992px) ══════════ */
@media (min-width: 992px) {
  .lr-page > section.section-pad-sm:has(> .container > :is(.lr-auds, .lr-desk--3, .lr-readlist, .lr-blogdesk, .lr-carousel)) { padding-top: 44px; padding-bottom: 44px; }
  /* where to start: the two panels tighter */
  .lr-aud { gap: 14px; padding: 26px 28px 26px; }
  .lr-aud-title { font-size: 24px; }
  .lr-aud-text { font-size: 14.5px; line-height: 1.55; }
  .lr-aud-art { flex-basis: 84px; height: 84px; }
  .lr-aud-points a { padding: 10px 0; }
  /* gold articles: the lead a little shorter, the other articles compact rows */
  .lr-readlist { gap: 14px; }
  .lr-readlist .lr-featured-article .lr-img-art { width: 120px; height: 120px; }
  .lr-readlist-rows { gap: 10px; }
  .lr-row { gap: 14px; padding: 10px; }
  .lr-row-media { flex-basis: 84px; min-height: 64px; }
  .lr-row-media .lr-img-art { width: 56px; height: 56px; }
  .lr-row-body { justify-content: center; padding: 2px 6px 2px 0; }
  .lr-row-title { font-size: 15.5px; }
  .lr-readlist .lr-row-excerpt { display: none; }
  .lr-readlist-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lr-readlist .lr-featured-article .edge-card-body { gap: 8px; padding: 22px 26px; }
  .lr-readlist .lr-featured-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  /* news desk: the snapshot rows and the lead story tighter */
  .lr-snap-row { padding: 8px 0; }
  .lr-desk--3 .lr-desk-lead > .lr-card-media { min-height: 140px; }
  /* spotlight: a shorter render band */
  .lr-slide-media { height: 136px; }
  .lr-slide-media img { width: 104px; height: 104px; }
  .lr-slide-body { padding: 16px 20px 18px; }
  .lr-carousel.is-centered .lr-carousel-track { padding-top: 12px; padding-bottom: 16px; }
}
/* short laptop screens (up to 800px tall): the section headings sit a little closer to their content */
@media (min-width: 992px) and (max-height: 800px) {
  .lr-page > section.section-pad-sm:has(> .container > :is(.lr-auds, .lr-desk--3, .lr-readlist, .lr-blogdesk, .lr-carousel)) { padding-top: 34px; padding-bottom: 34px; }
  .lr-page > section:has(> .container > :is(.lr-desk--3, .lr-blogdesk)) .lr-head { margin-bottom: 18px; }
  .lr-page > section:has(> .container > :is(.lr-desk--3, .lr-blogdesk)) .lr-section-link { margin-top: 6px; }
  /* the blog's lead story (its title can take two lines) */
  .lr-blog-lead > .lr-card-media { height: 196px; }
  .lr-blog-lead .lr-img-art { width: 128px; height: 128px; }
}
@media (min-width: 992px) and (max-width: 1399px) { .lr-aud-art { width: 72px; height: 72px; } }
/* 992px to 1100px: the news desk keeps its three columns (snapshot, lead story, headlines); the gold lead's render narrower */
@media (min-width: 992px) and (max-width: 1100px) {
  .lr-desk--3 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1fr); }
  .lr-desk--3 .lr-desk-snap { grid-column: auto; order: 0; padding: 18px 16px 14px; }
  .lr-desk--3 .lr-snap-list { display: block; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .lr-readlist .lr-featured-article > .lr-card-media { width: 240px; }
  .lr-readlist-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) and (max-height: 740px) { .lr-snap-row { padding: 7px 0; } }
/* Trading Psychology main page: the glossary heading clear of its cards; the term card's text and link together at the
   foot of the card, the render in the top corner */
@media (min-width: 992px) {
  .tp-terms-sec .lr-head--bare { margin-bottom: 44px; }
  .tp-terms-sec .tp-terms-main { max-height: calc(100vh - 200px); }
}
.tp-terms-card { justify-content: flex-end; padding-top: 150px; }
.tp-terms-card .tp-terms-k { margin-top: auto; }
.tp-terms-card .tp-terms-go { margin-top: 10px; }
.tp-terms-card-art { top: 24px; right: 24px; bottom: auto; width: 110px; height: 110px; }
@media (max-width: 640px) {
  .tp-terms-card { padding-top: 116px; }
  .tp-terms-card-art { top: 18px; right: 18px; bottom: auto; width: 84px; height: 84px; }
}

/* ══════════ Blog: the four beginner series (scripts/learning/series.js) ══════════
   /learning/blog/ lists each series with its chapters; a series page lists its chapters as cards; a chapter reads like a
   Trading Psychology article (its hero, text band, questions, next card and route are those pieces). Only what those do not
   have is here. */
.lrs-band > .container, .lrs-path-sec > .container, .lrs-next-sec > .container { width: 100%; }
.lrs-band .lr-head { margin-bottom: 28px; }
.lrs-band .lr-section-link { margin-top: 4px; margin-bottom: 0; }
.lrs-band--dark .lr-section-link { color: #93c5fd; }

/* the landing: each series' chapters, numbered rows in three columns */
/* three a row (two for a series of four); a short last row sits in the middle */
.lrs-chapters, .lrs-path { --cols: 3; --gap: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); max-width: 1160px; margin: 0 auto; padding: 0; list-style: none; }
.lrs-chapters > li, .lrs-path > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.lrs-chapters--4, .lrs-path--4 { --cols: 2; max-width: 920px; }
.lrs-chapter { position: relative; display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 14px 18px; border: var(--tp-card-border); border-radius: 18px; background: #fff; box-shadow: var(--tp-card-shadow); transition: transform 0.3s var(--tp-ease), border-color var(--transition), box-shadow 0.3s ease; }
.lrs-chapter:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, 0.3); box-shadow: 0 16px 40px rgba(37, 99, 235, 0.14); }
.lrs-chapter:has(a:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.lrs-chapter-n { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--tp-grad); font-size: 13px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.lrs-chapter-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.lrs-chapter-k { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-accent-on-tint); }
.lrs-chapter-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: #0f172a; }
.lrs-chapter-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lrs-chapter-title:focus-visible { outline: none; }
.lrs-chapter > .lr-icon { flex-shrink: 0; color: var(--color-accent); opacity: 0.4; transition: opacity var(--transition), transform var(--transition); }
.lrs-chapter:hover > .lr-icon { opacity: 1; transform: translateX(4px); }
.lrs-band--dark .lrs-chapter { border: var(--tp-glass-border); background: var(--tp-glass); box-shadow: none; }
.lrs-band--dark .lrs-chapter:hover { border-color: rgba(96, 165, 250, 0.45); background: rgba(255, 255, 255, 0.07); }
.lrs-band--dark .lrs-chapter-k { color: #93c5fd; }
.lrs-band--dark .lrs-chapter-title { color: #fff; }
.lrs-band--dark .lrs-chapter > .lr-icon { color: #93c5fd; }

/* a series page: the chapters as cards, the render on the left */
.lrs-path { --gap: 16px; }
.lrs-step { display: flex; }
.lrs-step-card { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; padding: 16px 18px; border: var(--tp-card-border); border-radius: 22px; background: #fff; box-shadow: 0 18px 44px rgba(2, 6, 23, 0.32); transition: transform 0.35s var(--tp-ease), box-shadow 0.35s ease; }
.lrs-step-card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(37, 99, 235, 0.34); }
.lrs-step-card:has(a:focus-visible) { outline: 2px solid #60a5fa; outline-offset: 4px; }
.lrs-step-art { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; padding: 8px; border-radius: 18px; background: var(--tp-tile); }
.lrs-step-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(37, 99, 235, 0.2)); transition: transform 0.5s var(--tp-ease); }
.lrs-step-card:hover .lrs-step-art img { transform: scale(1.08) rotate(-4deg); }
.lrs-step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lrs-step-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #0f172a; }
.lrs-step-title a { color: inherit; }
.lrs-step-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lrs-step-title a:focus-visible { outline: none; }
.lrs-step-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-dark-muted); }
.lrs-step .tp-kicker { letter-spacing: 1.1px; white-space: nowrap; }

/* a chapter's head: the titles are whole questions, so they are set a size down from the other heads and run wider, and the
   render is a little smaller, so even a three line title with a long opening fits one screen */
@media (min-width: 768px) { .lrs-article-hero .lr-head-art img { width: 150px; height: 150px; } }
@media (min-width: 768px) and (max-height: 820px) { .lrs-article-hero .lr-head-art img { width: 120px; height: 120px; } }
@media (min-width: 992px) { .lrs-article-hero .hero-heading { max-width: 1000px; font-size: 50px; line-height: 1.1; } }

/* a chapter: Summary and What's in this guide, above the text */
.lrs-body { --lr-link: #93c5fd; }
.lrs-glance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 44px; }
.lrs-glance-card { padding: 22px 24px; border: var(--tp-glass-border); border-radius: 20px; background: rgba(255, 255, 255, 0.05); }
.lrs-glance-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #93c5fd; }
.lrs-glance-list, .lrs-glance-toc { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }
.lrs-glance-list li { position: relative; padding-inline-start: 20px; }
.lrs-glance-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: #60a5fa; }
.lrs-glance-toc { gap: 2px; }
.lrs-glance-toc a, .lrs-glance-item { display: flex; align-items: baseline; gap: 10px; padding: 5px 8px; border-radius: 10px; color: inherit; transition: background var(--transition), color var(--transition); }
.lrs-glance-toc a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.lrs-glance-n { flex-shrink: 0; font-size: 12px; font-weight: 800; color: #60a5fa; }

/* a chapter: the text's own pieces */
.lr-prose .lrs-key { margin: 6px 0 24px; padding: 16px 20px; border-inline-start: 3px solid #60a5fa; border-radius: 0 14px 14px 0; background: rgba(96, 165, 250, 0.1); font-weight: 700; color: #fff; }
.lr-prose .lrs-note { margin-bottom: 12px; font-size: 14px; font-style: italic; color: rgba(255, 255, 255, 0.6); }
.lr-prose .lrs-disclosure { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, 0.55); }
.lr-prose .lrs-disclosure strong { color: rgba(255, 255, 255, 0.8); }

/* a chapter: the diagrams the briefs ask for, on the tables' white card */
.lrs-fig { max-width: 860px; margin: 8px 0 28px; padding: 22px 22px 16px; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 18px 50px rgba(2, 6, 23, 0.4); color: #0f172a; }
.tp-body .lr-prose .lrs-fig strong { color: #0f172a; }
.lrs-fig figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--color-text-dark-muted); }
.lrs-svg { display: block; width: 100%; height: auto; font-family: inherit; font-size: 15px; font-weight: 600; fill: #334155; }
.lrs-svg .lrs-svg-title { font-size: 15px; font-weight: 800; fill: #0f172a; }
.lrs-svg .lrs-svg-muted { font-size: 13px; font-weight: 600; fill: #64748b; }
.lrs-svg-wick { stroke: #0f172a; stroke-width: 3; stroke-linecap: round; }
.lrs-svg-up { fill: #16a34a; }
.lrs-svg-down { fill: #dc2626; }
.lrs-svg-guide { stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 3 4; }
.lrs-svg-zone { fill: rgba(220, 38, 38, 0.14); }
.lrs-svg-zone--low { fill: rgba(22, 163, 74, 0.16); }
.lrs-svg-price { fill: none; stroke: #2563eb; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.lrs-svg-price--thin { stroke: #94a3b8; stroke-width: 2.5; }
.lrs-svg-avg-short, .lrs-svg-avg-long { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.lrs-svg-avg-short { stroke: #2563eb; }
.lrs-svg-avg-long { stroke: #f59e0b; }
.lrs-svg-legend { fill: rgba(255, 255, 255, 0.92); stroke: rgba(37, 99, 235, 0.14); }
.lrs-svg-mark { fill: none; stroke: #2563eb; stroke-width: 3; }
.lrs-svg-grid { stroke: #e2e8f0; stroke-width: 1; }
.lrs-svg-dot.lrs-svg-avg-short { fill: #2563eb; }
.lrs-svg-dot.lrs-svg-price { fill: #94a3b8; stroke: none; }
.lrs-svg-dot.lrs-svg-avg-long { fill: #f59e0b; }
.lrs-svg-fulcrum { fill: #cbd5e1; }
.lrs-svg-beam { stroke: #0f172a; stroke-width: 8; stroke-linecap: round; }
.lrs-svg-arrow { fill: none; stroke: #2563eb; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.lrs-svg .lrs-svg-on { font-size: 22px; font-weight: 800; fill: #fff; }
/* steps in a chain: a row of numbered boxes with arrows between them (a loop marks the last arrow back to the first) */
.lrs-flow { display: flex; align-items: stretch; gap: 30px; margin: 0; padding: 4px 0; list-style: none; counter-reset: none; }
.lrs-flow > li { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 16px 10px; border: 1.5px solid rgba(37, 99, 235, 0.16); border-radius: 14px; background: #f5f8ff; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; color: #0f172a; }
/* (over the text band's own list look) */
.lr-prose ol.lrs-flow { flex-direction: row; gap: 30px; margin: 0; }
.tp-body .lr-prose .lrs-flow > li { padding: 16px 10px; }
.tp-body .lr-prose .lrs-flow > li::before { content: none; }
.lrs-flow > li + li::after { content: ""; position: absolute; top: 50%; right: calc(100% + 8px); width: 14px; height: 14px; border-top: 3px solid #2563eb; border-right: 3px solid #2563eb; transform: translateY(-50%) rotate(45deg); }
.lrs-flow-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tp-grad); font-size: 12px; font-weight: 800; color: #fff; }
.lrs-flow--loop > li:last-child { border-color: rgba(220, 38, 38, 0.4); background: #fff5f5; }
.lrs-flow-again { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; text-align: center; color: #dc2626; }
.lrs-flow-again::before { content: "↺ "; }
@media (max-width: 767px) {
  .lr-prose ol.lrs-flow { flex-direction: column; gap: 22px; }
  .tp-body .lr-prose .lrs-flow > li { flex-direction: row; justify-content: flex-start; padding: 12px 14px; text-align: start; }
  .lrs-flow > li + li::after { top: auto; right: auto; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) rotate(135deg); }
}
/* pip and pipette */
.lrs-quotes { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 56px; padding: 8px 0 30px; }
.lrs-quote { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lrs-quote-pair { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; color: #64748b; }
.lrs-quote-num { display: flex; align-items: flex-end; font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: #0f172a; }
.lrs-quote-pip, .lrs-quote-pipette { position: relative; margin-inline-start: 3px; padding: 2px 4px; border-radius: 8px; }
.lrs-quote-pip { background: rgba(37, 99, 235, 0.14); color: #1d4ed8; }
.lrs-quote-pipette { margin-inline-start: 10px; background: rgba(245, 158, 11, 0.16); font-size: 0.72em; color: #b45309; }
.lrs-quote-num em { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
/* the three sessions over 24 hours */
.lrs-tls { display: flex; flex-direction: column; gap: 22px; }
.lrs-tl { display: flex; flex-direction: column; gap: 6px; }
.lrs-tl-title { margin: 0 0 2px; font-size: 13px; font-weight: 800; color: #0f172a; }
.lrs-tl-row, .lrs-tl-axis { display: flex; align-items: center; }
.lrs-tl-name { flex: 0 0 78px; font-size: 12.5px; font-weight: 700; color: #334155; }
.lrs-tl-track { position: relative; flex: 1; height: 28px; border-radius: 8px; background: #f1f5fb; }
.lrs-tl-bar { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: #fff; }
.lrs-tl-bar--asia { background: #0ea5e9; }
.lrs-tl-bar--london { background: #2563eb; }
.lrs-tl-bar--ny { background: #1e3a8a; }
.lrs-tl-bar--both { background: #f59e0b; color: #0f172a; }
.lrs-tl-aside { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 700; white-space: nowrap; color: #b45309; }
.lrs-tl-axis .lrs-tl-track { height: 18px; background: none; }
.lrs-tl-tick { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: #64748b; }
.lrs-tl-tick:first-child { transform: none; }
.lrs-tl-tick:last-child { transform: translateX(-100%); }
.lrs-tl-note { display: none; margin: 4px 0 0; font-size: 12px; font-weight: 700; color: #b45309; }
/* the made up index's weights */
.lrs-index { padding: 4px 0; }
.lrs-index-brace { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid #1d4ed8; font-size: 13px; font-weight: 800; text-align: center; color: #1d4ed8; }
.lrs-index-bar { display: flex; gap: 3px; height: 46px; }
.lrs-index-seg { border-radius: 6px; }
.lrs-index-seg--1 { background: #1e3a8a; }
.lrs-index-seg--2 { background: #2563eb; }
.lrs-index-seg--3 { background: #60a5fa; }
.lrs-index-seg--small { background: #cbd5e1; }
.lrs-index-labels { display: flex; gap: 3px; margin-top: 10px; }
.lrs-index-labels span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.35; text-align: center; color: #475569; }
.lrs-index-labels strong { font-size: 12.5px; color: #0f172a; }

/* a chapter: the next card with Read next under it, the series' route beside them */
.tp-route-n.lrs-route-intro { width: auto; padding: 0 7px; border-radius: 100px; font-size: 10px; }
.lrs-next-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lrs-next-col .tp-end { margin: 0; }
.lrs-readnext-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lrs-readnext-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, 0.86); transition: background var(--transition), color var(--transition); }
.lrs-readnext-list a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.lrs-readnext-list .lr-icon { flex-shrink: 0; color: #93c5fd; transition: transform var(--transition); }
.lrs-readnext-list a:hover .lr-icon { transform: translateX(4px); }

/* every section fits one laptop screen (from 992px) */
@media (min-width: 992px) {
  .lr-page > section.lrs-band.section-pad-sm, .lr-page > section.lrs-path-sec.section-pad-sm, .lr-page > section.lrs-next-sec.section-pad-sm { padding-top: 44px; padding-bottom: 44px; }
  .lrs-path-sec .lr-head--bare { margin-bottom: 26px; }
  .lrs-next-sec .lr-head--bare { margin-bottom: 24px; }
  .lrs-next-sec .tp-route { padding: 18px 20px; }
  .lrs-next-sec .tp-route-title { margin-bottom: 6px; }
  .lrs-next-sec .tp-route-list { gap: 2px; }
  .lrs-next-sec .tp-route-list a { min-height: 36px; padding-block: 4px; }
  .lrs-next-sec .tp-route-list li:not(:last-child)::after { top: 36px; }
  .lrs-next-sec .tp-route-n { width: 26px; height: 26px; font-size: 11px; }
  .lrs-next-sec .tp-next-card { padding: 24px; }
  .lrs-next-sec .tp-next-name { font-size: 22px; line-height: 1.2; }
  .lrs-next-sec .lrs-readnext { padding: 16px 20px 18px; }
  .lrs-next-sec .lrs-readnext .tp-end-head { margin-bottom: 6px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .lrs-chapter { gap: 12px; padding: 12px 14px; }
  .lrs-chapter-n { width: 36px; height: 36px; font-size: 12px; }
  .lrs-chapter-title { font-size: 14px; }
  .lrs-step-card { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .lrs-step .tp-kicker { font-size: 10px; letter-spacing: 0.8px; }
  .lrs-step-art { width: 56px; height: 56px; padding: 6px; }
  .lrs-step-title { font-size: 15px; }
  .lrs-step-text { font-size: 13px; }
}
@media (min-width: 992px) and (max-height: 760px) {
  .lrs-band .lr-head { margin-bottom: 20px; }
  .lrs-chapter { min-height: 76px; padding-block: 10px; }
  .lrs-path-sec .lr-head--bare { margin-bottom: 18px; }
  .lrs-step-card { padding-block: 12px; }
}

/* stacked screens */
@media (max-width: 991px) {
  .lrs-chapters, .lrs-path { --cols: 2; }
  .lrs-glance { grid-template-columns: minmax(0, 1fr); margin-bottom: 36px; }
}
/* phones: a series' head keeps to about one screen, as the Trading Psychology topic heads do (the chapters start right under it) */
@media (max-width: 767px) { .lrs-hero .hero-buttons { display: none; } }
@media (max-width: 640px) {
  .lrs-chapters, .lrs-chapters--4, .lrs-path, .lrs-path--4 { --cols: 1; }
  .lrs-chapter { min-height: 0; }
  .lrs-step-card { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .lrs-step-art { width: 56px; height: 56px; padding: 6px; }
  .lrs-glance-card { padding: 18px; }
  .lrs-fig { padding: 16px 12px 12px; }
  .lrs-quote-num { font-size: 34px; }
  .lrs-tl-name { flex: 0 0 62px; font-size: 11.5px; }
  .lrs-tl-bar { font-size: 9.5px; }
  /* the overlap bars are too short for their times on a phone: the times go under the timeline */
  .lrs-tl-bar--both { font-size: 0; }
  .lrs-tl-aside { display: none; }
  .lrs-tl-note { display: block; }
  .lrs-tl-tick { font-size: 9.5px; }
  .lrs-tl-tick:nth-child(even) { display: none; }
  .lrs-index-labels span, .lrs-index-labels strong { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .lrs-chapter:hover, .lrs-step-card:hover { transform: none; }
}
/* the blog heads: a tile per series, all seven on one row from 992px */
@media (min-width: 992px) {
  :is(.lrs-hero, .lrs-landing) .lr-tray { flex-wrap: nowrap; gap: 10px; }
  :is(.lrs-hero, .lrs-landing) .lr-tray-tile { width: 122px; padding: 12px 8px 10px; gap: 6px; }
  :is(.lrs-hero, .lrs-landing) .lr-tray-art { width: 66px; height: 66px; }
  :is(.lrs-hero, .lrs-landing) .lr-tray-art img { width: 56px; height: 56px; }
  :is(.lrs-hero, .lrs-landing) .lr-tray-name { font-size: 13px; }
}
@media (max-width: 991px) {
  :is(.lrs-hero, .lrs-landing) .lr-tray { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; margin-inline: auto; padding: 4px 2px 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  :is(.lrs-hero, .lrs-landing) .lr-tray::-webkit-scrollbar { display: none; }
  :is(.lrs-hero, .lrs-landing) .lr-tray > li { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ══════════ Trading Psychology: the pre-trade ticket (the checklist, option C chosen 4 November 2026) ══════════
   The heading on the left, a ticket card on the right: a deep blue header with the count, six question rows that tick, and
   a foot with the meter. Ticked rows go quiet and are struck through; with all six ticked the count turns white and the meter glows. */
.tp-ticket-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 64px; max-width: 1160px; margin: 0 auto; }
/* (both columns take their grid track, not the cap base.css puts on container children) */
.tp-ticket-grid > * { width: auto; max-width: none; min-width: 0; }
.tp-ticket-intro .section-heading, .tp-ticket-intro .tp-intro { text-align: start; }
.tp-ticket-intro .tp-intro { max-width: 440px; margin: 18px 0 0; }
.tp-ticket-eyebrow { color: #93c5fd; }
.tp-ticket { --tp-ticket-bg: #0d1e38; position: relative; border-radius: 26px; background: #fff; box-shadow: 0 34px 80px rgba(2, 6, 23, 0.5), 0 0 0 1px rgba(96, 165, 250, 0.18); }
.tp-ticket::before { content: ""; position: absolute; inset: -18px -18px auto auto; z-index: -1; width: 70%; height: 80%; border-radius: 40px; background: radial-gradient(circle, rgba(37, 99, 235, 0.35), transparent 70%); filter: blur(20px); }
.tp-ticket-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 18px 26px; border-radius: 26px 26px 0 0; background: var(--tp-grad); color: #fff; transition: background 0.4s ease; }
.tp-ticket-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.tp-ticket-label .lr-icon { width: 18px; height: 18px; opacity: 0.85; }
.tp-ticket .tp-check-count { padding: 5px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.16); font-size: 12.5px; font-weight: 700; color: #fff; }
.tp-ticket-list { margin: 0; padding: 6px 14px; list-style: none; }
.tp-ticket-list li { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-radius: 14px; font-size: 16px; font-weight: 600; line-height: 1.45; color: #0f172a; transition: background var(--transition), color var(--transition); }
.tp-ticket-list li + li::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; border-top: 1.5px dashed #dbe4f3; }
.tp-ticket-list .tp-check-n { flex: none; width: 24px; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: #2563eb; }
.tp-ticket-list .tp-check-q { flex: 1; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.45; color: inherit; text-decoration-color: #93c5fd; text-decoration-thickness: 2px; }
.tp-ticket-list .tp-check-box { position: static; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid #cbd5e1; border-radius: 9px; background: #fff; color: transparent; transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition); }
.tp-ticket-list.is-interactive li { cursor: pointer; }
.tp-ticket-list.is-interactive li:hover, .tp-ticket-list li.is-spot { background: #f2f7ff; }
.tp-ticket-list.is-interactive li:hover .tp-check-box, .tp-ticket-list li.is-spot .tp-check-box { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.tp-ticket-list.is-interactive li:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.tp-ticket-list li[aria-checked="true"] { color: #64748b; }
.tp-ticket-list li[aria-checked="true"] .tp-check-q { text-decoration-line: line-through; }
.tp-ticket-list li[aria-checked="true"] .tp-check-box { border-color: #2563eb; background: #2563eb; color: #fff; }
.tp-ticket-list li[aria-checked="true"] .tp-check-box svg { animation: tp-pop 0.4s var(--tp-ease); }
/* the foot: just the meter under the questions, on the card itself (no tear line) */
.tp-ticket-foot { padding: 6px 26px 24px; border-radius: 0 0 26px 26px; }
.tp-ticket .tp-check-bar { display: block; height: 10px; overflow: hidden; border-radius: 100px; background: #e5edf9; }
.tp-ticket .tp-check-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #60a5fa); transform-origin: left center; transform: scaleX(0); transition: transform 0.5s var(--tp-ease), background 0.4s ease; }
/* all six ticked: the ticket stays in the site blue; the count turns white and the meter glows */
.tp-ticket.is-done .tp-check-count { background: #fff; color: #1d4ed8; }
.tp-ticket.is-done .tp-check-bar span { box-shadow: 0 0 16px rgba(37, 99, 235, 0.55); }
@media (min-width: 992px) and (max-height: 760px) { .tp-ticket-list li { padding-block: 11px; } }
@media (max-width: 991px) {
  .tp-ticket-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tp-ticket-intro .section-heading, .tp-ticket-intro .tp-intro, .tp-ticket-eyebrow { text-align: center; }
  .tp-ticket-intro { text-align: center; }
  .tp-ticket-intro .tp-intro { margin-inline: auto; }
}
@media (max-width: 640px) {
  .tp-ticket-head { padding: 14px 18px; }
  .tp-ticket-list { padding: 4px 6px; }
  .tp-ticket-list li { gap: 12px; padding: 13px 10px; }
  .tp-ticket-list .tp-check-q { font-size: 15px; }
  .tp-ticket-foot { padding: 16px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .tp-ticket-list li[aria-checked="true"] .tp-check-box svg { animation: none; } }

/* ══════════ Trading Psychology topic pages: the articles as a reading list (option A chosen 4 November 2026) ══════════
   The heading, the topic's line and its glossary terms on the left; the articles as numbered rows on the right, the first in
   the deep blue as the place to start. A row is one link (its title stretches over it). */
.tp-list-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 56px; max-width: 1160px; margin: 0 auto; }
.tp-list-grid > * { width: auto; max-width: none; min-width: 0; }
.tp-list-intro .section-heading, .tp-list-intro .section-sub { text-align: start; }
.tp-list-intro .section-sub { max-width: 440px; margin: 16px 0 26px; }
.tp-list-k { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #93c5fd; }
.tp-list-intro .tp-chips { gap: 8px; }
.tp-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tp-list-item { position: relative; display: grid; grid-template-columns: auto 84px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 22px; border-radius: 22px; background: #fff; box-shadow: 0 18px 44px rgba(2, 6, 23, 0.35); transition: transform 0.3s var(--tp-ease), box-shadow 0.3s ease; }
.tp-list-item:hover { transform: translateY(-3px); box-shadow: 0 26px 56px rgba(37, 99, 235, 0.32); }
.tp-list-item:has(a:focus-visible) { outline: 2px solid #60a5fa; outline-offset: 4px; }
.tp-list-n { font-size: 28px; font-weight: 800; letter-spacing: -1px; color: #bfd3ff; }
.tp-list-art { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; padding: 9px; border-radius: 18px; background: var(--tp-tile); }
.tp-list-art img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--tp-ease); }
.tp-list-item:hover .tp-list-art img { transform: scale(1.08) rotate(-4deg); }
.tp-list-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tp-list-title { font-size: 18px; font-weight: 800; line-height: 1.25; color: #0f172a; }
.tp-list-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tp-list-title:focus-visible { outline: none; }
.tp-list-text { font-size: 14px; font-weight: 500; line-height: 1.5; color: #64748b; }
.tp-list-go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #eef3ff; color: #1d4ed8; transition: transform var(--transition); }
.tp-list-item:hover .tp-list-go { transform: translateX(4px); }
.tp-list-item--lead { background: var(--tp-grad); box-shadow: 0 24px 56px rgba(29, 78, 216, 0.45); }
.tp-list-item--lead .tp-list-n { color: rgba(255, 255, 255, 0.5); }
.tp-list-item--lead .tp-list-art { background: rgba(255, 255, 255, 0.14); }
.tp-list-item--lead .tp-list-title { color: #fff; }
.tp-list-item--lead .tp-list-text { color: rgba(255, 255, 255, 0.82); }
.tp-list-item--lead .tp-list-go { background: #fff; }
@media (min-width: 992px) and (max-height: 760px) { .tp-list-item { padding-block: 12px; } .tp-list-art { width: 72px; height: 72px; } .tp-list-item { grid-template-columns: auto 72px minmax(0, 1fr) auto; } }
@media (max-width: 991px) {
  .tp-list-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tp-list-intro, .tp-list-intro .section-heading, .tp-list-intro .section-sub { text-align: center; }
  .tp-list-intro .section-sub { margin-inline: auto; }
  .tp-list-intro .tp-chips { justify-content: center; }
}
@media (max-width: 640px) {
  .tp-list-item { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 14px 16px; }
  .tp-list-n, .tp-list-go { display: none; }
  .tp-list-art { width: 56px; height: 56px; padding: 6px; }
  .tp-list-title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tp-list-item:hover { transform: none; } }

/* ══════════ The "On this page" rail beside article text (option D chosen 4 November 2026) ══════════
   A white card, like the tables in the text: "On this page" and how much has been read, a bar with one segment per section
   that fills as each is read, then the numbered sections (read ones darker, the current one with a blue edge). A long list
   scrolls inside the card, so the card always fits the screen. */
@media (min-width: 1100px) {
  .lr-reading--rail.has-toc { grid-template-columns: 300px minmax(0, 760px); max-width: 1120px; }
  .lr-page .lr-reading--rail.has-toc > .lr-toc { display: flex; flex-direction: column; max-height: calc(100vh - var(--header-height) - 88px); padding: 26px 24px 22px; overflow: hidden; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(2, 6, 23, 0.4); backdrop-filter: none; }
  .lr-reading--rail.has-toc > .lr-toc .lr-toc-list { flex: 1 1 auto; min-height: 0; margin-inline: -6px; padding-inline: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
}
.lr-toc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lr-page .lr-toc-head { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: #0f172a; }
.lr-toc-pct { flex: none; font-size: 13px; font-weight: 700; color: #2563eb; }
.lr-toc-seg { display: flex; gap: 5px; margin: 14px 0 14px; }
.lr-toc-seg i { flex: 1; height: 7px; overflow: hidden; border-radius: 6px; background: #e5edf9; }
.lr-toc-seg span { display: block; height: 100%; background: #2563eb; transform-origin: left center; transform: scaleX(0); transition: transform 0.2s linear; }
.lr-page .lr-toc-list { gap: 2px; }
.lr-page .lr-toc-list a { gap: 12px; padding: 10px 12px; border-left: 3px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #64748b; box-shadow: none; }
.lr-page .lr-toc-list a:hover { background: #f5f8ff; color: #1d4ed8; }
.lr-page .lr-toc-n { flex: none; font-size: 12.5px; font-weight: 800; opacity: 1; color: #94a3b8; }
.lr-page .lr-toc-list a.is-read { color: #334155; }
.lr-page .lr-toc-list a.is-read .lr-toc-n { color: #2563eb; }
.lr-page .lr-toc-list a[aria-current="true"] { border-left-color: #2563eb; border-radius: 0 10px 10px 0; background: #eef3ff; font-weight: 800; color: #1d4ed8; box-shadow: none; }
.lr-page .lr-toc-list a[aria-current="true"] .lr-toc-n { color: #1d4ed8; }
/* tables in article text: the row labels keep a readable width */
.lr-prose .lr-table tbody th { min-width: 150px; }
@media (max-width: 640px) { .lr-prose .lr-table tbody th { min-width: 110px; } }

/* ══════════ Blog chapters: no hero; the article opens in its own text band (4 November 2026) ══════════
   The breadcrumb, the briefs' header line, the title, the opening paragraph and the risk warning lead the text column,
   beside the "On this page" card. Summary and What's in this guide are white cards, like that card and the tables. */
.lr-page > section.lrs-body--top { padding-top: calc(var(--header-height) + 44px); }
.lrs-top { margin-bottom: 30px; }
.lrs-top .lr-breadcrumb { margin: 0 0 18px; }
.lrs-top .lr-breadcrumb ol { justify-content: flex-start; }
.lrs-top .lr-breadcrumb a, .lrs-top .lr-breadcrumb li { color: rgba(255, 255, 255, 0.6); }
.lrs-top .lr-breadcrumb a:hover { color: #fff; }
.lrs-top .lr-breadcrumb [aria-current="page"] { color: #fff; }
.lrs-top-pill { display: inline-flex; margin: 0 0 16px; padding: 6px 14px; border-radius: 100px; background: rgba(37, 99, 235, 0.22); border: 1px solid rgba(96, 165, 250, 0.35); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: #bfdbfe; }
.lrs-top-title { margin: 0 0 16px; font-size: 46px; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; color: #fff; }
.lrs-top-lead { margin: 0 0 20px; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, 0.8); }
.lrs-top .tp-risk { max-width: none; margin: 0; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); text-align: start; color: rgba(255, 255, 255, 0.7); }
.lrs-top .tp-risk .lr-icon { color: #60a5fa; }
.lrs-glance-card { border: 0; background: #fff; box-shadow: 0 24px 60px rgba(2, 6, 23, 0.4); }
.lrs-glance-title { font-size: 16px; letter-spacing: -0.01em; text-transform: none; color: #0f172a; }
.lrs-glance-list, .lrs-glance-toc { color: #334155; }
.lrs-glance-list li::before { background: #2563eb; }
.lrs-glance-toc a:hover { background: #eef3ff; color: #1d4ed8; }
.lrs-glance-n { color: #2563eb; }
@media (max-width: 991px) { .lrs-top-title { font-size: 36px; } }
@media (max-width: 640px) { .lr-page > section.lrs-body--top { padding-top: calc(var(--header-height) + 24px); } .lrs-top-title { font-size: 30px; } .lrs-top-lead { font-size: 16px; } }

/* ══════════ Blog landing: each series, its intro and its chapters (chosen 4 November 2026) ══════════
   On the left, sitting at the bottom: a big faint series number behind the label, the heading, the line and the button. On
   the right the chapters as separate rows (number, heading, arrow), the first in the deep blue as the place to start. */
.lrs-band-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 56px; max-width: 1160px; margin: 0 auto; }
.lrs-band-grid > * { width: auto; max-width: none; min-width: 0; }
.lrs-band-intro { position: relative; padding-top: 150px; }
.lrs-band-intro > :not(.lrs-band-no) { position: relative; z-index: 1; }
.lrs-band-no { position: absolute; left: -14px; top: 0; z-index: 0; font-size: 230px; font-weight: 800; line-height: 1; letter-spacing: -14px; color: rgba(37, 99, 235, 0.12); pointer-events: none; user-select: none; }
.lrs-band--dark .lrs-band-no { color: rgba(255, 255, 255, 0.07); }
.lrs-band-k { margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: #64748b; }
.lrs-band--dark .lrs-band-k { color: #93c5fd; }
.lrs-band-intro .section-heading, .lrs-band-intro .section-sub { text-align: start; }
.lrs-band-intro .section-sub { max-width: 440px; margin: 16px 0 26px; }
.lrs-band-btn { display: inline-flex; align-items: center; gap: 10px; }
.lrs-rows { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lrs-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; align-items: center; gap: 14px; padding: 18px 22px; border: 1.5px solid rgba(37, 99, 235, 0.08); border-radius: 20px; background: #fff; box-shadow: 0 12px 34px rgba(37, 99, 235, 0.08); transition: transform 0.3s var(--tp-ease), box-shadow 0.3s ease; }
.lrs-band--dark .lrs-row { border-color: transparent; box-shadow: 0 16px 40px rgba(2, 6, 23, 0.35); }
.lrs-row:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(37, 99, 235, 0.2); }
.lrs-row:has(a:focus-visible) { outline: 2px solid #60a5fa; outline-offset: 3px; }
.lrs-row-n { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: #bfd3ff; }
.lrs-row-title { font-size: 17px; font-weight: 800; line-height: 1.3; color: #0f172a; }
.lrs-row-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lrs-row-title:focus-visible { outline: none; }
.lrs-row-go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #eef3ff; color: #1d4ed8; transition: transform var(--transition); }
.lrs-row:hover .lrs-row-go { transform: translateX(4px); }
.lrs-row--lead { border-color: transparent; background: var(--tp-grad); box-shadow: 0 18px 44px rgba(29, 78, 216, 0.3); }
.lrs-row--lead .lrs-row-n { color: rgba(255, 255, 255, 0.55); }
.lrs-row--lead .lrs-row-title { color: #fff; }
.lrs-row--lead .lrs-row-go { background: #fff; }
/* a long series (Learn to trade's nine) packs its rows tighter, so the band still fits one screen */
.lrs-rows--7, .lrs-rows--8, .lrs-rows--9 { gap: 8px; }
:is(.lrs-rows--7, .lrs-rows--8, .lrs-rows--9) .lrs-row { padding: 10px 18px; }
:is(.lrs-rows--7, .lrs-rows--8, .lrs-rows--9) .lrs-row-n { font-size: 21px; }
:is(.lrs-rows--7, .lrs-rows--8, .lrs-rows--9) .lrs-row-title { font-size: 15.5px; }
:is(.lrs-rows--7, .lrs-rows--8, .lrs-rows--9) .lrs-row-go { width: 32px; height: 32px; }
@media (min-width: 992px) and (max-height: 760px) { .lrs-row { padding-block: 13px; } .lrs-band-no { font-size: 190px; } .lrs-band-intro { padding-top: 120px; } :is(.lrs-rows--7, .lrs-rows--8, .lrs-rows--9) .lrs-row { padding-block: 7px; } }
@media (max-width: 991px) {
  .lrs-band-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lrs-band-intro { padding-top: 90px; }
  .lrs-band-no { font-size: 150px; letter-spacing: -8px; }
}
@media (max-width: 640px) {
  .lrs-row { grid-template-columns: 38px minmax(0, 1fr) 32px; gap: 10px; padding: 14px 14px; }
  .lrs-row-n { font-size: 19px; }
  .lrs-row-title { font-size: 15px; }
  .lrs-row-go { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .lrs-row:hover { transform: none; } }

/* ══════════ Article text band: gradient depth (blog chapters and Trading Psychology articles) ══════════
   The flat navy becomes a deep fade with soft blue glows: a brighter one where the article opens, quieter ones down the
   sides so a long read never looks like one flat sheet. The site's dot texture (.bg-dark-navy::after) stays on top. */
.lr-page > section.lr-article-body.tp-body {
  /* glows sized against the band itself (percentages), so a 5,000px read has them all the way down, not only at the top */
  background:
    radial-gradient(900px 560px at 18% 0, rgba(37, 99, 235, 0.32), transparent 64%),
    radial-gradient(70% 14% at 100% 22%, rgba(56, 189, 248, 0.11), transparent 70%),
    radial-gradient(70% 16% at 0 42%, rgba(37, 99, 235, 0.17), transparent 70%),
    radial-gradient(70% 14% at 100% 62%, rgba(37, 99, 235, 0.15), transparent 70%),
    radial-gradient(70% 16% at 0 82%, rgba(29, 78, 216, 0.16), transparent 70%),
    radial-gradient(80% 12% at 65% 100%, rgba(56, 189, 248, 0.09), transparent 70%),
    linear-gradient(180deg, #11295a 0, #0d1e38 900px, #0b1a33 60%, #081428 100%);
}
.lr-page > section.lr-article-body.tp-body::before { display: none; }
/* blog chapters: the next-chapter card is text only (no render) */
.tp-next-card.lrs-next-card { grid-template-columns: minmax(0, 1fr); align-content: center; }
.lrs-next-card .tp-next-body { gap: 14px; }
@media (min-width: 992px) { .lrs-next-sec .tp-next-card.lrs-next-card { padding: 34px 36px; } .lrs-next-sec .lrs-next-card .tp-next-name { font-size: 28px; } }

/* ══════════ Landing heroes: the topic tiles as text cards (option D chosen 4 November 2026) ══════════
   Every Learning and Trading Psychology landing hero (TrayHero): four a row, each card its number, name, count and arrow;
   the current page's card (else the first) in the deep blue; a dashed "All N guides" card where there is one. A short
   last row sits in the middle, so any number of topics lays out cleanly. */
.lr-tiles { --gap: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); width: 100%; max-width: 980px; margin: 26px auto 26px; padding: 0; list-style: none; text-align: start; }
.lr-tiles > li { display: flex; flex: 0 0 calc((100% - 3 * var(--gap)) / 4); min-width: 0; }
.lr-tile { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 16px; border: 1.5px solid rgba(37, 99, 235, 0.1); border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(37, 99, 235, 0.08); transition: transform 0.3s var(--tp-ease), box-shadow 0.3s ease, border-color var(--transition); }
.lr-tile:hover, .lr-tile:focus-visible { transform: translateY(-3px); border-color: rgba(37, 99, 235, 0.3); box-shadow: 0 18px 38px rgba(37, 99, 235, 0.16); }
.lr-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.lr-tile-top { display: flex; align-items: center; justify-content: space-between; }
.lr-tile-n { font-size: 12px; font-weight: 800; color: #2563eb; }
.lr-tile-top .lr-icon { color: #2563eb; transition: transform var(--transition); }
.lr-tile:hover .lr-tile-top .lr-icon { transform: translateX(3px); }
.lr-tile-name { font-size: 15.5px; font-weight: 800; line-height: 1.3; color: #0f172a; }
.lr-tile-meta { font-size: 12.5px; font-weight: 600; color: #64748b; }
.lr-tile.is-lead { border-color: transparent; background: var(--tp-grad); box-shadow: 0 16px 36px rgba(29, 78, 216, 0.3); }
.lr-tile.is-lead .lr-tile-n { color: rgba(255, 255, 255, 0.6); }
.lr-tile.is-lead .lr-tile-top .lr-icon, .lr-tile.is-lead .lr-tile-name { color: #fff; }
.lr-tile.is-lead .lr-tile-meta { color: rgba(255, 255, 255, 0.75); }
.lr-tile--more { justify-content: center; gap: 6px; border: 1.5px dashed rgba(37, 99, 235, 0.3); background: transparent; box-shadow: none; }
.lr-tile--more .lr-tile-name { font-size: 14px; font-weight: 700; color: #1d4ed8; }
.lr-tile--more .lr-icon { color: #1d4ed8; }
@media (min-width: 992px) and (max-height: 760px) { .lr-tiles { margin: 18px auto 18px; } .lr-tile { padding: 11px 14px; } }
@media (max-width: 767px) {
  /* phones: two a row, compact (the number beside the name, the arrow dropped), so the hero stays about one screen */
  .lr-tiles { --gap: 8px; margin: 18px auto; }
  .lr-tiles > li { flex-basis: calc((100% - var(--gap)) / 2); }
  .lr-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: baseline; align-content: start; padding: 10px 12px; border-radius: 14px; }
  .lr-tile-top { display: contents; }
  .lr-tile-top .lr-icon { display: none; }
  .lr-tile-n { font-size: 11px; }
  .lr-tile-name { font-size: 13.5px; }
  .lr-tile-meta { grid-column: 2; font-size: 11.5px; }
  .lr-tile--more { display: flex; flex-direction: row; align-items: center; justify-content: center; }
  .lr-tile--more .lr-icon { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .lr-tile:hover, .lr-tile:focus-visible { transform: none; } }
/* "On this page": one height on every article (as tall as the screen allows, up to 600px), the list at the top and the
   "Up next" link pinned at the foot, so a two-section article's card matches an eight-section one */
@media (min-width: 1100px) {
  .lr-page .lr-reading--rail.has-toc > .lr-toc { height: min(calc(100vh - var(--header-height) - 88px), 600px); }
}
.lr-toc-next { display: none; }
@media (min-width: 1100px) {
  .lr-toc-next { display: flex; flex: none; flex-direction: column; gap: 3px; margin-top: auto; padding: 14px 14px 12px; border-radius: 14px; background: var(--tp-grad); color: #fff; transition: transform var(--transition), box-shadow var(--transition); }
  .lr-toc-list + .lr-toc-next { margin-top: 14px; }
  .lr-toc-next:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(29, 78, 216, 0.35); }
  .lr-toc-next-k { font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
  .lr-toc-next-name { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
  .lr-toc-next-name::after { content: " \2192"; }
}

/* ══════════ Gold: the price card and history from the Navion Pro market data API (js: MARKET DATA) ══════════ */
.lr-pxcard { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; }
.lr-px-head { display: flex; align-items: flex-start; gap: 14px; }
.lr-px-logo { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, #f59e0b, #d97706); color: #fff; }
.lr-px-id { flex: 1; min-width: 0; }
.lr-px-name { margin: 0; font-size: 17px; font-weight: 800; color: #0f172a; }
.lr-px-name span { margin-left: 6px; font-size: 12px; font-weight: 700; color: #64748b; }
.lr-px-quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; }
.lr-px-price { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #0f172a; }
.lr-px-cur { font-size: 12px; font-weight: 700; color: #64748b; }
.lr-px-change { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lr-px-change.lr-up { color: #16a34a; }
.lr-px-change.lr-down { color: #dc2626; }
.lr-px-status { flex: none; padding: 5px 11px; border-radius: 100px; background: #f1f5f9; font-size: 11.5px; font-weight: 700; color: #64748b; }
.lr-px-status.is-open { background: #dcfce7; color: #166534; }
.lr-px-status.is-open::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #16a34a; vertical-align: 1px; }
.lr-px-ranges { display: flex; gap: 4px; }
.lr-px-range { padding: 6px 14px; border: 0; border-radius: 10px; background: transparent; font: 700 13px var(--font); color: #475569; cursor: pointer; transition: background var(--transition), color var(--transition); }
.lr-px-range:hover { background: #f1f5f9; }
.lr-px-range.is-on { background: #eef3ff; color: #1d4ed8; }
.lr-px-range:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lr-px-chart { position: relative; flex: 1; min-height: 220px; transition: opacity 0.2s ease; }
.lr-px-chart.is-loading { opacity: 0.5; }
.lr-px-chart svg { display: block; overflow: visible; }
.lr-px-grid { stroke: #eef2f7; stroke-width: 1; }
.lr-px-axis { font: 600 11px var(--font); fill: #94a3b8; }
.lr-px-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.lr-px-line.is-up { stroke: #16a34a; }
.lr-px-line.is-down { stroke: #dc2626; }
.lr-px-cross { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 3 3; }
.lr-px-dot { stroke: #fff; stroke-width: 2; }
.lr-px-dot.is-up { fill: #16a34a; }
.lr-px-dot.is-down { fill: #dc2626; }
.lr-px-tip { position: absolute; top: 0; display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: #0f172a; color: #fff; pointer-events: none; white-space: nowrap; }
.lr-px-tip strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.lr-px-tip span { font-size: 11px; color: rgba(255, 255, 255, 0.7); }
.lr-px-tip[hidden] { display: none; }
.lr-px-foot { margin: 0; font-size: 12px; color: #64748b; }
.lr-px-foot:empty { display: none; }
/* until the API answers: the card says so, the chart parts step aside */
.lr-px-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; border: 1.5px dashed rgba(37, 99, 235, 0.25); border-radius: 18px; background: #f8fbff; text-align: center; }
.lr-px-empty[hidden] { display: none; }
.lr-px-empty-title { margin: 0; font-size: 16px; font-weight: 800; color: #0f172a; }
.lr-px-empty-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #64748b; }
.lr-pxcard.is-empty :is(.lr-px-quote, .lr-px-ranges, .lr-px-chart, .lr-px-foot) { display: none; }
/* the history */
.lr-hist-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 14px; }
.lr-hist-tiles:empty { display: none; }
.lr-hist-tile { padding: 12px 14px; border: 1.5px solid rgba(37, 99, 235, 0.08); border-radius: 14px; }
.lr-hist-tile-label { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #64748b; }
.lr-hist-tile-change { margin: 4px 0 2px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lr-hist-tile-range { margin: 0; font-size: 12.5px; color: #64748b; }
.lr-histcard:not(.is-ready) .lr-hist-wrap, .lr-histcard.is-empty .lr-hist-source { display: none; }
.lr-hist-wait { padding: 18px; border: 1.5px dashed rgba(37, 99, 235, 0.25); border-radius: 14px; background: #f8fbff; text-align: center; }
@media (max-width: 640px) { .lr-pxcard { padding: 18px; } .lr-px-price { font-size: 26px; } .lr-hist-tiles { grid-template-columns: minmax(0, 1fr); } }
/* series heads: the H1 takes two lines ("Forex / Guides for Beginners"), so on short laptop screens the cards sit closer */
@media (min-width: 992px) and (max-height: 760px) { .lrs-hero .lr-tiles { margin: 12px auto 12px; } .lrs-hero .lr-tile { padding-block: 9px; } .lrs-hero .tp-risk { margin-bottom: 14px; } }
/* series heads: the H1 has two lines ("Forex / Guides for Beginners"), so on short laptop screens it is set a little smaller */
@media (min-width: 992px) and (max-height: 760px) {
  .lrs-hero .hero-heading { font-size: 50px; line-height: 1.08; }
  .lrs-hero .lr-tiles { margin-block: 16px; }
}

/* ══════════ Review fixes, 6 November 2026 ══════════ */

/* hero cards: five or six cards go three a row (3 + 3, or 3 + 2 centred), never 4 + 2 or 4 + 1 */
@media (min-width: 768px) {
  .lr-tiles:is(.lr-tiles--5, .lr-tiles--6) { max-width: 760px; }
  .lr-tiles:is(.lr-tiles--5, .lr-tiles--6) > li { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}

/* Gold in 60 seconds: drawn gold bars in place of the mixed commodities render */
.lr-g60-bars { top: 60px; right: 22px; width: 82%; max-width: 390px; aspect-ratio: 330 / 190; }

/* Who buys the world's gold: one share bar, then a card per buyer */
.lr-buyers { max-width: 1000px; margin: 0 auto; }
.lr-buyers-bar { display: flex; gap: 4px; height: 56px; overflow: hidden; border-radius: 16px; }
.lr-buyers-seg { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 15px; font-weight: 800; color: #fff; }
.lr-buyers-seg--1 { background: linear-gradient(145deg, #1e40af, #2563eb); }
.lr-buyers-seg--2 { background: linear-gradient(145deg, #2563eb, #3b82f6); }
.lr-buyers-seg--3 { background: linear-gradient(145deg, #38bdf8, #60a5fa); }
.lr-buyers-seg--4 { background: linear-gradient(145deg, #94a3b8, #cbd5e1); color: #0f172a; }
.lr-buyers-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.lr-buyers-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; background: rgba(255, 255, 255, 0.04); }
.lr-buyers-dot { width: 12px; height: 12px; margin-bottom: 6px; border-radius: 4px; }
.lr-buyers-pct { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.lr-buyers-name { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #e2e8f0; }
.lr-buyers-t { font-size: 13px; font-weight: 600; color: #93c5fd; }
.lr-buyers + .lr-bars-notes { margin-top: 20px; }
.lr-buyers .lr-bars-unit { margin-top: 10px; text-align: end; }
@media (max-width: 767px) { .lr-buyers-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lr-buyers-seg { font-size: 12px; } .lr-buyers-pct { font-size: 28px; } }

/* When gold moves most: the five events in one row, numbered along a line */
.lr-gold-events--row { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1160px; margin-inline: auto; }
.lr-gold-events--row::before { content: ""; position: absolute; top: 40px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, #2563eb, #93c5fd); z-index: 0; }
.lr-gold-events--row li { position: relative; z-index: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px; }
.lr-gold-events--row li:last-child:nth-child(odd) { grid-column: auto; }
.lr-gold-events-title { font-size: 16px; line-height: 1.3; color: var(--color-text-dark); }
.lr-gold-events-text { font-size: 14px; line-height: 1.6; }
@media (max-width: 1100px) { .lr-gold-events--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lr-gold-events--row::before { display: none; } }
@media (max-width: 640px) { .lr-gold-events--row { grid-template-columns: minmax(0, 1fr); } }

/* Gold myths: three, then two wider, so both rows fill the width */
@media (min-width: 992px) {
  .lr-myths { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lr-myths > .lr-myth { grid-column: span 2; }
  .lr-myths > .lr-myth:nth-child(n+4) { grid-column: span 3; }
}

/* Webinars: the "notify me" form */
.lr-notify { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 16px; max-width: 460px; }
.lr-notify-title { margin: 0; font-size: 14px; font-weight: 800; color: #fff; }
.lr-notify-row { display: flex; gap: 8px; }
.lr-notify-input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.06); font: 500 14.5px var(--font); color: #fff; }
.lr-notify-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.lr-notify-input:focus { outline: 2px solid #60a5fa; outline-offset: 1px; border-color: transparent; }
.lr-notify-btn { flex: none; height: 44px; }
.lr-notify-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); cursor: pointer; }
.lr-notify-consent input { flex: none; margin-top: 2px; accent-color: #2563eb; }
.lr-notify-consent a { color: #93c5fd; text-decoration: underline; }
.lr-notify-msg { margin: 0; font-size: 13px; font-weight: 600; }
.lr-notify-msg:empty { display: none; }
.lr-notify-msg.is-ok { color: #86efac; }
.lr-notify-msg.is-err { color: #fca5a5; }
.lr-webempty .lr-empty-actions { margin-top: 0; }
@media (max-width: 480px) { .lr-notify-row { flex-direction: column; } }

/* blog series pages: chapter cards show the label and the title only */
.lrs-step-card { min-height: 0; }

/* depth on every dark section of Learning (the flat navy becomes a fade with soft blue glows; each band's own dots stay) */
.lr-page > section:is(.bg-dark, .bg-dark-navy, .bg-dark-aurora, .bg-dark-pulse, .bg-dark-steel):not(.lr-article-body) {
  background:
    radial-gradient(70% 55% at 12% 0, rgba(37, 99, 235, 0.26), transparent 70%),
    radial-gradient(55% 60% at 100% 35%, rgba(56, 189, 248, 0.10), transparent 70%),
    radial-gradient(60% 55% at 0 100%, rgba(29, 78, 216, 0.16), transparent 70%),
    radial-gradient(50% 45% at 85% 100%, rgba(37, 99, 235, 0.12), transparent 70%),
    linear-gradient(180deg, #0f2550 0%, #0b1b36 45%, #071329 100%);
}
/* the webinars panel with its sign-up form still fits one laptop screen */
@media (min-width: 992px) {
  .lr-webempty-main > .lr-art-tile { display: none; }
  .lr-webempty .lr-notify { margin: 14px 0 14px; }
  .lr-webempty .lr-empty-text { margin-bottom: 0; }
}
@media (min-width: 992px) and (max-height: 800px) {
  .lr-page > section.section-pad-sm:has(.lr-webempty) { padding-top: 34px; padding-bottom: 34px; }
  .lr-page > section:has(.lr-webempty) .lr-head { margin-bottom: 20px; }
}
@media (max-width: 991px) { .lr-g60-bars { top: 40px; width: 60%; max-width: 300px; } }
@media (max-width: 640px) { .lr-g60-bars { width: 70%; } }

/* Gold: the worked trade as an article, with the 1% rise and fall as two outcome cards in the text */
.lr-wt { max-width: 760px; margin: 0 auto; }
.lr-wt-p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); }
.lr-wt-p:last-child { margin-bottom: 0; }
.lr-wt-p strong { font-weight: 700; color: #fff; }
.lr-wt-chip { display: inline-block; padding: 1px 9px; border-radius: 8px; background: rgba(96, 165, 250, 0.16); font-weight: 800; color: #bfdbfe; }
.lr-wt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 20px; }
.lr-wt-card { padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45); color: #0f172a; }
.lr-wt-k { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.lr-wt-price { margin: 6px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.lr-wt-amount { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.lr-wt-meter { display: block; height: 10px; margin: 10px 0 6px; overflow: hidden; border-radius: 10px; background: #e5edf9; }
.lr-wt-meter span { display: block; height: 100%; }
.lr-wt-label { margin: 0; font-size: 13px; font-weight: 600; color: #475569; }
.lr-wt-card--up :is(.lr-wt-k, .lr-wt-amount) { color: #16a34a; }
.lr-wt-card--up .lr-wt-meter span { background: linear-gradient(90deg, #16a34a, #4ade80); }
.lr-wt-card--down :is(.lr-wt-k, .lr-wt-amount) { color: #dc2626; }
.lr-wt-card--down .lr-wt-meter span { background: linear-gradient(90deg, #dc2626, #f87171); }
@media (min-width: 992px) and (max-height: 800px) { .lr-wt-p { font-size: 15px; line-height: 1.6; margin-bottom: 10px; } .lr-wt-card { padding: 16px 20px; } .lr-wt-cards { margin-bottom: 14px; } }
@media (max-width: 640px) { .lr-wt-cards { grid-template-columns: minmax(0, 1fr); } }
/* Explore All: the lead blog card's render fills more of its band */
.lr-blog-lead .lr-img-art { width: 190px; height: 190px; }
@media (min-width: 992px) and (max-height: 800px) { .lr-blog-lead .lr-img-art { width: 160px; height: 160px; } }
.lr-hist-live { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 100px; background: #dcfce7; font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; vertical-align: 1px; color: #166534; }