/* Sam Is Marketing — public blog.
   PHASE 5: structure and legibility only. Phase 6 owns the final design, so
   this is deliberately restrained rather than unfinished-looking. Palette and
   type match the existing site so a published article does not look foreign. */

:root {
  --ink: #ECF8FB;
  --ink-dim: rgba(236, 248, 251, .74);
  --ink-faint: rgba(236, 248, 251, .52);
  --bg: #00060F;
  --panel: #000C1F;
  --line: rgba(153, 255, 255, .14);
  --cyan: #99FFFF;
  --violet: #C7B4FF;
  --grad: linear-gradient(135deg, #00C9F9, #8051FE);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.7 Manrope, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--ink); }

.bl-wrap { max-width: 900px; margin: 0 auto; padding: 0 22px; }

/* --- header --- */

.bl-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 6, 15, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bl-top-in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.bl-top-in img { height: 26px; width: auto; display: block; }
.bl-cta {
  margin-left: auto;
  padding: 11px 20px;
  border-radius: 100px;
  background: var(--grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.bl-cta:hover { filter: brightness(1.12); color: #fff; }

.bl-crumbs {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-faint);
}
.bl-crumbs span { margin: 0 8px; color: rgba(236, 248, 251, .3); }

/* --- article --- */

.bl-article { max-width: 760px; margin: 0 auto; padding: 44px 22px 64px; }

.bl-head { margin-bottom: 30px; }
.bl-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.bl-article h1 {
  font: 600 clamp(29px, 6vw, 44px)/1.07 Sora, system-ui, sans-serif;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}
.bl-standfirst {
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 16px 0 0;
}
.bl-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-faint);
}
.bl-author { color: var(--ink); font-weight: 600; }

.bl-hero { margin: 24px 0 0; }
.bl-hero img { width: 100%; height: auto; border-radius: 14px; display: block; }
.bl-hero figcaption { margin-top: 9px; font-size: 13px; color: var(--ink-faint); }

/* --- body: selectors match cms_blocks_render() output --- */

.bl-body > * + * { margin-top: 22px; }
.bl-body h2 {
  font: 600 clamp(22px, 3.6vw, 29px)/1.15 Sora, system-ui, sans-serif;
  letter-spacing: -.028em;
  margin: 42px 0 0;
  scroll-margin-top: 80px;
}
.bl-body h3 {
  font: 600 clamp(18px, 2.6vw, 21px)/1.25 Sora, system-ui, sans-serif;
  letter-spacing: -.02em;
  margin: 30px 0 0;
  scroll-margin-top: 80px;
}
.bl-body p { margin: 0; color: var(--ink-dim); }
.bl-body ul, .bl-body ol { margin: 0; padding-left: 24px; color: var(--ink-dim); }
.bl-body li + li { margin-top: 7px; }
.bl-body strong { color: var(--ink); font-weight: 700; }

.a-toc {
  margin: 0 0 32px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.a-toc-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 10px;
}
.a-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.a-toc li { font-size: 14.5px; }
.a-toc li.sub { margin-left: 16px; font-size: 13.5px; color: var(--ink-dim); }

.a-takeaways {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(153, 255, 255, .28);
  background: linear-gradient(150deg, rgba(0, 201, 249, .1), rgba(128, 81, 254, .08));
}
.a-takeaways h2 {
  font: 600 13px/1.2 Sora, system-ui, sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 12px !important;
}
.a-takeaways ul { margin: 0; padding-left: 20px; }
.a-takeaways li { margin-bottom: 8px; color: var(--ink); }

.a-callout {
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  background: rgba(236, 248, 251, .03);
}
.a-callout-note { border-left-color: var(--cyan); }
.a-callout-tip { border-left-color: var(--violet); }
.a-callout-warning { border-left-color: #FFC3CE; }
.a-callout-h { margin: 0 0 6px !important; color: var(--ink) !important; }

.bl-body blockquote {
  margin: 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid rgba(153, 255, 255, .34);
}
.bl-body blockquote p { font-size: 19px; color: var(--ink); }
.bl-body blockquote footer { margin-top: 10px; font-size: 13.5px; color: var(--ink-faint); }

.a-tablewrap { overflow-x: auto; }
.bl-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.bl-body caption { text-align: left; font-size: 12.5px; color: var(--ink-faint); padding-bottom: 8px; }
.bl-body th, .bl-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.bl-body th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.bl-body td { color: var(--ink-dim); }

.a-faq h2 { margin-top: 0 !important; }
.a-faq dl { margin: 16px 0 0; display: grid; gap: 14px; }
.a-faq dt { font-family: Sora, system-ui, sans-serif; font-weight: 600; font-size: 16.5px; }
.a-faq dd { margin: 6px 0 0; color: var(--ink-dim); }

.a-image { margin: 0; }
.a-image img { width: 100%; height: auto; border-radius: 14px; display: block; }
.a-image figcaption { margin-top: 9px; font-size: 13px; color: var(--ink-faint); }
.a-image-ph {
  padding: 40px 20px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
}

.a-cta, .bl-cta-box {
  padding: 26px 24px;
  border-radius: 18px;
  border: 1px solid rgba(128, 81, 254, .34);
  background: linear-gradient(150deg, rgba(0, 201, 249, .1), rgba(128, 81, 254, .12));
}
.bl-cta-box { margin-top: 40px; }
.a-cta-eyebrow, .bl-cta-eyebrow {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  margin: 0 0 8px !important;
}
.a-cta-h, .bl-cta-h {
  font: 600 clamp(20px, 3vw, 25px)/1.15 Sora, system-ui, sans-serif;
  letter-spacing: -.028em;
  color: var(--ink) !important;
  margin: 0 0 12px !important;
}
.a-cta-btn, .bl-cta-btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 100px;
  background: var(--grad);
  color: #fff !important;
  font-weight: 600;
  font-size: 15.5px;
}
.a-cta-btn:hover, .bl-cta-btn:hover { filter: brightness(1.12); }

.a-related, .bl-cluster {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.a-related h2, .bl-cluster h2, .bl-sources h2, .bl-authorbox h2 {
  font: 600 13px/1.2 Sora, system-ui, sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 12px !important;
}
.a-related ul, .bl-cluster ul { margin: 0; padding-left: 20px; }
.a-related li, .bl-cluster li { margin-bottom: 7px; }
.a-ilink { color: var(--ink-dim); }

.bl-sources, .bl-authorbox, .bl-cluster {
  margin-top: 40px;
}
.bl-sources { padding-top: 24px; border-top: 1px solid var(--line); }
.bl-sources ol { margin: 0; padding-left: 20px; }
.bl-sources li { margin-bottom: 9px; font-size: 14.5px; }
.bl-sources span { display: block; font-size: 12.5px; color: var(--ink-faint); }
.bl-authorbox p { color: var(--ink-dim); margin: 0 0 8px; font-size: 15.5px; }
.bl-pillar { margin-top: 32px; font-size: 14.5px; color: var(--ink-faint); }

/* --- listing --- */

.bl-list { max-width: 1000px; margin: 0 auto; padding: 44px 22px 64px; }
.bl-list-head { margin-bottom: 32px; }
.bl-list-head h1 {
  font: 600 clamp(28px, 5.4vw, 40px)/1.1 Sora, system-ui, sans-serif;
  letter-spacing: -.035em;
  margin: 0;
}
.bl-page { font-size: .45em; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.bl-list-head p { color: var(--ink-dim); margin: 14px 0 0; max-width: 640px; }

.bl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}
.bl-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bl-card:hover { border-color: rgba(153, 255, 255, .3); }
.bl-card-img { display: block; aspect-ratio: 16 / 9; background: rgba(236, 248, 251, .04); }
.bl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card-body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.bl-card-cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0;
}
.bl-card h2 {
  font: 600 clamp(18px, 2.4vw, 20px)/1.25 Sora, system-ui, sans-serif;
  letter-spacing: -.022em;
  margin: 0;
}
.bl-card h2 a { color: var(--ink); }
.bl-card h2 a:hover { color: var(--cyan); }
.bl-card-ex { font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); margin: 0; }
.bl-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin: auto 0 0;
  padding-top: 6px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.bl-empty {
  padding: 50px 22px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--ink-faint);
}

.bl-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.bl-pager span { color: var(--ink-faint); }

/* --- footer --- */

.bl-foot {
  padding: 34px 0;
  background: #00040C;
  border-top: 1px solid var(--line);
}
.bl-foot nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.bl-foot nav a { color: var(--ink-faint); }
.bl-foot nav a:hover { color: var(--ink); }
.bl-foot p { margin: 18px 0 0; font-size: 12.5px; color: rgba(236, 248, 251, .42); }


/* ============ PHASE 6: final experience ============ */

/* Accessibility: a keyboard user should reach the article without tabbing
   through the whole header. Visually hidden until focused. */
.bl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--panel);
  border: 1px solid var(--cyan);
  border-radius: 0 0 10px 0;
  color: var(--cyan);
  font-size: 14px;
}
.bl-skip:focus { left: 0; }

/* Screen-reader-only label. Search inputs need a real label, not a
   placeholder: a placeholder disappears on typing and is not announced
   reliably. */
.bl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible focus everywhere. Removing outlines without replacing them makes a
   site unusable by keyboard, so this is deliberate and global. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.bl-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-left: 8px;
  font-size: 14px;
}
.bl-nav a { color: var(--ink-faint); }
.bl-nav a:hover { color: var(--ink); }

@media (max-width: 620px) {
  /* The CTA matters more than the nav on a phone, so the nav wraps beneath
     rather than squeezing the button off-screen. */
  .bl-top-in { flex-wrap: wrap; row-gap: 10px; }
  .bl-nav { order: 3; width: 100%; margin-left: 0; }
  .bl-cta { margin-left: auto; padding: 10px 16px; font-size: 13.5px; }
}

/* --- search --- */

.bl-search {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  max-width: 520px;
}
.bl-search-inline { margin: 0 0 28px; }
.bl-search input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(236, 248, 251, .05);
  color: var(--ink);
  font: 400 15px/1.4 Manrope, system-ui, sans-serif;
}
.bl-search input::placeholder { color: rgba(236, 248, 251, .4); }
.bl-search input:focus { border-color: var(--cyan); background: rgba(236, 248, 251, .08); }
.bl-search button {
  flex: none;
  padding: 13px 22px;
  border: 0;
  border-radius: 100px;
  background: var(--grad);
  color: #fff;
  font: 600 14.5px/1 Manrope, system-ui, sans-serif;
  cursor: pointer;
}
.bl-search button:hover { filter: brightness(1.12); }

.bl-search-count { font-size: 14.5px; color: var(--ink-faint); margin: 16px 0 0; }

.bl-results { display: grid; gap: 4px; }
.bl-result {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.bl-result h2 {
  font: 600 clamp(19px, 2.6vw, 22px)/1.25 Sora, system-ui, sans-serif;
  letter-spacing: -.022em;
  margin: 6px 0 0;
}
.bl-result h2 a { color: var(--ink); }
.bl-result h2 a:hover { color: var(--cyan); }
.bl-result .bl-card-ex { margin: 8px 0 0; }
.bl-result .bl-card-meta { margin: 10px 0 0; }

.bl-noresult {
  padding: 44px 24px;
  border-radius: 16px;
  border: 1px dashed var(--line);
  text-align: center;
}
.bl-noresult p { margin: 0; color: var(--ink-dim); }
.bl-hint { margin-top: 10px !important; font-size: 14.5px; color: var(--ink-faint) !important; }

/* --- category nav --- */

.bl-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 26px;
}
.bl-cats-lab {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 4px;
}
.bl-cats a {
  padding: 8px 15px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(236, 248, 251, .03);
  font-size: 13.5px;
  color: var(--ink-dim);
}
.bl-cats a:hover { border-color: rgba(153, 255, 255, .34); color: var(--ink); }
.bl-cats a span { color: var(--ink-faint); font-size: 12px; }

/* --- featured article --- */

.bl-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  margin-bottom: 30px;
  border-radius: 20px;
  border: 1px solid rgba(153, 255, 255, .22);
  background: linear-gradient(150deg, rgba(0, 201, 249, .07), rgba(128, 81, 254, .06));
  overflow: hidden;
}
@media (max-width: 800px) {
  .bl-feature { grid-template-columns: minmax(0, 1fr); }
}
.bl-feature-img { display: block; background: rgba(236, 248, 251, .04); }
.bl-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 800px) {
  .bl-feature-img img { aspect-ratio: 16 / 9; }
}
.bl-feature-body { padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; }
.bl-feature-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 0;
}
.bl-feature h2 {
  font: 600 clamp(22px, 3.4vw, 30px)/1.16 Sora, system-ui, sans-serif;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
.bl-feature h2 a { color: var(--ink); }
.bl-feature h2 a:hover { color: var(--cyan); }
.bl-feature-ex { font-size: 16px; line-height: 1.6; color: var(--ink-dim); margin: 0; }
.bl-feature-link { font-weight: 600; font-size: 15px; }

/* --- related + author --- */

.bl-related {
  margin-top: 40px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.bl-related h2 {
  font: 600 13px/1.2 Sora, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 12px;
}
.bl-related ul { margin: 0; padding-left: 20px; }
.bl-related li { margin-bottom: 7px; }

.bl-authorbox-in { display: flex; gap: 16px; align-items: flex-start; }
.bl-authorpic {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
@media (max-width: 520px) {
  .bl-authorbox-in { flex-direction: column; }
}

.bl-cta-list { margin-top: 40px; }
.bl-cta-sub { font-size: 15.5px; line-height: 1.6; color: var(--ink-dim); margin: 0 0 16px; }

/* --- footer --- */

.bl-foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.bl-foot-top img { height: 24px; width: auto; display: block; }
.bl-foot-top .bl-cta { margin-left: auto; }
.bl-foot-line { font-size: 13.5px; color: var(--ink-faint); margin: 10px 0 0; max-width: 340px; }

.bl-foot-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.bl-foot-cats a { color: var(--ink-faint); }
.bl-foot-cats a:hover { color: var(--ink); }

.bl-foot-nav { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 20px; font-size: 14px; }
.bl-foot-nav a { color: var(--ink-faint); }
.bl-foot-nav a:hover { color: var(--ink); }
.bl-foot-copy { margin: 16px 0 0; font-size: 12.5px; color: rgba(236, 248, 251, .42); }

/* --- mobile article typography ---
   Designed rather than shrunk: a long heading at 29px on a 320px screen wraps
   to five lines, so the scale is tightened and the TOC is collapsed. */

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .bl-article { padding: 32px 20px 52px; }
  .bl-byline { gap: 6px 14px; font-size: 13px; }
  .bl-body h2 { margin-top: 34px; }
  .a-toc { padding: 16px 18px; }
  .a-toc li { font-size: 14px; }
  .bl-list { padding: 32px 20px 52px; }
  .bl-feature-body { padding: 24px 20px; }
  .bl-search { flex-wrap: wrap; }
  .bl-search button { width: 100%; }
  /* A wide table cannot be made narrow, so it scrolls within its own box
     rather than forcing the whole page sideways. */
  .a-tablewrap { margin-inline: -20px; padding-inline: 20px; }
}

/* =====================================================================
   SINGLE ARTICLE — light two-column layout
   =====================================================================

   Scoped entirely to body.bl-light and .bl-shell, which only the single
   article template sets. The listing, search, admin and marketing site are
   untouched: nothing below changes a selector used elsewhere, it only adds
   more specific rules that apply inside this one page.

   The mechanism is a token override rather than a rewrite. Every existing
   rule already reads var(--ink), var(--panel) and so on, so redefining those
   inside .bl-shell flips the whole article, the TOC, the takeaways, the
   tables and the callouts in one place. Reversible by deleting this block.

   Header, breadcrumbs and footer sit OUTSIDE .bl-shell, so they keep the
   dark treatment and the page still reads as part of the same site.
   ===================================================================== */

body.bl-light {
  background: #fff;
  color: #10192b;
}

.bl-shell {
  /* Light token set. Same roles, light values. */
  --ink: #10192b;
  --ink-dim: #47536b;
  --ink-faint: #6b7688;
  --bg: #fff;
  --panel: #f7f9fc;
  --line: #e3e8ef;
  --line-strong: #cbd4e1;
  /* Cyan is a highlight on navy and unreadable on white, so links and
     accents shift to the brand's deeper blue. Not a new colour: it is the
     blue end of the existing gradient at a readable weight. */
  --cyan: #1a56c4;
  --violet: #5b32c9;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}

/* Sidebar below the article on tablet and phone, never beside it. 980px is
   where a 320px sidebar starts squeezing the content column below a
   comfortable line length. */
@media (max-width: 980px) {
  .bl-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-bottom: 56px;
  }
}

.bl-shell .bl-article {
  max-width: 760px;
  margin: 0;
  padding: 48px 0 0;
  min-width: 0;
}

.bl-shell a { color: var(--cyan); }
.bl-shell a:hover { color: #0b3a8f; }

.bl-shell .bl-cat a { color: var(--cyan); }

.bl-shell .bl-article h1 { color: #0a1424; }

.bl-shell .bl-standfirst {
  color: #47536b;
  font-size: clamp(17px, 2.3vw, 20px);
}

.bl-shell .bl-byline {
  border-top-color: var(--line);
  color: #6b7688;
}
.bl-shell .bl-author { color: #10192b; }

.bl-shell .bl-hero img { border-radius: 12px; }
.bl-shell .bl-hero figcaption { color: #6b7688; }

/* Body copy. Slightly darker than the muted grey used on navy, because the
   same alpha reads far lighter against white. */
.bl-shell .bl-body p,
.bl-shell .bl-body ul,
.bl-shell .bl-body ol { color: #2f3b52; }
.bl-shell .bl-body h2,
.bl-shell .bl-body h3 { color: #0a1424; }
.bl-shell .bl-body strong { color: #0a1424; }

.bl-shell .a-toc {
  background: #f7f9fc;
  border-color: var(--line);
}
.bl-shell .a-toc-h { color: #1a56c4; }
.bl-shell .a-toc li.sub { color: #47536b; }

.bl-shell .a-takeaways {
  border-color: #c7d7f5;
  background: linear-gradient(150deg, #eef4ff, #f5f0ff);
}
.bl-shell .a-takeaways h2 { color: #1a56c4; }
.bl-shell .a-takeaways li { color: #1c2740; }

.bl-shell .a-callout {
  background: #f7f9fc;
  border-color: var(--line);
}
.bl-shell .a-callout-note { border-left-color: #1a56c4; }
.bl-shell .a-callout-tip { border-left-color: #5b32c9; }
.bl-shell .a-callout-warning { border-left-color: #c2410c; }

.bl-shell .bl-body blockquote {
  border-left-color: #1a56c4;
}
.bl-shell .bl-body blockquote p { color: #1c2740; }
.bl-shell .bl-body blockquote footer { color: #6b7688; }

.bl-shell .bl-body th { color: #1a56c4; }
.bl-shell .bl-body td { color: #2f3b52; }
.bl-shell .bl-body th,
.bl-shell .bl-body td { border-bottom-color: var(--line); }

.bl-shell .a-faq dd { color: #2f3b52; }
.bl-shell .a-image figcaption { color: #6b7688; }
.bl-shell .a-image-ph { border-color: var(--line); color: #6b7688; }

.bl-shell .bl-sources,
.bl-shell .bl-related,
.bl-shell .bl-cluster,
.bl-shell .bl-authorbox {
  border-color: var(--line);
}
.bl-shell .bl-related,
.bl-shell .bl-cluster { background: #f7f9fc; }
.bl-shell .bl-sources span { color: #6b7688; }
.bl-shell .bl-pillar { color: #6b7688; }
.bl-shell .bl-authorbox p { color: #2f3b52; }
.bl-shell .bl-authorpic { border-color: var(--line); }

/* In-article CTA. The gradient is the brand's, on a tinted panel rather than
   a dark one, so it still reads as the same component. */
.bl-shell .a-cta,
.bl-shell .bl-cta-box {
  border-color: #c7d7f5;
  background: linear-gradient(150deg, #eef4ff, #f3edff);
}
.bl-shell .a-cta-eyebrow,
.bl-shell .bl-cta-eyebrow { color: #1a56c4 !important; }
.bl-shell .a-cta-h,
.bl-shell .bl-cta-h { color: #0a1424 !important; }

/* --- sidebar --- */

.bl-side { min-width: 0; }

@media (min-width: 981px) {
  .bl-side-sticky {
    position: sticky;
    /* Clears the sticky header, which is about 53px tall. */
    top: 74px;
  }
}

.bl-side-sticky { display: grid; gap: 16px; padding-top: 48px; }
@media (max-width: 980px) {
  .bl-side-sticky { padding-top: 0; }
}

.bl-widget {
  padding: 22px 20px;
  border-radius: 14px;
  border: 1px solid #e3e8ef;
  background: #f7f9fc;
}

.bl-widget-h {
  font: 600 12px/1.2 Sora, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1a56c4;
  margin: 0 0 14px;
}

.bl-widget-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bl-widget-cats a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  color: #2f3b52;
  font-size: 14.5px;
  text-decoration: none;
}
.bl-widget-cats a:hover { background: #eaf0f9; color: #10192b; }
.bl-widget-cats a.on { background: #e6eeff; color: #10192b; font-weight: 600; }
.bl-widget-cats em {
  margin-left: auto;
  font-style: normal;
  font-size: 12.5px;
  color: #8a94a6;
}

.bl-widget-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bl-widget-links a {
  color: #1c2740;
  font-size: 14.5px;
  line-height: 1.45;
  text-decoration: none;
}
.bl-widget-links a:hover { color: #1a56c4; }

/* The sidebar CTA is the one place on a white page that keeps the dark brand
   treatment: on an otherwise light column it is the strongest way to make the
   conversion point read as different from the surrounding content. */
.bl-widget-cta {
  border: 0;
  background: linear-gradient(160deg, #0b1f4a, #1a0f44);
  color: #ECF8FB;
}
.bl-widget-eyebrow {
  font: 700 10.5px/1.2 Manrope, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #99FFFF;
  margin: 0 0 10px;
}
.bl-widget-cta-h {
  font: 600 20px/1.25 Sora, system-ui, sans-serif;
  letter-spacing: -.024em;
  color: #fff;
  margin: 0 0 10px;
  text-wrap: balance;
}
.bl-widget-cta-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(236, 248, 251, .76);
  margin: 0 0 18px;
}
.bl-widget-cta-btn {
  display: block;
  padding: 14px 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, #00C9F9, #8051FE);
  color: #fff !important;
  font: 600 15px/1 Manrope, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
}
.bl-widget-cta-btn:hover { filter: brightness(1.12); color: #fff !important; }
.bl-widget-cta-note {
  margin: 12px 0 0;
  font-size: 12px;
  text-align: center;
  color: rgba(236, 248, 251, .55);
}

/* Focus ring needs a dark colour to be visible against white. */
body.bl-light .bl-shell a:focus-visible,
body.bl-light .bl-shell button:focus-visible {
  outline: 2px solid #1a56c4;
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .bl-shell { padding: 0 20px 48px; }
  .bl-shell .bl-article { padding-top: 32px; }
  .bl-widget { padding: 20px 18px; }
}

/* TOC in the sidebar. The shared .a-toc rules already style the inner list;
   this only removes the bottom margin it carried when it sat inline above
   the article body. */
.bl-side-toc .a-toc { margin: 0; }

/* Long articles: let the contents list scroll inside the sticky column
   rather than growing past the viewport and cutting off the CTA below it. */
@media (min-width: 981px) {
  .bl-side-toc .a-toc ol {
    max-height: 46vh;
    overflow-y: auto;
  }
}

/* =====================================================================
   BREADCRUMB ON THE WHITE ARTICLE PAGE
   =====================================================================

   The breadcrumb sits outside .bl-shell, so it never received the light
   token overrides and kept the pale text colour meant for the navy pages.
   On the white article body that made it close to invisible. These rules
   apply only under body.bl-light, so every other page keeps the dark
   breadcrumb unchanged.
   ===================================================================== */

body.bl-light .bl-crumbs {
  background: #fff;
  border-bottom-color: #e3e8ef;
  color: #6b7688;
}
body.bl-light .bl-crumbs a { color: #10192b; }
body.bl-light .bl-crumbs a:hover { color: #1a56c4; }
body.bl-light .bl-crumbs span { color: #aab3c2; }

/* =====================================================================
   LISTING GRID — 3 columns, line-clamped cards
   =====================================================================

   Overrides the earlier auto-fill grid. Fixed column counts rather than
   auto-fill, because the page size is derived from 3 x 6 and an auto-fill
   grid could put 4 or 2 across at some widths, leaving a ragged last row.

   Gaps use the 16px step already used by .bl-cards and .bl-side-sticky.
   ===================================================================== */

.bl-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1000px) {
  .bl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .bl-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Cards stretch to the tallest in their row, and the footer is pushed to the
   bottom, so the meta row lines up across a row even when one card has a
   shorter excerpt. */
.bl-card { height: 100%; }
.bl-card-body { display: flex; flex-direction: column; gap: 9px; flex: 1; }

/* Fixed 16:9 frame with object-fit: cover. Source images vary, and letting
   them set their own height is what makes a card grid look uneven. */
.bl-card-img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(236, 248, 251, .04);
}
.bl-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Line clamping is required, not cosmetic: one long title otherwise makes its
   card taller than its neighbours and the whole row misaligns. This is the
   single most common way a 3-column card grid falls apart. */
.bl-card h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve two lines even for a one-line title, so cards in a row stay
     aligned regardless of title length. */
  min-height: calc(2 * 1.25em);
}
.bl-card-ex {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- card footer: author left, stats right --- */

.bl-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  /* margin-top auto pins it to the card bottom whatever the excerpt length. */
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-faint);
}
.bl-card-author { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bl-card-authorname {
  color: var(--ink-dim);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bl-card-stats { display: flex; gap: 10px; margin-left: auto; white-space: nowrap; }

.bl-avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  display: block;
}
/* Initials fallback. Shown when cms_authors.photo is empty, which is
   currently always, since nothing in the CMS writes to that column yet. */
.bl-avatar-i {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #00C9F9, #8051FE);
  border: 0;
  color: #fff;
  font: 700 10px/1 Manrope, system-ui, sans-serif;
  letter-spacing: .02em;
}

@media (max-width: 400px) {
  /* Very narrow: stack rather than squeezing the author name to an ellipsis. */
  .bl-card-stats { margin-left: 0; }
}

/* --- load more --- */

.bl-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.bl-more-btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: rgba(236, 248, 251, .04);
  color: var(--ink) !important;
  font: 600 15px/1 Manrope, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.bl-more-btn:hover {
  background: rgba(153, 255, 255, .12);
  color: var(--ink) !important;
}
.bl-more-btn[aria-busy="true"] { opacity: .6; cursor: default; }

/* The prev/next trail exists for crawlers and no-JS visitors. Once the script
   upgrades the button, it is redundant on screen, so it is hidden visually
   while staying in the document for anything that reads markup. */
.bl-more.is-live ~ .bl-pager {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   SITE HEADER + FOOTER, ported from the main pages
   =====================================================================

   Matches index.html, privacy/ and terms/ so a reader crossing from a
   landing page to an article sees no seam. Prefixed sm- to keep it clearly
   separate from the bl- blog styles, and from the old bl-top/bl-foot rules
   which are left in place untouched.

   The responsive nav swap and the mobile menu are CSS-only: a media query
   and a checkbox. The main site does both in its client-side template
   engine, which these server-rendered pages never load.
   ===================================================================== */

.sm-top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(0, 6, 15, .88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(153, 255, 255, .1);
}
.sm-top-in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.sm-logo { display: flex; align-items: center; flex: none; }
.sm-logo img { height: 30px; width: auto; display: block; }

.sm-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 500;
}
.sm-nav a { color: rgba(236, 248, 251, .72); text-decoration: none; }
.sm-nav a:hover { color: #ECF8FB; }
.sm-nav-product { display: flex; align-items: center; gap: 7px; }
.sm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00C9F9, #8051FE);
  flex: none;
}

.sm-cta {
  flex: none;
  padding: 11px 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, #00C9F9, #8051FE);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: 0 10px 28px -12px rgba(128, 81, 254, .9);
  white-space: nowrap;
  text-decoration: none;
}
.sm-cta:hover { filter: brightness(1.12); color: #fff !important; }

/* Burger and mobile panel: hidden on desktop, swapped in below 900px. */
.sm-burger { display: none; }
.sm-mobile { display: none; }

.sm-menu-state { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  .sm-nav { display: none; }

  .sm-burger {
    display: grid;
    gap: 4px;
    align-content: center;
    justify-items: stretch;
    margin-left: auto;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0 11px;
    border-radius: 12px;
    border: 1px solid rgba(153, 255, 255, .2);
    background: rgba(236, 248, 251, .05);
    cursor: pointer;
  }
  .sm-burger:hover { background: rgba(153, 255, 255, .12); }
  .sm-burger span { display: block; height: 2px; border-radius: 2px; background: #ECF8FB; }
  /* The input is hidden, so the visible label must carry the focus ring. */
  .sm-menu-state:focus-visible + .sm-nav ~ .sm-burger,
  .sm-menu-state:focus + .sm-nav ~ .sm-burger {
    outline: 2px solid #99FFFF;
    outline-offset: 2px;
  }

  .sm-cta { padding: 10px 16px; font-size: 13.5px; }

  .sm-menu-state:checked ~ .sm-mobile {
    display: grid;
    gap: 2px;
    border-top: 1px solid rgba(153, 255, 255, .12);
    background: rgba(0, 6, 15, .97);
    padding: 10px 22px 18px;
  }
  .sm-mobile a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(153, 255, 255, .08);
    font-size: 16px;
    font-weight: 500;
    color: #ECF8FB;
    text-decoration: none;
  }
  .sm-mobile a:last-child { border-bottom: 0; }
  .sm-mobile-cta { color: #99FFFF !important; }
}

/* --- footer --- */

.sm-foot {
  padding: 56px 22px 36px;
  background: #00040C;
  border-top: 1px solid rgba(153, 255, 255, .1);
}
.sm-foot-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 34px;
}
.sm-foot-logo { height: 30px; width: auto; display: block; }
.sm-foot-line {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(236, 248, 251, .45);
  margin: 16px 0 0;
  max-width: 270px;
}
.sm-foot-grid nav {
  display: grid;
  gap: 10px;
  align-content: start;
  font-size: 14.5px;
}
.sm-foot-h {
  font-family: Sora, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(153, 255, 255, .55);
}
.sm-foot-grid nav a { color: rgba(236, 248, 251, .62); text-decoration: none; }
.sm-foot-grid nav a:hover { color: #ECF8FB; }
.sm-foot-cta { color: #99FFFF !important; }
.sm-foot-cta:hover { color: #ECF8FB !important; }

.sm-foot-cats {
  max-width: 1240px;
  margin: 34px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(153, 255, 255, .08);
  display: grid;
  gap: 12px;
}
.sm-foot-cats nav { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14px; }
.sm-foot-cats a { color: rgba(236, 248, 251, .62); text-decoration: none; }
.sm-foot-cats a:hover { color: #ECF8FB; }

.sm-foot-base {
  max-width: 1240px;
  margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(153, 255, 255, .08);
  font-size: 12.5px;
  color: rgba(236, 248, 251, .6);
}

/* =====================================================================
   SCROLL CTA — single article only
   ===================================================================== */

.bl-pop {
  position: fixed;
  z-index: 70;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: 0 16px 16px;
  /* Only the card takes pointer events, so the page stays usable behind it. */
  pointer-events: none;
}
.bl-pop[hidden] { display: none; }

.bl-pop-card {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 24px 24px 22px;
  border-radius: 18px;
  background: linear-gradient(160deg, #0b1f4a, #1a0f44);
  border: 1px solid rgba(153, 255, 255, .22);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .8);
  color: #ECF8FB;
  /* Deliberately a slide, not a fade-and-scale: it reads as arriving from
     the edge rather than interrupting the middle of the page. */
  animation: blPopIn .34s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes blPopIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.bl-pop-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(153, 255, 255, .22);
  background: rgba(236, 248, 251, .06);
  color: #ECF8FB;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.bl-pop-x:hover { background: rgba(153, 255, 255, .18); }

.bl-pop-eyebrow {
  font: 700 10.5px/1.2 Manrope, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #99FFFF;
  margin: 0 0 10px;
}
.bl-pop-h {
  font: 600 20px/1.25 Sora, system-ui, sans-serif;
  letter-spacing: -.024em;
  color: #fff;
  margin: 0 0 8px;
  padding-right: 34px;
  text-wrap: balance;
}
.bl-pop-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(236, 248, 251, .76);
  margin: 0 0 18px;
}
.bl-pop-btn {
  display: block;
  padding: 14px 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, #00C9F9, #8051FE);
  color: #fff !important;
  font: 600 15px/1 Manrope, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
}
.bl-pop-btn:hover { filter: brightness(1.12); color: #fff !important; }
.bl-pop-note {
  margin: 12px 0 0;
  font-size: 12px;
  text-align: center;
  color: rgba(236, 248, 251, .5);
}

/* Desktop: a corner card rather than a centred modal, so it never blocks the
   paragraph being read. */
@media (min-width: 760px) {
  .bl-pop {
    inset: auto 24px 24px auto;
    padding: 0;
    justify-content: flex-end;
  }
  .bl-pop-card { max-width: 380px; }
  @keyframes blPopIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bl-pop-card { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- video block ----------
   A fixed 16:9 frame reserves the space before the player loads, so the
   article does not jump when the iframe arrives. */
.a-video { margin: 0; }
.a-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.a-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.a-video figcaption { margin-top: 9px; font-size: 13px; color: var(--ink-faint); }

/* =====================================================================
   AUTHOR PROFILE — /blog/author/{slug}/
   Light page under the dark site header, same tokens as the article view.
   Scoped to .au so nothing here reaches other pages.
   ===================================================================== */

.au {
  --ink: #10192b; --ink-dim: #47536b; --ink-faint: #6b7688;
  --panel: #f7f9fc; --line: #e3e8ef; --line-strong: #cbd4e1;
  --cyan: #1a56c4; --violet: #5b32c9;
  background: #fff;
  color: var(--ink);
}
.au a { color: var(--cyan); }

/* ---- hero ---- */
.au-hero {
  background: linear-gradient(180deg, #f3f7ff 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
}
.au-hero-in {
  max-width: 1140px; margin: 0 auto; padding: 56px 22px 52px;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: center;
}
@media (max-width: 820px) {
  .au-hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 20px 40px; }
  .au-hero-photo { order: -1; justify-self: start; }
}
.au-hi {
  margin: 0; font: 600 18px/1.3 Sora, system-ui, sans-serif; color: var(--cyan);
}
.au-name {
  margin: 6px 0 0;
  font: 700 clamp(38px, 7vw, 62px)/1.02 Sora, system-ui, sans-serif;
  letter-spacing: -.04em; color: #0a1424;
}
.au-role { margin: 14px 0 0; font-size: 16px; font-weight: 600; color: var(--ink-dim); }
.au-role span { margin: 0 6px; color: var(--ink-faint); }
.au-bio {
  margin: 18px 0 0; max-width: 620px;
  font-size: 16.5px; line-height: 1.7; color: #2f3b52;
}
.au-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 26px; }
.au-btn {
  display: inline-block; padding: 14px 24px; border-radius: 100px;
  background: linear-gradient(135deg, #00C9F9, #8051FE); color: #fff !important;
  font: 600 15px/1 Manrope, system-ui, sans-serif; text-decoration: none;
  box-shadow: 0 14px 34px -16px rgba(128, 81, 254, .8);
}
.au-btn:hover { filter: brightness(1.1); }
.au-follow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.au-follow-lab { font-size: 13px; color: var(--ink-faint); margin-right: 4px; }
.au-social {
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line-strong);
  background: #fff; font-size: 13.5px; font-weight: 600; color: #1c2740 !important; text-decoration: none;
}
.au-social:hover { border-color: var(--cyan); color: var(--cyan) !important; }

.au-hero-photo img,
.au-initials {
  width: 320px; height: 320px; max-width: 100%; border-radius: 28px; display: block;
  object-fit: cover;
  box-shadow: 0 30px 60px -30px rgba(10, 20, 36, .45);
}
@media (max-width: 820px) {
  .au-hero-photo img, .au-initials { width: 140px; height: 140px; border-radius: 22px; }
}
.au-initials {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #00C9F9, #8051FE); color: #fff;
  font: 700 88px/1 Sora, system-ui, sans-serif;
}
@media (max-width: 820px) { .au-initials { font-size: 44px; } }

/* ---- sections ---- */
.au-sec { max-width: 1140px; margin: 0 auto; padding: 56px 22px 20px; }
.au-h {
  margin: 0 0 30px; text-align: center;
  font: 700 clamp(24px, 4vw, 32px)/1.15 Sora, system-ui, sans-serif;
  letter-spacing: -.03em; color: #0a1424;
}
/* Short gradient rule under each heading, in place of the reference's underline. */
.au-h::after {
  content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0;
  border-radius: 3px; background: linear-gradient(90deg, #00C9F9, #8051FE);
}
.au-sub { margin: -14px 0 30px; text-align: center; font-size: 15px; color: var(--ink-faint); }

/* Cards inherit the light tokens above. */
.au .bl-card { background: #fff; border-color: var(--line); box-shadow: 0 10px 30px -24px rgba(10, 20, 36, .4); }
.au .bl-card:hover { border-color: var(--line-strong); }
.au .bl-card h2 a { color: #0a1424; }
.au .bl-card h2 a:hover { color: var(--cyan); }
.au .bl-card-cat { color: var(--cyan); }
.au .bl-more-btn { background: #fff; color: #0a1424 !important; border-color: var(--line-strong); }
.au .bl-more-btn:hover { background: #f3f7ff; }

/* ---- other authors ---- */
.au-others { padding-bottom: 72px; }
.au-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 26px;
}
@media (max-width: 900px) { .au-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .au-grid { grid-template-columns: minmax(0, 1fr); } }
.au-person {
  display: flex; gap: 16px; align-items: center; padding: 10px; margin: -10px;
  border-radius: 14px; text-decoration: none;
}
.au-person:hover { background: #f5f8fd; }
.au-person-pic { flex: none; width: 96px; height: 96px; border-radius: 16px; overflow: hidden; background: var(--panel); }
/* Monochrome until hover, as in the reference, so a wall of photos stays calm. */
.au-person-pic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter .2s ease; }
.au-person:hover .au-person-pic img { filter: none; }
.au-person-i {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(135deg, #00C9F9, #8051FE); color: #fff;
  font: 700 28px/1 Sora, system-ui, sans-serif;
}
.au-person-txt { display: grid; gap: 4px; min-width: 0; }
.au-person-name { font: 600 16px/1.3 Sora, system-ui, sans-serif; color: var(--cyan); }
.au-person-meta { font-size: 13px; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) { .au-person-pic img { transition: none; } }

/* =====================================================================
   SINGLE ARTICLE — TYPOGRAPHY AND READABILITY
   =====================================================================
   Reviewed against the reference and our live post. Our text was about 15px
   with tight line height and almost no gap between paragraphs, so long
   sections read as one grey block. These rules follow common long-form
   readability guidance:

     body text 18px, line height 1.75       comfortable at reading distance
     line length about 65-72 characters     the content column is capped
     paragraph gap about 1.3em              each paragraph reads as a unit
     headings: more space above than below  so a heading belongs to what
                                            follows, not what came before
     list items spaced, bullets aligned     scannable

   Scoped to the article column only. The site header, footer, sidebar and
   every other page are unchanged.
   ===================================================================== */

.bl-shell .bl-article {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* Title block */
.bl-shell .bl-article h1 {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.bl-shell .bl-standfirst {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.6;
  margin-top: 16px;
}
.bl-shell .bl-byline { font-size: 14px; margin-top: 20px; }
.bl-shell .bl-hero { margin-top: 26px; }

/* Body column: about 70 characters per line at 18px. */
.bl-shell .bl-body {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.75;
  color: #2b3548;
}
.bl-shell .bl-body > * + * { margin-top: 0; }

.bl-shell .bl-body p { margin: 0 0 1.3em; color: #2b3548; }

.bl-shell .bl-body h2 {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 2.2em 0 .6em;
}
.bl-shell .bl-body h3 {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 1.8em 0 .5em;
}
/* A heading straight after another heading needs less space. */
.bl-shell .bl-body h2 + h3 { margin-top: .8em; }

.bl-shell .bl-body ul,
.bl-shell .bl-body ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
  color: #2b3548;
}
.bl-shell .bl-body li { margin: 0 0 .6em; padding-left: .2em; }
.bl-shell .bl-body li::marker { color: #1a56c4; font-weight: 600; }
.bl-shell .bl-body li > ul,
.bl-shell .bl-body li > ol { margin: .6em 0 0; }

.bl-shell .bl-body a {
  color: #1a56c4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bl-shell .bl-body a:hover { color: #0b3a8f; text-decoration-thickness: 2px; }
.bl-shell .bl-body strong { font-weight: 700; color: #111a2c; }

/* Blocks inside the body get room to breathe. */
.bl-shell .bl-body .a-takeaways,
.bl-shell .bl-body .a-callout,
.bl-shell .bl-body blockquote,
.bl-shell .bl-body .a-image,
.bl-shell .bl-body .a-video,
.bl-shell .bl-body .a-tablewrap,
.bl-shell .bl-body .a-cta,
.bl-shell .bl-body .a-faq {
  margin: 2em 0;
}
.bl-shell .a-takeaways { padding: 24px 26px; font-size: 16.5px; line-height: 1.65; }
.bl-shell .a-takeaways h2 { margin: 0 0 12px !important; font-family: Inter, system-ui, sans-serif !important; }
.bl-shell .a-takeaways li { margin-bottom: .7em; }
.bl-shell .a-takeaways li:last-child { margin-bottom: 0; }

.bl-shell .bl-body blockquote p { font-size: 20px; line-height: 1.55; margin: 0; }
.bl-shell .a-image figcaption,
.bl-shell .a-video figcaption { font-size: 14px; line-height: 1.5; margin-top: 10px; }
.bl-shell .bl-body table { font-size: 15.5px; line-height: 1.55; }
.bl-shell .a-faq dt { font-family: Inter, system-ui, sans-serif; font-size: 18px; margin-top: 1.2em; }
.bl-shell .a-faq dd { margin: .4em 0 0; }

/* End-of-article sections use the same face. */
.bl-shell .bl-sources,
.bl-shell .bl-authorbox,
.bl-shell .bl-cluster,
.bl-shell .bl-pillar,
.bl-shell .bl-cta-box {
  font-family: Inter, system-ui, sans-serif;
  max-width: 720px;
}
.bl-shell .bl-sources li { font-size: 15px; line-height: 1.6; }

/* Author box, closer to the reference: photo left, name and bio right. */
.bl-shell .bl-authorbox {
  margin-top: 48px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcfe;
}
.bl-shell .bl-authorbox h2 {
  font: 700 12px/1.2 Inter, system-ui, sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: #6b7688 !important;
  margin: 0 0 14px !important;
}
.bl-shell .bl-authorpic { width: 88px; height: 88px; border-radius: 16px; }
.bl-shell .bl-authorbox p { font-size: 15.5px; line-height: 1.65; }

/* Phones: slightly smaller body text, same rhythm. */
@media (max-width: 620px) {
  .bl-shell .bl-body { font-size: 17px; line-height: 1.7; }
  .bl-shell .bl-body h2 { margin-top: 1.9em; }
  .bl-shell .a-takeaways { padding: 20px; }
}

/* ---------- author photo in the byline ---------- */
.bl-shell .bl-byline { align-items: center; }
.bl-byline-pic {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--line); display: block;
}
.bl-byline-i {
  display: grid; place-items: center; border: 0;
  background: linear-gradient(135deg, #00C9F9, #8051FE); color: #fff;
  font: 700 14px/1 Inter, system-ui, sans-serif;
}
.bl-shell .bl-author { font-weight: 700; }

/* ---------- author box at the end ---------- */
.bl-shell .bl-authorbox-in { display: flex; gap: 22px; align-items: flex-start; }
.bl-shell .bl-authorpic {
  flex: none; width: 120px; height: 120px; border-radius: 14px; object-fit: cover; border: 0;
}
.bl-authorpic-i {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #00C9F9, #8051FE); color: #fff;
  font: 700 38px/1 Inter, system-ui, sans-serif;
}
.bl-authorbox-txt { min-width: 0; }
.bl-shell .bl-authorbox p { margin: 0; }
.bl-shell .bl-authorbox .bl-authorbox-lab {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7688;
}
.bl-shell .bl-authorbox .bl-authorbox-name { margin-top: 6px; font-size: 20px; font-weight: 800; color: #0a1424; }
.bl-shell .bl-authorbox-name a { color: #1a56c4; text-decoration: none; }
.bl-shell .bl-authorbox-name a:hover { text-decoration: underline; }
.bl-shell .bl-authorbox .bl-authorbox-role { margin-top: 2px; font-size: 14px; color: #6b7688; }
.bl-shell .bl-authorbox .bl-authorbox-bio { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: #2b3548; }
.bl-authorbox-links { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 14px; }
.bl-authorbox-social {
  padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 600; color: #1c2740 !important; text-decoration: none !important; background: #fff;
}
.bl-authorbox-social:hover { border-color: #1a56c4; color: #1a56c4 !important; }
.bl-authorbox-more { font-size: 14px; font-weight: 600; color: #1a56c4 !important; }
@media (max-width: 560px) {
  .bl-shell .bl-authorbox-in { flex-direction: column; gap: 14px; }
  .bl-shell .bl-authorpic { width: 88px; height: 88px; }
}

/* Listing cards: show the full title. Overrides the earlier 2-line clamp.
   Card footers still line up across a row, because the footer is pinned to
   the bottom of each card. */
.bl-card h2 {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  min-height: 0;
}

/* =====================================================================
   FEATURED "LATEST ARTICLE" CARD — /blog/ page 1
   Wider image, larger title, author photo in the footer. Overrides the
   earlier .bl-feature rules; placed last so it wins without !important.
   ===================================================================== */

.bl-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  margin-bottom: 36px;
  border-radius: 22px;
  border: 1px solid rgba(153, 255, 255, .22);
  background: linear-gradient(150deg, rgba(0, 201, 249, .08), rgba(128, 81, 254, .08));
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
@media (max-width: 860px) {
  .bl-feature { grid-template-columns: minmax(0, 1fr); }
}

.bl-feature-img {
  position: relative;
  display: block;
  min-height: 100%;
  aspect-ratio: 16 / 11;
  background: rgba(236, 248, 251, .05);
  overflow: hidden;
}
.bl-feature-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.bl-feature:hover .bl-feature-img img { transform: scale(1.03); }
@media (max-width: 860px) { .bl-feature-img { aspect-ratio: 16 / 9; } }

/* No image uploaded: the brand gradient instead of an empty grey box. */
.bl-feature-noimg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(0, 201, 249, .45), transparent 60%),
              radial-gradient(circle at 75% 70%, rgba(128, 81, 254, .55), transparent 60%), #0b1f4a;
}

/* "Latest article" badge sits on the image, not in the text column. */
.bl-feature-tag {
  position: absolute; left: 18px; top: 18px;
  padding: 7px 13px; border-radius: 100px;
  background: rgba(0, 6, 15, .78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(153, 255, 255, .3);
  color: #99FFFF;
  font: 700 10.5px/1 Manrope, system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}

.bl-feature-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 36px 34px;
}
@media (max-width: 860px) { .bl-feature-body { padding: 24px 20px 26px; } }

.bl-feature h2 {
  margin: 0;
  font: 700 clamp(24px, 3vw, 34px)/1.14 Sora, system-ui, sans-serif;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.bl-feature h2 a { color: var(--ink); text-decoration: none; }
.bl-feature h2 a:hover { color: var(--cyan); }

.bl-feature-ex {
  margin: 0;
  font-size: 16.5px; line-height: 1.65; color: var(--ink-dim);
}

.bl-feature-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid rgba(153, 255, 255, .14);
}

.bl-feature-author {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  text-decoration: none;
}
.bl-feature-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 2px solid rgba(153, 255, 255, .35);
}
.bl-feature-avatar-i {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #00C9F9, #8051FE);
  border: 0; color: #fff;
  font: 700 16px/1 Manrope, system-ui, sans-serif;
}
.bl-feature-by { display: grid; gap: 3px; min-width: 0; }
.bl-feature-name {
  font: 600 15px/1.2 Sora, system-ui, sans-serif; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.bl-feature-author:hover .bl-feature-name { color: var(--cyan); }
.bl-feature-stats { display: flex; gap: 10px; font-size: 13px; color: var(--ink-faint); }

.bl-feature-link {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 100px;
  background: linear-gradient(135deg, #00C9F9, #8051FE);
  color: #fff !important; text-decoration: none;
  font: 600 14.5px/1 Manrope, system-ui, sans-serif;
  box-shadow: 0 14px 30px -14px rgba(128, 81, 254, .9);
}
.bl-feature-link:hover { filter: brightness(1.1); }
@media (max-width: 520px) {
  .bl-feature-link { margin-left: 0; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-feature-img img { transition: none; }
  .bl-feature:hover .bl-feature-img img { transform: none; }
}

/* =====================================================================
   FEATURED CARD — moderate size (supersedes the block above)

   Bug fixed: the image link had aspect-ratio + min-height:100%. Inside a
   grid, that makes the browser derive a minimum WIDTH from the row height,
   so the image grew wider than its column and covered the text. The image
   now simply fills its column's height, with no aspect-ratio on desktop.
   ===================================================================== */

.bl-feature {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  margin-bottom: 30px;
  border-radius: 18px;
  box-shadow: 0 20px 50px -34px rgba(0, 0, 0, .85);
}
.bl-feature-img {
  aspect-ratio: auto;
  min-height: 0;
  min-width: 0;
  height: 100%;
}
.bl-feature-img img { transform: none; }
.bl-feature:hover .bl-feature-img img { transform: scale(1.02); }

.bl-feature-tag { left: 14px; top: 14px; padding: 6px 11px; font-size: 10px; }

.bl-feature-body { gap: 10px; padding: 26px 28px; }
.bl-feature h2 {
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.bl-feature-ex {
  font-size: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bl-feature-foot { gap: 12px 16px; padding-top: 14px; }
.bl-feature-author { gap: 10px; }
.bl-feature-avatar { width: 36px; height: 36px; border-width: 1px; }
.bl-feature-avatar-i { font-size: 12.5px; }
.bl-feature-name { font-size: 14px; }
.bl-feature-stats { font-size: 12.5px; gap: 8px; }
.bl-feature-link { padding: 10px 16px; font-size: 13.5px; }

@media (max-width: 860px) {
  .bl-feature { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: give the image its own shape, since there is no row to fill. */
  .bl-feature-img { height: auto; aspect-ratio: 16 / 9; }
  .bl-feature-body { padding: 20px 18px 22px; }
}

/* =====================================================================
   IMAGE RELIABILITY, especially on phones

   1. Older iPhones (iOS Safari before 15) do not support aspect-ratio. Card
      and featured images use it for their frame, with the picture inside set
      to height:100%. Without aspect-ratio the frame has no height, so the
      image collapses to 0px and simply is not there. The padding-top trick
      below gives those browsers the same 16:9 frame.
   2. Author photos in the "other authors" grid were greyscale until hover.
      Phones have no hover, so they stayed grey. Full colour on touch screens.
   3. Every image is kept inside its container and never stretched.
   ===================================================================== */

.bl-card img, .bl-feature img, .au img, .bl-shell img { max-width: 100%; }
.bl-avatar, .bl-feature-avatar, .bl-byline-pic, .bl-authorpic,
.au-hero-photo img, .au-person-pic img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.bl-avatar { height: 24px; }
.bl-feature-avatar { height: 36px; }
.bl-byline-pic { height: 40px; }

@supports not (aspect-ratio: 1 / 1) {
  .bl-card-img { position: relative; height: 0; padding-top: 56.25%; }
  .bl-card-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .bl-feature-img { height: 0 !important; padding-top: 56.25%; }
  .bl-avatar, .bl-feature-avatar, .bl-byline-pic { height: 36px; }
  .bl-shell .bl-authorpic, .au-hero-photo img { height: 120px; }
}

@media (hover: none) {
  .au-person-pic img { filter: none; }
}

/* =====================================================================
   STICKY CONTENTS LIST, as on neilpatel.com
   Desktop: the contents list stays in view for the whole article, then
   scrolls away at the end to reveal the boxes below it.
   Mobile: a collapsible "On this page" at the top of the article.
   ===================================================================== */

@media (min-width: 981px) {
  /* The sidebar must be as tall as the article, or sticky stops early. */
  .bl-shell { align-items: stretch; }
  .bl-side { display: flex; flex-direction: column; }

  /* Fills all the sidebar height the boxes below do not need. */
  .bl-side-pin { flex: 1 1 auto; padding-top: 48px; }

  .bl-side-pin .bl-side-sticky {
    position: sticky;
    top: 84px;
    padding-top: 0;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
  }
  .bl-side-toc .a-toc ol { max-height: none; overflow: visible; }

  /* Categories, CTA and related sit after the article's reading area. */
  .bl-side-rest { display: grid; gap: 16px; padding-top: 24px; }

  .bl-toc-m { display: none; }
}

@media (max-width: 980px) {
  .bl-side-pin { display: none; }
  .bl-side-rest { display: grid; gap: 16px; }

  .bl-toc-m {
    margin: 0 0 26px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f7f9fc;
  }
  .bl-toc-m > summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 18px;
    display: flex; align-items: center; justify-content: space-between;
    font: 700 13px/1.2 Sora, system-ui, sans-serif;
    letter-spacing: .12em; text-transform: uppercase;
    color: #1a56c4;
  }
  .bl-toc-m > summary::-webkit-details-marker { display: none; }
  .bl-toc-m > summary::after {
    content: ""; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-3px); transition: transform .15s ease;
  }
  .bl-toc-m[open] > summary::after { transform: rotate(225deg) translateY(-3px); }
  /* The list inside reuses the sidebar TOC markup; drop its own box. */
  .bl-toc-m .a-toc { margin: 0; border: 0; background: transparent; padding: 0 18px 16px; }
  .bl-toc-m .a-toc-h { display: none; }
}