/* Clean/Corporate Theme — Generated by TurboDemand */
:root {
  --color-primary: #090909;
  --color-secondary: #808389;
  --color-accent: #2f6f6f;
  --color-cta: #090909;
  --color-cta-text: #ffffff;
  --color-cta-hover: #ffdb80;
  --color-cta-hover-text: #090909;
  --color-label-bg: #ffdb80;
  --color-label-text: #090909;
  --color-surface: #cde4e4;
  --color-page-bg: #ffffff;
  --color-heading-text: #090909;
  --color-body-text: #808389;
  --color-link-text: #2f6f6f;
  --color-divider: #cde4e4;
  --color-header-bg: #ffffff;
  --color-header-nav-text: #090909;
  --color-header-nav-hover: #2f6f6f;
  --color-article-nav-bg: #ffffff;
  --color-article-nav-text: #090909;
  --color-article-nav-active-bg: #cde4e4;
  --color-article-nav-active-text: #090909;
  --color-author-card-bg: #ffffff;
  --radius-button: 8px;
  --radius-input: 8px;
  --radius-label: 8px;
  --radius-card: 8px;
  --radius-panel: 8px;
  --border-subtle: var(--color-divider, #e2e8f0);
  --text-muted: var(--color-muted, #4a5568);
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --max-width: 1200px;
  --content-width: 720px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-body-text, #1a202c);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-page-bg, white);
}

main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading-text, var(--color-primary));
}

h1 { font-size: 2.5rem; margin-bottom: var(--spacing-lg); }
h2 { font-size: 1.875rem; margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); }
h3 { font-size: 1.5rem; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); }
h4 { font-size: 1.25rem; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); }

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-link-text, var(--color-accent));
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Header */
.site-header {
  background: var(--color-header-bg, white);
  border-bottom: 1px solid #e2e8f0;
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  /* Auto-hiding header (header-auto-hide.js): slides up on scroll-down to give
     reading room, back down on scroll-up / at-top / idle. transform-based, so
     hiding never shifts page layout. */
  transition: transform 0.25s ease;
  will-change: transform;
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

.header-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  position: relative; /* anchor for the mobile nav panel */
}

/* Collapsible header region (nav + CTA): a right-aligned cluster on desktop, a
   toggled dropdown panel on mobile (see the responsive block below). */
.header-collapse {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-left: auto;
}
.header-collapse .main-nav {
  margin-left: 0;
}

/* Hamburger — hidden on desktop, shown at the mobile breakpoint. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.site-header.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header[data-placement="center"] .header-container {
  flex-direction: column;
}

.site-header[data-placement="center"] .main-nav {
  margin-left: 0;
  justify-content: center;
}

.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Wordmark text beside a mark-only logo image (logo lockup). */
.brand-wordmark {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  line-height: 1;
}

/* Constrain the header logo so a square/large source (e.g. a favicon) renders
   as a small icon at a fixed height instead of being stretched by the img's
   hardcoded width/height attributes or the global img border-radius. */
.logo img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 200px;
  border-radius: 0;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Wrap the nav so long pillar labels flow onto a second row instead of
   overflowing the header; keep each individual label on one line. */
.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  justify-content: flex-end;
  margin-left: auto;
}

.nav-link {
  color: var(--color-header-nav-text, #1a202c);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--color-header-nav-hover, var(--color-accent));
  text-decoration: none;
}

/* Top-level nav dropdowns (Products / Services / Insights). The parent may
   be a <button> (no url) or an <a> (has url) — reset button styling so both
   look like nav links. Menu visibility is CSS-driven so it works without JS. */
.main-nav .nav-item {
  position: relative;
}

.main-nav .nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.nav-caret {
  font-size: 0.7em;
  line-height: 1;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  min-width: 220px;
  padding: var(--spacing-sm);
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  display: block;
}

.nav-dropdown-group {
  padding: var(--spacing-xs) 0;
}

.nav-dropdown-group + .nav-dropdown-group {
  border-top: 1px solid #edf2f7;
  margin-top: var(--spacing-xs);
}

.nav-dropdown-heading {
  margin: 0 0 var(--spacing-xs);
  padding: 0 var(--spacing-sm);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #718096;
}

.nav-dropdown-link {
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-input);
  color: var(--color-body-text, #1a202c);
  font-weight: 500;
  white-space: nowrap;
}

.nav-dropdown-link:hover {
  background: #f7fafc;
  color: var(--color-accent);
  text-decoration: none;
}

.cta-button {
  /* I7: filled primary CTA follows the brand's CTA role (falls back to
     --color-primary); --color-accent stays reserved for links/dividers. */
  background: var(--color-cta, var(--color-primary));
  color: var(--color-cta-text, white);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-button);
  flex: 0 0 auto;
  font-weight: 600;
  transition: opacity 0.2s;
}

.cta-button:hover {
  background: var(--color-cta-hover, var(--color-cta, var(--color-primary)));
  color: var(--color-cta-hover-text, var(--color-cta-text, white));
  text-decoration: none;
}

/* Footer */
.site-footer {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-xl) 0;
  margin-top: var(--spacing-xl);
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.footer-content {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(160px, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  color: white;
}

.footer-wordmark {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  line-height: 1;
}

.footer-logo img {
  max-height: 40px;
  width: auto;
  border-radius: 0;
}

.footer-logo-text {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: white;
}

.footer-tagline,
.footer-contact p,
.footer-menu,
.copyright {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.9375rem;
}

.footer-section h3 {
  margin: 0 0 var(--spacing-md);
  color: white;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

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

.footer-menu a,
.footer-contact a,
.footer-social a,
.footer-view-all {
  color: rgba(255, 255, 255, 0.86);
}

.footer-menu a:hover,
.footer-contact a:hover,
.footer-social a:hover,
.footer-view-all:hover {
  color: white;
  text-decoration: none;
}

.footer-view-all {
  display: inline-flex;
  margin-top: var(--spacing-md);
  font-weight: 600;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
}

.footer-links a:hover {
  color: white;
}

.copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  margin: 0;
}

/* Article layout */
.article-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing-xl);
}

.article-content {
  min-width: 0;
  max-width: var(--content-width);
}

.article-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}

.hero-image {
  width: 100%;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-card);
}

.article-meta {
  color: #718096;
  font-size: 0.875rem;
  margin-bottom: var(--spacing-lg);
}

/* FAQ section */
.faq-section {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: #f7fafc;
  border-radius: var(--radius-card);
}

.faq-item {
  margin-bottom: var(--spacing-lg);
}

.faq-item h3 {
  font-size: 1.125rem;
  margin-top: 0;
  color: var(--color-primary);
}

/* Key takeaways */
.key-takeaways {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-card);
  margin-bottom: var(--spacing-lg);
}

.key-takeaways h3 {
  color: white;
  margin-top: 0;
}

.key-takeaways ul {
  padding-left: var(--spacing-lg);
}

.key-takeaways li {
  margin-bottom: var(--spacing-sm);
}

/* Stat highlights */
.stat-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-highlight {
  flex: 1 1 160px;
  padding: var(--spacing-md);
  border-radius: var(--radius-card);
  background: var(--color-stat-card-bg, var(--color-surface, #f7f7f8));
  border-left: 4px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.stat-highlight-stat {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.stat-highlight-context {
  font-size: 0.875rem;
  color: var(--color-muted, #4a5568);
}

/* Pull quotes */
.pull-quote {
  border-left: 4px solid var(--color-accent);
  padding: var(--spacing-sm) var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-primary);
}

/* Article comparison table */
.article-comparison {
  margin-top: var(--spacing-xl);
}

.article-comparison h2 {
  margin-top: 0;
}

.article-comparison-scroll {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-panel);
}

.article-comparison-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: white;
}

.article-comparison-table th,
.article-comparison-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.article-comparison-table thead th {
  background: #f7fafc;
  color: var(--color-primary);
}

.article-comparison-table tbody tr:last-child th,
.article-comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Related articles */
.related-articles {
  margin-bottom: var(--spacing-lg);
}

.related-articles h3 {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-md);
}

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

.related-article {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid #e2e8f0;
}

.related-article a {
  text-decoration: none;
}

.related-article h4 {
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-xs);
}

.related-article p {
  font-size: 0.875rem;
  color: #718096;
  margin: 0;
}

/* Breadcrumbs */
.breadcrumbs {
  margin-bottom: var(--spacing-lg);
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
  color: #718096;
}

.breadcrumbs li::after {
  content: '›';
  margin-left: var(--spacing-xs);
}

.breadcrumbs li:last-child::after {
  content: '';
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.cookie-banner-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.cookie-banner-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  font-weight: 600;
}

.btn-primary {
  background: var(--color-cta, var(--color-primary));
  color: var(--color-cta-text, white);
}

.btn-secondary {
  background: #e2e8f0;
  color: #4a5568;
}

/* Category / Index pages */
.page-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

/* Insights-hub filter rails (Topic + Format) */
.hub-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.hub-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-sm) var(--spacing-md);
}

.hub-filter-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #718096;
}

.hub-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.hub-filter-chip {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-body-text, #1a202c);
  background: white;
  transition: border-color 0.2s, color 0.2s;
}

.hub-filter-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}

.article-card {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.article-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-card-media {
  aspect-ratio: 1448 / 1086;
  width: 100%;
  overflow: hidden;
  background: #f7fafc;
  border-bottom: 1px solid #e2e8f0;
}

.article-card-media-placeholder {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
}

.article-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.article-card-image-placeholder {
  opacity: 0.88;
}

.article-card-body {
  padding: var(--spacing-md);
}

.article-card h3 {
  font-size: 1.125rem;
  margin-top: 0;
}

.article-card .article-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card .article-card-title a {
  color: var(--color-heading-text, var(--color-link-text, var(--color-accent)));
}

.article-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  color: #718096;
  margin-bottom: var(--spacing-xs);
}

.article-card-read-more {
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
}

.article-card time {
  display: block;
  margin-top: var(--spacing-sm);
}

/* Responsive */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }

  .article-container {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
  }

  /* Mobile nav: hamburger reveals the collapsible panel (nav + CTA). */
  .nav-toggle {
    display: flex;
  }
  .header-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    margin-left: 0;
    padding: var(--spacing-md);
    background: white;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
  .site-header.nav-open .header-collapse {
    display: flex;
  }
  .header-collapse .main-nav {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    width: 100%;
    margin-left: 0;
  }
  .header-collapse .cta-button {
    align-self: flex-start;
    margin-top: var(--spacing-xs);
  }
  /* Dropdowns stack inline inside the panel (no hover on touch). */
  .main-nav .nav-item {
    width: 100%;
    position: static;
  }
  .main-nav .nav-dropdown {
    display: block;
    position: static;
    min-width: 0;
    padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .main-nav .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .cookie-banner-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem; }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }
}

/* --- GEO enhancements (shared) --- */
.article-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-xs) var(--spacing-sm); margin-top: var(--spacing-sm); font-size: 0.8125rem; color: var(--text-muted, #6b7280); }
.article-card-meta-sep { color: var(--border-subtle, #d1d5db); }
.article-card-type { display: inline-flex; align-items: center; border-radius: var(--radius-label); padding: 0.2em 0.45em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; color: var(--color-label-text, var(--color-link-text, var(--color-accent))); background: var(--color-label-bg, transparent); }

/* Category index pagination — static, crawlable links for /category/{slug}/page/N. */
.category-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-sm); margin: var(--spacing-xl) 0 0; }
.category-pagination-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-xs); margin: 0; padding: 0; list-style: none; }
.category-pagination-link,
.category-pagination-page { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0.45rem 0.75rem; border: 1px solid var(--border-subtle, #e5e7eb); border-radius: var(--radius-button); color: var(--color-body-text, #1a202c); background: var(--color-page-bg, #ffffff); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.category-pagination-link:hover,
.category-pagination-page:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.category-pagination-page.is-current { border-color: var(--color-accent); color: var(--color-cta-text, #ffffff); background: var(--color-cta, var(--color-primary)); }

/* Featured post promoted into the hub hero slot (benchmark parity — the page
   leads with the featured article, not a lead-capture form). */
.hub-intro-band { background: var(--color-surface, var(--color-page-bg, #ffffff)); }
.hub-intro { padding-bottom: var(--spacing-xl); }
.hub-intro .hub-featured { margin-bottom: 0; }
.hub-subtitle { color: var(--text-muted, #6b7280); font-size: 1.125rem; margin-top: var(--spacing-xs); margin-bottom: var(--spacing-lg); }
.hub-featured { margin: var(--spacing-lg) 0 var(--spacing-xl); }
.hub-featured-media { display: block; border-radius: var(--radius-card); overflow: hidden; }
.hub-featured-media .article-card-media { margin: 0; aspect-ratio: 16 / 9; }
.hub-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-featured-label { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-link-text, var(--color-accent)); }
.hub-featured-title { font-size: 1.75rem; line-height: 1.2; margin: var(--spacing-xs) 0 var(--spacing-sm); }
.hub-featured-title a { color: var(--color-primary); text-decoration: none; }
.hub-featured-title a:hover { color: var(--color-accent); }
.hub-featured-excerpt { color: var(--text-muted, #6b7280); font-size: 1rem; line-height: 1.6; margin: 0 0 var(--spacing-md); }
.hub-featured-author { display: flex; align-items: center; gap: var(--spacing-sm); }
.hub-featured-author-photo { width: 32px; height: 32px; border-radius: 9999px; object-fit: cover; flex: 0 0 auto; }
.hub-featured-author-photo--empty { position: relative; background: var(--border-subtle, #e5e7eb); }
.hub-featured-author-photo--empty::before { content: ""; position: absolute; inset: 0; margin: auto; width: 56%; height: 56%; background-color: var(--text-muted, #9ca3af); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.hub-featured-author-name { font-size: 0.9rem; font-weight: 600; color: var(--color-primary); }
.hub-lead { margin-top: var(--spacing-xl); }
@media (min-width: 760px) {
  .hub-featured { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--spacing-xl); }
  .hub-featured-title { font-size: 2rem; }
}

/* Related articles — a below-content continuation path rather than a narrow
   sidebar list. All surfaces and text use functional brand roles so dark
   client sites and authored foreground/background pairings remain valid. */
.related-articles { margin: var(--spacing-xl) 0; }
.related-articles > h2 { margin: 0 0 var(--spacing-lg); }
.related-articles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-md); margin: 0; padding: 0; list-style: none; }
.related-article-card { min-width: 0; margin: 0; padding: 0; border: 0; }
.related-article-link { display: flex; height: 100%; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-lg); border: 1px solid var(--color-divider, var(--border-subtle, #e5e7eb)); border-radius: var(--radius-card); background: var(--color-author-card-bg, var(--color-surface, var(--color-page-bg, #ffffff))); color: var(--color-body-text, #1a202c); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.related-article-link:hover { border-color: var(--color-link-text, var(--color-accent)); color: var(--color-body-text, #1a202c); text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09); }
.related-article-label { align-self: flex-start; border-radius: var(--radius-label); padding: 0.2em 0.5em; background: var(--color-label-bg, transparent); color: var(--color-label-text, var(--color-link-text, var(--color-accent))); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.related-article-link h3 { margin: 0; color: var(--color-heading-text, var(--color-primary)); font-size: 1.05rem; line-height: 1.35; }
.related-article-link p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--color-body-text, #1a202c); font-size: 0.875rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.related-article-action { margin-top: auto; color: var(--color-link-text, var(--color-accent)); font-size: 0.875rem; font-weight: 700; }
@media (max-width: 900px) {
  .related-articles-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .related-article-link { transition: none; }
  .related-article-link:hover { transform: none; }
}

/* Lead capture — functional form surfaces shared by hub, article, service,
   category, pillar, product, contact, and the sitewide popup. */
.page-lead-capture { margin-top: var(--spacing-xl); }
.lead-form-block { margin-top: var(--spacing-xl); }
.gf-lead-form { margin: var(--spacing-lg) 0; }
.gf-lead-form:not(.gf-lead-form--sidebar):not(.gf-lead-form--popup) .gf-lead-form__inner { max-width: none; }
.gf-lead-form__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1fr); align-items: stretch; gap: clamp(1.25rem, 4vw, 3rem); background: var(--color-cta, var(--color-primary)); border: 0; border-radius: var(--radius-panel); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12); }
.gf-lead-form__intro { display: flex; flex-direction: column; }
.gf-lead-form__intro-copy { border-left: 4px solid var(--color-label-bg, var(--color-cta-text, #ffffff)); padding-left: clamp(1rem, 2.5vw, 1.5rem); }
.gf-lead-form__headline { margin: 0 0 0.6rem; color: var(--color-cta-text, #ffffff); font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.18; }
.gf-lead-form__description { max-width: 34rem; margin: 0; color: var(--color-cta-text, #ffffff); line-height: 1.6; opacity: 0.86; }
.gf-lead-form__intro-note { max-width: 34rem; margin: auto 0 0; padding-top: var(--spacing-md); border-top: 1px solid color-mix(in srgb, var(--color-cta-text, #ffffff) 28%, transparent); color: var(--color-cta-text, #ffffff); font-size: 0.8125rem; line-height: 1.5; opacity: 0.72; }
.gf-lead-form__form { display: grid; grid-template-columns: 1fr; align-content: start; gap: var(--spacing-sm); padding: clamp(1rem, 2.5vw, 1.5rem); border: 0; border-radius: var(--radius-panel); background: var(--color-page-bg, #ffffff); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
.gf-lead-form__field { min-width: 0; }
.gf-lead-form__field label { display: block; margin: 0 0 0.3rem; color: var(--color-body-text, #1a202c); font-size: 0.875rem; font-weight: 700; }
.gf-lead-form__field input,
.gf-lead-form__field textarea,
.gf-lead-form__field select { width: 100%; min-height: 2.5rem; border: 1px solid var(--border-subtle, #d1d5db); border-radius: var(--radius-input); padding: 0.55rem 0.7rem; color: var(--color-body-text, #1a202c); background: var(--color-page-bg, #ffffff); font: inherit; }
.gf-lead-form__field textarea { min-height: 4.75rem; resize: vertical; }
.gf-lead-form__field:has(textarea),
.gf-lead-form__field--checkbox,
.gf-lead-form__optional,
.gf-lead-form__consent,
.gf-lead-form__submit,
.gf-lead-form__status { grid-column: 1 / -1; }
.gf-lead-form__optional { margin: 0; }
.gf-lead-form__optional summary { color: var(--color-link-text, var(--color-accent)); cursor: pointer; font-size: 0.875rem; font-weight: 700; }
.gf-lead-form__optional summary span { color: var(--text-muted, #6b7280); font-weight: 400; }
.gf-lead-form__optional-fields { display: grid; grid-template-columns: 1fr; gap: var(--spacing-sm); padding-top: var(--spacing-sm); }
.gf-lead-form__optional-fields .gf-lead-form__field:has(textarea),
.gf-lead-form__optional-fields .gf-lead-form__field--checkbox { grid-column: 1 / -1; }
.gf-checkbox-label { display: flex; align-items: flex-start; gap: var(--spacing-sm); color: var(--color-body-text, #1a202c); font-size: 0.8125rem; line-height: 1.45; }
.gf-checkbox-label input { width: auto; min-height: 0; margin-top: 0.18rem; flex: 0 0 auto; }
.gf-checkbox-label a { color: var(--color-link-text, var(--color-accent)); font-weight: 700; }
.gf-required { color: var(--color-accent); margin-left: 0.15rem; }
.gf-lead-form__submit { justify-self: stretch; min-height: 2.7rem; border: none; border-radius: var(--radius-button); padding: 0.65rem 1rem; background: var(--color-cta, var(--color-primary)); color: var(--color-cta-text, #ffffff); font: inherit; font-weight: 800; cursor: pointer; text-align: center; }
.gf-lead-form__submit:disabled { opacity: 0.65; cursor: not-allowed; }
.gf-lead-form__status { font-size: 0.9rem; font-weight: 700; }
.gf-status--success { color: #166534; }
.gf-status--error { color: #b91c1c; }
.gf-lead-form--popup { position: fixed; inset: 0; z-index: 1100; align-items: center; justify-content: center; padding: var(--spacing-lg); margin: 0; }
.gf-popup-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.64); }
.gf-lead-form--sidebar .gf-lead-form__inner,
.gf-lead-form--popup .gf-lead-form__inner { grid-template-columns: 1fr; }
.gf-lead-form--popup .gf-lead-form__inner { position: relative; z-index: 1; width: min(580px, 100%); max-height: calc(100vh - 3rem); overflow: auto; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28); }
.gf-lead-form--popup .gf-lead-form__intro-note { margin-top: var(--spacing-lg); }
.gf-popup-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 36px; height: 36px; border: none; border-radius: 999px; background: var(--color-page-bg, #ffffff); color: var(--color-primary); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.22); }
@media (max-width: 760px) {
  .gf-lead-form__inner { grid-template-columns: 1fr; padding: var(--spacing-md); }
  .gf-lead-form__intro-note { margin-top: var(--spacing-lg); }
  .gf-lead-form__form { padding: var(--spacing-sm); }
  .gf-lead-form__submit { width: 100%; }
}

.hub-filter-chip { display: inline-flex; align-items: center; gap: var(--spacing-xs); cursor: pointer; }
.hub-filter-chip.is-active { border-color: var(--color-accent); color: var(--color-accent); font-weight: 700; }
.hub-filter-count { font-size: 0.7rem; opacity: 0.65; font-variant-numeric: tabular-nums; }
.article-card[hidden] { display: none; }

/* Table of contents — a self-contained floating card in the sidebar. The
   heading carries a light list glyph; each entry is separated by a hairline
   rule and prefixed with a low-opacity accent chevron (both are CSS mask
   pseudo-elements, so the anchor text a crawler / answer engine reads stays
   clean — no glyph characters leak into the link text). */
.article-sidebar { --gf-sticky-sidebar-gap: var(--spacing-md); top: calc(var(--gf-visible-header-offset, 64px) + var(--gf-sticky-sidebar-gap, var(--spacing-md))); transition: top 0.25s ease; }
.article-toc { margin-bottom: var(--spacing-xl); padding: var(--spacing-md) 0; background: var(--color-article-nav-bg, #ffffff); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: var(--radius-panel); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); }
.article-toc-heading { display: flex; align-items: center; gap: var(--spacing-xs); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-article-nav-text, #1a202c); margin: 0 0 var(--spacing-sm); padding: 0 var(--spacing-lg) var(--spacing-sm); border: none; border-bottom: 1px solid var(--border-subtle, #e5e7eb); }
.article-toc-heading::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center / contain no-repeat; }
.article-toc-list { list-style: none; padding: 0; margin: 0; max-height: min(60vh, calc(100dvh - var(--gf-visible-header-offset, 64px) - var(--gf-sticky-sidebar-gap, var(--spacing-md)) - var(--spacing-md))); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(16, 24, 40, 0.18) transparent; }
.article-toc-list::-webkit-scrollbar { width: 8px; }
.article-toc-list::-webkit-scrollbar-track { background: transparent; }
.article-toc-list::-webkit-scrollbar-thumb { background-color: rgba(16, 24, 40, 0.18); border-radius: 4px; }
.article-toc-list li { margin: 0; }
.article-toc-list li + li { border-top: 1px solid var(--border-subtle, #e5e7eb); }
.article-toc-list a { display: flex; align-items: baseline; gap: var(--spacing-xs); color: var(--color-article-nav-text, #1a202c); text-decoration: none; font-size: 0.9rem; line-height: 1.4; padding: 0.4rem var(--spacing-lg); transition: background-color 0.15s ease, color 0.15s ease; }
.article-toc-list a::before { content: ""; flex: 0 0 auto; width: 0.8em; height: 0.8em; align-self: center; background-color: var(--color-accent); opacity: 0.45; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: opacity 0.15s ease, transform 0.15s ease; }
.article-toc-list a:hover { color: var(--color-article-nav-text, #1a202c); background: var(--color-article-nav-active-bg, #f7fafc); }
.article-toc-list a:hover::before { opacity: 1; transform: translateX(2px); }
/* Scroll-spy: the section currently at the top of the viewport (set by article-scroll.js). */
.article-toc-list a.is-active { color: var(--color-article-nav-active-text, var(--color-article-nav-text, #1a202c)); background: var(--color-article-nav-active-bg, #f7fafc); font-weight: 600; }
.article-toc-list a.is-active::before { opacity: 1; transform: translateX(2px); }
/* Reading progress — a thin brand-colored bar pinned to the top of the viewport. */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; background: transparent; pointer-events: none; }
.reading-progress-bar { display: block; height: 100%; width: 0; background: var(--color-accent, var(--color-primary)); transition: width 0.08s linear; }
@media (prefers-reduced-motion: reduce) { .article-sidebar, .reading-progress-bar { transition: none; } }

/* FAQ accordion — native <details name> (one open at a time), collapsed by
   default so the answers don't elongate the page. Hairline separators divide
   the rows; a chevron marker rotates when a row opens. Answers stay in the DOM
   when collapsed, so they remain crawlable and the FAQPage JSON-LD (built
   separately from faq_structured) is unaffected — this is purely display.
   Overrides the per-theme .faq-item rules (appended after the theme CSS).
   Applies to both the article FAQ (summary > h3) and the landing/product-page
   FAQ (summary text). */
.faq-section { margin-bottom: var(--spacing-xl); }
.faq-section .faq-item { margin: 0; border-bottom: 1px solid var(--border-subtle, #e5e7eb); }
.faq-section .faq-item:first-of-type { border-top: 1px solid var(--border-subtle, #e5e7eb); }
.faq-section .faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin: 0; padding: var(--spacing-md) 0; cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 700; color: var(--color-primary); transition: color 0.15s ease; }
.faq-section .faq-question::-webkit-details-marker { display: none; }
.faq-section .faq-question:hover { color: var(--color-accent); }
.faq-section .faq-question h3 { margin: 0; border: none; display: inline; font-size: inherit; line-height: 1.4; color: inherit; }
.faq-section .faq-question::after { content: ""; flex: 0 0 auto; width: 1.1em; height: 1.1em; background-color: var(--color-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.2s ease; }
.faq-section .faq-item[open] .faq-question::after { transform: rotate(180deg); }
.faq-section .faq-answer { padding: 0 0 var(--spacing-md); color: var(--color-body-text, #1a202c); }
.faq-section .faq-answer p { margin: 0; }

/* Author bio box — a themed card closing the article. Avatar (real photo, or a
   neutral gray-circle person placeholder when brand knowledge has no photo) on
   the left; eyebrow / name / role / bio / links on the right. Uses var(--x, …)
   fallbacks so it renders in themes that don't declare --color-surface etc. */
.author-bio-box { display: flex; align-items: flex-start; gap: var(--spacing-lg); margin: var(--spacing-xl) 0; padding: var(--spacing-lg); background: var(--color-author-card-bg, #f7f7f8); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: var(--radius-card); }
.author-bio-photo { display: block; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 9999px; object-fit: cover; }
.author-bio-photo--empty { position: relative; background: var(--border-subtle, #e5e7eb); }
.author-bio-photo--empty::before { content: ""; position: absolute; inset: 0; margin: auto; width: 56%; height: 56%; background-color: var(--text-muted, #9ca3af); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.author-bio-body { min-width: 0; }
.author-bio-eyebrow { margin: 0 0 var(--spacing-xs); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, #6b7280); }
.author-bio-name { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--color-primary); }
.author-bio-title { margin: 0.1rem 0 var(--spacing-sm); font-size: 0.9rem; color: var(--text-muted, #6b7280); }
.author-bio-text { margin: 0 0 var(--spacing-sm); color: var(--color-body-text, #1a202c); font-size: 0.95rem; line-height: 1.6; }
.author-bio-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); margin: 0; padding: 0; }
.author-bio-links a { display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: var(--color-accent); text-decoration: none; border: none; }
.author-bio-links a:hover { text-decoration: underline; }
/* Per-link brand/link icon before the label — currentColor mask, no image assets. */
.author-bio-icon { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.4em; flex: 0 0 auto; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.author-bio-icon--linkedin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z'/%3E%3C/svg%3E"); }
.author-bio-icon--twitter { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
.author-bio-icon--website { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
/* M81c — dedicated author page (/authors/{slug}). Reuses .author-bio-photo /
   --empty for the avatar and .author-bio-links for social links; adds the
   page-header layout, the knowsAbout expertise chips, and the published-article
   index heading. */
.author-page-header { display: flex; align-items: flex-start; gap: var(--spacing-lg); margin: 0 0 var(--spacing-xl); }
.author-page-header .author-bio-photo { width: 96px; height: 96px; }
.author-page-identity { min-width: 0; }
.author-page-role { margin: 0.25rem 0 var(--spacing-sm); font-size: 1rem; color: var(--text-muted, #6b7280); }
.author-page-bio { margin: 0 0 var(--spacing-md); color: var(--color-body-text, #1a202c); font-size: 1rem; line-height: 1.65; max-width: 60ch; }
.author-page-expertise { list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-sm); margin: 0 0 var(--spacing-md); padding: 0; }
.author-page-expertise li { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; font-size: 0.8rem; font-weight: 600; color: var(--color-author-chip-text, #1a202c); background: var(--color-author-chip-bg, #f7f7f8); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 9999px; }
.author-page-articles-heading { margin: var(--spacing-xl) 0 var(--spacing-md); font-size: 1.25rem; }

/* Markdown tables written inline in the article body (body_html). The
   structured comparison_table component has its own .article-comparison-table
   styles, but a table authored in the draft markdown renders as a bare <table>
   and would otherwise be unstyled. Give it the same formatted treatment
   (bordered grid, tinted header, padded cells). GitHub's responsive pattern
   (block + max-content + overflow-x) keeps columns aligned and lets a wide
   table scroll on narrow screens instead of breaking the layout. Uses
   var(--x, …) fallbacks so it renders in themes that don't declare the tokens. */
.article-body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--spacing-lg) 0; font-size: 0.95rem; }
.article-body th, .article-body td { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-subtle, #e2e8f0); text-align: left; vertical-align: top; }
.article-body thead th { background: var(--color-article-table-header-bg, #f7fafc); color: var(--color-article-table-header-text, #1a202c); font-weight: 600; }