/* ═══════════════════════════════════════════════════════════════════════════
   @vernalabs/canonical-design-system — Professional CSS Framework
   Bootstrap-quality design system for WebBuilderPro & Growth
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--site-text-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: var(--site-text-size, 1rem);
  line-height: var(--site-text-line-height, 1.7);
  color: var(--site-text, #1f2937);
  background-color: var(--site-surface, #ffffff);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--site-link-color, var(--site-accent, #2563eb)); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--site-link-hover-color, var(--site-accent-secondary, #1d4ed8)); }

/* ── Typography Scale ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 700; color: var(--site-text, #0f172a); }
h1 { font-family: var(--site-h1-font-family, inherit); font-size: var(--site-h1-size, clamp(2.2rem, 5vw, 3.5rem)); font-weight: var(--site-h1-weight, 800); line-height: var(--site-h1-line-height, 1.1); letter-spacing: -0.025em; }
h2 { font-family: var(--site-h2-font-family, inherit); font-size: var(--site-h2-size, clamp(1.8rem, 4vw, 2.5rem)); font-weight: var(--site-h2-weight, 700); line-height: var(--site-h2-line-height, 1.15); letter-spacing: -0.02em; }
h3 { font-family: var(--site-h3-font-family, inherit); font-size: var(--site-h3-size, clamp(1.4rem, 3vw, 1.875rem)); font-weight: var(--site-h3-weight, 700); line-height: var(--site-h3-line-height, 1.25); }
h4 { font-family: var(--site-h4-font-family, inherit); font-size: var(--site-h4-size, 1.25rem); font-weight: var(--site-h4-weight, 600); line-height: var(--site-h4-line-height, 1.35); }
h5 { font-family: var(--site-h5-font-family, inherit); font-size: var(--site-h5-size, 1.1rem); font-weight: var(--site-h5-weight, 600); }
h6 { font-family: var(--site-h6-font-family, inherit); font-size: var(--site-h6-size, 1rem); font-weight: var(--site-h6-weight, 600); }

p { margin: 0 0 1em; }
.intro { font-size: 1.125rem; line-height: 1.75; color: var(--site-muted-text, #475569); max-width: 680px; }

/* Code, blockquote, tables — global element styling driven by site theme.
   Previously only set under .cn-chapter-body (tutorial layout) which meant
   the same elements rendered unstyled on every other layout. Pulling these
   up to the global scope keeps the cascade consistent: any page that
   contains <code>, <pre>, <th>, <blockquote> picks up the site theme. */
code { background: var(--site-subtle-bg, rgba(99,102,241,0.08)); color: var(--site-text, inherit); padding: 2px 6px; border-radius: 4px; font-size: 0.88em; font-family: 'Fira Code', 'Consolas', monospace; }
pre { background: var(--site-subtle-bg, rgba(15,23,42,0.04)); color: var(--site-text, inherit); padding: 20px 24px; border-radius: 8px; overflow-x: auto; line-height: 1.6; }
pre code { background: none; color: inherit; padding: 0; font-size: 0.875rem; }
blockquote { border-left: 4px solid var(--site-accent, #6366f1); background: var(--site-subtle-bg, rgba(99,102,241,0.04)); padding: 12px 20px; border-radius: 0 6px 6px 0; color: var(--site-muted-text, #475569); }
table { border-collapse: collapse; }
th { background: var(--site-subtle-bg, rgba(0,0,0,0.02)); color: var(--site-text, inherit); font-weight: 600; }
th, td { padding: 10px 16px; border: 1px solid var(--site-border-color, #e2e8f0); text-align: left; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ui-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; border-radius: 8px; border: 2px solid transparent;
  font-size: 0.95rem; font-weight: 600; line-height: 1.4;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--site-button-bg, var(--site-accent, #2563eb)); color: var(--site-button-text, #ffffff);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
}
.ui-button:hover {
  background: var(--site-button-hover-bg, var(--site-accent-secondary, #1d4ed8)); color: var(--site-button-text, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
}
.ui-button:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ── Images ───────────────────────────────────────────────────────────────── */
.ui-image {
  max-width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.ui-image:hover { transform: scale(1.01); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }

/* ── Divider & Spacer ─────────────────────────────────────────────────────── */
.ui-divider { border: none; border-top: 1px solid var(--site-border-color, #e2e8f0); margin: 2rem 0; }
.ui-spacer { flex-shrink: 0; }
.ui-text { margin-bottom: 1em; color: var(--site-muted-text, #475569); line-height: 1.75; }
.ui-heading { margin-bottom: 0.5em; }

/* ── Section Layout ───────────────────────────────────────────────────────── */
.export-section {
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
}
.export-section:nth-child(even) { background: var(--site-section-alt-bg, #f8fafc); }

.layout-wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO LAYOUTS
   ═══════════════════════════════════════════════════════════════════════════ */

.layout-hero-centered {
  text-align: center;
  padding: 60px 0 40px;
}
.layout-hero-centered h1 { max-width: 800px; margin: 0 auto 24px; }
.layout-hero-centered .intro { margin: 0 auto 32px; text-align: center; }
.layout-hero-centered .ui-button { margin: 0 6px; }
.layout-hero-centered .ui-image {
  margin: 40px auto 0; max-width: 900px;
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
}

.layout-hero-split {
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 480px;
}
.layout-hero-split h1 { margin-bottom: 20px; }
.layout-hero-split .intro { margin-bottom: 28px; }
.layout-hero-split .ui-image {
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
}

/* Hero Accent */
.layout-hero-accent { text-align: center; padding: 40px 0; }
.layout-hero-accent h1 { max-width: 800px; margin: 0 auto 16px; }
.layout-hero-accent .intro { margin: 0 auto 40px; text-align: center; }
.layout-hero-accent .accent-grid {
  display: grid; gap: 20px; margin-top: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ICON BOX — Feature Cards
   ═══════════════════════════════════════════════════════════════════════════ */
.icon-box {
  padding: 32px 24px;
  border-radius: 16px;
  background: var(--site-card-bg, #ffffff);
  border: 1px solid var(--site-border-color, #e2e8f0);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.icon-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--site-accent, #2563eb), var(--site-accent-secondary, #7c3aed));
  opacity: 0; transition: opacity 0.3s;
}
.icon-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  border-color: transparent;
}
.icon-box:hover::before { opacity: 1; }
.icon-box i {
  font-size: 2.5rem; display: block; margin-bottom: 16px;
  color: var(--site-accent, #2563eb);
  background: linear-gradient(135deg, var(--site-accent, #2563eb), var(--site-accent-secondary, #7c3aed));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.icon-box h4 { font-size: 1.1rem; margin-bottom: 8px; color: var(--site-text, #0f172a); }
.icon-box p { font-size: 0.925rem; color: var(--site-muted-text, #64748b); line-height: 1.65; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARD — Content Cards
   ═══════════════════════════════════════════════════════════════════════════ */
.card-box {
  background: var(--site-card-bg, #ffffff); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--site-border-color, #e2e8f0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
}
.card-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
  border-color: transparent;
}
.card-box img { width: 100%; height: 200px; object-fit: cover; border-radius: 0; box-shadow: none; }
.card-box h4 { padding: 20px 24px 0; font-size: 1.1rem; color: var(--site-text, #0f172a); }
.card-box p { padding: 8px 24px 20px; font-size: 0.925rem; color: var(--site-muted-text, #64748b); line-height: 1.65; flex: 1; margin: 0; }
.card-box .ui-button { margin: 0 24px 20px; align-self: flex-start; padding: 10px 20px; font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   STAT BOX — Numbers & Metrics
   ═══════════════════════════════════════════════════════════════════════════ */
.stat-box {
  text-align: center; padding: 28px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--site-accent, #2563eb) 6%, var(--site-card-bg, #fff)) 0%,
    color-mix(in srgb, var(--site-accent-secondary, #7c3aed) 4%, var(--site-card-bg, #fff)) 100%);
  border: 1px solid color-mix(in srgb, var(--site-accent, #2563eb) 12%, var(--site-border-color, #e2e8f0) 88%);
}
.stat-value {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  background: linear-gradient(135deg, var(--site-accent, #2563eb), var(--site-accent-secondary, #7c3aed));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1; margin-bottom: 4px;
}
.stat-label { font-size: 0.875rem; color: var(--site-muted-text, #64748b); font-weight: 500; letter-spacing: 0.025em; }

/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIAL — Quotes & Reviews
   ═══════════════════════════════════════════════════════════════════════════ */
.testimonial-box {
  background: var(--site-card-bg, #ffffff); padding: 32px; border-radius: 16px;
  border: 1px solid var(--site-border-color, #e2e8f0);
  position: relative;
  margin-top: 10px;
  transition: all 0.3s;
}
.testimonial-box::before {
  content: '\201C'; position: absolute; top: 16px; left: 24px;
  font-size: 4rem; line-height: 1; color: var(--site-accent, #2563eb); opacity: 0.15;
  font-family: Georgia, serif;
}
.testimonial-box:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.testimonial-box .testimonial-text, .testimonial-box p {
  font-size: 1.05rem; font-style: italic; line-height: 1.7; color: var(--site-text, #334155);
  margin: 0 0 16px; position: relative; z-index: 1;
}
.testimonial-box footer, .testimonial-box strong {
  font-style: normal; font-weight: 600; color: var(--site-text, #0f172a); font-size: 0.925rem;
}
.testimonial-box footer span, .testimonial-box span {
  display: block; font-weight: 400; color: var(--site-muted-text, #94a3b8); font-size: 0.85rem; margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUOTE
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-quote, .element-quote {
  border-left: 4px solid var(--site-accent, #2563eb);
  padding: 20px 28px;
  margin: 1.5em 0;
  background: color-mix(in srgb, var(--site-accent, #2563eb) 4%, var(--site-card-bg, #fff));
  border-radius: 0 12px 12px 0;
  font-style: italic; font-size: 1.1rem; line-height: 1.7; color: var(--site-text, #334155);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCORDION — FAQ
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-accordion { display: flex; flex-direction: column; gap: 8px; }
.ui-accordion details {
  border: 1px solid var(--site-border-color, #e2e8f0); border-radius: 12px; overflow: hidden;
  transition: all 0.2s; background: var(--site-card-bg, #ffffff);
}
.ui-accordion details:hover { border-color: var(--site-accent, #2563eb); }
.ui-accordion details[open] {
  border-color: var(--site-accent, #2563eb);
  box-shadow: 0 4px 16px rgba(37,99,235,0.08);
}
.ui-accordion summary {
  padding: 18px 24px; cursor: pointer; font-weight: 600; font-size: 1rem;
  color: var(--site-text, #0f172a); list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  transition: color 0.2s;
}
.ui-accordion summary::-webkit-details-marker { display: none; }
.ui-accordion summary::after { content: '+'; font-size: 1.4rem; color: var(--site-accent, #2563eb); font-weight: 300; transition: transform 0.2s; }
.ui-accordion details[open] summary::after { content: '−'; }
.ui-accordion summary:hover { color: var(--site-accent, #2563eb); }
.ui-accordion .accordion-body { padding: 0 24px 20px; color: var(--site-muted-text, #475569); line-height: 1.75; font-size: 0.95rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   ICON LIST — Benefit Lists
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-icon-list { list-style: none; padding: 0; margin: 0; }
.ui-icon-list li {
  padding: 10px 0; display: flex; align-items: flex-start; gap: 12px;
  font-size: 1rem; color: var(--site-text, #334155); line-height: 1.6;
  border-bottom: 1px solid var(--site-border-color, #f1f5f9);
}
.ui-icon-list li:last-child { border-bottom: none; }
.ui-icon-list i {
  color: var(--site-accent, #2563eb); font-size: 1.2rem; margin-top: 2px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(124,58,237,0.1));
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL ICONS
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-social-icons { display: flex; gap: 12px; flex-wrap: wrap; }
.ui-social-icons a {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--site-section-alt-bg, #f1f5f9); color: var(--site-muted-text, #475569); font-size: 1.2rem;
  transition: all 0.2s;
}
.ui-social-icons a:hover {
  background: var(--site-accent, #2563eb); color: #ffffff;
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALERT — Notice Boxes
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-alert {
  padding: 16px 20px; border-radius: 12px; margin: 1em 0;
  font-size: 0.95rem; line-height: 1.6;
  display: flex; align-items: flex-start; gap: 12px;
}
.ui-alert.ui-alert-info { background: #eff6ff; color: #1e40af; border-left: 4px solid #3b82f6; }
.ui-alert.ui-alert-success { background: #f0fdf4; color: #166534; border-left: 4px solid #22c55e; }
.ui-alert.ui-alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid #f59e0b; }
.ui-alert.ui-alert-danger { background: #fef2f2; color: #991b1b; border-left: 4px solid #ef4444; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-progress { margin: 1em 0; }
.ui-progress-label { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; color: var(--site-muted-text, #475569); }
.ui-progress-bar {
  height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--site-accent, #2563eb), var(--site-accent-secondary, #7c3aed));
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.ui-progress-bar::before {
  content: ''; position: absolute; inset: 0; border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.pricing-card {
  background: var(--site-card-bg, #ffffff); border: 1px solid var(--site-border-color, #e2e8f0); border-radius: 20px;
  padding: 36px 28px; text-align: center;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.pricing-card.highlighted {
  border-color: var(--site-accent, #2563eb);
  box-shadow: 0 8px 32px rgba(37,99,235,0.15);
  transform: scale(1.02);
}
.pricing-card.highlighted::before {
  content: 'Most Popular'; position: absolute; top: 16px; right: -32px;
  background: var(--site-accent, #2563eb); color: white;
  padding: 4px 40px; font-size: 0.75rem; font-weight: 600;
  transform: rotate(45deg);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.1); }
.pricing-card h3 { font-size: 1.25rem; margin-bottom: 16px; }
.pricing-price {
  font-size: 3rem; font-weight: 800; line-height: 1;
  color: var(--site-text, #0f172a); margin-bottom: 4px;
}
.pricing-period { font-size: 0.9rem; color: var(--site-muted-text, #94a3b8); margin-bottom: 24px; }
.pricing-features { list-style: none; padding: 0; text-align: left; margin: 0 0 28px; }
.pricing-features li {
  padding: 10px 0; border-bottom: 1px solid var(--site-border-color, #f1f5f9);
  font-size: 0.925rem; color: var(--site-muted-text, #475569);
  display: flex; align-items: center; gap: 8px;
}
.pricing-features li::before { content: '✓'; color: var(--site-accent, #2563eb); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-timeline { position: relative; padding-left: 32px; }
.ui-timeline::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(to bottom, var(--site-accent, #2563eb), var(--site-accent-secondary, #7c3aed));
  border-radius: 1px;
}
.timeline-item { margin-bottom: 32px; position: relative; }
.timeline-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--site-accent, #2563eb); border: 3px solid var(--site-card-bg, #ffffff);
  box-shadow: 0 0 0 2px var(--site-accent, #2563eb);
  position: absolute; left: -32px; top: 4px;
}
.timeline-content h4 { font-size: 1.05rem; margin-bottom: 4px; color: var(--site-text, #0f172a); }
.timeline-date { font-size: 0.8rem; color: var(--site-accent, #2563eb); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.timeline-content p { font-size: 0.925rem; color: var(--site-muted-text, #64748b); line-height: 1.65; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-contact-form { display: flex; flex-direction: column; gap: 16px; }
.ui-contact-form .form-field { display: flex; flex-direction: column; gap: 6px; }
.ui-contact-form label { font-size: 0.875rem; font-weight: 600; color: var(--site-text, #0f172a); }
.ui-contact-form input, .ui-contact-form textarea {
  padding: 12px 16px; border: 1px solid var(--site-border-color, #d1d5db); border-radius: 10px;
  font-size: 0.95rem; color: var(--site-text, #1f2937); background: var(--site-input-bg, #ffffff);
  transition: all 0.2s; font-family: inherit;
}
.ui-contact-form input:focus, .ui-contact-form textarea:focus {
  outline: none; border-color: var(--site-accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.ui-contact-form textarea { resize: vertical; min-height: 120px; }
.ui-contact-form .ui-button { align-self: flex-start; margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-video-embed {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.ui-video-embed iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAP
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-map { border-radius: 16px; overflow: hidden; border: 1px solid var(--site-border-color, #e2e8f0); }
.ui-map iframe { width: 100%; height: 400px; border: none; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════════════════ */
.ui-tabs .ui-tab { display: none; padding: 20px 0; }
.ui-tabs .ui-tab.active { display: block; }
.ui-tabs .ui-tab h4 {
  padding: 12px 24px; cursor: pointer; font-weight: 600;
  border-bottom: 2px solid transparent; transition: all 0.2s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: FEATURES (grids)
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-features .features-head { text-align: center; margin-bottom: 48px; }
.layout-features .features-head h1, .layout-features .features-head h2 { max-width: 700px; margin: 0 auto 16px; }
.layout-features .features-head .intro { margin: 0 auto; }

/* Column counts come from the .vn-grid-Ncol class the renderer picks
   (balanced rows, e.g. 4 cards → 2+2), NOT auto-fit — which produced
   lopsided "3 + 1" tails. We only set display + gap here; the vn-grid
   utilities (and their responsive breakpoints) own grid-template-columns. */
.layout-features .features-icon-grid { display: grid; gap: 24px; }
.layout-features .features-card-grid { display: grid; gap: 24px; }
.layout-features .features-stat-grid { display: grid; gap: 20px; }
.layout-features .features-media-grid { display: grid; gap: 20px; }
.layout-features .features-media-grid .ui-image { height: 240px; object-fit: cover; width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: CONTENT (text + media split)
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-content .content-shell, .layout-about .about-shell {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: STATS BAND
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-stats-band { text-align: center; }
.layout-stats-band h1, .layout-stats-band h2 { margin-bottom: 40px; }
.layout-stats-band .stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: CTA BANNER
   ═══════════════════════════════════════════════════════════════════════════ */
.export-section:has(.layout-cta-banner) {
  /* Subtle primary-tinted gradient that adapts to active theme surface color. */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--site-accent, #4f6ef7) 8%, var(--site-section-alt-bg, #f8faff)) 0%,
    color-mix(in srgb, var(--site-accent-secondary, #7c5ef7) 6%, var(--site-section-alt-bg, #f8faff)) 100%
  );
}
.layout-cta-banner { text-align: center; padding: 20px 0; }
.layout-cta-banner h1, .layout-cta-banner h2 { max-width: 700px; margin: 0 auto 16px; }
.layout-cta-banner .ui-text, .layout-cta-banner p { max-width: 600px; margin: 0 auto 28px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: CONTACT SPLIT
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-contact-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: PRICING TABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-pricing-table { text-align: center; }
.layout-pricing-table h1, .layout-pricing-table h2 { margin-bottom: 12px; }
.layout-pricing-table .cards-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; margin-top: 40px; text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: FAQ
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-faq-accordion { max-width: 800px; margin: 0 auto; }
.layout-faq-accordion h1, .layout-faq-accordion h2 { text-align: center; margin-bottom: 12px; }
.layout-faq-accordion > .ui-text { text-align: center; margin-bottom: 32px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: GALLERY
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-gallery-grid .gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px; margin-top: 32px;
}
.layout-gallery-grid .gallery-grid .ui-image { height: 240px; object-fit: cover; width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: LOGO CLOUD
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-logo-cloud { text-align: center; }
.layout-logo-cloud h1, .layout-logo-cloud h2 { margin-bottom: 12px; }
.layout-logo-cloud .logo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px; margin-top: 32px;
}
.layout-logo-cloud .logo-item {
  border: 1px solid var(--site-border-color, #e2e8f0); border-radius: 12px;
  background: var(--site-card-bg, #ffffff); min-height: 80px; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.layout-logo-cloud .logo-item:hover { border-color: var(--site-accent, #2563eb); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.layout-logo-cloud .logo-item img { max-height: 36px; width: auto; object-fit: contain; border-radius: 0; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: BLOG CARDS / FEATURES CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-features-cards .cards-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; margin-top: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT: TESTIMONIAL
   ═══════════════════════════════════════════════════════════════════════════ */
.layout-testimonial { text-align: center; }
.layout-testimonial h1, .layout-testimonial h2 { margin-bottom: 40px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRAS (overflow elements)
   ═══════════════════════════════════════════════════════════════════════════ */
.export-extras {
  margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE GRID UTILITIES  (vn-grid-Ncol)
   grid-template-columns is set via class, not inline style, so @media works.
   ═══════════════════════════════════════════════════════════════════════════ */
.vn-grid-1col { grid-template-columns: 1fr; }
.vn-grid-2col { grid-template-columns: repeat(2, 1fr); }
.vn-grid-3col { grid-template-columns: repeat(3, 1fr); }
.vn-grid-4col { grid-template-columns: repeat(4, 1fr); }
.vn-grid-5col { grid-template-columns: repeat(5, 1fr); }
.vn-grid-6col { grid-template-columns: repeat(6, 1fr); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .export-section { padding: 60px 20px; }
  .vn-grid-5col { grid-template-columns: repeat(3, 1fr); }
  .vn-grid-6col { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .export-section { padding: 48px 16px; }

  /* Collapse all 2-col and 3-col grids to single column */
  .vn-grid-2col { grid-template-columns: 1fr; }
  .vn-grid-3col { grid-template-columns: 1fr; }

  /* 4-col grids become 2-col (e.g. stats, icon grids) */
  .vn-grid-4col { grid-template-columns: repeat(2, 1fr); }
  .vn-grid-5col { grid-template-columns: repeat(2, 1fr); }
  .vn-grid-6col { grid-template-columns: repeat(3, 1fr); }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .export-section { padding: 40px 12px; }

  .vn-grid-4col { grid-template-columns: 1fr; }
  .vn-grid-5col { grid-template-columns: 1fr; }
  .vn-grid-6col { grid-template-columns: repeat(2, 1fr); }

  .ui-button { width: 100%; justify-content: center; }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
}

@media (max-width: 360px) {
  .vn-grid-6col { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION MODIFIERS — Used by templates for visual variety
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dark section — dark background, white text */
.export-section.section-dark,
.export-section:has(.section-dark) {
  background: #0f172a;
  color: #e2e8f0;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #ffffff; }
.section-dark .ui-text, .section-dark p { color: #cbd5e1; }
.section-dark .intro { color: #94a3b8; }
.section-dark .stat-value { -webkit-text-fill-color: #ffffff; background: none; color: #ffffff; }
.section-dark .stat-label { color: #94a3b8; }
.section-dark .stat-box { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.section-dark .icon-box { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.section-dark .icon-box:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.section-dark .icon-box h4 { color: #ffffff; }
.section-dark .icon-box p { color: #94a3b8; }
.section-dark .testimonial-box { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.section-dark .testimonial-box p { color: #e2e8f0; }
.section-dark .card-box { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.section-dark .ui-button { background: #ffffff; color: #0f172a; }
.section-dark .ui-button:hover { background: #e2e8f0; }

/* Gradient section — brand gradient background (theme-aware) */
.export-section.section-gradient,
.export-section:has(.section-gradient) {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--site-accent, #2563eb) 6%, var(--site-surface, #fff)) 0%,
    color-mix(in srgb, var(--site-accent-tertiary, #60a5fa) 4%, var(--site-surface, #fff)) 50%,
    var(--site-section-alt-bg, #f8fafc) 100%);
}

/* Bold gradient — stronger color for CTA sections */
.export-section.section-gradient-bold,
.export-section:has(.section-gradient-bold) {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  color: #ffffff;
}
.section-gradient-bold h1, .section-gradient-bold h2, .section-gradient-bold h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}
.section-gradient-bold .ui-text, .section-gradient-bold p { color: rgba(255,255,255,0.9); }
.section-gradient-bold .ui-button { background: #ffffff; color: #1d4ed8; -webkit-text-fill-color: #1d4ed8; }
.section-gradient-bold .ui-button:hover { background: #f1f5f9; }

/* ═══════════════════════════════════════════════════════════════════════════
   SITE HEADER (config-driven header component)
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header {
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
}
.site-header.sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.site-header-nav-link {
  color: inherit;
  text-decoration: none;
}
.site-header-nav-link:hover { opacity: 0.75; }
.site-header-brand { color: inherit; }

/* ── snav: dropdown menu system (up to 3 levels) ──────────────────────────
   L1 = top bar (.snav-bar)
   L2 = first dropdown (.snav-dropdown-l2)
   L3 = nested dropdown (.snav-dropdown-l3)
   ───────────────────────────────────────────────────────────────────────── */

/* Top-bar list item — the flex-shrink:0 + position:relative is key */
.snav-item {
  list-style: none;
  position: relative;
  flex-shrink: 0;
}

/* Top-level link */
.snav-top-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: opacity 0.15s;
  height: 100%;
  box-sizing: border-box;
}
.snav-top-link:hover { opacity: 0.75; }

/* Chevron icon */
.snav-chevron {
  font-size: 0.65em;
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.snav-has-dropdown:hover > a > .snav-chevron,
.snav-has-dropdown:focus-within > a > .snav-chevron { transform: rotate(180deg); }
/* L2 chevrons point right — rotate 90° when open */
.snav-dropdown .snav-has-dropdown > a > .snav-chevron { transform: rotate(0deg) !important; }
.snav-dropdown .snav-has-dropdown:hover > a > .snav-chevron,
.snav-dropdown .snav-has-dropdown:focus-within > a > .snav-chevron { transform: rotate(90deg) !important; }

/* ── Dropdown panel ──────────────────────────────────────────────────────────
   Uses visibility/opacity instead of display:none so we can:
   1. Add a closing delay (150ms) — mouse can cross the gap without losing hover
   2. Animate open/close with opacity
   transition-delay is 0 on open and 150ms on close (on the :hover rule below).
   ─────────────────────────────────────────────────────────────────────────── */
.snav-dropdown {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  min-width: 210px;
  background: var(--site-nav-bg, rgba(255,255,255,0.98));
  color: var(--site-text, #1f2937);
  border: 1px solid var(--site-nav-border, #f1f5f9);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 1050;
  backdrop-filter: blur(6px);
  top: 100%;   /* flush — no gap; bridge pseudo-element covers any visual spacing */
  left: 0;
  /* Close: fade out after 150ms delay so mouse can travel diagonally to items */
  transition: opacity 0.12s ease, visibility 0s linear 0.15s;
}

/* Invisible bridge fills the space between trigger and panel so hover is never lost */
.snav-has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 12px;   /* covers any visual gap between link and panel */
  z-index: 1049;
}

/* L3: bridge extends to the right */
.snav-dropdown .snav-has-dropdown::after {
  top: -4px;
  bottom: -4px;
  left: 100%;
  right: auto;
  width: 12px;
  height: auto;
}

/* L3 opens to the right of the L2 item */
.snav-dropdown .snav-dropdown {
  top: -4px;
  left: 100%;
}

/* Show on hover/focus — open immediately (delay 0), close with 150ms delay */
.snav-has-dropdown:hover > .snav-dropdown,
.snav-has-dropdown:focus-within > .snav-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.12s ease, visibility 0s linear 0s;
}

/* Dropdown link */
.snav-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 16px;
  font-size: 0.875rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s;
}
.snav-dropdown-link:hover {
  background: color-mix(in srgb, var(--site-accent, #2563eb) 8%, transparent 92%);
  color: var(--site-accent, #2563eb);
}
/* Subtle divider between items */
.snav-dropdown > .snav-item + .snav-item { border-top: 1px solid rgba(0,0,0,0.04); }

/* ── Rich (mega-menu) dropdown items: thumbnail + title + subtitle ── */
.snav-dropdown-link.snav-rich-link {
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  white-space: normal;
  min-width: 260px;
}
.snav-rich-thumb {
  width: 44px; height: 44px; flex: 0 0 44px;
  object-fit: cover; border-radius: 8px;
  background: rgba(0,0,0,0.05);
}
.snav-rich-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.snav-rich-title { font-weight: 600; font-size: 0.9rem; line-height: 1.25; color: inherit; }
.snav-rich-sub { font-size: 0.78rem; line-height: 1.3; color: rgba(0,0,0,0.55); }
.snav-rich-link:hover .snav-rich-sub { color: rgba(0,0,0,0.7); }
/* Rich items manage their own spacing — drop the text-item divider */
.snav-dropdown > .snav-item:has(.snav-rich-link) + .snav-item { border-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.site-navigation {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; max-width: 1200px; margin: 0 auto;
  position: sticky; top: 0; z-index: 100;
  background: var(--site-nav-bg, rgba(255,255,255,0.95)); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--site-nav-border, #f1f5f9);
}
.site-navigation .nav-logo {
  font-size: 1.25rem; font-weight: 700; color: var(--site-text, #0f172a);
  text-decoration: none; display: flex; align-items: center; gap: 8px;
}
.site-navigation .nav-links {
  display: flex; gap: 32px; align-items: center; list-style: none; margin: 0; padding: 0;
}
.site-navigation .nav-links a {
  font-size: 0.925rem; font-weight: 500; color: var(--site-muted-text, #475569);
  text-decoration: none; transition: color 0.2s;
}
.site-navigation .nav-links a:hover { color: var(--site-accent, #2563eb); }
.site-navigation .nav-cta {
  padding: 8px 20px; border-radius: 8px; font-size: 0.875rem; font-weight: 600;
  background: var(--site-accent, #2563eb); color: #ffffff; text-decoration: none;
  transition: all 0.2s;
}
.site-navigation .nav-cta:hover { background: var(--site-accent-secondary, #1d4ed8); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: #0f172a; color: #94a3b8; padding: 60px 24px 24px;
}
.site-footer .footer-content {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px;
}
/* When the footer brand is laid out as a flex column (common in site custom
   CSS), keep its children — especially an auto-width logo <img> — left-aligned
   instead of stretching to full column width (a stretched <img> lets the SVG's
   preserveAspectRatio center the artwork, leaving a gap on the left). Harmless
   when the brand isn't a flex container (align-* are simply ignored). */
.site-footer .footer-brand { align-items: flex-start; }
.site-footer .footer-logo { align-self: flex-start; max-width: 100%; }
.site-footer .footer-brand h3 { color: #ffffff; font-size: 1.25rem; margin-bottom: 12px; }
.site-footer .footer-brand p { font-size: 0.9rem; line-height: 1.6; max-width: 300px; }
.site-footer-logo { max-width: 200px; width: auto; height: auto; display: block; margin-bottom: 16px; }
.site-footer .footer-column h4 {
  color: #ffffff; font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px;
}
.site-footer .footer-column ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-column li { margin-bottom: 10px; }
.site-footer .footer-column a { color: #94a3b8; font-size: 0.9rem; text-decoration: none; transition: color 0.2s; }
.site-footer .footer-column a:hover { color: #ffffff; }
.site-footer .footer-bottom {
  max-width: 1200px; margin: 40px auto 0;
  padding-top: 24px; border-top: 1px solid #1e293b;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.85rem;
}
.site-footer .footer-social { display: flex; gap: 16px; }
.site-footer .footer-social a { color: #64748b; font-size: 1.2rem; transition: color 0.2s; }
.site-footer .footer-social a:hover { color: #ffffff; }

@media (max-width: 768px) {
  .site-footer .footer-content { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .site-navigation .nav-links { display: none; }
}

@media (max-width: 480px) {
  .site-footer .footer-content { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE COMPONENTS — powered by canonical.js
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fullscreen Hero ─────────────────────────────────────────────────────── */
.hero-fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}
.hero-fullscreen .hero-bg-image,
.hero-fullscreen img[data-role="background"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.1);
  transition: transform 0.3s ease-out;
}
.hero-fullscreen .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
}
.hero-fullscreen .layout-wrap,
.hero-fullscreen .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  max-width: 800px;
  padding: 40px 24px;
}
.hero-fullscreen h1 {
  color: #ffffff;
  font-size: clamp(2.8rem, 6vw, 5rem);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  margin-bottom: 0.4em;
}
.hero-fullscreen .intro,
.hero-fullscreen p {
  color: rgba(255,255,255,0.9);
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto 1.5em;
}

/* ── Scroll Indicator ────────────────────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-indicator::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  margin: 8px auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* ── Video Background Hero ───────────────────────────────────────────────── */
.hero-video-bg video,
.hero-video-bg .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ── Carousel / Slider ───────────────────────────────────────────────────── */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}
.carousel-slide.active {
  opacity: 1;
}

/* Carousel Navigation Arrows */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255,255,255,0.9);
  color: #1f2937;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}
.carousel-prev:hover,
.carousel-next:hover {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transform: translateY(-50%) scale(1.1);
}
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }

/* Carousel Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}
.carousel-dot.active {
  background: var(--site-accent, #2563eb);
  transform: scale(1.3);
}

/* ── Testimonial Carousel ────────────────────────────────────────────────── */
.testimonial-carousel-section .carousel-slide {
  padding: 40px 60px;
  text-align: center;
}
.testimonial-carousel-section .testimonial-quote {
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--site-text, #1f2937);
  margin-bottom: 1.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.testimonial-carousel-section .testimonial-quote::before {
  content: '\201C';
  font-size: 4rem;
  color: var(--site-accent, #2563eb);
  display: block;
  line-height: 0.5;
  margin-bottom: 0.5rem;
  opacity: 0.3;
}
.testimonial-carousel-section .testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.testimonial-carousel-section .testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--site-accent, #2563eb);
}
.testimonial-carousel-section .testimonial-stars {
  color: #f59e0b;
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

/* ── Image Carousel ──────────────────────────────────────────────────────── */
.image-carousel-section .carousel-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
}
.image-carousel-section .carousel-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(0,0,0,0.6);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 8px;
  backdrop-filter: blur(8px);
  font-size: 0.95rem;
}

/* ── Feature Showcase ────────────────────────────────────────────────────── */
.features-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.showcase-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.showcase-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.showcase-item:hover {
  background: rgba(0,0,0,0.02);
}
.showcase-item.active {
  background: rgba(37,99,235,0.04);
  border-color: var(--site-accent, #2563eb);
  box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}
.showcase-item i {
  font-size: 1.5rem;
  color: var(--site-accent, #2563eb);
  flex-shrink: 0;
  margin-top: 2px;
}
.showcase-item.active i {
  color: var(--site-accent, #2563eb);
}
.showcase-item h4 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.showcase-item p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}
.showcase-preview {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.showcase-preview img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (max-width: 768px) {
  .features-showcase { grid-template-columns: 1fr; }
  .showcase-preview { order: -1; }
}

/* ── Animated Counter ────────────────────────────────────────────────────── */
.number-counter-section {
  background: linear-gradient(135deg, var(--site-accent, #2563eb) 0%, var(--site-accent-secondary, #1d4ed8) 100%);
  color: #ffffff;
}
.number-counter-section .stat-value,
.number-counter-section .counter-animate {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  line-height: 1.1;
}
.number-counter-section .stat-label {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Logo Marquee (infinite scroll) ──────────────────────────────────────── */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.marquee-track img {
  height: 40px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all 0.3s;
}
.marquee-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Sticky Nav Transition ───────────────────────────────────────────────── */
.site-nav {
  transition: box-shadow 0.3s ease, background 0.3s ease, padding 0.3s ease;
}
.site-nav.nav-scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* ── Mobile Nav ──────────────────────────────────────────────────────────── */
.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 100;
}
.nav-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--site-text, #1f2937);
  transition: all 0.3s;
  border-radius: 1px;
}
.nav-mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-mobile-toggle.active span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 768px) {
  .nav-mobile-toggle { display: flex; }
  .site-nav .nav-menu {
    position: fixed;
    inset: 0;
    background: var(--site-surface, #ffffff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99;
  }
  .site-nav .nav-menu.open { transform: translateX(0); }
  .site-nav .nav-menu a { font-size: 1.5rem; }
}

/* ── Typing Cursor ───────────────────────────────────────────────────────── */
[data-typing]::after {
  content: '|';
  animation: typingCursor 0.7s ease-in-out infinite;
  color: var(--site-accent, #2563eb);
}
@keyframes typingCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Blog Card Enhancements ──────────────────────────────────────────────── */
.blog-card {
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}
.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover img {
  transform: scale(1.05);
}
.blog-card-body {
  padding: 24px;
}
.blog-card-date {
  font-size: 0.8rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.blog-card h4 {
  margin: 8px 0;
}
.blog-card p {
  color: #64748b;
  font-size: 0.9rem;
}

/* ─── Ghost News Feed ─────────────────────────────────────────────────────── */
.news-article-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.news-article-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
.news-article-img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; }
.news-article-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.news-article-card:hover .news-article-img-wrap img { transform: scale(1.04); }
.news-article-body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.news-article-category {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--vn-primary, #6366f1);
  margin-bottom: 6px;
}
.news-article-title { margin: 0 0 8px; font-size: 1rem; line-height: 1.4; }
.news-article-title a { color: inherit; text-decoration: none; }
.news-article-title a:hover { color: var(--vn-primary, #6366f1); }
.news-article-excerpt { font-size: 0.875rem; color: #64748b; line-height: 1.5; margin: 0 0 12px; flex: 1; }
.news-article-meta { font-size: 0.78rem; color: #94a3b8; margin-top: auto; }

/* Skeleton placeholder */
.news-article-skeleton { pointer-events: none; }
.news-skeleton-img { background: #e2e8f0; aspect-ratio: 16/9; display: block; }
.news-skeleton-line { background: #e2e8f0; border-radius: 4px; height: 14px; margin-bottom: 8px; }
.news-feed-placeholder-label { text-align: center; color: #94a3b8; font-size: 0.85rem; margin-top: 20px; }

@media (max-width: 768px) {
  .news-feed-grid.vn-grid-3col { grid-template-columns: 1fr; }
  .news-feed-grid.vn-grid-2col { grid-template-columns: 1fr; }
}

/* ── Tutorial / Documentation Layout ─────────────────────────────────────── */
/*
 * ARCHITECTURE: canonical.css = STRUCTURE ONLY (no colors, no backgrounds).
 * All visual styling (colors, backgrounds, borders) lives in theme-css.ts via
 * --cn-tutorial-* CSS variables. This ensures the 3-layer order is respected:
 *   1. canonical.css  — layout / structure
 *   2. theme CSS      — visual tokens  (--cn-tutorial-* defined in theme-css.ts)
 *   3. designer CSS   — user overrides
 */

/*
 * Tutorial page: body becomes a flex column so the tutorial section fills
 * exactly the space between the site header and footer — no page-level overflow
 * and no double scrollbars.
 *
 * Two cases:
 *   Live site  → body > header + section + footer   (no wrapper)
 *   Designer   → body > main > header + section + footer  (<main> wrapper)
 * Both are handled so scroll works identically in preview and production.
 */
/*
 * Tutorial page: prevent the body from scrolling (the wrapper fills exactly
 * viewport-minus-header-minus-footer via JS in initTutorialDoc).
 */
body:has(.layout-tutorial-doc) { overflow: hidden; }

/* Override .export-section defaults — scroll-reveal must not touch this */
.layout-tutorial-doc {
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/*
 * Wrapper: height is set by initTutorialDoc() in canonical.js to exactly
 * (window.innerHeight - headerHeight - footerHeight).
 * That makes the page total height == viewport → no body scroll.
 */
.cn-tutorial-wrapper {
  display: flex;
  /* height injected by JS */
  overflow: hidden;
  font-family: var(--site-text-font-family, 'Inter', sans-serif);
  /* background intentionally omitted: inherit the site theme's body/section
     background so tutorials match the rest of the site. Set --cn-tutorial-bg
     in a per-tutorial style hook if a distinct background is needed. */
  color: var(--cn-tutorial-text, #1e293b);
}

/* Sidebar ── own scrollbar so all chapters are always reachable */
.cn-tutorial-sidebar {
  width: 260px;
  flex-shrink: 0;
  min-height: 0;    /* allow flex shrink; enables overflow-y:auto */
  border-right: 2px solid var(--cn-tutorial-sidebar-border, #e2e8f0);
  /* background intentionally omitted — inherit the site theme. The border
     on the right still visually separates the sidebar from the content. */
  overflow-y: auto;
  padding: 24px 0 40px;
}
.cn-sidebar-inner { padding: 0; }
.cn-sidebar-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cn-tutorial-accent, var(--site-accent, #6366f1));
  opacity: 0.75;
  padding: 0 20px 14px;
  font-family: var(--site-text-font-family, inherit);
}
.cn-sidebar-nav { list-style: none; margin: 0; padding: 0; }
.cn-sidebar-nav li { margin: 0; }
.cn-chapter-link {
  display: block;
  padding: 8px 20px;
  font-size: 0.875rem;
  color: var(--site-muted-text, var(--cn-tutorial-text-muted, #475569));
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.15s;
  line-height: 1.4;
  font-family: var(--site-text-font-family, inherit);
}
.cn-chapter-link:hover {
  color: var(--site-accent, var(--cn-tutorial-accent, #6366f1));
  background: var(--cn-tutorial-link-hover-bg, #f8fafc);
  border-left-color: var(--cn-tutorial-link-hover-border, #a5b4fc);
}
.cn-chapter-link.active {
  color: var(--site-accent, var(--cn-tutorial-accent, #6366f1));
  font-weight: 600;
  background: var(--cn-tutorial-link-active-bg, #f1f5f9);
  border-left-color: var(--site-accent, var(--cn-tutorial-accent, #6366f1));
}

/* Content area ── fills remaining width, own scrollbar */
.cn-tutorial-content {
  flex: 1 1 0;      /* flex-basis: 0 so the item can shrink below its content size */
  min-width: 0;
  min-height: 0;    /* required: default min-height:auto prevents overflow-y:auto */
  padding: 48px 64px;
  overflow-y: auto;
  /* background intentionally omitted — inherit from .cn-tutorial-wrapper / body
     so the site theme is visible behind tutorial content. */
  color: var(--site-text, var(--cn-tutorial-text, #1e293b));
}

/* Chapters ── always in DOM (SEO-friendly), separated by dividers */
.cn-chapter {
  display: block;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--cn-tutorial-divider, #f1f5f9);
  margin-bottom: 52px;
}
.cn-chapter:last-child { border-bottom: none; margin-bottom: 0; }

/* Chapter heading
   Color cascade for tutorial layouts:
     --site-*           → primary  (designer overrides + theme presets)
     --cn-tutorial-*    → fallback (legacy theme variable for tutorial-specific tweaks)
     hard-coded         → final fallback if neither variable is set
   This keeps the site theme + custom designer colors flowing into tutorial
   pages. Without --site-* as primary, tutorial pages would visually diverge
   from the rest of the site whenever a custom theme/palette is applied. */
.cn-chapter-heading {
  font-family: var(--site-h2-font-family, var(--site-text-font-family, inherit));
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--site-text, var(--cn-tutorial-text-heading, #0f172a));
  padding-bottom: 14px;
  border-bottom: 3px solid var(--site-accent, var(--cn-tutorial-accent, #6366f1));
}

/* Chapter body typography — structure + font only; colors via variables */
.cn-chapter-body { line-height: 1.78; color: var(--site-text, var(--cn-tutorial-text, #1e293b)); font-family: var(--site-text-font-family, inherit); }
.cn-chapter-body h1 { font-size: 2rem; font-weight: 700; margin: 0 0 24px; color: var(--site-text, var(--cn-tutorial-text-heading, #0f172a)); font-family: var(--site-h1-font-family, var(--site-text-font-family, inherit)); }
.cn-chapter-body h2 { font-size: 1.4rem; font-weight: 600; margin: 44px 0 16px; color: var(--site-text, var(--cn-tutorial-text-heading, #0f172a)); padding-bottom: 8px; border-bottom: 1px solid var(--site-border-color, var(--cn-tutorial-border, #e2e8f0)); font-family: var(--site-h2-font-family, var(--site-text-font-family, inherit)); }
.cn-chapter-body h3 { font-size: 1.1rem; font-weight: 600; margin: 30px 0 12px; color: var(--site-muted-text, var(--cn-tutorial-text-muted, #334155)); font-family: var(--site-h3-font-family, var(--site-text-font-family, inherit)); }
.cn-chapter-body p { margin: 0 0 16px; }
.cn-chapter-body ul, .cn-chapter-body ol { margin: 0 0 16px; padding-left: 24px; }
.cn-chapter-body li { margin-bottom: 6px; }
.cn-chapter-body strong { color: var(--site-text, var(--cn-tutorial-text-heading, #0f172a)); }
/* Inline code + code blocks + tables: structural styling only.
   Background + color come from the global `code` / `pre` / `th` rules
   (which read --site-* variables), so the site theme drives the look.
   Per-tutorial overrides can still set --cn-tutorial-code-bg etc. on a
   wrapper if a distinct treatment is wanted. */
.cn-chapter-body code { padding: 2px 6px; border-radius: 4px; font-size: 0.88em; font-family: 'Fira Code', 'Consolas', monospace; }
.cn-chapter-body pre { padding: 20px 24px; border-radius: 8px; overflow-x: auto; margin: 0 0 20px; line-height: 1.6; }
.cn-chapter-body pre code { background: none; color: inherit; padding: 0; font-size: 0.875rem; }
.cn-chapter-body blockquote { border-left: 4px solid var(--site-accent, var(--cn-tutorial-accent, #6366f1)); margin: 0 0 16px; padding: 12px 20px; border-radius: 0 6px 6px 0; color: var(--site-muted-text, var(--cn-tutorial-text-muted, #475569)); }
.cn-chapter-body img { max-width: 100%; border-radius: 8px; margin: 16px 0; }
.cn-chapter-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.cn-chapter-body th, .cn-chapter-body td { padding: 10px 16px; border: 1px solid var(--site-border-color, var(--cn-tutorial-border, #e2e8f0)); text-align: left; color: var(--site-text, var(--cn-tutorial-text, #1e293b)); }
.cn-chapter-body th { font-weight: 600; color: var(--site-text, var(--cn-tutorial-text-heading, #0f172a)); }
.cn-chapter-body a { color: var(--site-accent, var(--cn-tutorial-accent, #6366f1)); text-decoration: underline; }
.cn-chapter-body a:hover { opacity: 0.8; }

/* Mobile: revert to normal page scroll, sidebar becomes a horizontal top strip */
/* Legal document layout — one centered column, narrow measure for legal
   prose, generous vertical rhythm. Site theme controls colors via the same
   cascade as the tutorial layout: --site-* primary, hard-coded fallback. */
.export-section.legal-document,
section.legal-document { padding: 80px 24px; }
.legal-document .layout-wrap { max-width: 760px; margin: 0 auto; }
.legal-document h1 {
  font-family: var(--site-h1-font-family, var(--site-text-font-family, inherit));
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700; line-height: 1.15;
  color: var(--site-text, #0f172a);
  margin: 0 0 12px;
}
.legal-document .legal-meta {
  font-size: 0.9rem;
  color: var(--site-muted-text, #64748b);
  margin: 0 0 40px;
}
.legal-document h2 {
  font-family: var(--site-h2-font-family, var(--site-text-font-family, inherit));
  font-size: 1.4rem; font-weight: 600;
  color: var(--site-text, #0f172a);
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--site-border-color, #e2e8f0);
}
.legal-document h3 {
  font-family: var(--site-h3-font-family, var(--site-text-font-family, inherit));
  font-size: 1.1rem; font-weight: 600;
  color: var(--site-text, #1e293b);
  margin: 28px 0 12px;
}
.legal-document p {
  font-family: var(--site-text-font-family, inherit);
  font-size: 1rem; line-height: 1.7;
  color: var(--site-text, #1f2937);
  margin: 0 0 16px;
}
.legal-document ul, .legal-document ol { margin: 0 0 16px; padding-left: 24px; }
.legal-document li { margin-bottom: 6px; line-height: 1.65; color: var(--site-text, #1f2937); }
.legal-document a {
  color: var(--site-accent, #6366f1);
  text-decoration: underline;
}
.legal-document a:hover { opacity: 0.8; }
.legal-document strong { color: var(--site-text, #0f172a); }

@media (max-width: 768px) {
  body:has(.layout-tutorial-doc) { overflow: auto; }
  .cn-tutorial-wrapper { flex-direction: column; height: auto !important; overflow: visible; }
  .cn-tutorial-sidebar {
    width: 100%; border-right: none;
    border-bottom: 2px solid var(--cn-tutorial-sidebar-border, #e2e8f0);
    overflow-x: auto; overflow-y: hidden; padding: 12px 0;
  }
  .cn-tutorial-content { overflow-y: visible; padding: 28px 20px; }
  .cn-sidebar-nav { display: flex; flex-wrap: nowrap; gap: 4px; padding: 0 16px; }
  .cn-chapter-link { padding: 6px 12px; border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .cn-chapter-link.active { border-left-color: transparent; border-bottom-color: var(--site-accent, var(--cn-tutorial-accent, #6366f1)); }
}

/* Empty state */
.cn-tutorial-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; color: var(--site-muted-text, var(--cn-tutorial-text-muted, #94a3b8)); font-size: 0.9rem;
}

/* ── Export Navigation (Growth exported pages) ───────────────────────────── */
.export-navigation-shell {
  position: relative;
  z-index: 11;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  background: var(--export-nav-bg, #ffffff);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--export-nav-border, rgba(31,44,70,0.1)) 65%, transparent);
  color: var(--export-nav-text, #1f2937);
  box-shadow: var(--export-nav-shadow, none);
  backdrop-filter: blur(var(--export-nav-blur, 0px));
}
.export-navigation-shell.sticky { position: sticky; top: 0; z-index: 1000; }
.export-navigation-content {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 10px var(--export-nav-padding, 20px);
}
.export-navigation-content.container { max-width: 1100px; margin-inline: auto; }
.export-navigation-content.full { max-width: none; }
.export-navigation-content.logo-left-menu-right { grid-template-columns: auto 1fr; }
.export-navigation-content.logo-left-menu-center { grid-template-columns: auto 1fr; }
.export-nav-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.export-nav-brand {
  display: inline-flex;
  align-items: center;
  color: var(--export-nav-text, #1f2937);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.export-nav-brand img { max-height: 52px; width: auto; display: block; }
.export-navigation-menu {
  justify-self: end;
  min-width: 0;
  position: relative;
  font-family: var(--export-nav-font-family, "Open Sans", Arial, sans-serif);
}
.export-navigation-menu.justify-left { justify-self: start; }
.export-navigation-menu.justify-center { justify-self: center; }
.export-navigation-menu.justify-right { justify-self: end; }
.export-navigation-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--export-nav-item-gap, 8px);
  flex-wrap: wrap;
}
.export-nav-item { position: relative; }
.export-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--export-nav-item-pad-y, 8px) var(--export-nav-item-pad-x, 12px);
  color: var(--export-nav-text, #1f2937);
  text-decoration: none;
  font-size: var(--export-nav-font-size, 14px);
  font-weight: var(--export-nav-font-weight, 700);
  letter-spacing: var(--export-nav-letter-spacing, 0px);
  text-transform: var(--export-nav-transform, none);
  border-radius: var(--export-nav-item-radius, 10px);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.export-nav-link:hover {
  color: var(--export-nav-hover, #0b81be);
  background: var(--export-nav-hover-bg, rgba(11,129,190,0.10));
}
/* Dropdown submenu */
.export-navigation-submenu {
  display: none;
  position: absolute;
  top: calc(100% + var(--export-submenu-offset, 8px));
  left: 0;
  min-width: var(--export-submenu-width, 220px);
  background: var(--export-submenu-bg, #ffffff);
  border: 1px solid var(--export-submenu-border, rgba(31,41,55,0.12));
  border-radius: var(--export-submenu-radius, 12px);
  box-shadow: var(--export-submenu-shadow, 0 4px 16px rgba(11,25,45,0.14));
  padding: 6px 0;
  z-index: 100;
  flex-direction: column;
  gap: 0;
}
.export-nav-item.has-children:hover > .export-navigation-submenu,
.export-nav-item.has-children:focus-within > .export-navigation-submenu { display: flex; }
.export-navigation-submenu .export-nav-link {
  color: var(--export-submenu-text, #1f2937);
  padding: 8px 14px;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
}
.export-navigation-submenu .export-nav-link:hover {
  color: var(--export-submenu-hover, #0b81be);
  background: var(--export-submenu-hover-bg, rgba(11,129,190,0.10));
}
/* ── Rich (mega-menu) submenu items: thumbnail + title + subtitle ── */
.export-navigation-submenu .export-nav-rich-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; min-width: 260px;
}
.export-nav-thumb {
  width: 44px; height: 44px; flex: 0 0 44px;
  object-fit: cover; border-radius: 8px; background: rgba(0,0,0,0.05);
}
.export-nav-rich-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.export-nav-rich-title { font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.export-nav-rich-sub { font-size: 0.78rem; line-height: 1.3; color: rgba(0,0,0,0.55); }
/* Mobile toggle button — hidden on desktop */
.export-mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--export-nav-text, #1f2937) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--export-nav-text, #1f2937) 8%, transparent);
  color: var(--export-nav-text, #1f2937);
  cursor: pointer;
  flex-shrink: 0;
}
.export-mobile-nav-toggle i { font-size: 22px; line-height: 1; }
.export-mobile-nav-backdrop { display: none; }

/* ── Mobile: slide-in drawer ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .export-navigation-content { grid-template-columns: 1fr; }
  .export-mobile-nav-toggle { display: inline-flex; }
  .export-navigation-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 88vw);
    max-width: 100%;
    z-index: 10002;
    margin: 0;
    padding: 72px 16px 24px;
    box-sizing: border-box;
    background: var(--export-nav-bg, #ffffff);
    box-shadow: -12px 0 40px rgba(0,0,0,0.28);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    overflow-x: hidden;
    justify-self: stretch;
  }
  .export-navigation-menu ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .export-nav-link { width: 100%; box-sizing: border-box; white-space: normal; justify-content: flex-start; }
  .export-navigation-shell.mobile-nav-open .export-navigation-menu { transform: translateX(0); }
  .export-mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(12,18,32,0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .export-navigation-shell.mobile-nav-open .export-mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body:has(.export-navigation-shell.mobile-nav-open) { overflow: hidden; }
  /* Submenus become inline in mobile drawer */
  .export-navigation-submenu {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid rgba(11,129,190,0.3);
    margin: 0 0 8px 8px;
    padding: 4px 0;
    min-width: auto;
    background: transparent;
  }
  .export-nav-item.has-children:hover > .export-navigation-submenu,
  .export-nav-item.has-children:focus-within > .export-navigation-submenu { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BI Insights — entity catalog (orgs / projects / facilities / etc.)
   ───────────────────────────────────────────────────────────────────────────
   Rendered by cms-service's BiHtmlService at /insights/* routes. The
   token strategy mirrors news rendering:

     PAGE BG (dark in HFN default theme):
       --cms-bg, --cms-bg-soft, --cms-text, --cms-text-muted, --cms-border

     CARD SURFACE (light card on dark bg):
       --cms-surface, --cms-card-text, --cms-card-muted, --cms-card-border

     ACCENT (links, primary buttons, hover):
       --cms-accent, --cms-accent-contrast

   Three context classes are namespaced under `.bi-` so they never collide
   with the news, account, or designer rules above. Status badges keep
   their distinct hues (planned/operational/etc.) because that signal
   is dimension-specific, not theme-specific.
   ═══════════════════════════════════════════════════════════════════════════ */
.bi-shell { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem; color: var(--cms-text); font-family: var(--cms-font-family, 'Inter', 'SF Pro Display', 'Segoe UI', Arial, sans-serif); }

.bi-breadcrumb { font-size: 13px; color: var(--cms-text-muted); margin-bottom: .5rem; }
.bi-breadcrumb a { color: var(--cms-text-muted); text-decoration: none; }
.bi-breadcrumb a:hover { color: var(--cms-text); text-decoration: underline; }

.bi-h1 { font-size: 28px; margin: 0 0 .25rem; color: var(--cms-text); font-family: var(--site-h1-font-family, inherit); font-weight: 700; letter-spacing: 0; }
.bi-page-lead { color: var(--cms-text-muted); margin: 0 0 1.5rem; font-size: 14px; }
.bi-h2 { font-size: 20px; margin: 2rem 0 .75rem; color: var(--cms-text); font-family: var(--site-h2-font-family, inherit); font-weight: 700; }

.bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }

/* Card stretches to fill its grid row; flex column with auto-margin on
   .bi-card-meta pins the footer (tags + mentions) to the bottom-right
   regardless of how short or long the .bi-card-sub description is. */
.bi-card { display: flex; flex-direction: column; padding: .9rem 1rem; background: var(--cms-surface); border: 1px solid var(--cms-card-border); border-radius: var(--cms-radius, 8px); text-decoration: none; color: var(--cms-card-text); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; height: 100%; }
.bi-card:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0, 0, 0, .22); border-color: var(--cms-accent); }
.bi-card-name { font-weight: 700; font-size: 15px; margin-bottom: .25rem; color: var(--cms-card-text); }
.bi-card-sub { color: var(--cms-card-muted); font-size: 13px; margin-bottom: .5rem; }
.bi-card-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: 12px; margin-top: auto; }
.bi-tag { background: var(--cms-surface-muted); color: var(--cms-card-text); padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.bi-mentions { margin-left: auto; color: var(--cms-card-muted); font-weight: 600; }

.bi-status { padding: 2px 8px; border-radius: 999px; font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .03em; }
.bi-status--announced { background: #cfe2ff; color: #084298; }
.bi-status--planned { background: #ddd6fe; color: #5b21b6; }
.bi-status--under_construction { background: #fde68a; color: #92400e; }
.bi-status--operational { background: #bbf7d0; color: #166534; }
.bi-status--completed { background: #cfe2ff; color: #1e40af; }
.bi-status--cancelled { background: #fecaca; color: #991b1b; }
.bi-status--_unknown { background: rgba(255, 255, 255, .12); color: var(--cms-text-muted); }

.bi-search { display: flex; gap: .5rem; margin: .5rem 0 1.25rem; }
.bi-search input { flex: 1; padding: .55rem .8rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); font-size: 14px; background: rgba(255, 255, 255, .08); color: var(--cms-text); font-family: inherit; }
.bi-search input::placeholder { color: var(--cms-text-muted); }
.bi-search button { padding: .55rem 1rem; background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border: 0; border-radius: var(--cms-radius, 8px); font-weight: 700; cursor: pointer; font-family: inherit; }
.bi-search button:hover { opacity: .9; }

.bi-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 2rem 0 1rem; }
.bi-page { padding: .5rem .9rem; background: rgba(255, 255, 255, .06); border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); text-decoration: none; color: var(--cms-text); font-weight: 700; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.bi-page:hover { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }
.bi-page-label { color: var(--cms-text-muted); font-size: 13px; }

.bi-detail-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .25rem 0 1.5rem; color: var(--cms-text); }
.bi-section { margin: 1.5rem 0; }

.bi-mention-row { padding: .85rem 0; border-bottom: 1px solid var(--cms-border); color: var(--cms-text); }
.bi-mention-row:last-child { border-bottom: 0; }
.bi-mention-title { font-weight: 700; color: var(--cms-text); font-size: 15px; }
.bi-mention-title a { color: var(--cms-text); text-decoration: none; }
.bi-mention-title a:hover { color: var(--cms-accent); text-decoration: underline; }
.bi-mention-meta { color: var(--cms-text-muted); font-size: 12.5px; margin: .15rem 0 .35rem; }
.bi-mention-context { color: var(--cms-text); opacity: .85; font-size: 13.5px; line-height: 1.6; }

.bi-empty { padding: 2rem 1rem; text-align: center; color: var(--cms-text-muted); }

/* "Browse all <Dim> A..Z" CTA on the paginated dim list pages and the */
/* A..Z index page itself. The CTA sits just below the H1 to signal the */
/* alternative navigation path without competing with the search box.   */
.bi-az-link { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 1rem; padding: .35rem .65rem; border-radius: var(--cms-radius, 8px); background: rgba(255, 255, 255, .06); border: 1px solid var(--cms-border); color: var(--cms-accent); font-weight: 700; font-size: 13px; text-decoration: none; }
.bi-az-link:hover { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }

.bi-az-shell { max-width: 1100px; }
.bi-az-sub { color: var(--cms-text-muted); font-size: 14px; margin: .25rem 0 1.25rem; }

.bi-az-rail { display: flex; flex-wrap: wrap; gap: .25rem; position: sticky; top: 0; z-index: 5; padding: .65rem .5rem; margin: 0 -.5rem 1.25rem; background: var(--cms-bg, var(--cms-surface, #0b1220)); border-bottom: 1px solid var(--cms-border); }
.bi-az-rail-item { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: .25rem .45rem; border-radius: 6px; font-weight: 700; font-size: 13px; text-decoration: none; color: var(--cms-text); background: rgba(255, 255, 255, .06); border: 1px solid var(--cms-border); }
.bi-az-rail-item:hover { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }
.bi-az-rail-item.is-empty { opacity: .35; cursor: default; }
.bi-az-rail-item.is-empty:hover { background: rgba(255, 255, 255, .06); color: var(--cms-text); border-color: var(--cms-border); }

.bi-az-group { margin: 1rem 0 1.5rem; scroll-margin-top: 60px; }
.bi-az-heading { font-size: 22px; margin: 0 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid var(--cms-border); color: var(--cms-text); font-weight: 800; }
.bi-az-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .35rem .75rem; }
.bi-az-list li { font-size: 14px; line-height: 1.5; }
.bi-az-list li a { color: var(--cms-text); text-decoration: none; }
.bi-az-list li a:hover { color: var(--cms-accent); text-decoration: underline; }
.bi-az-count { color: var(--cms-text-muted); font-size: 12px; margin-left: .25rem; }

.bi-az-rail-item.is-active { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }

/* Hub tile grid — one tile per non-empty letter with its count. */
.bi-az-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem; margin-top: .25rem; }
.bi-az-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .85rem .5rem; border-radius: var(--cms-radius, 8px); background: rgba(255, 255, 255, .06); border: 1px solid var(--cms-border); color: var(--cms-text); text-decoration: none; transition: background .12s ease, border-color .12s ease, transform .12s ease; }
.bi-az-tile:hover { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); transform: translateY(-1px); }
.bi-az-tile-letter { font-size: 24px; font-weight: 800; line-height: 1; }
.bi-az-tile-count { font-size: 12px; opacity: .75; margin-top: .25rem; }

/* Prev / next letter nav at the bottom of per-letter pages. */
.bi-az-prev-next { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin: 2rem 0 1rem; }
.bi-az-prev-next > * { font-weight: 700; font-size: 13px; text-decoration: none; color: var(--cms-text); padding: .55rem .85rem; border-radius: var(--cms-radius, 8px); background: rgba(255, 255, 255, .06); border: 1px solid var(--cms-border); text-align: center; }
.bi-az-prev { justify-self: start; }
.bi-az-next { justify-self: end; }
.bi-az-back { justify-self: center; color: var(--cms-accent); }
.bi-az-prev:hover, .bi-az-next:hover, .bi-az-back:hover { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }

/* Toolbar above the search input — All Z + My saved searches links. */
.bi-list-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }

/* Sort dropdown lives inline with the main search input. */
.bi-sort-select { padding: .55rem .8rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); background: rgba(255, 255, 255, .08); color: var(--cms-text); font-size: 14px; font-family: inherit; }

/* Saved searches: pill row above search + cards inside details. */
.bi-saved-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .85rem; }
.bi-saved-pill { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--cms-border); color: var(--cms-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.bi-saved-pill:hover { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }
.bi-saved-pill.is-active { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }

/* Advanced search panel — collapsible details element. */
.bi-advanced { border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); padding: 0; margin: 0 0 1.25rem; background: rgba(255, 255, 255, .04); }
.bi-advanced > summary { padding: .65rem .9rem; cursor: pointer; font-weight: 700; color: var(--cms-text); list-style: none; }
.bi-advanced > summary::-webkit-details-marker { display: none; }
.bi-advanced > summary::after { content: '+'; float: right; font-weight: 800; opacity: .7; }
.bi-advanced[open] > summary::after { content: '−'; }
.bi-advanced-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; padding: 0 .9rem .9rem; }
.bi-advanced-field { display: flex; flex-direction: column; gap: .25rem; font-size: 13px; color: var(--cms-text-muted); }
.bi-advanced-field input, .bi-advanced-field select { padding: .5rem .7rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); background: rgba(255, 255, 255, .06); color: var(--cms-text); font-family: inherit; font-size: 14px; }
.bi-advanced-actions { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: center; }
.bi-advanced-apply { padding: .55rem 1rem; background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border: 0; border-radius: var(--cms-radius, 8px); font-weight: 700; cursor: pointer; font-family: inherit; }
.bi-advanced-clear { color: var(--cms-text-muted); font-size: 13px; text-decoration: underline; }

/* Inline save form below the advanced filters. */
.bi-advanced-save { display: flex; gap: .5rem; align-items: center; padding: .75rem .9rem; border-top: 1px solid var(--cms-border); background: rgba(0, 0, 0, .1); }
.bi-advanced-save input[type="text"] { flex: 1; padding: .5rem .7rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); background: rgba(255, 255, 255, .06); color: var(--cms-text); font-family: inherit; font-size: 14px; }
.bi-advanced-save-btn { padding: .5rem 1rem; background: transparent; color: var(--cms-text); border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); font-weight: 700; cursor: pointer; font-family: inherit; }
.bi-advanced-save-btn:hover { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }
.bi-advanced-save-empty { padding: .75rem .9rem; border-top: 1px solid var(--cms-border); color: var(--cms-text-muted); font-size: 13px; font-style: italic; background: rgba(0, 0, 0, .08); }

/* Locked variant for non-subscribers. */
.bi-advanced--locked { background: linear-gradient(135deg, rgba(56, 189, 248, .08), rgba(99, 102, 241, .08)); border-color: color-mix(in srgb, var(--cms-accent) 40%, transparent); padding: .75rem .9rem; }
.bi-advanced-head { display: flex; align-items: center; gap: .5rem; }
.bi-advanced-lock { font-size: 11px; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--cms-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bi-advanced-locked-msg { font-size: 13.5px; color: var(--cms-text); margin: .35rem 0 0; line-height: 1.5; }
.bi-advanced-locked-msg .cms-link { color: var(--cms-accent); font-weight: 700; text-decoration: none; margin-left: .25rem; }
.bi-advanced-locked-msg .cms-link:hover { text-decoration: underline; }

/* /account/saved-searches page styling. */
.cms-auth-shell--wide { max-width: 880px; }
.cms-auth-card--wide { padding: 28px 28px; }
.cms-saved-section { margin: 1.25rem 0 1.75rem; }
.cms-saved-section h2 { font-size: 18px; margin: 0 0 .65rem; display: flex; align-items: baseline; gap: .5rem; color: var(--cms-text); }
.cms-saved-count { font-size: 12px; color: var(--cms-text-muted); font-weight: 500; }
.cms-saved-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.cms-saved-item { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .65rem .85rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); background: rgba(255, 255, 255, .04); }
.cms-saved-main { flex: 1; min-width: 0; }
.cms-saved-name { color: var(--cms-text); font-weight: 700; text-decoration: none; }
.cms-saved-name:hover { color: var(--cms-accent); }
.cms-saved-meta { margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.cms-saved-chip { font-size: 11.5px; padding: .15rem .45rem; border-radius: 4px; background: rgba(255, 255, 255, .06); color: var(--cms-text-muted); }
.cms-saved-empty { font-size: 12px; color: var(--cms-text-muted); font-style: italic; }
.cms-saved-del button { padding: .35rem .7rem; background: transparent; color: var(--cms-text-muted); border: 1px solid var(--cms-border); border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit; }
.cms-saved-del button:hover { background: rgba(239, 68, 68, .15); color: #fca5a5; border-color: #ef4444; }
.cms-saved-empty-state { padding: 1.5rem; text-align: center; color: var(--cms-text-muted); border: 1px dashed var(--cms-border); border-radius: var(--cms-radius, 8px); }
.cms-saved-empty-state a { color: var(--cms-accent); }

/* "Continue with Google" button + divider, rendered above the email form
   on signup/login. Uses the standard cms-button as its base so any theme
   override (radius, font, spacing) carries through, then overlays a white
   Google-brand chip inside a translucent card. */
/* Google G brand chip. Text color has to be re-declared on every state
   because the base .cms-button:hover in most themes flips color to white
   (or to accent-contrast). Without explicit colors here, hovering the
   button gave white text on a white background — the label vanished. */
.cms-button--google,
.cms-button--google:link,
.cms-button--google:visited { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; background: #fff; color: #1f2937; border: 1px solid rgba(0, 0, 0, .12); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); text-decoration: none; }
.cms-button--google:hover,
.cms-button--google:focus,
.cms-button--google:active { background: #f8f9fa; color: #1f2937; border-color: rgba(0, 0, 0, .18); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); text-decoration: none; }
.cms-button--google > span,
.cms-button--google:hover > span,
.cms-button--google:focus > span { color: inherit; }
.cms-button-google-icon { display: block; flex-shrink: 0; }
.cms-auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--cms-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.cms-auth-divider::before,
.cms-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--cms-border); }

/* ─── Article trust badge + research button (article header) ─────── */
/* High-contrast SOLID-fill variants so they read as buttons on both    */
/* dark CMS chrome and light card surfaces. Each variant carries its    */
/* own text colour (white) sitting on a saturated background so colour  */
/* survives card hover states and mobile reflows.                       */
.cms-trust-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border-radius: 999px; font-size: 12px; font-weight: 800; text-decoration: none; border: 1px solid transparent; color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); transition: transform .12s ease, filter .12s ease; }
.cms-trust-badge:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cms-trust-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.cms-trust-badge-score { opacity: .85; font-weight: 700; }
.cms-trust-badge--high   { background: #16a34a; border-color: #15803d; }
.cms-trust-badge--medium { background: #f59e0b; border-color: #b45309; color: #1f1300; }
.cms-trust-badge--medium .cms-trust-badge-dot { background: rgba(0, 0, 0, .35); }
.cms-trust-badge--low    { background: #dc2626; border-color: #991b1b; }

.cms-article-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .75rem 0 1rem; }
.cms-research-cta { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: var(--cms-radius, 8px); background: var(--cms-accent); border: 1px solid var(--cms-accent); color: var(--cms-accent-contrast, #fff); font-weight: 800; font-size: 13px; text-decoration: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); transition: transform .12s ease, filter .12s ease; }
.cms-research-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cms-research-cta-icon { font-size: 14px; line-height: 1; }

/* ─── Article-card badges (preview surfaces) ────────────────────── */
/* Sit at the bottom of the card body, below the meta line. Inert      */
/* pills — the parent <a class="cms-card"> handles the click; hovering */
/* a pill surfaces the `title` tooltip explainer.                      */
.cms-card-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.cms-card-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; font-size: 11.5px; font-weight: 800; border: 1px solid transparent; color: #fff; line-height: 1.2; cursor: help; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.cms-card-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.cms-card-badge-score { opacity: .85; font-weight: 700; }
.cms-card-badge-icon { font-size: 12px; line-height: 1; }
.cms-card-badge--trust-high   { background: #16a34a; border-color: #15803d; }
.cms-card-badge--trust-medium { background: #f59e0b; border-color: #b45309; color: #1f1300; }
.cms-card-badge--trust-medium .cms-card-badge-dot { background: rgba(0, 0, 0, .35); }
.cms-card-badge--trust-low    { background: #dc2626; border-color: #991b1b; }
.cms-card-badge--research     { background: var(--cms-accent); border-color: var(--cms-accent); color: var(--cms-accent-contrast, #fff); }

/* Score-only variant for cards — compact circular chip with just the   */
/* numeric trust level, matching the ghostnews editorial UI. Fixed      */
/* min-width so single- and double-digit scores look balanced.          */
.cms-card-badge--score-only { padding: 0; min-width: 26px; height: 26px; justify-content: center; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; }

/* ─── Article feedback widget ─────────────────────────────────────── */
.cms-feedback { margin: 1.25rem 0 1rem; padding: .55rem .75rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--cms-border); border-radius: var(--cms-radius, 8px); }
.cms-feedback-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; }
.cms-feedback-prompt { font-weight: 700; font-size: 13px; color: var(--cms-text); }
.cms-feedback-agg { font-size: 11.5px; color: var(--cms-text-muted); }
.cms-feedback-control { display: inline-flex; gap: .15rem; margin: .3rem 0 .15rem; align-items: center; }
.cms-feedback-star, .cms-feedback-thumb, .cms-feedback-num { background: transparent; border: 0; cursor: pointer; padding: .15rem .2rem; font: inherit; line-height: 1; color: var(--cms-text-muted); transition: transform .12s ease, color .12s ease; }
/* `font: inherit` above pulls the article body font; many custom UI fonts
   (Inter, Manrope, …) ship without the BLACK STAR glyph (U+2605) and
   render it as tofu. Forcing a Unicode-symbol-rich stack here keeps the
   star + thumbs visible regardless of the operator's theme font. */
.cms-feedback-star, .cms-feedback-thumb { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', 'Arial Unicode MS', Arial, sans-serif; }
.cms-feedback-star { font-size: 18px; letter-spacing: .02rem; }
.cms-feedback-star:hover, .cms-feedback-star.is-selected { color: #f59e0b; transform: scale(1.08); }
.cms-feedback-thumb { font-size: 18px; padding: .2rem .35rem; border-radius: 6px; }
.cms-feedback-thumb:hover, .cms-feedback-thumb.is-selected { background: rgba(255, 255, 255, .08); color: var(--cms-accent); }
.cms-feedback-control--numeric { flex-wrap: wrap; gap: .25rem; }
.cms-feedback-num { padding: .2rem .4rem; min-width: 24px; border: 1px solid var(--cms-border); border-radius: 5px; color: var(--cms-text); background: rgba(255, 255, 255, .04); font-weight: 700; font-size: 12px; }
.cms-feedback-num:hover, .cms-feedback-num.is-selected { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }
.cms-feedback-thanks { margin-top: .25rem; font-size: 12.5px; color: var(--cms-accent); font-weight: 700; }
.cms-feedback-comment { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.cms-feedback-comment-label { font-size: 11.5px; color: var(--cms-text-muted); }
.cms-feedback-private { font-style: italic; opacity: .75; }
.cms-feedback-comment textarea { width: 100%; padding: .45rem .6rem; border-radius: var(--cms-radius, 8px); border: 1px solid var(--cms-border); background: rgba(255, 255, 255, .04); color: var(--cms-text); font: inherit; font-size: 12.5px; resize: vertical; min-height: 44px; }
.cms-feedback-send { align-self: flex-start; padding: .25rem .7rem; background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; font: inherit; font-size: 12.5px; }
.cms-feedback-send:hover { filter: brightness(1.08); }
.cms-feedback-comment-sent { padding: .25rem 0; color: var(--cms-accent); font-weight: 700; font-size: 12.5px; }

/* ─── Verification page ──────────────────────────────────────────── */
.cms-verify-shell { max-width: 900px; }
.cms-verify-diagnosis { font-size: 15px; color: var(--cms-text); background: rgba(255, 255, 255, .04); border-left: 3px solid var(--cms-accent); padding: .65rem .85rem; border-radius: 4px; margin: .75rem 0 1.25rem; }
.cms-verify-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.cms-verify-item { padding: .85rem 1rem; border-radius: var(--cms-radius, 8px); border-left: 4px solid var(--cms-border); background: rgba(255, 255, 255, .04); }
.cms-verify-item--verified     { border-left-color: #10b981; }
.cms-verify-item--inconclusive { border-left-color: #f59e0b; }
.cms-verify-item--unverified   { border-left-color: #ef4444; }
.cms-verify-claim { font-weight: 700; color: var(--cms-text); font-size: 15px; line-height: 1.45; }
.cms-verify-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: .35rem 0 0; font-size: 13px; }
.cms-verify-status { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 4px; background: rgba(255, 255, 255, .08); color: var(--cms-text); }
.cms-verify-notes { color: var(--cms-text-muted); }
.cms-verify-sources { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.cms-verify-sources li { font-size: 12px; }
.cms-verify-sources a { color: var(--cms-accent); text-decoration: none; padding: .15rem .45rem; border-radius: 4px; background: rgba(255, 255, 255, .06); border: 1px solid var(--cms-border); }
.cms-verify-sources a:hover { background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border-color: var(--cms-accent); }
.cms-verify-detailed { margin-top: 2rem; }
.cms-verify-detailed h2 { font-size: 18px; margin: 0 0 .5rem; }
.cms-verify-detailed-body { white-space: pre-wrap; color: var(--cms-text); font-size: 14px; line-height: 1.6; padding: .85rem 1rem; background: rgba(255, 255, 255, .04); border-radius: var(--cms-radius, 8px); }
.cms-verify-empty { color: var(--cms-text-muted); padding: 1.5rem; text-align: center; border: 1px dashed var(--cms-border); border-radius: var(--cms-radius, 8px); }
.cms-paywall--verification, .cms-paywall--research { margin-top: 1rem; }

/* ─── Research page ──────────────────────────────────────────────── */
.cms-research-shell { max-width: 960px; }
.cms-research-section { margin: 1.5rem 0; }
.cms-research-section-head { font-size: 20px; margin: 0 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid var(--cms-border); color: var(--cms-text); font-weight: 800; text-transform: capitalize; }
.cms-research-entity-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .75rem; }
.cms-research-entity-card { padding: .85rem 1rem; border-radius: var(--cms-radius, 8px); background: rgba(255, 255, 255, .04); border: 1px solid var(--cms-border); }
.cms-research-entity-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.cms-research-entity-head strong { font-size: 15px; color: var(--cms-text); }
.cms-research-entity-head .cms-research-entity { color: var(--cms-accent); text-decoration: none; font-weight: 700; }
.cms-research-entity-head .cms-research-entity:hover { text-decoration: underline; }
.cms-research-tag { font-size: 11px; padding: .15rem .45rem; border-radius: 4px; background: rgba(255, 255, 255, .08); color: var(--cms-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cms-research-meta { font-size: 12.5px; color: var(--cms-text-muted); }
.cms-research-entity-body { margin-top: .5rem; font-size: 13.5px; color: var(--cms-text); line-height: 1.55; opacity: .9; }
.cms-research-chiprow { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: baseline; font-size: 12px; }
.cms-research-chiplabel { color: var(--cms-text-muted); text-transform: capitalize; margin-right: .25rem; }
.cms-research-chip { padding: .1rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--cms-border); }
.cms-research-chip .cms-research-entity { color: var(--cms-accent); text-decoration: none; }
.cms-research-chip .cms-research-entity:hover { text-decoration: underline; }
.cms-research-paragraph { color: var(--cms-text); font-size: 14px; line-height: 1.6; }
.cms-research-raw { white-space: pre-wrap; word-wrap: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; padding: .85rem 1rem; background: rgba(255, 255, 255, .04); border-radius: var(--cms-radius, 8px); color: var(--cms-text-muted); }
.cms-research-empty { color: var(--cms-text-muted); padding: 1.5rem; text-align: center; border: 1px dashed var(--cms-border); border-radius: var(--cms-radius, 8px); }

.bi-overview-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.bi-overview-tile { background: var(--cms-surface); border: 1px solid var(--cms-card-border); border-radius: var(--cms-radius, 8px); padding: 1.1rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); color: var(--cms-card-text); }
.bi-overview-tile h3 { margin: 0 0 .25rem; font-size: 16px; display: flex; justify-content: space-between; align-items: baseline; color: var(--cms-card-text); font-weight: 700; font-family: var(--site-h3-font-family, inherit); }
.bi-overview-tile h3 a { color: var(--cms-accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.bi-overview-tile h3 a:hover { text-decoration: underline; }
.bi-overview-tile .bi-total { color: var(--cms-card-muted); font-size: 13px; margin-bottom: .5rem; }
.bi-overview-list { margin: 0; padding: 0; list-style: none; }
.bi-overview-list li { padding: .35rem 0; border-bottom: 1px dashed var(--cms-card-border); }
.bi-overview-list li:last-child { border-bottom: 0; }
.bi-overview-list a { color: var(--cms-card-text); text-decoration: none; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; font-weight: 500; }
.bi-overview-list a:hover { color: var(--cms-accent); }
.bi-overview-count { color: var(--cms-card-muted); font-size: 12.5px; font-weight: 700; }

/* ── BI INSIGHTS BUILD MARKER ──────────────────────────────────────────────
   Grep for `BI_CSS_VERSION` in DevTools "Sources" / "Elements" inspector
   to verify which build you're actually rendering. Bumped on every
   meaningful change to the .bi-* section above. */
/* BI_CSS_VERSION: 2026-06-06-v15 (related-section paywall CTA card) */

/* ── BI related-section paywall CTA card ──────────────────────────
   Shown to non-subscribers as the 4th card in each related-entity
   section (Organizations / Projects / Technologies / etc). Visually
   distinct from regular entity cards — accent-colored, hover-lifts,
   the whole card is a link to the subscribe page. */
.bi-card--cta {
  background: linear-gradient(135deg, var(--cms-accent, #38bdf8) 0%, color-mix(in srgb, var(--cms-accent, #38bdf8) 70%, #6366f1) 100%);
  color: #fff;
  border-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .6rem;
  min-height: 130px;
  text-decoration: none;
}
.bi-card--cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); border-color: transparent; }
.bi-card-cta__kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.bi-card-cta__headline { font-size: 15px; font-weight: 700; line-height: 1.3; }
.bi-card-cta__btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ── BI momentum strip (entity detail header) ─────────────────────
   Three side-by-side cards (7d / 30d / 90d) sitting under the H1 +
   activity badge. Each shows current count + a coloured delta chip
   vs the immediately prior window. */
.bi-momentum-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.25rem;
}
.bi-momentum__card {
  background: var(--cms-surface);
  border: 1px solid var(--cms-card-border);
  border-radius: var(--cms-radius, 8px);
  padding: .75rem .9rem;
  color: var(--cms-card-text);
}
.bi-momentum__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cms-card-muted); }
.bi-momentum__row { display: flex; align-items: baseline; gap: .6rem; margin: .25rem 0 .15rem; }
.bi-momentum__count { font-size: 18px; font-weight: 800; color: var(--cms-card-text); }
.bi-momentum__prior { font-size: 12px; color: var(--cms-card-muted); }
.bi-momentum__chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  line-height: 1.5;
}
.bi-momentum__chip--up { background: rgba(34, 197, 94, .18); color: #22c55e; border: 1px solid rgba(34, 197, 94, .35); }
.bi-momentum__chip--down { background: rgba(239, 68, 68, .15); color: #ef4444; border: 1px solid rgba(239, 68, 68, .35); }
.bi-momentum__chip--flat { background: rgba(148, 163, 184, .15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, .3); }
.bi-momentum__chip--new { background: rgba(59, 130, 246, .18); color: #60a5fa; border: 1px solid rgba(59, 130, 246, .35); }

/* ── BI Trending Now (insights landing) ───────────────────────────
   Compact grid of trending entities — name, dim, delta chip, count.
   Sits at the top of the Insights landing above Hot Topics. */
.bi-trending__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .65rem;
  margin-top: .75rem;
}
.bi-trending__item {
  background: var(--cms-surface);
  border: 1px solid var(--cms-card-border);
  border-radius: var(--cms-radius, 8px);
  padding: .65rem .8rem;
  text-decoration: none;
  color: var(--cms-card-text);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: border-color .12s ease, transform .12s ease;
}
.bi-trending__item:hover { border-color: var(--cms-accent); transform: translateY(-1px); }
.bi-trending__name { font-weight: 700; font-size: 14px; color: var(--cms-card-text); }
.bi-trending__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: 11px; }
/* PERSON / ORGANIZATION / TECHNOLOGY chips — kept brighter than the
   plain text so they read as a label even on dark surfaces. Was
   --cms-card-muted; that washed out below 3:1 contrast on HFN dark. */
.bi-trending__dim { color: color-mix(in srgb, var(--cms-card-text) 78%, transparent); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.bi-trending__count { color: color-mix(in srgb, var(--cms-card-text) 78%, transparent); }
.bi-trending__chip {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  line-height: 1.5;
}
.bi-trending__chip--up { background: rgba(34, 197, 94, .18); color: #22c55e; border: 1px solid rgba(34, 197, 94, .35); }
.bi-trending__chip--down { background: rgba(239, 68, 68, .15); color: #ef4444; border: 1px solid rgba(239, 68, 68, .35); }
.bi-trending__chip--flat { background: rgba(148, 163, 184, .15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, .3); }
.bi-trending__chip--new { background: rgba(59, 130, 246, .18); color: #60a5fa; border: 1px solid rgba(59, 130, 246, .35); }

/* ── BI project lifecycle funnel ──────────────────────────────────
   Horizontal bar chart, each row clickable into the filtered project
   listing. Bar widths are proportional to the largest stage count so
   the funnel shape stays readable even when one stage dwarfs the
   rest. */
.bi-lifecycle__chart { display: flex; flex-direction: column; gap: .45rem; margin-top: .75rem; }
.bi-lifecycle__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: .75rem;
  align-items: center;
  text-decoration: none;
  color: var(--cms-card-text);
  padding: .35rem .6rem;
  border-radius: 6px;
  transition: background .12s ease;
}
.bi-lifecycle__row:hover { background: rgba(148, 163, 184, .08); }
/* Lifecycle bars sit on the page background (NOT inside a card) so
   --cms-card-text resolves to the wrong colour on HFN dark. Use the
   page-level --cms-text instead. */
.bi-lifecycle__label { font-weight: 700; font-size: 13px; color: var(--cms-text); }
.bi-lifecycle__bar { position: relative; height: 24px; background: rgba(148, 163, 184, .1); border-radius: 4px; overflow: hidden; }
.bi-lifecycle__bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--cms-accent, #38bdf8), color-mix(in srgb, var(--cms-accent, #38bdf8) 65%, #1e3a8a));
  border-radius: 4px;
  transition: width .25s ease;
}
.bi-lifecycle__count {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px; font-weight: 700;
  color: var(--cms-text);
}
@media (max-width: 560px) {
  .bi-lifecycle__row { grid-template-columns: 120px 1fr; }
}

/* ── BI mention rows for not-yet-published sources ────────────────
   When a mention row ties to a null/draft/deleted article, render
   the row with a muted prefix and lean on the context snippet. Keeps
   the "In the news" count consistent with the activity / momentum
   counts on the same page. */
.bi-mention-row--unlinked { opacity: .85; }
.bi-mention-row--unlinked .bi-mention-title { color: var(--cms-card-muted); }
.bi-mention-unpublished {
  display: inline-flex; align-items: center; gap: .35em;
  font-style: italic; font-weight: 600; font-size: 13px;
  color: var(--cms-card-muted);
}

/* ── BI entity-detail header (h1 + PDF button) ────────────────────
   Lays out the title and a "PDF briefing" button on one row. Button
   triggers the browser print dialog → user picks Save as PDF. No
   server-side generation: print stylesheet below trims chrome, paywall
   blocks and CTAs out of the printed page. */
.bi-entity-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.bi-entity-header .bi-h1 { margin-bottom: 0; }
.bi-pdf-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--cms-card-border);
  background: var(--cms-surface);
  color: var(--cms-card-text);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
  white-space: nowrap;
}
.bi-pdf-btn:hover { border-color: var(--cms-accent); transform: translateY(-1px); background: color-mix(in srgb, var(--cms-accent) 8%, var(--cms-surface)); }

/* ── @media print — entity-page briefing layout ───────────────────
   Strips site chrome, CTAs, paywall banners, and interactive widgets.
   What stays: H1, meta tags, enrichment body, related entities, "in
   the news" list, momentum strip (as a table-like block). Everything
   anchored to the entity itself, none of the surrounding site frame. */
@media print {
  body { background: #fff !important; color: #111 !important; }
  /* Hide site frame */
  header, footer, nav, aside, .cms-header, .cms-footer, .cms-nav,
  .cms-mobile-menu, .cms-paywall, .cms-insights-band,
  .cms-cat-pills-row, .cms-section-title { display: none !important; }
  /* Hide BI interactive bits + CTAs that don't make sense on paper */
  .bi-pdf-btn, .bi-card--cta, .bi-insights-conversion,
  .bi-activity-block, .bi-worldmaps, .bi-worldmap-attrib,
  .bi-az-rail, .bi-az-prev-next, .bi-trending, .bi-lifecycle,
  [data-bi-worldmap], [data-bi-activity] { display: none !important; }
  /* Tighten layout for paper */
  .bi-shell { max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
  .bi-h1, .bi-h2 { color: #111 !important; page-break-after: avoid; }
  .bi-h1 { font-size: 22pt; margin: 0 0 8pt; }
  .bi-h2 { font-size: 14pt; margin: 16pt 0 6pt; border-bottom: 1px solid #ccc; padding-bottom: 2pt; }
  .bi-section { margin: 12pt 0; page-break-inside: avoid; }
  .bi-card, .bi-momentum__card {
    background: #fff !important; color: #111 !important;
    border: 1px solid #ccc !important; box-shadow: none !important;
    page-break-inside: avoid;
  }
  .bi-momentum__count, .bi-momentum__label, .bi-momentum__prior { color: #111 !important; }
  .bi-mention-row { page-break-inside: avoid; border-bottom: 1px solid #ddd; padding: 6pt 0; }
  .bi-mention-title a { color: #111 !important; text-decoration: none !important; }
  .bi-mention-title a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  /* Print URL after enrichment-anchor links so the briefing stays
     useful when read on paper. Keep external link styling subtle. */
  .bi-entity-link[href]::after { content: " [" attr(href) "]"; font-size: 9pt; color: #555; }
  a, a:visited { color: #111 !important; }
  /* Avoid orphaned bullet rows */
  ol, ul { page-break-inside: avoid; }
  /* Print-only footer with date + canonical URL */
  .bi-shell::after {
    content: "Briefing generated from " attr(data-bi-print-url);
    display: block;
    margin-top: 24pt;
    padding-top: 8pt;
    border-top: 1px solid #ccc;
    font-size: 9pt;
    color: #555;
  }
}

/* ── BI entity cross-links (rendered by EnrichmentLinker) ──────────
   Inline anchors inserted into enrichment bodies wherever a named
   entity in the LLM output matched a canonical row in our catalog.
   Draft links get a small pill so the reader knows they're following
   a stub created from this enrichment. */
.bi-entity-link { color: var(--cms-accent, #38bdf8); text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--cms-accent, #38bdf8) 50%, transparent); }
.bi-entity-link:hover { text-decoration: underline; border-bottom-color: var(--cms-accent, #38bdf8); }

.bi-draft-pill {
  display: inline-block;
  margin-left: .35em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(249, 115, 22, .15);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, .35);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.4;
}

/* ── Worldwide footprint maps (lazy-loaded) ─────────────────────────
   Two choropleth panels side-by-side: orgs and projects, both with the
   same blank world basemap shaded by per-country count. Panels share
   the BI card chrome so they sit cleanly alongside the other widgets. */
.bi-worldmaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem; margin-top: 1rem; }
.bi-worldmap-panel {
  background: var(--cms-surface, #fff);
  color: var(--cms-card-text, #0f172a);
  border: 1px solid var(--cms-card-border, rgba(148, 163, 184, .25));
  border-radius: var(--cms-radius, 8px);
  padding: .9rem 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}
.bi-worldmap-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bi-worldmap-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cms-card-muted, #64748b); }
.bi-worldmap-legend { display: inline-flex; align-items: center; gap: 4px; }
.bi-worldmap-legend-label { font-size: 10px; color: var(--cms-card-muted, #94a3b8); text-transform: uppercase; letter-spacing: .06em; }
.bi-worldmap-legend-swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.bi-worldmap-host { position: relative; width: 100%; min-height: 220px; background: #0b1220; border-radius: 6px; overflow: hidden; padding: 4px; }
.bi-worldmap-host svg { display: block; width: 100%; height: auto; }
.bi-worldmap-host path[data-bi-country],
.bi-worldmap-host polyline[data-bi-country],
.bi-worldmap-host polygon[data-bi-country] { cursor: pointer; }
.bi-worldmap-host path[data-bi-country]:hover,
.bi-worldmap-host polyline[data-bi-country]:hover,
.bi-worldmap-host polygon[data-bi-country]:hover { filter: brightness(1.25); }
.bi-worldmap-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--cms-card-muted, #64748b); font-size: 13px; }
.bi-worldmap-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, .95);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.bi-worldmap-top { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 13px; }
.bi-worldmap-top li { display: flex; justify-content: space-between; align-items: center; }
.bi-worldmap-top li.bi-empty { grid-column: 1 / -1; justify-content: center; color: var(--cms-card-muted, #64748b); font-style: italic; }
.bi-worldmap-attrib { margin: .5rem 0 0; font-size: 11px; color: var(--cms-card-muted, #94a3b8); text-align: right; }
.bi-worldmap-attrib a { color: inherit; text-decoration: underline; }

/* ── BI Activity-level block (lazy-loaded meter + monthly chart) ────
   Two cards side-by-side: a 4-step bar meter (none/low/medium/high/
   very_high → 0/1/2/3/4 bars) on the left, the 12-month bar chart on
   the right. Both cards share the same white card chrome. Hidden
   entirely from anonymous viewers (the placeholder is never emitted
   server-side). */
.bi-activity-block {
  margin: .35rem 0 1.25rem;
  display: flex;
  flex-direction: row;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.bi-activity-card,
.bi-activity-chart {
  background: var(--cms-surface, #fff);
  color: var(--cms-card-text, #0f172a);
  border: 1px solid var(--cms-card-border, rgba(148, 163, 184, .25));
  border-radius: var(--cms-radius, 8px);
  padding: .75rem .9rem .65rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  box-sizing: border-box;
}

.bi-activity-card { flex: 0 0 auto; min-width: 180px; display: flex; flex-direction: column; justify-content: space-between; gap: .55rem; }
.bi-activity-card__title,
.bi-activity-chart__title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cms-card-muted, #64748b); margin: 0 0 .25rem; }
.bi-activity-card__caption { font-size: 13px; font-weight: 600; color: var(--cms-card-text, #0f172a); font-variant-numeric: tabular-nums; }
.bi-activity-card--loading .bi-activity-card__caption,
.bi-activity-card--unavailable .bi-activity-card__caption { color: var(--cms-card-muted, #94a3b8); font-weight: 500; }

.bi-activity-card__meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 6px;
  height: 36px;
  margin: .1rem 0 .2rem;
}
.bi-activity-card__step {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--cms-card-border, rgba(148, 163, 184, .25));
  /* heights are quartiles so a 4-bar meter visually escalates */
}
.bi-activity-card__step[data-step="1"] { height: 25%; }
.bi-activity-card__step[data-step="2"] { height: 50%; }
.bi-activity-card__step[data-step="3"] { height: 75%; }
.bi-activity-card__step[data-step="4"] { height: 100%; }
.bi-activity-card__step.is-filled { background: var(--bi-activity-fg, #94a3b8); }
.bi-activity-card--level-none      { --bi-activity-fg: #64748b; }
.bi-activity-card--level-low       { --bi-activity-fg: #0ea5e9; }
.bi-activity-card--level-medium    { --bi-activity-fg: #22c55e; }
.bi-activity-card--level-high      { --bi-activity-fg: #f97316; }
.bi-activity-card--level-very_high { --bi-activity-fg: #ef4444; }

/* Standalone level modifier — applied per-bar inside the monthly chart.
   Same palette as the meter, so a high-activity month shows the same
   orange the meter does at that level. */
.bi-activity--level-none      { --bi-activity-fg: #cbd5e1; }
.bi-activity--level-low       { --bi-activity-fg: #0ea5e9; }
.bi-activity--level-medium    { --bi-activity-fg: #22c55e; }
.bi-activity--level-high      { --bi-activity-fg: #f97316; }
.bi-activity--level-very_high { --bi-activity-fg: #ef4444; }

.bi-activity-chart { flex: 1 1 360px; min-width: 280px; }
.bi-activity-chart__bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
/* Two-row grid: bar zone has a hard 80px height (so %-heights resolve),
   labels sit in their own auto-sized row below. The bar uses align-self:end
   so it grows from the bottom of the row up. */
.bi-activity-chart__col { display: grid; grid-template-rows: 80px auto; row-gap: .25rem; min-width: 0; }
.bi-activity-chart__bar { width: 100%; min-height: 2px; align-self: end; border-radius: 3px 3px 0 0; background: var(--bi-activity-fg, #cbd5e1); opacity: .9; transition: opacity .15s ease; }
.bi-activity-chart__col:hover .bi-activity-chart__bar { opacity: 1; }
.bi-activity-chart__lbl { font-size: 10px; color: var(--cms-card-muted, #64748b); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-align: center; }
.bi-activity-chart--loading .bi-activity-chart__bars { opacity: .3; }
@media (max-width: 520px) {
  .bi-activity-chart__col { grid-template-rows: 64px auto; }
  .bi-activity-chart__bars { gap: 4px; }
  .bi-activity-chart__lbl { font-size: 9px; }
  .bi-activity-card { min-width: 140px; }
}

/* ── BI Activity-level badge (lazy-loaded) ─────────────────────────
   Pill rendered just under the H1 on every entity-detail page for
   authenticated viewers. Five levels mapped to a cold→hot palette:
     none      slate (cold gray)
     low       cyan
     medium    green
     high      orange
     very_high red
   The loading state stays neutral so a slow fetch doesn't flash
   bright colours; the unavailable state is muted gray. */
.bi-activity {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .25rem 0 .75rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--bi-activity-border, rgba(148, 163, 184, .35));
  background: var(--bi-activity-bg, rgba(148, 163, 184, .15));
  color: var(--bi-activity-fg, var(--cms-text, inherit));
  letter-spacing: .01em;
}
.bi-activity__label { text-transform: uppercase; font-size: 11px; opacity: .8; letter-spacing: .08em; }
.bi-activity__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--bi-activity-fg, currentColor); box-shadow: 0 0 0 3px var(--bi-activity-bg, rgba(148, 163, 184, .15)); }
.bi-activity__value { font-variant-numeric: tabular-nums; }

.bi-activity--loading { --bi-activity-bg: rgba(148, 163, 184, .15); --bi-activity-border: rgba(148, 163, 184, .35); --bi-activity-fg: #94a3b8; }
.bi-activity--unavailable { --bi-activity-bg: rgba(148, 163, 184, .1); --bi-activity-border: rgba(148, 163, 184, .25); --bi-activity-fg: #94a3b8; }

.bi-activity--level-none      { --bi-activity-bg: rgba(100, 116, 139, .18); --bi-activity-border: rgba(100, 116, 139, .45); --bi-activity-fg: #64748b; }
.bi-activity--level-low       { --bi-activity-bg: rgba(14, 165, 233, .18);  --bi-activity-border: rgba(14, 165, 233, .55);  --bi-activity-fg: #0ea5e9; }
.bi-activity--level-medium    { --bi-activity-bg: rgba(34, 197, 94, .18);   --bi-activity-border: rgba(34, 197, 94, .55);   --bi-activity-fg: #22c55e; }
.bi-activity--level-high      { --bi-activity-bg: rgba(249, 115, 22, .2);   --bi-activity-border: rgba(249, 115, 22, .6);   --bi-activity-fg: #f97316; }
.bi-activity--level-very_high { --bi-activity-bg: rgba(239, 68, 68, .22);   --bi-activity-border: rgba(239, 68, 68, .65);   --bi-activity-fg: #ef4444; }

/* ── BI Enrichment block (lazy-load LLM org profile) ─────────────────
   Rendered inside the entity-detail page for authenticated viewers
   only. Two states share a single section wrapper:
     .bi-enrichment--pending → placeholder + spinner + auto-refresh meta
     .bi-enrichment--ready   → full profile (identity / scale / focus / sources)
     .bi-enrichment--failed  → soft error placeholder
   Uses the same --cms-* token system as the rest of bi-* — a card-on-dark
   surface block with strong internal hierarchy. */
.bi-enrichment { background: var(--cms-surface); color: var(--cms-card-text); border: 1px solid var(--cms-card-border); border-radius: var(--cms-radius, 8px); padding: 1.25rem 1.5rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); margin: 1.5rem 0; }

.bi-enrichment .bi-h2,
.bi-enrichment .bi-h3,
.bi-enrichment .bi-h4 { color: var(--cms-card-text); margin-top: 0; }
.bi-enrichment .bi-h3 { font-size: 15px; font-weight: 700; margin: 1.25rem 0 .5rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cms-card-muted); }
.bi-enrichment .bi-h4 { font-size: 13px; font-weight: 700; margin: 1rem 0 .35rem; color: var(--cms-card-muted); }
.bi-enrichment p { margin: .25rem 0 .75rem; line-height: 1.55; color: var(--cms-card-text); }
.bi-enrichment .bi-text-muted { color: var(--cms-card-muted); }
.bi-enrichment a { color: var(--cms-accent); text-decoration: none; }
.bi-enrichment a:hover { text-decoration: underline; }
.bi-enrichment .bi-detail-meta { color: var(--cms-card-text); }
.bi-enrichment .bi-tag { background: var(--cms-surface-muted); color: var(--cms-card-text); }

.bi-enrichment-header { display: flex; gap: 1rem; align-items: flex-start; }
.bi-enrichment-logo { width: 72px; height: 72px; object-fit: contain; background: var(--cms-surface-muted); border: 1px solid var(--cms-card-border); border-radius: 8px; padding: 6px; flex-shrink: 0; }
.bi-enrichment-headline-block { flex: 1; min-width: 0; }
.bi-enrichment-tagline { color: var(--cms-card-muted); font-size: 14px; margin: .15rem 0 .5rem; }

.bi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: .75rem 0 1rem; }
.bi-stat { background: var(--cms-surface-muted); border-radius: 6px; padding: .65rem .8rem; border: 1px solid var(--cms-card-border); }
.bi-stat-num { font-size: 20px; font-weight: 800; color: var(--cms-card-text); line-height: 1.1; }
.bi-stat-label { font-size: 11.5px; color: var(--cms-card-muted); margin-top: .15rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }

.bi-enrichment-list { margin: 0; padding-left: 1.25rem; color: var(--cms-card-text); }
.bi-enrichment-list li { margin: .25rem 0; line-height: 1.55; }
.bi-enrichment-list strong { color: var(--cms-card-text); }

.bi-enrichment-focus { background: linear-gradient(135deg, rgba(0, 168, 200, .07), rgba(122, 201, 67, .04)); border: 1px solid var(--cms-accent); border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; }
.bi-enrichment-focus h3 { color: var(--cms-accent); margin-top: 0; }

.bi-enrichment-sources { border-top: 1px solid var(--cms-card-border); padding-top: 1rem; margin-top: 1.25rem; }
.bi-enrichment-sources ol { font-size: 13px; }

.bi-enrichment-footer { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--cms-card-border); color: var(--cms-card-muted); font-size: 12px; text-align: right; }
.bi-enrichment-footer em { font-style: italic; }
/* `.bi-enrichment-foot` is the project + research-study variant of the same
   footer — a bare <p> rather than the <div> with a top border. Same visual
   intent: small, muted, pushed to the bottom-right corner of the card. */
.bi-enrichment-foot { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--cms-card-border); color: var(--cms-card-muted); font-size: 12px; text-align: right; }

.bi-enrichment-placeholder { display: flex; gap: 1rem; align-items: center; padding: 1.5rem; }
.bi-enrichment-headline { font-size: 16px; font-weight: 700; color: var(--cms-card-text); }
.bi-enrichment-sub { font-size: 13.5px; color: var(--cms-card-muted); margin-top: .25rem; line-height: 1.5; }

.bi-enrichment-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--cms-card-border); border-top-color: var(--cms-accent); animation: bi-spin 1s linear infinite; flex-shrink: 0; }
.bi-enrichment--failed .bi-enrichment-spinner { border-top-color: #ef4444; animation: none; }

@keyframes bi-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .bi-enrichment-header { flex-direction: column; }
  .bi-enrichment-logo { width: 56px; height: 56px; }
  .bi-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Retry button on failed / unreachable enrichment placeholders ───────── */
.bi-enrichment-placeholder-body { flex: 1; min-width: 0; }
.bi-enrichment-retry-form { margin-top: .75rem; }
.bi-enrichment-retry-btn { padding: .55rem 1.1rem; background: var(--cms-accent); color: var(--cms-accent-contrast, #fff); border: 0; border-radius: var(--cms-radius, 8px); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.bi-enrichment-retry-btn:hover { opacity: .9; }
.bi-enrichment--failed .bi-enrichment-spinner,
.bi-enrichment--unreachable .bi-enrichment-spinner { border-top-color: #ef4444; animation: none; }

/* Locked state — non-subscriber teaser for the runtime-LLM profile. We
   don't auto-trigger the LLM for non-paying viewers (readOnly=true), so
   when there's no cached payload they see a "Subscribe to read more"
   pitch sized like the placeholder so the section keeps the same visual
   weight on the page. */
.bi-enrichment--locked { background: linear-gradient(135deg, color-mix(in srgb, var(--cms-accent) 10%, var(--cms-surface)), var(--cms-surface)); border-color: color-mix(in srgb, var(--cms-accent) 35%, var(--cms-card-border)); }
.bi-enrichment-locked { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; align-items: flex-start; }
.bi-enrichment-locked-headline { font-size: 17px; font-weight: 700; color: var(--cms-card-text); line-height: 1.3; }
.bi-enrichment-locked-sub { font-size: 13.5px; color: var(--cms-card-muted); margin: 0; line-height: 1.55; max-width: 60ch; }