/* EZPZ Trading blog (landing/blog/*.html): list, post, password gate, not found.
   Loaded after landing.css and built on its tokens and shared classes (.lp-container,
   .lp-card, .lp-chip, .lp-btn, .lp-eyebrow, .lp-cta-band). Blog-only classes use the
   lpb- prefix; .lp-prose is the article typography. Dark only, tokens and color-mix() only.
   Order: 1 page head, 2 chips, 3 cards and grid, 4 pagination, 5 post layout, 6 prose,
   7 content blocks, 8 gate, 9 rail, author, related, 10 small screens. Covers (.lpb-cover)
   get their art from blog-art.css; this file only places them. */

/* ---------- 1. page head ---------- */
.lpb-main { --lpb-t: var(--lp-dur) var(--lp-ease); }
.lpb-hero { padding-block: var(--lp-sp-8) var(--lp-sp-6); background: radial-gradient(900px 420px at 50% -20%, color-mix(in srgb, var(--lp-primary) 24%, transparent), transparent 70%); }
.lpb-hero-inner { display: flex; flex-direction: column; align-items: center; gap: var(--lp-sp-4); max-width: 760px; margin-inline: auto; text-align: center; }
.lpb-h1, .lpb-post-title { font-size: var(--lp-fs-2xl); font-weight: 700; background: var(--lp-title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lpb-intro { max-width: 60ch; color: var(--lp-muted); font-size: var(--lp-fs-md); }
.lpb-search { width: 100%; max-width: 540px; margin-top: var(--lp-sp-2); }
.lpb-search-field { display: flex; align-items: center; gap: var(--lp-sp-2); padding: var(--lp-sp-1) var(--lp-sp-1) var(--lp-sp-1) var(--lp-sp-4); border: 1px solid var(--lp-border-strong); border-radius: var(--lp-r); background: var(--lp-surface); transition: border-color var(--lpb-t), box-shadow var(--lpb-t); }
.lpb-search-field:focus-within { border-color: var(--lp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-primary) 28%, transparent); }
.lpb-search-icon { color: var(--lp-muted); }
.lpb-search input { flex: 1; min-width: 0; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--lp-text); font: inherit; font-size: var(--lp-fs-base); }
.lpb-search input:focus-visible { outline: none; } /* the field's ring shows focus */
.lpb-search input::placeholder { color: var(--lp-muted); opacity: 1; }
.lpb-search input::-webkit-search-cancel-button { filter: invert(1); }
.lpb-hero-links { font-size: var(--lp-fs-sm); }
.lpb-rss { display: inline-flex; align-items: center; gap: var(--lp-sp-2); font-weight: 600; }
.lpb-rss:hover { text-decoration: underline; text-underline-offset: 3px; }

.lpb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-1) var(--lp-sp-2); margin: 0 0 var(--lp-sp-4); padding: 0; list-style: none; color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.lpb-hero .lpb-crumbs ol { justify-content: center; margin: 0; }
.lpb-crumbs li { display: inline-flex; align-items: center; gap: var(--lp-sp-2); min-width: 0; max-width: 100%; }
.lpb-crumbs li + li::before { content: "/"; content: "/" / ""; color: var(--lp-faint); }
.lpb-main .lpb-crumbs a { color: var(--lp-muted); }
.lpb-crumbs a:hover { color: var(--lp-text); text-decoration: underline; text-underline-offset: 3px; }
.lpb-crumbs [aria-current] { overflow: hidden; color: var(--lp-text); text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 2. category chips (selected = aria-current, same look as .lp-chip[aria-pressed]) ---------- */
.lpb-cats-list { display: flex; gap: var(--lp-sp-2); margin: 0; padding: var(--lp-sp-1); list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.lpb-cats-list::-webkit-scrollbar { display: none; }
.lpb-cats-list li { flex: none; scroll-snap-align: start; }
.lpb-main a.lp-chip { text-decoration: none; white-space: nowrap; }
.lpb-main .lp-chip[aria-current="page"] { color: var(--lp-text); background: color-mix(in srgb, var(--lp-primary) 26%, transparent); border-color: var(--lp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-primary) 16%, transparent); }
.lpb-count { color: var(--lp-muted); font-size: var(--lp-fs-xs); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .lpb-cats-list { flex-wrap: wrap; justify-content: center; overflow: visible; } }

/* ---------- 3. cards and grid ---------- */
.lpb-section { padding-block: var(--lp-sp-7) 0; }
.lpb-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--lp-sp-2) var(--lp-sp-4); margin-bottom: var(--lp-sp-5); }
.lpb-section-title { color: var(--lp-text); font-size: var(--lp-fs-lg); font-weight: 700; }
.lpb-results { color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.lpb-more { font-weight: 600; }
.lpb-more:hover { text-decoration: underline; text-underline-offset: 3px; }

.lpb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lp-sp-5); margin: 0; padding: 0; list-style: none; }
.lpb-grid > li { display: flex; min-width: 0; }
@media (min-width: 640px) { .lpb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lpb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lpb-card { display: flex; flex-direction: column; width: 100%; overflow: hidden; transition: transform var(--lpb-t), border-color var(--lpb-t); }
.lpb-card:focus-within { border-color: var(--lp-accent); }
@media (hover: hover) and (pointer: fine) {
  .lpb-card:hover { transform: translateY(-3px); border-color: var(--lp-border-strong); }
  .lpb-card:hover > .lpb-cover :is(img, svg) { transform: scale(1.03); }
  .lpb-card:hover .lpb-card-title a { color: var(--lp-accent); }
}
.lpb-cover { position: relative; overflow: hidden; background: var(--lp-bg-2); }
.lpb-cover > :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: cover; }
.lpb-card > .lpb-cover { flex: none; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--lp-border); border-radius: 0; }
.lpb-card > .lpb-cover :is(img, svg) { transition: transform .5s var(--lp-ease); }
.lpb-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--lp-sp-3); padding: var(--lp-sp-5); }
.lpb-card-title { color: var(--lp-text); font-size: var(--lp-fs-md); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.lpb-card-title a { color: var(--lp-text); transition: color var(--lpb-t); }
/* One real link per card, stretched over the whole card; its focus ring is drawn on the card. */
.lpb-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lpb-main .lpb-stretch:focus-visible { outline: none; }
.lpb-stretch:focus-visible::after { outline: 2px solid var(--lp-accent); outline-offset: -2px; border-radius: var(--lp-r-lg); }
.lpb-raise { position: relative; z-index: 2; }

.lpb-tag { display: inline-flex; align-items: center; padding: 0 var(--lp-sp-3); border: 1px solid color-mix(in srgb, var(--lp-accent) 38%, transparent); border-radius: var(--lp-r-pill); background: color-mix(in srgb, var(--lp-primary) 16%, transparent); color: var(--lp-accent); font-size: var(--lp-fs-xs); font-weight: 600; line-height: 1.9; letter-spacing: .04em; text-transform: uppercase; }
.lpb-main a.lpb-tag:hover { color: var(--lp-text); border-color: var(--lp-accent); }
.lpb-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--lp-muted); font-size: var(--lp-fs-sm); line-height: 1.6; }
.lpb-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--lp-sp-1); margin-top: auto; color: var(--lp-muted); font-size: var(--lp-fs-xs); }
.lpb-meta > * + *::before { content: "\00b7"; content: "\00b7" / ""; margin-inline: var(--lp-sp-2); color: var(--lp-faint); }
.lpb-meta-author { color: var(--lp-text); font-weight: 600; }

/* Featured: image beside the text on wide screens, stacked below. */
.lpb-feature-title { font-size: var(--lp-fs-xl); line-height: 1.2; }
.lpb-feature .lpb-excerpt { font-size: var(--lp-fs-base); -webkit-line-clamp: 3; line-clamp: 3; }
.lpb-kicker-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-3); }
.lpb-kicker { color: var(--lp-accent); font-size: var(--lp-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lpb-read { color: var(--lp-accent); font-size: var(--lp-fs-sm); font-weight: 600; }
@media (min-width: 900px) {
  .lpb-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .lpb-feature > .lpb-cover { aspect-ratio: auto; min-height: 340px; border-bottom: 0; border-right: 1px solid var(--lp-border); }
  .lpb-feature > .lpb-cover > :is(img, svg) { position: absolute; inset: 0; }
  .lpb-feature .lpb-card-body { justify-content: center; gap: var(--lp-sp-4); padding: var(--lp-sp-7) var(--lp-sp-6); }
  .lpb-feature .lpb-meta { margin-top: 0; }
}

.lpb-empty, .lpb-gate-card { display: flex; flex-direction: column; align-items: center; gap: var(--lp-sp-4); max-width: 560px; margin-inline: auto; padding: var(--lp-sp-7) var(--lp-sp-5); text-align: center; }
.lpb-empty h3 { color: var(--lp-text); font-size: var(--lp-fs-lg); font-family: var(--lp-font-title); }
.lpb-empty p, .lpb-gate-card p { color: var(--lp-muted); }
.lpb-badge-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--lp-border-strong); border-radius: 50%; background: var(--lp-surface-3); color: var(--lp-accent); font-size: var(--lp-fs-lg); }

/* ---------- 4. pagination ---------- */
.lpb-pager { margin-top: var(--lp-sp-7); }
.lpb-pager ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--lp-sp-2); margin: 0; padding: 0; list-style: none; }
.lpb-page { display: inline-flex; align-items: center; justify-content: center; gap: var(--lp-sp-2); min-width: 44px; min-height: 44px; padding: 0 var(--lp-sp-3); border: 1px solid var(--lp-border); border-radius: var(--lp-r-sm); background: var(--lp-surface-2); color: var(--lp-text); font-size: var(--lp-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.lpb-main a.lpb-page { color: var(--lp-text); }
.lpb-main a.lpb-page:hover { border-color: var(--lp-accent); background: var(--lp-surface-3); }
.lpb-page[aria-current="page"] { border-color: var(--lp-primary); background: color-mix(in srgb, var(--lp-primary) 26%, transparent); }
.lpb-gap { min-width: 24px; color: var(--lp-muted); text-align: center; }
.lpb-pager-status { color: var(--lp-muted); font-size: var(--lp-fs-sm); }
@media (min-width: 640px) { .lpb-pager-status { display: none; } }
@media (max-width: 639.98px) { .lpb-num { display: none; } }

/* ---------- 5. post layout ----------
   Header centred, then the 16:9 hero cover, then the body grid:
   >= 1200px  Contents | article | rail, centred as a whole (empty first column when there is no Contents)
   900-1199px Contents | article, the rail below the article
   < 900px    one column, the Contents folds into an "On this page" box above the article */
.lpb-post { padding-top: var(--lp-sp-6); }
.lpb-post-head { display: flex; flex-direction: column; align-items: center; gap: var(--lp-sp-4); max-width: 860px; margin-inline: auto; text-align: center; }
.lpb-post-head .lpb-crumbs ol { justify-content: center; margin: 0; }
.lpb-post-title { line-height: 1.12; text-wrap: balance; }
.lpb-dek { max-width: 64ch; color: var(--lp-muted); font-size: var(--lp-fs-md); line-height: 1.6; text-wrap: pretty; }
.lpb-byline { display: flex; align-items: center; justify-content: center; gap: var(--lp-sp-3); margin-top: var(--lp-sp-1); text-align: left; }
.lpb-byline-text { display: grid; gap: 2px; min-width: 0; }
.lpb-byline-name { color: var(--lp-text); font-size: var(--lp-fs-sm); font-weight: 600; }
.lpb-byline-name a, .lpb-author-name a { color: var(--lp-text); }
.lpb-byline-name a:hover, .lpb-author-name a:hover { color: var(--lp-accent); }
.lpb-byline .lpb-meta { margin: 0; font-size: var(--lp-fs-sm); }
.lpb-avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--lp-border-strong); border-radius: 50%; background: color-mix(in srgb, var(--lp-primary) 30%, var(--lp-surface)); color: var(--lp-text); font-family: var(--lp-font-title); font-weight: 700; object-fit: cover; }
.lpb-avatar--lg { width: 64px; height: 64px; font-size: var(--lp-fs-lg); }
.lpb-cover--hero { max-width: 960px; margin: var(--lp-sp-7) auto 0; aspect-ratio: 16 / 9; border: 1px solid var(--lp-border-strong); border-radius: var(--lp-r-lg); box-shadow: var(--lp-shadow); }

/* Reading progress, under the sticky site header. Hidden until blog.js runs; no transition. */
.lpb-progress { position: fixed; top: var(--lp-nav-h); left: 0; right: 0; z-index: 9989; height: 3px; pointer-events: none; }
.lpb-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--lp-primary), var(--lp-accent) 60%, var(--lp-g-analytics)); transform: scaleX(0); transform-origin: 0 50%; }

.lpb-layout { display: grid; grid-template-columns: minmax(0, 820px); justify-content: center; gap: var(--lp-sp-6); margin-top: var(--lp-sp-7); }
.lpb-side { display: contents; }
.lpb-side > .lpb-toc { order: 1; }
.lpb-layout > .lpb-main-col { order: 2; }
.lpb-side > .lpb-rail { order: 3; }
.lpb-layout > .lpb-author { order: 4; }
.lpb-layout > * { min-width: 0; }
.lpb-main-col { display: flex; flex-direction: column; gap: var(--lp-sp-6); }
.lpb-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--lp-border-strong); border-radius: var(--lp-r-lg); background: var(--lp-bg-2); }
.lpb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 1100px) {
  .lpb-layout { grid-template-columns: minmax(0, 820px) minmax(250px, 300px); column-gap: var(--lp-sp-8); align-items: start; }
  .lpb-layout > .lpb-main-col { grid-column: 1; grid-row: 1; }
  .lpb-layout > .lpb-author { grid-column: 1; grid-row: 2; }
  .lpb-side { display: flex; flex-direction: column; gap: var(--lp-sp-6); grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--lp-nav-h) + var(--lp-sp-5)); max-height: calc(100vh - var(--lp-nav-h) - var(--lp-sp-7)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* Contents. A <details>: a folding box on small screens, a plain list beside the article on wide ones. */
.lpb-toc-box { border: 1px solid var(--lp-border); border-radius: var(--lp-r); background: var(--lp-surface-2); }
.lpb-toc-title, .lpb-label { color: var(--lp-muted); font-family: var(--lp-font); font-size: var(--lp-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lpb-label { margin-bottom: var(--lp-sp-3); }
.lpb-toc .lpb-toc-title { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--lp-sp-4); cursor: pointer; list-style: none; }
.lpb-toc-title::-webkit-details-marker { display: none; }
.lpb-toc-title::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
.lpb-toc-box[open] .lpb-toc-title::after { transform: rotate(-135deg); }
.lpb-toc ol { display: grid; margin: 0; padding: 0 var(--lp-sp-4) var(--lp-sp-4); list-style: none; }
.lpb-toc li { margin: 0; }
.lpb-toc a { display: block; padding: 6px 0 6px var(--lp-sp-3); border-left: 2px solid var(--lp-border); color: var(--lp-muted); font-size: var(--lp-fs-sm); line-height: 1.45; transition: color var(--lpb-t), border-color var(--lpb-t); }
.lpb-toc .lpb-toc-l3 a { padding-left: var(--lp-sp-5); font-size: 13px; }
.lpb-toc a:hover { color: var(--lp-text); }
.lpb-toc a[aria-current="true"] { border-left-color: var(--lp-accent); color: var(--lp-text); font-weight: 600; }
@media (min-width: 900px) {
  .lpb-toc-box { border: 0; background: none; }
  .lpb-toc .lpb-toc-title { min-height: 0; padding: 0 0 var(--lp-sp-3); cursor: default; }
  .lpb-toc-title::after { display: none; }
  .lpb-toc ol { padding: 0; }
}

/* ---------- 6. prose (CKEditor HTML). Structure follows the Learn Center's .lc-prose. ---------- */
.lpb-prose { max-width: none; }
/* A hairline above each section breaks a long post into readable parts. */
.lpb-prose > h2 { padding-top: var(--lp-sp-6); border-top: 1px solid var(--lp-border); }
.lpb-prose > h2:first-child { padding-top: 0; border-top: 0; }
.lp-prose { color: var(--lp-text); font-size: var(--lp-fs-md); line-height: 1.75; overflow-wrap: break-word; text-wrap: pretty; }
.lp-prose > :first-child { margin-top: 0; }
.lp-prose > :last-child { margin-bottom: 0; }
.lp-prose p { margin: 0 0 1.25em; }
.lp-prose :is(h1, h2, h3, h4, h5, h6) { color: var(--lp-text); font-family: var(--lp-font-title); font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
.lp-prose :is(h1, h2) { margin: 1.9em 0 .6em; font-size: var(--lp-fs-xl); }
.lp-prose h3 { margin: 1.6em 0 .5em; font-size: var(--lp-fs-lg); }
.lp-prose :is(h4, h5, h6) { margin: 1.5em 0 .5em; font-size: var(--lp-fs-md); font-weight: 600; }
.lp-prose :is(h2, h3) + :is(h3, h4) { margin-top: .8em; }
.lp-prose a:not(.lp-btn) { color: var(--lp-accent); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--lp-accent) 45%, transparent); text-underline-offset: 3px; transition: color var(--lpb-t), text-decoration-color var(--lpb-t); }
.lp-prose a:not(.lp-btn):hover { color: var(--lp-text); text-decoration-color: currentColor; }
.lp-prose :is(strong, b) { color: var(--lp-text); font-weight: 700; }
.lp-prose :is(ul, ol) { margin: 0 0 1.25em; padding-left: 1.4em; }
.lp-prose li { margin: 0 0 .5em; padding-left: .2em; }
.lp-prose ul > li { list-style: disc outside; }
.lp-prose ol > li { list-style: decimal outside; }
.lp-prose ul ul > li { list-style-type: circle; }
.lp-prose li::marker { color: var(--lp-accent); font-weight: 600; }
.lp-prose li > :is(ul, ol) { margin: .5em 0 0; }
.lp-prose blockquote { margin: 1.5em 0; padding: var(--lp-sp-4) var(--lp-sp-5); border-left: 3px solid var(--lp-primary); border-radius: 0 var(--lp-r-sm) var(--lp-r-sm) 0; background: var(--lp-surface-2); color: var(--lp-text); font-style: italic; }
.lp-prose blockquote > :last-child { margin-bottom: 0; }
.lp-prose :is(code, kbd) { padding: .1em .4em; border: 1px solid var(--lp-border); border-radius: calc(var(--lp-r-sm) / 2); background: var(--lp-surface-3); color: var(--lp-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; }
.lp-prose pre { margin: 0 0 1.5em; padding: var(--lp-sp-4) var(--lp-sp-5); overflow-x: auto; border: 1px solid var(--lp-border); border-radius: var(--lp-r); background: var(--lp-bg-2); color: var(--lp-text); font-size: var(--lp-fs-sm); line-height: 1.6; white-space: pre; }
.lp-prose pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.lp-prose hr { height: 0; margin: 2.5em 0; border: 0; border-top: 1px solid var(--lp-border-strong); background: none; opacity: 1; }
.lp-prose mark { padding: 0 .2em; border-radius: calc(var(--lp-r-sm) / 2); background: color-mix(in srgb, var(--lp-amber) 28%, transparent); color: var(--lp-text); }
.lp-prose img { display: block; max-width: 100%; height: auto !important; margin: 1.5em auto; border-radius: var(--lp-r); }
.lp-prose figure { margin: 1.75em 0; }
.lp-prose figure img { margin: 0 auto; }
.lp-prose figcaption { margin-top: var(--lp-sp-2); color: var(--lp-muted); font-size: var(--lp-fs-sm); text-align: center; }
.lp-prose iframe { display: block; max-width: 100%; margin: 1.5em 0; border: 0; border-radius: var(--lp-r); }
.lp-prose iframe[src*="youtube"], .lp-prose iframe[src*="vimeo"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
/* Tables scroll sideways instead of widening the page; blog.js wraps them in .lpb-table-scroll. */
.lp-prose table { display: block; max-width: 100%; overflow-x: auto; margin: 0 0 1.5em; border-collapse: collapse; font-size: var(--lp-fs-sm); line-height: 1.5; }
.lp-prose .lpb-table-scroll { margin: 0 0 1.5em; overflow-x: auto; border: 1px solid var(--lp-border); border-radius: var(--lp-r); }
.lp-prose .lpb-table-scroll table { display: table; width: 100%; margin: 0; }
.lp-prose :is(th, td) { padding: var(--lp-sp-3) var(--lp-sp-4); border: 0; border-bottom: 1px solid var(--lp-border); color: inherit; text-align: left; vertical-align: top; }
.lp-prose th { background: var(--lp-surface-3); color: var(--lp-text); font-weight: 600; white-space: nowrap; }
.lp-prose tr:last-child td { border-bottom: 0; }
.lp-prose tbody tr:nth-child(even) td { background: var(--lp-surface-2); }
/* CKEditor writes light-theme inline colours, fonts and backgrounds; the dark page sets its own. */
.lp-prose [style*="color"], .lp-prose font[color] { color: inherit !important; }
.lp-prose [style*="background"] { background: transparent !important; }
.lp-prose [style*="font-family"], .lp-prose font[face] { font-family: inherit !important; }
.lp-prose a:not(.lp-btn)[style*="color"] { color: var(--lp-accent) !important; }
.lp-prose th[style*="background"] { background: var(--lp-surface-3) !important; }

/* ---------- 7. content blocks (frontend/blog_blocks.py, landing/blog/blocks/*) inside the prose ----------
   Selectors start with .lp-prose so they beat the prose element rules (margins, italics, link underline). */
.lp-prose :is(.lpb-block, .lpb-stats, .lpb-faq, .lpb-disclaimer) { margin: 2em 0; }
.lp-prose .lpb-stats > .lpb-stat { margin: 0; }
.lp-prose :is(.lpb-block, .lpb-disclaimer) > :last-child { margin-bottom: 0; }
.lp-prose .lpb-block-title { margin: 0 0 var(--lp-sp-3); color: var(--lp-text); font-family: var(--lp-font-title); font-size: var(--lp-fs-md); font-weight: 700; line-height: 1.35; }
.lp-prose :is(.lpb-takeaways, .lpb-callout, .lpb-toolcard, .lpb-ask, .lpb-inline-cta) { padding: var(--lp-sp-5); border: 1px solid var(--lp-border-strong); border-radius: var(--lp-r-lg); background: var(--lp-surface); font-size: var(--lp-fs-base); line-height: 1.65; }
.lp-prose :is(.lpb-takeaways, .lpb-callout, .lpb-ask, .lpb-inline-cta) > :is(p, ul, ol):not(:last-child) { margin-bottom: .75em; }
.lp-prose .lpb-block .lp-btn { margin: var(--lp-sp-2) var(--lp-sp-2) 0 0; }

.lp-prose .lpb-takeaways { background: linear-gradient(180deg, color-mix(in srgb, var(--lp-primary) 14%, var(--lp-surface)), var(--lp-surface) 70%); }
.lp-prose .lpb-takeaways ul > li::marker { content: "\2713\00a0\00a0"; color: var(--lp-green); }

.lp-prose .lpb-callout { --lpb-c: var(--lp-accent); border-color: color-mix(in srgb, var(--lpb-c) 32%, transparent); border-left: 3px solid var(--lpb-c); border-radius: 0 var(--lp-r) var(--lp-r) 0; background: color-mix(in srgb, var(--lpb-c) 7%, var(--lp-surface)); }
.lp-prose .lpb-callout--tip { --lpb-c: var(--lp-green); }
.lp-prose .lpb-callout--warning { --lpb-c: var(--lp-amber); }
.lp-prose .lpb-callout .lpb-block-title { color: color-mix(in srgb, var(--lpb-c) 70%, var(--lp-text)); font-size: var(--lp-fs-base); }

.lp-prose .lpb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--lp-sp-4); }
.lp-prose .lpb-stat { display: flex; flex-direction: column; gap: var(--lp-sp-1); padding: var(--lp-sp-5) var(--lp-sp-4); border: 1px solid var(--lp-border); border-radius: var(--lp-r); background: var(--lp-surface-2); }
.lp-prose .lpb-stat > * { margin: 0; text-align: left; }
.lp-prose .lpb-stat-value { background: var(--lp-title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--lp-font-title); font-size: clamp(28px, 3.2vw, 36px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lp-prose .lpb-stat-label { color: var(--lp-muted); font-size: var(--lp-fs-sm); line-height: 1.45; }
.lp-prose a.lpb-stat-source { margin-top: auto; padding-top: var(--lp-sp-2); color: var(--lp-muted); font-size: var(--lp-fs-xs); }

.lp-prose .lpb-toolcard { display: grid; gap: var(--lp-sp-3); }
.lp-prose .lpb-toolcard > * { margin: 0; }
.lpb-toolcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2) var(--lp-sp-3); }
.lp-prose .lpb-toolcard-title { margin: 0; color: var(--lp-text); font-family: var(--lp-font-title); font-size: var(--lp-fs-lg); font-weight: 700; line-height: 1.25; }
.lp-prose .lpb-toolcard-tagline { color: var(--lp-muted); }
.lpb-toolcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2) var(--lp-sp-4); }
.lp-prose .lpb-toolcard-actions .lp-btn { margin: 0; }
.lp-prose a.lpb-toolcard-guide { font-size: var(--lp-fs-sm); font-weight: 600; }

.lp-prose :is(.lpb-ask, .lpb-inline-cta) { border-color: color-mix(in srgb, var(--lp-primary) 55%, transparent); background: radial-gradient(130% 140% at 0% 0%, color-mix(in srgb, var(--lp-primary) 22%, transparent), transparent 60%), var(--lp-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-primary) 10%, transparent); }
.lp-prose .lpb-ask-eyebrow { color: var(--lp-accent); font-size: var(--lp-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lp-prose .lpb-ask-question { color: var(--lp-text); font-family: var(--lp-font-title); font-size: var(--lp-fs-lg); font-weight: 600; line-height: 1.35; }
.lp-prose .lpb-ask-note { color: var(--lp-muted); font-size: var(--lp-fs-sm); }

.lp-prose .lpb-faq { border-top: 1px solid var(--lp-border); }
.lp-prose .lpb-faq .lp-faq-item summary { padding: var(--lp-sp-4) var(--lp-sp-1); color: var(--lp-text); font-size: var(--lp-fs-base); line-height: 1.45; }
.lp-prose .lpb-faq .lp-faq-item summary:hover { color: var(--lp-accent); }
.lp-prose .lpb-faq .lp-faq-a { padding-bottom: var(--lp-sp-4); font-size: var(--lp-fs-base); line-height: 1.7; }
.lp-prose .lpb-faq .lp-faq-a > * { margin: 0; }

.lp-prose .lpb-disclaimer { padding: var(--lp-sp-4) var(--lp-sp-5); border: 1px solid var(--lp-border); border-radius: var(--lp-r); background: var(--lp-surface-2); color: var(--lp-muted); font-size: var(--lp-fs-sm); font-style: normal; line-height: 1.6; }
.lp-prose .lpb-disclaimer :is(p, em, i, strong) { font-style: normal; color: inherit; }
.lp-prose figure.lpb-diagram { width: 100%; margin: 2em 0; }

/* ---------- 8. password gate and not found ---------- */
.lpb-gate { padding-block: var(--lp-section); }
.lpb-gate-card { max-width: 480px; }
.lpb-gate-title { color: var(--lp-text); font-size: var(--lp-fs-xl); font-weight: 700; }
.lpb-form { display: flex; flex-direction: column; gap: var(--lp-sp-3); width: 100%; margin-top: var(--lp-sp-2); text-align: left; }
.lpb-form label { color: var(--lp-text); font-size: var(--lp-fs-sm); font-weight: 600; }
.lpb-main .lpb-input { width: 100%; min-height: 48px; padding: 0 var(--lp-sp-4); border: 1px solid var(--lp-border-strong); border-radius: var(--lp-r); background: var(--lp-bg-2); color: var(--lp-text); font: inherit; }
.lpb-main .lpb-input:focus-visible { border-color: var(--lp-accent); }
.lpb-main .lpb-input[aria-invalid="true"] { border-color: var(--lp-red); }
.lpb-form .lp-btn { width: 100%; margin-top: var(--lp-sp-2); }
.lpb-gate-card .lpb-error { padding: var(--lp-sp-3) var(--lp-sp-4); border: 1px solid color-mix(in srgb, var(--lp-red) 50%, transparent); border-radius: var(--lp-r-sm); background: color-mix(in srgb, var(--lp-red) 12%, transparent); color: color-mix(in srgb, var(--lp-red) 30%, var(--lp-text)); font-size: var(--lp-fs-sm); }
.lpb-gate-links { font-size: var(--lp-fs-sm); }
.lpb-gate-links a:hover, .lpb-latest a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lpb-latest { width: 100%; padding-top: var(--lp-sp-5); border-top: 1px solid var(--lp-border); text-align: left; }
.lpb-latest ul { display: grid; gap: var(--lp-sp-2); margin: 0; padding: 0; list-style: none; }

/* ---------- 9. tags, rail (try card + share), author, related ---------- */
.lpb-tags { padding-top: var(--lp-sp-5); border-top: 1px solid var(--lp-border); }
.lpb-chiplist, .lpb-share-list, .lpb-author-social { display: flex; flex-wrap: wrap; gap: var(--lp-sp-2); margin: 0; padding: 0; list-style: none; }
.lpb-rail { display: grid; gap: var(--lp-sp-5); align-content: start; }
.lpb-rail-card { display: grid; justify-items: start; gap: var(--lp-sp-2); padding: var(--lp-sp-5); background: radial-gradient(140% 110% at 100% 0%, color-mix(in srgb, var(--lp-primary) 22%, transparent), transparent 62%), var(--lp-surface); }
.lpb-rail-card .lpb-label { margin: 0; color: var(--lp-accent); }
.lpb-rail-title { color: var(--lp-text); font-family: var(--lp-font-title); font-size: var(--lp-fs-md); font-weight: 700; line-height: 1.3; }
.lpb-rail-text { color: var(--lp-muted); font-size: var(--lp-fs-sm); line-height: 1.55; }
.lpb-rail-card .lp-btn { width: 100%; margin-top: var(--lp-sp-2); }
.lpb-main .lpb-share-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--lp-border-strong); border-radius: 50%; background: var(--lp-surface-2); color: var(--lp-text); font-size: var(--lp-fs-base); line-height: 1; cursor: pointer; transition: background-color var(--lpb-t), border-color var(--lpb-t); }
.lpb-main .lpb-share-btn:hover { border-color: var(--lp-accent); background: var(--lp-surface-3); color: var(--lp-text); }
.lpb-main .lpb-share-btn.is-copied { border-color: var(--lp-green); color: var(--lp-green); }
@media (min-width: 640px) and (max-width: 1099.98px) { .lpb-rail { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }

.lpb-author { display: flex; align-items: flex-start; gap: var(--lp-sp-5); padding: var(--lp-sp-6); background: linear-gradient(135deg, color-mix(in srgb, var(--lp-primary) 12%, var(--lp-surface)), var(--lp-surface) 60%); }
.lpb-author-body { display: grid; gap: var(--lp-sp-2); min-width: 0; }
.lpb-author .lpb-label { margin: 0; }
.lpb-author-name { color: var(--lp-text); font-size: var(--lp-fs-lg); font-weight: 700; }
.lpb-author-text { color: var(--lp-muted); font-size: var(--lp-fs-base); line-height: 1.6; }
.lpb-author-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-3) var(--lp-sp-5); margin-top: var(--lp-sp-2); }
.lpb-related { padding-block: var(--lp-sp-8); }
.lpb-related-inner { max-width: 1336px; margin-inline: auto; } /* the post grid's widest size, so both line up */
.lpb-cta .lp-cta-band .lp-eyebrow { margin-bottom: 0; }

/* ---------- 10. small screens ---------- */
@media (max-width: 639.98px) {
  .lpb-hero { padding-block: var(--lp-sp-7) var(--lp-sp-5); }
  .lpb-intro, .lpb-dek { font-size: var(--lp-fs-base); }
  .lpb-section { padding-top: var(--lp-sp-6); }
  .lpb-layout { margin-top: var(--lp-sp-6); }
  .lpb-cover--hero { margin-top: var(--lp-sp-5); }
  .lpb-feature-title { font-size: var(--lp-fs-lg); }
  .lp-prose :is(h1, h2) { font-size: var(--lp-fs-lg); }
  .lp-prose h3 { font-size: var(--lp-fs-md); }
  .lp-prose :is(.lpb-takeaways, .lpb-callout, .lpb-toolcard, .lpb-ask, .lpb-inline-cta) { padding: var(--lp-sp-4); }
  .lpb-author { flex-direction: column; padding: var(--lp-sp-5); }
  .lpb-related { padding-block: var(--lp-sp-7); }
  .lpb-empty, .lpb-gate-card { padding: var(--lp-sp-6) var(--lp-sp-4); }
}

/* ---------- 11. screenshots and steps ([figure], [steps] in blog_blocks.py; figure.html, steps.html) ---------- */
.lpb-shot-link { display: block; cursor: zoom-in; }
.lp-prose :is(.lpb-shot, .lpb-step-shot) img { width: 100%; margin: 0; border: 1px solid var(--lp-border); border-radius: var(--lp-r); box-shadow: 0 10px 28px color-mix(in srgb, var(--lp-bg) 70%, transparent); }
/* Steps are a vertical timeline: numbered dot + connecting line, title and text, then the
   screenshot at full column width so its annotations stay readable. */
.lp-prose .lpb-steps { margin: var(--lp-sp-6) 0; padding: 0; list-style: none; counter-reset: lpb-step; }
.lp-prose .lpb-steps > .lpb-step { position: relative; margin: 0; padding: 0 0 var(--lp-sp-7) 60px; list-style: none; counter-increment: lpb-step; }
.lp-prose .lpb-steps > .lpb-step:last-child { padding-bottom: 0; }
.lpb-step::before { content: counter(lpb-step); position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--lp-primary), var(--lp-primary-2)); box-shadow: 0 0 0 5px var(--lp-bg), 0 0 0 6px color-mix(in srgb, var(--lp-primary) 40%, transparent); color: var(--lp-text); font: 700 var(--lp-fs-md)/1 var(--lp-font-title); }
.lpb-step:not(:last-child)::after { content: ""; position: absolute; top: 48px; bottom: 8px; left: 19px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, color-mix(in srgb, var(--lp-primary) 55%, transparent), color-mix(in srgb, var(--lp-primary) 10%, transparent)); }
.lp-prose .lpb-step-title { margin: 0 0 var(--lp-sp-3); padding-top: 6px; font-size: var(--lp-fs-lg); line-height: 1.3; }
.lp-prose .lpb-step-body > :last-child { margin-bottom: 0; }
.lp-prose .lpb-step-body > :is(p, ul, ol):not(:last-child) { margin-bottom: .75em; }
.lp-prose .lpb-step-shot { margin: var(--lp-sp-4) 0 0; }
@media (max-width: 639.98px) {
  .lp-prose .lpb-steps > .lpb-step { padding-left: 46px; padding-bottom: var(--lp-sp-6); }
  .lpb-step::before { width: 32px; height: 32px; font-size: var(--lp-fs-base); }
  .lpb-step:not(:last-child)::after { top: 40px; left: 15px; }
  .lp-prose .lpb-step-title { padding-top: 2px; font-size: var(--lp-fs-md); }
}