/* ============================================================
   OSS Blog Styles
   Poppins font, brand colors: #7052fb (primary), #2b2350 (dark),
   #f97bc5 (pink), #797687 (body text)
   ============================================================ */

/* === READING PROGRESS BAR === */
.blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #7052fb, #f97bc5);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* === PAGE WRAPPER === */
.blog-page {
  background: #fff;
  min-height: 100vh;
}

/* === BLOG POST LAYOUT (breakout grid) === */
.blog-post-wrap {
  display: grid;
  grid-template-columns: 1fr min(720px, calc(100% - 48px)) 1fr;
  padding-top: 100px;
  padding-bottom: 80px;
}

.blog-post-wrap > * {
  grid-column: 2;
}

.blog-post-wrap > .block-breakout {
  grid-column: 1 / -1;
  width: 100%;
}

.blog-post-wrap > .block-wide {
  grid-column: 1 / -1;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

/* === BLOG LAYOUT WITH TOC === */
.blog-with-toc {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 24px 80px;
  align-items: start;
}

/* === POST HEADER === */
.post-header {
  margin-bottom: 48px;
}

.post-breadcrumb {
  font-size: 13px;
  color: #797687;
  margin-bottom: 16px;
}

.post-breadcrumb a {
  color: #7052fb;
  text-decoration: none;
}

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

.post-breadcrumb span { margin: 0 6px; color: #ccc; }

.post-header h1 {
  font-size: 38px;
  font-weight: 700;
  color: #2b2350;
  line-height: 1.25;
  margin: 0 0 20px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: #797687;
  flex-wrap: wrap;
}

/* Shown only on posts carrying a `last_updated` frontmatter key. */
.post-updated {
  font-style: italic;
  color: #8d8a9b;
}

.post-meta .tag {
  background: #f0edff;
  color: #7052fb;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

/* === TYPOGRAPHY === */
.post-body h2 {
  font-size: 26px;
  font-weight: 700;
  color: #2b2350;
  margin: 52px 0 16px;
  line-height: 1.3;
  scroll-margin-top: 80px;
}

.post-body h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2b2350;
  margin: 36px 0 12px;
  scroll-margin-top: 80px;
}

.post-body h4 {
  font-size: 17px;
  font-weight: 600;
  color: #2b2350;
  margin: 28px 0 8px;
}

.post-body p {
  font-size: 17px;
  line-height: 1.8;
  color: #4a4660;
  margin: 0 0 20px;
}

.post-body ul,
.post-body ol {
  padding-left: 28px;
  margin: 0 0 20px;
}

.post-body li {
  font-size: 17px;
  line-height: 1.75;
  color: #4a4660;
  margin-bottom: 8px;
}

.post-body strong { color: #2b2350; }

.post-body em { font-style: italic; color: #5a5875; }

.post-body a { color: #7052fb; text-decoration: none; border-bottom: 1px solid #d6ccff; }
.post-body a:hover { color: #5535e0; border-bottom-color: #7052fb; }

.post-body blockquote {
  border-left: 3px solid #7052fb;
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  color: #5a5875;
  font-style: italic;
}

/* ── Comparison tables ── */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 0.93rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(112, 82, 251, 0.10);
}
.post-body table thead tr {
  background: #7052fb;
  color: #fff;
}
.post-body table thead th {
  padding: 13px 16px;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.post-body table tbody tr:nth-child(odd) {
  background: #faf9ff;
}
.post-body table tbody tr:nth-child(even) {
  background: #f3f0ff;
}
.post-body table tbody tr:hover {
  background: #ece7ff;
}
.post-body table td {
  padding: 11px 16px;
  border-bottom: 1px solid #e8e3ff;
  color: #2b2350;
  vertical-align: middle;
  text-align: center;
}
.post-body table tbody tr:last-child td {
  border-bottom: none;
}
.post-body table td:first-child {
  font-weight: 500;
  color: #2b2350;
  text-align: left;
}
@media (max-width: 680px) {
  .post-body table { font-size: 0.82rem; }
  .post-body table th,
  .post-body table td { padding: 9px 10px; }
}

.post-body code {
  background: #f0edff;
  color: #5535e0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  font-family: 'SFMono-Regular', Consolas, monospace;
}

.post-body hr {
  border: none;
  margin: 0;
  height: 0;
}

/* === BLOCK: CALLOUT === */
.block-callout {
  background: linear-gradient(135deg, #f0edff 0%, #fce8f5 100%);
  border-left: 4px solid #7052fb;
  border-radius: 0 12px 12px 0;
  padding: 28px 32px;
  margin: 40px 0;
  font-size: 22px;
  font-weight: 600;
  color: #2b2350;
  line-height: 1.4;
}

/* === BLOCK: PULL QUOTE === */
.block-quote {
  padding: 32px 40px;
  margin: 40px 0;
  position: relative;
}

.block-quote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: -10px;
  font-size: 80px;
  color: #e0d9ff;
  font-family: Georgia, serif;
  line-height: 1;
}

.block-quote .quote-text {
  font-size: 22px;
  font-weight: 500;
  color: #2b2350;
  line-height: 1.5;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.block-quote .quote-attr {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: #7052fb;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === BLOCK: STAT === */
.block-stat {
  text-align: center;
  padding: 48px 24px;
  margin: 40px 0;
}

.block-stat .stat-number {
  font-size: 80px;
  font-weight: 800;
  color: #7052fb;
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}

.block-stat .stat-label {
  display: block;
  font-size: 18px;
  color: #797687;
  margin-top: 8px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

/* === BLOCK: CONCEPT === */
.block-concept {
  border: 1.5px solid #d6ccff;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 40px 0;
  background: #faf9ff;
}

.block-concept .concept-term {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #7052fb;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.block-concept .concept-def {
  font-size: 16px;
  color: #4a4660;
  line-height: 1.7;
  margin: 0;
}

/* === BLOCK: TABS === */
.block-tabs {
  margin: 40px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #e8e4f8;
}

.block-tabs input[type="radio"] { display: none; }

.tabs-nav {
  display: flex;
  background: #f5f3ff;
  border-bottom: 1.5px solid #e8e4f8;
}

.tabs-nav label {
  flex: 1;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #797687;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;
}

.block-tabs input[type="radio"]:checked + label {
  color: #7052fb;
  border-bottom-color: #7052fb;
  background: #fff;
}

.tab-panel { display: none; padding: 24px 28px; }

.block-tabs input#tab1:checked ~ .tabs-content .tab-panel:nth-child(1),
.block-tabs input#tab2:checked ~ .tabs-content .tab-panel:nth-child(2),
.block-tabs input#tab3:checked ~ .tabs-content .tab-panel:nth-child(3) {
  display: block;
}

.tab-panel p {
  font-size: 16px;
  color: #4a4660;
  line-height: 1.75;
  margin: 0 0 12px;
}

/* === BLOCK: FAQ === */
.block-faq {
  margin: 56px 0 40px;
}

.block-faq h3 {
  font-size: 22px;
  font-weight: 700;
  color: #2b2350;
  margin: 0 0 24px;
}

.faq-item {
  border-bottom: 1px solid #eee;
}

.faq-item summary {
  padding: 18px 8px 18px 0;
  font-size: 16px;
  font-weight: 600;
  color: #2b2350;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  gap: 12px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 22px;
  color: #7052fb;
  flex-shrink: 0;
  transition: transform 0.2s;
  line-height: 1;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 8px 20px;
  font-size: 15px;
  line-height: 1.75;
  color: #4a4660;
}

/* === BLOCK: RELATED POSTS === */
.block-related {
  background: #f8f8fc;
  border-radius: 12px;
  padding: 32px;
  margin: 48px 0;
}

.block-related h4 {
  font-size: 13px;
  font-weight: 700;
  color: #797687;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-list li {
  margin-bottom: 10px;
}

.related-list a {
  font-size: 15px;
  color: #2b2350;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.related-list a::before {
  content: '→';
  color: #7052fb;
  font-weight: 700;
  flex-shrink: 0;
}

.related-list a:hover { color: #7052fb; }

/* Unwritten related post — looks like a link, non-clickable, tooltip on hover */
.related-list .related-soon {
  font-size: 15px;
  color: #2b2350;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: not-allowed;
  position: relative;
  text-decoration: underline;
  text-decoration-color: rgba(112,82,251,0.4);
  text-underline-offset: 3px;
}
.related-list .related-soon::before {
  content: '→';
  color: #7052fb;
  font-weight: 700;
  flex-shrink: 0;
}
.related-list .related-soon:hover {
  color: #7052fb;
}
/* "Coming soon" tooltip */
.related-list .related-soon:hover::after {
  content: attr(data-soon);
  position: absolute;
  left: 20px;
  bottom: calc(100% + 4px);
  background: #2b2350;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  text-decoration: none;
}

/* Inline body links that point to unwritten posts */
.blog-post-content .body-link-soon {
  color: #7052fb;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: not-allowed;
  position: relative;
}
.blog-post-content .body-link-soon:hover::after {
  content: attr(data-soon);
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  background: #2b2350;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}

/* === BLOCK: CTA === */
.block-cta {
  background: linear-gradient(135deg, #7052fb 0%, #a070ff 100%);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  margin: 48px 0 0;
  color: #fff;
}

.block-cta h3 {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}

.block-cta p {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 28px;
  line-height: 1.6;
}

.block-cta .cta-btn {
  display: inline-block;
  background: #fff;
  color: #7052fb;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.block-cta .cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  color: #7052fb;
}

.block-cta .cta-sub {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

/* === BLOCK: PARALLAX === */
.block-parallax {
  height: 380px;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 48px 0;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.block-parallax.has-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(43,35,80,0.35);
}

/* === BLOCK: INLINE PARALLAX PHOTO === */
.block-photo {
  position: relative;
  height: 28vh;
  min-height: 200px;
  max-height: 340px;
  overflow: hidden;
  border-radius: 14px;
  margin: 44px 0;
}

.block-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  will-change: background-position;
}

.block-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 100%);
}

.block-photo-text {
  color: #fff;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  text-shadow: 3px 3px 0 #5038c8, -1px -1px 0 rgba(0,0,0,0.3);
  text-align: center;
  padding: 0 24px;
  max-width: 80%;
  line-height: 1.25;
  margin: 0;
}

.block-photo-stat {
  text-align: center;
  color: #fff;
}

.ps-value {
  font-size: clamp(56px, 8vw, 88px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 4px 4px 0 #5038c8;
  letter-spacing: -2px;
}

.ps-label {
  font-size: clamp(13px, 1.8vw, 17px);
  font-weight: 500;
  opacity: 0.9;
  margin-top: 8px;
  max-width: 280px;
  line-height: 1.3;
}

/* === DEMO COMPONENT WRAPPER === */
.block-demo {
  margin: 40px auto 56px;
  max-width: 90%;
  border: 1.5px solid #e2ddf7;
  border-radius: 14px;
  padding: 20px 24px 24px;
  background: #fdfcff;
}

.demo-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7052fb;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.demo-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f97bc5;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.demo-caption {
  font-size: 13px;
  color: #797687;
  text-align: center;
  margin-top: 12px;
  font-style: italic;
}

/* === FACEBOOK MOCKUP BASE === */
.fb-mockup {
  background: #f0f2f5;
  border-radius: 12px;
  padding: 16px;
  max-width: 560px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
}

.fb-post {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 8px;
}

.fb-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.fb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0d9ff, #fce8f5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.fb-post-meta strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1c1e21;
}

.fb-post-meta span {
  font-size: 12px;
  color: #65676b;
}

.fb-post-body {
  font-size: 15px;
  color: #1c1e21;
  line-height: 1.5;
}

.fb-post-footer {
  margin-top: 10px;
  font-size: 12px;
  color: #65676b;
}

/* FB comment styles */
.fb-comments { padding: 4px 0 0 4px; }

.fb-comment {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(8px);
  position: relative;
}

.fb-c-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #7052fb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.fb-c-body {
  background: #f0f2f5;
  border-radius: 18px;
  padding: 8px 12px;
  font-size: 13px;
  color: #1c1e21;
  line-height: 1.4;
  flex: 1;
}

.fb-c-body strong { font-weight: 700; }
.cr-time { color: #65676b; font-size: 11px; }

.cr-badge {
  position: absolute;
  right: 0;
  top: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.cr-badge.first  { background: #d4edda; color: #155724; }
.cr-badge.second { background: #fff3cd; color: #856404; }
.cr-badge.third  { background: #d1ecf1; color: #0c5460; }
.cr-badge.late   { background: #f8d7da; color: #721c24; }

/* Pulsing timestamps */
.cr-time-win {
  color: #7052fb;
  font-weight: 600;
  animation: pulse-purple 2.5s ease-in-out infinite;
}

.cr-time-late {
  color: #dc3545;
  animation: pulse-red 2.5s ease-in-out infinite;
}

@keyframes pulse-purple {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Comments divider label inside fb-post */
.fb-comments-label {
  font-size: 15px;
  color: #65676b;
  padding: 10px 0 6px;
  border-top: 1px solid #e4e6eb;
  margin-top: 8px;
}

.fb-collapsed {
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 4px 0;
  font-size: 13px;
  color: #65676b;
  cursor: pointer;
  opacity: 0;
  text-align: center;
}

.cr-late-comment {
  opacity: 0;
  margin-top: 4px;
}

.cr-late-comment .fb-c-avatar { background: #ccc; }
.cr-late-comment .fb-c-body,
.cr-late-comment .cr-time { color: #aaa; }

/* === COMMENT RACE REPLAY === */
.demo-replay {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.replay-btn {
  font-size: 12px;
  color: #7052fb;
  background: none;
  border: 1px solid #d6ccff;
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.replay-btn:hover { background: #f0edff; }

/* === FEED SCAN MOCKUP === */
.feed-group-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  max-width: 480px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.feed-group-icon { font-size: 18px; }

.feed-group-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1c1e21;
}

.feed-group-count {
  font-size: 11px;
  color: #65676b;
}

.feed-mockup {
  background: #f0f2f5;
  border-radius: 0 0 10px 10px;
  padding: 10px;
  max-width: 480px;
  margin: 0 auto;
  max-height: 300px;
  overflow: hidden;
  position: relative;
}

.feed-time {
  font-size: 11px;
  color: #8a8d91;
  margin-top: 4px;
}

.feed-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(240,242,245,0.9) 0%, transparent 15%, transparent 75%, rgba(240,242,245,0.9) 100%);
  pointer-events: none;
  z-index: 2;
}

.feed-scroll-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feed-post {
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: all 0.3s;
}

.feed-post .fp-name {
  font-size: 12px;
  font-weight: 700;
  color: #1c1e21;
  margin-bottom: 4px;
}

.feed-post .fp-text {
  font-size: 13px;
  color: #65676b;
  line-height: 1.4;
}

.feed-post.is-match {
  border: 2px solid #7052fb;
  box-shadow: 0 0 0 3px rgba(112,82,251,0.1);
  background: #faf9ff;
}

.kw-highlight {
  background: #fef08a;
  color: #1c1e21;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}

.oss-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #7052fb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 8px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s, transform 0.3s;
}

.oss-alert-badge.visible {
  opacity: 1;
  transform: scale(1);
}

/* === AUTHOR BLOCK === */
.block-author {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 0;
  margin: 40px 0 0;
  border-top: 1px solid #eee;
}

.author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7052fb, #f97bc5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.author-info strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #2b2350;
  margin-bottom: 3px;
}

.author-info p {
  font-size: 13px;
  color: #797687;
  line-height: 1.5;
  margin: 0;
}

/* === TOC SIDEBAR === */
.toc-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

.toc-sidebar h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #aaa;
  margin: 0 0 12px;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid #eee;
}

.toc-list li { margin-bottom: 2px; }

.toc-list a {
  display: block;
  padding: 5px 0 5px 14px;
  font-size: 13px;
  color: #aaa;
  text-decoration: none;
  line-height: 1.4;
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: all 0.2s;
}

.toc-list a:hover { color: #7052fb; }

.toc-list a.toc-active {
  color: #7052fb;
  font-weight: 600;
  border-left-color: #7052fb;
}

/* === SCROLL REVEAL === */
.sr-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sr-hidden { opacity: 1; transform: none; }
  .block-parallax { background-attachment: scroll; }
  .demo-label::before { animation: none; }
}

/* ============================================================
   CONTENT HUB — shared by blog/index.php and videos/index.php
   ============================================================ */

/* --- Hub hero header --- */
.hub-hero {
  background: linear-gradient(-60deg, #7052fb 0%, #8a60fd 100%);
  padding: 120px 0 60px;
  text-align: center;
}

.hub-hero h1 {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.2;
}

.hub-hero p {
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  margin: 0 0 40px;
}

/* --- Category filter tabs --- */
.hub-filter-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hub-filter-btn {
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 22px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}

.hub-filter-btn:hover,
.hub-filter-btn.active {
  background: #fff;
  border-color: #fff;
  color: #7052fb;
}

/* --- Grid wrapper --- */
.hub-grid-wrap {
  background: #f7f6fc;
  padding: 60px 0 80px;
  min-height: 300px;
}

/* --- Card grid --- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* --- Card --- */
.hub-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(43,35,80,0.06);
  border: 1.5px solid #f0eeff;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(112,82,251,0.13);
  text-decoration: none;
}

.hub-card.hidden {
  display: none;
}

/* --- Card cover image --- */
.hub-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}

.hub-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hub-card:hover .hub-card-cover img {
  transform: scale(1.04);
}

/* No-cover placeholder */
.hub-card-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-card-cover-placeholder svg {
  opacity: 0.25;
  width: 48px;
  height: 48px;
}

/* --- Category badge (overlaid on cover) --- */
.hub-card-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 10px;
  border-radius: 20px;
  background: #7052fb;
  color: #fff;
}

.hub-card-cat.cat-announcements { background: #f97bc5; }
.hub-card-cat.cat-how-to        { background: #7052fb; }
.hub-card-cat.cat-demos         { background: #7052fb; }
.hub-card-cat.cat-updates       { background: #20c997; color: #fff; }

/* Play button overlay for video cards */
.hub-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43,35,80,0.18);
  transition: background 0.2s;
}

.hub-card:hover .hub-card-play {
  background: rgba(43,35,80,0.35);
}

.hub-card-play svg {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

/* --- Card body --- */
.hub-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hub-card-body h2 {
  font-size: 17px;
  font-weight: 700;
  color: #2b2350;
  margin: 0 0 10px;
  line-height: 1.4;
}

.hub-card-body p {
  font-size: 13.5px;
  color: #797687;
  line-height: 1.6;
  margin: 0 0 auto;
  padding-bottom: 16px;
}

/* --- Card meta row --- */
.hub-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid #f0eeff;
  margin-top: auto;
}

.hub-card-author {
  font-size: 12px;
  font-weight: 600;
  color: #2b2350;
}

.hub-card-date {
  font-size: 12px;
  color: #b0adc0;
}

.hub-card-cta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #7052fb;
}

/* --- Language badge --- */
.hub-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #9088b8;
  background: #f0eeff;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}

/* --- Empty state --- */
.hub-empty {
  text-align: center;
  padding: 80px 24px;
  color: #b0adc0;
  font-size: 16px;
  grid-column: 1 / -1;
}

/* ============================================================
   LEGACY / COMPAT — keep these for any old blog-index markup
   ============================================================ */
.blog-index-wrap { max-width: 900px; margin: 0 auto; padding: 120px 24px 80px; }
.blog-index-header { margin-bottom: 48px; }
.blog-index-header h1 { font-size: 40px; font-weight: 700; color: #2b2350; margin: 0 0 10px; }
.blog-index-header p { font-size: 18px; color: #797687; margin: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.blog-card { background: #fff; border: 1.5px solid #eee; border-radius: 14px; padding: 28px; text-decoration: none; display: block; transition: all 0.2s; }
.blog-card:hover { border-color: #d6ccff; box-shadow: 0 8px 24px rgba(112,82,251,0.08); transform: translateY(-2px); text-decoration: none; }
.blog-card-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7052fb; margin-bottom: 10px; }
.blog-card h2 { font-size: 18px; font-weight: 700; color: #2b2350; margin: 0 0 12px; line-height: 1.35; }
.blog-card p { font-size: 14px; color: #797687; line-height: 1.6; margin: 0 0 16px; }
.blog-card-read { font-size: 13px; color: #7052fb; font-weight: 600; }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hub-hero { padding: 100px 0 48px; }
  .hub-hero h1 { font-size: 30px; }
  .hub-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .blog-with-toc {
    display: block;
    padding: 90px 20px 60px;
  }
  .toc-sidebar { display: none; }
  .blog-post-wrap { padding-top: 90px; padding-bottom: 60px; }
  .post-header h1 { font-size: 28px; }
  .block-stat .stat-number { font-size: 60px; }
  .block-callout { font-size: 18px; padding: 20px 22px; }
  .block-quote .quote-text { font-size: 19px; }
  .block-cta { padding: 36px 24px; }
  .block-cta h3 { font-size: 22px; }
  .fb-mockup { font-size: 13px; }
  .block-parallax { background-attachment: scroll; height: 260px; }
}

@media (max-width: 600px) {
  .hub-hero h1 { font-size: 26px; }
  .hub-hero p { font-size: 15px; }
  .hub-grid { grid-template-columns: 1fr; gap: 16px; }
  .hub-grid-wrap { padding: 40px 0 60px; }

  .post-header h1 { font-size: 24px; }
  .post-body h2 { font-size: 21px; }
  .post-body p, .post-body li { font-size: 16px; }
  .blog-grid { grid-template-columns: 1fr; }
  .block-cta .cta-btn { display: block; text-align: center; }
  .fb-mockup { padding: 10px; }
}

/* === MANAGE SUBSCRIPTION NAV LINK === */
/* Blog header has a white background; nav links need to be dark.
   Must beat app.css: .site-header .site-main-menu li > a (specificity 0,2,2) */
.blog-post-page .site-header .site-main-menu li > a {
  color: #2b2350;
}
.blog-post-page .site-header .site-main-menu li > a:hover {
  color: #7052fb;
}

/* === BLOG CTA HINT ARROW === */
/* Appears fixed below the header after clicking "Get Started Free".
   Uses Bootstrap .container to align the arrow to the inner column right edge,
   pointing up (90deg CW) at the "Add to Chrome" nav button. */
#blog-cta-hint {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  z-index: 2000;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#blog-cta-hint .container {
  position: relative;
}
#blog-cta-hint img {
  position: absolute;
  right: 15px; /* Bootstrap container gutter */
  top: 0;
  width: 44px;
  transform: rotate(90deg);
  transform-origin: center center;
}
#blog-cta-hint img.pulsing {
  animation: blog-hint-pulse 0.35s ease-in-out 4;
}
@keyframes blog-hint-pulse {
  0%   { transform: rotate(90deg) scale(1);    }
  50%  { transform: rotate(90deg) scale(1.4);  }
  100% { transform: rotate(90deg) scale(1);    }
}
@media (max-width: 991px) {
  #blog-cta-hint { display: none !important; }
}