/* ============================================================
   B2BEA.org — Master Stylesheet
   Brand: Dark Blue #00196C · Carmine Pink #EB5444
   Fonts: Hanken Grotesk (headings) · Open Sans (body)
   ============================================================ */

/* ------------------------------------------------------------
   CSS Variables — Brand Tokens
   ------------------------------------------------------------ */
:root {
  /* Colors */
  --color-blue:        #00196C;
  --color-blue-dark:   #001458;
  --color-accent:        #EB5444;
  --color-accent-dark:   #d94333;
  --color-white:       #FFFFFF;
  --color-gray-light:  #F5F5F5;
  --color-gray-mid:    #6B6B6B;
  --color-gray-border: #E0E0E0;
  --color-text:        #1A1A1A;

  /* Surface Hierarchy (Stitch spec — D-12) */
  --background:                 #f8f9fa;
  --surface:                    #f8f9fa;
  --surface-container-low:      #f3f4f5;
  --surface-container:          #edeeef;
  --surface-container-lowest:   #ffffff;
  --surface-variant:            #e1e3e4;

  /* Semantic & Brand Extension (Stitch Tailwind config) */
  --primary:                    #000938;
  --primary-container:          #00196C;  /* alias for --color-blue */
  --on-primary:                 #ffffff;
  --on-primary-container:       #7586da;
  --secondary:                  #b22b20;
  --secondary-container:        var(--color-accent);  /* alias — resolves pink discrepancy */
  --on-surface:                 #191c1d;
  --on-surface-variant:         #454651;
  --outline-variant:            #c5c5d3;
  --error:                      #ba1a1a;

  /* Extended Highlight Palette (status + category colors) */
  --color-success:              #16a34a;
  --color-success-light:        #f0fdf4;
  --color-warning:              #d97706;
  --color-warning-light:        #fffbeb;
  --color-error-light:          #fef2f2;
  --color-info:                 #2563eb;
  --color-info-light:           #eff6ff;
  --color-teal:                 #0d9488;
  --color-amber:                #b45309;
  --color-indigo:               #4f46e5;
  --color-leader:               #CC1439;
  --surface-warm:               #f5f0eb;

  /* Gradient */
  --gradient-hero: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);

  /* Typography */
  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body:    'Open Sans', sans-serif;

  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* Layout */
  --max-width:        1220px;
  --content-width:    800px;
  --nav-height:       72px;
  --border-radius:    8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;

  /* Shadows (Stitch ambient spec) */
  --shadow-sm:      0 2px 8px rgba(0, 25, 108, 0.08);
  --shadow-md:      0 4px 16px rgba(0, 25, 108, 0.12);
  --shadow-ambient: 0 20px 40px rgba(0, 9, 56, 0.06);

  /* Badge — Case Study type */
  --badge-case-study-bg: #f0fdf4;
  --badge-case-study-text: #16a34a;

  /* Form Field Tokens — Style B (Filled/Surface) */
  --color-surface-hover: #E8E8E8;
  --color-text-faint:    #A0A0A0;
  --color-text-dim:      #3A3A3A;
  --b2bea-blue-light:    #E8ECF8;
  --field-radius:        6px;
  --field-padding-sm:    5px 10px;
  --field-padding-md:    9px 12px;
  --field-padding-lg:    12px 16px;
  --field-font-sm:       12px;
  --field-font-md:       13px;
  --field-font-lg:       15px;
  --focus-ring:          0 0 0 3px rgba(0, 25, 108, 0.10);
  --field-transition:    all 0.18s ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--background);
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Portal pages: layout fills remaining vertical space, no gap before footer */
#main-content:has(.portal-layout) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#main-content > .portal-layout {
  flex: 1;
}

/* No gap between portal layout and footer */
#main-content:has(.portal-layout) + .footer {
  margin-top: 0;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-accent);
}

/* ------------------------------------------------------------
   Typography
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-blue);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3rem);   margin-bottom: var(--space-lg); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-md); margin-top: var(--space-2xl); }
h3 { font-size: 1.25rem;                  margin-bottom: var(--space-sm); margin-top: var(--space-xl); font-weight: 600; letter-spacing: 0; }
h4 { font-size: 1rem;                     margin-bottom: var(--space-sm); font-weight: 600; }

/* Display — hero statements only */
.text-display {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--on-primary);
}

/* Body large — intro paragraphs */
.text-body-lg {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75;
}

/* Label — all-caps UI metadata, category tags */
.text-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

p {
  margin-bottom: var(--space-md);
  max-width: 70ch;
}

p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

/* ------------------------------------------------------------
   Layout Utilities
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--narrow {
  max-width: var(--content-width);
}

.section {
  padding: var(--space-3xl) 0;
}

.section--sm {
  padding: var(--space-2xl) 0;
}

.section--gray {
  background: var(--color-gray-light);
}

.section--blue {
  background: var(--color-blue);
  color: var(--color-white);
}

.section--blue h1,
.section--blue h2,
.section--blue h3 {
  color: var(--color-white);
}

.section--surface-low {
  background: var(--surface-container-low);
}

.section--dark {
  background: var(--gradient-hero);
  color: var(--on-primary);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--on-primary);
}

/* ── Glassmorphism (D-16) ─────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

/* ------------------------------------------------------------
   Site Header — Two-Bar Navigation
   ------------------------------------------------------------ */

/* ── Shared header wrapper ─────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Bar 1: Top ecosystem bar ──────────────────────────────── */
.topbar {
  background: var(--color-blue);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  line-height: 1;
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px var(--space-lg);
  flex-wrap: wrap;
}

.topbar__label {
  font-family: var(--font-display);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.topbar__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.15s;
}

.topbar__link:hover {
  color: var(--color-white);
}

.topbar__divider {
  color: rgba(255, 255, 255, 0.3);
}

/* ── Bar 2: Main nav ───────────────────────────────────────── */
.mainnav {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-border);
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

.mainnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  gap: var(--space-lg);
}

/* Logo */
.mainnav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.mainnav__logo img {
  height: 36px;
  width: auto;
}

/* Links wrapper */
.mainnav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1;
}

/* Separator between Explore dropdown and main links */
.mainnav__sep {
  width: 1px;
  height: 20px;
  background: var(--color-gray-border);
}

/* Plain nav links */
.mainnav__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.mainnav__link:hover {
  color: var(--color-blue);
}

/* Action buttons pushed to the right */
.mainnav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.mainnav__btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 9px 18px;
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mainnav__btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.mainnav__btn--primary:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

.mainnav__btn--ghost {
  background: transparent;
  color: var(--primary-container);
  border: 1.5px solid transparent;
  cursor: pointer;
}

.mainnav__btn--ghost:hover {
  background: rgba(0, 25, 108, 0.06);
  color: var(--primary-container);
}

/* ── Explore Dropdown ──────────────────────────────────────── */
.mainnav__dropdown {
  position: relative;
}

.mainnav__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  white-space: nowrap;
  transition: color 0.15s;
}

.mainnav__dropdown-trigger:hover {
  color: var(--color-blue);
}

.mainnav__chevron {
  transition: transform 0.2s;
}

.mainnav__dropdown-trigger[aria-expanded="true"] .mainnav__chevron {
  transform: rotate(180deg);
}

.mainnav__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 260px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 200;
}

.mainnav__dropdown-menu.is-open {
  display: block;
}

.mainnav__dropdown-item {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--color-gray-border);
  transition: background 0.1s;
}

.mainnav__dropdown-item:last-child {
  border-bottom: none;
}

.mainnav__dropdown-item:hover {
  background: var(--color-gray-light);
}

.mainnav__dropdown-item strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-blue);
  display: block;
}

.mainnav__dropdown-item span {
  font-size: 0.8rem;
  color: var(--color-gray-mid);
  margin-top: 2px;
}

/* ── Mega-Menu ───────────────────────────────────────────── */
.mainnav__mega-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 780px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: 28px 32px;
}

.mainnav__mega-menu.is-open {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 32px;
}

/* Column */
.mega-col__heading {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-gray-mid);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

/* Menu item */
.mega-item {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--color-gray-light);
  transition: background 0.1s;
}

.mega-item:last-child {
  border-bottom: none;
}

.mega-item:hover {
  background: var(--color-gray-light);
  border-radius: 4px;
  padding-left: 6px;
  margin-left: -6px;
}

.mega-item strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-blue);
  display: block;
}

.mega-item span {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  margin-top: 2px;
  display: block;
}

/* View All link — distinct treatment */
.mega-item--viewall {
  border-bottom: none;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-gray-border, #ddd);
}

.mega-item + .mega-item--viewall {
  border-bottom: none;
}

/* Remove solid border on item before View All */
.mega-col > .mega-item:nth-last-child(2) {
  border-bottom: none;
}

.mega-item--viewall strong {
  color: var(--color-accent);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.mega-item--viewall strong::after {
  content: ' →';
}

.mega-item--viewall:hover strong {
  text-decoration: underline;
}

/* Featured promo card */
.mega-featured {
  background: linear-gradient(135deg, #000938 0%, #00196C 100%);
  border-radius: 10px;
  padding: 24px;
  color: white;
  display: flex;
  flex-direction: column;
}

.mega-featured__label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.mega-featured__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: var(--space-sm);
}

.mega-featured__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.mega-featured__excerpt {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0 0 var(--space-sm);
  flex: 1;
}

.mega-featured__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.mega-featured__cta {
  display: inline-block;
  background: var(--color-accent);
  color: white;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.mega-featured__cta:hover {
  background: var(--color-accent-dark);
}

/* Mobile toggle button */
.mainnav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--color-blue);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   Hero Section
   ------------------------------------------------------------ */
.hero {
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-3xl) 0;
  text-align: center;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero__subtitle {
  font-size: 1.2rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* ── Primary: gradient CTA ───────────────────────────── */
.btn--primary {
  background: var(--gradient-hero);
  color: var(--on-primary);
}
.btn--primary:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* ── Secondary: ghost with pink accent ───────────────── */
.btn--secondary {
  background: transparent;
  color: var(--secondary);
  border: 1.5px solid rgba(235, 84, 68, 0.15);
}
.btn--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Tertiary: text-only with animated underline ─────── */
.btn--tertiary {
  background: transparent;
  color: var(--primary-container);
  padding-left: 0;
  padding-right: 0;
  position: relative;
}
.btn--tertiary::after {
  content: '';
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-container);
  transition: width 0.2s ease;
}
.btn--tertiary:hover::after {
  width: 100%;
}

/* ── Accent: solid Carmine Pink ──────────────────────── */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--accent:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

/* ── Outline: navy ghost ─────────────────────────────── */
.btn--outline {
  background: transparent;
  color: var(--color-blue);
  border: 1.5px solid var(--color-blue);
}
.btn--outline:hover {
  background: var(--color-blue);
  color: var(--color-white);
}

/* ── Outline White: ghost on dark backgrounds ────────── */
.btn--outline-white {
  background: transparent;
  color: white;
  border: 1.5px solid white;
}
.btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */

/* ── Base card ───────────────────────────────────────── */
.card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: 22px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: var(--outline-variant);
  box-shadow: 0 6px 20px rgba(0, 25, 108, 0.08);
  transform: translateY(-2px);
}

/* ── Clickable card variant ──────────────────────────── */
.card--clickable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* ── Vendor card ─────────────────────────────────────── */
.card--vendor .card__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: var(--space-sm);
}

.card--vendor .card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-container);
  margin-bottom: var(--space-xs);
}

.card--vendor .card__category {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-sm);
}

.card--vendor .card__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.card--vendor .card__cta {
  margin-top: auto;
}

/* ── Content card (guides, reports, events, resources) ── */
.card--content .card__tags {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.card--content .card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-container);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

.card--content .card__meta {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  margin-top: auto;
  padding-top: var(--space-sm);
}

.card--content .card__excerpt {
  font-size: 0.8375rem;
  color: var(--color-gray-mid);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

/* ── Card grid (CSS Grid — D-07) ─────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ── Badges & Tags ───────────────────────────────────── */
.badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
}

.badge--tier {
  background: var(--primary-container);
  color: var(--on-primary);
}

.badge--category {
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
}

.badge--category-tech {
  background: #f0fdfa;
  color: var(--color-teal);
  border: 1px solid rgba(13, 148, 136, 0.2);
}

.badge--category-logistics {
  background: #fffbeb;
  color: var(--color-amber);
  border: 1px solid rgba(180, 83, 9, 0.2);
}

.badge--category-analytics {
  background: #eef2ff;
  color: var(--color-indigo);
  border: 1px solid rgba(79, 70, 229, 0.2);
}

.badge--pink {
  background: var(--surface-container-lowest);
  color: var(--secondary);
  border: 1px solid rgba(235, 84, 68, 0.2);
}

/* ------------------------------------------------------------
   Form Fields
   ------------------------------------------------------------ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-field__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}

.form-field__input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: var(--space-sm) 0;
  border: none;
  border-bottom: 1.5px solid var(--outline-variant);
  background: transparent;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease;
}

.form-field__input:focus {
  border-bottom: 2px solid var(--primary-container);
}

.form-field__error {
  color: var(--error);
  font-size: 0.8125rem;
}

.form-field__hint {
  color: var(--on-surface-variant);
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------
   Filter Bar
   ------------------------------------------------------------ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
}

@media (min-width: 768px) {
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

.filter-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 24px;
  border: 1px solid var(--color-gray-border);
  background: var(--surface-container-lowest);
  color: var(--primary-container);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--primary-container);
  background: rgba(0, 25, 108, 0.03);
}

.filter-pill.is-active {
  background: var(--secondary-container);
  color: var(--on-primary);
  border-color: var(--secondary-container);
}

/* ── Search input ─────────────────────────────────────── */
.search-input {
  font-family: var(--font-body);
  font-size: 1rem;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-bottom: 1.5px solid var(--outline-variant);
  background: transparent;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease;
}

.search-input:focus {
  border-bottom: 2px solid var(--primary-container);
}

/* ------------------------------------------------------------
   Alerts / Notices
   ------------------------------------------------------------ */
.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-radius-sm);
  font-size: 0.9375rem;
}

.alert--info {
  background: var(--surface-container-low);
  border-left: 4px solid var(--primary-container);
}

.alert--warning {
  background: var(--color-warning-light);
  border-left: 4px solid var(--color-warning);
}

.alert--error {
  background: var(--color-error-light);
  border-left: 4px solid var(--error);
}

.alert--success {
  background: var(--color-success-light);
  border-left: 4px solid var(--color-success);
}

/* ------------------------------------------------------------
   Callout / Highlight Boxes
   ------------------------------------------------------------ */
.callout {
  background: var(--color-gray-light);
  border-left: 4px solid var(--color-accent);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-xl) 0;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.callout__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-blue);
  margin-bottom: var(--space-sm);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.callout p {
  color: var(--color-gray-mid);
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* Pull quote variant */
.pullquote {
  border-left: 4px solid var(--color-blue);
  padding: var(--space-md) var(--space-xl);
  margin: var(--space-xl) 0;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--color-blue);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ------------------------------------------------------------
   Blog / Article
   ------------------------------------------------------------ */
.article-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--color-gray-border);
  margin-bottom: var(--space-2xl);
}

.article-header__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.article-header__meta {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  margin-top: var(--space-md);
}

.article-body h2 { margin-top: var(--space-2xl); }
.article-body h3 { margin-top: var(--space-xl); }

.article-body p,
.article-body li {
  font-size: 1.05rem;
  line-height: 1.8;
}

/* YouTube embed */
.video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  margin: var(--space-xl) 0;
  border-radius: var(--border-radius);
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Blog listing card */
.blog-card {
  display: block;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-gray-border);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.15s;
}
.blog-card:hover { transform: translateX(4px); }
.blog-card:hover .blog-card__title { color: var(--color-accent); }

.blog-card__tag {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.blog-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-blue);
  margin-bottom: var(--space-sm);
  transition: color 0.15s;
}

.blog-card__excerpt {
  color: var(--color-gray-mid);
  font-size: 0.95rem;
  line-height: 1.6;
}

.blog-card__meta {
  font-size: 0.8rem;
  color: var(--color-gray-mid);
  margin-top: var(--space-sm);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer {
  background: var(--color-blue);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-2xl) 0 var(--space-xl);
  margin-top: var(--space-3xl);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.footer__tagline {
  font-size: 0.8125rem;
  line-height: 1.65;
  max-width: 280px;
  margin-bottom: var(--space-lg);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.footer__social-icon:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.footer__social-icon .material-symbols-outlined {
  font-size: 16px;
}

.footer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__links a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.footer__links a:hover { color: var(--color-white); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}

.footer__legal {
  display: flex;
  gap: var(--space-lg);
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.15s;
}

.footer__legal a:hover {
  color: var(--color-white);
}

.footer__badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
}

/* ------------------------------------------------------------
   Focus Rings (WCAG 2.4.7)
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  :root {
    --space-3xl: 64px;
    --space-2xl: 48px;
  }

  /* ── Mobile nav ─────────────────────────────────── */
  .topbar__label { display: none; }

  .mainnav__toggle { display: block; }

  .mainnav__links {
    display: none;
    position: absolute;
    top: calc(var(--nav-height) + 33px); /* bar1 height ~33px + bar2 */
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-border);
    gap: var(--space-md);
    box-shadow: var(--shadow-md);
    z-index: 150;
  }

  .mainnav__links.is-open { display: flex; }

  .mainnav__sep { display: none; }

  .mainnav__dropdown { width: 100%; }
  .mainnav__dropdown-menu {
    position: static;
    box-shadow: none;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--border-radius);
    margin-top: 8px;
  }

  .mainnav__mega-menu {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: none;
    border: 1px solid var(--color-gray-border);
    border-radius: var(--border-radius);
    margin-top: 8px;
    padding: 16px;
  }

  .mainnav__mega-menu.is-open {
    display: block;
  }

  .mega-col {
    margin-bottom: var(--space-lg);
  }

  .mega-featured {
    display: none;
  }

  .mainnav__actions {
    margin-left: 0;
    flex-wrap: wrap;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-xl);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   Homepage — Marker Underline
   ------------------------------------------------------------ */
.marker-underline {
  position: relative;
  z-index: 1;
}
.marker-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(117, 134, 218, 0.3);
  z-index: -1;
  border-radius: 2px;
}

/* Material Symbols font variation settings */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ------------------------------------------------------------
   Homepage — Hero (full-bleed dark with image overlay)
   ------------------------------------------------------------ */
.hero--full {
  position: relative;
  min-height: 870px;
  display: flex;
  align-items: center;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
  overflow: hidden;
  background: var(--primary);
}

.hero--full__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.4;
}

.hero--full__overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  mix-blend-mode: multiply;
}

.hero--full__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  width: 100%;
}

@media (min-width: 1200px) {
  .hero--full__content {
    grid-template-columns: 1fr;
  }
  .hero--full__main {
    grid-column: 1 / -1;
  }
}

.hero--full__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary-container);
  margin-bottom: var(--space-lg);
}

.hero--full__title {
  color: var(--on-primary);
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xl);
}

.hero--full__title .accent {
  color: var(--secondary-container);
}

.hero--full__subtitle {
  color: var(--on-primary-container);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  max-width: 640px;
  margin-bottom: var(--space-2xl);
  line-height: 1.6;
  font-weight: 500;
}

.hero--full__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 480px) {
  .hero--full__actions {
    flex-direction: row;
  }
}

.hero--full__flourish {
  display: none;
  position: absolute;
  bottom: var(--space-2xl);
  right: var(--space-2xl);
}

@media (min-width: 1400px) {
  .hero--full__flourish {
    display: block;
  }
}

.hero--full__flourish-text {
  color: var(--on-primary-container);
  opacity: 0.2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12rem;
  line-height: 1;
  user-select: none;
}

/* ── Hero buttons ────────────────────────────────────── */
.btn--hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 2.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--on-primary);
  background: var(--secondary-container);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}
.btn--hero-primary:hover {
  background: var(--secondary);
  color: var(--on-primary);
  transform: translateY(-1px);
}

.btn--hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 2.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--on-primary);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn--hero-outline:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--on-primary);
}

/* ------------------------------------------------------------
   Homepage — Insights Section (Bento Grid)
   ------------------------------------------------------------ */
.insights-section {
  padding: var(--space-3xl) 0;
  background: var(--surface);
}

.insights-section__header {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-2xl);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .insights-section__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.insights-section__title {
  color: var(--primary-container);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.insights-section__subtitle {
  color: var(--on-surface-variant);
  font-size: 1.125rem;
  max-width: 28rem;
}

.insights-section__link {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 2px solid var(--secondary);
  padding-bottom: 2px;
  transition: padding-right 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.insights-section__link:hover {
  padding-right: var(--space-md);
  color: var(--secondary);
}

/* Bento grid for insights section */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bento-grid__featured {
  grid-column: 1;
}

@media (min-width: 768px) {
  .bento-grid__featured {
    grid-column: span 2;
  }
}

/* Featured article card */
.card--featured {
  display: flex;
  flex-direction: column;
  background: var(--surface-container-lowest);
  padding: 2rem;
  box-shadow: var(--shadow-ambient);
  border-radius: var(--border-radius);
  height: 100%;
}

@media (min-width: 768px) {
  .card--featured {
    flex-direction: row;
    gap: var(--space-xl);
  }
}

.card--featured__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card--featured__eyebrow {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: var(--space-md);
}

.card--featured__title {
  color: var(--primary-container);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 900;
  margin-bottom: var(--space-lg);
  line-height: 1.2;
}

.card--featured__excerpt {
  color: var(--on-surface-variant);
  margin-bottom: var(--space-xl);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card--featured__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--primary-container);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.card--featured__cta:hover {
  color: var(--primary-container);
  gap: var(--space-md);
}

/* Podcast card — dark navy */
.card--podcast {
  background: var(--primary-container);
  color: var(--on-primary);
  padding: 2rem;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 9, 56, 0.3);
  position: relative;
  overflow: hidden;
}

.card--podcast__icon {
  color: var(--secondary-container);
  font-size: 3rem;
  margin-bottom: var(--space-lg);
}

.card--podcast__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: var(--space-md);
  line-height: 1.2;
  color: var(--on-primary);
}

.card--podcast__desc {
  color: var(--on-primary-container);
  font-weight: 500;
  margin-bottom: var(--space-xl);
}

.card--podcast__listen {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--on-primary);
  color: var(--primary-container);
  font-family: var(--font-display);
  font-weight: 900;
  padding: 0.625rem 1.5rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: background 0.2s ease;
}

.card--podcast__listen:hover {
  background: var(--on-primary-container);
  color: var(--on-primary);
}

.card--podcast__bg-icon {
  position: absolute;
  bottom: -2.5rem;
  right: -2.5rem;
  opacity: 0.1;
  font-size: 15rem;
  pointer-events: none;
}

/* Small bento cards */
.card--bento {
  background: var(--surface-container-lowest);
  padding: 2rem;
  box-shadow: var(--shadow-ambient);
  border-radius: var(--border-radius);
}

.card--bento__eyebrow {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: var(--space-md);
  display: block;
}

.card--bento__title {
  color: var(--primary-container);
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

.card--bento__desc {
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  margin-bottom: var(--space-lg);
}

.card--bento__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.875rem;
  color: var(--primary-container);
  text-decoration: none;
}

.card--bento__link:hover {
  color: var(--primary-container);
}

/* ------------------------------------------------------------
   Homepage — Community Section
   ------------------------------------------------------------ */
.community-section {
  padding: var(--space-3xl) 0;
  background: var(--surface-container-lowest);
}

.community-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 1200px) {
  .community-section__grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .community-section__left {
    grid-column: span 7;
  }
  .community-section__right {
    grid-column: span 5;
    padding-top: var(--space-xl);
  }
}

.community-section__title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--on-surface);
}

.community-section__title .accent {
  color: var(--secondary-container);
}

.community-section__desc {
  color: var(--on-surface-variant);
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 36rem;
}

/* Video embed wrapper */
.video-wrap {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 9, 56, 0.25);
  background: var(--primary);
  aspect-ratio: 16/9;
}

.video-wrap__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-wrap__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 9, 56, 0.3);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.video-wrap__btn:hover {
  background: rgba(0, 9, 56, 0.2);
}

.video-wrap__play-circle {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
  margin-bottom: var(--space-sm);
}

.video-wrap__btn:hover .video-wrap__play-circle {
  transform: scale(1.1);
  background: var(--on-primary);
}

.video-wrap__play-label {
  color: var(--on-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.video-wrap__sound-icon {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-wrap__badge {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  background: rgba(0, 25, 108, 0.9);
  color: var(--on-primary);
  padding: 3px 10px;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  pointer-events: none;
}

/* Community benefit nav list */
.benefit-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(69, 70, 81, 0.1);
  list-style: none;
}

.benefit-nav__item {
  border-bottom: 1px solid rgba(69, 70, 81, 0.1);
}

.benefit-nav__link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  text-decoration: none;
  color: inherit;
}

.benefit-nav__body {
  padding-right: var(--space-lg);
}

.benefit-nav__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--primary-container);
  margin-bottom: var(--space-xs);
  transition: color 0.15s ease;
}

.benefit-nav__link:hover .benefit-nav__title {
  color: var(--secondary);
}

.benefit-nav__desc {
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 0;
  max-width: none;
}

.benefit-nav__arrow {
  color: rgba(69, 70, 81, 0.4);
  flex-shrink: 0;
  margin-top: 2px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.benefit-nav__link:hover .benefit-nav__arrow {
  color: var(--secondary);
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Homepage — Membership Tiers
   ------------------------------------------------------------ */
.tiers-section {
  padding: var(--space-3xl) 0;
  background: var(--surface-container-lowest);
}

.tiers-section__header {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto var(--space-3xl);
}

.tiers-section__title {
  color: var(--primary-container);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.tiers-section__subtitle {
  color: var(--on-surface-variant);
  font-size: 1.125rem;
}

.tiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .tiers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tier-card {
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
}

.tier-card--light {
  background: var(--surface-container-lowest);
  box-shadow: var(--shadow-ambient);
  border-radius: var(--border-radius);
}

.tier-card--dark {
  background: var(--primary);
  color: var(--on-primary);
  position: relative;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 9, 56, 0.3);
}

.tier-card__popular {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--secondary-container);
  color: var(--on-primary);
  padding: 3px var(--space-md);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  border-radius: 0 var(--border-radius) 0 var(--border-radius-sm);
}

.tier-card__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}

.tier-card--light .tier-card__eyebrow {
  color: var(--on-surface-variant);
}

.tier-card--dark .tier-card__eyebrow {
  color: var(--on-primary-container);
}

.tier-card__name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: var(--space-lg);
  line-height: 1;
}

.tier-card--light .tier-card__name {
  color: var(--primary-container);
}

.tier-card--dark .tier-card__name {
  color: var(--on-primary);
}

.tier-card__price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: var(--space-xl);
  line-height: 1;
}

.tier-card--light .tier-card__price {
  color: var(--primary-container);
}

.tier-card--dark .tier-card__price {
  color: var(--on-primary);
}

.tier-card__price-unit {
  font-size: 1.125rem;
  font-weight: 400;
}

.tier-card--light .tier-card__price-unit {
  color: var(--on-surface-variant);
}

.tier-card--dark .tier-card__price-unit {
  color: var(--on-primary-container);
}

.tier-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  flex-grow: 1;
}

.tier-card__feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 500;
}

.tier-card__feature--disabled {
  opacity: 0.5;
}

.tier-card__feature .material-symbols-outlined {
  font-size: 1.125rem;
}

.tier-card--light .tier-card__feature-check {
  color: var(--secondary-container);
}

.tier-card--dark .tier-card__feature-check {
  color: var(--secondary-container);
}

.tier-card__cta {
  display: block;
  width: 100%;
  padding: var(--space-md) 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all 0.2s ease;
}

.tier-card--light .tier-card__cta {
  border: 2px solid var(--primary-container);
  color: var(--primary-container);
}

.tier-card--light .tier-card__cta:hover {
  background: var(--primary-container);
  color: var(--on-primary);
}

.tier-card--dark .tier-card__cta {
  background: var(--secondary-container);
  color: var(--on-primary);
}

.tier-card--dark .tier-card__cta:hover {
  background: var(--secondary);
  color: var(--on-primary);
}

/* ------------------------------------------------------------
   Homepage — Final CTA
   ------------------------------------------------------------ */
.cta-section {
  padding: var(--space-3xl) 0;
  background: var(--surface);
  overflow: hidden;
  position: relative;
}

.cta-box {
  background: var(--primary);
  border-radius: var(--border-radius);
  padding: var(--space-2xl) var(--space-xl);
  overflow: hidden;
  position: relative;
}

@media (min-width: 768px) {
  .cta-box {
    padding: var(--space-3xl) var(--space-3xl);
  }
}

.cta-box__inner {
  max-width: 56rem;
  position: relative;
  z-index: 1;
}

.cta-box__title {
  color: var(--on-primary);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xl);
  line-height: 1.05;
}

.cta-box__title .accent {
  color: var(--secondary-container);
}

.cta-box__desc {
  color: var(--on-primary-container);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin-bottom: var(--space-2xl);
  font-weight: 500;
}

.cta-box__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 480px) {
  .cta-box__actions {
    flex-direction: row;
  }
}

/* ------------------------------------------------------------
   Resources Page — Specific Classes
   ------------------------------------------------------------ */
.page-header--dark {
  background: var(--primary);
  padding: var(--space-2xl) var(--space-xl);
}

.page-header--dark__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary-container);
  margin-bottom: var(--space-md);
}

.page-header--dark__title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--on-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.page-header--dark__title .accent {
  color: var(--secondary-container);
}

.page-header--dark__desc {
  color: var(--on-primary-container);
  font-size: 1.125rem;
  max-width: 40rem;
  margin-bottom: 0;
}

/* Type filter bar (sticky — stacks below site-header) */
.type-bar {
  background: var(--on-primary);
  position: sticky;
  top: calc(var(--nav-height) + 33px); /* sits below topbar (~33px) + mainnav */
  z-index: 90;
  border-bottom: 1px solid rgba(197, 197, 211, 0.2);
}

.type-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-xl);
}

.type-bar__scroll {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  overflow-x: auto;
  white-space: nowrap;
  /* Hide scrollbar */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.type-bar__scroll::-webkit-scrollbar {
  display: none;
}

/* Type buttons */
.type-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--on-surface-variant);
}

.type-btn:hover {
  color: var(--primary);
}

.type-btn.active {
  color: var(--primary);
  font-weight: 700;
  border-bottom: 2px solid var(--secondary-container);
}

/* Resources layout */
.resources-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
}

.resources-layout__inner {
  display: flex;
  gap: var(--space-2xl);
  align-items: flex-start;
}

/* Category sidebar — clears header + type-bar when sticky */
.resources-sidebar {
  display: none;
  width: 14rem;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--nav-height) + 33px + 60px + var(--space-md)); /* header + topbar + type-bar + gap */
}

@media (min-width: 1200px) {
  .resources-sidebar {
    display: block;
  }
}

.resources-sidebar__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-md);
}

.cat-link {
  display: block;
  text-align: left;
  width: 100%;
  font-family: var(--font-display);
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  border-left: 4px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--on-surface-variant);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.cat-link:hover {
  background: var(--surface-container-low);
}

.cat-link.active {
  color: var(--secondary);
  font-weight: 700;
  border-left: 4px solid var(--secondary-container);
  background: var(--surface-container-low);
  padding-left: var(--space-md);
}

.cat-desc-box {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--surface-container-low);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  line-height: 1.6;
  display: none;
}

/* Resources main area */
.resources-main {
  flex: 1;
  min-width: 0;
}

.resources-main__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}

.resources-main__count {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}

/* Mobile category select */
.cat-select {
  font-family: var(--font-display);
  font-size: 0.875rem;
  border: 1px solid rgba(197, 197, 211, 0.4);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--primary);
  background: var(--on-primary);
}

/* Resource grid */
.resource-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .resource-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Resource card */
.resource-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
  border-radius: var(--border-radius-sm);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.resource-card.hidden {
  display: none !important;
}

.resource-card--light {
  background: var(--surface-container-lowest);
  border-left: 4px solid var(--secondary-container);
}

.resource-card--dark {
  background: var(--primary-container);
  color: var(--on-primary);
  border-left: 4px solid var(--secondary-container);
}

.resource-card__body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.resource-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.type-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px var(--space-sm);
  border-radius: var(--border-radius-sm);
}

.type-badge--light {
  background: rgba(178, 43, 32, 0.1);
  color: var(--secondary);
}

.type-badge--dark {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.resource-card__date {
  font-size: 0.625rem;
  color: var(--on-surface-variant);
}

.resource-card--dark .resource-card__date {
  color: var(--on-primary-container);
}

.resource-card__play-icon {
  color: var(--secondary-container);
}

.resource-card__eyebrow {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-primary-container);
  margin-bottom: var(--space-sm);
  display: block;
}

.resource-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

.resource-card--light .resource-card__title {
  color: var(--primary);
}

.resource-card--dark .resource-card__title {
  color: var(--on-primary);
}

.resource-card__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}

.resource-card--light .resource-card__desc {
  color: var(--on-surface-variant);
}

.resource-card--dark .resource-card__desc {
  color: var(--on-primary-container);
}

.resource-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.875rem;
  color: var(--primary-container);
  text-decoration: none;
  transition: gap 0.2s ease;
  margin-top: auto;
}

.resource-card__cta:hover {
  color: var(--primary-container);
  gap: var(--space-md);
}

.resource-card__locked {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
  margin-top: auto;
}

.resource-card--dark .resource-card__locked {
  color: var(--on-primary-container);
}

.resource-card--dark .resource-card__cta--light {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  transition: background 0.2s ease;
  margin-top: auto;
  align-self: flex-start;
}

.resource-card--dark .resource-card__cta--light:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--on-primary);
}

/* Resource empty state */
.resource-empty {
  display: none;
  grid-column: 1 / -1;
  padding: var(--space-3xl) 0;
  text-align: center;
}

.resource-empty__icon {
  color: rgba(69, 70, 81, 0.4);
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-md);
}

.resource-empty__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary);
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}

.resource-empty__desc {
  color: var(--on-surface-variant);
  font-size: 0.875rem;
}

/* Newsletter CTA block */
.newsletter-cta {
  margin-top: var(--space-2xl);
  background: var(--surface-container-low);
  padding: var(--space-2xl) var(--space-xl);
  border-left: 4px solid var(--secondary-container);
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
}

.newsletter-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 32rem;
}

.newsletter-cta__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: var(--space-sm);
}

.newsletter-cta__desc {
  color: var(--on-surface-variant);
  margin-bottom: var(--space-lg);
  font-size: 0.875rem;
  line-height: 1.7;
}

.newsletter-cta__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 480px) {
  .newsletter-cta__form {
    flex-direction: row;
  }
}

.newsletter-cta__input {
  flex: 1;
  background: var(--on-primary);
  border: none;
  border-bottom: 2px solid var(--outline-variant);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--primary);
  outline: none;
  transition: border-color 0.15s ease;
}

.newsletter-cta__input:focus {
  border-bottom-color: var(--primary-container);
}

.newsletter-cta__submit {
  background: var(--primary-container);
  color: var(--on-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-xl);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.newsletter-cta__submit:hover {
  background: var(--primary);
}

.newsletter-cta__bg-icon {
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  opacity: 0.05;
  pointer-events: none;
  font-size: 12.5rem;
}

/* Mobile category dropdown (shown below 1200px) */
.cat-mobile {
  display: block;
}

@media (min-width: 1200px) {
  .cat-mobile {
    display: none;
  }
}

/* ------------------------------------------------------------
   Reduced Motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------
   Admin Components
   ------------------------------------------------------------ */

/* Admin table */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 2px solid var(--color-gray-border);
  text-align: left;
}
.admin-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-gray-border);
  vertical-align: top;
  font-size: 0.9375rem;
}
.admin-table tr:hover td { background: var(--surface-container-low); }

/* Small button variant for table actions */
.btn--sm {
  min-height: 32px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

/* Status-colored action buttons */
.btn--approve {
  background: var(--color-success);
  color: white;
  border: none;
}
.btn--approve:hover { background: #15803d; }

.btn--reject {
  background: transparent;
  color: var(--error);
  border: 1.5px solid var(--error);
}
.btn--reject:hover { background: var(--color-error-light); }

/* Admin page states */
.admin-loading {
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--on-surface-variant);
}
.admin-empty {
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--on-surface-variant);
}
.admin-error {
  background: var(--color-error-light);
  color: var(--error);
  padding: var(--space-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-lg);
}

/* ── Phase 7: Media Hub Components ──────────────────────────── */

/* Content type badge modifiers (extend existing .badge base) */
.badge--type-insight { background: #EFF6FF; color: #2563EB; }
.badge--type-guide { background: #F0FDF4; color: #16A34A; }
.badge--type-report { background: #F5F0EB; color: #B45309; }
.badge--type-event { background: #FFFBEB; color: #D97706; }
.badge--type-concept { background: var(--surface-container); color: var(--on-surface); }
.badge--type-case-study {
  background: var(--badge-case-study-bg);
  color: var(--badge-case-study-text);
}

/* Download format badge */
.badge--download {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F0F0FF;
  color: #4F46E5;
}
.badge--download .badge__icon {
  flex-shrink: 0;
}

.badge--vendor-content {
  background: var(--surface-container);
  color: var(--on-surface);
}

/* Tab bar — horizontal type tabs on /news-and-insights/ */
.tab-bar {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-gray-border);
}
.tab-bar__item {
  white-space: nowrap;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-surface);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.tab-bar__item:hover { color: var(--primary-container); }
.tab-bar__item.is-active {
  color: var(--on-primary);
  background: var(--primary-container);
  border-radius: 4px;
  border-bottom-color: transparent;
}

/* Content card with featured image */
.card--content { display: flex; flex-direction: column; }
.card--content { overflow: hidden; padding: 0; }
.card--content .card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card--content .card__body {
  padding: var(--space-md) 22px 22px;
}
.card--content .card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Article hero — detail page hero */
.article-hero {
  position: relative;
  width: 100%;
  min-height: 240px;
  background: var(--gradient-brand);
  display: flex;
  align-items: flex-end;
  padding: var(--space-2xl) 0 var(--space-lg);
}
.article-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.article-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--container-narrow, 720px);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.article-hero__content h1 { color: #fff; }

/* TOC sidebar — guides */
.toc {
  position: sticky;
  top: var(--space-lg);
  padding: var(--space-md);
  border-left: 2px solid var(--color-gray-border);
}
.toc__heading {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
  color: var(--on-surface);
}
.toc__item {
  display: block;
  padding: var(--space-xs) 0;
  margin-bottom: var(--space-lg);
  color: var(--on-surface);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.75;
  border-left: 2px solid transparent;
  padding-left: var(--space-sm);
  margin-left: -var(--space-md);
}
.toc__item:hover { color: var(--primary-container); }
.toc__item.is-active {
  border-left-color: var(--color-accent);
  color: var(--primary-container);
}

/* Callout block */
.callout {
  background: var(--surface-container-low);
  border-left: 4px solid var(--primary-container);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  border-radius: 0 4px 4px 0;
}
.callout--warning { border-left-color: var(--color-warning); }
.callout--tip { border-left-color: var(--color-success); }

/* Video embed wrapper */
.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: var(--space-lg) 0;
}
.video-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
}

/* CTA block */
.cta-block {
  background: var(--primary-container);
  color: var(--on-primary);
  padding: var(--space-lg) var(--space-2xl);
  text-align: center;
  border-radius: 8px;
  margin: var(--space-lg) 0;
}
.cta-block p { color: var(--on-primary); margin-bottom: var(--space-md); }
.cta-block .btn--primary {
  background: #fff;
  color: var(--primary-container);
}

/* Author bio card */
.author-bio {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: var(--space-lg);
  background: var(--surface-container-lowest);
  border-radius: 8px;
  margin-bottom: var(--space-2xl);
}
.author-bio__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.author-bio__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-container);
}
.author-bio__title {
  font-size: 1rem;
  color: var(--color-gray-mid);
}
.author-bio__links {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.author-bio__links a { color: var(--primary-container); text-decoration: underline; }

/* Concepts — see kc-* classes at end of file */

/* PDF download banner */
.pdf-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-container-low);
  border-left: 4px solid var(--primary-container);
  border-radius: 0 4px 4px 0;
  margin-bottom: var(--space-lg);
}

/* Mobile responsive filter pill touch target override */
@media (max-width: 768px) {
  .filter-pill { padding: 12px 16px; }
}

/* Article body layout with TOC sidebar at desktop */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: var(--container-narrow, 720px);
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .article-layout--toc {
    max-width: 1080px;
    grid-template-columns: 220px 1fr;
  }
}

/* ── Phase 8: Memberstack Integration ──────────────────────────── */

/* Paywall CTA Block */
.paywall-cta {
  background: var(--surface-container-lowest);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}
.paywall-cta__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}
.paywall-cta__heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-blue);
  margin: 0 0 var(--space-sm) 0;
}
.paywall-cta__body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--on-surface-variant);
  margin: 0;
}
.paywall-cta__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  align-items: center;
}

/* Nav Avatar + User Menu */
.mainnav__avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mainnav__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-container);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 44px;
  min-height: 44px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-gray-border);
  transition: box-shadow 0.15s;
  overflow: hidden;
}
.mainnav__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.mainnav__avatar:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-blue);
}
.mainnav__user-menu-wrapper {
  position: relative;
}

/* Dropdown container — animated entrance */
.mainnav__user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 260px;
  background: var(--surface-container-lowest);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.mainnav__user-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Profile card header */
.mainnav__profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #EBEBEB;
  border-radius: 12px 12px 0 0;
}
.mainnav__profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: var(--primary-container);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  overflow: hidden;
}
.mainnav__profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.mainnav__profile-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mainnav__profile-details strong {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary-container);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mainnav__profile-details > span {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Role badge */
.mainnav__role-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(0, 25, 108, 0.1);
  color: var(--color-blue);
  width: fit-content;
  margin-top: 2px;
}

/* Menu groups and items */
.mainnav__menu-group {
  padding: 6px 0;
}
.mainnav__menu-divider {
  height: 1px;
  background: var(--color-gray-border);
  margin: 0 16px;
}
.mainnav__user-dropdown .mainnav__dropdown-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text-color);
  font-size: 0.875rem;
  border-bottom: none;
  transition: background 0.1s, color 0.1s;
}
.mainnav__user-dropdown .mainnav__dropdown-item:hover {
  background: var(--color-gray-light);
}
.mainnav__user-dropdown .mainnav__dropdown-item:hover .material-symbols-outlined {
  color: var(--color-blue);
}
.mainnav__user-dropdown .mainnav__dropdown-item .material-symbols-outlined {
  font-size: 20px;
  margin-right: 8px;
  color: var(--color-gray-mid);
  transition: color 0.1s;
}
.mainnav__dropdown-item--logout {
  color: var(--error);
}
.mainnav__dropdown-item--logout .material-symbols-outlined {
  color: var(--error);
}
.mainnav__user-dropdown .mainnav__dropdown-item--logout:hover .material-symbols-outlined {
  color: var(--error);
}

/* Portal Layout — sidebar + main content */
.portal-layout {
  display: flex;
  min-height: 0;
  flex: 1;
}
.portal-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--color-blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl) 0;
}
.portal-sidebar__header {
  padding: 0 var(--space-lg) var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: var(--space-md);
}
.portal-sidebar__title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}
.portal-sidebar__subtitle {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-xs);
}
.portal-sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-sm);
}
.portal-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  font-size: 0.9375rem;
  transition: background 0.15s ease, color 0.15s ease;
  border-left: 3px solid transparent;
}
.portal-sidebar__link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.portal-sidebar__link--active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-left-color: var(--color-accent);
  font-weight: 600;
}
.portal-sidebar__icon {
  font-size: 20px;
  flex-shrink: 0;
}
.portal-sidebar__footer {
  padding: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--space-md);
}
.portal-sidebar__upgrade-btn {
  display: block;
  width: 100%;
  background: var(--color-accent);
  color: #fff;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.portal-sidebar__upgrade-btn:hover {
  opacity: 0.9;
}
.portal-sidebar__footer-link {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.15s ease;
}
.portal-sidebar__footer-link:hover {
  color: rgba(255, 255, 255, 0.8);
}
.portal-main {
  flex: 1;
  padding: var(--space-xl) var(--space-2xl);
  max-width: var(--max-width);
  min-width: 0;
  overflow-x: hidden;
}

/* Mobile: sidebar becomes horizontal strip */
@media (max-width: 767px) {
  .portal-layout {
    flex-direction: column;
  }
  .portal-sidebar {
    width: 100%;
    padding: var(--space-sm) 0;
  }
  .portal-sidebar__header,
  .portal-sidebar__footer {
    display: none;
  }
  .portal-sidebar__nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 var(--space-sm);
    gap: var(--space-xs);
  }
  .portal-sidebar__link {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8125rem;
    border-radius: var(--border-radius-sm);
  }
  .portal-sidebar__link--active {
    border-bottom-color: var(--color-accent);
    border-left-color: transparent;
  }
  .portal-main {
    padding: var(--space-lg) var(--space-md);
  }
}

/* Dashboard Layout (existing classes — now live inside .portal-main) */
.dashboard {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-3xl);
}
.dashboard__header {
  margin-bottom: var(--space-xl);
}
.dashboard__grid {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 768px) {
  .dashboard__grid {
    grid-template-columns: 320px 1fr;
  }
}
.dashboard__profile-card {
  text-align: center;
}
.dashboard__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-container);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.dashboard__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-xs) 0;
}
.dashboard__email {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  margin: 0 0 var(--space-sm) 0;
}
.dashboard__renewal {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  margin: 0 0 var(--space-md) 0;
}
.dashboard__upgrade {
  margin-top: var(--space-2xl);
}
.dashboard__section {
  margin-bottom: var(--space-xl);
}
.dashboard__section-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-md) 0;
}

/* Profile Page Components */
.profile-hero {
  background: var(--surface-container-lowest);
  border-bottom: 3px solid var(--color-accent);
  /* Bleed full width to viewport edge */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: calc(-1 * var(--space-xl));
  margin-bottom: var(--space-xl);
  padding: var(--space-2xl) calc(50vw - 50%);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  width: 100vw;
}
@media (max-width: 767px) {
  .profile-hero {
    margin-top: calc(-1 * var(--space-lg));
    margin-bottom: var(--space-lg);
    padding: var(--space-lg) calc(50vw - 50%);
    flex-direction: column;
    gap: var(--space-md);
  }
}
.profile-hero__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  min-width: 120px;
  border-radius: var(--border-radius);
  background: var(--primary-container);
  color: #fff;
  font-size: 2.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  overflow: hidden;
}
.profile-hero__info {
  flex: 1;
}
.profile-hero__name {
  font-size: 1.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}
.profile-hero__title {
  font-size: 1rem;
  color: var(--color-gray-mid);
  margin: 0;
}
.profile-hero__meta {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  margin-top: var(--space-sm);
}
.profile-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.profile-hero__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-sm);
  padding: 4px 12px;
  font-size: 0.8125rem;
  color: var(--color-blue);
  border: 1px solid var(--gray-border, #ddd);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.profile-hero__edit:hover {
  background: var(--surface-secondary, #f5f5f5);
  border-color: var(--color-blue);
}

/* LinkedIn Verification Card */
.verified-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: #eef2f8;
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
}
.verified-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #d9e4f0;
  border-radius: 8px;
  flex-shrink: 0;
}
.verified-card__icon {
  font-size: 24px;
  color: var(--color-blue);
}
.verified-card__content {
  flex: 1;
}
.verified-card__title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-blue);
  font-family: var(--font-display);
}
.verified-card__desc {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  margin-top: 2px;
}
.verified-card__check {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.verified-card__check-icon {
  font-size: 28px;
  color: #22c55e;
}

/* Profile body two-column grid */
.profile-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  padding-top: var(--space-xl);
}
@media (max-width: 767px) {
  .profile-body {
    grid-template-columns: 1fr;
  }
}
.profile-body__main {
  display: flex;
  flex-direction: column;
}
.profile-body__sidebar {
  display: flex;
  flex-direction: column;
}

/* Profile cards */
.profile-card {
  background: var(--surface-container-lowest);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.profile-card--accent {
  /* no accent border — clean card style */
}
.profile-card__heading {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-md);
}

/* Specialties dark card */
.profile-specialties {
  background: var(--primary);
  color: #fff;
  border-radius: var(--border-radius);
  padding: var(--space-lg);
}
.profile-specialties__heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 var(--space-md);
}
.profile-specialties__tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  margin: 0 var(--space-xs) var(--space-xs) 0;
}

/* Connect links */
.profile-connect {
  /* card wrapper — uses .profile-card */
}
.profile-connect__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  color: var(--primary);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.profile-connect__link:hover {
  color: var(--color-accent);
}

/* Profile CTA card */
.profile-cta {
  background: var(--surface-container-low);
  text-align: center;
  padding: var(--space-lg);
  border-radius: var(--border-radius);
}

/* Contribution cards */
.contribution-card {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--surface-container-low);
}
.contribution-card:last-child {
  border-bottom: none;
}
.contribution-card__type {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-xs);
}
.contribution-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-xs);
}
.contribution-card__title:hover {
  color: var(--color-accent);
}
.contribution-card__date {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
}

/* Vendor Portal Layout */
.vendor-portal {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}
.vendor-portal__header {
  margin-bottom: var(--space-xl);
}
.vendor-portal__panel {
  margin-top: var(--space-lg);
}
.vendor-portal__profile {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 768px) {
  .vendor-portal__profile {
    grid-template-columns: 1fr 1fr;
  }
}
.vendor-portal__current {
  /* read-only current listing view */
}
.vendor-portal__form {
  /* edit form container */
}
.vendor-portal__coming-soon {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--color-gray-mid);
}
.vendor-portal__coming-soon-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}
.vendor-portal__coming-soon-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  margin: 0 0 var(--space-sm) 0;
}
.vendor-portal__coming-soon-body {
  font-size: 1rem;
  color: var(--color-gray-mid);
  margin: 0;
}

/* Loading Skeleton */
.loading-skeleton {
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-container) 25%, var(--surface-container-low, #eee) 50%, var(--surface-container) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  margin-bottom: var(--space-sm);
}
.loading-skeleton--lg {
  height: 24px;
}
.loading-skeleton--xl {
  height: 48px;
  width: 48px;
  border-radius: 50%;
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Gated Content — hidden by default, Memberstack reveals via data-ms-content */
.gated-content {
  display: none;
}

/* Tab bar disabled state for coming-soon tabs */
.tab-bar__item[aria-disabled="true"] {
  color: var(--color-gray-mid);
  cursor: default;
  opacity: 0.6;
}
.tab-bar__item[aria-disabled="true"]:hover {
  color: var(--color-gray-mid);
}

/* ── Editorial Redesign ──────────────────────────────────────── */

/* ── Editorial Grid ── */
.editorial-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; }
@media (max-width: 1024px) { .editorial-grid { grid-template-columns: 1fr; } }

/* Container — wider editorial width */
.container--editorial {
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* Insights page header — centered, light bg */
.insights-header {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
}
.insights-header__eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.insights-header__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-blue);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}
.insights-header__title span {
  color: var(--color-accent);
}
.insights-header__subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-gray-mid);
  line-height: 1.6;
  margin: 0 auto;
  max-width: none;
}

/* Filter pills — rounded, editorial */
.filter-pill--editorial {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 24px;
  border: 1px solid var(--color-gray-border);
  background: var(--color-white);
  color: #444;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-pill--editorial.is-active {
  background: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}
.filter-pill--editorial:hover:not(.is-active) {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* Featured card — 2-col hero card */
.card--editorial-featured {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s;
}
.card--editorial-featured:hover {
  box-shadow: 0 8px 30px rgba(0, 25, 108, 0.1);
}
.card--editorial-featured__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card--editorial-featured__body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-white);
}
.card--editorial-featured__badges {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.card--editorial-featured__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-blue);
  line-height: 1.25;
  margin: 0 0 var(--space-md);
}
.card--editorial-featured__excerpt {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin: 0 0 var(--space-lg);
}
.card--editorial-featured__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.card--editorial-featured__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.card--editorial-featured__author-name {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-blue);
}
.card--editorial-featured__author-meta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: #999;
}

/* Content card — editorial style */
.card--editorial {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-white);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.card--editorial:hover {
  box-shadow: 0 8px 30px rgba(0, 25, 108, 0.1);
}
.card--editorial__image-wrap {
  position: relative;
  overflow: hidden;
}
.card--editorial__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.card--editorial__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  background: var(--color-white);
  padding: 3px 10px;
  border-radius: 12px;
}
.card--editorial__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card--editorial__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.3;
  margin: 0 0 0.6rem;
}
.card--editorial__excerpt {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: #555;
  margin: 0 0 var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--editorial__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: #999;
  margin-top: auto;
}

/* ── Case Study Cards ────────────────────────────────────────────── */

.card--case-study {
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, #fdf2ef 0%, #f8e4dd 100%);
  border-radius: var(--border-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border: 1px solid rgba(235, 84, 68, 0.18);
  position: relative;
}

/* Decorative radial glow — top right (warm) */
.card--case-study::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 84, 68, 0.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative radial glow — bottom left (darker warm tint) */
.card--case-study::after {
  content: '';
  position: absolute;
  bottom: 60px;
  left: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 50, 20, 0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.card--case-study:hover {
  box-shadow: 0 8px 30px rgba(235, 84, 68, 0.18);
  transform: translateY(-3px);
}

.card--case-study__image-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  z-index: 1;
}

.card--case-study__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--case-study__body {
  padding: var(--space-md) var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
  position: relative;
  z-index: 1;
}

.card--case-study__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-blue);
  margin: 0;
}

.card--case-study__excerpt {
  font-size: 0.875rem;
  color: var(--on-surface-variant, #555);
  line-height: 1.5;
  margin: 0;
}

.card--case-study__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: var(--space-sm);
}

.card--case-study__vendor-logo {
  width: auto;
  height: 28px;
  max-width: 80px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Orange accent bar — bottom of card */
.card--case-study__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--color-accent);
  padding: 12px var(--space-md);
  min-height: 52px;
  z-index: 1;
}

.card--case-study__bar-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.card--case-study__bar-date {
  position: absolute;
  right: var(--space-md);
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}

/* ── Case Study Detail Page ─────────────────────────────────────── */

.case-study__header {
  padding: var(--space-xl) 0;
}

.case-study__vendor-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.case-study__vendor-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--surface-container-lowest);
}

.case-study__vendor-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-blue);
  text-decoration: none;
}

.case-study__vendor-name:hover {
  text-decoration: underline;
}

.case-study__vendor-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gray-mid);
}

.case-study__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-blue);
  margin: 0 0 var(--space-md);
}

.case-study__badges {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.case-study__featured-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--border-radius);
  margin-bottom: var(--space-xl);
}

.case-study__body {
  max-width: 720px;
}

/* Prose — portable text / rich text body typography */
.prose p { margin: 0 0 var(--space-md); line-height: 1.75; }
.prose h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-blue); margin: var(--space-2xl) 0 var(--space-md); }
.prose h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--color-blue); margin: var(--space-xl) 0 var(--space-sm); }
.prose ul, .prose ol { margin: 0 0 var(--space-md); padding-left: var(--space-xl); }
.prose li { margin-bottom: var(--space-xs); line-height: 1.6; }
.prose blockquote { border-left: 4px solid var(--color-accent); margin: var(--space-xl) 0; padding: var(--space-sm) var(--space-lg); background: var(--surface-container-low, #f5f5f5); color: var(--on-surface-variant); font-style: italic; }
.prose figure { margin: var(--space-xl) 0; }
.prose figure img { width: 100%; border-radius: var(--border-radius); }
.prose strong { font-weight: 700; color: var(--color-text); }
.prose a { color: var(--color-blue); text-decoration: underline; }
.prose a:hover { color: var(--color-accent); }
.prose .callout { border-radius: 8px; padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; background: var(--surface-container-low, #f5f5f5); }
.prose .callout--warning { background: #fff8e1; border-left: 4px solid #f59e0b; }
.prose .callout--info { background: #e8f4fd; border-left: 4px solid var(--color-blue); }
.prose .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: var(--space-xl) 0; border-radius: var(--border-radius); }
.prose .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.case-study__vendor-cta {
  background: var(--surface-container-low);
  border-radius: 8px;
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.case-study__vendor-cta-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--surface-container-lowest);
}

.case-study__vendor-cta-info {
  flex: 1;
}

.case-study__vendor-cta-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-blue);
  margin: 0;
}

.case-study__vendor-cta-desc {
  font-size: 0.875rem;
  color: var(--on-surface-variant);
  margin: var(--space-xs) 0 var(--space-sm);
}

/* ── Case Study Index Page ──────────────────────────────────────── */

.case-study-hero {
  padding: var(--space-2xl) 0 var(--space-xl);
}

.case-study-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-blue);
  margin: 0 0 var(--space-sm);
}

.case-study-hero__subtitle {
  font-size: 1rem;
  color: var(--on-surface-variant);
  max-width: 640px;
  margin: 0;
}

/* Card grid — editorial 3-col */
.card-grid--editorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Results count label */
.results-count {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: var(--space-lg);
}
.results-count span {
  font-weight: 500;
  color: #999;
}

/* Badge — editorial variants */
.badge--editorial-featured {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--color-accent);
  padding: 3px 10px;
  border-radius: 12px;
}
.badge--editorial-category {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-blue);
  background: #f0f0f5;
  padding: 3px 10px;
  border-radius: 12px;
}
.badge--editorial-category-light {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 10px;
  border-radius: 12px;
}

/* ── Article Detail — Editorial ──────────────────────────────── */

/* Article hero — full-width blue gradient */
.article-hero--editorial {
  background: linear-gradient(135deg, #000938 0%, #00196C 100%);
  padding: var(--space-2xl) var(--space-lg) 5.5rem;
}
.article-hero--editorial .container--editorial {
  position: relative;
}

/* Breadcrumb */
.article-breadcrumb {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-lg);
}
.article-breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
.article-breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.8);
}
.article-breadcrumb__sep {
  margin: 0 0.4rem;
}
.article-breadcrumb__current {
  color: rgba(255, 255, 255, 0.7);
}

/* Article hero content */
.article-hero__badges {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.article-hero__title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  margin: 0 0 var(--space-md);
}
.article-hero__excerpt {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 var(--space-lg);
}
.article-hero__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.article-hero__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  overflow: hidden;
}
.article-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-hero__author-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}
.article-hero__author-meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

/* Image + Related row — overlaps hero */
.article-image-row {
  max-width: 1220px;
  margin: -4rem auto 0;
  padding: 0 var(--space-lg);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
.article-image-row__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  display: block;
}

/* Related news sidebar */
.related-news__heading {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-blue);
  margin-bottom: var(--space-md);
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--color-blue);
}
.related-news__item {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid #e8e8e8;
}
.related-news__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.related-news__category {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}
.related-news__link {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.35;
  text-decoration: none;
  display: block;
}
.related-news__link:hover {
  color: var(--color-accent);
}

/* 3-column article body layout */
.article-body-layout {
  max-width: 1220px;
  margin: 0 auto;
  padding: 2.5rem var(--space-lg) 0;
  display: grid;
  grid-template-columns: 180px 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}

/* Sticky TOC — editorial */
.toc--editorial {
  position: sticky;
  top: 1rem;
  border-left: none;
  padding: 0;
}
.toc--editorial__heading {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
  margin-bottom: var(--space-md);
}
.toc--editorial__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid #e5e5e5;
  padding-left: 0.85rem;
}
.toc--editorial__item {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #999;
  text-decoration: none;
  padding: 0.35rem 0;
}
.toc--editorial__item:hover {
  color: var(--color-blue);
}
.toc--editorial__item.is-active {
  color: var(--color-blue);
  font-weight: 600;
  border-left: 2px solid var(--color-accent);
  margin-left: calc(-0.85rem - 2px);
  padding-left: calc(0.85rem + 2px);
}

/* Article body — editorial typography */
.article__body--editorial h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-blue);
  margin: 2rem 0 1rem;
  line-height: 1.25;
}
.article__body--editorial h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-blue);
  margin: 1.5rem 0 0.75rem;
  line-height: 1.3;
}
.article__body--editorial p,
.article__body--editorial li {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: #333;
}
.article__body--editorial p {
  margin: 0 0 1.25rem;
}
.article__body--editorial ul,
.article__body--editorial ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}
.article__body--editorial li {
  margin-bottom: 0.35rem;
}
.article__body--editorial blockquote,
.article__body--editorial .pullquote {
  border-left: 4px solid var(--color-accent);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
}
.article__body--editorial blockquote p,
.article__body--editorial .pullquote p {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.4;
  margin: 0;
}

/* Author card — editorial */
.author-card {
  background: #f8f9fa;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 2rem;
  margin-top: var(--space-2xl);
}
.author-card__eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.author-card__inner {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.author-card__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.author-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-blue);
  margin-bottom: 0.5rem;
}
.author-card__bio {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 0.75rem;
}
.author-card__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0077B5;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
}
.author-card__social:hover {
  background: #005f8d;
}

/* ── Responsive — Editorial ──────────────────────────────────── */

@media (max-width: 1023px) {
  .card--editorial-featured {
    grid-template-columns: 1fr;
  }
  .card--editorial-featured__image {
    aspect-ratio: 16 / 9;
  }
  .card-grid--editorial {
    grid-template-columns: repeat(2, 1fr);
  }
  .article-image-row {
    grid-template-columns: 1fr;
  }
  .article-image-row .related-news-start {
    display: none;
  }
  .article-body-layout {
    grid-template-columns: 1fr;
  }
  .toc--editorial {
    position: static;
  }
  .article-body-layout .related-news-continue {
    display: block;
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--color-blue);
  }
}

@media (max-width: 767px) {
  .insights-header__title {
    font-size: 1.6rem;
  }
  .card-grid--editorial {
    grid-template-columns: 1fr;
  }
  .article-hero__title {
    font-size: 1.8rem;
  }
  .article-hero__excerpt {
    font-size: 1rem;
  }
  .author-card__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ------------------------------------------------------------
   Exchange Directory (redesign of Vendor Directory)
   ------------------------------------------------------------ */

/* ── Exchange Hero ────────────────────────────────────── */
.ex-hero {
  background: var(--surface-container-lowest);
  padding: 56px 0 40px;
  text-align: center;
}
.ex-hero__title {
  font-family: var(--font-display);
  font-size: 2.625rem;
  font-weight: 800;
  color: var(--primary-container);
  line-height: 1.15;
  margin-bottom: var(--space-sm);
}
.ex-hero__title em {
  color: var(--secondary-container);
  font-style: italic;
}
.ex-hero__subtitle {
  font-size: 1rem;
  color: var(--color-gray-mid);
  max-width: 520px;
  margin: 0 auto var(--space-lg);
  line-height: 1.6;
}
.ex-hero__search {
  max-width: 560px;
  margin: 0 auto var(--space-lg);
}
.ex-search-bar {
  background: var(--surface-container-low);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1.5px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ex-search-bar:focus-within {
  border-color: var(--primary-container);
  box-shadow: 0 0 0 3px rgba(0, 25, 108, 0.08);
}
.ex-search-bar__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-gray-mid);
}
.ex-search-bar__input {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  width: 100%;
  outline: none;
}
.ex-search-bar__input::placeholder {
  color: var(--color-gray-mid);
}
.ex-hero__powered {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  text-align: center;
  display: block;
  width: 100%;
}
.ex-hero__powered strong {
  color: var(--primary-container);
  font-family: var(--font-display);
  font-weight: 700;
}

/* ── Exchange Controls (toggle + filters) ─────────────── */
.ex-controls {
  background: var(--surface-container-lowest);
  border-top: 1px solid var(--color-gray-border);
}
.ex-toggle {
  display: flex;
  padding-top: var(--space-md);
}
.ex-toggle__btn {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 8px 22px;
  border: 2px solid var(--primary-container);
  background: var(--surface-container-lowest);
  color: var(--primary-container);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ex-toggle__btn:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.ex-toggle__btn:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  border-left: none;
}
.ex-toggle__btn.is-active {
  background: var(--primary-container);
  color: var(--on-primary);
}
.ex-toggle__btn:hover:not(.is-active) {
  background: rgba(0, 25, 108, 0.04);
}

.ex-filters {
  display: flex;
  gap: var(--space-sm);
  padding: 14px 0 var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}
.ex-pill {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 24px;
  border: 1px solid var(--color-gray-border);
  background: var(--surface-container-lowest);
  color: var(--primary-container);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ex-pill:hover {
  border-color: var(--primary-container);
  background: rgba(0, 25, 108, 0.03);
}
.ex-pill.is-active {
  background: var(--secondary-container);
  color: var(--on-primary);
  border-color: var(--secondary-container);
}

/* ── Exchange Results ─────────────────────────────────── */
.ex-results {
  padding: var(--space-lg) 0 var(--space-3xl);
}
.ex-results__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.ex-results__main {
  min-width: 0;
}
.ex-results__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}
.ex-results__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-container);
}
.ex-results__count {
  font-weight: 400;
  color: var(--color-gray-mid);
}

/* ── Exchange Sidebar Filters ────────────────────────── */
.ex-sidebar-filters {
  position: sticky;
  top: var(--space-lg);
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-md);
}
.ex-sidebar-filters__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-gray-border);
}
.ex-sidebar-filters__title {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-mid);
}
.ex-sidebar-filters__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--secondary-container);
}
.ex-filter-group {
  margin-bottom: var(--space-sm);
}
.ex-filter-group__parent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary-container);
  cursor: pointer;
  padding: 4px 0;
}
.ex-filter-group__child {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--on-surface-variant);
  cursor: pointer;
  padding: 3px 0 3px 22px;
}
.ex-filter-group__parent input,
.ex-filter-group__child input {
  width: 14px;
  height: 14px;
  accent-color: var(--primary-container);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Mobile Filter Button ────────────────────────────── */
.ex-mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  background: var(--surface-container-lowest);
  color: var(--primary-container);
  cursor: pointer;
  margin-bottom: var(--space-md);
}
.ex-mobile-filter-btn__count {
  font-weight: 700;
  color: var(--secondary-container);
}

/* ── Exchange Card ────────────────────────────────────── */
.ex-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 1100px) {
  .ex-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ex-results__layout {
    grid-template-columns: 1fr;
  }
  .ex-sidebar-filters {
    display: none;
    position: static;
  }
  .ex-sidebar-filters.is-open {
    display: block;
    margin-bottom: var(--space-md);
  }
  .ex-mobile-filter-btn {
    display: inline-flex;
  }
}
@media (max-width: 600px) {
  .ex-card-grid { grid-template-columns: 1fr; }
  .ex-hero__title { font-size: 1.625rem; }
}
@media (min-width: 901px) {
  .ex-hero__title { font-size: 2rem; }
}

.ex-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.ex-card:hover {
  border-color: var(--outline-variant);
  box-shadow: 0 4px 20px rgba(0, 25, 108, 0.08);
}
.ex-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ex-card__logo {
  width: 44px;
  height: 44px;
  background: var(--surface-container-low);
  border-radius: 10px;
  object-fit: contain;
  border: 1px solid var(--color-gray-border);
}
.ex-card__category {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--primary-container);
  background: var(--surface-container-low);
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ex-card__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--primary-container);
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.3;
}
.ex-card__verified {
  width: 18px;
  height: 18px;
  background: var(--primary-container);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ex-card__verified svg {
  width: 11px;
  height: 11px;
}
.ex-card__desc {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ex-card__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.ex-card__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  background: var(--surface-container-low);
  padding: 3px 9px;
  border-radius: 5px;
}
.ex-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--surface-container-low);
}
.ex-card__ext {
  width: 16px;
  height: 16px;
  color: var(--outline-variant);
}

/* ── Exchange Profile ─────────────────────────────────── */
.ex-breadcrumb {
  padding: var(--space-md) 0;
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
}
.ex-breadcrumb a {
  color: var(--color-gray-mid);
  text-decoration: none;
}
.ex-breadcrumb a:hover { color: var(--primary-container); }
.ex-breadcrumb__sep { margin: 0 var(--space-sm); color: var(--outline-variant); }
.ex-breadcrumb__current { color: var(--primary-container); font-weight: 600; }

.ex-profile-header {
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: 32px;
  margin-bottom: var(--space-lg);
}
.ex-profile-header__top {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}
.ex-profile-header__logo {
  width: 80px;
  height: 80px;
  background: var(--surface-container-low);
  border-radius: 14px;
  object-fit: contain;
  border: 1px solid var(--color-gray-border);
  flex-shrink: 0;
}
.ex-profile-header__badges {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.ex-member-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--secondary-container);
  background: rgba(235, 84, 68, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ex-member-badge svg { width: 12px; height: 12px; }
.ex-profile-header__name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-container);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
  margin-bottom: 6px;
}
.ex-profile-header__verified {
  width: 24px;
  height: 24px;
  background: var(--primary-container);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ex-profile-header__verified svg { width: 14px; height: 14px; }
.ex-profile-header__tagline {
  font-size: 1rem;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}
.ex-profile-header__meta {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ex-profile-header__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ex-profile-header__meta-icon {
  width: 16px;
  height: 16px;
  color: var(--color-gray-mid);
}
.ex-profile-header__actions {
  display: flex;
  gap: 10px;
}

/* ── Exchange Profile Content Layout ──────────────────── */
.ex-profile-content {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-3xl);
}
@media (max-width: 900px) {
  .ex-profile-content { grid-template-columns: 1fr; }
  .ex-profile-header__top { flex-direction: column; gap: var(--space-md); }
}

.ex-content-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: 28px;
  margin-bottom: var(--space-lg);
}
.ex-content-card h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-container);
  margin-bottom: 14px;
}

.ex-sidebar-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.ex-sidebar-card h3 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary-container);
  margin-bottom: 14px;
}

/* ── Case Study Card ──────────────────────────────────── */
.ex-case-study {
  border: 1px solid var(--color-gray-border);
  border-radius: 10px;
  padding: 20px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  margin-bottom: var(--space-md);
}
.ex-case-study:last-child { margin-bottom: 0; }
.ex-case-study:hover {
  border-color: var(--outline-variant);
  box-shadow: 0 2px 12px rgba(0, 25, 108, 0.06);
}
.ex-case-study__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
  gap: var(--space-sm);
}
.ex-case-study__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary-container);
  line-height: 1.3;
  flex: 1;
}
.ex-case-study__industry {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-gray-mid);
  background: var(--surface-container-low);
  padding: 3px 9px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ex-case-study__summary {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  line-height: 1.6;
  margin-bottom: 10px;
}
.ex-case-study__metrics {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}
.ex-metric__value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--secondary-container);
  line-height: 1.2;
}
.ex-metric__label {
  font-size: 0.6875rem;
  color: var(--color-gray-mid);
}
.ex-case-study__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-container);
}
.ex-case-study__link svg { width: 14px; height: 14px; }

/* ── Event Sidebar ────────────────────────────────────── */
.ex-event-item {
  display: flex;
  gap: 14px;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--surface-container-low);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
.ex-event-item:last-child { border-bottom: none; }
.ex-event-item:hover .ex-event-name { color: var(--secondary-container); }
.ex-event-date {
  width: 44px;
  height: 48px;
  background: var(--surface-container-low);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ex-event-date__month {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--secondary-container);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.ex-event-date__day {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--primary-container);
  line-height: 1.1;
}
.ex-event-name {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-container);
  line-height: 1.3;
  margin-bottom: 2px;
  transition: color 0.15s ease;
}
.ex-event-meta {
  font-size: 0.6875rem;
  color: var(--color-gray-mid);
}
.ex-event-role {
  display: inline-block;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--on-primary);
  background: var(--primary-container);
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Quick Facts ──────────────────────────────────────── */
.ex-fact-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-container-low);
  font-size: 0.8125rem;
}
.ex-fact-item:last-child { border-bottom: none; }
.ex-fact-label { color: var(--color-gray-mid); }
.ex-fact-value { color: var(--primary-container); font-weight: 600; }

/* ── Claim Banner ─────────────────────────────────────── */
.ex-claim-banner {
  background: var(--gradient-hero);
  border-radius: 14px;
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: var(--space-3xl);
}
.ex-claim-banner h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--on-primary);
  margin-bottom: 6px;
}
.ex-claim-banner p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 600px) {
  .ex-claim-banner { flex-direction: column; text-align: center; }
}

/* ── Claim Form Card ─────────────────────────────────── */
.claim-form-wrap {
  max-width: 680px;
  margin: 0 auto;
}

.claim-form-card {
  background: var(--surface-container-low);
  border-radius: 14px;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
}

.claim-form-card__header {
  margin-bottom: var(--space-lg);
}

.claim-form-card__header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 6px;
}

.claim-form-card__header p {
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}

.claim-form-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
}

@media (max-width: 600px) {
  .claim-form-card__grid { grid-template-columns: 1fr; }
}

.claim-form-card__error {
  color: var(--error);
  font-size: 0.875rem;
  margin-top: var(--space-sm);
}

.claim-form-card__error a {
  color: var(--error);
  text-decoration: underline;
}

.claim-form-card__actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ── Claim Success ───────────────────────────────────── */
.claim-success__inner {
  background: var(--gradient-hero);
  border-radius: 14px;
  padding: var(--space-xl);
  text-align: center;
}

.claim-success__icon {
  font-size: 2.5rem;
  color: var(--secondary-container);
  margin-bottom: var(--space-sm);
}

.claim-success__inner h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--on-primary);
  margin-bottom: 6px;
}

.claim-success__inner p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Capability tags (profile page) ───────────────────── */
.ex-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.ex-capability-tag {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-container);
  background: var(--surface-container-low);
  padding: 6px 14px;
  border-radius: var(--border-radius);
}

/* ── Partner list (sidebar) ───────────────────────────── */
.ex-partner-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-container-low);
  text-decoration: none;
  color: inherit;
}
.ex-partner-item:last-child { border-bottom: none; }
.ex-partner-logo {
  width: 36px;
  height: 36px;
  background: var(--surface-container-low);
  border-radius: var(--border-radius);
  object-fit: contain;
  border: 1px solid var(--color-gray-border);
  flex-shrink: 0;
}
.ex-partner-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--primary-container);
}
.ex-partner-type {
  color: var(--color-gray-mid);
  font-size: 0.6875rem;
}

/* ── Category tags (sidebar) ──────────────────────────── */
.ex-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ex-cat-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  background: var(--surface-container-low);
  padding: 5px 12px;
  border-radius: 6px;
}

/* ── Gallery grid ─────────────────────────────────────── */
.ex-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.ex-gallery-item {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/10;
  border: 1px solid var(--color-gray-border);
}
.ex-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Related section (profile) ────────────────────────── */
.ex-related {
  margin-bottom: var(--space-3xl);
}
.ex-related h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-container);
  margin-bottom: var(--space-md);
}
.ex-related .ex-card-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .ex-related .ex-card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------
   Key Concepts Library (redesign)
   ------------------------------------------------------------ */

/* ── KC Hero ─────────────────────────────────────────── */
.kc-hero {
  background: var(--surface-container-lowest);
  padding: 56px 0 40px;
  text-align: center;
}
.kc-hero__title {
  font-family: var(--font-display);
  font-size: 2.625rem;
  font-weight: 800;
  color: var(--primary-container);
  line-height: 1.15;
  margin-bottom: var(--space-sm);
}
.kc-hero__title em {
  color: var(--secondary-container);
  font-style: italic;
}
.kc-hero__subtitle {
  font-size: 1rem;
  color: var(--color-gray-mid);
  max-width: 520px;
  margin: 0 auto var(--space-lg);
  line-height: 1.6;
}
.kc-hero__search {
  max-width: 560px;
  margin: 0 auto var(--space-lg);
}
.kc-search-bar {
  background: var(--surface-container-low);
  border-radius: var(--border-radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1.5px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kc-search-bar:focus-within {
  border-color: var(--primary-container);
  box-shadow: 0 0 0 3px rgba(0, 25, 108, 0.08);
}
.kc-search-bar__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-gray-mid);
}
.kc-search-bar__input {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  width: 100%;
  outline: none;
}
.kc-search-bar__input::placeholder {
  color: var(--color-gray-mid);
}
.kc-hero__powered {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
}
.kc-hero__powered strong {
  color: var(--primary-container);
  font-family: var(--font-display);
  font-weight: 700;
}

/* ── KC Controls (filters) ───────────────────────────── */
.kc-controls {
  background: var(--surface-container-lowest);
  border-top: 1px solid var(--color-gray-border);
}
.kc-filters {
  display: flex;
  gap: var(--space-sm);
  padding: 14px 0 var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}
.kc-pill {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 24px;
  border: 1px solid var(--color-gray-border);
  background: var(--surface-container-lowest);
  color: var(--primary-container);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.kc-pill:hover {
  border-color: var(--primary-container);
  background: rgba(0, 25, 108, 0.03);
}
.kc-pill.is-active {
  background: var(--secondary-container);
  color: var(--on-primary);
  border-color: var(--secondary-container);
}

/* ── KC Results ──────────────────────────────────────── */
.kc-results {
  padding: var(--space-lg) 0 var(--space-3xl);
}
.kc-results__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}
.kc-results__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-container);
}
.kc-results__count {
  font-weight: 400;
  color: var(--color-gray-mid);
}

/* ── KC Card Grid ────────────────────────────────────── */
.kc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) {
  .kc-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .kc-card-grid { grid-template-columns: 1fr; }
  .kc-hero__title { font-size: 1.625rem; }
}
@media (max-width: 900px) {
  .kc-hero__title { font-size: 2rem; }
}

.kc-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.kc-card:hover {
  border-color: var(--outline-variant);
  box-shadow: 0 6px 20px rgba(0, 25, 108, 0.08);
  transform: translateY(-2px);
}
.kc-card__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--secondary-container);
  margin-bottom: 10px;
}
.kc-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-container);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}
.kc-card__def {
  font-size: 0.8375rem;
  color: var(--color-gray-mid);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.kc-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-md);
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-border);
}
.kc-card__cat {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-gray-mid);
  background: var(--surface-container);
  padding: 3px 10px;
  border-radius: 12px;
}
.kc-card__related {
  font-size: 0.7rem;
  color: var(--color-gray-mid);
}

/* ── KC Detail Hero ──────────────────────────────────── */
.kc-detail-hero {
  background: linear-gradient(135deg, var(--primary-container) 0%, #0A2472 100%);
  color: var(--on-primary);
  padding: 32px 0 36px;
}
.kc-breadcrumb {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.kc-breadcrumb a { color: inherit; text-decoration: none; }
.kc-breadcrumb a:hover { text-decoration: underline; }
.kc-breadcrumb__sep { margin: 0 2px; }
.kc-detail-hero__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary-container);
  background: rgba(235, 84, 68, 0.12);
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
}
.kc-detail-hero__title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 12px;
}
.kc-detail-hero__category {
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ── KC Detail Layout ────────────────────────────────── */
.kc-detail-body {
  display: grid;
  grid-template-columns: 1fr 300px;
}
@media (max-width: 900px) {
  .kc-detail-body { grid-template-columns: 1fr; }
}
.kc-detail-main {
  padding: var(--space-2xl) 0;
  border-right: 1px solid var(--color-gray-border);
  padding-right: var(--space-2xl);
}
@media (max-width: 900px) {
  .kc-detail-main { border-right: none; padding-right: 0; }
}

/* Definition callout */
.kc-definition {
  background: var(--surface-container-low);
  border-left: 3px solid var(--secondary-container);
  padding: 20px 24px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin-bottom: var(--space-2xl);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  font-style: italic;
}

/* Body content */
.kc-detail-main .article-body h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-container);
  margin: var(--space-xl) 0 var(--space-sm);
}
.kc-detail-main .article-body p,
.kc-detail-main .article-body li {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}
.kc-detail-main .article-body ul,
.kc-detail-main .article-body ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

/* Tags */
.kc-tags {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-border);
}
.kc-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-mid);
  background: var(--surface-container);
  padding: 4px 12px;
  border-radius: 12px;
}

/* ── KC Detail Sidebar ───────────────────────────────── */
.kc-detail-sidebar {
  padding: var(--space-2xl) 0 var(--space-2xl) var(--space-xl);
}
@media (max-width: 900px) {
  .kc-detail-sidebar {
    padding: var(--space-xl) 0 0;
    border-top: 1px solid var(--color-gray-border);
  }
}
.kc-sidebar-section {
  margin-bottom: var(--space-2xl);
}
.kc-sidebar-section:last-child { margin-bottom: 0; }
.kc-sidebar-section__title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-sm);
}
.kc-sidebar-concept {
  display: block;
  padding: 10px 14px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-sm);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.kc-sidebar-concept:hover {
  border-color: rgba(0, 25, 108, 0.2);
}
.kc-sidebar-concept__title {
  font-family: var(--font-display);
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--primary-container);
  margin-bottom: 3px;
}
.kc-sidebar-concept__def {
  font-size: 0.725rem;
  color: var(--color-gray-mid);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kc-sidebar-content-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-gray-border);
  text-decoration: none;
}
.kc-sidebar-content-item:last-child { border-bottom: none; }
.kc-sidebar-content-item__type {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-primary);
  background: var(--primary-container);
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.kc-sidebar-content-item__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.kc-sidebar-content-item:hover .kc-sidebar-content-item__title {
  color: var(--primary-container);
}

/* ── KC CTA Footer ───────────────────────────────────── */
.kc-cta {
  background: var(--surface-container-low);
  text-align: center;
  padding: var(--space-2xl) 0;
}

/* ============================================================
   Topic Landing Pages
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.topic-hero {
  background: linear-gradient(135deg, #000938 0%, var(--primary-container) 100%);
  color: var(--color-white);
  padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
}

.topic-hero .container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.topic-hero__label {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-lg);
}

.topic-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
  color: var(--color-white);
}

.topic-hero__title em {
  color: var(--secondary-container);
  font-style: italic;
}

.topic-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: 0.85;
  max-width: 640px;
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: var(--space-lg);
}

.topic-hero__stats {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}

.topic-hero__stat {
  text-align: center;
}

.topic-hero__stat-num {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  display: block;
  color: var(--color-accent);
}

.topic-hero__stat-label {
  font-size: 0.6875rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Featured ──────────────────────────────────────────────── */
.topic-featured {
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-border);
}

.topic-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.topic-section-head__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--primary-container);
}

.topic-section-head__meta {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
}

.topic-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.topic-feature-card {
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  padding: var(--space-md) calc(var(--space-md) + 2px);
  display: flex;
  gap: var(--space-md);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}

.topic-feature-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.topic-feature-card__thumb {
  width: 88px;
  height: 64px;
  background: linear-gradient(135deg, #e8eaf0, #d0d4e0);
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
}

.topic-feature-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topic-feature-card__badge {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--secondary-container);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.topic-feature-card__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}

.topic-feature-card__meta {
  font-size: 0.6875rem;
  color: var(--color-gray-mid);
  margin-top: var(--space-xs);
}

@media (max-width: 600px) {
  .topic-feature-grid { grid-template-columns: 1fr; }
}

/* ── Content Sections ──────────────────────────────────────── */
.topic-section {
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

.topic-section--alt {
  background: var(--color-gray-light);
}

.topic-section__divider {
  height: 3px;
  background: var(--secondary-container);
  width: 40px;
  border-radius: 2px;
  margin-bottom: var(--space-md);
}

/* ── Concept Chips ─────────────────────────────────────────── */
.topic-concepts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic-concept-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: 24px;
  font-size: 0.8125rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--primary-container);
  text-decoration: none;
  transition: all 0.2s;
}

.topic-concept-chip:hover {
  border-color: var(--secondary-container);
  background: rgba(235, 84, 68, 0.05);
  color: var(--secondary-container);
}

.topic-concept-chip__arrow {
  color: var(--secondary-container);
  font-size: 0.875rem;
}

/* ── Subcategories grid ────────────────────────────────────── */
.topic-subcategories { padding: var(--space-xl) 0; }
.topic-subcategories__title { font-size: 1.5rem; margin-bottom: var(--space-lg); }
.topic-subcategories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.topic-subcategory-card { display: block; padding: var(--space-lg); background: var(--surface-primary, #fff); border: 1px solid var(--color-gray-border); border-radius: 8px; text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s; }
.topic-subcategory-card:hover { border-color: var(--color-blue); box-shadow: var(--shadow-md); }
.topic-subcategory-card__name { font-size: 1.05rem; font-weight: 600; color: var(--color-blue); margin: 0 0 var(--space-xs); }
.topic-subcategory-card__desc { font-size: 0.85rem; color: var(--color-gray-mid); margin: 0; line-height: 1.5; }
@media (max-width: 960px) { .topic-subcategories__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .topic-subcategories__grid { grid-template-columns: 1fr; } }

/* ── CTA ───────────────────────────────────────────────────── */
.topic-cta {
  background: var(--primary-container);
  color: var(--color-white);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border-radius: var(--border-radius-lg);
  max-width: var(--max-width);
  margin: var(--space-xl) auto var(--space-2xl);
}

.topic-cta__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}

.topic-cta__text {
  font-size: 0.875rem;
  opacity: 0.8;
  margin: 0 auto var(--space-md);
}

.topic-cta__btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--secondary-container);
  color: var(--color-white);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.topic-cta__btn:hover {
  background: var(--color-accent-dark);
}

/* ── Pro Content Badge (site-wide) ─────────────────────────── */
.badge--pro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1;
}

.badge--pro svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.card--pro {
  border-left: 2px solid var(--color-warning);
}

.topic-concept-chip--pro {
  border-color: #fde68a;
  background: #fffbeb;
}

.topic-concept-chip--pro .topic-concept-chip__arrow {
  color: #92400e;
}

/* ── Topics Index (Category Landing) ─────────────────────── */
.topics-index-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  color: var(--color-white);
  padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
}

.topics-index-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.topics-index-hero__label {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary-container);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-lg);
}

.topics-index-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
  color: var(--color-white);
}

.topics-index-hero__title em {
  color: var(--secondary-container);
  font-style: italic;
}

.topics-index-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.65;
  opacity: 0.85;
  max-width: 640px;
  font-weight: 300;
}

/* ── Grid ── */
.topics-index-grid-section {
  padding: var(--space-2xl) var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
}

.topics-index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
}

/* ── Category Card ── */
.topics-index-card {
  background: var(--surface-container-lowest);
  padding: var(--space-xl);
  border-left: 4px solid transparent;
  box-shadow: var(--shadow-ambient);
  transition: border-color 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-decoration: none;
  color: inherit;
}

.topics-index-card:hover {
  border-left-color: var(--secondary-container);
  transform: translateY(-3px);
}

.topics-index-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-container-low);
  border-radius: var(--border-radius-sm);
}

.topics-index-card__icon .material-symbols-outlined {
  font-size: 1.75rem;
  color: var(--secondary-container);
}

.topics-index-card__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--primary-container);
  line-height: 1.2;
}

.topics-index-card__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--on-surface-variant);
}

.topics-index-card__count {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.topics-index-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  text-decoration: none;
  margin-top: auto;
  transition: color 0.2s;
}

.topics-index-card__link:hover {
  color: var(--secondary-container);
}

.topics-index-card__link svg {
  transition: transform 0.2s;
}

.topics-index-card__link:hover svg {
  transform: translateX(3px);
}

/* ── Newsletter CTA Card ── */
.topics-index-cta {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  padding: var(--space-2xl);
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
}

.topics-index-cta__content {
  max-width: 560px;
}

.topics-index-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.topics-index-cta__text {
  font-size: 1rem;
  color: var(--on-primary-container);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

.topics-index-cta__form {
  display: flex;
  gap: var(--space-md);
}

.topics-index-cta__input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s;
}

.topics-index-cta__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.topics-index-cta__input:focus {
  border-bottom-color: var(--secondary-container);
}

.topics-index-cta__btn {
  background: var(--secondary-container);
  color: var(--color-white);
  border: none;
  padding: 12px 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.2s;
}

.topics-index-cta__btn:hover {
  opacity: 0.9;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .topics-index-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .topics-index-cta {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .topics-index-hero {
    padding: var(--space-2xl) var(--space-md) var(--space-xl);
  }
  .topics-index-grid-section {
    padding: var(--space-xl) var(--space-md);
  }
  .topics-index-grid {
    grid-template-columns: 1fr;
  }
  .topics-index-cta {
    grid-column: span 1;
  }
  .topics-index-cta__form {
    flex-direction: column;
  }
}

/* ── Admin Dashboard ─────────────────────────────────── */

/* Layout */
.adm-body {
  margin: 0;
  background: var(--background);
  font-family: var(--font-body);
  color: var(--on-surface);
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}
.adm-content {
  flex: 1;
  min-width: 0;
  padding: var(--space-xl);
  overflow-y: auto;
}

/* Sidebar */
.adm-sidebar {
  width: 220px;
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: var(--space-md) 0;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}
.adm-sidebar__brand {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.adm-sidebar__brand a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--on-primary);
}
.adm-sidebar__logo {
  border-radius: 6px;
}
.adm-sidebar__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.adm-sidebar__section {
  padding: var(--space-xs) 0;
}
.adm-sidebar__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  padding: var(--space-xs) var(--space-md);
}
.adm-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.adm-sidebar__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-primary);
}
.adm-sidebar__link.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--on-primary);
  font-weight: 600;
}
.adm-sidebar__link .material-symbols-outlined {
  font-size: 20px;
}
.adm-sidebar__external {
  font-size: 14px !important;
  margin-left: auto;
  opacity: 0.5;
}
.adm-sidebar__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: var(--space-sm) var(--space-md);
}

/* Mobile toggle */
.adm-mobile-toggle {
  display: none;
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-primary);
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

@media (max-width: 900px) {
  .adm-sidebar {
    position: fixed;
    left: -220px;
    top: 0;
    z-index: 999;
    transition: left 0.25s ease;
  }
  .adm-sidebar.is-open {
    left: 0;
  }
  .adm-mobile-toggle {
    display: flex;
  }
  .adm-content {
    padding: var(--space-lg) var(--space-md);
  }
}

/* Page header */
.adm-page-header {
  margin-bottom: var(--space-xl);
}
.adm-page-header h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-container);
  margin: 0;
}
.adm-page-header p {
  color: var(--color-gray-mid);
  margin: var(--space-xs) 0 0;
  font-size: 0.875rem;
}

/* Metric cards */
.adm-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.adm-metric {
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
}
.adm-metric__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-xs);
}
.adm-metric__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-container);
}
@media (max-width: 900px) {
  .adm-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .adm-metrics { grid-template-columns: 1fr; }
}

/* Quick actions */
.adm-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

/* Top bar (search + buttons) */
.adm-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.adm-topbar__search {
  flex: 1;
  min-width: 200px;
}
.adm-topbar__search input {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  font-family: var(--font-body);
}
.adm-topbar__search input:focus {
  outline: none;
  border-color: var(--primary-container);
  box-shadow: 0 0 0 2px rgba(0, 25, 108, 0.1);
}

/* Tab bar for admin pages */
.adm-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-gray-border);
  margin-bottom: var(--space-lg);
}
.adm-tabs__btn {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  background: none;
  color: var(--color-gray-mid);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.adm-tabs__btn:hover {
  color: var(--primary-container);
}
.adm-tabs__btn.is-active {
  color: var(--primary-container);
  border-bottom-color: var(--primary-container);
}

/* Inline expand rows */
.adm-expand {
  background: #fff;
  padding: var(--space-lg);
  border-radius: var(--border-radius);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.adm-expand__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 600px) {
  .adm-expand__grid { grid-template-columns: 1fr; }
}

/* Modal overlay */
.adm-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}
.adm-modal-overlay.is-open {
  display: flex;
}
.adm-modal {
  background: var(--surface-container-lowest);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-md);
}
.adm-modal h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-container);
  margin: 0 0 var(--space-lg);
}

/* Badges */
.adm-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.adm-badge--green { background: var(--color-success-light); color: var(--color-success); }
.adm-badge--blue { background: var(--color-info-light); color: var(--color-info); }
.adm-badge--gray { background: var(--surface-container-low); color: var(--color-gray-mid); }
.adm-badge--amber { background: var(--color-warning-light); color: var(--color-amber); }

/* Pagination */
.adm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  font-size: 0.875rem;
}
.adm-pagination button {
  padding: 6px 14px;
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  background: var(--surface-container-lowest);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  cursor: pointer;
}
.adm-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Add form toggle area */
.adm-add-form {
  display: none;
  background: #fff;
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.adm-add-form.is-open {
  display: block;
}

/* Checkbox group for roles */
.adm-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}
.adm-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  cursor: pointer;
}
.adm-checkbox-group input {
  accent-color: var(--primary-container);
}

/* Form sections (grouped fields) */
.adm-form-section {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-gray-border);
}
.adm-form-section:last-of-type {
  border-bottom: none;
  margin-bottom: var(--space-md);
}
.adm-form-section__label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-md);
}

/* Category groups in vendor form */
.adm-cat-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-sm) 0;
}
.adm-cat-group + .adm-cat-group {
  border-top: 1px solid var(--surface-container-low);
}
.adm-cat-group__label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-mid);
  width: 140px;
  flex-shrink: 0;
}

/* ── Style B — Filled/Surface Form Fields ─────────────────────
   Applied to admin (.adm-body) and dashboard (.portal-layout).
   Does NOT apply to login/signup pages.
   ───────────────────────────────────────────────────────────── */

/* Base reset for all form fields in admin/dashboard */
.adm-body input[type="text"],
.adm-body input[type="email"],
.adm-body input[type="number"],
.adm-body input[type="password"],
.adm-body input[type="search"],
.adm-body input[type="url"],
.adm-body input[type="tel"],
.adm-body input[type="date"],
.adm-body select,
.adm-body textarea,
.portal-layout input[type="text"],
.portal-layout input[type="email"],
.portal-layout input[type="number"],
.portal-layout input[type="password"],
.portal-layout input[type="search"],
.portal-layout input[type="url"],
.portal-layout input[type="tel"],
.portal-layout input[type="date"],
.portal-layout select,
.portal-layout textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--field-font-md);
  color: var(--color-text);
  background: var(--color-gray-light);
  border: 1.5px solid transparent;
  border-radius: var(--field-radius);
  padding: var(--field-padding-md);
  outline: none;
  transition: var(--field-transition);
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.5;
}

/* Hover */
.adm-body input:hover,
.adm-body select:hover,
.adm-body textarea:hover,
.portal-layout input:hover,
.portal-layout select:hover,
.portal-layout textarea:hover {
  background: var(--color-surface-hover);
}

/* Focus */
.adm-body input:focus,
.adm-body select:focus,
.adm-body textarea:focus,
.portal-layout input:focus,
.portal-layout select:focus,
.portal-layout textarea:focus {
  background: #fff;
  border-color: var(--color-blue);
  box-shadow: var(--focus-ring);
}

/* Placeholder */
.adm-body input::placeholder,
.adm-body textarea::placeholder,
.portal-layout input::placeholder,
.portal-layout textarea::placeholder {
  color: var(--color-text-faint);
}

/* Disabled */
.adm-body input:disabled,
.adm-body select:disabled,
.adm-body textarea:disabled,
.portal-layout input:disabled,
.portal-layout select:disabled,
.portal-layout textarea:disabled {
  color: var(--color-text-faint);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Read-only */
.adm-body input[readonly],
.portal-layout input[readonly] {
  background: var(--color-gray-light);
  color: var(--color-gray-mid);
  cursor: default;
}
.adm-body input[readonly]:focus,
.portal-layout input[readonly]:focus {
  border-color: transparent;
  box-shadow: none;
}

/* Textarea */
.adm-body textarea,
.portal-layout textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.6;
}

/* Select — custom arrow */
.adm-body select,
.portal-layout select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

/* Labels — Style B */
.adm-body .form-field__label,
.adm-body .field-label,
.portal-layout .form-field__label,
.portal-layout .field-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

/* Required asterisk */
.field-label .required {
  color: var(--color-accent);
  margin-left: 3px;
}

/* Field wrapper */
.adm-body .form-field,
.adm-body .field-wrap,
.portal-layout .form-field,
.portal-layout .field-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}

/* Hint text */
.field-hint {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 4px;
}

/* Error message */
.field-error {
  font-size: 11px;
  color: var(--color-error, #C0392B);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Validation states */
.adm-body input.is-error,
.adm-body select.is-error,
.adm-body textarea.is-error,
.portal-layout input.is-error,
.portal-layout select.is-error,
.portal-layout textarea.is-error {
  border-color: var(--color-error, #C0392B);
  background: var(--color-error-light);
}
.adm-body input.is-error:focus,
.adm-body select.is-error:focus,
.portal-layout input.is-error:focus,
.portal-layout select.is-error:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.10);
}

.adm-body input.is-success,
.adm-body select.is-success,
.portal-layout input.is-success,
.portal-layout select.is-success {
  border-color: var(--color-success);
  background: var(--color-success-light);
}
.adm-body input.is-success:focus,
.portal-layout input.is-success:focus {
  box-shadow: 0 0 0 3px rgba(26, 122, 74, 0.08);
}

/* Field size variants */
.field-sm input,
.field-sm select {
  padding: var(--field-padding-sm);
  font-size: var(--field-font-sm);
}
.field-lg input,
.field-lg select {
  padding: var(--field-padding-lg);
  font-size: var(--field-font-lg);
}

/* ── Checkboxes & Radios — Style B ── */
.adm-body input[type="checkbox"],
.adm-body input[type="radio"],
.portal-layout input[type="checkbox"],
.portal-layout input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid var(--color-gray-border);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  margin-top: 1px;
  transition: var(--field-transition);
  flex-shrink: 0;
  padding: 0;
}
.adm-body input[type="radio"],
.portal-layout input[type="radio"] {
  border-radius: 50%;
}
.adm-body input[type="checkbox"]:checked,
.adm-body input[type="radio"]:checked,
.portal-layout input[type="checkbox"]:checked,
.portal-layout input[type="radio"]:checked {
  background: var(--color-blue);
  border-color: var(--color-blue);
}
.adm-body input[type="checkbox"]:checked::after,
.portal-layout input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.adm-body input[type="radio"]:checked::after,
.portal-layout input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.adm-body input[type="checkbox"]:hover,
.adm-body input[type="radio"]:hover,
.portal-layout input[type="checkbox"]:hover,
.portal-layout input[type="radio"]:hover {
  border-color: var(--color-blue);
}
.adm-body input[type="checkbox"]:focus,
.adm-body input[type="radio"]:focus,
.portal-layout input[type="checkbox"]:focus,
.portal-layout input[type="radio"]:focus {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Check row layout */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.check-label {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.4;
}
.check-label small {
  display: block;
  font-size: 11px;
  color: var(--color-gray-mid);
  margin-top: 1px;
}
.check-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Toggle Switch — Style B ── */
.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--color-gray-border);
  border-radius: 22px;
  cursor: pointer;
  transition: var(--field-transition);
}
.toggle input:checked ~ .toggle-track {
  background: var(--color-blue);
}
.toggle input:focus ~ .toggle-track {
  box-shadow: var(--focus-ring);
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.toggle input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(18px);
}
.toggle-label {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.4;
}
.toggle-label small {
  display: block;
  font-size: 11px;
  color: var(--color-gray-mid);
}

/* ── Input Groups — Style B ── */
.input-group {
  display: flex;
  align-items: stretch;
}
.input-addon {
  background: var(--color-gray-light);
  border: 1.5px solid transparent;
  color: var(--color-gray-mid);
  font-family: var(--font-body);
  font-size: var(--field-font-md);
  padding: var(--field-padding-md);
  white-space: nowrap;
  display: flex;
  align-items: center;
  transition: var(--field-transition);
}
.input-group .input-addon:first-child {
  border-radius: var(--field-radius) 0 0 var(--field-radius);
  border-right: 1px solid var(--color-gray-border);
}
.input-group .input-addon:last-child {
  border-radius: 0 var(--field-radius) var(--field-radius) 0;
  border-left: 1px solid var(--color-gray-border);
}
.input-group input {
  border-radius: 0;
  flex: 1;
}
.input-group input:first-child {
  border-radius: var(--field-radius) 0 0 var(--field-radius);
}
.input-group input:last-child {
  border-radius: 0 var(--field-radius) var(--field-radius) 0;
}

/* ── Multi-Select Tag Input — Style B ── */
.tag-input-wrap {
  background: var(--color-gray-light);
  border: 1.5px solid transparent;
  border-radius: var(--field-radius);
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  cursor: text;
  transition: var(--field-transition);
  min-height: 40px;
}
.tag-input-wrap:hover {
  background: var(--color-surface-hover);
}
.tag-input-wrap:focus-within {
  background: #fff;
  border-color: var(--color-blue);
  box-shadow: var(--focus-ring);
}
.tag-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--b2bea-blue-light);
  color: var(--color-blue);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.tag-token .tag-remove {
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-blue);
  opacity: 0.6;
  font-weight: 400;
  background: none;
  border: none;
  padding: 0;
}
.tag-token .tag-remove:hover { opacity: 1; }
.tag-input-field {
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--field-font-md);
  color: var(--color-text);
  background: transparent;
  flex: 1;
  min-width: 80px;
  padding: 2px 4px;
}
.tag-input-field::placeholder { color: var(--color-text-faint); }

/* ── Status Badge Select — Style B ── */
.status-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  pointer-events: none;
}
.status-select-wrap select {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 28px 5px 26px;
  border-radius: 20px;
  border: 1.5px solid currentColor;
  width: auto;
  background-position: right 8px center;
}
.status-active select  { color: var(--color-success); border-color: var(--color-success); background-color: var(--color-success-light); }
.status-active .status-dot  { background: var(--color-success); }
.status-pending select { color: var(--color-warning); border-color: var(--color-warning); background-color: var(--color-warning-light); }
.status-pending .status-dot { background: var(--color-warning); }
.status-inactive select { color: var(--color-gray-mid); border-color: var(--color-gray-border); background-color: var(--color-gray-light); }
.status-inactive .status-dot { background: var(--color-text-faint); }

/* ── Form Layout — Style B ── */
.form-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
.form-row.cols-2   { grid-template-columns: 1fr 1fr; }
.form-row.cols-3   { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols-1-2 { grid-template-columns: 1fr 2fr; }
.form-row.cols-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 640px) {
  .form-row.cols-2,
  .form-row.cols-3,
  .form-row.cols-1-2,
  .form-row.cols-2-1 {
    grid-template-columns: 1fr;
  }
}

.form-section {
  margin-bottom: 32px;
}
.form-section-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-gray-border);
}

/* Inline layout — label left, field right */
.form-inline .field-wrap {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  column-gap: 16px;
  margin-bottom: 16px;
}
.form-inline .field-label {
  text-align: right;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-dim);
  margin-bottom: 0;
}

/* ── Form Banners — Style B ── */
.form-banner {
  padding: 14px 16px;
  border-radius: var(--field-radius);
  border: 1.5px solid;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 13px;
}
.form-banner svg { flex-shrink: 0; margin-top: 1px; }
.form-banner-title { font-weight: 600; }
.form-banner-body  { font-size: 12px; margin-top: 2px; opacity: 0.85; }
.form-banner.is-error   { color: var(--color-error, #C0392B); border-color: var(--color-error, #C0392B); background: var(--color-error-light); }
.form-banner.is-success { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-light); }
.form-banner.is-warning { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-light); }

/* ── Character Count — Style B ── */
.textarea-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.char-count {
  font-size: 11px;
  color: var(--color-text-faint);
  font-family: var(--font-body);
}
.char-count.near-limit { color: var(--color-warning); }
.char-count.at-limit   { color: var(--color-error, #C0392B); }

/* Quill editor overrides for admin */
.adm-add-form .ql-toolbar {
  border-color: var(--color-gray-border);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background: var(--surface-container-low);
}
.adm-add-form .ql-container {
  border-color: var(--color-gray-border);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  min-height: 120px;
}
.adm-add-form .ql-editor {
  min-height: 120px;
}
.adm-add-form .ql-editor.ql-blank::before {
  font-style: normal;
  color: var(--color-gray-mid);
}

/* ------------------------------------------------------------
   Join / Membership Page
   ------------------------------------------------------------ */

/* Benefits grid — 4-col on desktop, 2-col tablet, 1-col mobile */
.join-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 900px) {
  .join-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .join-benefits { grid-template-columns: 1fr; }
}

/* Benefit card — uses .card base, adds icon + text layout */
.join-benefit__icon {
  font-size: 2.25rem;
  color: var(--primary-container);
  margin-bottom: var(--space-md);
}

.join-benefit__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-container);
  margin-bottom: var(--space-sm);
}

.join-benefit__desc {
  font-size: 0.875rem;
  color: var(--on-surface-variant);
  line-height: 1.6;
}

/* Testimonial section */
.join-testimonial__icon {
  font-size: 3.5rem;
  color: var(--secondary-container);
  margin-bottom: var(--space-lg);
}

.join-testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--on-primary);
  line-height: 1.3;
  margin-bottom: var(--space-xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.join-testimonial__quote em {
  color: var(--secondary-container);
  font-style: italic;
}

.join-testimonial__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.join-testimonial__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--on-primary);
}

.join-testimonial__role {
  font-size: 0.75rem;
  color: var(--on-primary-container);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Final CTA section centering */
.join-cta {
  text-align: center;
}

.join-cta h2 {
  color: var(--primary-container);
  margin-bottom: var(--space-md);
}

.join-cta p {
  margin-left: auto;
  margin-right: auto;
}

/* Hero — bottom padding creates space between text and toggle; toggle is abs-positioned at bottom edge */
.join-hero {
  padding: var(--space-3xl) 0 var(--space-3xl);
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Toggle wrap — absolutely positioned at the hero bottom edge */
.membership-toggle-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  /* Shift down 50% so the pill sits half on hero, half on white */
  transform: translateY(50%);
}

/* Toggle pill container */
.membership-toggle {
  display: inline-flex;
  background: var(--color-white);
  border-radius: 999px;
  padding: 6px;
  gap: 0;
  box-shadow: 0 4px 20px rgba(0, 9, 56, 0.15);
}

/* Toggle buttons */
.membership-toggle__btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 36px;
  border: none;
  background: transparent;
  color: var(--primary-container);
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.3s ease;
  white-space: nowrap;
  line-height: 1;
}

.membership-toggle__btn--active {
  background: var(--primary-container);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 25, 108, 0.25);
}

.membership-toggle__btn:hover:not(.membership-toggle__btn--active) {
  background: var(--surface-container-low);
}

@media (max-width: 480px) {
  .membership-toggle__btn {
    padding: 10px 20px;
    font-size: 0.85rem;
  }
}

/* Content area — white background, extra top padding to clear toggle that overflows from hero */
.membership-content {
  background: var(--color-white);
  padding-top: calc(28px + var(--space-2xl));
  padding-bottom: var(--space-3xl);
  position: relative;
}

/* Two-column detail layout */
.membership-detail {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-3xl);
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 900px) {
  .membership-detail {
    grid-template-columns: 1fr;
  }
}

/* Info column */
.membership-detail__info h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-container);
  margin-bottom: var(--space-lg);
}

.membership-detail__info p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-xl);
}

.membership-detail__info h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Checklist */
.membership-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

.membership-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.95rem;
  color: var(--on-surface);
}

.membership-checklist .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--color-success);
  flex-shrink: 0;
}

/* Pricing column */
.membership-detail__pricing .tier-card {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
}

.membership-detail__pricing .tier-card__tagline {
  font-size: 0.875rem;
  color: var(--on-primary-container);
  margin-bottom: var(--space-xl);
  text-align: center;
}

.membership-pricing-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--on-surface-variant);
  margin-top: var(--space-md);
}

/* Bottom help section */
.membership-help {
  text-align: center;
  padding: var(--space-3xl) 0;
  background: var(--surface);
}

.membership-help h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--primary-container);
  margin-bottom: var(--space-md);
}

.membership-help p {
  color: var(--on-surface-variant);
  margin-bottom: var(--space-xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.membership-help__links {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.membership-help__links a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary-container);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Professional feature list with icons */
.membership-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.membership-features li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.95rem;
  color: var(--primary-container);
  font-weight: 500;
}

.membership-features__icon {
  font-size: 1.5rem;
  color: var(--primary-container);
  opacity: 0.6;
  flex-shrink: 0;
}

/* Professional pricing card */
.membership-detail__pricing {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-lg));
  align-self: flex-start;
}

.pro-pricing-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.pro-pricing-card__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-md);
}

.pro-pricing-card__price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-container);
  line-height: 1;
  margin-bottom: 4px;
}

.pro-pricing-card__unit {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--on-surface-variant);
}

.pro-pricing-card__billing {
  font-size: 0.85rem;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-xl);
}

.pro-pricing-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 14px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  background: var(--primary-container);
  color: var(--color-white);
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all 0.2s ease;
}

.pro-pricing-card__cta:hover {
  background: var(--primary);
  color: var(--color-white);
}

.pro-pricing-card__cta .material-symbols-outlined {
  font-size: 1.125rem;
}

.pro-pricing-card__signin {
  font-size: 0.85rem;
  color: var(--on-surface-variant);
  margin-top: var(--space-md);
}

.pro-pricing-card__signin a {
  color: var(--primary-container);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pro-pricing-card__divider {
  border: none;
  border-top: 1px solid var(--color-gray-border);
  margin: var(--space-lg) 0;
}

.pro-pricing-card__includes-label {
  font-size: 0.8rem;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-sm);
  text-align: center;
}

.pro-pricing-card__includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: left;
}

.pro-pricing-card__includes li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--on-surface);
}

.pro-pricing-card__includes .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-success);
}

/* Free tier nudge card */
.free-tier-card {
  margin-top: var(--space-lg);
  background: var(--color-gray-light);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.free-tier-card__heading {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
  margin: 0 0 var(--space-sm);
}

.free-tier-card__body {
  font-size: 0.9rem;
  color: var(--on-surface-variant);
  line-height: 1.5;
  margin: 0 0 var(--space-md);
}

.free-tier-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-container);
  text-decoration: none;
}

.free-tier-card__cta:hover {
  color: var(--primary);
}

.free-tier-card__cta .material-symbols-outlined {
  font-size: 1rem;
}

.free-tier-card__footnote {
  font-size: 0.78rem;
  color: var(--on-surface-variant);
  margin: var(--space-sm) 0 0;
  opacity: 0.75;
}

/* Vendor panel header */
.vendor-panel__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.vendor-panel__label {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-white);
  background: var(--primary-container);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: var(--space-lg);
}

.vendor-panel__header h2 {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary-container);
  margin-bottom: var(--space-md);
}

.vendor-panel__header p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--on-surface-variant);
  max-width: 700px;
  margin: 0 auto;
}

/* Vendor tier grid — 4 columns */
.vendor-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 1100px) {
  .vendor-tiers {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .vendor-tiers {
    grid-template-columns: 1fr;
  }
}

/* Vendor tier card */
.vendor-tier {
  background: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s ease;
}

.vendor-tier:hover {
  box-shadow: var(--shadow-md);
}

.vendor-tier--popular {
  border-color: var(--color-accent);
  border-width: 2px;
}

.vendor-tier__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.vendor-tier__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary-container);
  margin-bottom: 4px;
}

.vendor-tier__subtitle {
  font-size: 0.9rem;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-xl);
}

.vendor-tier__price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary-container);
  line-height: 1;
  margin-bottom: 2px;
}

.vendor-tier__price-unit {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--on-surface-variant);
}

.vendor-tier__price--custom {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-container);
  line-height: 1.1;
  margin-bottom: var(--space-sm);
}

.vendor-tier__desc {
  font-size: 0.875rem;
  color: var(--on-surface-variant);
  line-height: 1.6;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.vendor-tier__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-grow: 1;
}

.vendor-tier__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: var(--on-surface);
  line-height: 1.5;
}

.vendor-tier__features .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Vendor CTA buttons */
.vendor-tier__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 14px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  margin-top: auto;
}

.vendor-tier__cta--filled {
  background: var(--primary-container);
  color: var(--color-white);
}

.vendor-tier__cta--filled:hover {
  background: var(--primary);
  color: var(--color-white);
}

.vendor-tier__cta--accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.vendor-tier__cta--accent:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

.vendor-tier__cta--outline {
  background: transparent;
  border: 2px solid var(--primary-container);
  color: var(--primary-container);
}

.vendor-tier__cta--outline:hover {
  background: var(--primary-container);
  color: var(--color-white);
}

.vendor-tier__cta .material-symbols-outlined {
  font-size: 1.125rem;
}

/* ── Profile Edit Page ──────────────────────────────────────── */

.profile-edit__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  text-decoration: none;
  margin-bottom: var(--space-lg);
  transition: color 0.15s;
}
.profile-edit__back:hover { color: var(--color-blue); }

.profile-edit__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--space-xl);
}

.profile-edit__form-wrap {
  max-width: 640px;
}

.profile-edit__section {
  background: var(--surface-container-lowest);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-lg);
}

.profile-edit__section-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-md);
}

.profile-edit__field { margin-bottom: var(--space-md); }
.profile-edit__field:last-child { margin-bottom: 0; }

.profile-edit__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--space-xs);
}

.profile-edit__input,
.profile-edit__textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  color: var(--text-color);
  background: var(--surface-container-lowest);
  border: 1px solid var(--gray-border, #ddd);
  border-radius: var(--border-radius-sm);
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.profile-edit__textarea { min-height: 100px; resize: vertical; }

.profile-edit__input:focus,
.profile-edit__textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(0, 25, 108, 0.12);
}

.profile-edit__input[disabled] {
  background: var(--surface-container-low);
  color: var(--color-gray-mid);
  cursor: not-allowed;
  opacity: 0.7;
}

.profile-edit__help {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  margin-top: var(--space-xs);
}

/* Headshot preview */
.profile-edit__headshot-preview {
  width: 96px;
  height: 96px;
  border-radius: var(--border-radius);
  background: var(--primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-family: var(--font-display);
  font-weight: 700;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
.profile-edit__headshot-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hidden file input + styled label trigger */
.profile-edit__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.profile-edit__photo-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-blue);
  cursor: pointer;
  transition: color 0.15s;
}
.profile-edit__photo-btn:hover { color: var(--color-blue-dark); }

/* Radio cards for visibility */
.profile-edit__radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.profile-edit__radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1.5px solid var(--color-gray-border, #ddd);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.profile-edit__radio-card:hover {
  border-color: var(--color-blue);
  background: var(--surface-container-low);
}
.profile-edit__radio-card:has(input:checked) {
  border-color: var(--color-blue);
  background: rgba(0, 25, 108, 0.04);
}

.profile-edit__radio-input { margin-top: 2px; flex-shrink: 0; }

.profile-edit__radio-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-edit__radio-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color);
}

.profile-edit__radio-desc {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
}

/* Actions row */
.profile-edit__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Feedback messages */
.profile-edit__feedback {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  margin-bottom: var(--space-md);
}
.profile-edit__feedback--success {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.profile-edit__feedback--error {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/* ── People Profile (standalone public page) ─────────── */
/* ── Public Profile Page (pp-*) ──────────────────────── */
.pp {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: var(--space-3xl);
}

/* Banner */
.pp-banner {
  height: 260px;
  background: linear-gradient(135deg, #000938 0%, var(--color-blue) 100%);
  position: relative;
}
@media (min-width: 768px) {
  .pp-banner { height: 320px; }
}
.pp-banner__overlay {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Claim Banner */
.pp-claim {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 640px;
  z-index: 10;
}
.pp-claim__inner {
  background: #fff;
  border-radius: var(--border-radius);
  border-top: 4px solid var(--color-accent);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.pp-claim__content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.pp-claim__icon {
  font-size: 24px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.pp-claim__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  margin: 0;
  color: var(--text-color);
}
.pp-claim__desc {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  margin: 2px 0 0;
}
.pp-claim__btn {
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .pp-claim__inner {
    flex-direction: column;
    text-align: center;
  }
  .pp-claim__content {
    flex-direction: column;
  }
  .pp-claim__btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Profile Header */
.pp-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xl);
  padding: 0 var(--space-lg);
  position: relative;
  z-index: 2;
  padding-top: var(--space-xl);
}
@media (min-width: 768px) {
  .pp-header {
    padding: 0 48px;
    padding-top: var(--space-xl);
  }
}

/* Photo */
.pp-header__photo-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: -96px;
}
@media (min-width: 768px) {
  .pp-header__photo-wrap {
    margin-top: -140px;
  }
}
.pp-header__photo {
  width: 128px;
  height: 128px;
  border-radius: var(--border-radius);
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  object-fit: cover;
  background: #fff;
}
@media (min-width: 768px) {
  .pp-header__photo {
    width: 192px;
    height: 192px;
  }
}
.pp-header__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
}
@media (min-width: 768px) {
  .pp-header__photo--initials { font-size: 3.5rem; }
}
.pp-header__verified-dot {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #fff;
  padding: 4px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  line-height: 0;
}

/* Info */
.pp-header__info {
  flex: 1;
  min-width: 200px;
}
.pp-header__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.pp-header__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-blue);
  margin: 0;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .pp-header__name { font-size: 2.25rem; }
}
.pp-header__pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff5f4;
  color: var(--color-accent);
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pp-header__headline {
  font-size: 1.1rem;
  color: var(--color-gray-mid);
  font-weight: 500;
  margin: var(--space-xs) 0 0;
}
.pp-header__headline strong {
  color: var(--color-blue);
}
.pp-header__company-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-blue);
  text-decoration: none;
  margin-top: var(--space-xs);
  transition: color 0.15s;
}
.pp-header__company-link:hover {
  color: var(--color-accent);
}
.pp-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-gray-mid);
}
.pp-header__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pp-header__meta-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-blue);
  text-decoration: none;
}
.pp-header__meta-link:hover {
  color: var(--color-accent);
}

/* Actions */
.pp-header__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.pp-header__connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Grid layout */
.pp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--space-lg) 0;
}
@media (min-width: 768px) {
  .pp-grid {
    padding: var(--space-2xl) 48px 0;
  }
}
@media (min-width: 1024px) {
  .pp-grid {
    grid-template-columns: 2fr 1fr;
  }
}
.pp-grid__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.pp-grid__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Sections */
.pp-section__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-blue);
  margin: 0 0 var(--space-lg);
}
.pp-section__body {
  font-size: 0.9375rem;
  color: var(--color-gray-mid);
  line-height: 1.7;
  margin: 0;
}

/* Verified Callout */
.pp-verified-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: #f0f4ff;
  border: 1px solid #dce4f8;
  border-radius: var(--border-radius);
  padding: var(--space-lg);
}
.pp-verified-callout__icon {
  background: #fff;
  padding: 12px;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  line-height: 0;
}
.pp-verified-callout__text {
  flex: 1;
}
.pp-verified-callout__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-blue);
  font-size: 0.9375rem;
  margin: 0;
}
.pp-verified-callout__desc {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  margin: 4px 0 0;
}

/* Featured Contributions - bento grid */
.pp-contrib-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .pp-contrib-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.pp-contrib-card {
  background: #fff;
  border: 1px solid var(--gray-border, #e5e5e5);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
  position: relative;
}
.pp-contrib-card:hover {
  border-color: var(--color-blue);
  box-shadow: 0 2px 12px rgba(0, 25, 108, 0.08);
}
.pp-contrib-card--featured {
  padding: 0;
  grid-row: span 2;
  min-height: 280px;
}
.pp-contrib-card--featured:hover {
  border-color: transparent;
}
.pp-contrib-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.pp-contrib-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-blue) 0%, transparent 60%);
  opacity: 0.85;
}
.pp-contrib-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-lg);
  z-index: 1;
}
.pp-contrib-card__tag {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}
.pp-contrib-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-blue);
  margin: 0;
  line-height: 1.4;
}
.pp-contrib-card__title--white {
  color: #fff;
  font-size: 1.1rem;
}
.pp-contrib-card__excerpt {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  margin: 4px 0 0;
  line-height: 1.5;
}
.pp-contrib-card__excerpt--white {
  color: rgba(255, 255, 255, 0.8);
}
.pp-contrib-card__icon {
  font-size: 28px;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.pp-contrib-card__body {
  flex: 1;
}

/* B2BEA Standing */
.pp-standing {
  background: #fff;
  border: 1px solid var(--gray-border, #e5e5e5);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.pp-standing__title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-lg);
}
.pp-standing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.pp-standing__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-md);
  background: var(--surface-secondary, #f8f8f8);
  border-radius: var(--border-radius);
  transition: background 0.2s;
}
.pp-standing__item:hover {
  background: #f0f4ff;
}
.pp-standing__icon {
  font-size: 28px;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.pp-standing__label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: 0.04em;
}

/* Connect & Links */
.pp-links {
  background: #fff;
  border: 1px solid var(--gray-border, #e5e5e5);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.pp-links__title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-lg);
}
.pp-links__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.pp-links__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--border-radius-sm, 4px);
  text-decoration: none;
  color: var(--color-gray-mid);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.pp-links__item:hover {
  background: var(--surface-secondary, #f8f8f8);
  color: var(--color-blue);
}
.pp-links__icon {
  font-size: 20px;
  color: var(--color-gray-mid);
  transition: color 0.15s;
}
.pp-links__item:hover .pp-links__icon {
  color: var(--color-blue);
}
.pp-links__empty {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  margin: 0;
}

/* Link branded icons */
.pp-links__icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
  transition: opacity 0.15s;
}
.pp-links__icon-wrap--linkedin {
  background: #0077B5;
  font-family: var(--font-display);
}
.pp-links__icon-wrap--x {
  background: #000;
  font-size: 15px;
}
.pp-links__icon-wrap--web {
  background: var(--color-blue);
}
.pp-links__item:hover .pp-links__icon-wrap {
  opacity: 0.85;
}

/* Experience Timeline */
.pp-timeline {
  position: relative;
  padding-left: 0;
}
.pp-timeline__line {
  position: absolute;
  left: 24px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--gray-border, #e5e5e5);
}
.pp-timeline__item {
  position: relative;
  display: flex;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}
.pp-timeline__item:last-child {
  padding-bottom: 0;
}
.pp-timeline__logo {
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius);
  background: #fff;
  border: 1px solid var(--gray-border, #e5e5e5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.pp-timeline__logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.pp-timeline__details {
  flex: 1;
  min-width: 0;
}
.pp-timeline__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-blue);
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.3;
}
.pp-timeline__current {
  display: inline-block;
  background: #ecfdf5;
  color: #065f46;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 6px;
}
.pp-timeline__company {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color);
  margin: 2px 0 0;
}
.pp-timeline__dates {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  margin: 2px 0 0;
}
.pp-timeline__desc {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  line-height: 1.6;
  margin: var(--space-sm) 0 0;
  max-width: 640px;
}

/* Career Goals */
.pp-goals {
  background: #fff;
  border: 1px solid var(--gray-border, #e5e5e5);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.pp-goals__tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-border, #e5e5e5);
}
.pp-goals__tab {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-mid);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pp-goals__tab:hover {
  color: var(--text-color);
}
.pp-goals__tab--active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}
.pp-goals__panel {
  display: none;
  padding: var(--space-lg);
}
.pp-goals__panel--active {
  display: block;
}
.pp-goals__desc {
  font-size: 0.9375rem;
  color: var(--color-gray-mid);
  line-height: 1.7;
  margin: 0 0 var(--space-lg);
}
.pp-goals__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.pp-goals__tag {
  background: #f0f4ff;
  color: var(--color-blue);
  padding: 4px 12px;
  border-radius: var(--border-radius-sm, 4px);
  font-size: 0.75rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  .pp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  .pp-header__actions {
    width: 100%;
  }
  .pp-header__connect-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Member Directory (md-*) ──────────────────────────── */
.md-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
}

.md-header {
  margin-bottom: var(--space-2xl);
}
.md-header__title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-blue);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .md-header__title { font-size: 3rem; }
}
.md-header__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
}
.md-header__subtitle {
  font-size: 1rem;
  color: var(--color-gray-mid);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
}
.md-header__subtitle strong {
  color: var(--color-blue);
}

/* View toggle */
.md-view-toggle {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 6px;
}
.md-view-toggle__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-border, #e5e5e5);
  border-radius: var(--field-radius);
  background: #fff;
  color: var(--color-gray-mid);
  cursor: pointer;
  transition: all 0.15s;
}
.md-view-toggle__btn:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.md-view-toggle__btn--active {
  background: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
}
.md-view-toggle__btn--active:hover {
  color: #fff;
}

/* Layout */
.md-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 1024px) {
  .md-layout {
    grid-template-columns: 280px 1fr;
  }
}

/* Sidebar */
.md-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
  .md-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* Filters card */
.md-filters {
  background: #fff;
  padding: var(--space-lg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-border, #e5e5e5);
}
.md-filters__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-blue);
  margin: 0 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.md-filter-group {
  margin-bottom: var(--space-md);
}
.md-filter-group__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-mid);
  margin-bottom: 6px;
}
.md-filter-group__select {
  width: 100%;
  background: var(--color-gray-light);
  border: 1.5px solid transparent;
  border-radius: var(--field-radius);
  padding: 9px 32px 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: var(--field-transition);
  outline: none;
}
.md-filter-group__select:hover {
  background-color: var(--color-surface-hover);
}
.md-filter-group__select:focus {
  background: #fff;
  border-color: var(--color-blue);
  box-shadow: var(--focus-ring);
}

/* Search input with icon */
.md-search-wrap {
  position: relative;
}
.md-search-wrap__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--color-gray-mid);
  pointer-events: none;
}
.md-search-wrap__input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: var(--color-gray-light);
  border: 1.5px solid transparent;
  border-radius: var(--field-radius);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  outline: none;
  transition: var(--field-transition);
}
.md-search-wrap__input:hover {
  background: var(--color-surface-hover);
}
.md-search-wrap__input:focus {
  background: #fff;
  border-color: var(--color-blue);
  box-shadow: var(--focus-ring);
}
.md-search-wrap__input::placeholder {
  color: var(--color-text-faint);
}

/* Clear button */
.md-filters__clear {
  width: 100%;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-blue);
  background: none;
  border: 2px solid rgba(0, 25, 108, 0.1);
  border-radius: var(--field-radius);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: var(--space-sm);
}
.md-filters__clear:hover {
  background: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
}

/* Verified Promo */
.md-promo {
  background: linear-gradient(135deg, #000938 0%, var(--color-blue) 100%);
  padding: var(--space-lg);
  border-radius: var(--border-radius);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.md-promo__content {
  position: relative;
  z-index: 1;
}
.md-promo__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}
.md-promo__desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 var(--space-md);
  line-height: 1.5;
}
.md-promo__link {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}
.md-promo__link:hover {
  gap: 8px;
}
.md-promo__bg-icon {
  position: absolute;
  right: -16px;
  bottom: -16px;
  font-size: 120px;
  opacity: 0.08;
}

/* Main content area */
.md-main {
  min-width: 0;
}

/* Card grid */
.md-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) {
  .md-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .md-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Member card */
.md-card {
  background: #fff;
  border: 1px solid var(--gray-border, #e5e5e5);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.md-card:hover {
  box-shadow: var(--shadow-md);
}
.md-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.md-card__photo-wrap {
  position: relative;
}
.md-card__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-gray-light);
  filter: grayscale(100%) contrast(1.1);
}
.md-card__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}
.md-card__verified-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  line-height: 0;
}
.md-card__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.md-card__badge {
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.md-card__badge--pro {
  background: var(--color-accent);
  color: #fff;
}
.md-card__badge--verified {
  background: #eff6ff;
  color: #1d4ed8;
}

/* Card body */
.md-card__body {
  flex: 1;
  margin-bottom: var(--space-md);
}
.md-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-blue);
  margin: 0;
  transition: color 0.2s;
}
.md-card:hover .md-card__name {
  color: var(--color-accent);
}
.md-card__title {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  margin: 4px 0 0;
  line-height: 1.5;
}
.md-card__company-line {
  font-size: 0.75rem;
  color: var(--color-gray-mid);
  margin: 6px 0 0;
}
.md-card__company-line strong {
  font-weight: 700;
  color: var(--color-blue);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
}

/* Card actions */
.md-card__actions {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-light);
}
.md-card__btn {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: var(--field-radius);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: block;
}
.md-card__btn--connect {
  background: var(--color-blue);
  color: #fff;
}
.md-card__btn--connect:hover {
  background: var(--color-accent);
}
.md-card__btn--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.md-card__btn--view {
  background: none;
  color: var(--color-blue);
  border: 1px solid var(--gray-border, #e5e5e5);
}
.md-card__btn--view:hover {
  background: var(--color-gray-light);
}

/* Empty state */
.md-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--color-gray-mid);
}
.md-empty p {
  margin: var(--space-md) 0 0;
  font-size: 1rem;
}

/* Pagination */
.md-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-2xl);
}
.md-page-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--field-radius);
  border: 1px solid var(--gray-border, #e5e5e5);
  background: #fff;
  color: var(--color-gray-mid);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
}
.md-page-btn:hover:not(:disabled) {
  background: var(--color-gray-light);
}
.md-page-btn--active {
  background: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
}
.md-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.md-page-dots {
  padding: 0 6px;
  color: var(--color-gray-mid);
  font-size: 0.875rem;
}

/* ── List View ── */
.md-grid--list {
  grid-template-columns: 1fr !important;
  gap: var(--space-sm);
}
.md-grid--list .md-card {
  flex-direction: row;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-radius);
}
.md-grid--list .md-card:hover {
  box-shadow: none;
  background: var(--color-gray-light);
}
.md-grid--list .md-card__top {
  margin-bottom: 0;
  flex-shrink: 0;
}
.md-grid--list .md-card__photo {
  width: 56px;
  height: 56px;
}
.md-grid--list .md-card__photo--initials {
  font-size: 1.1rem;
}
.md-grid--list .md-card__verified-dot {
  bottom: -1px;
  right: -1px;
}
.md-grid--list .md-card__verified-dot .material-symbols-outlined {
  font-size: 15px !important;
}
.md-grid--list .md-card__badges {
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}
.md-grid--list .md-card__body {
  flex: 1;
  margin-bottom: 0;
  min-width: 0;
  padding: 0 var(--space-lg);
}
.md-grid--list .md-card__name {
  font-size: 1rem;
}
.md-grid--list .md-card__title {
  margin-top: 2px;
}
.md-grid--list .md-card__actions {
  border-top: none;
  padding-top: 0;
  flex-shrink: 0;
  gap: var(--space-sm);
}
.md-grid--list .md-card__btn {
  padding: 8px 20px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .md-grid--list .md-card {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .md-grid--list .md-card__badges {
    order: -1;
    width: 100%;
  }
  .md-grid--list .md-card__actions {
    width: 100%;
  }
  .md-grid--list .md-card__btn {
    flex: 1;
  }
}

@media (max-width: 1023px) {
  .md-sidebar {
    order: -1;
  }
}

/* ── Contributions List (Profile Page) ───────────────── */
.contributions {
  background: var(--surface-container-low, #f5f5f5);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}
.contributions__heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-blue);
}
.contribution-item {
  background: var(--color-white, #fff);
  border: 1px solid var(--gray-border, #e0e0e0);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.contribution-item:last-child {
  margin-bottom: 0;
}
.contribution-item__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.contribution-item__tag {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  border-radius: 3px;
  display: inline-block;
}
.contribution-item__tag--article {
  background: var(--color-blue);
  color: #fff;
}
.contribution-item__tag--guide {
  background: var(--color-accent);
  color: #fff;
}
.contribution-item__tag--event {
  background: var(--surface-container-low, #eee);
  color: var(--text-color);
}
.contribution-item__date {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
}
.contribution-item__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}
.contribution-item__title:hover {
  color: var(--color-blue);
}
.contribution-item__excerpt {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}
.contribution-item__action {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.contribution-item__action:hover {
  color: var(--color-accent-dark, #d04030);
}

/* ── Invite to Speak CTA (Profile Sidebar) ───────────── */
.profile-invite {
  border: 2px dashed var(--gray-border, #ddd);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  text-align: center;
  margin-top: var(--space-lg);
}
.profile-invite__icon {
  font-size: 32px;
  color: var(--color-blue);
  display: block;
  margin: 0 auto var(--space-sm);
}
.profile-invite__heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}
.profile-invite__copy {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  line-height: 1.5;
  margin: 0 0 var(--space-md);
}
.profile-invite__btn {
  width: 100%;
  display: block;
  text-align: center;
}


/* ── LinkedIn Verified Badge ──────────────────────────────────── */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-blue);
  background: rgba(0, 25, 108, 0.1);
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.verified-badge .material-symbols-outlined {
  font-size: 14px;
  color: var(--color-blue);
}

/* ── Verification Toast ──────────────────────────────────────── */
@keyframes toast-slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.toast-verified {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 9999;
  background: var(--color-blue);
  color: #fff;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: var(--shadow-md);
  animation: toast-slide-up 0.25s ease forwards;
  font-size: 0.9375rem;
  font-weight: 600;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   Dashboard Redesign — BEM dash- prefix
   Applied to: src/dashboard/index.njk
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Welcome Bar ─────────────────────────────────────────── */
.dash-welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-blue);
  color: white;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-xl);
}
.dash-welcome__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.dash-welcome__greeting {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
}
.dash-welcome__tier {
  font-size: 12px;
  opacity: 0.7;
}
.dash-welcome__stats {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
}
.dash-welcome__stat {
  text-align: center;
  padding: 0 var(--space-lg);
}
.dash-welcome__stat:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.dash-welcome__stat-number {
  font-size: 22px;
  font-weight: 800;
  display: block;
}
.dash-welcome__stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
}

/* ── 2. Two-column layout ───────────────────────────────────── */
.dash-body {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--space-xl);
}
.dash-main {
  min-width: 0;
}
.dash-rail {
  min-width: 0;
}

/* ── 3. Continue Learning Hero ──────────────────────────────── */
.dash-continue {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: linear-gradient(135deg, #00196C, #1a3a8f);
  color: white;
  padding: var(--space-xl);
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  margin-bottom: var(--space-xl);
  transition: opacity 0.15s;
}
.dash-continue:hover {
  opacity: 0.95;
}
.dash-continue__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-continue__info {
  flex: 1;
}
.dash-continue__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}
.dash-continue__lesson {
  font-size: 13px;
  opacity: 0.8;
  margin: 0 0 var(--space-sm);
}
.dash-continue__bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-xs);
}
.dash-continue__bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 0.3s;
}
.dash-continue__progress-text {
  font-size: 11px;
  opacity: 0.7;
  margin: 0;
}

/* ── 4. New Course Spotlight ────────────────────────────────── */
.dash-spotlight {
  display: flex;
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-xl);
  background: white;
}
.dash-spotlight__accent {
  width: 140px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #EB5444, #c0392b);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  gap: var(--space-sm);
}
.dash-spotlight__accent-count {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.dash-spotlight__body {
  flex: 1;
  padding: var(--space-lg) var(--space-xl);
}
.dash-spotlight__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.dash-spotlight__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}
.dash-spotlight__desc {
  font-size: 13px;
  color: #666;
  margin: 0 0 var(--space-md);
  line-height: 1.5;
}
.dash-spotlight__meta {
  font-size: 11px;
  color: #888;
  margin-top: var(--space-sm);
}

/* ── 5. Shared Section header + card row ────────────────────── */
.dash-section {
  margin-bottom: var(--space-xl);
}
.dash-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}
.dash-section__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.dash-section__link {
  font-size: 13px;
  color: var(--color-blue);
  text-decoration: none;
  font-weight: 600;
}
.dash-section__link:hover {
  text-decoration: underline;
}
.dash-section__row {
  display: grid;
  gap: var(--space-md);
}
.dash-section__row--3 {
  grid-template-columns: repeat(3, 1fr);
}
.dash-section__row--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* ── 6. Content Cards (guides, reports) ─────────────────────── */
.dash-card {
  display: block;
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-lg);
  background: white;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}
.dash-card:hover {
  box-shadow: var(--shadow-sm);
}
.dash-card__type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.dash-card__type--guide {
  color: var(--color-accent);
}
.dash-card__type--report {
  color: var(--color-blue);
}
.dash-card__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}
.dash-card__meta {
  font-size: 11px;
  color: #888;
}
.dash-card__pro {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--color-blue);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── 7. Right Rail — Your Progress ─────────────────────────── */
.dash-progress {
  margin-bottom: var(--space-xl);
}
.dash-progress__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 var(--space-md);
}
.dash-progress__item {
  margin-bottom: var(--space-md);
}
.dash-progress__course {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}
.dash-progress__bar {
  height: 4px;
  background: #e8e8e8;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-xs);
}
.dash-progress__bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--color-accent);
}
.dash-progress__bar-fill--complete {
  background: #2e7d32;
}
.dash-progress__count {
  font-size: 11px;
  color: #888;
}
.dash-progress__empty {
  font-size: 13px;
  color: var(--color-gray-mid);
  font-style: italic;
}

/* ── 8. Right Rail — Upcoming Events ───────────────────────── */
.dash-events__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 var(--space-md);
}
.dash-events__item {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  text-decoration: none;
  color: inherit;
}
.dash-events__item:hover {
  opacity: 0.8;
}
.dash-events__date {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
  min-width: 48px;
}
.dash-events__info {
  flex: 1;
}
.dash-events__name {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.dash-events__location {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}
.dash-events__empty {
  font-size: 13px;
  color: var(--color-gray-mid);
  font-style: italic;
}

/* ── 9. Responsive — mobile stacking (<768px) ───────────────── */
@media (max-width: 767px) {
  .dash-welcome {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
  .dash-welcome__stats {
    flex-wrap: wrap;
    justify-content: center;
  }
  .dash-welcome__stat:not(:first-child) {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: var(--space-sm);
  }
  .dash-body {
    grid-template-columns: 1fr;
  }
  .dash-section__row--3,
  .dash-section__row--2 {
    grid-template-columns: 1fr;
  }
  .dash-spotlight {
    flex-direction: column;
  }
  .dash-spotlight__accent {
    width: 100%;
    height: auto;
    padding: var(--space-md);
  }
}

/* ── Course Components ────────────────────────────────────────────── */

.course-card {
  background: var(--surface-container-lowest);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
}
.course-card:hover {
  box-shadow: var(--shadow-md);
  background-color: var(--surface-container);
}
.course-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.course-card__thumb--placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-mid);
  font-size: 2rem;
}
.course-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.course-card__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}
.course-card__badge--pro {
  color: #2563eb;
}
.course-card__badge--enrolled {
  color: #16a34a;
}
.course-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  color: var(--text-color);
}
.course-card__title a {
  color: inherit;
  text-decoration: none;
}
.course-card__title a:hover {
  color: var(--color-accent);
}
.course-card__excerpt {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
  flex: 1;
}
.course-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  border-top: 1px solid var(--color-gray-border);
  padding-top: var(--space-sm);
}
.course-card__price {
  font-weight: 700;
  color: var(--text-color);
}
.course-card__price--included {
  font-weight: 600;
  color: #2563eb;
}

/* Course Catalog Grid */
.course-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

/* Course Detail */
.course-detail__hero {
  padding: var(--space-2xl) 0;
}
.course-detail__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 768px) {
  .course-detail__layout {
    grid-template-columns: 1fr;
  }
}
.course-detail__sidebar {
  position: sticky;
  top: var(--space-lg);
  background: var(--surface-container-lowest);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.course-detail__modules {
  margin: var(--space-xl) 0;
}
.course-detail__module {
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-md);
  overflow: hidden;
}
.course-detail__module-header {
  padding: var(--space-md);
  background: var(--surface-container);
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course-detail__module-header .material-symbols-outlined {
  transition: transform 0.2s ease;
}
.course-detail__module.is-open .course-detail__module-header .material-symbols-outlined {
  transform: rotate(180deg);
}
.course-detail__lesson-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.course-detail__lesson-item {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-gray-border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9375rem;
}
.course-detail__lesson-item .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--color-gray-mid);
}
.course-detail__instructor {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}
.course-detail__instructor img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Lesson Player ────────────────────────────────────────────── */

.lesson-player {
  display: flex;
  min-height: calc(100vh - 120px);
}
.lesson-player__sidebar {
  width: 280px;
  min-width: 280px;
  background: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}
.lesson-player__sidebar-header {
  padding: var(--space-lg) var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.lesson-player__sidebar-header h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}
.lesson-player__sidebar-header a {
  color: rgba(255,255,255,0.7);
  font-size: 0.8125rem;
  text-decoration: none;
}
.lesson-player__sidebar-header a:hover {
  color: #fff;
}
.lesson-player__modules {
  flex: 1;
  padding: var(--space-sm) 0;
}
.lesson-player__module-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
  padding: var(--space-md) var(--space-md) var(--space-xs);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lesson-player__module-label .material-symbols-outlined {
  font-size: 1rem;
  transition: transform 0.2s ease;
}
.lesson-player__module.is-collapsed .lesson-player__module-label .material-symbols-outlined {
  transform: rotate(-90deg);
}
.lesson-player__module.is-collapsed .lesson-player__lesson-list {
  display: none;
}
.lesson-player__lesson-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lesson-player__lesson {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.lesson-player__lesson:hover {
  background: rgba(255,255,255,0.05);
}
.lesson-player__lesson.is-active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 600;
}
.lesson-player__lesson.is-complete .material-symbols-outlined {
  color: #16a34a;
}
.lesson-player__lesson .material-symbols-outlined {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

/* Progress bar */
.lesson-player__progress {
  padding: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.lesson-player__progress-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-xs);
}
.lesson-player__progress-track {
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  overflow: hidden;
}
.lesson-player__progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Main content area */
.lesson-player__main {
  flex: 1;
  background: var(--surface-container-lowest);
  padding: var(--space-xl);
  overflow-y: auto;
}
.lesson-player__video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--space-xl);
  background: #000;
}
.lesson-player__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lesson-player__body {
  max-width: 720px;
  line-height: 1.75;
}
.lesson-player__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-border);
}

/* Loading and error states */
.lesson-player__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--color-gray-mid);
}
.lesson-player__error {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--error);
}

/* Mobile sidebar drawer */
.lesson-player__toggle {
  display: none;
  position: fixed;
  bottom: var(--space-lg);
  left: var(--space-lg);
  z-index: 100;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .lesson-player__sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    z-index: 200;
    height: 100vh;
    transition: left 0.3s ease;
  }
  .lesson-player__sidebar.is-open {
    left: 0;
  }
  .lesson-player__toggle {
    display: flex;
  }
  .lesson-player__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
  }
  .lesson-player__overlay.is-open {
    display: block;
  }
}

/* ── Academy Course Editor Layout ───────────────────────────── */
.ace-layout {
  display: flex;
  min-height: calc(100vh - 64px);
  gap: 0;
}

.ace-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--surface-raised, #f9fafb);
  border-right: 1px solid var(--color-gray-border);
  padding: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.ace-sidebar__back {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  text-decoration: none;
}
.ace-sidebar__back:hover {
  color: var(--primary);
}

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

.ace-sidebar__nav-item {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.875rem;
  color: var(--on-surface);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.ace-sidebar__nav-item:hover {
  background: var(--color-gray-light, #f3f4f6);
}
.ace-sidebar__nav-item.is-active {
  background: var(--color-gray-light, #f3f4f6);
  border-left-color: var(--primary);
  font-weight: 600;
  color: var(--primary);
}

.ace-sidebar__status {
  padding: var(--space-md) var(--space-lg);
  margin-top: auto;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.ace-sidebar__section-label {
  padding: var(--space-xs) var(--space-lg);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-mid);
  margin-top: var(--space-md);
}

.ace-sidebar__breadcrumb {
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-gray-mid);
}

.ace-main {
  flex: 1;
  padding: var(--space-xl) var(--space-2xl);
  overflow-y: auto;
  max-width: 900px;
}

.ace-panel {
  display: none;
}
.ace-panel.is-active {
  display: block;
}

.ace-panel__header {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
  color: var(--on-surface);
}

.ace-module-card {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-border);
  border-radius: 8px;
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  position: relative;
  overflow: hidden;
}

.ace-module-card__number {
  position: absolute;
  top: -8px;
  right: 12px;
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--color-gray-border, #e5e7eb);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.ace-module-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.ace-module-card__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
}

.ace-lesson-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--color-gray-light, #f3f4f6);
}
.ace-lesson-row:last-child {
  border-bottom: none;
}

.ace-lesson-row__icon {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
}

.ace-lesson-row__title {
  flex: 1;
}

.ace-lesson-row__actions {
  display: flex;
  gap: var(--space-xs);
}

.ace-add-module {
  border: 2px dashed var(--color-gray-border);
  border-radius: 8px;
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-gray-mid);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-size: 0.875rem;
}
.ace-add-module:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ace-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-2xl);
  border-top: 1px solid var(--color-gray-border);
  background: var(--color-white, #fff);
  position: sticky;
  bottom: 0;
}

.ace-rich-toolbar {
  display: flex;
  gap: 2px;
  padding: var(--space-xs);
  border: 1px solid var(--color-gray-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--surface-raised, #f9fafb);
}

.ace-rich-toolbar button {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--on-surface);
}
.ace-rich-toolbar button:hover {
  background: var(--color-gray-light, #f3f4f6);
  border-color: var(--color-gray-border);
}

.ace-rich-editor {
  min-height: 300px;
  padding: var(--space-md);
  border: 1px solid var(--color-gray-border);
  border-radius: 0 0 6px 6px;
  outline: none;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.ace-rich-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 25, 108, 0.1);
}

/* Responsive: stack editor layout on narrow screens */
@media (max-width: 768px) {
  .ace-layout {
    flex-direction: column;
  }
  .ace-sidebar {
    width: 100%;
    min-width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: var(--space-sm) 0;
    border-right: none;
    border-bottom: 1px solid var(--color-gray-border);
  }
  .ace-sidebar__nav {
    display: flex;
  }
  .ace-sidebar__nav-item {
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .ace-sidebar__nav-item.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--primary);
  }
  .ace-main {
    padding: var(--space-lg);
  }
}

/* ── Gating CTA (account-gated resources) ──────────────────────── */
.gating-cta {
  background: var(--surface-raised, #f8f9fa);
  border: 1px solid var(--color-gray-border, #e0e0e0);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.gating-cta__heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  color: var(--color-blue);
}
.gating-cta__body {
  color: var(--text-color);
  margin: 0 0 var(--space-lg);
  font-size: 1rem;
}
.gating-cta__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Lock icon badge on gated resource cards */
.card--gated { position: relative; }
.card__gate-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--color-blue);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.card__gate-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ── Event Cards ─────────────────────────────────────── */
.ev-card-list {
  max-width: 70%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .ev-card-list { max-width: 100%; }
}
.ev-card {
  display: flex;
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.ev-card:hover {
  box-shadow: var(--shadow-md);
}

/* B2BEA-hosted event differentiation */
.ev-card--b2bea {
  border: 2px solid var(--color-accent);
}
.ev-card--b2bea .ev-card__date {
  background: var(--color-accent);
}
.ev-card + .ev-card {
  margin-top: var(--space-md);
}

/* Date column */
.ev-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: var(--space-lg) var(--space-md);
  background: var(--primary-container);
  color: var(--on-primary);
  text-align: center;
  flex-shrink: 0;
}
.ev-card__date-month {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ev-card__date-day {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin: 2px 0;
}
.ev-card__date-year {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.8;
}

/* Content column */
.ev-card__content {
  flex: 1;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.ev-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-container);
  margin: 0;
}
.ev-card__organizer {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
}
.ev-card__pills {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin: var(--space-xs) 0;
}
.ev-card__pills .ex-pill {
  font-size: 0.75rem;
  padding: 4px 12px;
  pointer-events: none;
}
.ev-card__pills .ex-pill--format {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ev-card__pills .ex-pill--format svg {
  width: 14px;
  height: 14px;
}
.ev-card__excerpt {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.ev-card__meta {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  flex-wrap: wrap;
}
.ev-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ev-card__meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ev-card__region {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--color-gray-border);
  border-radius: 12px;
  color: var(--color-gray-mid);
  margin-top: var(--space-xs);
  width: fit-content;
}
.ev-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 8px 18px;
  border: 2px solid var(--primary-container);
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--primary-container);
  text-decoration: none;
  margin-top: auto;
  width: fit-content;
  transition: all 0.15s ease;
}
.ev-card__cta:hover {
  background: var(--primary-container);
  color: var(--on-primary);
}

/* Image column */
.ev-card__image {
  width: 280px;
  flex-shrink: 0;
  overflow: hidden;
}
.ev-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 768px) {
  .ev-card {
    flex-direction: column;
  }
  .ev-card__date {
    flex-direction: row;
    gap: var(--space-sm);
    min-width: unset;
    padding: var(--space-sm) var(--space-md);
  }
  .ev-card__date-day {
    font-size: 1.5rem;
  }
  .ev-card__image {
    display: none;
  }
}

/* ── Event Detail Page ────────────────────────────────────── */

.evd-page {
  padding-top: var(--space-xl);
  padding-bottom: 0;
}

/* Back link */
.evd-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-blue);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: var(--space-lg);
}
.evd-back:hover {
  color: var(--color-accent);
}
.evd-back svg {
  flex-shrink: 0;
}

/* Pills row */
.evd-pills {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.evd-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1.5px solid var(--color-blue);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-blue);
  background: transparent;
  line-height: 1.4;
}
.evd-pill svg {
  flex-shrink: 0;
}
.evd-badge {
  display: inline-flex;
  align-items: center;
}

/* Title */
.evd-title {
  font-family: var(--font-display, 'Hanken Grotesk', sans-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--color-blue);
  line-height: 1.15;
  margin: 0 0 var(--space-md);
}

/* Meta line */
.evd-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--color-gray-mid);
  margin-bottom: var(--space-lg);
}
.evd-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.evd-meta__item svg {
  flex-shrink: 0;
  color: var(--color-blue);
}
.evd-meta__sep {
  color: var(--color-gray-border);
}

/* Hero image */
.evd-hero {
  width: 100%;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}
.evd-hero img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 420px;
  object-fit: cover;
}

/* Excerpt tagline */
.evd-excerpt {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-blue);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
  font-style: italic;
}

/* Body content */
.evd-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-color, #333);
  margin-bottom: var(--space-xl);
}
.evd-body p {
  margin-bottom: var(--space-md);
}
.evd-body h2,
.evd-body h3 {
  color: var(--color-blue);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}
.evd-body ul,
.evd-body ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

/* Horizontal rule */
.evd-hr {
  border: none;
  border-top: 1px solid var(--color-gray-border, #e0e0e0);
  margin: var(--space-lg) 0;
}

/* Footer row */
.evd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.evd-footer__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.evd-footer__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Region pill */
.evd-region-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1.5px solid var(--color-blue);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-blue);
  background: transparent;
}

/* Visit website button */
.evd-website-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  background: var(--color-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.evd-website-btn:hover {
  background: var(--color-blue-dark, #001050);
}
.evd-website-btn svg {
  flex-shrink: 0;
}

/* Brand gradient divider */
.evd-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--color-blue) 0%, #0ea5e9 50%, var(--color-accent) 100%);
  border-radius: 2px;
  margin-bottom: 0;
}

/* ── More Events Section ──────────────────────────────────── */

.evd-more {
  padding: var(--space-2xl) 0 var(--space-3xl);
}
.evd-more__heading {
  font-family: var(--font-display, 'Hanken Grotesk', sans-serif);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-blue);
  margin-bottom: var(--space-lg);
}
.evd-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Vertical event card */
.evd-vcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
  border: 1px solid var(--color-gray-border, #e5e7eb);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.evd-vcard:hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.12));
  transform: translateY(-2px);
}

/* Card image */
.evd-vcard__image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--surface-secondary, #f4f5f7);
}
.evd-vcard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.evd-vcard__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-mid);
}

/* Card body */
.evd-vcard__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

/* Date line + format pill */
.evd-vcard__dateline {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  color: var(--color-gray-mid);
  flex-wrap: wrap;
}
.evd-vcard__dateline svg {
  flex-shrink: 0;
  color: var(--color-blue);
}
.evd-vcard__format-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--color-gray-border, #e0e0e0);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-gray-mid);
  background: transparent;
}

/* Card title */
.evd-vcard__title {
  font-family: var(--font-display, 'Hanken Grotesk', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-blue);
  line-height: 1.3;
  margin: 0;
}

/* Card excerpt */
.evd-vcard__excerpt {
  font-size: 0.85rem;
  color: var(--color-gray-mid);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card location */
.evd-vcard__location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--color-gray-mid);
  margin-top: auto;
  padding-top: var(--space-xs);
}
.evd-vcard__location svg {
  flex-shrink: 0;
  color: var(--color-blue);
}

/* ── Event Detail Responsive ──────────────────────────────── */

@media (max-width: 768px) {
  .evd-more__grid {
    grid-template-columns: 1fr;
  }
  .evd-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .evd-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .evd-meta__sep {
    display: none;
  }
}

/* ── Job Cards (Careers) ─────────────────────────────────── */

.job-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  background: var(--surface-container-lowest);
  border: 1px solid var(--color-gray-border);
  border-radius: 10px;
  padding: var(--space-lg) var(--space-xl);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, box-shadow 0.15s;
}

.job-card:hover {
  background: var(--surface-container-low);
  box-shadow: var(--shadow-sm);
}

.job-card__info {
  flex: 1;
  min-width: 0;
}

.job-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-blue);
  margin: 0 0 6px;
  line-height: 1.3;
}

.job-card:hover .job-card__title {
  text-decoration: underline;
}

.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.85rem;
  color: var(--color-gray-mid);
}

.job-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.job-card__meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

.job-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.job-card__type-pill,
.job-card__remote-pill {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-blue);
  background: transparent;
  border: 1px solid var(--color-gray-border);
  border-radius: 20px;
  padding: 5px 14px;
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .job-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
  }
  .job-card__pills {
    align-self: flex-start;
  }
}

/* Job detail page */
.job-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-3xl);
}

.job-detail__back {
  font-size: 0.875rem;
  color: var(--color-blue);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-lg);
}

.job-detail__back:hover {
  text-decoration: underline;
}

.job-detail__header {
  margin-bottom: var(--space-xl);
}

.job-detail__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 600;
  color: var(--color-blue);
  margin: 0 0 var(--space-sm);
  line-height: 1.2;
}

.job-detail__company {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.job-detail__company a {
  color: inherit;
  text-decoration: none;
}

.job-detail__company a:hover {
  text-decoration: underline;
}

.job-detail__meta {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  margin: 0 0 var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.job-detail__meta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.job-detail__salary {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.job-detail__date {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  margin: 0 0 var(--space-md);
}

.job-detail__tags {
  margin: var(--space-lg) 0;
}

.job-detail__tags-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-mid);
  margin: 0 0 var(--space-sm);
}

.job-detail__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.job-detail__section {
  margin-bottom: var(--space-xl);
  text-align: left;
}

.job-detail__section ol,
.job-detail__section ul {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.job-detail__section li {
  margin-bottom: 0.25em;
}

/* Quill ordered/bullet list rendering on public pages */
.job-detail__section li[data-list="ordered"],
.job-detail__section li[data-list="bullet"] {
  list-style: none;
}

.job-detail__section li[data-list="ordered"] {
  counter-increment: ql-list;
}

.job-detail__section li[data-list="ordered"]::before {
  content: counter(ql-list) ". ";
  font-weight: 500;
}

.job-detail__section li[data-list="bullet"]::before {
  content: "\2022  ";
}

.job-detail__section li .ql-ui {
  display: none;
}

.job-detail__section h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--space-md);
}

.job-detail__note {
  font-size: 0.875rem;
  color: var(--color-gray-mid);
  font-style: italic;
  margin-top: var(--space-md);
}

/* Mobile sticky apply CTA */
@media (max-width: 640px) {
  .job-detail__apply-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-container-lowest);
    border-top: 1px solid var(--color-gray-border);
    padding: var(--space-md) var(--space-lg);
    z-index: 100;
  }
  .job-detail__apply-sticky .btn {
    width: 100%;
  }
}

/* ── Resources — Hero + Featured ───────────────────────────── */
.resources-hero {
  background: linear-gradient(135deg, var(--color-blue) 0%, #1a3a8f 100%);
  padding: var(--space-2xl) 0;
}
.resources-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.resources-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.resources-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: white;
  margin: 0 0 var(--space-md);
  line-height: 1.2;
}
.resources-hero__title em {
  font-style: normal;
  color: var(--color-accent);
}
.resources-hero__subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .resources-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.resources-featured__card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: white;
  transition: background 0.2s ease, transform 0.15s ease;
}
.resources-featured__card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
.resources-featured__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.resources-featured__image-placeholder {
  width: 100%;
  height: 160px;
  background: rgba(255, 255, 255, 0.08);
}
.resources-featured__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}
.resources-featured__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.3;
}
.resources-featured__excerpt {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.5;
}
.resources-featured__cta {
  font-weight: 600;
  color: var(--color-accent);
  margin-top: auto;
  padding-top: var(--space-sm);
}
.resources-featured .badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
@media (max-width: 768px) {
  .resources-featured { grid-template-columns: 1fr; }
}

/* Resources — card image gradient fallback (legacy — kept for other uses) */
.card__image--gradient {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, var(--color-blue) 0%, #1a3a8f 100%);
}

/* ── No-image card: text-dominant treatment ─────────────── */
/*    Used when a resource has no featuredImage.             */
/*    Fills the whole card with content instead of an       */
/*    image placeholder. Tinted blue bg + decorative glows. */
.card--content.card--no-image {
  background: linear-gradient(155deg, #edf1fa 0%, #e6ecf6 100%);
  border-color: rgba(0, 25, 108, 0.16);
  position: relative;
  overflow: hidden;
}
.card--content.card--no-image:hover {
  border-color: rgba(0, 25, 108, 0.28);
  box-shadow: 0 10px 32px rgba(0, 25, 108, 0.14);
  transform: translateY(-4px);
}
/* Decorative radial glow — top right */
.card--content.card--no-image::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 25, 108, 0.1) 0%, transparent 65%);
  pointer-events: none;
}
/* Decorative radial glow — bottom left (coral tint) */
.card--content.card--no-image::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 84, 68, 0.09) 0%, transparent 65%);
  pointer-events: none;
}
/* More generous body padding — text is the whole card */
.card--content.card--no-image .card__body {
  padding: 28px 28px 24px;
  min-height: 180px;
}
/* Coral accent mark above tags */
.card--content.card--no-image .card__body::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-bottom: 14px;
}
/* Larger, deep-navy title */
.card--content.card--no-image .card__title {
  font-size: 1.2rem;
  line-height: 1.32;
  color: var(--color-blue);
}

/* Download detail descriptor on text-dominant cards */
.card--content.card--no-image .card__download-detail {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4F46E5;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}

/* Stat callout — bold metric on no-image cards */
.card--content.card--no-image .card__stat-callout {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 10px;
}
.card__stat-callout-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-blue);
}
.card__stat-callout-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Highlights checklist — compact bullet list on no-image cards */
.card--content.card--no-image .card__highlights {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-gray-mid);
}
.card--content.card--no-image .card__highlights li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 2px;
}
.card--content.card--no-image .card__highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--color-blue);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%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='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Download CTA bar — full-width action row at card bottom */
.card--content.card--no-image .card__cta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-blue);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 6px;
  margin-top: auto;
  margin-bottom: 12px;
  transition: background 0.15s;
}
.card--content.card--no-image:hover .card__cta-bar {
  background: var(--color-blue-dark, #001152);
}
.card__cta-bar svg {
  flex-shrink: 0;
}

/* Resources — Filter divider */
.ex-filter-divider {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--color-gray-border);
  margin: 0 var(--space-sm);
  vertical-align: middle;
}
/* Resources — Two-column filter layout */
.resources-filters-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.resources-filters-grid .ex-filters {
  padding: 0;
}
@media (max-width: 768px) {
  .resources-filters-grid {
    grid-template-columns: 1fr;
  }
}

/* Resources — Author in card meta */
.card__author {
  font-weight: 600;
  color: var(--color-text);
}
.card__meta-sep {
  margin: 0 var(--space-xs);
  color: var(--color-gray-mid);
}

/* ── Vendor Content Treatment ──────────────────────────────────── */

.card__vendor-flag {
  position: absolute;
  top: 12px;
  right: -8px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 16px 4px 12px;
  letter-spacing: 0.5px;
  border-radius: 4px 0 0 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  pointer-events: none;
}

.vendor-attribution {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  border-top: 1px solid var(--color-gray-border);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
}

.vendor-attribution__logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.vendor-attribution a {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: none;
}

.vendor-attribution--card {
  font-size: 0.8125rem;
  color: var(--color-gray-mid);
  margin: var(--space-xs) 0 0;
}

.vendor-attribution--card__name {
  font-weight: 700;
  color: var(--color-blue);
  text-decoration: none;
}

.vendor-cta {
  background: var(--color-blue);
  border-radius: 12px;
  padding: var(--space-lg);
  color: #fff;
  margin-bottom: var(--space-lg);
}

.vendor-cta__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.vendor-cta__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.vendor-cta__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.vendor-cta__tagline {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.vendor-cta__description {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.vendor-cta__button {
  display: block;
  text-align: center;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 10px 16px;
  border-radius: var(--border-radius);
  text-decoration: none;
}

.vendor-cta__button:hover {
  background: var(--color-accent-dark);
}

/* -- Category Hub Pages -------------------------------------------------- */
.category-hub__breadcrumb { padding: var(--space-md) 0; font-size: 0.875rem; }
.category-hub__breadcrumb a { color: var(--color-blue); text-decoration: none; }
.category-hub__breadcrumb a:hover { text-decoration: underline; }
.category-hub__breadcrumb span[aria-hidden] { margin: 0 var(--space-xs); color: var(--color-gray-mid); }

.category-hub__header { padding: var(--space-xl) 0 var(--space-lg); }
.category-hub__icon { margin-bottom: var(--space-sm); }
.category-hub__title { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--color-blue); margin: 0 0 var(--space-sm); }
.category-hub__definition { font-size: 1.125rem; color: var(--color-gray-mid); max-width: 720px; margin: 0; }

.category-hub__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md) var(--space-3xl); }
@media (min-width: 960px) {
  .category-hub__layout { grid-template-columns: 68fr 30fr; }
}

.category-hub__main > section { margin-bottom: var(--space-2xl); }
.category-hub__main h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-blue); margin: 0 0 var(--space-lg); }

/* TOC */
.category-hub__toc { margin-bottom: var(--space-lg); padding: var(--space-md); background: var(--surface-secondary, #f8f9fa); border-radius: 8px; }
.category-hub__toc-list { list-style: none; margin: 0; padding: 0; }
.category-hub__toc-item { margin-bottom: var(--space-xs); }
.category-hub__toc-item--sub { padding-left: var(--space-md); }
.category-hub__toc-item a { color: var(--color-blue); text-decoration: none; font-size: 0.9rem; }
.category-hub__toc-item a:hover { text-decoration: underline; }

/* Overview body */
.category-hub__overview-body { line-height: 1.7; }
.category-hub__overview-body h2 { font-size: 1.25rem; margin-top: var(--space-xl); }
.category-hub__overview-body h3 { font-size: 1.1rem; margin-top: var(--space-lg); }
.category-hub__overview-body ul,
.category-hub__overview-body ol { padding-left: var(--space-lg); margin: var(--space-md) 0; }
.category-hub__overview-body li { margin-bottom: var(--space-sm); }

/* Vendor grid */
.category-hub__vendor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
@media (max-width: 960px) { .category-hub__vendor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .category-hub__vendor-grid { grid-template-columns: 1fr; } }
.category-hub__vendor-cta { background: var(--surface-secondary, #f8f9fa); border-radius: 8px; padding: var(--space-lg); text-align: center; }
.category-hub__vendor-cta p { margin: 0 0 var(--space-md); color: var(--color-gray-mid); font-size: 0.9rem; }

/* Resource grid */
.category-hub__resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.category-hub__more-resources { text-align: center; margin-top: var(--space-md); }

/* FAQ */
.faq-group { margin-bottom: var(--space-lg); }
.faq-group__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-gray-mid); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-sm); }
.faq-item { border-bottom: 1px solid var(--color-gray-border); }
.faq-item--hidden { display: none; }
.faq-item__question { padding: var(--space-md) 0; cursor: pointer; font-weight: 600; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__chevron { transition: transform 0.2s; font-size: 0.75rem; }
.faq-item__chevron::after { content: '+'; }
details[open] .faq-item__chevron::after { content: '-'; }
.faq-item__answer { padding: 0 0 var(--space-md); line-height: 1.6; color: var(--color-gray-mid); }
.category-hub__show-all-faq { margin-top: var(--space-md); }

/* Sidebar */
.category-hub__sidebar-section { margin-bottom: var(--space-xl); }
.category-hub__sidebar-title { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gray-mid); margin: 0 0 var(--space-md); }
.category-hub__sidebar-link { display: block; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-gray-border); text-decoration: none; }
.category-hub__sidebar-link-title { display: block; font-weight: 600; color: var(--color-text); font-size: 0.9rem; }
.category-hub__sidebar-link-date { display: block; font-size: 0.8rem; color: var(--color-gray-mid); margin-top: 2px; }
.category-hub__sidebar-link:hover .category-hub__sidebar-link-title { color: var(--color-blue); }

/* Expert card */
.category-hub__expert-card { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) 0; text-decoration: none; }
.category-hub__expert-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.category-hub__expert-photo--placeholder { background: var(--color-gray-border); }
.category-hub__expert-info { display: flex; flex-direction: column; }
.category-hub__expert-name { font-weight: 600; color: var(--color-text); font-size: 0.9rem; }
.category-hub__expert-badge { font-size: 0.7rem; color: var(--color-blue); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.category-hub__expert-title { font-size: 0.8rem; color: var(--color-gray-mid); }

/* Related pills */
.category-hub__related-pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.category-hub__pill { display: inline-block; padding: var(--space-xs) var(--space-sm); background: var(--surface-secondary, #f8f9fa); border-radius: 16px; font-size: 0.8rem; color: var(--color-text); text-decoration: none; transition: background 0.15s; }
.category-hub__pill:hover { background: var(--color-gray-border); }

/* CTA block */
.category-hub__cta { background: var(--color-blue); color: white; padding: var(--space-lg); border-radius: 8px; }
.category-hub__cta .category-hub__sidebar-title { color: white; }
.category-hub__cta p { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin: 0 0 var(--space-md); }

/* ── Vendor filter bar ──────────────────────────────────── */
.category-hub__vendor-filter { margin-bottom: var(--space-lg); }
.category-hub__vendor-filter .form-field__input { margin-bottom: var(--space-sm); }
.category-hub__vendor-filter-row { display: flex; align-items: center; gap: var(--space-sm); }
.category-hub__vendor-select { max-width: 220px; }
.category-hub__vendor-count { font-size: 0.8rem; color: var(--color-gray-mid); white-space: nowrap; }
.category-hub__updated { font-size: 0.85rem; color: var(--color-gray-mid); margin-top: var(--space-xs); }

/* ── Report / Guide top bar ─────────────────────────────────────────── */
.card__type-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--color-blue);
  padding: 12px var(--space-md);
  min-height: 52px;
  z-index: 1;
}
.card__type-bar__label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.card__type-bar__date {
  position: absolute;
  left: var(--space-md);
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
}
/* Remove the decorative coral accent mark above tags for report/guide (bar replaces it) */
.card--content.card--report.card--no-image .card__body::before,
.card--content.card--guide.card--no-image .card__body::before {
  display: none;
}
/* Lock badge on report/guide: white circle, blue icon */
.card--report .card__gate-badge,
.card--guide .card__gate-badge {
  background: #fff;
  color: var(--color-blue);
  box-shadow: 0 1px 4px rgba(0, 25, 108, 0.18);
}

/* ── Case study cards on /resources/ — override blue no-image gradient ─── */
.card--content.card--case-study {
  background: linear-gradient(155deg, #fdf2ef 0%, #f8e4dd 100%);
  border-color: rgba(235, 84, 68, 0.18);
}
.card--content.card--case-study:hover {
  border-color: rgba(235, 84, 68, 0.32);
  box-shadow: 0 8px 30px rgba(235, 84, 68, 0.18);
}
.card--content.card--case-study::before {
  background: radial-gradient(circle, rgba(235, 84, 68, 0.1) 0%, transparent 65%);
}
.card--content.card--case-study::after {
  background: radial-gradient(circle, rgba(180, 50, 20, 0.08) 0%, transparent 65%);
  bottom: 60px;
}
.card--content.card--case-study .card__body::before {
  background: var(--color-accent);
}
.card--content.card--case-study .card__title {
  color: var(--color-blue);
}


/* ── Homepage v2 (Editorial Practitioner) ─────────────────────────── */

/* ── Fonts: Plus Jakarta Sans + Inter (homepage-only via index.njk link tag) ── */
/* -- Font vars for hp2 sections -- */
.hp2-hero,
.hp2-categories,
.hp2-bento,
.hp2-spotlight,
.hp2-cta {
  --hp2-font-headline: 'Plus Jakarta Sans', 'Hanken Grotesk', sans-serif;
  --hp2-font-body: 'Inter', 'Open Sans', sans-serif;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hp2-hero {
  background: var(--surface);
  padding-top: calc(var(--nav-height) + var(--space-3xl) - 100px);
  padding-bottom: var(--space-3xl);
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.hp2-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hp2-hero__inner {
    grid-template-columns: 7fr 5fr;
  }
}

.hp2-hero__eyebrow {
  display: block;
  color: var(--secondary);
  font-family: var(--hp2-font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hp2-hero__title {
  font-family: var(--hp2-font-headline);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  color: var(--primary-container);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.hp2-hero__title .italic {
  font-style: italic;
  color: #EB5444;
}

.hp2-hero__subtitle {
  font-family: var(--hp2-font-body);
  font-size: 1.125rem;
  color: var(--on-surface-variant);
  max-width: 36rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.hp2-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.hp2-hero__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gradient-hero);
  color: var(--on-primary);
  padding: 1rem 2rem;
  border-radius: var(--border-radius);
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: opacity 0.2s, box-shadow 0.2s;
}

.hp2-hero__btn-primary:hover {
  opacity: 0.92;
  box-shadow: var(--shadow-md);
}

.hp2-hero__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-container-lowest);
  border: 2px solid rgba(197, 197, 211, 0.3);
  color: var(--primary-container);
  padding: 1rem 2rem;
  border-radius: var(--border-radius);
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.hp2-hero__btn-secondary:hover {
  background: var(--surface-container-low);
  border-color: rgba(197, 197, 211, 0.6);
}

.hp2-hero__image-col {
  position: relative;
}

.hp2-hero__image-wrap {
  aspect-ratio: 1;
  background: var(--surface-container-low);
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-ambient);
}

.hp2-hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.7s;
  filter: grayscale(100%);
}

.hp2-hero__image-wrap:hover img {
  filter: grayscale(0%);
}

.hp2-hero__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 9, 56, 0.4), transparent);
  pointer-events: none;
}

.hp2-hero__image-card {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}

.hp2-hero__image-card-eyebrow {
  display: inline-block;
  background: #EB5444;
  color: #fff;
  font-family: var(--hp2-font-headline);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.hp2-hero__image-card-title {
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  color: var(--primary-container);
  font-size: 0.9rem;
  margin: 0 0 0.25rem;
}

.hp2-hero__image-card-sub {
  font-family: var(--hp2-font-body);
  font-size: 0.8rem;
  color: var(--on-surface-variant);
  margin: 0;
}

.hp2-hero__badge {
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  width: 8.5rem;
  height: 8.5rem;
  background: #EB5444;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(235, 84, 68, 0.4);
}

.hp2-hero__badge-number {
  font-family: var(--hp2-font-headline);
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.hp2-hero__badge-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  font-family: var(--hp2-font-headline);
  margin-top: 0.2rem;
}

/* ── Categories / Help Grid ───────────────────────────────────────── */
.hp2-categories {
  background: var(--surface-container-low);
  padding: var(--space-3xl) var(--space-xl);
}

.hp2-categories__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.hp2-categories__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .hp2-categories__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.hp2-categories__title {
  font-family: var(--hp2-font-headline);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary-container);
  margin: 0 0 0.75rem;
}

.hp2-categories__subtitle {
  color: var(--on-surface-variant);
  max-width: 28rem;
  margin: 0;
  font-family: var(--hp2-font-body);
}

.hp2-categories__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--secondary);
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.hp2-categories__link:hover {
  text-decoration: underline;
}

.hp2-categories__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .hp2-categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .hp2-categories__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.hp2-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface-container-lowest);
  padding: 2rem 1rem;
  border-radius: 0.75rem;
  text-decoration: none;
  box-shadow: var(--shadow-ambient);
  transition: background 0.3s, transform 0.3s, color 0.3s;
}

.hp2-category-card:hover {
  background: var(--primary-container);
  transform: translateY(-2px);
}

.hp2-category-card__icon {
  font-size: 2.5rem;
  color: var(--secondary);
  margin-bottom: 0.75rem;
  transition: color 0.3s;
}

.hp2-category-card:hover .hp2-category-card__icon {
  color: #ffffff;
}

.hp2-category-card__label {
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--primary-container);
  transition: color 0.3s;
  line-height: 1.3;
}

.hp2-category-card:hover .hp2-category-card__label {
  color: #ffffff;
}

/* ── Bento Resources ──────────────────────────────────────────────── */
.hp2-bento {
  background: var(--surface-container-lowest);
  padding: var(--space-3xl) var(--space-xl);
}

.hp2-bento__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.hp2-bento__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .hp2-bento__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.hp2-bento__title {
  font-family: var(--hp2-font-headline);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-container);
  margin: 0 0 0.5rem;
}

.hp2-bento__subtitle {
  color: var(--on-surface-variant);
  font-size: 1.1rem;
  font-family: var(--hp2-font-body);
  margin: 0;
}

.hp2-bento__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--secondary);
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.hp2-bento__link:hover {
  text-decoration: underline;
}

.hp2-bento__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .hp2-bento__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .hp2-bento__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hp2-bento-card {
  background: var(--surface-container-lowest);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
  border: 1px solid rgba(197, 197, 211, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.hp2-bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.hp2-bento-card__header {
  height: 12rem;
  position: relative;
  overflow: hidden;
}

/* Card color variants */
.hp2-bento-card--blue .hp2-bento-card__header {
  background: var(--primary-container);
}

.hp2-bento-card--blue .hp2-bento-card__header::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: radial-gradient(circle at center, white, transparent);
}

.hp2-bento-card--salmon .hp2-bento-card__header {
  background: rgba(254, 98, 80, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp2-bento-card--salmon .hp2-bento-card__header .hp2-bento-card__bg-icon {
  font-size: 5rem;
  color: rgba(254, 98, 80, 0.3);
}

.hp2-bento-card--dark .hp2-bento-card__header {
  background: var(--primary);
}

.hp2-bento-card--dark .hp2-bento-card__header::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: radial-gradient(var(--secondary) 0.5px, transparent 0.5px);
  background-size: 10px 10px;
}

.hp2-bento-card__badge {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
}

.hp2-bento-card--blue .hp2-bento-card__badge {
  background: var(--secondary);
  color: #ffffff;
}

.hp2-bento-card--salmon .hp2-bento-card__badge {
  background: var(--primary-container);
  color: #ffffff;
}

.hp2-bento-card--dark .hp2-bento-card__badge {
  background: var(--surface-container);
  color: var(--primary-container);
}

.hp2-bento-card__title-overlay {
  position: absolute;
  bottom: 1rem;
  left: 1.5rem;
  right: 1.5rem;
}

.hp2-bento-card--blue .hp2-bento-card__title-overlay,
.hp2-bento-card--dark .hp2-bento-card__title-overlay {
  bottom: 0.75rem;
}

/* We use the badge row + title in the header */
.hp2-bento-card__header-title {
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0.3rem 0 0;
}

.hp2-bento-card--blue .hp2-bento-card__header-title,
.hp2-bento-card--dark .hp2-bento-card__header-title {
  color: #ffffff;
}

.hp2-bento-card__header-title--lg {
  font-size: 1.45rem;
  line-height: 1.2;
}

.hp2-bento-card--salmon .hp2-bento-card__header-title {
  color: var(--primary-container);
}

.hp2-bento-card__body {
  padding: 1.75rem 2rem;
}

.hp2-bento-card__excerpt {
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.6;
  font-family: var(--hp2-font-body);
  margin: 0 0 1.5rem;
}

.hp2-bento-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hp2-bento-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hp2-bento-card__author-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-container);
  font-family: var(--hp2-font-headline);
  display: block;
}

.hp2-bento-card__author-role {
  font-size: 0.625rem;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  font-family: var(--hp2-font-body);
}

.hp2-bento-card__download-icon {
  color: var(--outline-variant);
  font-size: 1.25rem;
  transition: color 0.2s;
}

.hp2-bento-card:hover .hp2-bento-card__download-icon {
  color: var(--secondary);
}

/* ── Practitioner Spotlight ───────────────────────────────────────── */
.hp2-spotlight {
  padding: var(--space-3xl) var(--space-xl);
}

.hp2-spotlight__inner-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
}

.hp2-spotlight__inner {
  background: rgba(254, 98, 80, 0.05);
  border-radius: 2rem;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hp2-spotlight__inner {
    flex-direction: column;
    padding: 5rem;
  }
}

.hp2-spotlight__top {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .hp2-spotlight__top {
    flex-direction: row;
  }
}

.hp2-spotlight__resource-row {
  display: flex;
  width: 100%;
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 25, 108, 0.06);
}

.hp2-spotlight__resource-item {
  flex: 1;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  border-right: 1px solid #F0F0F0;
  transition: background 0.2s;
}

.hp2-spotlight__resource-item:last-child {
  border-right: none;
}

.hp2-spotlight__resource-item:hover {
  background: #F8F9FF;
}

.hp2-spotlight__content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.hp2-spotlight__label {
  display: block;
  color: var(--secondary);
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hp2-spotlight__quote {
  font-family: var(--hp2-font-headline);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--primary-container);
  line-height: 1.3;
  margin-bottom: 2rem;
}

.hp2-spotlight__quote em {
  font-style: italic;
  color: var(--secondary);
}

.hp2-spotlight__attribution {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hp2-spotlight__line {
  width: 3rem;
  height: 1px;
  background: var(--secondary);
  border: none;
  flex-shrink: 0;
}

.hp2-spotlight__name {
  display: block;
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--primary-container);
}

.hp2-spotlight__role {
  display: block;
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  font-family: var(--hp2-font-body);
}

.hp2-spotlight__image-col {
  flex: 1;
  position: relative;
}

.hp2-spotlight__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
}

@media (min-width: 1024px) {
  .hp2-spotlight__image-wrap {
    transform: translateX(3rem);
  }
}

.hp2-spotlight__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 25px 50px rgba(0, 9, 56, 0.2);
  display: block;
}

.hp2-spotlight__floating-card {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background: var(--surface-container-lowest);
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-ambient);
}

.hp2-spotlight__floating-card-label {
  color: var(--secondary);
  font-weight: 700;
  font-size: 0.8rem;
  font-family: var(--hp2-font-headline);
  margin: 0 0 0.25rem;
}

.hp2-spotlight__floating-card-title {
  color: var(--primary-container);
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
}

.hp2-spotlight__resources {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 2.5rem;
}

.hp2-spotlight__resource-card {
  background: var(--surface-container-lowest);
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-ambient);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  display: block;
}

.hp2-spotlight__resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 9, 56, 0.18);
}

@media (max-width: 768px) {
  .hp2-spotlight__resources {
    grid-template-columns: repeat(2, 1fr);
  }
}

a.hp2-spotlight__floating-card {
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
a.hp2-spotlight__floating-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 9, 56, 0.18);
}

/* ── CTA ──────────────────────────────────────────────────────────── */
.hp2-cta {
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
}

.hp2-cta__inner {
  max-width: 72rem;
  margin: 0 auto;
  background: var(--primary-container);
  color: var(--on-primary);
  border-radius: 1.5rem;
  padding: var(--space-3xl) var(--space-2xl);
}

.hp2-cta__title {
  font-family: var(--hp2-font-headline);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--on-primary);
  margin: 0 0 1.5rem;
  line-height: 1.15;
}

.hp2-cta__desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.125rem;
  line-height: 1.7;
  font-family: var(--hp2-font-body);
  margin: 0 0 3rem;
}

.hp2-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

@media (min-width: 640px) {
  .hp2-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.hp2-cta__btn-primary {
  display: inline-block;
  background: var(--secondary);
  color: #ffffff;
  padding: 1.125rem 2.5rem;
  border-radius: var(--border-radius);
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s;
}

.hp2-cta__btn-primary:hover {
  background: #8f0f0b;
}

.hp2-cta__btn-secondary {
  display: inline-block;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 1.125rem 2.5rem;
  border-radius: var(--border-radius);
  font-family: var(--hp2-font-headline);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.hp2-cta__btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── Leaders ── */

.ldr-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.ldr-hero {
  text-align: center;
  padding: 3rem 1rem 2.5rem;
  border-bottom: 1px solid var(--color-gray-border);
  margin-bottom: 2.5rem;
}

.ldr-hero__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-blue);
  margin: 0 0 0.75rem;
}

.ldr-hero__subtitle {
  font-size: 1.1rem;
  color: var(--color-gray-mid);
  max-width: 560px;
  margin: 0 auto;
}

.ldr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.ldr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  padding: 1.5rem 1rem 1.25rem;
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.2s, transform 0.2s;
}

.ldr-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.ldr-card__photo-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.ldr-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
}

.ldr-card__photo--initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

.ldr-card__name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--color-text);
}

.ldr-card__title {
  font-size: 0.8rem;
  color: var(--color-gray-mid);
  margin: 0 0 0.25rem;
  line-height: 1.4;
}

.ldr-card__org {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
}

.ldr-card__leader-badge {
  display: inline-block;
  background: var(--color-leader);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 2rem;
  margin-top: auto;
}

.ldr-empty {
  text-align: center;
  padding: 3rem;
  color: var(--color-gray-mid);
  grid-column: 1 / -1;
}

/* Leader badge on person profile header */
.pp-header__leader-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-leader);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 2rem;
  white-space: nowrap;
}

/* ── Homepage (hp2) ── */

/* ── Persona Selector ─────────────────────────────────────────────── */
.persona-selector {
  padding: 72px 0;
  background: #fff;
}
.persona-selector__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
}
.persona-selector__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.persona-selector__title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: #00196C;
  margin: 0 0 8px;
}
.persona-selector__subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: #6B6B6B;
  margin: 0;
  max-width: 520px;
  line-height: 1.6;
}
.persona-selector__browse {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #00196C;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 4px;
}
.persona-selector__browse:hover { color: #EB5444; }
.persona-selector__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 24px 22px 20px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #E4E8F0;
  text-decoration: none;
  position: relative;
  transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s;
  overflow: hidden;
}
.persona-card::after {
  content: '→';
  position: absolute;
  bottom: 18px;
  right: 20px;
  font-size: 1rem;
  color: #B0B8CC;
  transition: color 0.22s, transform 0.22s;
}
.persona-card:hover {
  background: #00196C;
  border-color: #00196C;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,25,108,0.18);
}
.persona-card:hover::after {
  color: rgba(255,255,255,0.6);
  transform: translateX(3px);
}
.persona-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background 0.22s, color 0.22s;
}
.persona-card__icon .material-symbols-outlined {
  font-size: 22px;
}
.persona-card--mfr .persona-card__icon  { background: #E8EEFF; color: #00196C; }
.persona-card--dist .persona-card__icon { background: #E6F4F1; color: #0D6E5A; }
.persona-card--sw .persona-card__icon   { background: #EEE8FF; color: #5B2DCC; }
.persona-card--agy .persona-card__icon  { background: #FFF0EE; color: #C73E2E; }
.persona-card--con .persona-card__icon  { background: #FFF8E6; color: #9A6400; }
.persona-card:hover .persona-card__icon {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.persona-card__label {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #00196C;
  margin-bottom: 6px;
  transition: color 0.22s;
}
.persona-card:hover .persona-card__label { color: #fff; }
.persona-card__desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.78rem;
  color: #6B6B6B;
  line-height: 1.5;
  padding-right: 20px;
  transition: color 0.22s;
}
.persona-card:hover .persona-card__desc { color: rgba(255,255,255,0.7); }

/* ── People to Know ───────────────────────────────────────────────── */
.people-section {
  padding: 80px 0;
  background: #F5F5F5;
}
.people-section__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
}
.people-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.people-section__eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #EB5444;
  display: block;
  margin-bottom: 8px;
}
.people-section__title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: #00196C;
  margin: 0 0 8px;
}
.people-section__subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: #6B6B6B;
  margin: 0;
  max-width: 480px;
  line-height: 1.6;
}
.people-section__link {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #00196C;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 4px;
}
.people-section__link:hover { color: #EB5444; }
.people-section__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.people-section__scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #00196C;
  color: #00196C;
  text-decoration: none;
  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}
.people-section__scroll-btn:hover {
  background: #00196C;
  color: #fff;
}

/* 12-col grid: row1 = 3 cards (span 4 each), row2 = 4 cards (span 3 each) */
.people-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.people-grid .person-card:nth-child(-n+3) { grid-column: span 4; }
.people-grid .person-card:nth-child(n+4)  { grid-column: span 3; }

.person-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,25,108,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.person-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,25,108,0.12);
}
a.person-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.person-card__photo {
  aspect-ratio: 1;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.person-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.person-card__initials {
  width: 100%;
  height: 100%;
  background: #00196C;
  color: white;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.person-card__body { padding: 16px; }
.person-card__name {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #00196C;
  margin-bottom: 4px;
}
.person-card__company {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B6B6B;
}
.person-card__rule {
  width: 24px;
  height: 3px;
  background: #EB5444;
  margin-top: 10px;
  border-radius: 2px;
}

/* Featured center card */
.person-card--featured {
  position: relative;
  min-height: 260px;
}
.person-card--featured .person-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}
.person-card--featured .person-card__initials {
  font-size: 3rem;
  opacity: 0.35;
}
.person-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,25,108,0.88) 0%, transparent 100%);
  padding: 28px 16px 18px;
  z-index: 2;
}
.person-card__overlay .person-card__name { color: white; font-size: 1rem; }
.person-card__role {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  font-family: 'Hanken Grotesk', sans-serif;
  margin-top: 2px;
}

/* Spotlight card */
.person-card--spotlight {
  background: #00196C;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.person-card--spotlight:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,25,108,0.2);
}
.person-card__eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #EB5444;
}
.person-card--spotlight .person-card__name {
  color: white;
  font-size: 1.1rem;
}
.person-card__bio {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  flex: 1;
}
.person-card__link {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #EB5444;
  text-decoration: none;
}
.person-card__link:hover { text-decoration: underline; }

/* ── Spotlight initials placeholder ──────────────────────────────── */
.hp2-spotlight__initials-placeholder {
  width: 100%;
  aspect-ratio: 4/5;
  background: #E8ECF5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 5rem;
  font-weight: 700;
  color: #00196C;
  opacity: 0.25;
}

/* ── Bento card author avatar ─────────────────────────────────────── */
.hp2-bento-card__author { display: flex; align-items: center; gap: 10px; }
.hp2-bento-card__author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.hp2-bento-card__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp2-bento-card__author-avatar--initials {
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Podcast Block ────────────────────────────────────────────────── */
.hp2-podcast {
  background: #00196C;
  padding: 72px 0;
}
.hp2-podcast__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hp2-podcast__eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #EB5444;
  display: block;
  margin-bottom: 16px;
}
.hp2-podcast__title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.2;
}
.hp2-podcast__copy {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin: 0 0 32px;
}
.hp2-podcast__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hp2-podcast__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #EB5444;
  text-decoration: none;
  border: 2px solid #EB5444;
  padding: 10px 20px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
.hp2-podcast__cta:hover {
  background: #EB5444;
  color: #fff;
}
.hp2-podcast__image-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hp2-podcast__cover {
  width: 100%;
  max-width: 320px;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.hp2-podcast__cover-placeholder {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  background: rgba(255,255,255,0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Women in B2B section ─────────────────────────────────────────── */
.women-section {
  padding: 80px 0;
  background: #fff;
}
.women-section__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
}
.women-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.women-section__eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #EB5444;
  display: block;
  margin-bottom: 8px;
}
.women-section__title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: #00196C;
  margin: 0 0 8px;
}
.women-section__subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: #6B6B6B;
  margin: 0;
  max-width: 480px;
  line-height: 1.6;
}
.women-section__link {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #00196C;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 4px;
}
.women-section__link:hover { color: #EB5444; }
.women-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: #E4E8F0 transparent;
}
.women-scroll::-webkit-scrollbar { height: 4px; }
.women-scroll::-webkit-scrollbar-track { background: transparent; }
.women-scroll::-webkit-scrollbar-thumb { background: #E4E8F0; border-radius: 2px; }
.women-scroll .person-card {
  flex: 0 0 200px;
}

/* ── Responsive (hp2) ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .persona-selector__grid { grid-template-columns: repeat(3, 1fr); }
  .persona-selector__header { flex-direction: column; gap: 12px; }
  .people-section__header { flex-direction: column; gap: 12px; }
  .people-grid .person-card:nth-child(-n+3),
  .people-grid .person-card:nth-child(n+4) { grid-column: span 6; }
  .hp2-podcast__inner { grid-template-columns: 1fr; }
  .hp2-podcast__image-col { display: none; }
}
@media (max-width: 600px) {
  .persona-selector__grid { grid-template-columns: repeat(2, 1fr); }
  .people-grid .person-card:nth-child(-n+3),
  .people-grid .person-card:nth-child(n+4) { grid-column: span 12; }
}

/* ── Academy: Loading skeleton shimmer ── */
@keyframes shimmer {
  0%   { opacity: 0.7; }
  50%  { opacity: 1;   }
  100% { opacity: 0.7; }
}

.loading-skeleton {
  background: var(--surface-high, #e5e7ea);
  border-radius: var(--radius-sm, 4px);
  animation: shimmer 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .loading-skeleton {
    animation: none;
  }
}

/* ── Vendor Claim Banner ─────────────────────────────────────────────────── */
.claim-banner {
  background: var(--surface-mid, #f4f5f7);
  width: 100%;
  padding: var(--space-3xl, 3rem) 0;
  margin-top: var(--space-xl, 2rem);
}
.claim-banner__inner {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--space-lg, 1.5rem);
  text-align: center;
}
.claim-banner__headline {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-surface, #0a1836);
  margin: 0 0 var(--space-sm, 0.5rem);
}
.claim-banner__sub {
  color: var(--on-surface-variant, #444);
  font-size: 1rem;
  margin: 0 0 var(--space-lg, 1.5rem);
}
.claim-banner__note {
  color: var(--on-surface-variant, #666);
  font-size: 0.875rem;
  margin: var(--space-sm, 0.5rem) 0 0;
}