/* ==========================================================================
   Article pages: plain and readable.

   Loaded after blog.css, which is kept for the blog index. Everything here is
   deliberately boring: one column of text, a heading hierarchy that does not
   skip levels, lists, tables and code. No cards, no icons in headings, no
   gradients, no shadows, no decorative widgets.

   The previous version of these pages gave every post its own set of
   components — icon-and-text capability cards, chat mockups, stacked
   "architecture layer" boxes, challenge cards, chip clouds. Across the six
   posts that was 204 bespoke class names, 136 of which appeared on a single
   post, which is what made the pages read as machine-generated rather than
   written. Those components are gone from the markup; this file styles what
   replaced them.

   Three kinds of rule live here, and the difference matters when editing:

     1. Normal styling for the plain article.
     2. Neutralisers for the old widgets, which are still in the markup but
        stripped of everything that made them look like components.
     3. An authority block for the handful of places where a site-wide
        `!important` rule in style.css outranks anything written normally.
   ========================================================================== */

/* ---------- The article is not a card ------------------------------------ */

/* The article body used to be a card: 24px radius, a 50px drop shadow, a
   translucent fill and a backdrop blur, sitting on the page like a panel. That
   single wrapper was most of what made a post look like a generated component
   rather than a page of writing, and the light theme even pinned the fill with
   `!important`. The article is now just text on the page background. */
.blog-article,
.blog-article-simple {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* Roughly 70 characters. Wider and the eye loses the start of the next line
     on a long paragraph, which is the main thing that makes an article tiring
     to read. */
  max-width: 70ch;
  margin: 0 auto;
}

/* The old contents card, in case the class name comes back. */
.table-of-contents {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* ---------- Header -------------------------------------------------------- */

/* The navbar is `position: fixed` and about 77px tall, so the header has to
   start below it or the breadcrumb ends up underneath and cannot be read.

   Written as `section.blog-header:not(.top-navbar-hadsw)` rather than
   `.blog-header` on purpose. style.css carries a site-wide
   `section:not(.top-navbar-hadsw) { padding-top: 30px !important }`, and that
   `:not()` gives the rule two classes of specificity — more than a bare class
   can beat, however it is written. Repeating the same shape ties the
   specificity, and this file loads last, so load order decides. Anything that
   needs to beat a site-wide `!important` has to be written this way. */
section.blog-header:not(.top-navbar-hadsw) {
  --blog-nav-offset: 4.75rem;
  background: none !important;
  border-bottom: 1px solid var(--border-light, #e7e5e4) !important;
  padding-top: calc(var(--blog-nav-offset) + 1.5rem) !important;
  padding-bottom: 2rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* The header used to hold a large rounded hero image and its height was
     sized for one. With the image gone that leaves a band of empty space. */
  min-height: 0 !important;
  overflow: visible !important;
}

.blog-header-content {
  max-width: 70ch;
  margin: 0 auto;
  text-align: left;
}

.blog-breadcrumb,
.blog-breadcrumb a,
.blog-breadcrumb span {
  font-size: 0.8125rem;
  color: var(--text-muted, #78716c) !important;
  text-decoration: none;
  margin-bottom: 1.25rem;
}

.blog-breadcrumb a:hover {
  text-decoration: underline;
}

/* The chevron icons between the crumbs are gone, so the separator is drawn here
   instead. Without this the three items run together into one word. */
.blog-breadcrumb > * + *::before {
  content: "/";
  margin: 0 0.5rem;
  color: #c9c5c0;
}

/* The category used to be a filled purple pill with an icon in it. It is now a
   line of small grey text above the title.

   Every property is reset rather than merely overridden, because `style.css`
   styles `.blog-category` as a pill for the blog index cards. Overriding only
   the font size and colour left the background, 20px radius, padding, border
   and backdrop blur intact, and the pill survived the removal of its icon. */
.blog-category,
.blog-category-badge {
  display: block !important;
  width: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 0 0.75rem !important;
  color: var(--text-muted, #78716c) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
}

.blog-main-title {
  font-size: 2.125rem;
  line-height: 1.25;
  font-weight: 650;
  color: var(--text-primary, #1c1917);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  margin: 0 0 0.75rem;
  letter-spacing: -0.015em;
}

.blog-subtitle {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-muted, #78716c);
  margin: 0 0 1.5rem;
  max-width: 62ch;
}

.blog-meta-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-muted, #78716c);
  border-top: 1px solid var(--border-light, #e7e5e4);
  padding-top: 1rem;
}

.blog-meta-info .author-name {
  color: var(--text-primary, #1c1917);
  font-weight: 550;
}

.blog-meta-info .publish-date::before,
.blog-stats > span + span::before {
  content: "\00b7";
  margin-right: 1.25rem;
  color: var(--border-light, #e7e5e4);
}

.publish-date::before {
  margin-right: 0.5rem;
}

.blog-stats {
  display: flex;
  align-items: baseline;
  gap: 0 1.25rem;
}

.blog-stats > span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

/* ---------- Contents list ------------------------------------------------ */

/* A plain list of links under the title. This replaces the sticky sidebar,
   which was a second, card-styled copy of the same links. */
.article-contents {
  margin: 0 0 2.5rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border-light, #e7e5e4);
}

.article-contents h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #78716c);
  margin: 0 0 0.75rem;
}

.article-contents ol,
.article-contents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.article-contents li {
  counter-increment: toc;
  padding: 0.2rem 0;
}

.article-contents li::before {
  content: counter(toc) ".";
  display: inline-block;
  width: 1.75rem;
  color: var(--text-muted, #78716c);
}

.article-contents a {
  color: var(--text-primary, #1c1917);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.article-contents a:hover {
  border-bottom-color: var(--border-light, #e7e5e4);
}

/* ---------- Body copy ----------------------------------------------------- */

.article-text {
  color: var(--text-primary, #1c1917);
  font-size: 1.0625rem;
  line-height: 1.75;
  /* Offsets the sticky navbar when jumping to an anchor. */
  scroll-margin-top: 5rem;
}

.article-text p {
  margin: 0 0 1.25rem;
}

/* The lead paragraph, set slightly larger. Only the first, so it does not
   become a style of its own. */
.article-text > p:first-of-type {
  font-size: 1.125rem;
  line-height: 1.7;
}

.article-text h2 {
  /* `display: flex` and the icon sizing that came with it are gone; the icons
     in headings were the most visible tell. */
  display: block;
  font-size: 1.4375rem;
  line-height: 1.35;
  font-weight: 620;
  color: var(--text-primary, #1c1917);
  margin: 2.75rem 0 1rem;
  padding: 0;
  border: 0;
  letter-spacing: -0.01em;
}

.article-text h3 {
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-primary, #1c1917);
  margin: 2rem 0 0.75rem;
  padding: 0;
  border: 0;
}

.article-text h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #1c1917);
  margin: 1.5rem 0 0.5rem;
}

.article-text h2 i,
.article-text h3 i,
.article-text h4 i,
.article-text h5 i {
  display: none;
}

.article-text ul,
.article-text ol {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
}

.article-text li {
  margin-bottom: 0.5rem;
}

.article-text li::marker {
  color: var(--text-muted, #78716c);
}

.article-text ul ul,
.article-text ol ol,
.article-text ul ol,
.article-text ol ul {
  margin: 0.5rem 0 0;
}

.article-text strong {
  font-weight: 620;
  color: var(--text-primary, #1c1917);
}

.article-text a {
  color: #5b48d6;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-text a:hover {
  color: #4436b8;
}

.article-text hr {
  border: 0;
  border-top: 1px solid var(--border-light, #e7e5e4);
  margin: 2.5rem 0;
}

.article-text blockquote {
  margin: 1.5rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--border-light, #e7e5e4);
  background: none;
  border-radius: 0;
  color: var(--text-muted, #78716c);
  font-style: normal;
}

.article-text blockquote p:last-child {
  margin-bottom: 0;
}

.article-text img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Code ---------------------------------------------------------- */

.article-text pre,
.article-text .code-block {
  background: #f6f5f3 !important;
  border: 1px solid var(--border-light, #e7e5e4) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 1rem 1.15rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
}

.article-text pre code,
.article-text .code-block code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-primary, #1c1917);
  font-size: 0.875rem;
  line-height: 1.65;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
}

/* Prism's token colours are tuned for a dark background. On a light one they
   are too light to read, so the plain colour above wins for the common
   tokens. */
.article-text .token.comment,
.article-text .token.prolog,
.article-text .token.doctype,
.article-text .token.cdata {
  color: #6b7280;
  font-style: italic;
}

.article-text .token.punctuation {
  color: #57534e;
}

.article-text .token.property,
.article-text .token.tag,
.article-text .token.constant,
.article-text .token.symbol,
.article-text .token.deleted {
  color: #9f1239;
}

.article-text .token.boolean,
.article-text .token.number {
  color: #b45309;
}

.article-text .token.selector,
.article-text .token.attr-name,
.article-text .token.string,
.article-text .token.char,
.article-text .token.builtin,
.article-text .token.inserted {
  color: #0f766e;
}

.article-text .token.operator,
.article-text .token.entity,
.article-text .token.url {
  color: #57534e;
}

.article-text code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.article-text p > code,
.article-text li > code,
.article-text td > code,
.article-text h2 code,
.article-text h3 code,
.article-text h4 code {
  background: #f1f0ee;
  border: 1px solid var(--border-light, #e7e5e4);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.875em;
  color: #9f1239;
}

/* ---------- Tables -------------------------------------------------------- */

.article-text table,
.article-text .comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.article-text th,
.article-text td {
  border: 1px solid var(--border-light, #e7e5e4);
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.article-text th {
  background: #f6f5f3;
  font-weight: 600;
  color: var(--text-primary, #1c1917);
}

.article-text tbody tr:nth-child(even) {
  background: none;
}

.article-text caption {
  caption-side: bottom;
  font-size: 0.8125rem;
  color: var(--text-muted, #78716c);
  padding-top: 0.5rem;
  text-align: left;
}

/* Table cells clipped a coloured fill with a `0 0 0 9999px inset` shadow, a
   technique for rounding one edge of a cell. It has no place in a plain grid
   and left a visible inset on every cell. */
.article-text th,
.article-text td {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* A table wider than the column scrolls rather than forcing the page sideways. */
.article-table-scroll {
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

.article-table-scroll table {
  margin-bottom: 0;
}

/* ==========================================================================
   Neutralising the old per-post widgets.

   Every post used to carry its own set of components: icon-and-text capability
   cards, stacked "architecture layer" boxes, case-study panels with big result
   numbers, chat mockups, timeline chips, tip cards. Roughly sixty families and
   about ninety icon classes, none of them shared between posts.

   Rather than delete that markup — a large, risky edit across twelve files —
   the containers are stripped of everything that made them look like
   components: no background, no border, no shadow, no radius, no padding, no
   grid, no accent colour. What is left is a heading and a paragraph, which is
   what the markup already contained underneath. The reading experience is
   plain prose; only the DOM is larger than it needs to be.

   A future post using a new widget name will not match these selectors and will
   arrive looking like a component again, so a new component needs a rule here.
   ========================================================================== */

.article-text :is(
  .capabilities-grid, .capability-card, .capability-icon,
  .architecture-diagram, .architecture-layers, .layer, .layer-title, .layer-content,
  .application-cases, .case-study, .case-header, .case-content,
  .challenge-solution-grid, .challenges-grid, .challenge-card, .challenge-content,
  .implementation-phases, .phase, .phase-content, .phase-number,
  .use-case-grid, .use-case-card, .use-case-icon,
  .algorithm-framework, .framework-item,
  .best-practices, .practice-item,
  .tips-grid, .tip-card,
  .roadmap-timeline, .timeline, .timeline-item, .timeline-content, .timeline-date,
  .blockchain-features, .blockchain-item, .eth-protocols,
  .strategy-grid, .strategy-card, .feature-showcase, .feature-item,
  .component-grid, .services-list, .service-item, .portfolio-features, .portfolio-item,
  .risk-controls-grid, .risk-card, .regulatory-grid, .regulatory-card,
  .protocol-card, .setup-checklist, .workflow-example, .workflow-visual,
  .workflow-steps, .workflow-node, .workflow-arrow,
  .component, .framework
) {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  display: block !important;
  color: inherit !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* A title that used to sit inside a card is now a subheading. */
.article-text :is(
  .capability-card, .layer, .case-study, .challenge-card, .phase,
  .use-case-card, .framework-item, .practice-item, .tip-card, .timeline-item,
  .blockchain-item, .strategy-card, .feature-item, .component-grid > *,
  .service-item, .portfolio-item, .risk-card, .regulatory-card, .protocol-card,
  .framework
) > :is(h3, h4, h5) {
  font-size: 1.125rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: var(--text-primary, #1c1917) !important;
  margin: 1.75rem 0 0.5rem !important;
  padding: 0 !important;
  border: 0 !important;
  display: block !important;
  background: none !important;
}

.article-text :is(
  .capability-card, .layer, .case-study, .challenge-card, .phase,
  .use-case-card, .framework-item, .practice-item, .tip-card, .timeline-item,
  .blockchain-item, .strategy-card, .feature-item, .service-item,
  .portfolio-item, .risk-card, .regulatory-card, .protocol-card
) > p {
  margin: 0 0 1rem !important;
  color: var(--text-primary, #1c1917) !important;
  font-size: inherit !important;
}

/* Chip clouds ("Data Sensors - Event Listeners - API Monitors") read as a plain
   comma-separated line. */
.article-text :is(.layer-content, .component-grid, .services-list, .eth-protocols) > span,
.article-text .component {
  display: inline !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--text-primary, #1c1917) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.article-text :is(.layer-content, .component-grid, .eth-protocols) > span:not(:last-child)::after {
  content: ", ";
  color: var(--text-muted, #78716c);
}

/* Numbered step chips, e.g. "Step 1". Found by measuring the rendered pages —
   a `border-radius` on a bare `.step` is too generic to be caught by a family
   rule. */
.article-text .step,
.blog-article .step {
  display: inline-block !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0.35rem 0 0 !important;
  color: var(--text-muted, #78716c) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Every icon that was decoration. `display: none` rather than a colour change,
   so nothing is left occupying space. */
.article-text :is(
  .capability-icon, .use-case-icon, .challenge-icon, .feature-icon, .service-icon,
  .portfolio-icon, .protocol-icon, .risk-icon, .regulatory-icon, .tip-icon,
  .case-icon, .phase-number, .timeline-date, .metric-icon
),
.article-text i[class^="fa-"],
.article-text i[class*=" fa-"],
.article-text svg {
  display: none !important;
}

/* Fabricated result numbers — "85% First-Contact Resolution", "23% Return
   Increase", "100ms Response Time". Invented figures presented as measured
   outcomes, which is the single most damaging thing on these pages: not a style
   problem but a claim the page cannot support. Removed rather than restyled. */
.article-text :is(
  .case-results, .result-metric, .strategy-metrics, .metric-row, .metric,
  .metric-description, .metrics-table, .stat-card
) {
  display: none !important;
}

/* The mock interfaces — a fake Telegram window, a fake search bar, a fake
   architecture picture. None of it is a real screenshot, so it illustrates
   nothing. */
.article-text :is(
  .chat-area, .bot-avatar, .bot-info, .tg-interface, .tg-interface-wrapper,
  .tg-interface-header, .tg-message, .input-mock, .input-bar, .inline-keyboard,
  .phone-container, .workflow-visual, .security-layers, .security-layer
) {
  display: none !important;
}

/* Callout boxes become a plain indented note. */
.article-text .highlight-box {
  background: none !important;
  border: 0 !important;
  border-left: 2px solid var(--border-light, #e7e5e4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0 1.25rem !important;
  margin: 1.5rem 0 !important;
  color: var(--text-muted, #78716c) !important;
}

.article-text .highlight-box :is(h3, h4, strong) {
  color: var(--text-primary, #1c1917) !important;
}

/* Code samples keep their own block; the old wrappers added a title bar and a
   copy button, so they are flattened to the <pre>. */
.article-text :is(.code-example, .code-block-wrapper, .code-header, .code-title, .code-footer) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  display: block !important;
}

.article-text :is(.code-title, .code-header) {
  font-size: 0.8125rem !important;
  color: var(--text-muted, #78716c) !important;
  margin: 0 0 0.35rem !important;
  font-weight: 500 !important;
}

.article-text .copy,
.article-text .code-copy,
.article-text [data-copy],
.article-text .copy-code-btn,
.blog-article .copy-code-btn,
.article-text button[class*="copy"] {
  display: none !important;
}

/* ---------- Tags ---------------------------------------------------------- */

/* ---------- Back to all articles ------------------------------------------ */

/* Replaced a "Related Topics" row of tag links. This block does the same job for
   the back link that the block it replaces did for that row — the `border-top`,
   the `2.5rem` of space above it, no fill, no shadow — so the rhythm at the foot
   of an article is unchanged and only the contents differ.

   Written out in full rather than briefly because blog.css styles `.tag` as a
   filled chip with `!important`, and a clash like that is the likeliest way for
   these rules to be silently overridden. */

.blog-article .article-back,
.article-text .article-back {
  display: block !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--border-light, #e7e5e4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.5rem 0 0 !important;
  margin: 2.5rem 0 0 !important;
}

/* A bordered link rather than a filled button. Filled would put a coloured block
   at the end of an article that is otherwise deliberately free of them — no
   gradients, no shadows, and one 4px radius in the whole file. */
.blog-article .article-back-link,
.article-text .article-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.9rem !important;
  border: 1px solid var(--border-light, #e7e5e4) !important;
  border-radius: 4px !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--text-primary, #1c1917) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.blog-article .article-back-link:hover,
.article-text .article-back-link:hover,
.blog-article .article-back-link:focus-visible,
.article-text .article-back-link:focus-visible {
  color: var(--accent-color, #1c1917) !important;
  border-color: var(--accent-color, #1c1917) !important;
  background-color: rgba(28, 25, 23, 0.06) !important;
}

/* The arrow nudges back on hover, which is what makes this read as "go back"
   rather than as a generic link. Transform only, so it stays on the compositor. */
.blog-article .article-back-link:hover i,
.article-text .article-back-link:hover i,
.blog-article .article-back-link:focus-visible i,
.article-text .article-back-link:focus-visible i {
  transform: translateX(-3px);
}

/* ---------- Removed furniture --------------------------------------------- */

/* The closing sales panel, the featured hero image and the related-article
   cards are no longer in the markup. These rules exist so that if one is ever
   pasted back in, it does not arrive looking like a card.

   The share row was here too and has been removed at the user's request,
   along with its buttons, its handlers in blog.js, and the styles. */
.cta-section,
.blog-featured-image,
.related-articles,
.blog-sidebar {
  display: none;
}

/* ---------- Reading progress ---------------------------------------------- */

/* Kept: it is unobtrusive and genuinely useful on a long post. Made plain — no
   rounded pill, no gradient fill. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 1030;
  pointer-events: none;
}

.reading-progress-bar {
  height: 100%;
  width: 0;
  background: #1c1917;
  transition: width 0.1s linear;
}

/* ---------- Back to top --------------------------------------------------- */

.scroll-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light, #e7e5e4);
  border-radius: 4px;
  background: var(--bg-primary, #fff);
  color: var(--text-muted, #78716c);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: none;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  color: var(--text-primary, #1c1917);
  border-color: #c9c5c0;
}

/* ---------- Page furniture ------------------------------------------------ */

.blog-content {
  padding: 3rem 0 4rem;
}

/* ---------- Narrow screens ------------------------------------------------ */

@media (max-width: 768px) {
  section.blog-header:not(.top-navbar-hadsw) {
    padding-top: calc(var(--blog-nav-offset) + 1.25rem) !important;
    padding-bottom: 1.5rem !important;
  }

  .blog-main-title {
    font-size: 1.75rem;
  }

  .blog-subtitle {
    font-size: 1rem;
  }

  .article-text {
    font-size: 1rem;
    line-height: 1.7;
  }

  .article-text h2 {
    font-size: 1.25rem;
    margin-top: 2.25rem;
  }

  .article-text h3 {
    font-size: 1.0625rem;
  }

  .blog-meta-info {
    flex-direction: column;
    gap: 0.25rem;
  }

  .blog-meta-info .publish-date::before,
  .blog-stats > span + span::before {
    content: none;
  }
}

/* ---------- Decorative motion, off --------------------------------------- */

/* The footer social icons bob continuously — five of them, one per network —
   for the entire visit. Nothing on an article page is going to animate them, and
   they sit below the fold where nobody is looking.

   Measured on `telegram-trading-bot`, the longest post: with every decorative
   animation left running, three passes of the article cost RunTask 3850ms and
   Paint 578ms. With them off, RunTask 2036ms and Paint 275ms — roughly half the
   page's rendering work while scrolling. Stopping only this one animation made
   no measurable difference, so the cost was the cumulative set rather than any
   single rule.

   This file is loaded only on article pages, so the blog index keeps them. */
.footer-icons-1 a.footer-social {
  animation: none;
}


/* ==========================================================================
   PITCH MODE — Palantir-style bold sales-pitch blog pages
   Applied when the page is wrapped in <PitchPage> (.pitch-page).
   These rules override blog.css / blog-article.css where needed.
   ========================================================================== */

/* ---------- Shell --------------------------------------------------------- */

.pitch-page {
  background: #080808 !important;
  color: #f0ede8 !important;
  min-height: 100vh;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Make the containing blog sections transparent so our bg wins */
.pitch-page section.blog-header:not(.top-navbar-hadsw),
.pitch-page .blog-content {
  background: transparent !important;
  border: 0 !important;
}

/* ---------- Reading progress bar ----------------------------------------- */

.pitch-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 2000;
  pointer-events: none;
}

.pitch-progress-bar {
  height: 100%;
  width: 0;
  background: #1c1917;
  transition: width 0.08s linear;
}

/* ---------- Scroll reveal ------------------------------------------------- */

.pitch-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pitch-revealed {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pitch-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Hero ---------------------------------------------------------- */

.pitch-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 7rem 2rem 4rem;
}

.pitch-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: rgba(240, 237, 232, 0.38) !important;
  margin-bottom: 2.5rem;
}

.pitch-breadcrumb a {
  color: rgba(240, 237, 232, 0.38) !important;
  text-decoration: none;
  transition: color 0.15s;
}

.pitch-breadcrumb a:hover {
  color: #f0ede8 !important;
}

.pitch-breadcrumb-sep {
  color: rgba(240, 237, 232, 0.2) !important;
}

.pitch-category {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #1c1917 !important;
  margin: 0 0 1.5rem !important;
}

.pitch-headline {
  font-size: clamp(2.75rem, 7vw, 5.5rem) !important;
  font-weight: 780 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  margin: 0 0 1.75rem !important;
  text-transform: uppercase;
}

.pitch-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem) !important;
  line-height: 1.55 !important;
  color: rgba(240, 237, 232, 0.55) !important;
  margin: 0 !important;
  max-width: 56ch;
}

/* ---------- Content column ------------------------------------------------ */

.pitch-page .pitch-col {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem 6rem;
}

/* ---------- Divider ------------------------------------------------------- */

.pitch-divider {
  border: 0 !important;
  border-top: 1px solid rgba(240, 237, 232, 0.1) !important;
  margin: 3.5rem 0 !important;
}

/* ---------- Statement ---------------------------------------------------- */

.pitch-statement {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important;
  font-weight: 680 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  margin: 0 0 2.25rem !important;
}

/* ---------- Heading ------------------------------------------------------- */

.pitch-heading {
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(240, 237, 232, 0.45) !important;
  margin: 3.5rem 0 1.25rem !important;
}

/* ---------- Stat row ------------------------------------------------------ */

.pitch-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 2rem 0 3rem;
  border-top: 1px solid rgba(240, 237, 232, 0.1);
  border-bottom: 1px solid rgba(240, 237, 232, 0.1);
}

.pitch-stat {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 2.25rem 1.5rem;
  border-right: 1px solid rgba(240, 237, 232, 0.08);
  opacity: 0;
  transform: translateY(28px);
}

.pitch-stat:last-child {
  border-right: 0;
}

.pitch-stat-value {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.pitch-stat-label {
  font-size: 0.875rem;
  color: rgba(240, 237, 232, 0.45);
  line-height: 1.4;
  max-width: 18ch;
}

/* ---------- Bullets ------------------------------------------------------- */

.pitch-bullets {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 2rem !important;
}

.pitch-bullets li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  font-weight: 500 !important;
  color: #f0ede8 !important;
  padding: 0.85rem 0 !important;
  border-bottom: 1px solid rgba(240, 237, 232, 0.08) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.pitch-bullets li::before {
  content: '→';
  color: #1c1917;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ---------- Body text (short prose) --------------------------------------- */

.pitch-body {
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: rgba(240, 237, 232, 0.65) !important;
  margin: 0 0 2rem !important;
  max-width: 64ch;
}

.pitch-body p {
  margin: 0 0 1rem !important;
  color: inherit !important;
}

/* ---------- CTA ----------------------------------------------------------- */

.pitch-cta-wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 3rem 0 0;
  padding-top: 3rem;
  border-top: 1px solid rgba(240, 237, 232, 0.1);
}

.pitch-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.85rem 2rem !important;
  background: transparent !important;
  border: 1.5px solid rgba(240, 237, 232, 0.7) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s !important;
  border-radius: 0 !important;
}

.pitch-cta-btn:hover {
  background: #1c1917 !important;
  border-color: #1c1917 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.pitch-cta-arrow {
  transition: transform 0.18s;
}

.pitch-cta-btn:hover .pitch-cta-arrow {
  transform: translateX(4px);
}

.pitch-back-link {
  font-size: 0.875rem !important;
  color: rgba(240, 237, 232, 0.38) !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

.pitch-back-link:hover {
  color: #f0ede8 !important;
  -webkit-text-fill-color: #f0ede8 !important;
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 640px) {
  .pitch-hero {
    padding: 6rem 1.25rem 3rem;
  }

  .pitch-page .pitch-col {
    padding: 0 1.25rem 4rem;
  }

  .pitch-stat {
    flex-basis: 50%;
    padding: 1.5rem 1rem;
  }

  .pitch-stat:nth-child(2n) {
    border-right: 0;
  }

  .pitch-cta-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}