/* ============================================================================
   THE COGENT BLOG — front-end styles
   Everything is namespaced under .cb / .cb-* (and the .cms-* classes the
   content renderer emits, only inside .cb). Uses the tokens from
   /CSS/cogent-2026.css (:root). Mobile-first.
   Images are NEVER cropped: no object-fit: cover anywhere.
   ========================================================================== */

.cb {
  --cb-nav-h: 74px;
  --cb-gap: clamp(1rem, 2.4vw, 1.75rem);
  --cb-card-r: var(--r-lg, 20px);
  --cb-muted: var(--ink-3, #868CA3);
  position: relative;
  z-index: 1;
  color: var(--ink-2);
  overflow-x: clip;
}
.cb *, .cb *::before, .cb *::after { box-sizing: border-box; }

/* The site CSS puts `overflow-x: hidden` on html AND body. With both set, body
   becomes a non-scrolling scroll container and `position: sticky` (post sidebar /
   TOC) silently stops working. `clip` still prevents sideways scroll but does
   not create a scroll container. Blog pages only. */
html:has(body.cb-body), body.cb-body { overflow-x: clip !important; overflow-y: visible !important; }

.cb-container {
  width: 100%;
  max-width: var(--maxw, 1200px);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px) { .cb-container { padding-left: 24px; padding-right: 24px; } }
.cb-container--narrow { max-width: 920px; }

.cb-section { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.cb-section--tight { padding-top: 0; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* ---- shared atoms ------------------------------------------------------- */
.cb .cb-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink);
}
.cb .cb-eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--grad);
}
.cb .cb-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: var(--r-pill, 999px);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #FFD6E3; background: rgba(232, 81, 127, .12); border: 1px solid rgba(232, 81, 127, .28);
  text-decoration: none; line-height: 1.3; transition: background var(--t2) var(--ease), color var(--t2) var(--ease);
  position: relative; z-index: 2;
}
.cb .cb-pill:hover { background: rgba(232, 81, 127, .22); color: #fff; }
.cb .cb-pill--lg { font-size: .76rem; padding: .35rem .85rem; }

.cb .cb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .7rem 1.25rem; border-radius: var(--r-pill, 999px);
  font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), background var(--t2) var(--ease), border-color var(--t2) var(--ease), color var(--t2) var(--ease);
  white-space: nowrap;
}
.cb .cb-btn i { font-size: .9em; transition: transform var(--t2) var(--ease); }
.cb .cb-btn:hover i.fa-arrow-right { transform: translateX(3px); }
.cb .cb-btn--primary { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.cb .cb-btn--primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 20px 50px -16px rgba(232, 81, 127, .65); }
.cb .cb-btn--ghost { background: rgba(255, 255, 255, .04); color: var(--ink); border-color: var(--line-2); }
.cb .cb-btn--ghost:hover { color: var(--ink); background: rgba(255, 255, 255, .08); border-color: var(--line-3); }
.cb .cb-btn--sm { min-height: 40px; padding: .55rem 1rem; font-size: .88rem; }
.cb .cb-btn--block { width: 100%; }
.cb .cb-btn:focus-visible, .cb a:focus-visible, .cb button:focus-visible, .cb input:focus-visible, .cb select:focus-visible, .cb textarea:focus-visible {
  outline: 2px solid var(--pink); outline-offset: 3px;
}

.cb .cb-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--cb-muted); display: inline-block; flex: 0 0 auto; }
.cb .cb-link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; }
.cb .cb-link-arrow:hover { color: var(--pink); }
.cb .cb-link-arrow i { transition: transform var(--t2) var(--ease); }
.cb .cb-link-arrow:hover i { transform: translateX(3px); }

.cb .cb-avatar { border-radius: 50%; object-fit: contain; background: var(--surface-2); flex: 0 0 auto; display: inline-block; }
.cb .cb-avatar--initials {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--grad); color: #fff; font-weight: 700; font-size: .75rem;
}
.cb .cb-avatar--ring { padding: 2px; background: var(--grad); }

.cb .cb-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.cb .cb-section-head .cb-eyebrow { margin-bottom: .5rem; }
.cb h2.cb-section-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin: 0; }

/* ---- hero (listing) ----------------------------------------------------- */
.cb-hero {
  position: relative;
  padding: clamp(2.75rem, 7vw, 5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.cb-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 15% 0%, rgba(122, 108, 214, .16), transparent 65%),
    radial-gradient(45% 60% at 90% 10%, rgba(232, 81, 127, .10), transparent 70%);
}
.cb-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 50% 0%, #000 20%, transparent 75%);
}
.cb .cb-hero-inner { max-width: 760px; }
.cb .cb-hero-inner .cb-eyebrow { margin-bottom: 1rem; }
.cb h1.cb-hero-title {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -.035em;
  margin: 0 0 1rem; color: var(--ink) !important;
  background: linear-gradient(180deg, #fff 30%, #C9CCE0 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cb p.cb-hero-intro { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--ink-2); max-width: 620px; margin: 0 0 1.5rem !important; line-height: 1.65; }

/* search */
.cb .cb-search {
  position: relative; display: flex; align-items: center; gap: .5rem;
  max-width: 560px; padding: 6px 6px 6px 1rem;
  background: rgba(22, 25, 39, .8); border: 1px solid var(--line-2); border-radius: var(--r-pill, 999px);
  box-shadow: var(--sh-sm); transition: border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cb .cb-search:focus-within { border-color: rgba(232, 81, 127, .6); box-shadow: 0 0 0 4px rgba(232, 81, 127, .14); }
.cb .cb-search > i { color: var(--cb-muted); font-size: .95rem; }
.cb .cb-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; width: auto;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  color: var(--ink) !important; font-size: 1rem; padding: .55rem .25rem; outline: none;
}
.cb .cb-search input[type="search"]:focus-visible { outline: none; }
.cb .cb-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.cb .cb-search-btn {
  flex: 0 0 auto; border: 0; border-radius: var(--r-pill, 999px); padding: .62rem 1.15rem;
  background: var(--grad); color: #fff; font-weight: 600; font-size: .92rem; cursor: pointer;
}
.cb .cb-search-btn:hover { filter: brightness(1.08); }

/* chips */
.cb .cb-chips { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.cb .cb-chips ul {
  list-style: none; margin: 0; padding: 0 0 .35rem; display: flex; gap: .5rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.cb .cb-chips ul::-webkit-scrollbar { display: none; }
@media (min-width: 992px) {
  .cb .cb-chips ul { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
.cb .cb-chip {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .45rem .5rem .45rem .9rem; border-radius: var(--r-pill, 999px);
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
  font-size: .88rem; font-weight: 500; text-decoration: none; transition: all var(--t2) var(--ease);
}
.cb .cb-chip span {
  min-width: 26px; padding: .05rem .45rem; border-radius: var(--r-pill, 999px); text-align: center;
  background: rgba(255, 255, 255, .06); color: var(--cb-muted); font-size: .75rem; font-weight: 600;
}
.cb .cb-chip:hover { color: var(--ink); border-color: var(--line-3); background: var(--surface-2); }
.cb .cb-chip.is-active { color: #fff; border-color: transparent; background: var(--grad); box-shadow: var(--glow); }
.cb .cb-chip.is-active span { background: rgba(0, 0, 0, .22); color: #fff; }

/* ---- cards -------------------------------------------------------------- */
.cb-grid { display: grid; grid-template-columns: 1fr; gap: var(--cb-gap); }
@media (min-width: 640px) { .cb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Media box: 3:2 (dominant featured-image ratio). object-fit: contain so
   nothing is ever cropped; other ratios letterbox on a soft backdrop. */
.cb .cb-media {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: calc(var(--cb-card-r) - 6px);
  background:
    radial-gradient(80% 80% at 20% 0%, rgba(122, 108, 214, .18), transparent 70%),
    radial-gradient(70% 70% at 100% 100%, rgba(232, 81, 127, .12), transparent 70%),
    var(--surface-2);
}
.cb .cb-media img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: filter var(--t3) var(--ease);
}
.cb .cb-media--empty { display: flex; align-items: center; justify-content: center; color: var(--cb-muted); font-size: 2rem; }

.cb .cb-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 8px; border-radius: var(--cb-card-r);
  background: linear-gradient(180deg, rgba(29, 33, 50, .75), rgba(22, 25, 39, .9));
  border: 1px solid var(--line);
  transition: transform var(--t3) var(--ease), border-color var(--t3) var(--ease), box-shadow var(--t3) var(--ease);
}
.cb .cb-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(232, 81, 127, .08); }
.cb .cb-card:hover .cb-media img { filter: brightness(1.06) saturate(1.05); }
.cb .cb-card-media { display: block; border-radius: calc(var(--cb-card-r) - 6px); }
.cb .cb-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; padding: 1rem .75rem .6rem; flex: 1 1 auto; }
.cb .cb-card-title { font-size: 1.12rem !important; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; margin: 0; color: var(--ink); }
.cb .cb-card-title a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--pink), var(--pink)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--t3) var(--ease), color var(--t2) var(--ease); }
.cb .cb-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--cb-card-r); }
.cb .cb-card:hover .cb-card-title a { background-size: 100% 1.5px; }
.cb p.cb-card-excerpt {
  font-size: .93rem; line-height: 1.6; color: var(--ink-3); margin: 0 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cb .cb-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; font-size: .8rem; color: var(--cb-muted); }
.cb .cb-card-meta .cb-avatar { width: 28px; height: 28px; }
.cb .cb-card-author { color: var(--ink-2); font-weight: 600; }

/* featured card */
.cb .cb-featured {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: var(--cb-gap);
  padding: 8px; border-radius: calc(var(--cb-card-r) + 4px);
  background: linear-gradient(135deg, rgba(56, 48, 112, .35), rgba(22, 25, 39, .95) 45%), var(--surface);
  border: 1px solid var(--line-2); overflow: hidden;
  transition: border-color var(--t3) var(--ease), box-shadow var(--t3) var(--ease);
}
.cb .cb-featured::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, rgba(232, 81, 127, .5), transparent 40%, transparent 60%, rgba(242, 156, 72, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.cb .cb-featured:hover { box-shadow: 0 40px 80px -40px rgba(232, 81, 127, .35); }
.cb .cb-featured:hover .cb-media img { filter: brightness(1.06); }
.cb .cb-featured-media { display: block; }
.cb .cb-featured-body { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 1.25rem 1rem 1rem; }
.cb .cb-featured-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cb .cb-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.cb .cb-featured-title { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem) !important; font-weight: 800; line-height: 1.18; letter-spacing: -.03em; margin: 0; }
.cb .cb-featured-title a { color: var(--ink); text-decoration: none; }
.cb .cb-featured-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cb .cb-featured-title a:hover { color: #fff; }
.cb p.cb-featured-excerpt { color: var(--ink-2); font-size: 1rem; line-height: 1.65; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cb .cb-featured .cb-card-meta { margin-top: 0; padding-top: 0; }
.cb .cb-featured .cb-btn { position: relative; z-index: 2; margin-top: .25rem; }
@media (min-width: 992px) {
  .cb .cb-featured { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
  .cb .cb-featured-body { padding: 1.5rem 2rem 1.5rem 2.25rem; }
}

/* pagination */
.cb .cb-pagination { margin-top: clamp(2rem, 5vw, 3rem); }
.cb .cb-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem; }
.cb .cb-page {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-width: 44px; height: 44px; padding: 0 .85rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
  font-weight: 600; font-size: .92rem; text-decoration: none; transition: all var(--t2) var(--ease);
}
.cb a.cb-page:hover { color: var(--ink); border-color: var(--line-3); background: var(--surface-2); }
.cb .cb-page.is-active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--glow); }
.cb .cb-page--gap { background: transparent; border-color: transparent; min-width: 24px; padding: 0; }
@media (max-width: 479px) { .cb .cb-page--nav span { display: none; } }

/* empty / results */
.cb p.cb-result-count { color: var(--ink-3); margin: 0 0 1.5rem !important; }
.cb p.cb-result-count strong { color: var(--ink); }
.cb .cb-empty { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--line-2); border-radius: var(--cb-card-r); background: rgba(22, 25, 39, .5); }
.cb .cb-empty h2 { font-size: 1.4rem !important; margin: 1rem 0 .4rem; }
.cb .cb-empty p { margin: 0 0 1.5rem !important; }
.cb .cb-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--surface-2); color: var(--pink); font-size: 1.3rem; }

/* CTA band */
.cb .cb-cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-xl, 28px);
  background: linear-gradient(120deg, #2A2458 0%, #4B2350 45%, #5E2A3A 75%, #5A3B22 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: clamp(1.75rem, 4vw, 3rem);
  isolation: isolate;
}
.cb .cb-cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 120% at 100% 0%, rgba(242, 156, 72, .35), transparent 60%), radial-gradient(40% 100% at 0% 100%, rgba(122, 108, 214, .35), transparent 60%);
}
.cb .cb-cta-band-inner { display: flex; flex-direction: column; gap: 1.5rem; }
.cb .cb-cta-band .cb-eyebrow { color: #FFD1B0; }
.cb .cb-cta-band .cb-eyebrow::before { background: #FFD1B0; }
.cb p.cb-cta-band-title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: #fff; margin: .6rem 0 .5rem !important; }
.cb p.cb-cta-band-text { color: rgba(255, 255, 255, .78); max-width: 560px; margin: 0 !important; }
.cb .cb-cta-band-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cb .cb-cta-band .cb-btn--primary { background: #fff; color: #1B1730; box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .6); }
.cb .cb-cta-band .cb-btn--primary:hover { color: #1B1730; }
.cb .cb-cta-band .cb-btn--ghost { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; }
@media (min-width: 900px) {
  .cb .cb-cta-band-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .cb .cb-cta-band-actions { flex: 0 0 auto; }
}
@media (max-width: 479px) { .cb .cb-cta-band-actions .cb-btn { width: 100%; } }

/* ---- single post -------------------------------------------------------- */
.cb-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; pointer-events: none; }
.cb-progress-bar { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.cb-preview-bar { position: relative; z-index: 5; background: #3A2A10; color: #FFD9A8; text-align: center; font-size: .9rem; padding: .6rem 1rem; border-bottom: 1px solid rgba(242, 156, 72, .4); }

.cb .cb-post-hero { position: relative; padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2rem); text-align: left; isolation: isolate; }
.cb .cb-post-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 50% 0%, rgba(122, 108, 214, .14), transparent 70%); }
.cb .cb-breadcrumb { margin-bottom: 1.25rem; }
.cb .cb-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .84rem; color: var(--cb-muted); }
.cb .cb-breadcrumb li { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.cb .cb-breadcrumb li + li::before { content: "\203A"; color: var(--ink-3); opacity: .7; }
.cb .cb-breadcrumb a { color: var(--ink-2); text-decoration: none; }
.cb .cb-breadcrumb a:hover { color: var(--pink); }
.cb .cb-breadcrumb li[aria-current] span { color: var(--ink-3); display: inline-block; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.cb h1.cb-post-title {
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -.035em;
  color: var(--ink) !important; margin: 1rem 0 1.4rem;
}
.cb .cb-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.cb .cb-post-author { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.cb .cb-post-author .cb-avatar { width: 44px; height: 44px; }
.cb .cb-post-author > span { display: flex; flex-direction: column; line-height: 1.25; }
.cb .cb-post-author-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cb-muted); }
.cb .cb-post-author-name { font-weight: 700; color: var(--ink); }
.cb .cb-post-author:hover .cb-post-author-name { color: var(--pink); }
.cb .cb-post-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .88rem; color: var(--ink-3); }
.cb .cb-post-facts li { display: inline-flex; align-items: center; gap: .45rem; }
.cb .cb-post-facts i { color: var(--pink); font-size: .85em; }

/* cover: natural aspect ratio, never cropped */
.cb .cb-post-cover { max-width: 1000px; margin: 0 auto clamp(2rem, 5vw, 3.25rem); padding: 0; }
.cb .cb-post-cover img {
  display: block; width: 100%; height: auto; border-radius: var(--r-lg, 20px);
  border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); background: var(--surface-2);
}

/* layout: mobile = TOC, article, CTA (stacked) */
.cb .cb-post-layout { display: flex; flex-direction: column; gap: 1.5rem; }
.cb .cb-post-aside { display: contents; }
.cb .cb-toc { order: 1; }
.cb .cb-post-main { order: 2; min-width: 0; }
.cb .cb-aside-cta { order: 3; }

@media (min-width: 1024px) {
  .cb .cb-post-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .cb .cb-post-aside {
    display: flex; flex-direction: column; gap: 1.25rem;
    position: sticky; top: calc(var(--cb-nav-h) + 20px);
    max-height: calc(100vh - var(--cb-nav-h) - 36px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; padding-bottom: 4px;
  }
  /* never let flex squeeze the TOC/CTA (it collapsed the TOC to 2px on laptops) */
  .cb .cb-post-aside > * { flex-shrink: 0; }
  .cb .cb-post-aside::-webkit-scrollbar { width: 6px; }
  .cb .cb-post-aside::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; }
  .cb .cb-post-main { max-width: 780px; }
}

/* TOC */
.cb .cb-toc { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg, 20px); overflow: hidden; }
.cb .cb-toc-toggle {
  width: 100%; display: flex; align-items: center; gap: .6rem; padding: .95rem 1.1rem;
  background: transparent; border: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit;
}
.cb .cb-toc-title { flex: 1 1 auto; font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: .55rem; }
.cb .cb-toc-title i { color: var(--pink); }
.cb .cb-toc-pct { font-size: .75rem; font-weight: 600; color: var(--cb-muted); font-variant-numeric: tabular-nums; }
.cb .cb-toc-chevron { color: var(--cb-muted); font-size: .8rem; transition: transform var(--t2) var(--ease); }
.cb .cb-toc-toggle[aria-expanded="true"] .cb-toc-chevron { transform: rotate(180deg); }
.cb .cb-toc-progress { height: 2px; background: var(--line); margin: 0 1.1rem; border-radius: 2px; overflow: hidden; }
.cb .cb-toc-progress span { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.cb ol.cb-toc-list { list-style: none; margin: 0; padding: .5rem .5rem .75rem; display: none; counter-reset: none; }
.cb .cb-toc.is-open ol.cb-toc-list { display: block; }
.cb .cb-toc-list a {
  position: relative; display: flex; gap: .65rem; align-items: baseline; padding: .5rem .65rem; border-radius: 10px;
  color: var(--ink-3); font-size: .875rem; line-height: 1.45; text-decoration: none; transition: color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.cb .cb-toc-list a:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.cb .cb-toc-num { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--ink-3); opacity: .7; font-variant-numeric: tabular-nums; min-width: 1.4rem; }
.cb .cb-toc-list a.is-active { color: var(--ink); background: rgba(232, 81, 127, .1); }
.cb .cb-toc-list a.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--grad); }
.cb .cb-toc-list a.is-active .cb-toc-num { color: var(--pink); opacity: 1; }
@media (min-width: 1024px) {
  .cb .cb-toc-toggle { cursor: default; pointer-events: none; }
  .cb .cb-toc-chevron { display: none; }
  /* TOC list scrolls on its own; leaves room for the compact CTA below on short screens */
  .cb ol.cb-toc-list { display: block; max-height: max(150px, calc(100vh - var(--cb-nav-h) - 480px)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
}

/* enquiry card */
.cb .cb-enquiry {
  position: relative; border-radius: var(--r-lg, 20px); padding: 1.25rem; overflow: hidden;
  background: linear-gradient(160deg, rgba(56, 48, 112, .45), rgba(22, 25, 39, .96) 55%), var(--surface);
  border: 1px solid var(--line-2);
}
.cb .cb-enquiry::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); }
.cb .cb-enquiry-head { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.cb .cb-enquiry-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; box-shadow: var(--glow); }
.cb p.cb-enquiry-title { font-weight: 800; color: var(--ink); font-size: 1.05rem; line-height: 1.25; margin: 0 !important; }
.cb p.cb-enquiry-sub { font-size: .82rem; color: var(--ink-3); margin: .15rem 0 0 !important; line-height: 1.4; }
.cb .cb-enquiry-form { display: flex; flex-direction: column; gap: .7rem; }
.cb .cb-field { display: flex; flex-direction: column; gap: .3rem; }
.cb .cb-field label { font-size: .78rem; font-weight: 600; color: var(--ink-2); margin: 0; }
.cb .cb-opt { font-weight: 400; color: var(--cb-muted); }
.cb .cb-enquiry input, .cb .cb-enquiry select, .cb .cb-enquiry textarea {
  width: 100%; font-size: .92rem !important; padding: .62rem .8rem !important; line-height: 1.4;
  background: rgba(12, 14, 22, .6) !important; border: 1px solid var(--line-2) !important; border-radius: 10px !important; color: var(--ink) !important;
  transition: border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.cb .cb-enquiry select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23868CA3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .8rem center !important; padding-right: 2rem !important; }
.cb .cb-enquiry select:invalid { color: var(--cb-muted) !important; }
.cb .cb-enquiry select option { background: var(--surface); color: var(--ink); }
.cb .cb-enquiry textarea { resize: vertical; min-height: 76px; }
.cb .cb-enquiry input:focus, .cb .cb-enquiry select:focus, .cb .cb-enquiry textarea:focus { outline: none; border-color: var(--pink) !important; box-shadow: 0 0 0 3px rgba(232, 81, 127, .2) !important; }
.cb .cb-field.has-error input, .cb .cb-field.has-error select, .cb .cb-field.has-error textarea { border-color: #FF6B81 !important; }
.cb .cb-field-error { font-size: .75rem; color: #FF8A9B; min-height: 0; }
.cb .cb-field-error:empty { display: none; }
.cb p.cb-form-status { font-size: .84rem; margin: 0 !important; }
.cb p.cb-form-status:empty { display: none; }
.cb p.cb-form-status.is-error { color: #FF8A9B; }
.cb p.cb-form-status.is-ok { color: #7FE0B0; }
.cb .cb-enquiry .cb-btn { margin-top: .2rem; }
.cb .cb-enquiry .cb-btn[disabled] { opacity: .7; cursor: progress; }
.cb p.cb-enquiry-note { font-size: .74rem; color: var(--cb-muted); margin: 0 !important; text-align: center; }
.cb p.cb-enquiry-note i { margin-right: .25rem; }

/* ---- article typography ------------------------------------------------- */
.cb .cb-prose {
  --prose-gap: 1.25em;
  font-size: clamp(1.02rem, .98rem + .2vw, 1.1rem); line-height: 1.8; color: #C9CCDB;
  overflow-wrap: break-word; word-wrap: break-word;
}
.cb .cb-prose > :first-child { margin-top: 0 !important; }
.cb .cb-prose p { margin: 0 0 var(--prose-gap) !important; color: inherit; }
.cb .cb-prose h2, .cb .cb-prose h3, .cb .cb-prose h4, .cb .cb-prose h5, .cb .cb-prose h6 {
  color: var(--ink); scroll-margin-top: calc(var(--cb-nav-h) + 24px); text-wrap: pretty;
}
.cb .cb-prose h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem); font-weight: 800; line-height: 1.22; letter-spacing: -.028em; margin: 2.4em 0 .8em; }
.cb .cb-prose h3 { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.4rem); font-weight: 700; line-height: 1.3; letter-spacing: -.018em; margin: 1.9em 0 .6em; }
.cb .cb-prose h4 { font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin: 1.6em 0 .5em; }
.cb .cb-prose h5, .cb .cb-prose h6 { font-size: 1rem; font-weight: 700; margin: 1.4em 0 .5em; }
.cb .cb-prose h2 + h3 { margin-top: 1em; }
.cb .cb-prose strong, .cb .cb-prose b { color: var(--ink); font-weight: 700; }
.cb .cb-prose em { color: #DADCE8; }
.cb .cb-prose a {
  color: #FF7BA3; text-decoration: underline; text-decoration-color: rgba(232, 81, 127, .45);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--t2) var(--ease), text-decoration-color var(--t2) var(--ease);
}
.cb .cb-prose a:hover { color: var(--orange); text-decoration-color: var(--orange); }
.cb .cb-prose mark { background: rgba(242, 156, 72, .25); color: var(--ink); padding: 0 .2em; border-radius: 4px; }

/* lists: custom markers (ol keeps native numbering so start="" works) */
.cb .cb-prose ul, .cb .cb-prose ol { margin: 0 0 var(--prose-gap); padding-left: 1.6em; }
.cb .cb-prose li { margin: .45em 0; padding-left: .25em; }
.cb .cb-prose li > p { margin-bottom: .5em !important; }
.cb .cb-prose ul { list-style: none; padding-left: 1.5em; }
.cb .cb-prose ul > li { position: relative; }
.cb .cb-prose ul > li::before {
  content: ""; position: absolute; left: -1.15em; top: .72em; width: 7px; height: 7px; border-radius: 2px;
  background: var(--grad); transform: rotate(45deg);
}
.cb .cb-prose ul ul > li::before { background: transparent; border: 1.5px solid var(--pink); }
.cb .cb-prose ol > li::marker { color: var(--pink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cb .cb-prose li > ul, .cb .cb-prose li > ol { margin: .4em 0 .2em; }

/* blockquote: gradient border + quote icon; also fine for short "Note:" quotes */
.cb .cb-prose blockquote {
  position: relative; margin: 2em 0; padding: 1.4em 1.5em 1.4em 3.6em;
  background: linear-gradient(135deg, rgba(122, 108, 214, .14), rgba(232, 81, 127, .07) 60%, rgba(22, 25, 39, .6));
  border: 1px solid var(--line-2); border-left: 0; border-radius: 16px;
  font-style: italic; font-size: 1.06em; line-height: 1.7; color: var(--ink);
  overflow: hidden;
}
.cb .cb-prose blockquote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #7A6CD6, #E34576, #F29C48);
}
.cb .cb-prose blockquote::after {
  content: "\201C"; position: absolute; left: .35em; top: .05em; font-family: Georgia, "Times New Roman", serif !important;
  font-size: 3.6em; line-height: 1; font-style: normal; font-weight: 700;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: .9;
}
.cb .cb-prose blockquote p { margin: 0 0 .6em !important; color: inherit; }
.cb .cb-prose blockquote p:last-child { margin-bottom: 0 !important; }
.cb .cb-prose blockquote strong { color: #fff; }
.cb .cb-prose blockquote cite { display: block; margin-top: .75em; font-size: .85em; font-style: normal; color: var(--ink-3); }
.cb .cb-prose blockquote cite::before { content: "\2014\00a0"; }

/* images & figures — never cropped */
.cb .cb-prose img { display: block; max-width: 100%; height: auto; border-radius: 14px; margin: 0 auto; background: var(--surface-2); }
.cb .cb-prose figure { margin: 2em 0; max-width: 100%; }
.cb .cb-prose figure img { margin: 0 auto; }
.cb .cb-prose figcaption { margin-top: .7em; font-size: .85rem !important; line-height: 1.5; color: var(--ink-3) !important; font-weight: 400 !important; font-style: normal; text-align: center; }
.cb .cb-prose p.cms-img-p { margin: 2em 0 !important; }
.cb .cb-prose .aligncenter, .cb .cb-prose img.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.cb .cb-prose figure.aligncenter { display: table; }
.cb .cb-prose figure.aligncenter figcaption { display: table-caption; caption-side: bottom; }
.cb .cb-prose .alignwide, .cb .cb-prose .alignfull { width: 100%; }
@media (min-width: 640px) {
  .cb .cb-prose .alignleft { float: left; max-width: 50%; margin: .3em 1.5em 1em 0; }
  .cb .cb-prose .alignright { float: right; max-width: 50%; margin: .3em 0 1em 1.5em; }
}
.cb .cb-prose::after { content: ""; display: table; clear: both; }

/* tables */
.cb .cb-prose .cms-table-wrap {
  margin: 2em 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface);
  scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent;
}
.cb .cb-prose table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: .93rem; line-height: 1.55; margin: 0; color: var(--ink-2); }
.cb .cb-prose caption { caption-side: top; padding: .8rem 1rem; text-align: left; color: var(--ink-3); font-size: .85rem; }
/* full cell grid */
.cb .cb-prose th, .cb .cb-prose td {
  padding: .85rem 1rem; text-align: left; vertical-align: top;
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.cb .cb-prose tr > :last-child { border-right: 0; }
.cb .cb-prose tbody tr:last-child > *, .cb .cb-prose table > tr:last-child > * { border-bottom: 0; }
/* header row: real <thead>/<th>, or the first row of tables pasted without one */
.cb .cb-prose thead th, .cb .cb-prose thead td,
.cb .cb-prose tr:first-child > th,
.cb .cb-prose table:not(:has(thead)) tr:first-child > td {
  background: linear-gradient(180deg, rgba(232, 81, 127, .16), rgba(122, 108, 214, .12));
  color: var(--ink); font-weight: 700; font-size: .86rem; letter-spacing: .01em;
  border-bottom: 1px solid rgba(232, 81, 127, .35);
}
.cb .cb-prose tbody tr:nth-child(even) > td { background: rgba(255, 255, 255, .03); }
.cb .cb-prose table:not(:has(thead)) tbody tr:nth-child(even) > td { background: transparent; }
.cb .cb-prose table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) > td { background: rgba(255, 255, 255, .03); }
.cb .cb-prose tbody tr:not(:first-child):hover > td { background: rgba(232, 81, 127, .06); }
.cb .cb-prose td:first-child { color: var(--ink); font-weight: 600; }
.cb .cb-prose td p, .cb .cb-prose th p { margin: 0 !important; }

/* embeds */
.cb .cb-prose .cms-embed { position: relative; margin: 2em 0; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line-2); }
.cb .cb-prose .cms-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cb .cb-prose video { width: 100%; height: auto; border-radius: 14px; }

/* code */
.cb .cb-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: .88em; padding: .15em .4em; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: #FFC2D4; }
.cb .cb-prose pre { margin: 1.8em 0; padding: 1.1em 1.25em; overflow-x: auto; border-radius: 14px; background: #0A0B12; border: 1px solid var(--line-2); font-size: .88rem; line-height: 1.65; }
.cb .cb-prose pre code { padding: 0; border: 0; background: none; color: #E6E8F2; font-size: inherit; }
.cb .cb-prose hr { margin: 2.5em auto; border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-3), transparent); opacity: 1; }
.cb .cb-prose dl dt { color: var(--ink); font-weight: 700; margin-top: 1em; }
.cb .cb-prose dl dd { margin: .3em 0 0 1em; }
.cb .cb-prose--compact { font-size: 1rem; line-height: 1.7; }
.cb .cb-prose--compact ul { margin-bottom: 0; }

/* ---- FAQ accordion (field FAQs + in-content FAQ sections) --------------- */
.cb .cms-faq-block { margin-top: 3em; }
.cb .cb-prose h2.cms-faq-heading { margin-top: 0; }
.cb .cms-faq { display: flex; flex-direction: column; gap: .7rem; margin: 1.2em 0 2em; }
.cb .cms-faq-item {
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface);
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.cb .cms-faq-item:hover { border-color: var(--line-3); }
.cb .cms-faq-item.is-open { border-color: rgba(232, 81, 127, .35); background: linear-gradient(180deg, rgba(232, 81, 127, .06), transparent 70%), var(--surface); }
.cb .cms-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; background: transparent; border: 0; border-radius: 14px; text-align: left; cursor: pointer; color: var(--ink); font: inherit;
}
.cb .cb-prose .cms-faq-q h3, .cb .cb-prose .cms-faq-q h4, .cb .cms-faq-q h3, .cb .cms-faq-q h4 {
  margin: 0 !important; font-size: 1.02rem !important; font-weight: 650; line-height: 1.45; letter-spacing: -.01em; color: var(--ink);
}
.cb .cms-faq-icon {
  position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-2); transition: background var(--t2) var(--ease), transform var(--t3) var(--ease);
}
.cb .cms-faq-icon::before, .cb .cms-faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px;
  background: var(--ink-2); transition: transform var(--t3) var(--ease), background var(--t2) var(--ease);
}
.cb .cms-faq-icon::after { transform: rotate(90deg); }
.cb .cms-faq-item.is-open .cms-faq-icon { background: var(--grad); border-color: transparent; transform: rotate(180deg); }
.cb .cms-faq-item.is-open .cms-faq-icon::before, .cb .cms-faq-item.is-open .cms-faq-icon::after { background: #fff; }
.cb .cms-faq-item.is-open .cms-faq-icon::after { transform: rotate(0deg); }
.cb .cms-faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t3) var(--ease); }
.cb .cms-faq-item.is-open .cms-faq-a { max-height: none; }
.cb .cms-faq-a-inner { padding: 0 1.15rem 1.1rem; color: var(--ink-2); font-size: .97rem; line-height: 1.75; }
.cb .cms-faq-a-inner > :last-child { margin-bottom: 0 !important; }
.cb .cms-faq-a-inner p { margin: 0 0 .75em !important; }

/* ---- tags / share / author box ----------------------------------------- */
.cb .cb-post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.cb .cb-post-tags-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); display: inline-flex; align-items: center; gap: .4rem; }
.cb .cb-post-tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.cb .cb-post-tags a { display: inline-block; padding: .32rem .75rem; border-radius: var(--r-pill, 999px); background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); font-size: .82rem; text-decoration: none; transition: all var(--t2) var(--ease); }
.cb .cb-post-tags a:hover { color: var(--ink); border-color: rgba(232, 81, 127, .5); background: rgba(232, 81, 127, .08); }

.cb .cb-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding: 1rem 1.15rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.cb .cb-share-label { font-weight: 700; color: var(--ink); font-size: .95rem; }
.cb .cb-share-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.cb .cb-share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 42px; height: 42px; padding: 0 .8rem;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2);
  font-size: .95rem; text-decoration: none; cursor: pointer; transition: all var(--t2) var(--ease);
}
.cb .cb-share-btn:hover { color: #fff; background: var(--grad); border-color: transparent; transform: translateY(-2px); }
.cb .cb-copy-label { font-size: .82rem; font-weight: 600; }
.cb .cb-share-copy.is-copied { color: #7FE0B0; border-color: rgba(127, 224, 176, .4); }

.cb .cb-author-box {
  position: relative; display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-xl, 28px); background: linear-gradient(140deg, rgba(56, 48, 112, .4), rgba(22, 25, 39, .95) 55%), var(--surface);
  border: 1px solid var(--line-2); overflow: hidden;
}
.cb .cb-author-box::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 81, 127, .18), transparent 70%); pointer-events: none; }
.cb .cb-author-box-avatar { flex: 0 0 auto; }
.cb .cb-author-box-avatar .cb-avatar { width: 88px; height: 88px; padding: 3px; }
.cb .cb-author-box-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.cb .cb-author-box-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--pink); font-weight: 700; }
.cb p.cb-author-box-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 0 !important; line-height: 1.2; }
.cb p.cb-author-box-name a { color: var(--ink); text-decoration: none; }
.cb p.cb-author-box-name a:hover { color: var(--pink); }
.cb p.cb-author-box-job { color: var(--ink-2); font-weight: 500; font-size: .92rem; margin: 0 !important; }
.cb p.cb-author-box-bio { color: var(--ink-3); font-size: .95rem; line-height: 1.7; margin: .35rem 0 .3rem !important; }
.cb .cb-author-box .cb-btn { margin-top: .6rem; }
@media (min-width: 640px) { .cb .cb-author-box { flex-direction: row; align-items: flex-start; } }

.cb ul.cb-tags-inline { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cb ul.cb-tags-inline li { padding: .28rem .7rem; border-radius: var(--r-pill, 999px); background: rgba(122, 108, 214, .14); border: 1px solid rgba(122, 108, 214, .3); color: #D5D0FF; font-size: .78rem; font-weight: 600; }
.cb ul.cb-tags-inline--lg li { font-size: .85rem; padding: .4rem .9rem; }

.cb-related { border-top: 1px solid var(--line); margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ---- author page -------------------------------------------------------- */
.cb .cb-profile { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem); isolation: isolate; }
.cb .cb-profile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 80% at 20% 10%, rgba(122, 108, 214, .2), transparent 65%), radial-gradient(40% 60% at 85% 20%, rgba(232, 81, 127, .12), transparent 70%);
}
.cb .cb-profile-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--r-xl, 28px);
  background: linear-gradient(150deg, rgba(29, 33, 50, .85), rgba(22, 25, 39, .95)); border: 1px solid var(--line-2);
  box-shadow: var(--sh);
}
.cb .cb-profile-avatar {
  position: relative; flex: 0 0 auto; width: 168px; height: 168px; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 200deg, #383070, #E34576, #F29C48, #7A6CD6, #383070);
  box-shadow: 0 20px 60px -20px rgba(232, 81, 127, .55);
}
.cb .cb-profile-avatar::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .14); }
.cb .cb-profile-avatar img, .cb .cb-profile-avatar .cb-avatar--initials {
  display: flex; width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--bg); background: var(--surface-2); object-fit: contain; font-size: 2.6rem;
}
.cb .cb-profile-info { display: flex; flex-direction: column; align-items: center; gap: .55rem; max-width: 720px; }
.cb h1.cb-profile-name { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: .2rem 0 0; color: var(--ink) !important; }
.cb p.cb-profile-job { font-size: 1.05rem; font-weight: 600; margin: 0 !important; background: linear-gradient(95deg, #FF6F9A, #F7A23B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--pink); }
.cb p.cb-profile-job span { -webkit-text-fill-color: var(--ink-3); font-weight: 500; }
.cb p.cb-profile-bio { color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; margin: .4rem 0 0 !important; }
.cb .cb-socials { display: flex; gap: .5rem; margin-top: .6rem; }
.cb .cb-social {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); text-decoration: none; transition: all var(--t2) var(--ease);
}
.cb .cb-social:hover { color: #fff; background: var(--grad); border-color: transparent; transform: translateY(-2px); }
@media (min-width: 900px) {
  .cb .cb-profile-card { flex-direction: row; align-items: center; text-align: left; gap: 2.5rem; }
  .cb .cb-profile-info { align-items: flex-start; }
}

.cb ul.cb-stats { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; }
.cb .cb-stat { position: relative; padding: 1.25rem 1.35rem; border-radius: var(--r-lg, 20px); background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; }
.cb .cb-stat::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--grad); opacity: .8; }
.cb .cb-stat-num { display: block; font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb .cb-stat-label { display: block; margin-top: .25rem; font-size: .85rem; color: var(--ink-3); }

.cb .cb-about { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--r-xl, 28px); background: var(--surface); border: 1px solid var(--line-2); }
.cb .cb-about-head .cb-eyebrow { margin-bottom: .5rem; }
.cb .cb-about-body { display: flex; flex-direction: column; gap: 1.5rem; }
.cb .cb-about-sub { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: .4rem; }
@media (min-width: 900px) { .cb .cb-about { grid-template-columns: 280px minmax(0, 1fr); gap: 3rem; } }

/* ---- 404 ---------------------------------------------------------------- */
.cb .cb-hero--404 { text-align: left; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.cb .cb-404-code {
  display: block; font-size: clamp(5rem, 3rem + 10vw, 9rem); font-weight: 800; line-height: .9; letter-spacing: -.06em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem;
}
.cb .cb-404-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---- motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cb *, .cb *::before, .cb *::after { transition: none !important; animation: none !important; }
  .cb .cb-card:hover { transform: none; }
}

/* ---- print -------------------------------------------------------------- */
@media print {
  .cb-progress, .cb .cb-post-aside, .cb .cb-share, .cb .cb-related, .cb .cb-cta-band, .cb .cb-chips, .cb .cb-search { display: none !important; }
  .cb .cb-prose { color: #000; }
}

/* ---- neutralise legacy style.css `nav {bg}` / `nav a {color:#fff!important; 18px}` inside the blog */
.cb nav.cb-breadcrumb, .cb nav.cb-chips, .cb nav.cb-pagination { background: transparent !important; }
.cb nav.cb-toc { background: var(--surface) !important; }
.cb nav a { font-size: inherit; font-weight: inherit; line-height: inherit; }
.cb .cb-breadcrumb a { color: var(--ink-2) !important; font-weight: 500; }
.cb .cb-breadcrumb a:hover { color: var(--pink) !important; }
.cb .cb-chip { color: var(--ink-2) !important; font-size: .88rem; font-weight: 500; line-height: 1.4; }
.cb .cb-chip:hover { color: var(--ink) !important; }
.cb .cb-chip.is-active { color: #fff !important; }
.cb a.cb-page { color: var(--ink-2) !important; font-size: .92rem; font-weight: 600; }
.cb a.cb-page:hover { color: var(--ink) !important; }
.cb .cb-toc-list a { color: var(--ink-3) !important; font-size: .875rem; font-weight: 400; line-height: 1.45; }
.cb .cb-toc-list a:hover, .cb .cb-toc-list a.is-active { color: var(--ink) !important; }
.cb .cb-toc-list a.is-active { font-weight: 500; }