/* =============================================
   EXECUTIVE ONBOARDING CASE STUDY - ENHANCED
   Modern UX/UI Portfolio Styling
   ============================================= */

/* =============================================
   CSS VARIABLES & DESIGN TOKENS
   ============================================= */
:root {
  /* Local tokens remapped to consume the Yoko Space tokens from tokens.css.
     Every existing rule in this file uses var(--color-*, --space-*, etc.) —
     by changing the values here, the whole stylesheet adopts Yoko colors
     without rewriting any of the rules. */

  /* Colors → Yoko ink ramp + accent */
  --color-primary:        var(--ys-ink-100);
  --color-primary-dark:   var(--ys-ink-100);
  --color-primary-light:  var(--ys-ink-80);
  --color-secondary:      var(--ys-ink-80);
  --color-accent:         var(--ys-ink-100);
  --color-warning:        var(--ys-ink-100);
  --color-error:          var(--ys-danger);

  /* Neutrals → Yoko surfaces */
  --color-bg:             var(--ys-paper);
  --color-bg-secondary:   var(--ys-paper-sub);
  --color-bg-tertiary:    var(--ys-paper-sub);
  --color-border:         var(--ys-ink-10);
  --color-border-light:   var(--ys-ink-10);

  /* Text */
  --color-text-primary:   var(--ys-ink-100);
  --color-text-secondary: var(--ys-ink-60);
  --color-text-tertiary:  var(--ys-ink-60);

  /* Typography — kept inline since this file's scale differs slightly
     from the Yoko ramp (more granular: xs through 6xl). The Yoko ramp
     covers the same range; case studies use this finer scale. */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --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;

  /* Spacing — local alias kept; values match the Yoko 4pt scale */
  --space-xs: var(--ys-space-1);
  --space-sm: var(--ys-space-2);
  --space-md: var(--ys-space-4);
  --space-lg: var(--ys-space-6);
  --space-xl: var(--ys-space-8);
  --space-2xl: var(--ys-space-12);
  --space-3xl: var(--ys-space-16);
  --space-4xl: var(--ys-space-24);

  /* Border Radius — remapped to Yoko radii. Case-study scale is wider
     than Yoko (sm/md/lg/xl/2xl); collapsed to the closest matches. */
  --radius-sm: var(--ys-radius-sm);
  --radius-md: var(--ys-radius-md);
  --radius-lg: var(--ys-radius-md);
  --radius-xl: var(--ys-radius-lg);
  --radius-2xl: var(--ys-radius-lg);
  --radius-full: var(--ys-radius-pill);

  /* Shadows — Yoko reads flat, so collapse the heavier shadows
     toward elevation-1 / -2 for a calmer surface. */
  --shadow-sm: var(--ys-elevation-1);
  --shadow-md: var(--ys-elevation-1);
  --shadow-lg: var(--ys-elevation-2);
  --shadow-xl: var(--ys-elevation-2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 80px;
}

/* =============================================
   RESET & BASE STYLES
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

/* =============================================
   TYPOGRAPHY — harmonized to portfolio-ai-case-study
   patterns: -0.01em letter-spacing on headings, h1 at 4rem,
   p at 1.0625rem on ink-80 with 68ch max for readability.
   ============================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

h1 {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: var(--space-lg);
  color: var(--ys-ink-80);
  max-width: 68ch;
}

.lead-paragraph {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xl);
  max-width: 68ch;
}

/* Eyebrow label — portfolio-ai pattern: small uppercase mark
   that precedes section titles. Use .section-label or .eyebrow
   interchangeably (.eyebrow is the canonical portfolio-ai name). */
.section-label,
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ys-ink-60);
  margin-bottom: var(--space-md);
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

ul, ol {
  margin-left: var(--space-xl);
  margin-bottom: var(--space-lg);
}

li {
  margin-bottom: var(--space-sm);
  color: var(--color-text-secondary);
}

strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* SVG Icons */
svg {
  display: inline-block;
  vertical-align: middle;
}

.info-icon svg,
.method-icon svg,
.principle-icon svg,
.feature-icon svg,
.result-icon svg,
.stat-icon svg,
.improvement-icon svg,
.finding-icon svg,
.callout-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =============================================
   ACCESSIBILITY
   ============================================= */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: var(--space-md) var(--space-lg);
  z-index: 10000;
  transition: top var(--transition-fast);
}

.skip-to-main:focus {
  top: 0;
}
    /* NAVIGATION */
    .navigation {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      z-index: 1000;
      padding: 1.5rem 0;
      border-bottom: 1px solid var(--ys-ink-10);
    }
    
    .nav-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    /* Logo section — avatar + text mark (matches every other page for
       identity continuity). NN/g Recognition rather than recall. */
    .logo-section {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--ys-space-3);
      text-decoration: none;
    }
    .logo-section:focus-visible {
      outline: none;
      border-radius: var(--ys-radius-pill);
      box-shadow: var(--ys-focus-ring);
    }
    .nav-avatar {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border-radius: var(--ys-radius-pill);
      overflow: hidden;
      border: 1px solid var(--ys-ink-10);
      display: block;
    }
    .nav-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }
    .logo-text {
      display: flex;
      flex-direction: column;
    }

    .logo {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--ys-ink-100);
      letter-spacing: -0.02em;
    }

    .logo-section:hover .logo,
    .logo-section:hover .subtitle { opacity: 0.7; }
    .logo:hover { opacity: 0.7; }

    .subtitle {
      font-size: 0.875rem;
      font-weight: 400;
      color: var(--ys-ink-60);
      margin-top: 0.125rem;
    }
    
    .nav-links {
      display: flex;
      gap: 2rem;
      align-items: center;
    }
    
    .nav-link {
      font-size: 1rem;
      font-weight: 500;
      position: relative;
      padding-bottom: 2px;
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--ys-ink-100);
      transition: width 0.3s ease;
    }
    
    .nav-link:hover::after,
    .nav-link:focus-visible::after {
      width: 100%;
    }

    .nav-link:hover { opacity: 0.6; }
    .nav-link:focus-visible {
      outline: none;
      border-radius: var(--ys-radius-sm);
      box-shadow: var(--ys-focus-ring);
    }

/* Hamburger Menu */
.hamburger:focus-visible {
  outline: none;
  border-radius: var(--ys-radius-sm);
  box-shadow: var(--ys-focus-ring);
}
.mobile-menu-link:focus-visible {
  outline: none;
  border-radius: var(--ys-radius-sm);
  box-shadow: var(--ys-focus-ring);
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  transition: all var(--transition-base);
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  z-index: 999;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-link {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* =============================================
   READING PROGRESS
   ============================================= */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--ys-ink-100);
  z-index: 10001;
  transition: width var(--transition-fast);
}

/* =============================================
   TABLE OF CONTENTS
   ============================================= */
.toc-container {
  position: fixed;
  left: var(--space-xl);
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  max-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

@media (min-width: 1400px) {
  .toc-container {
    opacity: 1;
    pointer-events: auto;
  }
}

.toc-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-md);
}

.toc-list {
  list-style: none;
  margin: 0;
}

.toc-item {
  margin-bottom: var(--space-sm);
}

.toc-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: block;
  padding: var(--space-xs) 0;
  border-left: 2px solid transparent;
  padding-left: var(--space-md);
  margin-left: -var(--space-md);
  transition: all var(--transition-fast);
}

.toc-link:hover {
  color: var(--color-primary);
  border-left-color: var(--color-border);
}

.toc-link.active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

/* =============================================
   BACK TO TOP BUTTON
   ============================================= */
.back-to-top {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* =============================================
   HERO SECTION — harmonized to portfolio-ai:
   light vertical gradient (#fafafa → #fff), hairline divider,
   quieter screens overlay, tighter h1 letter-spacing.
   ============================================= */
.hero-banner {
  position: relative;
  height: 90vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #fafafa 0%, var(--ys-paper) 100%);
  border-bottom: 1px solid #f0f0f0;
  margin-top: var(--nav-height);
}

.hero-screens-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  padding: var(--space-3xl);
  /* Quieter overlay so screens read as supporting background, not
     competing surface. Matches portfolio-ai restraint. */
  opacity: 0.22;
}

.hero-screen {
  flex: 1;
  max-width: 480px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-slow);
  will-change: transform;
}

.hero-screen.screen-1 {
  transform: translateY(-20px) rotate(-2deg);
}

.hero-screen.screen-2 {
  transform: scale(1.1);
}

.hero-screen.screen-3 {
  transform: translateY(-20px) rotate(2deg);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 0 var(--space-xl);
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-lg);
  color: var(--color-text-primary);
  line-height: 1.05;
  animation: fadeInUp 0.8s ease;
}

.hero-subtitle {
  font-size: 1.375rem;
  color: var(--ys-ink-60);
  font-weight: 400;
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
  animation: fadeInUp 0.8s ease 0.2s backwards;
}

.hero-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  animation: fadeInUp 0.8s ease 0.4s backwards, bounce 2s ease-in-out 1s infinite;
}

.hero-scroll-indicator svg {
  width: 20px;
  height: 20px;
}

/* =============================================
   MAIN CONTENT CONTAINER
   ============================================= */
.case-study-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-xl);
}

.content-section {
  margin-bottom: var(--space-4xl);
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

.content-section.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  margin: var(--space-4xl) 0;
}

.crisis-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-error), transparent);
}

/* =============================================
   IMPACT-FIRST SECTION
   ============================================= */
/* Impact-first block — harmonized to portfolio-ai overview/callout
   restraint: paper-sub bg, 16px radius, hairline border. Drops the
   2px border and double-gradient noise for the calmer look. */
.impact-first {
  background: var(--ys-paper-sub);
  border-radius: 16px;
  padding: var(--space-4xl);
  margin-bottom: var(--space-4xl);
  border: 1px solid var(--ys-ink-10);
}

.impact-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ys-ink-60);
  margin-bottom: var(--space-lg);
}

.impact-headline {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xl);
  color: var(--color-text-primary);
}

.impact-description {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ys-ink-80);
  margin-bottom: var(--space-3xl);
  max-width: 68ch;
}

.impact-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
}

.impact-metric {
  background: var(--ys-paper);
  border: 1px solid var(--ys-ink-10);
  border-radius: 12px;
  padding: var(--space-xl);
  /* Lighter shadow than portfolio-ai's 0 2px 8px rgba(0,0,0,0.03) on
     hover. Flatter at rest, subtle lift on hover. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.impact-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  border-color: var(--ys-ink-20);
}

.metric-visual {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.metric-number {
  font-size: var(--font-size-5xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.metric-change {
  font-size: var(--font-size-3xl);
  color: var(--color-accent);
}

.metric-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.metric-detail {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* =============================================
   PROJECT INFO SECTION
   ============================================= */
.project-info-section {
  margin-bottom: var(--space-4xl);
}

.project-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.info-card {
  background: var(--ys-paper-sub);
  border-radius: 12px;
  padding: var(--space-xl);
  border: 1px solid var(--ys-ink-10);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.info-card:hover {
  background: var(--ys-paper);
  border-color: var(--ys-ink-20);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.info-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-md);
}

.info-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-sm);
}

.info-value {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* =============================================
   TIMELINE
   ============================================= */
.timeline-section {
  margin-bottom: var(--space-4xl);
}

.timeline-interactive {
  position: relative;
  padding: var(--space-2xl) 0;
}

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: var(--color-border);
}

.timeline-item {
  position: relative;
  display: flex;
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
  cursor: pointer;
  transition: all var(--transition-base);
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item:hover {
  transform: translateX(4px);
}

.timeline-item.hovered .timeline-dot {
  transform: scale(1.2);
  background: var(--color-primary);
}

.timeline-item.hovered .timeline-number {
  color: white;
}

.timeline-dot {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: white;
  border: 3px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-base);
  z-index: 2;
}

.timeline-dot.crisis {
  border-color: var(--ys-ink-60);
  animation: pulse 2s ease-in-out infinite;
}

.timeline-number {
  font-weight: 700;
  color: var(--color-primary);
}

.timeline-content {
  flex: 1;
  padding-top: var(--space-xs);
}

.timeline-phase {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.timeline-duration {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.timeline-details {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* =============================================
   CALLOUT BOXES — harmonized to portfolio-ai overview pattern:
   paper-sub bg, 16px radius, hairline ink-10 border. Drops the
   4px left-bar stripe (portfolio-ai reserves that for pull-quotes
   only). Variants retain the subtle left accent for semantic
   differentiation but at 3px ink-100 weight instead of heavy 4px.
   ============================================= */
.callout-box {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border-radius: 16px;
  margin: var(--space-2xl) 0;
  background: var(--ys-paper-sub);
  border: 1px solid var(--ys-ink-10);
  border-left: 3px solid var(--ys-ink-100);
}

.callout-box.problem-statement,
.callout-box.success {
  border-left-color: var(--ys-ink-100);
}

.callout-box.warning,
.callout-box.crisis-box {
  border-left-color: var(--ys-ink-60);
  /* Slightly recessed for "this was a moment of difficulty" tone */
  background: var(--ys-paper-sub);
}

.callout-icon {
  font-size: var(--font-size-3xl);
  flex-shrink: 0;
  color: var(--ys-ink-60);
}

.callout-content h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

.callout-content p {
  margin-bottom: 0;
  color: var(--ys-ink-80);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: none;
}

/* =============================================
   RESEARCH METHODS
   ============================================= */
.research-methods {
  margin: var(--space-3xl) 0;
}

.methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.method-card {
  background: var(--ys-paper-sub);
  border-radius: 12px;
  padding: var(--space-xl);
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  border: 1px solid var(--ys-ink-10);
}

.method-card:hover {
  background: var(--ys-paper);
  border-color: var(--ys-ink-20);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.method-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
}

.method-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.method-detail {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* =============================================
   PAIN POINTS
   ============================================= */
.pain-points-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.pain-point {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--ys-ink-100);
  transition: all var(--transition-base);
}

.pain-point:hover {
  background: white;
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.pain-point-number {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-border);
  flex-shrink: 0;
  line-height: 1;
}

.pain-point-content h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}

.pain-point-content p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
}

.user-quote {
  font-style: italic;
  color: var(--color-text-primary);
  font-weight: 500;
}

/* =============================================
   RESEARCH STATS
   ============================================= */
.research-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}

.research-stat {
  text-align: center;
  padding: var(--space-xl);
  background: var(--ys-ink-100);
  border-radius: var(--radius-lg);
  color: white;
}

.stat-number {
  font-size: var(--font-size-5xl);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-md);
}

.stat-label {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  opacity: 0.9;
}

/* =============================================
   INSIGHT CARDS
   ============================================= */
.insight-card {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: white;
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  transition: all var(--transition-base);
}

.insight-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.insight-number {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--ys-ink-100);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: 800;
  flex-shrink: 0;
}

.insight-content h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}

.insight-content p {
  margin-bottom: 0;
}

/* =============================================
   DESIGN PRINCIPLES
   ============================================= */
.design-principles-section {
  margin: var(--space-3xl) 0;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.principle-card {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  transition: all var(--transition-base);
  border: 2px solid var(--ys-ink-10);
}

.principle-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.principle-icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-lg);
}

.principle-card h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}

.principle-card p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
}

/* =============================================
   CONCEPT COMPARISON
   ============================================= */
.concepts-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-2xl) 0;
}

.concept-option {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  position: relative;
  transition: all var(--transition-base);
}

.concept-option.selected {
  background: var(--ys-paper-sub);
  border-color: var(--ys-ink-100);
}

.concept-option:not(.selected) {
  opacity: 0.7;
}

.concept-option:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.concept-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.concept-badge.selected {
  background: var(--ys-ink-100);
  color: white;
}

.concept-badge.rejected {
  background: var(--ys-ink-60);
  color: white;
}

.concept-option h4 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

.concept-option p {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

/* =============================================
   DESIGN PROCESS FLOW
   ============================================= */
.design-process-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  margin: var(--space-3xl) 0;
}

.process-phase {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  border-left: 4px solid var(--color-primary);
}

.phase-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.phase-number {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--ys-ink-100);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: 800;
  flex-shrink: 0;
}

.phase-header h3 {
  margin-bottom: 0;
}

.process-artifact {
  margin-top: var(--space-xl);
}

.artifact-placeholder {
  background: white;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  text-align: center;
  transition: all var(--transition-base);
}

.artifact-placeholder:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-tertiary);
}

.artifact-icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.artifact-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.artifact-detail {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* =============================================
   WORKFLOW PREVIEW
   ============================================= */
.workflow-preview {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: var(--space-2xl) 0;
  padding: var(--space-2xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}

.workflow-step-preview {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 180px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.workflow-step-preview:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.workflow-step-preview .step-number {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin: 0 auto var(--space-md);
}

.workflow-step-preview h4 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-sm);
}

.workflow-step-preview p {
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}

.workflow-arrow {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  flex-shrink: 0;
}

/* =============================================
   BEFORE/AFTER COMPARISON
   ============================================= */
.before-after-section {
  margin: var(--space-3xl) 0;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.comparison-item {
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  position: relative;
}

.comparison-item.before {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-ink-10) 100%);
  border: 2px solid var(--ys-ink-20);
}

.comparison-item.after {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
  border: 2px solid var(--ys-ink-100);
}

.comparison-label {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: white;
}

.comparison-item.before .comparison-label {
  color: var(--ys-ink-60);
}

.comparison-item.after .comparison-label {
  color: var(--ys-ink-100);
}

.comparison-content {
  margin-top: var(--space-xl);
}

.comparison-content ul {
  margin-left: 0;
  list-style-position: inside;
}

/* =============================================
   TESTING SECTION
   ============================================= */
.testing-overview {
  margin-bottom: var(--space-3xl);
}

.testing-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.testing-stat {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.testing-stat:hover {
  background: white;
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
}

.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.findings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.finding {
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border-left: 4px solid;
}

.finding.positive {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
  border-left-color: var(--ys-ink-100);
}

.finding.critical {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-ink-10) 100%);
  border-left-color: var(--ys-ink-60);
}

.finding-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-md);
}

.finding h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}

.finding p {
  margin-bottom: 0;
}

/* =============================================
   CRISIS SECTION
   ============================================= */
.crisis-section {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-ink-10) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-4xl);
  margin: var(--space-4xl) 0;
  border: 2px solid var(--ys-ink-20);
}

.crisis-label {
  color: var(--ys-ink-100) !important;
}

.crisis-timeline {
  margin: var(--space-3xl) 0;
}

.crisis-event {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  margin-bottom: var(--space-xl);
  border-left: 4px solid var(--ys-ink-60);
  transition: all var(--transition-base);
}

.crisis-event:hover {
  box-shadow: var(--shadow-lg);
  transform: translateX(4px);
}

.crisis-event.critical {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
  border-left-color: var(--ys-ink-100);
  border-left-width: 6px;
}

.crisis-date {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ys-ink-100);
  margin-bottom: var(--space-md);
  letter-spacing: 0.05em;
}

.crisis-content h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-md);
}

.crisis-content p {
  margin-bottom: 0;
}

/* =============================================
   STRATEGY CARDS
   ============================================= */
.strategy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}

.strategy-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  border-top: 4px solid var(--color-primary);
}

.strategy-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.strategy-number {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--ys-ink-100);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: 800;
  margin-bottom: var(--space-lg);
}

.strategy-content h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}

.strategy-content p {
  margin-bottom: 0;
}

/* =============================================
   FEATURE SHOWCASE
   ============================================= */
.feature-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin: var(--space-3xl) 0;
  padding: var(--space-3xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
}

.feature-description ol {
  margin-left: var(--space-xl);
}

.feature-description li {
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
  font-weight: 500;
}

.feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-visual img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ys-ink-10);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* =============================================
   FEATURES GRID
   ============================================= */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin: var(--space-3xl) 0;
}

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

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

.feature-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.feature-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.feature-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
}

.feature-card h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}

.feature-card p {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

/* =============================================
   INTERACTIVE WORKFLOW
   ============================================= */
.workflow-interactive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
}

.workflow-step {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  cursor: pointer;
  transition: all var(--transition-base);
  border: 2px solid transparent;
}

.workflow-step:hover {
  background: white;
  border-color: var(--color-primary-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.workflow-step.active {
  background: var(--ys-ink-100);
  color: white;
  border-color: var(--ys-ink-100);
}

.workflow-step.inactive {
  opacity: 0.5;
}

.step-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.workflow-step .step-number {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.workflow-step.active .step-number {
  background: white;
  color: var(--color-primary);
}

.step-header h4 {
  margin-bottom: 0;
  font-size: var(--font-size-base);
}

.workflow-step.active .step-header h4 {
  color: white;
}

.step-description {
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}

.workflow-step.active .step-description {
  color: rgba(255, 255, 255, 0.9);
}

.workflow-details {
  display: none;
  margin-top: var(--space-xl);
  padding: var(--space-2xl);
  background: white;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-primary);
  animation: slideDown 0.3s ease;
}

.workflow-details.active {
  display: block;
}

.screen-placeholder {
  margin-top: var(--space-xl);
  background: var(--color-bg-tertiary);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  text-align: center;
}

/* =============================================
   DESIGN SYSTEM PREVIEW
   ============================================= */
.design-system-preview {
  margin: var(--space-4xl) 0;
  padding: var(--space-3xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
}

.components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.component-item {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.component-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.component-label {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.component-item p {
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}

/* =============================================
   RESULTS SECTION
   ============================================= */
.results-hero {
  text-align: center;
  padding: var(--space-3xl);
  background: var(--ys-ink-100);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-3xl);
}

.results-stat-large {
  color: white;
}

.stat-number-large {
  font-size: var(--font-size-6xl);
  font-weight: 900;
  line-height: 1;
  margin-bottom: var(--space-lg);
}

.stat-label-large {
  font-size: var(--font-size-xl);
  opacity: 0.95;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}

.result-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.result-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.result-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-lg);
}

.result-metric {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.result-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.result-detail {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* =============================================
   TESTIMONIALS
   ============================================= */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}

.testimonial {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  border-left: 4px solid var(--color-primary);
}

.testimonial-quote {
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.testimonial-quote::before {
  content: '"';
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  line-height: 0;
}

.testimonial-author {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* =============================================
   REFLECTION SECTION
   ============================================= */
.reflection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}

.reflection-card {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  border-top: 4px solid var(--ys-ink-100);
  transition: all var(--transition-base);
}

.reflection-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.reflection-number {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--ys-ink-100);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-bottom: var(--space-lg);
}

.reflection-content h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}

.reflection-content p {
  margin-bottom: 0;
}

/* =============================================
   IMPROVEMENTS & FUTURE FEATURES
   ============================================= */
.improvements-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: var(--space-3xl) 0;
}

.improvement-item {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--ys-ink-100);
}

.improvement-icon {
  font-size: var(--font-size-3xl);
  flex-shrink: 0;
}

.improvement-content h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}

.improvement-content p {
  margin-bottom: 0;
}

.future-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-3xl) 0;
}

.future-feature {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border-left: 4px solid var(--ys-ink-100);
}

.future-feature h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}

.future-feature p {
  margin-bottom: 0;
}

/* =============================================
   NAVIGATION LINKS
   ============================================= */
.next-project-cta {
  text-align: center;
  margin: var(--space-4xl) 0;
}

.back-link-prominent {
  display: inline-block;
  padding: var(--space-lg) var(--space-2xl);
  background: var(--ys-ink-100);
  color: white;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-lg);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
}

.back-link-prominent:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  background: var(--ys-ink-100);
}

/* =============================================
   FOOTER
   ============================================= */
.cta-footer {
  background: var(--ys-ink-100);
  color: white;
  padding: var(--space-4xl) var(--space-xl);
}

.cta-content {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-title {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-lg);
  color: white;
}

.cta-email {
  font-size: var(--font-size-2xl);
  color: white;
  font-weight: 600;
  transition: color var(--transition-fast);
  text-decoration: underline;
}

.cta-email:hover {
  color: var(--ys-ink-20);
}

.footer-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3xl) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2xl);
}

.footer-column h4 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-md);
  color: white;
}

.footer-link {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-sm);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: white;
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */
@media (max-width: 1024px) {
  .hero-title {
    font-size: var(--font-size-5xl);
  }
  
  .impact-headline {
    font-size: var(--font-size-3xl);
  }
  
  .feature-showcase {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --space-4xl: 3rem;
    --space-3xl: 2rem;
  }
  
  .nav-links {
    display: none;
  }
  
  .hamburger {
    display: flex;
  }
  
  .hero-title {
    font-size: var(--font-size-4xl);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-lg);
  }
  
  .case-study-container {
    padding: var(--space-2xl) var(--space-md);
  }
  
  .impact-first {
    padding: var(--space-2xl);
  }
  
  .impact-headline {
    font-size: var(--font-size-2xl);
  }
  
  .project-info-grid,
  .methods-grid,
  .features-grid,
  .results-grid,
  .reflection-grid {
    grid-template-columns: 1fr;
  }
  
  .workflow-preview {
    flex-direction: column;
  }
  
  .workflow-arrow {
    transform: rotate(90deg);
  }
  
  .comparison-grid {
    grid-template-columns: 1fr;
  }
  
  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--font-size-3xl);
  }
  
  .stat-number-large {
    font-size: var(--font-size-5xl);
  }
  
  .result-metric {
    font-size: var(--font-size-3xl);
  }
  
  .metric-number {
    font-size: var(--font-size-4xl);
  }
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
  .navigation,
  .toc-container,
  .back-to-top,
  .mobile-menu,
  .reading-progress,
  .hamburger,
  .cta-footer {
    display: none !important;
  }
  
  .hero-banner {
    margin-top: 0;
    height: auto;
    min-height: auto;
    page-break-after: always;
  }
  
  .content-section {
    opacity: 1 !important;
    transform: none !important;
    page-break-inside: avoid;
  }
  
  body {
    background: white;
  }
}

/* =============================================
   CONTENT AUDIT SECTION
   ============================================= */
.content-audit-section {
  margin: var(--space-4xl) 0;
}

.audit-visuals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}

.audit-image-container {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.audit-image-container:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.audit-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  display: block;
}

.image-caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 0;
  line-height: 1.4;
}

/* Audit Summary Stats */
.audit-summary {
  margin-top: var(--space-3xl);
  padding: var(--space-3xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
}

.audit-summary h4 {
  text-align: center;
  margin-bottom: var(--space-2xl);
  font-size: var(--font-size-2xl);
}

.audit-stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
}

.audit-stat-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  min-width: 240px;
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.audit-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.audit-stat-card.highlight {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
}

.audit-stat-number {
  font-size: var(--font-size-6xl);
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-md);
}

.audit-stat-label {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.audit-stat-detail {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.audit-arrow {
  font-size: var(--font-size-4xl);
  color: var(--color-primary);
  font-weight: 700;
}

/* =============================================
   RESEARCH SYNTHESIS SECTION
   ============================================= */
.research-synthesis-section {
  margin: var(--space-4xl) 0;
}

/* Enhanced Pain Points with Quotes */
.pain-point-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.pain-point-icon {
  font-size: var(--font-size-4xl);
  flex-shrink: 0;
  line-height: 1;
}

.pain-point-header h4 {
  margin-bottom: 0;
  font-size: var(--font-size-xl);
}

.pain-point-content {
  margin-left: calc(var(--font-size-4xl) + var(--space-md));
}

.pain-point-quotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.user-quote {
  background: white;
  border-left: 3px solid var(--color-primary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  margin: 0;
  transition: all var(--transition-base);
}

.user-quote:hover {
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}

.user-quote p {
  font-style: italic;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.user-quote cite {
  font-style: normal;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-weight: 600;
}

.pain-point-insight {
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.pain-point-insight strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .audit-stats-grid {
    flex-direction: column;
  }
  
  .audit-arrow {
    transform: rotate(90deg);
  }
  
  .pain-point-content {
    margin-left: 0;
  }
  
  .pain-point-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================
   PROCESS MAPPING ARTIFACT
   ============================================= */
.process-mapping-artifact {
  margin: var(--space-4xl) 0;
  padding: var(--space-3xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
}

.process-mapping-artifact h4 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
  text-align: center;
}

.artifact-description {
  text-align: center;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3xl);
  font-size: var(--font-size-base);
}

/* Process Flow Container */
.process-flow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

/* Process Step Cards */
.process-step {
  width: 100%;
  max-width: 700px;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.process-step:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.process-step.pain-point-indicator {
  border-left: 4px solid var(--ys-danger);
}

.process-step-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.process-step-number {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: 800;
  flex-shrink: 0;
}

.process-step-info {
  flex: 1;
}

.process-step-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.process-step-owner {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.process-step-details p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.process-time {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.process-pain-point {
  background: var(--ys-paper-sub);
  border-left: 3px solid var(--ys-danger);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.process-pain-point strong {
  color: var(--ys-danger);
}

/* Process Arrow */
.process-arrow {
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  font-weight: 700;
  height: 40px;
  display: flex;
  align-items: center;
}

/* Total Time Summary */
.process-total-time {
  width: 100%;
  max-width: 700px;
  background: linear-gradient(135deg, var(--ys-ink-100) 0%, var(--ys-ink-100) 100%);
  color: white;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  margin-top: var(--space-2xl);
}

.total-time-label {
  font-size: var(--font-size-base);
  opacity: 0.9;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.total-time-value {
  font-size: var(--font-size-5xl);
  font-weight: 900;
  margin-bottom: var(--space-xs);
  line-height: 1;
}

.total-time-detail {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

/* Process Insights */
.process-insights {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  border: 2px solid var(--color-border-light);
}

.process-insights h4 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-xl);
  text-align: left;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.insight-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.insight-icon {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: var(--space-xs);
}

.insight-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.insight-item p {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--color-text-secondary);
}

.insight-item strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

/* Responsive Design */
@media (max-width: 768px) {
  .process-mapping-artifact {
    padding: var(--space-2xl) var(--space-lg);
  }
  
  .process-step {
    padding: var(--space-lg);
  }
  
  .process-step-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .process-arrow {
    height: 30px;
  }
  
  .total-time-value {
    font-size: var(--font-size-4xl);
  }
  
  .insights-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   CLICKABLE IMAGE LIGHTBOX
   ============================================= */
.clickable-image {
  position: relative;
  cursor: pointer;
}

.clickable-image:hover .audit-image {
  opacity: 0.8;
}

/* Lightbox Modal */
.image-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.image-lightbox.active {
  display: flex;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.lightbox-content {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  z-index: 10001;
  animation: fadeInUp 0.3s ease;
}

.lightbox-image {
  max-width: 100%;
  max-height: 95vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-3xl);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}

.lightbox-close:hover {
  background: var(--color-primary);
  color: white;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .lightbox-close {
    top: 10px;
    right: 10px;
  }
  
  .lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
  }
}

/* =============================================
   DESIGN PROCESS SECTION - COMPLETE STYLING
   ============================================= */

/* Process Artifact Section */
.process-artifact-section {
  margin-top: var(--space-2xl);
}

.process-artifact-section h4 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-xl);
  text-align: center;
}

/* Artifact Images Grid */
.artifact-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.artifact-image-container {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
  cursor: pointer;
}

.artifact-image-container:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.artifact-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--space-sm);
}

.artifact-caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 0;
}

/* IA Decision Summary */
.ia-decision-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  margin: var(--space-3xl) 0;
  padding: var(--space-2xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

.ia-stat {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  min-width: 200px;
  border: 2px solid var(--color-border-light);
}

.ia-stat.highlight {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
}

.ia-stat-number {
  font-size: var(--font-size-5xl);
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.ia-stat-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.ia-stat p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.ia-arrow {
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  font-weight: 700;
}

.ia-rationale {
  background: white;
  padding: var(--space-lg);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin-top: var(--space-xl);
}

/* Wireframes Grid */
.wireframes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}

.wireframe-container {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
  cursor: pointer;
}

.wireframe-container:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.wireframe-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border-light);
}

.wireframe-caption {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: 0;
}

/* Design Decisions */
.design-decisions {
  margin-top: var(--space-3xl);
  padding: var(--space-2xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
}

.design-decisions h4 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-xl);
}

.decision-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.decision-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: white;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}

.decision-icon {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: var(--space-xs);
}

.decision-item p {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* High-Fidelity Mockups Grid */
.hifi-mockups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-3xl) 0;
}

.hifi-container {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
  cursor: pointer;
}

.hifi-container:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.hifi-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.hifi-caption {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: 0;
}

/* Design Evolution */
.design-evolution {
  margin-top: var(--space-3xl);
  padding: var(--space-2xl);
  background: linear-gradient(135deg, var(--ys-paper-sub) 0%, var(--ys-paper-sub) 100%);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
}

.design-evolution h4 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-xl);
}

.evolution-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.evolution-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: white;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.evolution-label {
  background: var(--color-primary);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: var(--space-xs);
}

.evolution-item p {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  flex: 1;
}

/* Design Constraints Callout */
.design-constraints-callout {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-2xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  margin-top: var(--space-3xl);
}

.design-constraints-callout .callout-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.design-constraints-callout h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
}

.design-constraints-callout p {
  margin-bottom: 0;
  line-height: 1.6;
}

/* Critical Discovery Section - Black & White Theme */
.critical-discovery {
  background: var(--ys-paper);
  border: 2px solid var(--ys-ink-100);
  border-radius: 8px;
  padding: clamp(2rem, 5vw, 3rem);
  margin: 3rem 0;
}

/* Header */
.discovery-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ys-ink-10);
}

.discovery-icon {
  color: var(--ys-ink-100);
  flex-shrink: 0;
}

.discovery-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.discovery-header h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--ys-ink-100);
  margin: 0;
  line-height: 1.3;
}

/* Content */
.discovery-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.lead-paragraph {
  font-size: 1.125rem;
  color: var(--ys-ink-100);
  margin: 0;
}

/* Quote */
.discovery-quote {
  border-left: 4px solid var(--ys-ink-100);
  background: var(--ys-paper-sub);
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  margin: 0;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--ys-ink-100);
}

/* Timeline */
.discovery-timeline {
  position: relative;
  padding-left: 3rem;
  margin: 1rem 0;
}

.discovery-timeline::before {
  content: '';
  position: absolute;
  left: 1.125rem;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 2px;
  background: var(--ys-ink-100);
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -3rem;
  top: 1.5rem; /* Changed from 0 to 0.125rem */
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--ys-ink-100);
  border-radius: 50%;
  background: var(--ys-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ys-ink-100);
  z-index: 1;
}

/* Critical item (step 3) */
.timeline-item.critical .timeline-marker {
  background: var(--ys-ink-100);
  color: var(--ys-paper);
}

.timeline-item.critical .timeline-content {
  background: var(--ys-paper-sub);
  border: 2px solid var(--ys-ink-100);
  padding: 1.5rem;
  border-radius: 6px;
}

.timeline-content h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ys-ink-100);
  margin: 0 0 0.75rem 0;
}

.timeline-content p {
  margin: 0;
  color: var(--ys-ink-100);
  line-height: 1.6;
}

/* Impact Section */
.discovery-impact {
  background: var(--ys-paper-sub);
  border: 1px solid var(--ys-ink-10);
  border-radius: 6px;
  padding: 2rem;
}

.discovery-impact h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ys-ink-100);
  margin: 0 0 1rem 0;
}

.discovery-impact ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.discovery-impact li {
  position: relative;
  padding-left: 2rem;
  color: var(--ys-ink-100);
  line-height: 1.6;
}

.discovery-impact li::before {
  content: '→';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--ys-ink-100);
}

/* Responsive */
@media (max-width: 768px) {
  .discovery-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .discovery-icon svg {
    width: 48px;
    height: 48px;
  }
  
  .discovery-timeline {
    padding-left: 2.5rem;
  }
  
  .timeline-marker {
    left: -2.5rem;
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
  }
  
  .discovery-timeline::before {
    left: 0.875rem;
  }
}




/* =============================================
   TESTING SECTION - AUTHENTIC UAT
   ============================================= */

/* Findings Grid */
.finding {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.finding:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.finding.positive {
  border-left: 4px solid var(--color-primary);
}

.finding.neutral {
  border-left: 4px solid var(--color-primary);
}

.finding.issue {
  border-left: 4px solid var(--ys-ink-100);
}

.finding.critical {
  border-left: 4px solid var(--ys-danger);
}

.finding-icon {
  margin-bottom: var(--space-md);
}

.finding.positive .finding-icon {
  color: var(--color-primary);
}

.finding.neutral .finding-icon {
  color: var(--color-primary);
}

.finding.issue .finding-icon {
  color: var(--ys-ink-100);
}

.finding.critical .finding-icon {
  color: var(--ys-danger);
}

.finding h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

.finding p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

.finding-detail {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.finding-detail strong {
  color: var(--color-text-primary);
  display: block;
  margin-bottom: var(--space-xs);
}

/* Response Section */
.response-section {
  margin-top: var(--space-4xl);
  padding: var(--space-3xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
}

.response-section h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-lg);
}

.pivot-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-2xl) 0;
}

.pivot-card {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.pivot-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pivot-card h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.pivot-card p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.pivot-detail {
  background: var(--color-bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.pivot-detail strong {
  color: var(--color-text-primary);
}

.transition-text {
  font-size: var(--font-size-lg);
  text-align: center;
  margin-top: var(--space-2xl);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .discovery-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .discovery-timeline {
    padding-left: 0;
  }
  
  .timeline-item {
    padding-left: 50px;
  }
  
  .timeline-marker {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
  }
  
  .discovery-timeline::before {
    left: 15px;
  }
  
  .pivot-preview {
    grid-template-columns: 1fr;
  }
}
.workflow-details img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ys-ink-10);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: var(--space-lg);
}

/* ================================
   PROTOTYPE
   ================================ */
/* PROTOTYPE SECTION - Exact from live site */
    .prototype-section {
      background: var(--ys-paper-sub);
      border-radius: 12px;
      padding: 2rem;
      margin-bottom: 3rem;
      border: 1px solid var(--ys-ink-10);
    }
    
    .prototype-container {
      position: relative;
      width: 100%;
      max-width: 1440px; /* Don't exceed original width */
      height: 0;
      padding-bottom: 75%;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      margin: 0 auto; /* Center the container */
    }
    
    .prototype-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 12px;
    }

/* ============================================ */
/* PHASE 03 TRANSFORMATION SECTION STYLES */
/* Add these styles to your existing CSS file */
/* ============================================ */

/* Innovation Highlight Section */
.innovation-highlight-section {
  background: linear-gradient(135deg, var(--ys-accent-soft) 0%, var(--ys-paper) 100%);
  border: 2px solid var(--ys-accent-soft);
  border-radius: 16px;
  padding: 48px;
  margin: 60px 0;
  position: relative;
}

.innovation-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ys-ink-100);
  color: white;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}

.innovation-highlight-section h4 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ys-ink-100);
  margin-bottom: 32px;
}

.innovation-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.innovation-explanation h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ys-ink-100);
  margin-bottom: 16px;
  margin-top: 32px;
}

.innovation-explanation h5:first-of-type {
  margin-top: 0;
}

.innovation-problem-box {
  background: var(--ys-paper-sub);
  border-left: 4px solid var(--ys-ink-100);
  padding: 24px;
  margin-top: 24px;
  border-radius: 8px;
}

.innovation-problem-box strong {
  display: block;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ys-ink-100);
}

.innovation-problem-box ul {
  margin: 0;
  padding-left: 20px;
}

.innovation-problem-box li {
  margin-bottom: 8px;
  color: var(--ys-ink-80);
}

.innovation-image-container {
  position: relative;
}

.innovation-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--ys-ink-10);
}

.innovation-caption {
  text-align: center;
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--ys-ink-60);
  font-style: italic;
}

.innovation-solution {
  margin-top: 48px;
}

.innovation-solution h5 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ys-ink-100);
  margin-bottom: 32px;
}

.innovation-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.innovation-feature {
  background: white;
  padding: 32px;
  border-radius: 12px;
  border: 2px solid var(--ys-accent-soft);
  transition: all 0.3s ease;
}

.innovation-feature:hover {
  border-color: var(--ys-ink-100);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.feature-icon {
  width: 56px;
  height: 56px;
  background: var(--ys-ink-100);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.feature-icon svg {
  stroke: white;
}

.innovation-feature h6 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ys-ink-100);
  margin-bottom: 12px;
}

.innovation-feature p {
  font-size: 0.9375rem;
  color: var(--ys-ink-60);
  line-height: 1.6;
  margin: 0;
}

.innovation-impact {
  background: var(--ys-paper-sub);
  border-left: 4px solid var(--ys-ink-80);
  padding: 24px;
  border-radius: 8px;
}

.innovation-impact h5 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ys-ink-100);
  margin-bottom: 12px;
}

.innovation-impact p {
  color: var(--ys-ink-80);
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* Transformation Divider */
.transformation-divider {
  text-align: center;
  margin: 80px 0 60px 0;
  position: relative;
}

.transformation-divider::before,
.transformation-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ys-ink-10), transparent);
}

.transformation-divider::before {
  left: 0;
}

.transformation-divider::after {
  right: 0;
}

.transformation-divider span {
  background: white;
  padding: 0 32px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ys-ink-100);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Before/After Comparison Section */
.before-after-comparison {
  background: white;
  border: 2px solid var(--ys-ink-10);
  border-radius: 16px;
  padding: 48px;
  margin-bottom: 60px;
  position: relative;
}

.comparison-header {
  margin-bottom: 40px;
}

.comparison-header h4 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ys-ink-100);
  margin-bottom: 16px;
}

.consolidation-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ys-paper-sub);
  color: var(--ys-ink-100);
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 0.875rem;
  font-weight: 600;
}

.consolidation-badge svg {
  stroke: var(--ys-ink-100);
}

/* Vertical Stack Layout - Labels */
.comparison-label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 20px;
  border-radius: 8px;
  text-align: center;
  display: block;
  width: fit-content;
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 24px;
  margin-top: 32px;
  position: relative;
  z-index: 10;
}

.comparison-label:first-of-type {
  margin-top: 0;
}

.comparison-label.before {
  background: var(--ys-paper-sub);
  color: var(--ys-ink-100);
  border: 2px solid var(--ys-ink-100);
}

.comparison-label.after {
  background: var(--ys-paper-sub);
  color: var(--ys-ink-100);
  border: 2px solid var(--ys-ink-80);
}

/* Before Images - Horizontal Row Layout (for 2-3 images) */
.before-images-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.before-image-item {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.before-image-item:hover {
  transform: translateY(-4px);
}

.before-image-item .comparison-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--ys-ink-10);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: block;
  margin-bottom: 12px;
}

.before-image-item .page-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ys-ink-60);
  text-align: center;
}

/* Before Single Image Layout */
.before-image-single {
  position: relative;
  cursor: pointer;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.3s ease;
  display: block;
}

.before-image-single:hover {
  transform: translateY(-4px);
}

.before-image-single .comparison-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--ys-ink-10);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: block;
}

/* Down Arrow */
.comparison-arrow-down {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.comparison-arrow-down svg {
  stroke: var(--ys-ink-100);
  opacity: 0.4;
}

/* After Image Container */
.after-image-container {
  position: relative;
  cursor: pointer;
  margin-bottom: 32px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.3s ease;
  display: block;
}

.after-image-container:hover {
  transform: translateY(-4px);
}

.after-image-container .comparison-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--ys-ink-10);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: block;
}

/* Clickable Image General Styling */
.clickable-image {
  position: relative;
  cursor: pointer;
  display: block;
}

/* Old Comparison Grid - Keep for backward compatibility but override */
.comparison-grid {
  display: block;
}

.comparison-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--ys-ink-10);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Stacked Images (for consolidation examples) */
.before-images-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stacked-image-item {
  position: relative;
}

.page-label {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ys-ink-60);
  background: var(--ys-paper-sub);
  padding: 4px 12px;
  border-radius: 4px;
}

/* Comparison Arrow */
.comparison-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.comparison-arrow svg {
  stroke: var(--ys-ink-100);
  opacity: 0.4;
}

/* Pain Points & Improvements Boxes */
.pain-points-box,
.improvements-box {
  padding: 24px;
  border-radius: 8px;
  border: 2px solid;
}

.pain-points-box {
  background: var(--ys-paper-sub);
  border-color: var(--ys-ink-100);
}

.improvements-box {
  background: var(--ys-paper-sub);
  border-color: var(--ys-ink-80);
}

.pain-points-box h5,
.improvements-box h5 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  margin-top: 0;
}

.pain-points-box h5 {
  color: var(--ys-ink-100);
}

.improvements-box h5 {
  color: var(--ys-ink-100);
}

.pain-points-box ul,
.improvements-box ul {
  margin: 0;
  padding-left: 20px;
}

.pain-points-box li {
  margin-bottom: 12px;
  color: var(--ys-ink-80);
}

.improvements-box li {
  margin-bottom: 12px;
  color: var(--ys-ink-80);
}

.pain-points-box li strong,
.improvements-box li strong {
  font-weight: 700;
}

/* Design Rationale Box */
.design-rationale-box {
  background: var(--ys-paper-sub);
  border: 2px solid var(--ys-ink-10);
  border-radius: 12px;
  padding: 32px;
  margin-top: 40px;
}

.design-rationale-box h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ys-ink-100);
  margin-bottom: 16px;
  margin-top: 0;
}

.design-rationale-box p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ys-ink-80);
  margin-bottom: 16px;
}

.design-rationale-box p:last-of-type {
  margin-bottom: 0;
}

.design-rationale-box strong {
  font-weight: 700;
  color: var(--ys-ink-100);
}

/* Rationale Metrics */
.rationale-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 2px solid var(--ys-ink-10);
}

.rationale-metric {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ys-ink-100);
  line-height: 1;
}

.metric-label {
  font-size: 0.875rem;
  color: var(--ys-ink-60);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hi-Fi Overview Section */
.hifi-overview-section {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 2px solid var(--ys-ink-10);
}

.hifi-overview-section h4 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ys-ink-100);
  margin-bottom: 16px;
}

.hifi-overview-section > p {
  font-size: 1.0625rem;
  color: var(--ys-ink-60);
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .innovation-content {
    grid-template-columns: 1fr;
  }
  
  .innovation-features-grid {
    grid-template-columns: 1fr;
  }
  
  .before-images-row {
    grid-template-columns: 1fr;
  }
  
  .rationale-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .innovation-highlight-section,
  .before-after-comparison {
    padding: 32px 24px;
  }
  
  .innovation-features-grid {
    gap: 24px;
  }
  
  .innovation-feature {
    padding: 24px;
  }
  
  .before-images-row {
    gap: 16px;
  }
  
  .design-rationale-box {
    padding: 24px;
  }
  
  .comparison-arrow-down {
    padding: 24px 0;
  }
  
  .comparison-arrow-down svg {
    width: 48px;
    height: 48px;
  }
  
  .hifi-overview-section {
    margin-top: 60px;
    padding-top: 40px;
  }
}

/* Print Styles */
@media print {
  .innovation-highlight-section,
  .before-after-comparison {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  .comparison-arrow-down svg {
    stroke: var(--ys-ink-100);
  }
  
  .image-overlay {
    display: none;
  }
}
/* =============================================
   NEW DESIGN PATTERNS — homepage-aligned overhaul.
   These supersede the older card-heavy, side-stroke patterns
   above. Used by the redesigned case study sections.
   ============================================= */

/* SPOTLIGHT — full-bleed dark surface for the case study's biggest
   moment. Mirrors homepage Featured Portfolio AI: ink-100 bg, white
   text, accent dot eyebrow, big display title + stat metrics. No
   card chrome, no side strokes, no boxed numbers. */
/* Full-bleed via negative inline margins ONLY — no width/left/transform.
   The old left:50% + translateX(-50%) technique broke when the section
   also carried .reveal: .reveal.is-revealed sets transform:none, which
   wiped the -50% shift and left the whole band offset right by half the
   viewport. Negative margins don't touch transform, so the reveal
   animation composes safely. */
.spotlight {
  background: var(--ys-ink-100);
  color: var(--ys-paper);
  padding: 6rem 3rem;
  margin: 6rem calc(50% - 50vw);
}
.spotlight-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.spotlight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ys-ink-40);
  margin-bottom: 1.5rem;
}
.spotlight-eyebrow::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ys-accent);
  display: inline-block;
}
.spotlight-title {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  color: var(--ys-paper);
}
.spotlight-description {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0;
}
.spotlight-metrics {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.spotlight-metric .number {
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ys-paper);
  display: block;
}
.spotlight-metric .label {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.5rem;
  display: block;
  max-width: 42ch;
}
@media (max-width: 900px) {
  .spotlight {
    padding: 4rem 1.5rem;
  }
  .spotlight-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* DISPLAY STATEMENT — editorial large text, no box. Used for big
   reflection / pull statements. Homepage approach-statement
   equivalent. */
.display-statement {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ys-ink-100);
  margin: 0 0 1.5rem;
  max-width: 28ch;
}
.display-attribution {
  font-size: 0.9375rem;
  color: var(--ys-ink-60);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}
.display-attribution cite { font-style: normal; }

/* TESTIMONIAL STACK — editorial, no card chrome, no side strokes.
   Italic large blockquote + uppercase cite + role. Stacked
   vertically in narrow column for an editorial feel. */
.testimonial-stack {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  margin: 4rem 0;
  max-width: 720px;
}
.testimonial blockquote {
  font-size: 1.375rem;
  line-height: 1.55;
  color: var(--ys-ink-100);
  font-style: italic;
  font-weight: 500;
  margin: 0 0 1.25rem;
  max-width: none;
  letter-spacing: -0.01em;
}
.testimonial cite {
  display: block;
  font-size: 0.75rem;
  color: var(--ys-ink-100);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.testimonial .testimonial-role {
  display: block;
  font-size: 0.875rem;
  color: var(--ys-ink-60);
  font-weight: 400;
  margin-top: 0.375rem;
  text-transform: none;
  letter-spacing: 0;
}

/* PAIN POINT LIST — editorial numbered list, replaces the prior
   boxed pain-point cards. Each row has a hairline rule, tabular
   number, headline + insight stacked. No icons, no card chrome. */
.pain-point-list {
  margin: 3rem 0;
  padding: 0;
  list-style: none;
  counter-reset: ppl;
}
.pain-point-list > li {
  counter-increment: ppl;
  padding: 2rem 0;
  border-top: 1px solid var(--ys-ink-10);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
.pain-point-list > li:last-child {
  border-bottom: 1px solid var(--ys-ink-10);
}
.pain-point-list > li::before {
  content: counter(ppl, decimal-leading-zero);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ys-ink-40);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pain-point-list .pain-headline {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ys-ink-100);
  margin: 0 0 0.5rem;
  display: block;
}
.pain-point-list .pain-insight {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ys-ink-60);
  margin: 0;
  max-width: 60ch;
}

/* REFLECTION — clean editorial section, no card chrome.
   Pull-statement (.display-statement) + supporting paragraphs. */
.reflection {
  margin: 6rem 0 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--ys-ink-10);
}
.reflection h4,
.reflection .section-label {
  color: var(--ys-ink-60);
  margin-bottom: 2rem;
}
.reflection p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ys-ink-80);
  max-width: 68ch;
  margin-bottom: 1.5rem;
}

/* =============================================
   COMPLETE OVERHAUL — homepage-aligned visual reset.
   Cascades over all earlier definitions. Kills side strokes
   site-wide, flattens card chrome, sharpens to homepage feel.
   Use !important deliberately because there are 30+ side strokes
   and dozens of card patterns defined in this 4400-line file;
   targeted overrides require less surgery than rewriting each
   original rule.
   ============================================= */

/* KILL ALL SIDE STROKES — every component */
.callout-box,
.callout-box.problem-statement,
.callout-box.warning,
.callout-box.success,
.callout-box.crisis-box,
.user-quote,
.discovery-quote,
.pain-point,
.decision-item,
.evolution-item,
.improvement-item,
.insight-item,
.principle-card,
.strategy-card,
.process-step,
.pivot-card,
.design-rationale-box,
.improvements-box,
.innovation-problem-box,
.pain-points-box,
.process-pain-point,
.finding,
.rationale-metric,
.metric-card,
.result-card,
.timeline-item,
.toc-link {
  border-left: none !important;
}

/* CALLOUT BOXES — quiet editorial block, no icon, no side stroke,
   no heavy padding/radius drama. Just paper-sub + hairline. */
.callout-box {
  display: block !important;
  background: var(--ys-paper-sub) !important;
  border: 1px solid var(--ys-ink-10) !important;
  padding: 2.5rem !important;
  border-radius: 12px !important;
  margin: 3rem 0 !important;
}
.callout-box.crisis-box,
.callout-box.warning {
  background: var(--ys-paper-sub) !important;
}
.callout-icon { display: none !important; }
.callout-content h3 {
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.01em !important;
  color: var(--ys-ink-100) !important;
}
.callout-content p {
  color: var(--ys-ink-80) !important;
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
  max-width: none !important;
}

/* USER + DISCOVERY QUOTES — flat italic, no boxes, leading typographic quote mark */
.user-quote,
.discovery-quote {
  background: transparent !important;
  border: none !important;
  padding: 0 0 0 1.5rem !important;
  margin: 1.5rem 0 !important;
  font-style: italic;
  color: var(--ys-ink-80);
  position: relative;
}
.user-quote::before,
.discovery-quote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -0.25rem;
  font-size: 1.75rem;
  color: var(--ys-ink-40);
  line-height: 1;
  font-family: Georgia, serif;
}
.user-quote p,
.discovery-quote p {
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0.5rem !important;
  color: var(--ys-ink-80) !important;
  max-width: none !important;
}
.user-quote cite,
.discovery-quote cite {
  font-style: normal !important;
  font-size: 0.8125rem !important;
  color: var(--ys-ink-60) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* INFO CARDS (project info grid) — flat editorial separators, no icons */
.info-card {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  border-radius: 0 !important;
  padding: 1.5rem 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.info-card:hover {
  background: transparent !important;
  border-color: var(--ys-ink-10) !important;
  border-top-color: var(--ys-ink-20) !important;
  box-shadow: none !important;
  transform: none !important;
}
.info-icon { display: none !important; }
.info-label {
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ys-ink-40) !important;
  margin-bottom: 0.375rem !important;
  font-weight: 600 !important;
}
.info-value {
  font-size: 0.9375rem !important;
  color: var(--ys-ink-100) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.project-info-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  border-bottom: 1px solid var(--ys-ink-10) !important;
}

/* TIMELINE — flat editorial vertical list. Drop heavy box treatments,
   keep the dot + line structural element. */
.timeline-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1.5rem 0 !important;
  transform: none !important;
}
.timeline-dot {
  border: 2px solid var(--ys-ink-100) !important;
  background: var(--ys-paper) !important;
  box-shadow: none !important;
  width: 40px !important;
  height: 40px !important;
}
.timeline-dot.crisis {
  border-color: var(--ys-ink-60) !important;
  animation: none !important;
}
.timeline-content {
  background: transparent !important;
  border: none !important;
  padding: 0 1.5rem !important;
  box-shadow: none !important;
}
.timeline-phase {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--ys-ink-100) !important;
  letter-spacing: -0.01em !important;
}
.timeline-duration {
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ys-ink-40) !important;
  font-weight: 600 !important;
}
.timeline-details {
  color: var(--ys-ink-60) !important;
  margin-top: 0.5rem !important;
}

/* DECISION / EVOLUTION / IMPROVEMENT / INSIGHT / PRINCIPLE / STRATEGY /
   PROCESS-STEP / METHOD / RESULT / FINDING / PIVOT cards — all flatten
   to editorial separator rows (top hairline + clean typography). */
.decision-item,
.evolution-item,
.improvement-item,
.insight-item,
.pain-point,
.principle-card,
.strategy-card,
.pivot-card,
.process-step,
.finding,
.method-card,
.result-card,
.process-pain-point {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  border-radius: 0 !important;
  padding: 1.75rem 0 !important;
  box-shadow: none !important;
  transform: none !important;
  margin: 0 !important;
}
.decision-icon,
.improvement-icon,
.finding-icon,
.method-icon,
.principle-icon,
.result-icon,
.pain-point-icon,
.process-step-number {
  display: none !important;
}
.decision-list,
.research-methods,
.methods-grid,
.results-grid,
.findings-grid,
.improvements-list {
  display: block !important;
  grid-template-columns: none !important;
  border-bottom: 1px solid var(--ys-ink-10);
  margin: 2rem 0 !important;
}

/* RATIONALE / IMPROVEMENTS / INNOVATION / PAIN-POINTS / IA-DECISION
   summary boxes — quieter paper-sub bg, hairline border, no stroke */
.design-rationale-box,
.improvements-box,
.innovation-problem-box,
.pain-points-box,
.ia-decision-summary {
  background: var(--ys-paper-sub) !important;
  border: 1px solid var(--ys-ink-10) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  margin: 2rem 0 !important;
}

/* RATIONALE METRICS — drop boxed treatment, use display typography */
.rationale-metrics {
  display: flex !important;
  gap: 3rem !important;
  margin: 2rem 0 !important;
}
.rationale-metric {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.metric-value,
.rationale-metric .metric-value {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--ys-ink-100) !important;
  line-height: 1 !important;
  display: block !important;
}
.metric-label,
.rationale-metric .metric-label {
  font-size: 0.875rem !important;
  color: var(--ys-ink-60) !important;
  margin-top: 0.5rem !important;
  font-weight: 500 !important;
}

/* BEFORE/AFTER COMPARISON — flatten */
.before-after-comparison {
  background: transparent !important;
  border: 1px solid var(--ys-ink-10) !important;
  border-radius: 12px !important;
  padding: 2.5rem !important;
}
.before-image-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.comparison-image {
  border-radius: 8px !important;
  border: 1px solid var(--ys-ink-10) !important;
  box-shadow: none !important;
}

/* SECTION DIVIDERS — quieter hairlines */
.section-divider,
.crisis-divider {
  background: var(--ys-ink-10) !important;
  height: 1px !important;
  margin: 5rem 0 !important;
  border: none !important;
  background-image: none !important;
}

/* The OLD impact-first block is now SUPERSEDED by the .spotlight
   section markup. Hide any remaining .impact-first instances so they
   don't double-render. */
.impact-first { display: none !important; }

/* TOC sidebar — quieter, no left-rail backdrop, just text links */
.toc-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.toc-link {
  color: var(--ys-ink-60) !important;
  border-left: 2px solid transparent !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}
.toc-link.active {
  color: var(--ys-ink-100) !important;
  border-left-color: var(--ys-ink-100) !important;
  font-weight: 600 !important;
}

/* BACK TO TOP — match homepage, plain ink-100 4px square */
.back-to-top {
  background: var(--ys-ink-100) !important;
  color: var(--ys-paper) !important;
  border-radius: 4px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.back-to-top:hover {
  background: var(--ys-ink-80) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
}

/* IMAGE-LIGHTBOX backdrop — match homepage darker overlay */
.lightbox-overlay {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* =============================================
   COMPLETE OVERHAUL — PHASE 2
   Design Process / Discovery / Testing / Pivot / Results sections.
   The Phase 1 overhaul missed many patterns specific to these
   later sections. This block flattens the remaining card/box/icon
   chrome so the entire page reads as continuous editorial content.
   ============================================= */

/* Wipe backgrounds + borders + chrome on all remaining boxy containers */
.critical-discovery-section,
.discovery-header,
.discovery-content,
.discovery-impact,
.design-evolution,
.feature-showcase,
.feature-visual,
.powerapp-constraints,
.process-phase,
.phase-header,
.pivot-preview,
.results-grid,
.results-stat-large,
.testing-overview,
.testing-stat,
.testing-details,
.response-section,
.prototype-section,
.next-project-cta {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Hide all small decorative icons site-wide */
.discovery-icon,
.feature-icon,
.result-icon,
.stat-icon,
.phase-number,
.consolidation-badge {
  display: none !important;
}

/* CRITICAL DISCOVERY block — paper-sub bg, hairline, 16px radius.
   The "we discovered we'd designed for the wrong users" moment is
   important enough to be a contained block, but no side strokes. */
.critical-discovery {
  background: var(--ys-paper-sub) !important;
  border: 1px solid var(--ys-ink-10) !important;
  border-radius: 16px !important;
  padding: 3rem !important;
  margin: 3rem 0 !important;
}
.critical-discovery h3 {
  font-size: 1.75rem !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 1.5rem !important;
}
.critical-discovery p {
  color: var(--ys-ink-80) !important;
}

/* DISCOVERY TIMELINE inside critical-discovery — editorial rows */
.discovery-timeline {
  padding: 0 !important;
  margin: 2rem 0 !important;
}
.discovery-timeline .timeline-item {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  padding: 1.5rem 0 !important;
}
.discovery-timeline .timeline-item.critical {
  border-top-color: var(--ys-ink-100) !important;
}
.discovery-timeline .timeline-marker {
  display: inline-block !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  color: var(--ys-ink-40) !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.discovery-timeline .timeline-content h4 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--ys-ink-100) !important;
  margin: 0 0 0.5rem !important;
  letter-spacing: -0.01em !important;
}
.discovery-timeline .timeline-content p {
  color: var(--ys-ink-80) !important;
  margin: 0 !important;
  max-width: none !important;
}

/* RESULTS-HERO — quiet paper-sub bg with display typography inside */
.results-hero {
  background: var(--ys-paper-sub) !important;
  border-radius: 16px !important;
  padding: 3rem !important;
  margin: 3rem 0 !important;
  border: 1px solid var(--ys-ink-10) !important;
}

/* Large stat displays — raw display typography, no boxes */
.results-stat-large,
.stat-number-large,
.stat-value {
  font-size: 4rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: var(--ys-ink-100) !important;
  line-height: 1 !important;
  display: block !important;
}
.stat-label-large,
.stat-label {
  font-size: 0.875rem !important;
  color: var(--ys-ink-60) !important;
  margin-top: 0.5rem !important;
  font-weight: 500 !important;
  display: block !important;
}
.result-detail {
  color: var(--ys-ink-60) !important;
  font-size: 0.9375rem !important;
  margin-top: 0.5rem !important;
}
.result-label {
  font-size: 0.875rem !important;
  color: var(--ys-ink-60) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
}

/* Transformation divider, transition-text */
.transformation-divider,
.transition-text {
  background: var(--ys-ink-10) !important;
  height: 1px !important;
  margin: 4rem 0 !important;
}
.transition-text {
  background: transparent !important;
  height: auto !important;
  color: var(--ys-ink-60) !important;
  font-style: italic !important;
  text-align: center !important;
  margin: 3rem auto !important;
}

/* Process phase + phase-header — editorial section, no chrome */
.process-phase {
  margin: 3rem 0 !important;
  padding: 1.5rem 0 !important;
  border-top: 1px solid var(--ys-ink-10) !important;
}
.phase-header {
  margin-bottom: 1.5rem !important;
}

/* Feature showcase + powerapp-constraints — flat sections */
.feature-showcase,
.powerapp-constraints {
  margin: 4rem 0 !important;
}

/* Prototype section — clean container, no chrome */
.prototype-section {
  margin: 3rem 0 !important;
  padding: 0 !important;
}
.prototype-container {
  border-radius: 12px !important;
  border: 1px solid var(--ys-ink-10) !important;
  background: var(--ys-paper-sub) !important;
  overflow: hidden !important;
}

/* Next-project-cta + back-link-prominent — plain editorial link */
.next-project-cta {
  margin: 4rem 0 2rem !important;
  text-align: left !important;
  padding: 0 !important;
}
.back-link-prominent {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--ys-ink-100) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.2s ease !important;
  display: inline-block !important;
  /* Fully neutralize the old pill treatment — the partial override
     kept the pill's large top padding, radius, and shadow, which left
     the label sitting low inside a ghost pill. */
  padding: 0 0 2px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.back-link-prominent:hover {
  border-bottom-color: var(--ys-ink-100) !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Evolution items (Design Evolution) — already in Phase 1 list but
   re-asserting because case-study-enhanced.css has nested rules */
.evolution-list {
  display: block !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  border-bottom: 1px solid var(--ys-ink-10) !important;
  margin: 2rem 0 !important;
}
.evolution-item {
  padding: 1.5rem 0 !important;
  border-top: 1px solid var(--ys-ink-10) !important;
}
.evolution-item:first-child { border-top: none !important; }
.evolution-label {
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ys-ink-40) !important;
  font-weight: 600 !important;
}

/* Strategy cards (Ideation/Pivot strategies) */
.strategy-cards {
  display: block !important;
  grid-template-columns: none !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  border-bottom: 1px solid var(--ys-ink-10) !important;
  margin: 2rem 0 !important;
}
.strategy-card {
  padding: 1.75rem 0 !important;
  border-top: 1px solid var(--ys-ink-10) !important;
}
.strategy-card:first-child { border-top: none !important; }
.strategy-number {
  display: inline-block !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  color: var(--ys-ink-40) !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
.strategy-content h3,
.strategy-content h4 {
  font-size: 1.25rem !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.5rem !important;
}

/* Testimonial section already converted in earlier markup edit */
/* Prototype hint */
.prototype-hint {
  font-size: 0.875rem !important;
  color: var(--ys-ink-60) !important;
  font-style: italic !important;
  margin-bottom: 1rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* =============================================
   COMPLETE OVERHAUL — PHASE 3
   Data visualization + meta strip + feature image
   container patterns for the redesigned main content.
   ============================================= */

/* DATA VIZ FIGURE — inline SVG charts framed by hairlines */
.data-viz {
  margin: 3.5rem 0 !important;
  padding: 2.5rem 0 !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  border-bottom: 1px solid var(--ys-ink-10) !important;
  background: transparent !important;
}
.data-viz svg {
  width: 100% !important;
  max-width: 800px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}
.data-viz figcaption {
  font-size: 0.875rem !important;
  color: var(--ys-ink-60) !important;
  text-align: center !important;
  margin-top: 1.5rem !important;
  font-style: italic !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.5 !important;
}

/* META STRIP — inline role/timeline/team replacing the project info cards */
.meta-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2.5rem !important;
  padding: 1.5rem 0 !important;
  margin: 2.5rem 0 4rem !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  border-bottom: 1px solid var(--ys-ink-10) !important;
  font-size: 0.9375rem !important;
  color: var(--ys-ink-60) !important;
}
.meta-strip strong {
  color: var(--ys-ink-100) !important;
  font-weight: 600 !important;
  margin-right: 0.5rem !important;
}

/* FEATURE IMAGE wrapper */
.feature-image {
  margin: 3rem 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--ys-ink-10) !important;
}
.feature-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* CASE STUDY CONTAINER — slightly wider so 800px SVGs render nicely */
.case-study-container {
  max-width: 880px !important;
  padding: 4rem 1.5rem !important;
}

/* AUDIT COMPARISON — two PDF screenshots side by side.
   The 40-page manual on the left, the 7 highlighted pages on the
   right. Visual evidence of the pattern-finding work. Stacked on
   narrow viewports. */
.audit-comparison {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
  margin: 3rem 0 !important;
  align-items: stretch !important;
}
.audit-comparison figure {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.audit-comparison img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px !important;
  border: 1px solid var(--ys-ink-10) !important;
  background: var(--ys-paper-sub) !important;
}
.audit-comparison figcaption {
  font-size: 0.875rem !important;
  color: var(--ys-ink-60) !important;
  margin-top: 1rem !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  text-align: left !important;
  max-width: none !important;
}
.audit-comparison .audit-label {
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ys-ink-40) !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}
@media (max-width: 768px) {
  .audit-comparison {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

/* SIMPLIFICATION SHOWCASE — interactive toggle between two PDF
   screenshots. View 1: all 40 pages in color (the raw manual).
   View 2: same layout, but only the 7 essential pages remain
   highlighted; the rest dim to B&W. Toggle uses the signature
   asymmetric opacity timing — fast reveal (380ms ease-out) on the
   appearing image, slow fade (580ms easeInOutCubic) on the
   disappearing one. */
.simplification-showcase {
  margin: 3.5rem 0 !important;
  padding: 2.5rem 0 !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  border-bottom: 1px solid var(--ys-ink-10) !important;
}
.showcase-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1.75rem !important;
}
.showcase-label {
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ys-ink-40) !important;
  font-weight: 600 !important;
}
.showcase-controls {
  display: inline-flex !important;
  background: var(--ys-paper-sub) !important;
  border: 1px solid var(--ys-ink-10) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  font-family: inherit !important;
}
.showcase-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--ys-ink-60) !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  transition: background 380ms cubic-bezier(0.16, 1, 0.3, 1),
              color 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.showcase-toggle:hover {
  color: var(--ys-ink-100) !important;
}
.showcase-toggle.is-active {
  background: var(--ys-paper) !important;
  color: var(--ys-ink-100) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.showcase-toggle:focus-visible {
  outline: none !important;
  box-shadow: var(--ys-focus-ring) !important;
}
.showcase-canvas {
  position: relative !important;
  width: 100% !important;
  background: var(--ys-paper-sub) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--ys-ink-10) !important;
}
.showcase-canvas img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
}
.showcase-image-essential {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  /* Slow fade-out direction (when going back to "all") */
  transition: opacity 580ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}
.showcase-image-all {
  position: relative !important;
  opacity: 1 !important;
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.showcase-canvas[data-view="essential"] .showcase-image-all {
  opacity: 0 !important;
  /* Slow fade-out when becoming hidden */
  transition: opacity 580ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}
.showcase-canvas[data-view="essential"] .showcase-image-essential {
  opacity: 1 !important;
  /* Fast reveal when becoming visible (signature pattern) */
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.showcase-summary {
  margin-top: 1.5rem !important;
  font-size: 0.9375rem !important;
  color: var(--ys-ink-60) !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  max-width: 720px !important;
}
@media (max-width: 600px) {
  .showcase-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .showcase-controls {
    width: 100% !important;
  }
  .showcase-toggle {
    flex: 1 !important;
    text-align: center !important;
  }
}

/* SIMPLIFICATION SHOWCASE — HOVER VARIANT.
   Replaces the prior tab-based toggle. Heuristics applied:
   - NN/g #1 Visibility of System Status: tooltip teaches the affordance
   - NN/g #6 Recognition over Recall: tooltip visible until first interaction
   - NN/g #8 Aesthetic & Minimalist: tooltip fades after teach
   - Hick's Law: 1 interaction beats 2 buttons
   - Fitts's Law: entire image is the hover target
   - Doherty: 380ms ease-out reveal = sub-400ms feedback
   - Jakob's Law: hover convention on desktop, tap fallback on touch
   ============================================= */

/* Header simplifies — no more tab controls. Just the audit label. */
.simplification-showcase .showcase-header {
  margin-bottom: 1.25rem !important;
}

/* Canvas is the interactive target — large hover area (Fitts's Law) */
.showcase-canvas {
  cursor: pointer !important;
}

/* DESKTOP HOVER: crossfade on hover. Signature asymmetric opacity —
   essential image fades in fast (380ms ease-out), all-pages image
   fades out slow (580ms easeInOutCubic). */
@media (hover: hover) {
  .showcase-canvas:hover .showcase-image-all,
  .showcase-canvas:focus-visible .showcase-image-all {
    opacity: 0 !important;
    transition: opacity 580ms cubic-bezier(0.65, 0, 0.35, 1) !important;
  }
  .showcase-canvas:hover .showcase-image-essential,
  .showcase-canvas:focus-visible .showcase-image-essential {
    opacity: 1 !important;
    transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* TOUCH DEVICES: data-view drives the swap (set via JS on tap). */
@media (hover: none) {
  .showcase-canvas[data-view="essential"] .showcase-image-all {
    opacity: 0 !important;
    transition: opacity 580ms cubic-bezier(0.65, 0, 0.35, 1) !important;
  }
  .showcase-canvas[data-view="essential"] .showcase-image-essential {
    opacity: 1 !important;
    transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* Keyboard focus ring matches the homepage focus pattern */
.showcase-canvas:focus-visible {
  outline: none !important;
  box-shadow: var(--ys-focus-ring) !important;
}

/* TOOLTIP OVERLAY — teaches the affordance.
   Persistent until first interaction, then fades and never returns
   (the user has learned the pattern). Subtle pulse on the cursor
   icon to draw the eye without being noisy. */
.showcase-tooltip {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  background: rgba(10, 10, 10, 0.92) !important;
  color: var(--ys-paper) !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  pointer-events: none !important;
  z-index: 2 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transition: opacity 580ms cubic-bezier(0.65, 0, 0.35, 1) !important;
  white-space: nowrap !important;
  /* Subtle pulse — animation matches signature decelerate curve */
  animation: showcase-tooltip-pulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}
.showcase-tooltip svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
@keyframes showcase-tooltip-pulse {
  0%, 100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.03); }
}

/* Hide tooltip once the user has interacted (toggled via JS on
   first hover/tap/focus). Keeps it out of the way after teach. */
.simplification-showcase.has-interacted .showcase-tooltip {
  opacity: 0 !important;
  animation: none !important;
}

/* Hide the touch hint on devices that can hover, and vice versa.
   The .tooltip-hover and .tooltip-touch spans inside the tooltip
   let one element carry both copy variants. */
@media (hover: hover) { .showcase-tooltip .tooltip-touch { display: none !important; } }
@media (hover: none)  { .showcase-tooltip .tooltip-hover { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .showcase-tooltip { animation: none !important; }
}

/* =============================================
   EOB REDESIGN — captioned feature images +
   clickable (lightbox) affordance
   ============================================= */
.feature-image figcaption {
  font-size: 0.875rem !important;
  color: var(--ys-ink-60) !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  padding: 1rem 1.25rem !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  background: var(--ys-paper-sub) !important;
}
.clickable-image {
  cursor: zoom-in !important;
}
.clickable-image img {
  transition: opacity 200ms ease !important;
}
.clickable-image:hover img,
.clickable-image:focus-visible img {
  opacity: 0.9 !important;
}
.clickable-image:focus-visible {
  outline: 2px solid var(--ys-ink-100) !important;
  outline-offset: 3px !important;
}

/* =============================================
   EOB RESULTS — numbers strip + editorial voices
   Replaces the boxed .testimonial cards on the EOB
   page (EVA keeps its own testimonial treatment).
   ============================================= */
.results-numbers {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  margin: 3rem 0 !important;
  padding: 2rem 0 !important;
  border-top: 1px solid var(--ys-ink-10) !important;
  border-bottom: 1px solid var(--ys-ink-10) !important;
}
.results-number .number {
  display: block !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--ys-ink-100) !important;
  font-variant-numeric: tabular-nums !important;
}
.results-number .label {
  display: block !important;
  margin-top: 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: var(--ys-ink-60) !important;
}
.voices {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  margin: 3.5rem 0 1rem !important;
}
.voice {
  border-top: 2px solid var(--ys-ink-100) !important;
  padding-top: 1.5rem !important;
}
.voice-kicker {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ys-ink-40) !important;
  margin: 0 0 1rem !important;
}
.voice blockquote {
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: -0.01em !important;
  color: var(--ys-ink-100) !important;
  margin: 0 0 1.25rem !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.voice cite {
  display: block !important;
  font-style: normal !important;
  font-size: 0.875rem !important;
  color: var(--ys-ink-60) !important;
}
.voice cite::before {
  content: "— " !important;
}
@media (max-width: 768px) {
  .results-numbers {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .voices {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

/* =============================================
   TOC DARK-SECTION INVERSION — the fixed left TOC
   overlaps the full-bleed .spotlight and .cta-footer
   bands. Per-item .on-dark (toggled by scroll JS)
   keeps text readable on both surfaces (WCAG 1.4.3);
   gray-on-black fails contrast outright.
   ============================================= */
.toc-title,
.toc-link {
  transition: color 200ms ease, border-color 200ms ease !important;
}
.toc-title.on-dark { color: rgba(255, 255, 255, 0.55) !important; }
.toc-link.on-dark { color: rgba(255, 255, 255, 0.75) !important; }
.toc-link.on-dark:hover { color: #ffffff !important; }
.toc-link.active.on-dark { color: #ffffff !important; }

/* =============================================
   EQUAL-HEIGHT COMPARISON — for side-by-side
   screenshots with different native aspect ratios
   (V1 wizard is 16:9, V2 contacts is ~4:3). Both
   render in a 16:9 frame; the taller image crops
   from the top edge down. Full image remains
   available via the lightbox.
   ============================================= */
.audit-comparison--equal img {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: top !important;
}