/**
 * PILLAR Corporate Design System
 * Version: 2.0.0
 *
 * Enterprise-grade design system for multinational corporation aesthetic.
 * Sophisticated, professional, and authoritative styling.
 */

/* ============================================
   0. LIGHT-MODE LOCK
   ============================================
   The site's design is built for a white background with navy + gold
   accents. There's a `@media (prefers-color-scheme: dark)` block in
   design-system.css that flips background variables when the OS is in
   dark mode but does NOT update --corporate-navy used for text — so
   navy text ends up invisible on a dark background. Lock to light mode
   to defeat OS-level dark mode transforms across all browsers.
   ============================================ */

html {
  color-scheme: light only;
}

html, body {
  background-color: #FFFFFF;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0A1628; /* corporate-navy */
  margin: 0;
  padding: 0;
  /* Push body content below the fixed 64px header */
  padding-top: 64px;
}

/* ============================================
   SITE CHROME (HEADER + FOOTER)
   ============================================
   The Pass 1 nav rewrite created markup with these selectors that had
   no matching CSS. Adding them here so the site chrome renders as
   intended (white fixed header, navy nav, gold accents on hover,
   dark navy footer with gold section headings).
   ============================================ */

/* ---- Header ---- */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(10, 22, 40, 0.08);
  z-index: 1000;
  display: flex;
  align-items: center;
}

#header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

#site-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0A1628;
  text-decoration: none;
  letter-spacing: 0.16em;
  flex-shrink: 0;
}

#site-logo:hover {
  color: #B8860B; /* corporate-gold */
}

#main-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

#main-menu a {
  color: #0A1628;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.01em;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

#main-menu a:hover {
  color: #B8860B;
  border-bottom-color: #B8860B;
}

#main-menu a#contact-btn {
  background: #0A1628;
  color: #FFFFFF;
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  border-bottom: none;
}

#main-menu a#contact-btn:hover {
  background: #162544;
  color: #FFFFFF;
}

#mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #0A1628;
  cursor: pointer;
  padding: 0.5rem;
}

/* ---- Mobile breakpoint ---- */
@media (max-width: 860px) {
  #main-menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #FFFFFF;
    flex-direction: column;
    gap: 0;
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(10, 22, 40, 0.08);
    box-shadow: 0 8px 24px rgba(10, 22, 40, 0.08);
  }
  #main-menu.open { display: flex; }
  #main-menu a {
    width: 100%;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(10, 22, 40, 0.06);
  }
  #main-menu a#contact-btn {
    margin-top: 0.5rem;
    text-align: center;
  }
  #mobile-menu-btn { display: block; }
}

/* ---- Footer ---- */
footer[role="contentinfo"] {
  background: #0A1628;
  color: rgba(255, 255, 255, 0.85);
  padding: 4rem 0 2rem;
  margin-top: 6rem;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1100px) {
  .footer-top {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
  }
}

@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

.footer-brand {
  max-width: 340px;
}

.footer-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.16em;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.75rem;
  max-width: 320px;
}

.footer-nav h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #B8860B;
  margin: 0 0 1rem;
}

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

.footer-nav ul li {
  margin-bottom: 0.5rem;
}

.footer-nav ul li a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: color 150ms ease;
}

.footer-nav ul li a:hover {
  color: #FFFFFF;
}

.footer-nav ul li a[data-status="coming-soon"],
.footer-nav ul li a[data-status="in-editorial-review"] {
  color: rgba(255, 255, 255, 0.4);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.footer-legal {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   FOUNDER HEADSHOT POSITIONING
   ============================================
   The current panel-photo source has the face in the upper third with
   chair/legs filling the lower half. Default `background-size: cover` on
   a square 1:1 circle would show the whole frame with a tiny face. Zoom
   in (~270%) and shift the focal point up (~20% from top) so the face
   is properly centered in the 140px circle. Override the inline
   COMMON_STYLES rule with higher specificity by adding `.founder-block`.
   If a future headshot is a proper tight-crop portrait, drop the zoom
   back to `cover` + `center`.
   ============================================ */

/* Default treatment (homepage, anywhere except About) — small circle,
   zoomed into face only. */
.founder-block .founder-photo,
.founder-photo {
  background-size: 270% auto, 270% auto;
  background-position: 50% 18%, 50% 18%;
}

/* About page — larger portrait rectangle, gold-accented, shows face +
   shoulders + Stanford zip-up. Photo storytelling: speaker, mentor,
   founder posture. */
#founder .founder-photo {
  width: 240px;
  height: 320px;
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(10, 22, 40, 0.18);
  /* Tighter zoom than homepage circle but wider crop window to show
     more torso/Stanford gear context. */
  background-size: 140% auto, 140% auto;
  background-position: 52% 14%, 52% 14%;
  /* Gold left-edge accent — small visual cue tying the photo to the
     corporate gold scheme. */
  border-left: 3px solid #B8860B;
  /* Override the inline COMMON_STYLES' "BB" letter fallback styling
     when the real photo loads. */
  color: rgba(10, 22, 40, 0);
  font-size: 0;
}

@media (max-width: 700px) {
  #founder .founder-photo {
    width: 180px;
    height: 240px;
  }
}

/* ============================================
   DARK SECTION CONTRAST FIX
   ============================================
   The framework's inline COMMON_STYLES has `.pillar-section .lead {
   color: var(--gray-800); }` which beats `.pillar-section--dark p` on
   specificity (0,2,0 > 0,1,1). Result: lead text on dark navy renders
   as dark gray = near-invisible. The selectors below use `p.lead` to
   gain a (0,2,1) score that wins. Applies to all dark sections in
   all 4 languages without per-page edits.
   ============================================ */

.pillar-section--dark p.lead,
.pillar-section--dark .lead {
  color: rgba(255, 255, 255, 0.94);
}

.pillar-section--dark h2,
.pillar-section--dark h3 {
  color: #FFFFFF;
}

.pillar-section--dark p {
  color: rgba(255, 255, 255, 0.85);
}

.pillar-section--dark a {
  color: #FFFFFF;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.pillar-section--dark a:hover {
  border-bottom-color: #FFFFFF;
}

.pillar-section--dark blockquote {
  color: rgba(255, 255, 255, 0.94);
  border-left-color: #B8860B;
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}

.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: #0A1628;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 4px;
}

/* ============================================
   1. CSS CUSTOM PROPERTIES (Corporate Tokens)
   ============================================ */

:root {
  /* === Corporate Brand Colors === */
  --corporate-navy: #0A1628;
  --corporate-navy-light: #162544;
  --corporate-navy-lighter: #1E3A5F;
  --corporate-charcoal: #2D3748;
  --corporate-slate: #4A5568;
  --corporate-steel: #718096;

  /* === Accent Colors === */
  --corporate-gold: #B8860B;
  --corporate-gold-light: #D4A853;
  --corporate-gold-muted: rgba(184, 134, 11, 0.15);
  --corporate-blue: #2563EB;
  --corporate-blue-light: #3B82F6;
  --corporate-teal: #0D9488;

  /* === Neutral Palette === */
  --white: #FFFFFF;
  --off-white: #FAFBFC;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --black: #000000;

  /* === Semantic Colors === */
  --success: #059669;
  --success-light: rgba(5, 150, 105, 0.1);
  --warning: #D97706;
  --warning-light: rgba(217, 119, 6, 0.1);
  --error: #DC2626;
  --error-light: rgba(220, 38, 38, 0.1);

  /* === Theme Colors === */
  --bg-primary: var(--white);
  --bg-secondary: var(--off-white);
  --bg-tertiary: var(--gray-100);
  --bg-corporate: var(--corporate-navy);
  --bg-corporate-gradient: linear-gradient(135deg, var(--corporate-navy) 0%, var(--corporate-navy-light) 100%);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--white);
  --text-corporate: var(--corporate-navy);

  --border-color: var(--gray-200);
  --border-color-strong: var(--gray-300);
  --border-corporate: rgba(10, 22, 40, 0.1);

  /* === Typography === */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Consolas', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.75;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* === Spacing === */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-corporate: 0 4px 20px rgba(10, 22, 40, 0.08);
  --shadow-corporate-lg: 0 10px 40px rgba(10, 22, 40, 0.12);

  /* === Border Radius === */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  /* === Z-Index === */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-nav: 1000;

  /* === Layout === */
  --nav-height: 72px;
  --container-max: 1400px;
  --container-narrow: 900px;
  --container-wide: 1600px;
}

/* ============================================
   2. BASE STYLES
   ============================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ============================================
   3. CORPORATE TYPOGRAPHY
   ============================================ */

.corporate-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.corporate-heading-hero {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: var(--font-weight-normal);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.corporate-heading-1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: -0.015em;
}

.corporate-heading-2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

.corporate-heading-3 {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.corporate-heading-4 {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.corporate-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--corporate-gold);
}

.corporate-lead {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}

.corporate-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: var(--text-secondary);
}

.corporate-caption {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* ============================================
   4. CORPORATE NAVIGATION
   ============================================ */

.corporate-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  z-index: var(--z-nav);
  transition: all var(--transition-slow);
}

.corporate-nav.scrolled {
  box-shadow: var(--shadow-sm);
}

.corporate-nav-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
}

.corporate-logo {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--font-weight-normal);
  color: var(--corporate-navy);
  text-decoration: none;
  letter-spacing: 0.15em;
  transition: opacity var(--transition-fast);
}

.corporate-logo:hover {
  opacity: 0.8;
}

.corporate-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.corporate-nav-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--transition-fast);
}

.corporate-nav-link:hover {
  color: var(--corporate-navy);
}

.corporate-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--corporate-navy);
  transition: width var(--transition-base);
}

.corporate-nav-link:hover::after {
  width: 100%;
}

.corporate-nav-cta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--white);
  background: var(--corporate-navy);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-base);
  text-decoration: none;
  transition: all var(--transition-base);
}

.corporate-nav-cta:hover {
  background: var(--corporate-navy-light);
}

/* ============================================
   5. CORPORATE BUTTONS
   ============================================ */

.corporate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: 48px;
}

.corporate-btn-primary {
  background: var(--corporate-navy);
  color: var(--white);
  border-color: var(--corporate-navy);
}

.corporate-btn-primary:hover {
  background: var(--corporate-navy-light);
  border-color: var(--corporate-navy-light);
}

.corporate-btn-secondary {
  background: transparent;
  color: var(--corporate-navy);
  border-color: var(--corporate-navy);
}

.corporate-btn-secondary:hover {
  background: var(--corporate-navy);
  color: var(--white);
}

.corporate-btn-ghost {
  background: transparent;
  color: var(--corporate-navy);
  border-color: transparent;
}

.corporate-btn-ghost:hover {
  background: var(--gray-100);
}

.corporate-btn-gold {
  background: var(--corporate-gold);
  color: var(--white);
  border-color: var(--corporate-gold);
}

.corporate-btn-gold:hover {
  background: var(--corporate-gold-light);
  border-color: var(--corporate-gold-light);
}

.corporate-btn-lg {
  padding: var(--space-5) var(--space-10);
  font-size: var(--font-size-base);
  min-height: 56px;
}

.corporate-btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  min-height: 36px;
}

/* ============================================
   6. CORPORATE CARDS
   ============================================ */

.corporate-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: all var(--transition-slow);
}

.corporate-card:hover {
  border-color: var(--border-color-strong);
  box-shadow: var(--shadow-corporate);
}

.corporate-card-featured {
  border-color: var(--corporate-gold);
  background: linear-gradient(135deg, rgba(184, 134, 11, 0.02) 0%, transparent 100%);
}

.corporate-card-dark {
  background: var(--corporate-navy);
  border-color: transparent;
  color: var(--white);
}

.corporate-card-title {
  font-family: var(--font-sans);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.corporate-card-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ============================================
   7. CORPORATE SECTIONS
   ============================================ */

.corporate-section {
  padding: var(--space-24) var(--space-8);
}

.corporate-section-sm {
  padding: var(--space-16) var(--space-8);
}

.corporate-section-lg {
  padding: var(--space-32) var(--space-8);
}

.corporate-section-dark {
  background: var(--corporate-navy);
  color: var(--white);
}

.corporate-section-dark .corporate-eyebrow {
  color: var(--corporate-gold-light);
}

.corporate-section-dark .corporate-lead,
.corporate-section-dark .corporate-body {
  color: rgba(255, 255, 255, 0.8);
}

.corporate-section-alt {
  background: var(--off-white);
}

.corporate-section-gradient {
  background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
}

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

.corporate-container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.corporate-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-16);
}

.corporate-section-header .corporate-eyebrow {
  margin-bottom: var(--space-4);
}

.corporate-section-header .corporate-heading-1,
.corporate-section-header .corporate-heading-2 {
  margin-bottom: var(--space-6);
}

/* ============================================
   8. CORPORATE GRID LAYOUTS
   ============================================ */

.corporate-grid {
  display: grid;
  gap: var(--space-8);
}

.corporate-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.corporate-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.corporate-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.corporate-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ============================================
   9. CORPORATE STATS
   ============================================ */

.corporate-stat {
  text-align: center;
}

.corporate-stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: var(--font-weight-normal);
  color: var(--corporate-navy);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.corporate-stat-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.corporate-section-dark .corporate-stat-number {
  color: var(--white);
}

.corporate-section-dark .corporate-stat-label {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   10. CORPORATE FOOTER
   ============================================ */

.corporate-footer {
  background: var(--corporate-navy);
  color: var(--white);
  padding: var(--space-20) var(--space-8) var(--space-12);
}

.corporate-footer-top {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--space-12);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.corporate-footer-brand {
  max-width: 300px;
}

.corporate-footer-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}

.corporate-footer-tagline {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--line-height-relaxed);
}

.corporate-footer-nav h4 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-6);
}

.corporate-footer-nav ul {
  list-style: none;
}

.corporate-footer-nav li {
  margin-bottom: var(--space-3);
}

.corporate-footer-nav a {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.corporate-footer-nav a:hover {
  color: var(--white);
}

.corporate-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-8);
}

.corporate-footer-legal {
  display: flex;
  gap: var(--space-6);
}

.corporate-footer-legal a {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.corporate-footer-legal a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.corporate-footer-copyright {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   11. CORPORATE DIVIDERS
   ============================================ */

.corporate-divider {
  border: none;
  height: 1px;
  background: var(--border-color);
  margin: var(--space-16) 0;
}

.corporate-divider-dark {
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   12. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1024px) {
  .corporate-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .corporate-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .corporate-footer-brand {
    grid-column: 1 / -1;
    max-width: none;
    text-align: center;
    margin-bottom: var(--space-8);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  .corporate-section {
    padding: var(--space-16) var(--space-6);
  }

  .corporate-section-lg {
    padding: var(--space-20) var(--space-6);
  }

  .corporate-nav-links {
    display: none;
  }

  .corporate-grid-2,
  .corporate-grid-3,
  .corporate-grid-4 {
    grid-template-columns: 1fr;
  }

  .corporate-footer-top {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .corporate-footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  .corporate-footer-legal {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ============================================
   13. UTILITY CLASSES
   ============================================ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================
   14. ACCESSIBILITY
   ============================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--corporate-navy);
  color: var(--white);
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 2px solid var(--corporate-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   15. PRINT STYLES
   ============================================ */

/* ============================================
   SCREEN: hide print-only PDF appendix content.
   These blocks (sources, related, About Pillar) are
   ONLY meant to render in the PDF / print output.
   The @media print rules below override this with display:block.
   ============================================ */
.print-only,
.print-only.print-appendix,
.print-only.print-about-pillar,
.print-only.print-sources-section,
.print-only.print-related-section { display: none !important; }
.print-only-inline { display: none !important; }

@media print {
  .corporate-nav,
  .corporate-footer {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }
}


/* ===== Pass-7 mobile responsiveness — added 2026-06-04 ===== */

/* Below 540px — header chrome accommodation */
@media (max-width: 540px) {
  #header-inner { padding: 0 1rem; gap: 0.75rem; }
  /* Hide the header language toggle on narrow screens; it's surfaced in the open mobile menu */
  .lang-toggle-header { display: none !important; }
}

/* Below 480px — tighten heavy section padding */
@media (max-width: 480px) {
  .pillar-section, .pillar-section--alt, .pillar-section--dark { padding-left: 1rem; padding-right: 1rem; }
  .pillar-hero { padding-left: 1rem; padding-right: 1rem; }
  .corporate-section { padding-top: var(--space-12, 48px); padding-bottom: var(--space-12, 48px); }
  /* Smaller founder photo on very narrow screens */
  .founder-photo { width: 140px !important; height: 140px !important; }
}

/* Tap-target hygiene — bump nav + footer link click areas to ≥44px */
@media (max-width: 860px) {
  #main-menu a { padding: 0.75rem 1rem; min-height: 44px; display: flex; align-items: center; }
  .footer-nav ul li a { padding: 0.375rem 0; min-height: 32px; display: inline-flex; align-items: center; }
  #mobile-menu-btn { min-width: 44px; min-height: 44px; }
}

/* Per-domain pricing comparable table — allow horizontal scroll if cramped */
table.pricing-comps { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 540px) {
  table.pricing-comps { font-size: 0.875rem; }
  table.pricing-comps th, table.pricing-comps td { white-space: nowrap; padding: 0.5rem 0.625rem; }
}

/* Library .lib-row — hide the secondary price col on small screens */
@media (max-width: 540px) {
  .lib-row .lib-price.lib-price-buy { display: none; }
}

/* Homepage marquee-style 3-column tile grids — collapse via auto-fit */
.insights-tile-grid,
section[aria-label="Featured perspectives"] > div[style*="grid"],
section[aria-label="More from the founder"] > div[style*="grid"] {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

/* Footer accordion below 768px — collapse footer-nav <h4> + <ul> into details/summary visually */
@media (max-width: 768px) {
  .footer-grid { gap: 1rem; }
  .footer-nav h4 { font-size: 0.875rem; margin-bottom: 0.5rem; }
  .footer-nav ul li { margin-bottom: 0.25rem; }
}


/* Pass-7 mobile — additional rules (Batch 3) */

/* Homepage Insights grid — covers ANY inline 'repeat(3, 1fr)' grid below 900px */
@media (max-width: 900px) {
  div[style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
}

/* Header safety — make sure long logo doesn't push lang-toggle off-screen */
#header-inner { flex-wrap: wrap; }
@media (max-width: 540px) {
  #header-inner .logo { flex: 0 1 auto; min-width: 0; }
  #header-inner .logo .logo-text { font-size: 1.0625rem; }
  #header-inner .logo .logo-tag { display: none; }
}

/* Open hamburger menu — make sure it's not above viewport on iOS Safari */
@media (max-width: 860px) {
  #main-menu.open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white, #fff);
    border-top: 1px solid var(--gray-200, #e5e7eb);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 8px 24px rgba(10, 22, 40, 0.08);
    flex-direction: column;
    padding: 0.5rem 1rem 1rem 1rem;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    z-index: 99;
  }
  #main-menu.open a, #main-menu.open .lang-toggle-mobile {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid var(--gray-100, #f5f5f5);
  }
  #main-menu.open .lang-toggle-mobile:last-child { border-bottom: none; }
}

/* Below 480px — extra cramped: reduce body H1/H2 font-sizes */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.5rem, 8vw, 2rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.25rem, 6vw, 1.625rem) !important; line-height: 1.2 !important; }
  .pillar-hero h1, .hero h1 { font-size: clamp(1.75rem, 9vw, 2.5rem) !important; }
  /* Prevent overflow from long unbroken words */
  .pillar-section h1, .pillar-section h2, .pillar-section h3, .pillar-section p,
  .pillar-hero h1, .pillar-hero h2, .pillar-hero p { overflow-wrap: anywhere; word-break: normal; }
}

/* Ensure no horizontal scroll at root */
html, body { overflow-x: hidden; }

/* Per-domain template — make hero CTA stack nicely + buttons full-width on mobile */
@media (max-width: 540px) {
  .hero-actions, .cta-row { display: flex; flex-direction: column; gap: 0.625rem; }
  .hero-actions a, .cta-row a, .btn, .button { width: 100%; box-sizing: border-box; text-align: center; }
}

/* Pricing detail — table cells need horizontal scroll affordance hint */
.pricing-comps { position: relative; }

/* Pass-7 mobile — footer accordion transitions */
.footer-nav .footer-acc-collapsible { transition: max-height 220ms ease; }
@media (max-width: 768px) {
  .footer-nav h4 { user-select: none; -webkit-user-select: none; min-height: 44px; padding: 0.5rem 0; display: flex; align-items: center; justify-content: space-between; }
  .footer-nav h4:hover { color: var(--corporate-gold, #b8860b); }
}

/* ===== Pass-7 mobile — Batch 6 critical overflow fixes ===== */

/* Hard global rule: prevent any element from rendering wider than viewport.
   Applies to ALL pages, all classes. Used to find/fix horizontal scroll bugs. */
@media (max-width: 540px) {
  /* All headings + paragraphs allow word-break for long words like "infrastructure", "Spanish-language" */
  h1, h2, h3, h4, h5, h6, p, blockquote, li, dt, dd, span, a, strong, em,
  .lead, .subhead, .eyebrow, .meta, .tagline {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Hero H1 specifically — way smaller font + tighter line-height to fit on 360px */
  .pillar-hero h1, .hero h1, .practice-hero h1, .segment-hero h1, .domain-hero h1 {
    font-size: clamp(1.625rem, 7vw, 2.125rem) !important;
    line-height: 1.1 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  /* Hero subhead */
  .pillar-hero .subhead, .practice-hero .subhead, .segment-hero .voice-paragraph {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* CTAs — full-width on mobile, no wrap inside text */
  .pillar-hero .ctas { flex-direction: column; gap: 0.5rem; }
  .pillar-hero .ctas a,
  .segment-cta-row a,
  .domain-build-cta a,
  .domain-cta-card a {
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    display: block !important;
    overflow-wrap: break-word;
    padding: 0.875rem 1rem !important;
  }

  /* Domain meta badges - allow wrapping */
  .domain-hero .meta, .meta { flex-wrap: wrap !important; gap: 0.375rem; }
  .domain-hero .meta span { font-size: 0.75rem; padding: 0.125rem 0.5rem; }

  /* Domain CTA cards & build-cta */
  .domain-cta-card, .domain-build-cta { padding: 1.25rem !important; }
  .domain-cta-card h3, .domain-build-cta h3 { font-size: 1.125rem !important; }
  .domain-cta-card p, .domain-build-cta p { font-size: 0.875rem !important; }
  .domain-cta-card .cta-price { font-size: 1.25rem !important; }

  /* Section headers in domain/practice/segment pages */
  .domain-section h2, .practice-hero h1, .segment-hero h1 {
    font-size: 1.5rem !important;
  }

  /* Body section padding — already reduced but apply to all sections */
  .domain-section, .domain-hero, .domain-ctas { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* 480-540px range — stronger constraints */
@media (max-width: 480px) {
  .pillar-hero { padding-top: 6rem !important; padding-bottom: 3rem !important; }
  .practice-hero, .segment-hero, .domain-hero { padding-top: 5rem !important; padding-bottom: 2rem !important; }
  /* Reduce section padding-top to gain vertical real estate */
  .pillar-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* Safety: cap container widths to viewport */
.pillar-hero, .pillar-section, .domain-hero, .domain-section, .domain-ctas,
.practice-hero, .segment-hero, .faq-section, .footer-container, #header-inner {
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== Institute Market Context — stat cards for vertical practice-area pages ===== */
.market-context {
  /* uses existing .pillar-section--alt for background */
}

.market-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0 2.5rem;
}
@media (max-width: 900px) { .market-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .market-stats-grid { grid-template-columns: 1fr; gap: 1rem; } }

.market-stat {
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 6px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.market-stat:hover {
  border-color: var(--corporate-gold, #b8860b);
  box-shadow: 0 6px 18px rgba(10, 22, 40, 0.06);
}
.market-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--corporate-navy, #0a1628);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.market-stat-label {
  font-size: 0.9375rem;
  color: var(--gray-700, #374151);
  line-height: 1.45;
}
.market-stat-source {
  font-size: 0.6875rem;
  color: var(--gray-500, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: auto;
}

/* Smaller stat font on mobile */
@media (max-width: 540px) {
  .market-stat-num { font-size: 1.875rem; }
  .market-stat { padding: 1.25rem 1rem; }
}




/* ============================================
   GORGEOUS PDF / PRINT STYLES — Pillar Learn
   Optimized for browser print + Chrome headless PDF generation.
   Hide screen chrome, show print-only appendix content,
   set @page running headers/footers, drop caps, section markers,
   numbered framework cards, paginated data grid, print-friendly
   typography hierarchy. Print this and it looks like a magazine.
   ============================================ */
@media print {
  /* === Hide all screen-only UI === */
  header, footer:not(.print-footer), nav:not(.print-only nav),
  .video-embed-block, .pillar-cta, .related-products-grid, .siblings-block,
  .related-learn-section, .learn-promo-banner, .learn-homepage-feature,
  .auth-cats, .authority-categories-callout, .err-actions, #contact-btn,
  #mobile-menu-btn, .cta-row, iframe, #reading-progress-wrap,
  .pdf-button-row, .subscribe-widget, .share-row, .learn-toc,
  .other-tracks, .siblings-grid, .related-products,
  .hub-search-box, .paths-callout, .insights-learn-section {
    display: none !important;
  }

  /* === Show print-only content === */
  .print-only { display: block !important; }
  .print-only-inline { display: inline !important; }

  /* === Page setup with running header + footer === */
  @page {
    size: A4;
    margin: 2cm 2cm 2.5cm 2cm;
    @bottom-center {
      content: counter(page);
      font-family: 'Helvetica', 'Inter', sans-serif;
      font-size: 9pt;
      color: #888;
    }
    @bottom-left {
      content: "PILLAR";
      font-family: 'Helvetica', 'Inter', sans-serif;
      font-size: 8pt;
      color: #888;
      letter-spacing: 0.14em;
    }
    @bottom-right {
      content: "pillarme.com";
      font-family: 'Helvetica', 'Inter', sans-serif;
      font-size: 8pt;
      color: #888;
    }
    @top-right {
      content: "PILLAR";
      font-family: 'Helvetica', 'Inter', sans-serif;
      font-size: 9pt;
      color: #0A1628;
      letter-spacing: 0.16em;
      font-weight: bold;
    }
  }
  /* No header/footer on cover page */
  @page :first {
    margin-top: 0 !important;
    @bottom-center { content: none; }
    @bottom-left { content: none; }
    @bottom-right { content: none; }
    @top-right { content: none; }
  }

  /* === Background + base === */
  body, main, section, div {
    background: #fff !important;
    color: #1a1a1a !important;
  }
  body {
    font-family: 'Inter', 'Helvetica', sans-serif !important;
    counter-reset: section;
  }
  main { padding: 0 !important; max-width: 100% !important; }

  /* === COVER PAGE — full-bleed first impression === */
  .learn-hero {
    page-break-after: always;
    padding: 4cm 0 0 !important;
    max-width: 100% !important;
    min-height: 24cm;
    position: relative;
  }
  .learn-hero::before {
    content: "PILLAR";
    position: absolute;
    top: 1.5cm;
    left: 0;
    font-family: 'Helvetica', 'Inter', sans-serif;
    font-size: 14pt;
    letter-spacing: 0.18em;
    color: #0A1628;
    font-weight: bold;
  }
  .learn-hero::after {
    content: "Pillar Media & Entertainment   ·   pillarme.com/learn";
    position: absolute;
    bottom: 1cm;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Helvetica', sans-serif;
    font-size: 8pt;
    letter-spacing: 0.12em;
    color: #888;
    text-transform: uppercase;
  }
  .learn-hero .eyebrow {
    color: #B8860B !important;
    font-size: 11pt !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 1.25cm !important;
    text-transform: uppercase;
    font-weight: 600;
  }
  .learn-hero h1 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 38pt !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    color: #0A1628 !important;
    margin-bottom: 1.25cm !important;
    font-weight: 500 !important;
    max-width: 14cm;
  }
  .learn-hero .subhead {
    font-size: 14pt !important;
    line-height: 1.45 !important;
    color: #333 !important;
    margin-bottom: 1.5cm !important;
    max-width: 13cm;
    font-style: italic;
    font-family: 'Playfair Display', 'Georgia', serif !important;
  }
  .learn-hero .meta {
    font-size: 9.5pt !important;
    color: #666 !important;
    border-top: 1px solid #ccc !important;
    padding-top: 0.5cm !important;
    margin-top: 1cm !important;
  }
  .meta-last-updated {
    font-size: 9pt !important;
    color: #888 !important;
  }

  /* === SECTION HEADINGS — gold rule + counter === */
  .learn-section { padding: 0.5cm 0 !important; max-width: 100% !important; }
  .learn-section h2 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 22pt !important;
    line-height: 1.15 !important;
    color: #0A1628 !important;
    margin: 0.5cm 0 0.6cm !important;
    padding-bottom: 0.25cm !important;
    border-bottom: 2px solid #B8860B !important;
    font-weight: 500 !important;
    page-break-after: avoid;
    counter-increment: section;
    position: relative;
  }
  .learn-section h2::before {
    content: counter(section, decimal-leading-zero) " — ";
    color: #B8860B;
    font-size: 14pt;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 400;
    margin-right: 0.3em;
  }
  .learn-section h3 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 15pt !important;
    color: #0A1628 !important;
    margin: 0.5cm 0 0.3cm !important;
    font-weight: 500 !important;
    page-break-after: avoid;
  }

  /* === BODY TYPOGRAPHY === */
  p, li {
    font-size: 10.5pt !important;
    line-height: 1.6 !important;
    color: #222 !important;
    max-width: 100% !important;
    margin-bottom: 0.4cm !important;
    orphans: 3;
    widows: 3;
  }

  /* Drop cap on first paragraph of body sections */
  .learn-body-section p:first-of-type::first-letter,
  .learn-section > p:first-of-type::first-letter {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 38pt;
    line-height: 0.85;
    float: left;
    padding: 0.1em 0.18em 0 0;
    color: #B8860B;
    font-weight: 500;
  }

  /* === THESIS BLOCK — pull quote === */
  .thesis-block {
    border-left: 4px solid #B8860B !important;
    background: #f8f5ed !important;
    padding: 0.8cm 1cm !important;
    margin: 0.8cm 0 !important;
    page-break-inside: avoid;
    border-radius: 0 !important;
  }
  .thesis-block p {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-style: italic !important;
    font-size: 13pt !important;
    line-height: 1.45 !important;
    color: #0A1628 !important;
    margin: 0 !important;
  }

  /* What You'll Learn list */
  .learn-section ul {
    background: #fbf8ef;
    border: 1px solid #e9dfc9;
    padding: 0.6cm 1.2cm 0.6cm 1.4cm !important;
    margin: 0.5cm 0 !important;
    page-break-inside: avoid;
  }
  .learn-section ul li {
    font-size: 10.5pt !important;
    line-height: 1.55 !important;
    margin-bottom: 0.25cm !important;
  }

  /* === FRAMEWORK BLOCK === */
  .framework-block {
    border: 1px solid #d0d0d0 !important;
    padding: 1cm !important;
    margin: 0.6cm 0 !important;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  .framework-name {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 17pt !important;
    color: #0A1628 !important;
    margin-bottom: 0.4cm !important;
    line-height: 1.15;
  }
  .framework-intro {
    color: #444 !important;
    font-size: 10.5pt !important;
    line-height: 1.5 !important;
    margin-bottom: 0.6cm !important;
  }
  .framework-pillar {
    padding: 0.45cm 0 !important;
    border-top: 1px dashed #ddd !important;
    display: flex !important;
    gap: 0.5cm !important;
    align-items: flex-start;
    page-break-inside: avoid;
  }
  .framework-pillar:first-of-type { border-top: 0 !important; padding-top: 0 !important; }
  .framework-pillar-num {
    background: #0A1628 !important;
    color: #fff !important;
    width: 32pt !important;
    height: 32pt !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 32pt !important;
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 12pt !important;
    font-weight: 500;
  }
  .framework-pillar-body h4 {
    font-size: 11pt !important;
    color: #0A1628 !important;
    margin-bottom: 0.2cm !important;
    font-weight: 600 !important;
  }
  .framework-pillar-body p {
    font-size: 10pt !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  /* === DATA STAT CARDS === */
  .market-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4cm !important;
    margin: 0.5cm 0 !important;
  }
  .market-stat {
    border: 1px solid #d0d0d0 !important;
    padding: 0.5cm 0.6cm !important;
    background: #fff !important;
    page-break-inside: avoid;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .market-stat-num {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 23pt !important;
    color: #0A1628 !important;
    line-height: 1 !important;
    margin-bottom: 0.2cm !important;
    font-weight: 500 !important;
  }
  .market-stat-label {
    font-size: 9.5pt !important;
    line-height: 1.4 !important;
    color: #444 !important;
    margin-bottom: 0.2cm !important;
  }
  .market-stat-source {
    font-size: 7.5pt !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600;
  }

  /* === CHECKLIST BLOCK === */
  .checklist-block {
    border: 1px solid #d0d0d0 !important;
    padding: 0.7cm !important;
    margin: 0.5cm 0 !important;
    page-break-inside: avoid;
    background: #fff !important;
    border-radius: 0 !important;
  }
  .checklist-block ol {
    padding-left: 1cm !important;
    margin: 0 !important;
    list-style: decimal !important;
  }
  .checklist-block ol li {
    margin-bottom: 0.3cm !important;
    font-size: 10pt !important;
    line-height: 1.55 !important;
  }
  .checklist-block ol li::marker {
    color: #B8860B !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
  }

  /* === FAQ === */
  .faq-section h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: 22pt !important;
    border-bottom: 2px solid #B8860B !important;
    padding-bottom: 0.25cm !important;
    margin-bottom: 0.5cm !important;
  }
  .faq-section .faq-item {
    page-break-inside: avoid;
    padding: 0.35cm 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }
  .faq-item h3 {
    font-size: 11pt !important;
    color: #0A1628 !important;
    margin-bottom: 0.2cm !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
  }
  .faq-item p {
    font-size: 9.5pt !important;
    line-height: 1.55 !important;
    color: #333 !important;
  }

  /* === PRINT-ONLY APPENDIX SECTIONS === */
  .print-only.print-appendix {
    page-break-before: always;
    padding-top: 1cm !important;
  }
  .print-appendix h2 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 22pt !important;
    color: #0A1628 !important;
    border-bottom: 2px solid #B8860B !important;
    padding-bottom: 0.25cm !important;
    margin-bottom: 0.6cm !important;
    font-weight: 500 !important;
  }
  .print-appendix h2::before { content: none !important; }
  .print-sources {
    font-size: 9.5pt !important;
    color: #333 !important;
    line-height: 1.5 !important;
    padding-left: 1.5em !important;
  }
  .print-sources li { margin-bottom: 0.25cm !important; }
  .print-related-list li {
    font-size: 10pt !important;
    margin-bottom: 0.3cm !important;
  }
  .print-related-list strong {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 11.5pt !important;
    color: #0A1628 !important;
    display: block !important;
    margin-bottom: 0.1cm !important;
  }

  /* === ABOUT PILLAR (final page) === */
  .print-about-pillar {
    page-break-before: always;
    padding: 5cm 0 0 !important;
    text-align: center !important;
    min-height: 22cm;
  }
  .print-about-pillar .about-logo {
    font-family: 'Helvetica', 'Inter', sans-serif !important;
    font-size: 36pt !important;
    letter-spacing: 0.18em !important;
    color: #0A1628 !important;
    font-weight: bold !important;
    margin-bottom: 0.5cm !important;
  }
  .print-about-pillar .about-tagline {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-style: italic !important;
    font-size: 14pt !important;
    color: #444 !important;
    max-width: 13cm !important;
    margin: 0 auto 1.5cm !important;
    line-height: 1.45 !important;
  }
  .print-about-pillar .about-products {
    max-width: 14cm !important;
    margin: 0 auto !important;
    text-align: left !important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    padding: 0.8cm 0 !important;
  }
  .print-about-pillar .about-products div {
    font-size: 11pt !important;
    line-height: 1.55 !important;
    margin-bottom: 0.4cm !important;
    color: #333 !important;
  }
  .print-about-pillar .about-products strong {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    color: #0A1628 !important;
    font-size: 12pt !important;
  }
  .print-about-pillar .about-contact {
    margin-top: 1.5cm !important;
    font-size: 10pt !important;
    color: #555 !important;
    letter-spacing: 0.05em !important;
  }
  .print-about-pillar .about-contact a {
    color: #0A1628 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  /* === LINKS — print URL after text === */
  main a[href^="http"]::after,
  main a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #888 !important;
    font-weight: normal !important;
  }
  main a[href^="#"]::after,
  .print-related-list a::after,
  .print-about-pillar a::after,
  .market-stat a::after {
    content: "" !important;
  }

  /* === DEFAULT: prevent break inside small elements === */
  h1, h2, h3, h4 { break-after: avoid; }
  p, li { break-inside: avoid-page; }


  /* === PRACTICE / AUTHORITY / INSTITUTE PAGE PRINT RULES === */
  .practice-hero {
    page-break-after: always;
    padding: 4cm 0 0 !important;
    min-height: 24cm;
    position: relative;
    background: transparent !important;
    color: #0A1628 !important;
  }
  .practice-hero::before {
    content: "PILLAR";
    position: absolute; top: 1.5cm; left: 0;
    font-family: 'Helvetica', sans-serif; font-size: 14pt; letter-spacing: 0.18em;
    color: #0A1628 !important; font-weight: bold;
  }
  .practice-hero::after {
    content: "Pillar Media & Entertainment   ·   pillarme.com";
    position: absolute; bottom: 1cm; left: 0; right: 0;
    text-align: center; font-family: 'Helvetica', sans-serif;
    font-size: 8pt; letter-spacing: 0.12em; color: #888;
    text-transform: uppercase;
  }
  .practice-hero-inner { padding: 0 !important; max-width: 100% !important; }
  .practice-hero .eyebrow {
    color: #B8860B !important; font-size: 11pt !important;
    letter-spacing: 0.16em !important; margin-bottom: 1.25cm !important;
    text-transform: uppercase; font-weight: 600;
  }
  .practice-hero h1 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 36pt !important; line-height: 1.05 !important;
    color: #0A1628 !important; margin-bottom: 1.25cm !important;
    font-weight: 500 !important; max-width: 14cm;
  }
  .practice-hero .subhead {
    font-size: 14pt !important; line-height: 1.45 !important;
    color: #333 !important; margin-bottom: 1.5cm !important;
    max-width: 13cm; font-style: italic;
    font-family: 'Playfair Display', 'Georgia', serif !important;
  }
  .practice-hero .practice-state {
    display: inline-block !important; padding: 0.25cm 0.6cm !important;
    background: #f8f5ed !important; color: #B8860B !important;
    border: 1px solid #e9dfc9 !important; font-size: 9pt !important;
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  }

  .pillar-section, .pillar-section--alt, .pillar-section--dark {
    padding: 0.5cm 0 !important; max-width: 100% !important;
    background: #fff !important; color: #222 !important;
  }
  .pillar-section--dark h2, .pillar-section--dark p, .pillar-section--dark .lead {
    color: #0A1628 !important; background: transparent !important;
  }
  .pillar-section--dark { border: 1px solid #d0d0d0; padding: 0.8cm !important; margin: 0.5cm 0 !important; }
  .pillar-section-inner { padding: 0 !important; max-width: 100% !important; }
  .pillar-section h2 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 22pt !important; color: #0A1628 !important;
    margin: 0.5cm 0 0.6cm !important; padding-bottom: 0.25cm !important;
    border-bottom: 2px solid #B8860B !important;
    counter-increment: section; page-break-after: avoid;
  }
  .pillar-section h2::before {
    content: counter(section, decimal-leading-zero) " — ";
    color: #B8860B; font-size: 14pt;
    font-family: 'Playfair Display', serif; margin-right: 0.3em;
  }
  .pillar-section h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 15pt !important; color: #0A1628 !important;
    margin: 0.5cm 0 0.3cm !important; page-break-after: avoid;
  }
  .pillar-section p, .pillar-section .lead {
    font-size: 10.5pt !important; line-height: 1.6 !important;
    color: #222 !important; max-width: 100% !important;
    margin-bottom: 0.4cm !important;
  }

  /* Hero domains grid for Authority category pages */
  .domain-cards-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 0.4cm !important; margin: 0.5cm 0 !important;
  }
  .domain-card {
    border: 1px solid #d0d0d0 !important; padding: 0.5cm !important;
    background: #fff !important; page-break-inside: avoid;
    text-decoration: none !important; color: inherit !important;
    box-shadow: none !important; border-radius: 0 !important;
  }
  .domain-card-name {
    font-family: 'Playfair Display', serif !important;
    font-size: 13pt !important; color: #0A1628 !important;
    margin-bottom: 0.15cm !important;
  }
  .domain-card-meta {
    font-size: 7.5pt !important; color: #888 !important;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .domain-card-price {
    font-size: 10pt !important; color: #B8860B !important;
    font-weight: 600 !important; margin-top: 0.25cm !important;
  }

  /* CTA row (Authority / Institute pages) */
  .cta-row { display: none !important; }

  /* Hide stuff that's only relevant on web */
  .related-cells-list, .practice-areas-grid, .other-tracks { display: none !important; }



  /* === CASE STUDY + INSIGHTS PDF RULES === */
  /* Case study cover (.pillar-hero) */
  .pillar-hero {
    page-break-after: always;
    padding: 4cm 0 0 !important;
    min-height: 23cm;
    position: relative;
    background: #fff !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  .pillar-hero::before {
    content: "PILLAR";
    position: absolute; top: 1.5cm; left: 0;
    font-family: 'Helvetica', sans-serif; font-size: 14pt; letter-spacing: 0.18em;
    color: #0A1628 !important; font-weight: bold;
  }
  .pillar-hero::after {
    content: "Pillar Media & Entertainment   ·   pillarme.com";
    position: absolute; bottom: 1cm; left: 0; right: 0;
    text-align: center; font-family: 'Helvetica', sans-serif;
    font-size: 8pt; letter-spacing: 0.12em; color: #888; text-transform: uppercase;
  }
  .pillar-hero .eyebrow {
    color: #B8860B !important; font-size: 11pt !important;
    letter-spacing: 0.16em !important; margin-bottom: 1.25cm !important;
    text-transform: uppercase; font-weight: 600;
  }
  .pillar-hero h1 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 34pt !important; line-height: 1.08 !important;
    color: #0A1628 !important; margin-bottom: 1.25cm !important;
    font-weight: 500 !important; max-width: 15cm;
  }
  .pillar-hero .subhead {
    font-size: 13.5pt !important; line-height: 1.45 !important;
    color: #333 !important; max-width: 14cm;
    font-style: italic; font-family: 'Playfair Display', 'Georgia', serif !important;
  }

  /* === INSIGHTS ARTICLE (.insights-article) — overrides inline styles === */
  /* Cover: first section holds eyebrow + h1 + byline aside */
  .insights-article > section:first-of-type {
    page-break-after: always !important;
    padding: 4cm 0 0 !important;
    min-height: 22cm !important;
    max-width: 100% !important;
    position: relative;
  }
  .insights-article > section:first-of-type::before {
    content: "PILLAR";
    position: absolute; top: 1.5cm; left: 0;
    font-family: 'Helvetica', sans-serif; font-size: 14pt; letter-spacing: 0.18em;
    color: #0A1628 !important; font-weight: bold;
  }
  .insights-article > section:first-of-type::after {
    content: "Pillar Media & Entertainment   ·   pillarme.com/insights";
    position: absolute; bottom: 1cm; left: 0; right: 0;
    text-align: center; font-family: 'Helvetica', sans-serif;
    font-size: 8pt; letter-spacing: 0.12em; color: #888; text-transform: uppercase;
  }
  .insights-article > section:first-of-type > p:first-of-type {
    color: #B8860B !important; font-size: 11pt !important;
    letter-spacing: 0.16em !important; text-transform: uppercase;
    font-weight: 600 !important; margin-bottom: 1.25cm !important;
  }
  .insights-article h1 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 34pt !important; line-height: 1.08 !important;
    color: #0A1628 !important; margin-bottom: 1.25cm !important;
    font-weight: 500 !important; max-width: 15cm !important;
  }
  .insights-article aside {
    border-top: 1px solid #ccc !important; border-bottom: 1px solid #ccc !important;
    padding: 0.5cm 0 !important; margin: 1cm 0 0 !important;
    display: flex !important; gap: 0.5cm !important; align-items: center !important;
  }
  .insights-article aside .founder-photo {
    width: 1.4cm !important; height: 1.4cm !important; flex-shrink: 0 !important;
    background-color: #0A1628 !important; border-radius: 50% !important;
  }
  .insights-article aside div { font-size: 9.5pt !important; color: #444 !important; line-height: 1.4 !important; }
  .insights-article aside div div:first-child { font-weight: 600 !important; color: #0A1628 !important; }

  /* Body article */
  .insights-article > article {
    padding: 0 !important; max-width: 100% !important;
    counter-reset: section;
  }
  .insights-article > article > p {
    font-size: 10.5pt !important; line-height: 1.6 !important;
    color: #222 !important; margin-bottom: 0.4cm !important; max-width: 100% !important;
    orphans: 3; widows: 3;
  }
  /* Lead paragraph (first, larger) */
  .insights-article > article > p:first-of-type {
    font-size: 13pt !important; line-height: 1.5 !important;
    font-style: italic !important; color: #0A1628 !important;
    font-family: 'Playfair Display', 'Georgia', serif !important;
    border-left: 4px solid #B8860B !important; padding-left: 0.6cm !important;
    margin-bottom: 0.7cm !important;
  }
  .insights-article > article h2 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 22pt !important; color: #0A1628 !important;
    margin: 0.6cm 0 0.5cm !important; padding-bottom: 0.25cm !important;
    border-bottom: 2px solid #B8860B !important; font-weight: 500 !important;
    page-break-after: avoid; counter-increment: section;
  }
  .insights-article > article h2::before {
    content: counter(section, decimal-leading-zero) " — ";
    color: #B8860B; font-size: 14pt; font-weight: 400;
    font-family: 'Playfair Display', serif; margin-right: 0.3em;
  }
  .insights-article > article h3 {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-size: 14pt !important; color: #0A1628 !important;
    margin: 0.5cm 0 0.25cm !important; font-weight: 500 !important;
    page-break-after: avoid;
  }
  .insights-article > article ul, .insights-article > article ol {
    margin: 0.3cm 0 0.5cm !important; padding-left: 1cm !important;
  }
  .insights-article > article li {
    font-size: 10pt !important; line-height: 1.55 !important;
    color: #222 !important; margin-bottom: 0.2cm !important;
  }
  .insights-article > article strong { color: #0A1628 !important; }
  /* Hide the founder-byline div between section + article */
  .insights-article > div[style*="border-bottom"] { display: none !important; }

}