:root {
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";

  /* Common */
  --outer-bg: #070b10;
  --outer-glow: rgba(113, 113, 122, 0.08);
  --focus: 2px solid rgba(113, 113, 122, 0.3);

  /* Light (default) - Warmer, more sophisticated palette */
  --page-bg: #fafaf9;
  --page-text: #0a0a0a;
  --page-muted: #57534e;
  --line: #e7e5e4;
  --card-bg: #ffffff;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --chip-bg: #ffffff;
  --chip-text: #1a1a1a;
  --chip-line: #d6d3d1;
  --chip-active-bg: #1a1a1a;
  --chip-active-text: #ffffff;
  --command-bg: #1a1a1a;
  --command-text: #fafaf9;
  --btn-bg: #1a1a1a;
  --btn-text: #ffffff;
  --accent: #57534e;
  --accent-hover: #44403c;
  --accent-light: rgba(87, 83, 78, 0.08);
  --accent-medium: rgba(87, 83, 78, 0.12);
  --accent-strong: rgba(87, 83, 78, 0.2);
  --warm-shadow: rgba(0, 0, 0, 0.03);
  --warm-shadow-strong: rgba(0, 0, 0, 0.05);
}

body[data-theme="dark"] {
  --page-bg: #000000;
  --page-text: #ffffff;
  --page-muted: #a0a0a0;
  --line: #1a1a1a;
  --card-bg: #000000;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --chip-bg: #000000;
  --chip-text: #ffffff;
  --chip-line: #1a1a1a;
  --chip-active-bg: #ffffff;
  --chip-active-text: #000000;
  --command-bg: #000000;
  --command-text: #ffffff;
  --btn-bg: #ffffff;
  --btn-text: #000000;
  --accent: #a1a1aa;
  --accent-hover: #d4d4d8;
  --accent-light: rgba(161, 161, 170, 0.12);
  --accent-medium: rgba(161, 161, 170, 0.18);
  --accent-strong: rgba(161, 161, 170, 0.3);
}

* {
  box-sizing: border-box;
}

/* Custom Cursor Animation - Desktop only */
@media (pointer: fine) {
  body.has-cursor {
    cursor: none;
  }
  
  .cursor-dot {
    width: 10px;
    height: 10px;
    background: var(--page-text);
    border-radius: 50%;
    position: fixed;
    top: -5px;
    left: -5px;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    mix-blend-mode: difference;
    opacity: 0 !important;
    visibility: hidden;
    will-change: transform, width, height;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  
  .cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid var(--page-text);
    border-radius: 50%;
    position: fixed;
    top: -20px;
    left: -20px;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    mix-blend-mode: difference;
    opacity: 0 !important;
    visibility: hidden;
    will-change: transform, width, height;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  
  body.has-cursor .cursor-dot,
  body.has-cursor .cursor-outline {
    opacity: 1 !important;
    visibility: visible;
  }
  
  /* Hover interactions - more dramatic for cards */
  .card:hover .cursor-dot,
  .card:hover ~ .cursor-dot {
    transform: scale(2.8) !important;
    width: 14px;
    height: 14px;
    background: var(--accent);
    mix-blend-mode: normal;
  }
  
  .card:hover .cursor-outline,
  .card:hover ~ .cursor-outline {
    transform: scale(1.8) !important;
    width: 70px;
    height: 70px;
    border-width: 3px;
    border-color: var(--accent);
    mix-blend-mode: normal;
  }
  
  /* Other hover interactions */
  a:hover ~ .cursor-dot,
  button:hover ~ .cursor-dot,
  .category-card:hover ~ .cursor-dot,
  .bestfor-tag:hover ~ .cursor-dot,
  .chip-btn:hover ~ .cursor-dot,
  .pill:hover ~ .cursor-dot,
  .visit-btn:hover ~ .cursor-dot {
    transform: scale(2.2) !important;
    width: 12px;
    height: 12px;
  }
  
  a:hover ~ .cursor-outline,
  button:hover ~ .cursor-outline,
  .category-card:hover ~ .cursor-outline,
  .bestfor-tag:hover ~ .cursor-outline,
  .chip-btn:hover ~ .cursor-outline,
  .pill:hover ~ .cursor-outline,
  .visit-btn:hover ~ .cursor-outline {
    transform: scale(1.5) !important;
    width: 60px;
    height: 60px;
    border-width: 2.5px;
  }
  
  /* Click state */
  body.has-cursor.is-clicking .cursor-dot {
    transform: scale(1.5);
    width: 8px;
    height: 8px;
  }
  
  body.has-cursor.is-clicking .cursor-outline {
    transform: scale(0.8);
    width: 50px;
    height: 50px;
  }
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: radial-gradient(1000px 700px at 20% 0%, var(--outer-glow), transparent 60%), var(--outer-bg);
  color: var(--page-text);
  font-family: var(--sans);
}

body[data-theme="dark"] {
  background: #000000;
}

body[data-theme="light"] {
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(26, 26, 26, 0.015) 1px, transparent 0),
    radial-gradient(1000px 700px at 20% 0%, rgba(87, 83, 78, 0.02), transparent 60%);
  background-size: 20px 20px, 100% 100%;
  background-position: 0 0, 0 0;
  background-color: #fafaf9;
}

.mono {
  font-family: var(--mono);
}

code,
pre {
  font-family: var(--mono);
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--card-bg);
  color: var(--page-text);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.skip-link:focus {
  top: 10px;
  outline: var(--focus);
}

.app {
  max-width: 1400px;
  margin: 24px auto;
  padding: 0 20px;
  background: transparent;
  overflow: visible;
}

@media (min-width: 1400px) {
  .app {
    max-width: 1300px;
    padding: 0 24px;
  }
}

@media (min-width: 1600px) {
  .app {
    max-width: 1500px;
    padding: 0 32px;
  }
}

/* Chrome */
.chrome {
  padding: 12px 0 0;
  position: relative;
}

/* Mobile/Tablet: Override base position immediately */
@media (max-width: 1024px) {
  .chrome {
    position: fixed !important;
  }
}
.chrome-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.chrome-pill {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.65);
  color: var(--page-text);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
}
body[data-theme="dark"] .chrome-pill {
  background: rgba(24, 24, 27, 0.6);
}
.chrome-spacer {
  flex: 1 1 auto;
}
.chrome-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.chrome-link {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--page-text);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
}
.chrome-link:hover {
  border-color: var(--accent-strong);
  background: var(--accent-light);
}
.chrome-link:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.chrome-toggle-label {
  font-size: 12px;
  color: var(--page-muted);
}

.switch {
  width: 54px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(24, 24, 27, 0.14);
  position: relative;
  cursor: pointer;
}
body[data-theme="dark"] .switch {
  background: rgba(229, 231, 235, 0.12);
}
.switch:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  transition: transform 180ms ease;
}
.switch[aria-checked="true"] .switch-knob {
  transform: translateX(28px);
}

/* Page */
.page {
  padding: 22px 22px 28px;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInMoveUp 0.6s ease-out forwards;
}

.hero {
  padding: 12px 4px 10px;
}

.tool-hero {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 32px;
  position: relative;
  box-shadow: none;
}

.tool-hero::after {
  display: none;
}


@media (min-width: 1200px) {
  .app {
    padding: 0 20px;
  }
  
  .hero {
    padding: 20px 4px 16px;
  }
  
  .title {
    font-size: 48px;
    margin: 16px 0 20px;
  }
  
  .kicker {
    font-size: 12px;
    margin-bottom: 8px;
  }
}
.kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--page-muted);
  text-transform: uppercase;
}
.title {
  margin: 10px 0 14px;
  font-family: var(--mono);
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

body[data-theme="light"] .title {
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08);
}

body[data-theme="dark"] .title {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.03);
}

.command {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--command-bg);
  color: var(--command-text);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.16);
}

body[data-theme="light"] .command {
  background: linear-gradient(to bottom, #0a0a0a 0%, #1a1a1a 100%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}

body[data-theme="dark"] .command {
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.prompt {
  opacity: 0.9;
  font-size: 14px;
}
.command-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--command-text);
  font-size: 14px;
  transition: all 0.2s ease;
}

.command-input:focus {
  color: var(--command-text);
}

.command:focus-within {
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.2), 0 0 0 2px var(--accent-strong);
}
.command-input::placeholder {
  color: rgba(229, 231, 235, 0.65);
}
.caret {
  width: 10px;
  height: 18px;
  border-radius: 2px;
  background: rgba(229, 231, 235, 0.6);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}

.micro {
  margin-top: 10px;
  font-size: 12px;
  color: var(--page-muted);
}

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.pill {
  appearance: none;
  border: 1px solid var(--chip-line);
  background: transparent;
  color: var(--page-text);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.pill::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--accent-light);
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.pill:hover::after {
  width: 200px;
  height: 200px;
}

.pill:hover {
  transform: translateY(-4px) scale(1.08);
  border-color: rgba(87, 83, 78, 0.5);
  background: linear-gradient(to bottom, var(--accent-light) 0%, var(--accent-light) 100%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 12px var(--accent-medium),
    0 8px 20px var(--accent-medium);
}

.pill:active {
  transform: translateY(-1px) scale(1.02);
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.pill-more {
  border-color: var(--accent-strong);
  background: var(--accent-light);
  font-weight: 500;
  position: relative;
}
.pill-more:hover {
  border-color: rgba(87, 83, 78, 0.5);
  background: var(--accent-medium);
}
.pill-more[aria-expanded="true"] {
  border-color: rgba(87, 83, 78, 0.7);
  background: var(--accent-medium);
}

/* More Dropdown Menu */

.pill > * {
  position: relative;
  z-index: 1;
}
.pill:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

/* Controls */
.controls {
  margin-top: 10px;
  padding: 12px 4px 6px;
}
.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.controls-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--page-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chip-btn {
  appearance: none;
  border: 1px solid var(--chip-line);
  background: var(--chip-bg);
  color: var(--chip-text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

body[data-theme="light"] .chip-btn {
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(24, 24, 27, 0.03);
}
.chip-btn:hover {
  transform: translateY(-3px) scale(1.08);
  border-color: rgba(87, 83, 78, 0.5);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 8px var(--accent-medium),
    0 8px 16px var(--accent-medium);
  background: linear-gradient(to bottom, var(--accent-light) 0%, var(--accent-light) 100%);
}

body[data-theme="light"] .chip-btn:hover {
  background: linear-gradient(to bottom, var(--accent-medium) 0%, var(--accent-light) 100%);
}

.chip-btn:active {
  transform: translateY(-1px) scale(1.02);
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.chip-btn[data-active="true"] {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(87, 83, 78, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(87, 83, 78, 0);
  }
}
.chip-btn[aria-pressed="true"] {
  background: var(--chip-active-bg);
  color: var(--chip-active-text);
  border-color: transparent;
}
.chip-btn:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--page-muted);
  user-select: none;
}
.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-ui {
  width: 54px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(196, 205, 216, 0.5);
  position: relative;
}
.toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  transition: transform 180ms ease;
}
.toggle input:checked + .toggle-ui::after {
  transform: translateX(28px);
}
.toggle:focus-within {
  outline: var(--focus);
  outline-offset: 4px;
  border-radius: 999px;
}

/* Results */
.results {
  padding: 8px 0 16px;
  max-width: 100%;
  box-sizing: border-box;
}
.results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 10px;
}
.results-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--page-muted);
  text-transform: uppercase;
}
.results-meta {
  font-size: 12px;
  color: var(--page-muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Floating animation for cards */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.card {
  animation: float 6s ease-in-out infinite;
}

.card:nth-child(3n+1) {
  animation-delay: 0s;
}

.card:nth-child(3n+2) {
  animation-delay: 2s;
}

.card:nth-child(3n+3) {
  animation-delay: 4s;
}

.card:hover {
  animation-play-state: paused;
}

/* Ideas page - wider grid for bundle cards */
#bundlesGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px;
}

/* News page grid: always 3 columns (not 4 on large screens) */
#newsGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (min-width: 1400px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
  
  /* Ideas page - even wider on large screens */
  #bundlesGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 18px;
  }
  
  /* News page always stays at 3 columns */
  #newsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.card {
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px 18px;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: visible;
}

/* Ideas page bundle cards - more compact and colorful */
#bundlesGrid .card {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  animation: cardFadeIn 0.4s ease-out backwards;
}

/* Light mode - enhanced shadows and visibility */
body[data-theme="light"] #bundlesGrid .card {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] #bundlesGrid .card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.16);
  border-color: #d4d4d8;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#bundlesGrid .card:nth-child(1) { animation-delay: 0.05s; }
#bundlesGrid .card:nth-child(2) { animation-delay: 0.1s; }
#bundlesGrid .card:nth-child(3) { animation-delay: 0.15s; }
#bundlesGrid .card:nth-child(4) { animation-delay: 0.2s; }
#bundlesGrid .card:nth-child(5) { animation-delay: 0.25s; }
#bundlesGrid .card:nth-child(n+6) { animation-delay: 0.3s; }


body[data-theme="light"] .card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body[data-theme="light"] .card:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Ideas page bundle cards - minimal hover */
#bundlesGrid .card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Dark mode hover */
body[data-theme="dark"] #bundlesGrid .card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
}

body[data-theme="dark"] .card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: var(--accent-light);
  border-color: var(--accent);
}

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

.prompt-card {
  position: relative;
  transition: all 0.2s ease;
}

.prompt-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

.prompt-card:active {
  transform: translateY(0);
}

.card:hover::before {
  left: 100%;
}

.card > * {
  position: relative;
  z-index: 1;
}

/* News cards (thumbnail preview) */
.news-card {
  padding: 0;
}
.news-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  align-items: stretch;
}
.news-thumb {
  display: block;
  border-right: 1px solid var(--line);
  overflow: hidden;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  background: rgba(2, 6, 23, 0.04);
}
body[data-theme="dark"] .news-thumb {
  background: rgba(2, 6, 23, 0.35);
}
.news-media {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  position: relative;
  background: rgba(2, 6, 23, 0.18);
}
body[data-theme="dark"] .news-media {
  background: rgba(2, 6, 23, 0.55);
}
.news-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--thumb);
  background-size: cover;
  background-position: center;
  filter: blur(14px);
  transform: scale(1.15);
  opacity: 0.55;
}
.news-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.22), rgba(2, 6, 23, 0.35));
  opacity: 0.65;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* keep entire thumbnail visible */
  position: relative;
  z-index: 1;
  padding: 10px;
}
.news-embed {
  width: 100%;
  height: 100%;
  border: 0;
  position: relative;
  z-index: 1;
}
.news-thumb-fallback {
  border-right: 1px solid var(--line);
}
.news-body {
  padding: 14px 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--page-muted);
  line-height: 1.4;
  margin: 0;
  opacity: 0.75;
}
.news-date .muted {
  color: var(--page-muted);
  opacity: 0.8;
}
.news-summary {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--page-text);
  line-height: 1.55;
  margin: 0;
  white-space: pre-line;
  opacity: 0.9;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 720px) {
  .news-row {
    grid-template-columns: 1fr;
  }
  .news-thumb {
    border-right: none;
    border-bottom: 1px solid var(--line);
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
  }
  .news-body {
    padding: 12px 14px 12px;
  }
}
.card:hover {
  border-left-color: var(--accent);
  background: var(--accent-light);
}

body[data-theme="light"] .card:hover {
  background: var(--accent-light);
  border-left-color: var(--accent);
}

.card:active {
  background: var(--accent-light);
}
.card:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Bundle cards - enhanced header styles */
#bundlesGrid .card-header {
  margin-bottom: 6px;
}

#bundlesGrid .card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--page-text);
}

/* Light mode - better text contrast */
body[data-theme="light"] #bundlesGrid .card-name {
  color: #18181b;
  font-weight: 700;
}

body[data-theme="light"] #bundlesGrid .card-tagline {
  color: #57534e;
  opacity: 0.9;
}

#bundlesGrid .card-preview {
  font-size: 10px;
  opacity: 0.6;
  margin-top: 4px;
}

/* Light mode - better preview visibility */
body[data-theme="light"] #bundlesGrid .card-preview {
  color: #57534e;
  opacity: 0.75;
  font-weight: 500;
}

.card-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: #0a0a0a !important;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.05);
}
body[data-theme="dark"] .card-name {
  color: #f4f4f7 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.02);
}
.card-tagline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.5;
  opacity: 0.9;
}
.card-preview {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--page-text);
  line-height: 1.6;
  opacity: 0.9;
  margin-top: 2px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.card-why {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--page-text);
  line-height: 1.4;
  opacity: 0.75;
  margin-top: 2px;
}
.card-why .muted {
  color: var(--page-muted);
  opacity: 0.8;
}
.card-foot {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* News footer: keep buttons aligned + prevent overflow */
.news-card .card-foot {
  margin-top: auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}
.news-card .card-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 720px) {
  .news-card .card-actions {
    margin-left: 0;
    width: 100%;
  }
}
.price-pill {
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--chip-line);
  color: var(--page-text);
  background: rgba(255, 255, 255, 0.65);
}

body[data-theme="light"] .price-pill {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(254, 254, 254, 0.8) 100%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(24, 24, 27, 0.04);
  border: 1px solid rgba(196, 205, 216, 0.6);
}

body[data-theme="dark"] .price-pill {
  background: rgba(24, 24, 27, 0.6);
}
.visit-btn {
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-theme="light"] .visit-btn {
  background: linear-gradient(to bottom, #0f172a 0%, #1e293b 100%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(24, 24, 27, 0.15),
    0 4px 8px rgba(24, 24, 27, 0.1);
}

body[data-theme="light"] .visit-btn:hover {
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 12px rgba(24, 24, 27, 0.25),
    0 10px 20px rgba(24, 24, 27, 0.2);
  transform: translateY(-2px) scale(1.02);
}

.visit-btn:active {
  transform: translateY(0) scale(0.98);
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.open-btn {
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--chip-line);
  background: transparent;
  color: var(--page-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.open-btn:hover {
  border-color: rgba(87, 83, 78, 0.4);
  background: linear-gradient(to bottom, var(--accent-light) 0%, var(--accent-light) 100%);
  transform: translateY(-2px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 6px var(--accent-medium);
}

.open-btn:active {
  transform: translateY(0);
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.open-btn:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.card-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* optional little "Best for" tag like your mock */
.bestfor-tag {
  font-family: var(--mono);
  font-size: 11px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid;
  display: inline-block;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

body[data-theme="light"] .bestfor-tag {
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(24, 24, 27, 0.05);
}

.bestfor-tag:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-width: 1.5px;
}

/* Unique colors for each category */
.bestfor-3d { border-color: rgba(139, 92, 246, 0.5); color: #6d28d9; background: rgba(139, 92, 246, 0.12); }
body[data-theme="dark"] .bestfor-3d { border-color: rgba(139, 92, 246, 0.4); color: #c4b5fd; background: rgba(139, 92, 246, 0.15); }

.bestfor-design { border-color: rgba(87, 83, 78, 0.5); color: #1e40af; background: var(--accent-medium); }
body[data-theme="dark"] .bestfor-design { border-color: rgba(87, 83, 78, 0.4); color: #93c5fd; background: var(--accent-medium); }

.bestfor-avatar { border-color: rgba(236, 72, 153, 0.5); color: #be185d; background: rgba(236, 72, 153, 0.12); }
body[data-theme="dark"] .bestfor-avatar { border-color: rgba(236, 72, 153, 0.4); color: #f9a8d4; background: rgba(236, 72, 153, 0.15); }

.bestfor-cinematic { border-color: rgba(234, 179, 8, 0.5); color: #92400e; background: rgba(254, 243, 199, 0.65); }
body[data-theme="dark"] .bestfor-cinematic { border-color: rgba(234, 179, 8, 0.35); color: #fcd34d; background: rgba(234, 179, 8, 0.08); }

.bestfor-control { border-color: rgba(34, 197, 94, 0.5); color: #166534; background: rgba(220, 252, 231, 0.65); }
body[data-theme="dark"] .bestfor-control { border-color: rgba(34, 197, 94, 0.4); color: #86efac; background: rgba(34, 197, 94, 0.15); }

.bestfor-creators { border-color: rgba(249, 115, 22, 0.5); color: #9a3412; background: rgba(255, 237, 213, 0.65); }
body[data-theme="dark"] .bestfor-creators { border-color: rgba(249, 115, 22, 0.4); color: #fdba74; background: rgba(249, 115, 22, 0.15); }

.bestfor-editing { border-color: rgba(168, 85, 247, 0.5); color: #6b21a8; background: rgba(243, 232, 255, 0.65); }
body[data-theme="dark"] .bestfor-editing { border-color: rgba(168, 85, 247, 0.4); color: #c084fc; background: rgba(168, 85, 247, 0.15); }

.bestfor-effects { border-color: rgba(239, 68, 68, 0.5); color: #991b1b; background: rgba(254, 226, 226, 0.65); }
body[data-theme="dark"] .bestfor-effects { border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; background: rgba(239, 68, 68, 0.15); }

.bestfor-images { border-color: rgba(14, 165, 233, 0.5); color: #0c4a6e; background: rgba(224, 242, 254, 0.65); }
body[data-theme="dark"] .bestfor-images { border-color: rgba(14, 165, 233, 0.4); color: #7dd3fc; background: rgba(14, 165, 233, 0.15); }

.bestfor-motion { border-color: rgba(251, 146, 60, 0.5); color: #7c2d12; background: rgba(255, 237, 213, 0.65); }
body[data-theme="dark"] .bestfor-motion { border-color: rgba(251, 146, 60, 0.4); color: #fdba74; background: rgba(251, 146, 60, 0.15); }

.bestfor-music { border-color: rgba(168, 85, 247, 0.5); color: #6b21a8; background: rgba(243, 232, 255, 0.65); }
body[data-theme="dark"] .bestfor-music { border-color: rgba(168, 85, 247, 0.4); color: #c084fc; background: rgba(168, 85, 247, 0.15); }

.bestfor-narration { border-color: rgba(20, 184, 166, 0.5); color: #134e4a; background: rgba(204, 251, 241, 0.65); }
body[data-theme="dark"] .bestfor-narration { border-color: rgba(20, 184, 166, 0.4); color: #5eead4; background: rgba(20, 184, 166, 0.15); }

.bestfor-opensource { border-color: rgba(34, 197, 94, 0.5); color: #166534; background: rgba(220, 252, 231, 0.65); }
body[data-theme="dark"] .bestfor-opensource { border-color: rgba(34, 197, 94, 0.4); color: #86efac; background: rgba(34, 197, 94, 0.15); }

.bestfor-quality { border-color: rgba(87, 83, 78, 0.5); color: #1e40af; background: rgba(219, 234, 254, 0.65); }
body[data-theme="dark"] .bestfor-quality { border-color: rgba(87, 83, 78, 0.4); color: #93c5fd; background: var(--accent-medium); }

.bestfor-research { border-color: rgba(139, 92, 246, 0.5); color: #6d28d9; background: rgba(237, 233, 254, 0.65); }
body[data-theme="dark"] .bestfor-research { border-color: rgba(139, 92, 246, 0.4); color: #c4b5fd; background: rgba(139, 92, 246, 0.15); }

.bestfor-speed { border-color: rgba(34, 197, 94, 0.5); color: #166534; background: rgba(220, 252, 231, 0.65); }
body[data-theme="dark"] .bestfor-speed { border-color: rgba(34, 197, 94, 0.4); color: #86efac; background: rgba(34, 197, 94, 0.15); }

.bestfor-style { border-color: rgba(236, 72, 153, 0.5); color: #be185d; background: rgba(252, 231, 243, 0.65); }
body[data-theme="dark"] .bestfor-style { border-color: rgba(236, 72, 153, 0.4); color: #f9a8d4; background: rgba(236, 72, 153, 0.15); }

.bestfor-stylized { border-color: rgba(168, 85, 247, 0.5); color: #6b21a8; background: rgba(243, 232, 255, 0.65); }
body[data-theme="dark"] .bestfor-stylized { border-color: rgba(168, 85, 247, 0.4); color: #c084fc; background: rgba(168, 85, 247, 0.15); }

.bestfor-upscale { border-color: rgba(14, 165, 233, 0.5); color: #0c4a6e; background: rgba(224, 242, 254, 0.65); }
body[data-theme="dark"] .bestfor-upscale { border-color: rgba(14, 165, 233, 0.4); color: #7dd3fc; background: rgba(14, 165, 233, 0.15); }

.bestfor-variations { border-color: rgba(249, 115, 22, 0.5); color: #9a3412; background: rgba(255, 237, 213, 0.65); }
body[data-theme="dark"] .bestfor-variations { border-color: rgba(249, 115, 22, 0.4); color: #fdba74; background: rgba(249, 115, 22, 0.15); }

.bestfor-video { border-color: rgba(239, 68, 68, 0.5); color: #991b1b; background: rgba(254, 226, 226, 0.65); }
body[data-theme="dark"] .bestfor-video { border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; background: rgba(239, 68, 68, 0.15); }

.bestfor-voice { border-color: rgba(20, 184, 166, 0.5); color: #134e4a; background: rgba(204, 251, 241, 0.65); }
body[data-theme="dark"] .bestfor-voice { border-color: rgba(20, 184, 166, 0.4); color: #5eead4; background: rgba(20, 184, 166, 0.15); }

.bestfor-workflow { border-color: rgba(87, 83, 78, 0.5); color: #1e40af; background: rgba(219, 234, 254, 0.65); }
body[data-theme="dark"] .bestfor-workflow { border-color: rgba(87, 83, 78, 0.4); color: #93c5fd; background: var(--accent-medium); }

.bestfor-default { border-color: rgba(234, 179, 8, 0.5); color: #92400e; background: rgba(254, 243, 199, 0.65); }
body[data-theme="dark"] .bestfor-default { border-color: rgba(234, 179, 8, 0.35); color: #fcd34d; background: rgba(234, 179, 8, 0.08); }
.visit-btn:hover {
  filter: brightness(1.02);
}
.visit-btn:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

/* Drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.48);
  backdrop-filter: blur(2px);
  z-index: 30;
}
.drawer {
  position: fixed;
  top: 96px;
  right: max(16px, calc((100vw - 1320px) / 2 + 16px));
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 140px);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateX(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
  z-index: 40;
}
.drawer[data-open="true"] {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.drawer-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.drawer-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-muted);
}
.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--page-text);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.icon-btn:hover {
  border-color: var(--accent-strong);
}
.icon-btn:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.drawer-body {
  padding: 14px;
  overflow: auto;
  max-height: calc(100vh - 200px);
}
.drawer-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 6px;
}
.drawer-tagline {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--page-muted);
  margin: 0 0 8px;
  font-style: italic;
}
.drawer-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--page-muted);
  margin: 0 0 12px;
  line-height: 1.55;
}
.drawer-text {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--page-text);
  margin: 0;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -0.005em;
  opacity: 0.92;
}
.drawer-details {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.detail-row {
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
}
.detail-label {
  color: var(--page-muted);
  min-width: 80px;
  flex-shrink: 0;
}
.detail-value {
  color: var(--page-text);
  flex: 1;
}
.block {
  margin: 10px 0 12px;
}
.block-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-muted);
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 3px rgba(0, 0, 0, 0.03), 0 0 1px rgba(0, 0, 0, 0.04);
}

body[data-theme="dark"] .block-title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 3px rgba(0, 0, 0, 0.3), 0 0 6px rgba(255, 255, 255, 0.02);
}
.bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.65;
  color: var(--page-text);
}

.bullets li {
  padding: 8px 0 8px 14px;
  border-bottom: none;
  border-left: 2px solid var(--line);
  margin: 4px 0;
  position: relative;
  transition: border-color 0.25s ease, padding-left 0.25s ease;
  font-size: 14px;
  line-height: 1.7;
}

.bullets li:hover {
  border-left-color: var(--accent);
  padding-left: 20px;
  background: var(--accent-light);
}

body[data-theme="light"] .bullets li {
  border-left: 2px solid rgba(228, 228, 231, 0.5);
}

body[data-theme="light"] .bullets li:hover {
  background: var(--accent-light);
}

/* Category page "How to Choose" section styling */
.results .block {
  margin: 48px 0 0 0;
  padding: 0;
  background: transparent;
  border: none;
}

.results .block-title {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--page-text) !important;
  margin: 0 0 10px 0 !important;
  opacity: 0.9;
}

.results .drawer-text {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--page-text) !important;
  opacity: 0.88;
  margin: 0 0 12px 0 !important;
}

.results .bullets {
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.results .bullets li {
  padding: 6px 0 6px 12px !important;
  border-bottom: none !important;
  border-left: 2px solid var(--line) !important;
  margin: 3px 0 !important;
  position: relative;
  color: var(--page-text) !important;
  opacity: 0.88;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.results .bullets li:hover {
  border-left-color: var(--accent) !important;
  padding-left: 20px !important;
  background: var(--accent-light) !important;
  opacity: 1;
}

.results .bullets li strong {
  font-weight: 600 !important;
  color: var(--page-text) !important;
  opacity: 0.95;
  font-family: var(--mono) !important;
}

body[data-theme="light"] .results .bullets li {
  border-left: 2px solid rgba(228, 228, 231, 0.5) !important;
}

body[data-theme="light"] .results .bullets li:hover {
  background: var(--accent-light) !important;
}

.drawer-links {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.drawer-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--page-text);
  background: transparent;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.drawer-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--accent-medium);
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.drawer-link:hover::before {
  width: 200px;
  height: 200px;
}

.drawer-link > * {
  position: relative;
  z-index: 1;
}
.drawer-link.primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: transparent;
}
.drawer-link:hover {
  border-color: rgba(87, 83, 78, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--accent-medium);
}

.drawer-link.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.3);
}
.drawer-link:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

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

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  #bundlesGrid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

@media (min-width: 640px) and (max-width: 1024px) {
  #bundlesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }
}

@media (min-width: 1024px) and (max-width: 1400px) {
  #bundlesGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px;
  }
}

/* Tool & News Page Styles */
.tool-page-container,
.news-page-container,
.category-page-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 64px);
  animation: fadeInUp 0.3s ease-out;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}

/* Ensure tool page container doesn't stretch */
.tool-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tool-page-container > * {
  width: 100%;
  max-width: 1400px;
}

.tool-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 900px) minmax(280px, 360px);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  justify-content: center;
}

.tool-content-grid > .tool-main-content {
  max-width: 900px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.tool-main-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 900px !important;
  width: 100% !important;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

/* Force all content inside main content to respect max-width */
.tool-main-content *,
.tool-main-content *[style] {
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-main-content > * {
  max-width: 100% !important;
  overflow: hidden;
  box-sizing: border-box;
}

/* Text content should have optimal line length */
.tool-main-content .card-preview,
.tool-main-content .drawer-text,
.tool-main-content p {
  max-width: 100% !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.tool-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 280px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .tool-sidebar {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .tool-content-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
  }
  
  .tool-sidebar {
    position: static;
    max-width: 100%;
  }
}

/* Guide page responsive layout */
.guide-content-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

.guide-main-content {
  max-width: none;
  padding: 24px;
}

.guide-text {
  max-width: 800px;
}

/* Guide pages should use mono font like tool pages */
.guide-main-content .drawer-text {
  font-family: var(--mono) !important;
  font-size: 14px;
  line-height: 1.8;
  color: var(--page-text);
  opacity: 0.88;
}

.guide-sidebar {
  position: sticky;
  top: 24px;
  height: fit-content;
}

@media (max-width: 1000px) {
  .guide-content-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .guide-sidebar {
    position: static;
    order: -1;
  }
  
  .guide-text {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .guide-content-grid {
    padding: 0 16px;
    gap: 24px;
  }
  
  .guide-main-content {
    padding: 16px 0;
  }
  
  .guide-text {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
}

body[data-theme="light"] .tool-page-container,
body[data-theme="light"] .news-page-container {
  background: transparent;
  box-shadow: none;
  border: none;
}

@media (min-width: 1200px) {
  .tool-content-grid {
    gap: 48px;
  }
}

@media (min-width: 1600px) {
  .tool-content-grid {
    grid-template-columns: 1fr 360px;
    gap: 64px;
  }
  
  .tool-sidebar {
    width: 400px;
  }
  
  .tool-main-content {
    gap: 40px;
  }
}

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

@keyframes fadeInMoveUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.category-page-container .card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.category-page-container .card:nth-child(1) { animation-delay: 0.05s; }
.category-page-container .card:nth-child(2) { animation-delay: 0.1s; }
.category-page-container .card:nth-child(3) { animation-delay: 0.15s; }
.category-page-container .card:nth-child(4) { animation-delay: 0.2s; }
.category-page-container .card:nth-child(5) { animation-delay: 0.25s; }
.category-page-container .card:nth-child(6) { animation-delay: 0.3s; }
.category-page-container .card:nth-child(n+7) { animation-delay: 0.35s; }

.category-card {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.category-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(24, 24, 27, 0.15), 0 4px 16px rgba(24, 24, 27, 0.1);
  border-color: var(--accent-strong);
}

.category-card:hover .drawer-title a {
  color: var(--accent);
  transition: color 0.2s ease;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-medium), transparent);
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.category-card:hover::before {
  left: 100%;
}

.category-card > * {
  position: relative;
  z-index: 1;
}

.tool-page-container .breadcrumb,
.news-page-container .breadcrumb {
  margin-bottom: 20px;
  font-size: 11px;
  color: var(--page-muted);
}

.tool-page-container .breadcrumb a,
.news-page-container .breadcrumb a {
  color: var(--page-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.tool-page-container .breadcrumb a:hover,
.news-page-container .breadcrumb a:hover {
  color: var(--accent);
}

.tool-page-container .breadcrumb span,
.news-page-container .breadcrumb span {
  color: var(--page-text);
}

.tool-page-header,
.news-page-header {
  margin-bottom: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-theme="light"] .tool-page-header,
body[data-theme="light"] .news-page-header {
  background: transparent;
  border-bottom: 1px solid rgba(228, 228, 231, 0.5);
}

.tool-page-header h1,
.news-page-header h1 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 32px;
  margin: 0 0 8px;
  color: var(--page-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

body[data-theme="dark"] .tool-page-header h1,
body[data-theme="dark"] .news-page-header h1 {
  color: var(--page-text);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 255, 255, 0.03);
}

.tool-page-header .drawer-tagline,
.news-page-header .drawer-tagline {
  margin-bottom: 12px;
}

.tool-page-header .drawer-sub,
.news-page-header .drawer-sub {
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 0;
  color: var(--page-text);
  opacity: 0.9;
  max-width: 800px;
}

/* Content sections - minimal, no boxes */
.content-section {
  margin: 0 0 20px 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  transition: none;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure content sections don't stretch beyond parent */
.tool-main-content .content-section {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden;
  box-sizing: border-box;
}

.tool-main-content .content-section > * {
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-main-content .content-section > div[style] {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.content-section:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.content-section.compact {
  padding: 0;
}

.content-section.compact:hover {
  transform: none;
}

.section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--page-muted);
  margin: 0 0 10px 0;
  font-family: var(--mono);
  position: relative;
  padding-bottom: 0;
  border-bottom: none;
  display: block;
  opacity: 0.7;
}

.section-label::before {
  display: none;
}

body[data-theme="light"] .section-label {
  color: var(--page-muted);
  opacity: 0.75;
}

.content-section:hover .section-label {
  opacity: 0.85;
}

.section-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--page-text);
  opacity: 0.92;
  font-family: var(--sans);
  margin: 0;
  transition: opacity 0.2s ease;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.content-section:hover .section-text {
  opacity: 1;
}

.best-for-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 0;
}

.best-for-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  color: var(--page-text);
  opacity: 0.9;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  position: relative;
  overflow: hidden;
  font-family: var(--mono);
}

body[data-theme="light"] .best-for-item {
  border: 1px solid rgba(228, 228, 231, 0.6);
}

.best-for-item::before {
  display: none;
}

.best-for-item:hover {
  background: rgba(113, 113, 122, 0.1);
  border-color: var(--accent);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body[data-theme="dark"] .best-for-item:hover {
  background: rgba(161, 161, 170, 0.15);
}

body[data-theme="light"] .best-for-item:hover {
  border-color: var(--page-muted);
}

.best-for-item:hover::before {
  display: none;
}

.details-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  padding: 0;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin: 0;
  border-radius: 0;
  font-size: 12px;
  gap: 16px;
  transition: all 0.2s ease;
  position: relative;
  border-bottom: 1px solid var(--line);
}

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

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

.detail-item:hover {
  background: transparent;
  padding-left: 0;
}

body[data-theme="light"] .detail-item {
  border-bottom: 1px solid rgba(228, 228, 231, 0.5);
}

.detail-item:last-child {
  margin-bottom: -4px;
}

.detail-key {
  color: var(--page-muted);
  opacity: 0.75;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--mono);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 100px;
  transition: opacity 0.2s ease;
}

.detail-item:hover .detail-key {
  opacity: 0.9;
}

.detail-val {
  color: var(--page-text);
  opacity: 0.95;
  font-weight: 500;
  text-align: right;
  font-size: 11px;
  line-height: 1.5;
  transition: opacity 0.2s ease;
  font-family: var(--mono);
}

.detail-item:hover .detail-val {
  opacity: 1;
}

/* Block styling - refined minimal */
.tool-page-container .block,
.news-page-container .block {
  margin: 12px 0;
  padding: 14px 16px;
  background: transparent;
  border-radius: 0;
  border: none;
  border-left: 3px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
  transition: border-color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
}

body[data-theme="light"] .tool-page-container .block,
body[data-theme="light"] .news-page-container .block {
  background: transparent;
  border-left: 3px solid rgba(228, 228, 231, 0.5);
  box-shadow: none;
}

.tool-page-container .block:hover,
.news-page-container .block:hover {
  border-left-color: var(--accent);
  background: var(--accent-light);
  padding-left: 20px;
}

body[data-theme="light"] .tool-page-container .block:hover,
body[data-theme="light"] .news-page-container .block:hover {
  border-left-color: var(--accent);
  background: var(--accent-light);
  padding-left: 20px;
}

@media (min-width: 1200px) {
  .tool-page-container .block,
  .news-page-container .block {
    margin: 16px 0;
    padding: 18px 20px;
  }
}

.tool-page-container .block-title,
.news-page-container .block-title {
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--page-text);
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.65;
  font-family: var(--mono);
}

.tool-page-container .drawer-text,
.news-page-container .drawer-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--page-text);
  opacity: 0.88;
  font-family: var(--mono);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Guide page content styling - headings, lists, paragraphs */
.tool-page-container .drawer-text h2,
.news-page-container .drawer-text h2 {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--page-text);
  margin: 40px 0 16px 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
  opacity: 0.95;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.08), 0 3px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

body[data-theme="dark"] .tool-page-container .drawer-text h2,
body[data-theme="dark"] .news-page-container .drawer-text h2 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.02);
}

/* Add spacing before infographics that follow headings */
.tool-page-container .drawer-text h2 + .infographic,
.tool-page-container .drawer-text h3 + .infographic,
.tool-page-container .drawer-text h4 + .infographic,
.news-page-container .drawer-text h2 + .infographic,
.news-page-container .drawer-text h3 + .infographic,
.news-page-container .drawer-text h4 + .infographic {
  margin-top: 20px;
}

.tool-page-container .drawer-text h2:first-child {
  margin-top: 0;
}

.tool-page-container .drawer-text h3,
.news-page-container .drawer-text h3 {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.025), 0 1px 1px rgba(0, 0, 0, 0.015), 0 0 0.5px rgba(0, 0, 0, 0.01);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--page-text);
  margin: 20px 0 10px 0;
  line-height: 1.4;
  letter-spacing: -0.01em;
  opacity: 0.9;
}

body[data-theme="dark"] .tool-page-container .drawer-text h3,
body[data-theme="dark"] .news-page-container .drawer-text h3 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 255, 255, 0.015);
}

.tool-page-container .drawer-text p,
.news-page-container .drawer-text p {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--page-text);
  margin: 0 0 16px 0;
  opacity: 0.88;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.tool-page-container .drawer-text ul,
.news-page-container .drawer-text ul,
.tool-page-container .drawer-text ol,
.news-page-container .drawer-text ol {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--page-text);
  margin: 0 0 20px 0;
  padding-left: 24px;
  opacity: 0.88;
}

.tool-page-container .drawer-text li,
.news-page-container .drawer-text li {
  margin: 8px 0;
  line-height: 1.6;
  opacity: 0.88;
  font-family: var(--mono);
}

.tool-page-container .drawer-text li strong,
.news-page-container .drawer-text li strong,
.tool-page-container .drawer-text p strong,
.news-page-container .drawer-text p strong {
  font-weight: 600;
  color: var(--page-text);
  opacity: 0.95;
}

.tool-page-container .drawer-text a,
.news-page-container .drawer-text a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-strong);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.tool-page-container .drawer-text a:hover,
.news-page-container .drawer-text a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
  opacity: 1;
}

.tool-page-container .drawer-text pre,
.news-page-container .drawer-text pre {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  overflow-x: auto;
  color: var(--page-text);
}

.tool-page-container .drawer-text code,
.news-page-container .drawer-text code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--page-text);
}

.tool-page-container .drawer-text pre code,
.news-page-container .drawer-text pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
}

@media (min-width: 1200px) {
  .tool-page-container .drawer-text,
  .news-page-container .drawer-text {
    font-size: 14px;
    line-height: 1.65;
  }
  
  .tool-page-container .block-title,
  .news-page-container .block-title {
    font-size: 12px;
    margin-bottom: 14px;
  }
  
  .section-label {
    font-size: 12px;
    margin-bottom: 18px;
  }
  
  .section-text {
    font-size: 16px;
    line-height: 1.9;
  }
  
  .detail-key {
    font-size: 12px;
    min-width: 110px;
  }
  
  .detail-val {
    font-size: 15px;
  }
}

.tool-page-container .drawer-details,
.news-page-container .drawer-details {
  margin-top: 3px;
}

.tool-page-container .detail-row,
.news-page-container .detail-row {
  padding: 10px 12px;
  margin: 3px 0;
  border-bottom: none;
  border-left: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
  transition: border-color 0.25s ease, background 0.25s ease, padding-left 0.25s ease;
  font-size: 14px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

body[data-theme="light"] .tool-page-container .detail-row,
body[data-theme="light"] .news-page-container .detail-row {
  background: transparent;
  border-left: 2px solid rgba(228, 228, 231, 0.4);
}

.tool-page-container .detail-row:hover,
.news-page-container .detail-row:hover {
  background: var(--accent-light);
  border-left-color: var(--accent);
  padding-left: 18px;
}

body[data-theme="light"] .tool-page-container .detail-row:hover,
body[data-theme="light"] .news-page-container .detail-row:hover {
  background: var(--accent-light);
  border-left-color: var(--accent);
  padding-left: 18px;
}

@media (min-width: 1200px) {
  .tool-page-container .detail-row,
  .news-page-container .detail-row {
    padding: 12px 14px;
    margin: 4px 0;
    font-size: 15px;
  }
}

.tool-page-container .detail-row:last-child,
.news-page-container .detail-row:last-child {
  border-bottom: none;
  margin-bottom: -4px;
}

.tool-page-container .detail-label,
.news-page-container .detail-label {
  color: var(--page-muted);
  font-weight: 600;
  opacity: 0.75;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 100px;
  flex-shrink: 0;
  font-family: var(--mono);
}

.tool-page-container .detail-value,
.news-page-container .detail-value {
  color: var(--page-text);
  font-weight: 400;
  opacity: 0.92;
  flex: 1;
  font-family: var(--sans);
}

.tool-page-container .drawer-links,
.news-page-container .drawer-links {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 4px 0;
}

.tool-page-container .drawer-link {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
}

.tool-page-container .drawer-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
  background: rgba(113, 113, 122, 0.08);
}

body[data-theme="dark"] .tool-page-container .drawer-link:hover {
  background: rgba(161, 161, 170, 0.12);
}

.tool-page-container .drawer-link.primary:hover {
  box-shadow: 0 8px 24px var(--accent-strong);
}

.tool-page-container .drawer-link,
.news-page-container .drawer-link {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--page-text);
  font-family: var(--mono);
  font-size: 12px;
}

/* Related guides links styling */
.tool-page-container .drawer-link > div,
.news-page-container .drawer-link > div {
  font-family: var(--mono) !important;
}

.tool-page-container .drawer-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.tool-page-container .drawer-link:hover::before {
  left: 100%;
}

.tool-page-container .drawer-link.primary {
  background: linear-gradient(135deg, #71717a 0%, #57534e 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .tool-page-container .drawer-link.primary {
  background: linear-gradient(135deg, #a1a1aa 0%, #71717a 100%);
}

.tool-page-container .drawer-link.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0.95;
}

@media (min-width: 1200px) {
  .tool-page-container .drawer-links,
  .news-page-container .drawer-links {
    margin-top: 14px;
    gap: 14px;
  }
  
  .tool-page-container .drawer-link,
  .news-page-container .drawer-link {
    font-size: 13px;
    padding: 14px 18px;
  }
}


/* FAQ section styling - card style */
.content-section > div[style*="flex-direction: column"] > div {
  padding: 12px 16px;
  margin: 0 -16px;
  border-radius: 8px;
  border: none;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  background: transparent;
}

.content-section > div[style*="flex-direction: column"] > div:hover {
  background: var(--accent-light);
  border-left-color: var(--accent);
  padding-left: 20px;
  transform: translateX(2px);
}

body[data-theme="light"] .content-section > div[style*="flex-direction: column"] > div:hover {
  background: var(--accent-light);
}

.content-section > div[style*="flex-direction: column"] > div:last-child {
  margin-bottom: -4px;
}

/* Limitations section */
.limitations-block {
  margin-top: 12px;
}

.limitations-block summary {
  font-size: 12px;
  color: var(--page-muted);
  cursor: pointer;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--line);
  transition: all 0.2s ease;
  font-weight: 500;
  font-family: var(--mono);
  list-style: none;
}

.limitations-block summary::-webkit-details-marker {
  display: none;
}

.limitations-block summary::marker {
  display: none;
}

.limitations-block summary:hover {
  color: var(--accent);
  border-left-color: var(--accent);
  padding-left: 16px;
}

.limitations-list {
  margin: 16px 0 0 0;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--page-text);
  opacity: 0.9;
  font-family: var(--sans);
}

.limitations-list li {
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 2px solid var(--line);
  transition: border-color 0.2s ease, padding-left 0.2s ease;
}

.limitations-list li:hover {
  border-left-color: var(--accent);
  padding-left: 12px;
}

body[data-theme="light"] .limitations-list li {
  border-left: 2px solid rgba(228, 228, 231, 0.5);
}

/* News video embed */
.news-video-container {
  margin: 32px 0;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
}

.news-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* News explanation section */
.news-explanation {
  margin-top: 24px;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.news-explanation h3 {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--page-text);
  margin: 0 0 16px;
}

.news-explanation p {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--page-text);
  margin: 0 0 16px;
}

.news-explanation p:last-child {
  margin-bottom: 0;
}

.news-explanation ul {
  margin: 12px 0;
  padding-left: 20px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--page-text);
}

.news-explanation li {
  margin-bottom: 8px;
}

.news-explanation li:last-child {
  margin-bottom: 0;
}

/* Mobile/Tablet Enhancements - Touch Targets & UX */
@media (max-width: 1024px) {
  /* Ensure minimum 44x44px touch targets (Apple's recommendation) */
  .chrome-link,
  .chip-btn,
  .pill,
  button.card,
  .card[onclick],
  .drawer-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Better touch feedback */
  .card:active,
  .chip-btn:active,
  .pill:active,
  .chrome-link:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  /* Disable hover effects on touch devices */
  @media (hover: none) and (pointer: coarse) {
    .card:hover {
      transform: none;
      box-shadow: var(--shadow);
    }
    
    .chip-btn:hover,
    .pill:hover,
    .chrome-link:hover {
      transform: none;
      border-color: var(--line);
      background: transparent;
    }
  }
  
  .app {
    margin: 0 auto;
    padding: 0 12px;
    padding-top: 70px !important;
    border-radius: 16px;
    position: static;
    transform: none;
    will-change: auto;
  }
  
  .page {
    padding: 12px 12px 20px;
  }
  
  .title {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  
  .hero {
    padding: 8px 0 8px;
  }
  
  .grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .card {
    padding: 18px;
    /* Better touch target */
    min-height: 80px;
    -webkit-tap-highlight-color: var(--accent-medium);
  }
  
  .card-name {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  
  .card-preview {
    font-size: 13px;
    line-height: 1.6;
  }
  
  .examples {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .pill {
    font-size: 12px;
    padding: 10px 14px;
    min-height: 44px;
  }
  
  .chips {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .chip-btn {
    font-size: 12px;
    padding: 10px 14px;
    min-height: 44px;
    -webkit-tap-highlight-color: var(--accent-medium);
  }
  
  .drawer {
    top: 8px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100vh - 16px);
    border-radius: 16px;
    /* Better mobile scrolling */
    -webkit-overflow-scrolling: touch;
  }
  
  .tool-page-container,
  .news-page-container {
    padding: 12px;
  }
  
  .tool-page-header h1,
  .news-page-header h1 {
    font-size: 24px;
    line-height: 1.2;
  }
  
  .tool-page-header,
  .news-page-header {
    padding: 12px;
  }
  
  .tool-page-container .block,
  .news-page-container .block {
    padding: 16px;
    margin: 12px 0;
  }
  
  .tool-page-container .detail-row,
  .news-page-container .detail-row {
    padding: 12px 16px;
    margin: 0 -16px;
    min-height: 44px;
  }
  
  /* Mobile/Tablet navigation improvements - MUST be fixed */
  html {
    overflow-x: hidden;
    transform: none !important;
    perspective: none !important;
    filter: none !important;
  }
  
  body {
    overflow-x: hidden;
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    position: relative;
  }
  
  /* Ensure header is direct child of body and fixed */
  body > header.chrome {
    padding: 10px 12px 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: var(--bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--line) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transform: none !important;
    will-change: auto !important;
    contain: layout style paint !important;
  }
  
  /* Fallback for .chrome class */
  header.chrome,
  .chrome {
    padding: 10px 12px 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: var(--bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--line) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transform: none !important;
    will-change: auto !important;
    contain: layout style paint !important;
  }
  
  
  .chrome-bar {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
  }
  
  .chrome-pill {
    font-size: 11px;
    padding: 8px 10px;
    flex: 0 0 auto;
  }
  
  .chrome-spacer {
    flex: 1 1 auto;
    min-width: 8px;
  }
  
  /* Mobile: Stack navigation links vertically when needed */
  .chrome-bar {
    flex-direction: row;
  }
  
  .chrome-links-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0; /* Allow flex shrinking */
  }
  
  .chrome-link {
    font-size: 12px;
    padding: 10px 14px;
    min-height: 44px;
    -webkit-tap-highlight-color: var(--accent-medium);
    white-space: nowrap;
    flex-shrink: 0;
    overflow: visible; /* Ensure text isn't clipped */
    text-overflow: clip; /* Don't use ellipsis */
  }
  
  .chrome-toggle {
    min-height: 44px;
    padding: 4px 0;
    flex-shrink: 0;
  }
  
  /* On very small screens, wrap navigation to new line */
  @media (max-width: 480px) {
    .chrome-bar {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    
    .chrome-links-container {
      width: 100%;
      justify-content: space-between;
    }
    
    .chrome-link {
      flex: 1 1 auto;
      text-align: center;
      font-size: 11px;
      padding: 10px 8px;
    }
  }
  
  .results-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  /* Better mobile command input */
  .command {
    width: 100% !important;
  }
  
  .command-input {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 14px;
    min-height: 44px;
  }
  
  /* Mobile-friendly controls */
  .controls {
    padding: 12px 0;
  }
  
  .controls-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .controls-left,
  .controls-right {
    width: 100%;
  }
  
  /* Better mobile scrolling */
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  
  /* Prevent text selection on tap (unless it's text content) */
  .card,
  .chip-btn,
  .pill {
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Better spacing for mobile */
  .kicker {
    font-size: 10px;
    margin-bottom: 8px;
  }
  
  .micro {
    font-size: 11px;
    margin-top: 8px;
  }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  .chrome {
    padding: 8px 10px 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }
  
  .app {
    margin: 0 auto;
    padding: 70px 8px 0 !important;
    border-radius: 12px;
  }
  
  .page {
    padding: 12px 8px 16px !important;
  }
  
  .title {
    font-size: 22px;
  }
  
  .card {
    padding: 14px;
  }
  
  .chrome-link {
    font-size: 11px;
    padding: 8px 12px;
  }
}

/* Mobile-specific enhancements */
body.is-mobile {
  /* Better touch scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Swipe indicator (optional visual feedback) */
@media (max-width: 720px) {
  .card {
    position: relative;
    overflow: hidden;
  }
  
  /* Visual feedback for swipeable cards */
  .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent-medium), transparent);
    transition: left 0.3s ease;
    pointer-events: none;
    z-index: 1;
  }
  
  .card.swiping::before {
    left: 100%;
  }
}

/* Better mobile keyboard handling */
@media (max-width: 720px) {
  /* Prevent layout shift when keyboard appears */
  .command-input:focus {
    position: relative;
    z-index: 10;
  }
  
  /* Better mobile form inputs */
  input[type="text"],
  input[type="search"] {
    font-size: 16px; /* Prevents iOS zoom */
  }
}

/* Landscape mobile optimizations */
@media (max-width: 720px) and (orientation: landscape) {
  .chrome {
    padding: 8px 12px 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }
  
  .hero {
    padding: 4px 0;
  }
  
  .title {
    font-size: 24px;
  }
  
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Category cards - Directory page */
.category-card {
  min-height: 120px;
  -webkit-tap-highlight-color: var(--accent-medium);
}

@media (max-width: 720px) {
  .category-card {
    padding: 28px !important;
    min-height: 100px;
  }
  
  #categoryGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .category-card .category-count {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
  
  .category-card > div:first-child > div:first-child {
    font-size: 16px !important;
  }
  
  .category-card > div:nth-child(2) {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  
  .category-card > div:nth-child(3) {
    font-size: 11px !important;
  }
  
  .category-arrow {
    top: 20px !important;
    right: 20px !important;
  }
}

@media (max-width: 480px) {
  .category-card {
    padding: 24px !important;
    min-height: 90px;
  }
  
  .category-card > div:first-child {
    margin-bottom: 12px !important;
  }
  
  .category-card > div:first-child > div:first-child {
    font-size: 15px !important;
  }
  
  .category-card > div:nth-child(2) {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  
  .category-card > div:nth-child(3) {
    font-size: 10px !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-only interactions */
  .card:hover .card-name {
    color: inherit;
  }
  
  /* Better focus states for touch */
  .card:focus-visible,
  .chip-btn:focus-visible,
  .pill:focus-visible {
    outline: 3px solid rgba(87, 83, 78, 0.5);
    outline-offset: 2px;
  }
  
  /* Larger tap targets */
  a, button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Submit modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.48);
  backdrop-filter: blur(2px);
  z-index: 50;
}
.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(860px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 32px));
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 60;
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
}
.modal[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ideas-modal {
  width: min(920px, calc(100vw - 32px));
  height: min(80vh, calc(100vh - 32px));
  max-height: 800px;
}
.ideas-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(80vh - 80px);
}
.ideas-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ideas-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ideas-bundle-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ideas-category {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--page-text);
  margin-bottom: 4px;
}
.ideas-description {
  font-size: 11px;
  color: var(--page-muted);
  font-style: italic;
  line-height: 1.4;
}
.ideas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ideas-pill {
  font-size: 12px;
  padding: 10px 14px;
}
.ideas-pill:hover {
  transform: translateY(-2px) scale(1.03);
}
.ideas-pill-bundle {
  font-weight: 600;
  border-color: rgba(87, 83, 78, 0.4);
  background: var(--accent-light);
  margin-bottom: 8px;
}
.ideas-pill-bundle:hover {
  border-color: rgba(87, 83, 78, 0.6);
  background: var(--accent-medium);
}
.modal-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.modal-body {
  padding: 14px;
  overflow: auto;
  max-height: calc(100vh - 200px);
}
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field {
  display: grid;
  gap: 6px;
}
.field-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-muted);
}
.field-input {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--page-text);
}
.field-input:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.btn-primary2 {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
}
.btn-primary2:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.btn-ghost2 {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: transparent;
  color: var(--page-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-ghost2:hover {
  border-color: var(--accent-strong);
}
.btn-ghost2:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}
.modal-preview {
  margin-top: 14px;
}
.preview {
  margin: 8px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.02);
  color: var(--page-text);
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
  max-height: 220px;
}
body[data-theme="dark"] .preview {
  background: rgba(2, 6, 23, 0.25);
}

/* Infographic Styles for Guides */
.infographic {
  margin: 40px 0;
  padding: 28px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--mono);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Separate infographics from text flow - break out of container */
.tool-page-container .drawer-text .infographic,
.news-page-container .drawer-text .infographic {
  margin-left: calc(-14px - 3px); /* Break out of block padding and border */
  margin-right: calc(-14px - 3px);
  max-width: calc(100% + 28px + 6px);
  width: calc(100% + 28px + 6px);
  position: relative;
  z-index: 1;
}

@media (min-width: 1200px) {
  .tool-page-container .drawer-text .infographic,
  .news-page-container .drawer-text .infographic {
    margin-left: calc(-18px - 3px);
    margin-right: calc(-18px - 3px);
    max-width: calc(100% + 36px + 6px);
    width: calc(100% + 36px + 6px);
  }
}

.infographic::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-medium), transparent);
  transition: left 0.5s ease;
}

.infographic:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body[data-theme="light"] .infographic:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.infographic:hover::before {
  left: 100%;
}

body[data-theme="light"] .infographic {
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.6);
}

body[data-theme="dark"] .infographic {
  background: rgba(24, 24, 27, 0.4);
  border: 1px solid rgba(39, 39, 42, 0.8);
}

.infographic-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--page-text);
  margin-bottom: 20px;
  opacity: 0.9;
}

/* Tool Page Specific Infographic Styles */
.tool-insights {
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-insights > div[style*="grid"] {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-prompts-grid {
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-prompts-grid > div[style*="grid"] {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-capability-scores {
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-capability-scores > div[style*="grid"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-use-case-chart {
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-use-case-chart > div[style*="grid"] {
  max-width: 100% !important;
  box-sizing: border-box;
}

.tool-comparison-matrix {
  overflow-x: auto;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Prevent content sections from stretching */
.tool-main-content .content-section {
  max-width: 100% !important;
  overflow: hidden;
  box-sizing: border-box;
}

.tool-main-content .content-section > .infographic {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Improve grid layouts in tool pages */
.tool-main-content .content-section > div[style*="grid"],
.tool-main-content .content-section > div[style*="display: grid"] {
  max-width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .tool-insights > div[style*="grid"],
  .tool-prompts-grid > div[style*="grid"],
  .capability-scores > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* Flow Diagram */
.flow-diagram {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 32px 0;
  padding: 24px;
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.03));
  border-radius: 16px;
  border: 1px solid var(--line);
  position: relative;
}

.flow-step {
  flex: 1;
  min-width: 140px;
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-light));
  border: 2px solid rgba(87, 83, 78, 0.4);
  border-radius: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--page-text);
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 4px 12px var(--accent-medium);
  overflow: hidden;
}

.flow-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.flow-step:hover {
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-medium));
  border-color: rgba(87, 83, 78, 0.7);
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 12px 32px rgba(87, 83, 78, 0.4), 0 0 0 3px var(--accent-medium);
}

.flow-step:hover::before {
  left: 100%;
}

body[data-theme="light"] .flow-step {
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-light));
  border: 2px solid var(--accent-strong);
}

body[data-theme="light"] .flow-step:hover {
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-medium));
  box-shadow: 0 8px 24px var(--accent-strong);
}

.flow-step::after {
  content: '→';
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 4px var(--accent-strong);
  z-index: 2;
  transition: all 0.3s ease;
}

.flow-step:hover::after {
  transform: translateY(-50%) translateX(4px);
  color: rgba(87, 83, 78, 1);
  text-shadow: 0 4px 8px rgba(87, 83, 78, 0.5);
}

.flow-step:last-child::after {
  display: none;
}

/* Unique flow step colors */
.flow-step-color-1 { 
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-medium));
  border-color: rgba(87, 83, 78, 0.5);
}
.flow-step-color-2 { 
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.1));
  border-color: rgba(16, 185, 129, 0.5);
}
.flow-step-color-3 { 
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.1));
  border-color: rgba(245, 158, 11, 0.5);
}
.flow-step-color-4 { 
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.1));
  border-color: rgba(139, 92, 246, 0.5);
}
.flow-step-color-5 { 
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.1));
  border-color: rgba(236, 72, 153, 0.5);
}

.flow-step-label {
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.9;
}

.flow-step-desc {
  font-size: 10px;
  opacity: 0.7;
  line-height: 1.4;
}

/* Prompt Structure Visual */
.prompt-structure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.structure-block {
  padding: 14px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 11px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.structure-block:hover {
  background: var(--accent-medium);
  border-left-width: 4px;
  transform: translateX(4px);
  box-shadow: 0 2px 8px var(--accent-medium);
}

body[data-theme="light"] .structure-block:hover {
  background: var(--accent-light);
  box-shadow: 0 1px 4px var(--accent-medium);
}

.structure-block-label {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.structure-block-desc {
  font-size: 10px;
  opacity: 0.8;
  line-height: 1.4;
}

/* Before/After Comparison */
.comparison-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Separate comparison boxes from text flow - break out of container */
.tool-page-container .drawer-text .comparison-box,
.news-page-container .drawer-text .comparison-box {
  margin-left: calc(-14px - 3px);
  margin-right: calc(-14px - 3px);
  max-width: calc(100% + 28px + 6px);
  width: calc(100% + 28px + 6px);
  position: relative;
  z-index: 1;
}

@media (min-width: 1200px) {
  .tool-page-container .drawer-text .comparison-box,
  .news-page-container .drawer-text .comparison-box {
    margin-left: calc(-18px - 3px);
    margin-right: calc(-18px - 3px);
    max-width: calc(100% + 36px + 6px);
    width: calc(100% + 36px + 6px);
  }
}

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

.comparison-item {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.comparison-item:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body[data-theme="light"] .comparison-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comparison-before {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.comparison-after {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

body[data-theme="light"] .comparison-before {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}

body[data-theme="light"] .comparison-after {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
}

.comparison-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.comparison-before .comparison-label {
  color: #ef4444;
}

.comparison-after .comparison-label {
  color: #22c55e;
}

.comparison-text {
  font-size: 11px;
  line-height: 1.6;
  opacity: 0.9;
  font-family: var(--mono);
}

/* Visual Prompt Breakdown */
.prompt-breakdown {
  margin: 32px 0;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Separate prompt breakdowns from text flow - break out of container */
.tool-page-container .drawer-text .prompt-breakdown,
.news-page-container .drawer-text .prompt-breakdown {
  margin-left: calc(-14px - 3px);
  margin-right: calc(-14px - 3px);
  max-width: calc(100% + 28px + 6px);
  width: calc(100% + 28px + 6px);
  position: relative;
  z-index: 1;
}

@media (min-width: 1200px) {
  .tool-page-container .drawer-text .prompt-breakdown,
  .news-page-container .drawer-text .prompt-breakdown {
    margin-left: calc(-18px - 3px);
    margin-right: calc(-18px - 3px);
    max-width: calc(100% + 36px + 6px);
    width: calc(100% + 36px + 6px);
  }
}

.prompt-example {
  padding: 16px;
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin: 16px 0;
  font-size: 11px;
  line-height: 1.7;
  font-family: var(--mono);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.prompt-example:hover {
  background: var(--accent-medium);
  border-left-width: 4px;
  transform: translateX(4px);
  box-shadow: 0 2px 8px var(--accent-medium);
}

.prompt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.prompt-tag {
  padding: 4px 10px;
  background: var(--accent-medium);
  border: 1px solid var(--accent-strong);
  border-radius: 4px;
  font-size: 9px;
  color: var(--accent);
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: inline-block;
}

.prompt-tag:hover {
  background: var(--accent-strong);
  border-color: rgba(87, 83, 78, 0.5);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 2px 6px var(--accent-strong);
}

/* Step-by-Step Visual */
.step-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Separate step visuals from text flow - break out of container */
.tool-page-container .drawer-text .step-visual,
.news-page-container .drawer-text .step-visual {
  margin-left: calc(-14px - 3px);
  margin-right: calc(-14px - 3px);
  max-width: calc(100% + 28px + 6px);
  width: calc(100% + 28px + 6px);
  position: relative;
  z-index: 1;
}

@media (min-width: 1200px) {
  .tool-page-container .drawer-text .step-visual,
  .news-page-container .drawer-text .step-visual {
    margin-left: calc(-18px - 3px);
    margin-right: calc(-18px - 3px);
    max-width: calc(100% + 36px + 6px);
    width: calc(100% + 36px + 6px);
  }
}

.step-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.step-item:hover {
  transform: translateX(8px);
}

.step-item:hover .step-number {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 4px 12px rgba(87, 83, 78, 0.4);
}

.step-item:hover .step-content {
  border-color: var(--accent);
  background: var(--accent-light);
}

.step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--page-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--mono);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-content {
  flex: 1;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.6;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quality Scale Visual */
.quality-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 32px 0;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Separate quality scales from text flow - break out of container */
.tool-page-container .drawer-text .quality-scale,
.news-page-container .drawer-text .quality-scale {
  margin-left: calc(-14px - 3px);
  margin-right: calc(-14px - 3px);
  max-width: calc(100% + 28px + 6px);
  width: calc(100% + 28px + 6px);
  position: relative;
  z-index: 1;
}

@media (min-width: 1200px) {
  .tool-page-container .drawer-text .quality-scale,
  .news-page-container .drawer-text .quality-scale {
    margin-left: calc(-18px - 3px);
    margin-right: calc(-18px - 3px);
    max-width: calc(100% + 36px + 6px);
    width: calc(100% + 36px + 6px);
  }
}

.scale-item {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 6px;
  font-size: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.scale-item:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.scale-poor {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.scale-good {
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.3);
  color: #fb923c;
}

.scale-excellent {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

/* Chart Styles */
.chart-container {
  margin: 32px 0;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--mono);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.chart-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-medium);
  border-color: var(--accent);
}

body[data-theme="light"] .chart-container {
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.6);
}

body[data-theme="dark"] .chart-container {
  background: rgba(24, 24, 27, 0.4);
  border: 1px solid rgba(39, 39, 42, 0.8);
}

.chart-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--page-text);
  margin-bottom: 20px;
  opacity: 0.9;
}

/* Bar Chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-label {
  min-width: 120px;
  font-size: 11px;
  font-weight: 600;
  color: var(--page-text);
  opacity: 0.9;
}

.bar-wrapper {
  flex: 1;
  height: 32px;
  background: var(--line);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #57534e, #44403c, #292524);
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  color: white;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--accent-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bar-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 50%);
  pointer-events: none;
}

.bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.bar-item:hover .bar-fill {
  transform: scaleY(1.15);
  box-shadow: 0 6px 20px rgba(87, 83, 78, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.bar-item:hover .bar-fill::after {
  left: 100%;
}

/* Unique bar colors - can be applied via inline styles or classes */
.bar-fill-color-1 { background: linear-gradient(90deg, #57534e, #44403c, #292524); }
.bar-fill-color-2 { background: linear-gradient(90deg, #10b981, #059669, #047857); }
.bar-fill-color-3 { background: linear-gradient(90deg, #f59e0b, #d97706, #b45309); }
.bar-fill-color-4 { background: linear-gradient(90deg, #8b5cf6, #7c3aed, #6d28d9); }
.bar-fill-color-5 { background: linear-gradient(90deg, #ec4899, #db2777, #be185d); }
.bar-fill-color-6 { background: linear-gradient(90deg, #06b6d4, #0891b2, #0e7490); }
.bar-fill-color-7 { background: linear-gradient(90deg, #eab308, #ca8a04, #a16207); }
.bar-fill-color-8 { background: linear-gradient(90deg, #6366f1, #4f46e5, #4338ca); }

body[data-theme="light"] .bar-fill {
  background: linear-gradient(90deg, #57534e, #44403c, #292524);
}

.bar-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--page-text);
  min-width: 50px;
  text-align: right;
}

/* Pie Chart */
.pie-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin: 24px 0;
  flex-wrap: wrap;
}

.pie-slice {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 0 0 4px rgba(255, 255, 255, 0.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.pie-chart:hover .pie-slice {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 4px rgba(255, 255, 255, 0.15);
}

.pie-svg {
  width: 200px;
  height: 200px;
  transform: rotate(-90deg);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.pie-chart:hover .pie-svg {
  transform: rotate(-90deg) scale(1.05);
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  position: relative;
  overflow: hidden;
}

.pie-legend-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pie-legend-item:hover {
  transform: translateX(6px) scale(1.02);
  opacity: 1;
  background: var(--accent-light);
  border-color: var(--accent);
  box-shadow: 0 4px 12px var(--accent-medium);
}

.pie-legend-item:hover::before {
  opacity: 1;
}

.pie-legend-color {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.pie-legend-item:hover .pie-legend-color {
  transform: scale(1.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.pie-legend-label {
  font-weight: 700;
  color: var(--page-text);
  opacity: 0.95;
  letter-spacing: 0.02em;
}

.pie-legend-value {
  margin-left: auto;
  color: var(--page-text);
  font-size: 11px;
  font-weight: 800;
  font-family: var(--mono);
  background: linear-gradient(135deg, var(--accent), rgba(87, 83, 78, 0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Donut Chart */
.donut-chart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.donut-center-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--page-text);
}

.donut-center-label {
  font-size: 10px;
  color: var(--page-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Line Chart */
.line-chart {
  margin: 24px 0;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.line-chart-svg {
  width: 100%;
  height: 200px;
}

/* Comparison Matrix */
.comparison-matrix {
  display: grid;
  gap: 2px;
  background: var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 32px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--line);
}

.comparison-matrix.minimal-matrix {
  gap: 1px;
  margin: 20px 0;
  border-radius: 8px;
}

.matrix-header {
  background: linear-gradient(135deg, #57534e, #44403c);
  color: white;
  padding: 16px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px var(--accent-strong);
}

.matrix-cell {
  background: var(--card-bg);
  padding: 16px;
  font-size: 12px;
  text-align: center;
  color: var(--page-text);
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.minimal-matrix .matrix-cell {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 500;
}

.matrix-cell::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.matrix-cell:hover::before {
  width: 200px;
  height: 200px;
}

.matrix-cell:hover {
  background: var(--accent-light);
  transform: scale(1.08);
  z-index: 1;
  box-shadow: 0 8px 24px var(--accent-strong), 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.matrix-row {
  display: contents;
}

.matrix-row-header {
  display: contents;
}

.matrix-row-header > .matrix-label {
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-medium));
  font-weight: 700;
  padding: 14px;
  font-size: 11px;
  text-align: center;
  color: var(--page-text);
  text-transform: uppercase;
}

.minimal-matrix .matrix-row-header > .matrix-label {
  padding: 10px 8px;
  font-size: 10px;
  font-weight: 600;
}

.minimal-matrix .matrix-row > .matrix-label {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  background: var(--card-bg);
  display: block;
  color: var(--page-text);
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap;
  min-width: 0;
}
  letter-spacing: 0.05em;
}

.matrix-label {
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-medium));
  font-weight: 700;
  padding: 14px;
  font-size: 11px;
  text-align: center;
  color: var(--page-text);
  border-right: 2px solid var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.matrix-high {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  font-weight: 600;
}

.matrix-medium {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
}

.matrix-low {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Stat Cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.stat-card {
  padding: 24px 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-medium), transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-strong), rgba(87, 83, 78, 0.6), var(--accent-strong));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(87, 83, 78, 0.4);
  box-shadow: 0 12px 32px var(--accent-strong), 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card:hover::before {
  left: 100%;
}

.stat-card:hover::after {
  transform: scaleX(1);
}

.stat-card > * {
  position: relative;
  z-index: 2;
}

.stat-value {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), rgba(87, 83, 78, 0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  font-family: var(--mono);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 12px;
  color: var(--page-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 4px;
}

/* Progress Ring */
.progress-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.progress-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-ring-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--page-text);
}

.progress-ring-label {
  font-size: 9px;
  color: var(--page-muted);
  text-transform: uppercase;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 32px;
  margin: 24px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
  padding-left: 24px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.timeline-item:hover {
  transform: translateX(8px);
  opacity: 1;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--card-bg);
  box-shadow: 0 0 0 2px var(--line);
}

.timeline-date {
  font-size: 10px;
  color: var(--page-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.timeline-content {
  font-size: 12px;
  color: var(--page-text);
  line-height: 1.6;
}

/* Tree/Decision Diagram */
.decision-tree {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
}

.tree-node {
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.tree-node:hover {
  border-left-width: 6px;
  transform: translateX(4px);
  box-shadow: 0 2px 8px var(--accent-medium);
}

.tree-node-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
}

.tree-node-desc {
  font-size: 11px;
  color: var(--page-text);
  opacity: 0.8;
  line-height: 1.5;
}

.tree-arrow {
  text-align: center;
  color: var(--accent);
  font-size: 16px;
  margin: 8px 0;
}

/* Separate charts from text flow */
.tool-page-container .drawer-text .chart-container,
.news-page-container .drawer-text .chart-container {
  margin-left: calc(-14px - 3px);
  margin-right: calc(-14px - 3px);
  max-width: calc(100% + 28px + 6px);
  width: calc(100% + 28px + 6px);
  position: relative;
  z-index: 1;
}

@media (min-width: 1200px) {
  .tool-page-container .drawer-text .chart-container,
  .news-page-container .drawer-text .chart-container {
    margin-left: calc(-18px - 3px);
    margin-right: calc(-18px - 3px);
    max-width: calc(100% + 36px + 6px);
    width: calc(100% + 36px + 6px);
  }
}

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

/* Tutorials section - Enhanced with prominent thumbnails */
.tutorials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 0;
}

@media (min-width: 1200px) {
  .tutorials-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
}

.tutorial-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

body[data-theme="light"] .tutorial-card {
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body[data-theme="dark"] .tutorial-card {
  background: rgba(24, 24, 27, 0.4);
  border: 1px solid rgba(39, 39, 42, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tutorial-card:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px var(--accent-strong);
}

.tutorial-card:hover .tutorial-thumbnail img {
  transform: scale(1.1);
}

body[data-theme="light"] .tutorial-card:hover {
  box-shadow: 0 4px 12px var(--accent-medium);
}

body[data-theme="dark"] .tutorial-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  border-color: rgba(87, 83, 78, 0.4);
}

body[data-theme="light"] .tutorial-card:hover {
  border-left-color: var(--accent);
  background: var(--accent-light);
}

.tutorial-thumbnail {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--line);
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  margin: 0;
  border-bottom: 2px solid var(--line);
}

.tutorial-thumbnail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tutorial-thumbnail:hover::before {
  opacity: 1;
}

.tutorial-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Guide cards styling improvements */
.guide-card {
  min-height: auto;
  display: flex;
  flex-direction: column;
}

.guide-card .card-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.guide-card .card-name {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.guide-card .card-preview {
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.85;
  flex: 1;
  display: block;
  overflow: visible;
  word-wrap: break-word;
  margin-bottom: 8px;
}

.guide-card .card-foot {
  margin-top: auto;
  padding-top: 12px;
}

.guide-card .drawer-link {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.guide-card:hover .drawer-link {
  border-color: var(--accent);
  background: var(--accent-medium);
  color: var(--accent);
}

.tutorial-thumbnail:hover img {
  transform: scale(1.05);
}

.tutorial-thumbnail:hover .tutorial-play-button {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.15);
  border-color: rgba(255, 255, 255, 0.4);
  width: 80px;
  height: 80px;
  box-shadow: 0 8px 24px rgba(87, 83, 78, 0.4);
}

.tutorial-play-button svg {
  width: 28px;
  height: 28px;
  fill: white;
  margin-left: 3px;
}

.tutorial-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  background: var(--accent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 6px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tutorial-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  z-index: 2;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tutorial-content {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg);
}

.tutorial-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.tutorial-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--page-text);
  margin: 0;
  line-height: 1.5;
  font-family: var(--sans);
  letter-spacing: -0.01em;
}

.tutorial-description {
  font-size: 13px;
  color: var(--page-muted);
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
  font-family: var(--sans);
  letter-spacing: -0.005em;
}

.tutorial-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tutorial-link:hover {
  gap: 8px;
  color: var(--accent);
  opacity: 0.8;
}

@media (max-width: 768px) {
  .tutorials-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  /* New Creative Visuals - Mobile Optimization */
  .timeline-horizontal {
    flex-direction: column;
    gap: 24px;
    padding: 20px 16px;
    overflow-x: visible;
  }
  
  .timeline-item {
    min-width: 100%;
    width: 100%;
  }
  
  .timeline-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .timeline-connector {
    display: none;
  }
  
  .timeline-content {
    text-align: center;
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  
  .feature-card {
    padding: 20px;
  }
  
  .feature-icon {
    font-size: 32px;
  }
  
  .hierarchy-tree {
    padding: 20px 16px;
  }
  
  .tree-node-main {
    padding: 16px 20px;
    font-size: 14px;
  }
  
  .tree-branches {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  
  .tree-branch {
    width: 100%;
  }
  
  .tree-connector {
    display: none;
  }
  
  .before-after {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  
  .before-card,
  .after-card {
    padding: 20px;
  }
  
  .metric-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
  }
  
  .metric-card {
    padding: 20px 16px;
  }
  
  .metric-number {
    font-size: 32px;
  }
  
  .breakdown-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
  }
  
  .breakdown-card {
    padding: 16px;
  }
  
  .breakdown-percentage {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .timeline-horizontal {
    padding: 16px 12px;
    gap: 20px;
  }
  
  .timeline-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  
  .timeline-title {
    font-size: 14px;
  }
  
  .timeline-desc {
    font-size: 12px;
  }
  
  .feature-grid {
    padding: 12px;
    gap: 12px;
  }
  
  .feature-card {
    padding: 16px;
  }
  
  .feature-card-title {
    font-size: 14px;
  }
  
  .feature-card-desc {
    font-size: 12px;
  }
  
  .hierarchy-tree {
    padding: 16px 12px;
  }
  
  .tree-node-main {
    padding: 14px 18px;
    font-size: 13px;
  }
  
  .tree-branch-node {
    padding: 12px 16px;
    font-size: 12px;
  }
  
  .before-after {
    padding: 12px;
    gap: 12px;
  }
  
  .before-card,
  .after-card {
    padding: 16px;
  }
  
  .before-after-title {
    font-size: 14px;
  }
  
  .before-after-item {
    font-size: 12px;
    padding: 6px 0;
  }
  
  .metric-cards {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  
  .metric-card {
    padding: 18px 12px;
  }
  
  .metric-number {
    font-size: 28px;
  }
  
  .metric-label {
    font-size: 12px;
  }
  
  .breakdown-cards {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  
  .breakdown-card {
    padding: 14px;
  }
  
  .breakdown-percentage {
    font-size: 24px;
  }
  
  .breakdown-label {
    font-size: 12px;
  }
}

/* Quick Start & Tips styles */
.content-section > div[style*="grid-template-columns"] {
  margin-top: 12px;
}

.content-section > div > div[style*="border-left"] {
  transition: border-color 0.2s ease, padding-left 0.2s ease;
}

.content-section > div > div[style*="border-left"]:hover {
  border-left-color: var(--accent);
  padding-left: 16px;
}

/* Use Cases styles */
.content-section > div[style*="grid-template-columns"][style*="minmax(240px"] {
  margin-top: 12px;
}

.content-section > div > div[style*="border-left"][style*="2px"] {
  transition: border-color 0.25s ease, padding-left 0.25s ease;
}

.content-section > div > div[style*="border-left"][style*="2px"]:hover {
  border-left-color: var(--accent);
  padding-left: 16px;
}

/* Ensure tutorial cards display properly */
.tutorial-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tutorial-thumbnail {
  cursor: pointer;
}

.tutorial-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Footer */
.footer {
  margin-top: 100px;
  padding: 60px 0 40px;
  border-top: 1px solid var(--line);
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--page-bg);
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  opacity: 0.6;
}

.footer-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}

.footer-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 48px;
  margin-bottom: 48px;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 4px;
}

.footer-desc {
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.6;
  opacity: 0.85;
}

.footer-label {
  font-size: 11px;
  color: var(--page-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin-bottom: 4px;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--page-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  transition: gap 0.3s ease, color 0.3s ease;
  width: fit-content;
}

.footer-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--page-text);
  transition: width 0.3s ease;
}

.footer-link:hover {
  gap: 12px;
  color: var(--accent);
}

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

.footer-link-text {
  letter-spacing: 0.02em;
}

.footer-link-arrow {
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.6;
  font-size: 14px;
}

.footer-link:hover .footer-link-arrow {
  transform: translateX(4px);
  opacity: 1;
}

.footer-tagline {
  font-size: 11px;
  color: var(--page-muted);
  opacity: 0.7;
  font-style: italic;
  margin-top: 4px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-nav-link {
  font-size: 12px;
  color: var(--page-text);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.2s ease;
  width: fit-content;
}

.footer-nav-link:hover {
  opacity: 1;
  transform: translateX(4px);
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--page-muted);
  opacity: 0.7;
}

.footer-copyright {
  letter-spacing: 0.02em;
}

.footer-stats {
  letter-spacing: 0.05em;
  opacity: 0.8;
}

body[data-theme="dark"] .footer-link:hover {
  color: var(--accent);
}

/* Advanced Infographic Types */

/* Radial Progress Chart */
.radial-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 32px 0;
  padding: 24px;
}

.radial-item {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.radial-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.radial-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 8;
}

.radial-progress {
  fill: none;
  stroke: url(#radialGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 377;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.radial-center {
  position: relative;
  z-index: 2;
  text-align: center;
}

.radial-value {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), rgba(87, 83, 78, 0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--mono);
  line-height: 1.2;
}

.radial-label {
  font-size: 11px;
  color: var(--page-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
  font-weight: 600;
}

/* Feature Wheel / Capability Map */
.feature-wheel {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 32px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel-center {
  position: absolute;
  width: 80px;
  height: 80px;
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wheel-spoke {
  position: absolute;
  width: 2px;
  height: 110px;
  background: var(--line);
  transform-origin: bottom center;
  top: 50%;
  left: 50%;
  margin-top: -110px;
  margin-left: -1px;
}

.wheel-item {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-origin: center 150px;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 2;
}

.wheel-item:hover {
  background: var(--accent-medium);
  border-color: rgba(87, 83, 78, 0.6);
  transform: scale(1.1);
  box-shadow: 0 4px 12px var(--accent-strong);
}

.wheel-item-label {
  font-size: 9px;
  color: var(--page-text);
  text-align: center;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px;
}

/* Stacked Bar Chart */
.stacked-bar {
  margin: 24px 0;
}

.stacked-bar-item {
  margin-bottom: 16px;
}

.stacked-bar-label {
  font-size: 11px;
  color: var(--page-text);
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stacked-bar-container {
  height: 32px;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.stacked-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  position: relative;
}

.stacked-segment:hover {
  filter: brightness(1.1);
  transform: scaleY(1.05);
}

/* Heat Map / Intensity Grid */
.heatmap-grid {
  display: grid;
  gap: 12px;
  margin: 32px 0;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.03));
  border-radius: 16px;
  border: 1px solid var(--line);
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: white;
  border: 2px solid;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.heatmap-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.heatmap-cell::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  transition: transform 0.6s ease;
}

.heatmap-cell:hover {
  transform: translateY(-6px) scale(1.08);
  z-index: 2;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.heatmap-cell:hover::before {
  opacity: 1;
}

.heatmap-cell:hover::after {
  transform: rotate(45deg) translate(100%, 100%);
}

.heatmap-cell > * {
  position: relative;
  z-index: 1;
}

/* Unique colors for each model - based on their characteristics */
.heatmap-nano-banana {
  background: linear-gradient(135deg, #6366f1, #4f46e5, #4338ca);
  border-color: rgba(99, 102, 241, 0.9);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5);
}
.heatmap-nano-banana:hover {
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.6), 0 0 0 4px rgba(99, 102, 241, 0.3);
}

.heatmap-seedream {
  background: linear-gradient(135deg, #10b981, #059669, #047857);
  border-color: rgba(16, 185, 129, 0.9);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5);
}
.heatmap-seedream:hover {
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.6), 0 0 0 4px rgba(16, 185, 129, 0.3);
}

.heatmap-midjourney {
  background: linear-gradient(135deg, #a855f7, #9333ea, #7e22ce);
  border-color: rgba(168, 85, 247, 0.9);
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.5);
}
.heatmap-midjourney:hover {
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.6), 0 0 0 4px rgba(168, 85, 247, 0.3);
}

.heatmap-dalle {
  background: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
  border-color: rgba(245, 158, 11, 0.9);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5);
}
.heatmap-dalle:hover {
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.6), 0 0 0 4px rgba(245, 158, 11, 0.3);
}

.heatmap-stable-diff {
  background: linear-gradient(135deg, #06b6d4, #0891b2, #0e7490);
  border-color: rgba(6, 182, 212, 0.9);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.5);
}
.heatmap-stable-diff:hover {
  box-shadow: 0 12px 32px rgba(6, 182, 212, 0.6), 0 0 0 4px rgba(6, 182, 212, 0.3);
}

.heatmap-flux {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
  border-color: rgba(139, 92, 246, 0.9);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5);
}
.heatmap-flux:hover {
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.6), 0 0 0 4px rgba(139, 92, 246, 0.3);
}

.heatmap-sdxl {
  background: linear-gradient(135deg, #ec4899, #db2777, #be185d);
  border-color: rgba(236, 72, 153, 0.9);
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.5);
}
.heatmap-sdxl:hover {
  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.6), 0 0 0 4px rgba(236, 72, 153, 0.3);
}

.heatmap-ideogram {
  background: linear-gradient(135deg, #eab308, #ca8a04, #a16207);
  border-color: rgba(234, 179, 8, 0.9);
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.5);
}
.heatmap-ideogram:hover {
  box-shadow: 0 12px 32px rgba(234, 179, 8, 0.6), 0 0 0 4px rgba(234, 179, 8, 0.3);
}

/* Legacy classes for backward compatibility */
.heatmap-low {
  background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c);
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}
.heatmap-low:hover {
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.5), 0 0 0 4px rgba(239, 68, 68, 0.2);
}
.heatmap-medium {
  background: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
  border-color: rgba(251, 146, 60, 0.8);
  box-shadow: 0 4px 16px rgba(251, 146, 60, 0.4);
}
.heatmap-medium:hover {
  box-shadow: 0 12px 32px rgba(251, 146, 60, 0.5), 0 0 0 4px rgba(251, 146, 60, 0.2);
}
.heatmap-high {
  background: linear-gradient(135deg, #22c55e, #16a34a, #15803d);
  border-color: rgba(34, 197, 94, 0.8);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
}
.heatmap-high:hover {
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.5), 0 0 0 4px rgba(34, 197, 94, 0.2);
}
.heatmap-very-high {
  background: linear-gradient(135deg, #57534e, #44403c, #292524);
  border-color: rgba(87, 83, 78, 0.9);
  box-shadow: 0 4px 16px rgba(87, 83, 78, 0.5);
}
.heatmap-very-high:hover {
  box-shadow: 0 12px 32px rgba(87, 83, 78, 0.6), 0 0 0 4px var(--accent-strong);
}

/* Donut Chart */
.donut-chart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 24px auto;
}

.donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.donut-total {
  font-size: 24px;
  font-weight: 800;
  color: var(--page-text);
  font-family: var(--mono);
}

.donut-label {
  font-size: 10px;
  color: var(--page-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sparkline / Mini Trend */
.sparkline-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 16px 0;
}

.sparkline-label {
  font-size: 11px;
  color: var(--page-text);
  font-weight: 600;
  min-width: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sparkline-chart {
  flex: 1;
  height: 40px;
  position: relative;
}

.sparkline-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-area {
  fill: url(#sparklineGradient);
  opacity: 0.3;
}

.sparkline-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--mono);
  min-width: 60px;
  text-align: right;
}

/* Tag Cloud / Word Cloud */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  margin: 32px 0;
  min-height: 240px;
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.03));
  border-radius: 16px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.tag-cloud::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
  animation: tagCloudPulse 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tagCloudPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
  50% { transform: scale(1.1) rotate(180deg); opacity: 0.5; }
}

.tag-cloud-item {
  padding: 10px 20px;
  background: var(--card-bg);
  border: 2px solid var(--line);
  border-radius: 24px;
  font-size: 11px;
  color: var(--page-text);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.tag-cloud-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.tag-cloud-item:hover {
  background: linear-gradient(135deg, var(--accent-medium), rgba(139, 92, 246, 0.15));
  border-color: rgba(87, 83, 78, 0.6);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 24px var(--accent-strong), 0 4px 12px rgba(0, 0, 0, 0.2);
  color: var(--page-text);
}

.tag-cloud-item:hover::before {
  left: 100%;
}

.tag-cloud-size-1 { 
  font-size: 10px; 
  padding: 8px 14px; 
  opacity: 0.7;
  border-width: 1px;
}
.tag-cloud-size-2 { 
  font-size: 12px; 
  padding: 10px 18px; 
  opacity: 0.85;
  border-width: 1.5px;
}
.tag-cloud-size-3 { 
  font-size: 14px; 
  padding: 12px 22px; 
  opacity: 1;
  border-width: 2px;
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.05));
}
.tag-cloud-size-4 { 
  font-size: 16px; 
  padding: 14px 26px; 
  opacity: 1;
  border-width: 2px;
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.08));
  box-shadow: 0 4px 8px var(--accent-medium);
}
.tag-cloud-size-5 { 
  font-size: 18px; 
  padding: 16px 30px; 
  opacity: 1;
  border-width: 2.5px;
  background: linear-gradient(135deg, var(--accent-medium), rgba(139, 92, 246, 0.12));
  box-shadow: 0 6px 12px var(--accent-medium);
  border-color: rgba(87, 83, 78, 0.4);
}

/* Process Steps with Connectors */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 40px 0;
  position: relative;
  padding: 24px;
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.02));
  border-radius: 16px;
  border: 1px solid var(--line);
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
}

.process-step:hover {
  background: var(--accent-light);
  transform: translateX(4px);
}

.process-step::after {
  content: '';
  position: absolute;
  left: 32px;
  top: 56px;
  width: 3px;
  height: calc(100% + 24px);
  background: linear-gradient(180deg, 
    rgba(87, 83, 78, 0.4) 0%, 
    var(--accent-medium) 50%, 
    var(--accent-medium) 100%);
  z-index: 0;
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-strong);
  animation: processLinePulse 2s ease-in-out infinite;
}

@keyframes processLinePulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.process-step:last-child::after {
  display: none;
}

.process-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #57534e, #44403c, #292524);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  font-family: var(--mono);
  flex-shrink: 0;
  z-index: 2;
  position: relative;
  box-shadow: 
    0 4px 16px rgba(87, 83, 78, 0.4),
    0 0 0 4px var(--accent-medium),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.process-step:hover .process-number {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 
    0 8px 24px rgba(87, 83, 78, 0.5),
    0 0 0 6px var(--accent-medium),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #57534e, #44403c, #292524);
}

.process-number::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-strong), rgba(139, 92, 246, 0.3));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: processNumberGlow 2s ease-in-out infinite;
}

@keyframes processNumberGlow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
}

.process-content {
  flex: 1;
  padding: 20px;
  background: linear-gradient(135deg, var(--card-bg), var(--accent-light));
  border: 1px solid var(--line);
  border-radius: 12px;
  border-left: 4px solid;
  border-image: linear-gradient(180deg, #57534e, #44403c, #292524) 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.process-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #57534e, #44403c, #292524);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.process-step:hover .process-content {
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.05));
  border-color: var(--accent-strong);
  box-shadow: 0 8px 24px var(--accent-medium), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateX(4px);
}

.process-step:hover .process-content::before {
  opacity: 1;
}

.process-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--page-text);
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--page-text), rgba(87, 83, 78, 0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.process-desc {
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.6;
  opacity: 0.9;
}

/* Comparison Slider */
.comparison-slider {
  position: relative;
  margin: 32px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.comparison-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.comparison-side {
  padding: 20px;
  text-align: center;
}

.comparison-side.before {
  background: rgba(239, 68, 68, 0.05);
  border-right: 1px solid var(--line);
}

.comparison-side.after {
  background: rgba(34, 197, 94, 0.05);
}

.comparison-side-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--page-muted);
  margin-bottom: 12px;
  font-weight: 700;
}

.comparison-side-value {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--mono);
  margin-bottom: 8px;
}

.comparison-side.before .comparison-side-value {
  color: #ef4444;
}

.comparison-side.after .comparison-side-value {
  color: #22c55e;
}

.comparison-side-desc {
  font-size: 11px;
  color: var(--page-text);
  opacity: 0.8;
}

/* Table of Contents */
.guide-toc {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
}

.guide-toc-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--page-text);
  margin-bottom: 16px;
  font-family: var(--mono);
}

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

.guide-toc-item {
  margin-bottom: 10px;
}

.guide-toc-item a {
  display: block;
  padding: 8px 12px;
  color: var(--page-text);
  text-decoration: none;
  font-size: 13px;
  font-family: var(--mono);
  border-radius: 8px;
  transition: all 0.2s ease;
  opacity: 0.85;
}

.guide-toc-item a:hover {
  background: var(--accent-medium);
  opacity: 1;
  transform: translateX(4px);
}

.guide-toc-item.toc-h2 {
  padding-left: 0;
}

.guide-toc-item.toc-h3 {
  padding-left: 20px;
  font-size: 12px;
  opacity: 0.75;
}

.guide-toc-item.toc-h3 a {
  opacity: 0.7;
}

.guide-toc-item.toc-h3 a:hover {
  opacity: 1;
}

/* Key Takeaways */
.guide-key-takeaways {
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.08));
  border: 1px solid var(--accent-medium);
  border-radius: 18px;
  padding: 24px;
  margin: 32px 0;
  box-shadow: 0 4px 16px var(--accent-medium);
}

.guide-key-takeaways-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--page-text);
  margin-bottom: 16px;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-key-takeaways-title::before {
  content: "→";
  font-size: 16px;
  color: rgba(87, 83, 78, 0.8);
}

.guide-key-takeaways-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guide-key-takeaways-item {
  padding: 12px 0;
  padding-left: 24px;
  position: relative;
  font-size: 13px;
  line-height: 1.7;
  color: var(--page-text);
  font-family: var(--mono);
  opacity: 0.9;
}

.guide-key-takeaways-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: rgba(87, 83, 78, 0.8);
  font-size: 18px;
  font-weight: 700;
}

.guide-key-takeaways-item:not(:last-child) {
  border-bottom: 1px solid var(--accent-medium);
}

/* Last Updated */
.guide-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--page-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guide-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.guide-meta-item::before {
  content: "•";
  opacity: 0.5;
}

/* API Tools Grid */
.api-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.api-tool-card {
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: cardSlideIn 0.5s ease-out backwards;
}

.api-tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-medium), transparent);
  transition: left 0.5s ease;
}

.api-tool-card:hover::before {
  left: 100%;
}

.api-tool-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px var(--accent-medium), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

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

.api-tool-card:nth-child(1) { animation-delay: 0.05s; }
.api-tool-card:nth-child(2) { animation-delay: 0.1s; }
.api-tool-card:nth-child(3) { animation-delay: 0.15s; }
.api-tool-card:nth-child(4) { animation-delay: 0.2s; }
.api-tool-card:nth-child(5) { animation-delay: 0.25s; }
.api-tool-card:nth-child(6) { animation-delay: 0.3s; }

.api-tool-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--page-text);
  margin-bottom: 6px;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}

.api-tool-card:hover .api-tool-name {
  color: var(--accent);
}

.api-tool-desc {
  font-size: 11px;
  color: var(--page-muted);
  opacity: 0.8;
  margin-bottom: 10px;
  transition: opacity 0.3s ease;
  position: relative;
  z-index: 1;
}

.api-tool-card:hover .api-tool-desc {
  opacity: 1;
}

.api-tool-status {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--mono);
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-block;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.api-tool-card:hover .api-tool-status {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.5);
  transform: scale(1.05);
}

/* Error Handling Flow */
.error-handling-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.error-step {
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  border-left: 4px solid rgba(239, 68, 68, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: errorStepFadeIn 0.5s ease-out backwards;
}

.error-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, rgba(239, 68, 68, 1), rgba(239, 68, 68, 0.6));
  transition: width 0.3s ease;
}

.error-step:hover::before {
  width: 100%;
  opacity: 0.05;
}

.error-step:hover {
  border-color: rgba(239, 68, 68, 1);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateX(4px);
}

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

.error-step:nth-child(1) { animation-delay: 0.1s; }
.error-step:nth-child(2) { animation-delay: 0.2s; }
.error-step:nth-child(3) { animation-delay: 0.3s; }
.error-step:nth-child(4) { animation-delay: 0.4s; }

.error-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--page-text);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.error-step:hover .error-label {
  color: rgba(239, 68, 68, 1);
}

.error-action {
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.6;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.error-step:hover .error-action {
  color: var(--page-text);
}

/* Rate Limit Info */
.rate-limit-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.rate-limit-item {
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: rateLimitSlideIn 0.5s ease-out backwards;
}

.rate-limit-item::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, var(--accent-medium), transparent);
  border-radius: 50%;
  transform: translate(30px, -30px);
  transition: transform 0.5s ease;
}

.rate-limit-item:hover::after {
  transform: translate(20px, -20px) scale(1.5);
}

.rate-limit-item:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px var(--accent-medium), 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

@keyframes rateLimitSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.rate-limit-item:nth-child(1) { animation-delay: 0.1s; }
.rate-limit-item:nth-child(2) { animation-delay: 0.2s; }
.rate-limit-item:nth-child(3) { animation-delay: 0.3s; }

.rate-limit-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--page-text);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.rate-limit-value {
  font-size: 12px;
  color: var(--page-muted);
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.rate-limit-item:hover .rate-limit-value {
  color: var(--accent);
}

/* Production Checklist */
.production-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: checklistItemFadeIn 0.4s ease-out backwards;
}

.checklist-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, rgba(34, 197, 94, 1), rgba(34, 197, 94, 0.6));
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.checklist-item:hover::before {
  transform: scaleY(1);
}

.checklist-item:hover {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.03), var(--card-bg));
}

@keyframes checklistItemFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.checklist-item:nth-child(1) { animation-delay: 0.05s; }
.checklist-item:nth-child(2) { animation-delay: 0.1s; }
.checklist-item:nth-child(3) { animation-delay: 0.15s; }
.checklist-item:nth-child(4) { animation-delay: 0.2s; }
.checklist-item:nth-child(5) { animation-delay: 0.25s; }
.checklist-item:nth-child(6) { animation-delay: 0.3s; }

.checklist-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
  color: rgba(34, 197, 94, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  border: 2px solid rgba(34, 197, 94, 0.3);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.checklist-item:hover .checklist-check {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.2));
  border-color: rgba(34, 197, 94, 0.6);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.checklist-text {
  font-size: 13px;
  color: var(--page-text);
  line-height: 1.5;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.checklist-item:hover .checklist-text {
  color: var(--page-text);
  font-weight: 500;
}

/* Pricing Comparison */
.pricing-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.pricing-item {
  padding: 24px;
  background: var(--card-bg);
  border: 2px solid var(--line);
  border-radius: 16px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: pricingCardFadeIn 0.5s ease-out backwards;
}

.pricing-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--accent-medium), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.pricing-item:hover::before {
  opacity: 1;
}

.pricing-item:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 32px var(--accent-medium), 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-8px) scale(1.02);
}

@keyframes pricingCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pricing-item:nth-child(1) { animation-delay: 0.1s; }
.pricing-item:nth-child(2) { animation-delay: 0.2s; }
.pricing-item:nth-child(3) { animation-delay: 0.3s; }
.pricing-item:nth-child(4) { animation-delay: 0.4s; }
.pricing-item:nth-child(5) { animation-delay: 0.5s; }
.pricing-item:nth-child(6) { animation-delay: 0.6s; }

.pricing-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--page-text);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.pricing-item:hover .pricing-name {
  color: var(--accent);
}

.pricing-value {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), rgba(87, 83, 78, 0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.pricing-item:hover .pricing-value {
  transform: scale(1.1);
}

.pricing-desc {
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.5;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.pricing-item:hover .pricing-desc {
  color: var(--page-text);
}

/* Decision Flow */
.decision-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.decision-node {
  padding: 16px 20px;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.decision-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.decision-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--page-text);
  margin-bottom: 6px;
}

.decision-desc {
  font-size: 13px;
  color: var(--page-muted);
  line-height: 1.5;
}

.decision-branch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
  margin-top: 16px;
}

.decision-flow .flow-step {
  animation: decisionStepFadeIn 0.5s ease-out backwards;
}

.decision-flow .flow-step:nth-child(1) { animation-delay: 0.1s; }
.decision-flow .flow-step:nth-child(2) { animation-delay: 0.2s; }
.decision-flow .flow-step:nth-child(3) { animation-delay: 0.3s; }
.decision-flow .flow-step:nth-child(4) { animation-delay: 0.4s; }

@keyframes decisionStepFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Use Case Breakdown */
.use-case-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.use-case-item {
  animation: useCaseFadeIn 0.5s ease-out backwards;
}

.use-case-item:nth-child(1) { animation-delay: 0.1s; }
.use-case-item:nth-child(2) { animation-delay: 0.2s; }
.use-case-item:nth-child(3) { animation-delay: 0.3s; }
.use-case-item:nth-child(4) { animation-delay: 0.4s; }

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

.use-case-badge {
  padding: 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.use-case-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.use-case-badge:hover::before {
  left: 100%;
}

.use-case-badge:hover {
  transform: translateY(-6px) translateX(4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  border-left-width: 5px !important;
}

.use-case-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-medium));
  border: 2px solid rgba(87, 83, 78, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--page-text);
  flex-shrink: 0;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

.use-case-badge:hover .use-case-number {
  transform: scale(1.15) rotate(5deg);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-medium));
  border-color: rgba(87, 83, 78, 0.6);
  box-shadow: 0 0 20px rgba(87, 83, 78, 0.4);
}

.use-case-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.use-case-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--page-text);
  margin-bottom: 6px;
  transition: color 0.3s ease;
}

.use-case-badge:hover .use-case-title {
  color: var(--accent);
}

.use-case-desc {
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.5;
  transition: color 0.3s ease;
}

.use-case-badge:hover .use-case-desc {
  color: var(--page-text);
}

/* Capability Scores */
.capability-scores {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.capability-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: capabilityItemFadeIn 0.6s ease-out backwards;
}

.capability-item:nth-child(1) { animation-delay: 0.1s; }
.capability-item:nth-child(2) { animation-delay: 0.2s; }
.capability-item:nth-child(3) { animation-delay: 0.3s; }
.capability-item:nth-child(4) { animation-delay: 0.4s; }

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

.capability-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--page-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.capability-bar {
  width: 100%;
  height: 32px;
  background: var(--line);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.capability-fill {
  height: 100%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  color: white;
  font-size: 11px;
  font-weight: 700;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: capabilityFillSlide 1s ease-out backwards;
}

.capability-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes capabilityFillSlide {
  from {
    width: 0 !important;
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.capability-item:hover .capability-fill {
  box-shadow: 0 0 20px rgba(87, 83, 78, 0.5);
  transform: scaleY(1.05);
}
}

.guide-meta-item:first-child::before {
  display: none;
}

@media (max-width: 720px) {
  .footer {
    margin-top: 60px;
    padding: 40px 0 30px;
  }
  
  .footer-content {
    padding: 0 16px;
  }
  
  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 32px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding-top: 24px;
  }
  
  .guide-toc,
  .guide-key-takeaways {
    padding: 20px;
    margin: 24px 0;
  }
  
  .guide-key-takeaways-item {
    font-size: 12px;
    padding-left: 20px;
  }
}

/* Creative Visual Types for Upcoming Guides */

/* Timeline Visualization - Horizontal with Icons */
.timeline-horizontal {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 140px;
  position: relative;
  flex-shrink: 0;
}

.timeline-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-strong));
  border: 3px solid rgba(87, 83, 78, 0.5);
  color: var(--page-text);
  box-shadow: 0 4px 12px var(--accent-medium);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.timeline-item:nth-child(2) .timeline-icon {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.3));
  border-color: rgba(236, 72, 153, 0.5);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}

.timeline-item:nth-child(3) .timeline-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3));
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.timeline-item:nth-child(4) .timeline-icon {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.3));
  border-color: rgba(251, 146, 60, 0.5);
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.2);
}

.timeline-item:hover .timeline-icon {
  transform: scale(1.15) translateY(-4px);
  box-shadow: 0 8px 20px rgba(87, 83, 78, 0.4);
}

.timeline-connector {
  position: absolute;
  top: 28px;
  left: 50%;
  width: calc(100% + 20px);
  height: 3px;
  background: linear-gradient(90deg, rgba(87, 83, 78, 0.4), rgba(236, 72, 153, 0.4), rgba(34, 197, 94, 0.4));
  z-index: 1;
  border-radius: 2px;
}

.timeline-item:last-child .timeline-connector {
  display: none;
}

.timeline-content {
  text-align: center;
  padding-top: 8px;
}

.timeline-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 4px;
}

.timeline-desc {
  font-size: 11px;
  color: var(--page-muted);
  line-height: 1.4;
}

.timeline-date {
  font-size: 10px;
  color: var(--page-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Feature Grid Cards with Icons */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.feature-card {
  padding: 24px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-medium));
  border: 2px solid var(--accent-medium);
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--accent-medium) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(236, 72, 153, 0.1));
  border-color: rgba(236, 72, 153, 0.2);
}

.feature-card:nth-child(3) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.1));
  border-color: rgba(34, 197, 94, 0.2);
}

.feature-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.05), rgba(251, 146, 60, 0.1));
  border-color: rgba(251, 146, 60, 0.2);
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(87, 83, 78, 0.5);
  box-shadow: 0 8px 24px var(--accent-medium);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-strong));
  color: var(--page-text);
  font-weight: 700;
}

.feature-card:nth-child(2) .feature-icon {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.3));
}

.feature-card:nth-child(3) .feature-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3));
}

.feature-card:nth-child(4) .feature-icon {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.3));
}

.feature-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 8px;
}

.feature-card-desc {
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.5;
}

/* Feature Grid Item (alternative structure) */
.feature-grid-item {
  padding: 24px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-medium));
  border: 2px solid var(--accent-medium);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.feature-grid-item::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--accent-medium) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.feature-grid-item:hover::before {
  opacity: 1;
}

.feature-grid-item:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(87, 83, 78, 0.5);
  box-shadow: 0 12px 32px var(--accent-strong);
}

.feature-grid-item:nth-child(1) {
  background: linear-gradient(135deg, var(--accent-light), var(--accent-medium));
  border-color: var(--accent-strong);
}

.feature-grid-item:nth-child(1) .feature-icon {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-strong));
}

.feature-grid-item:nth-child(2) {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(236, 72, 153, 0.12));
  border-color: rgba(236, 72, 153, 0.3);
}

.feature-grid-item:nth-child(2) .feature-icon {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(236, 72, 153, 0.35));
}

.feature-grid-item:nth-child(2):hover {
  border-color: rgba(236, 72, 153, 0.5);
  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.25);
}

.feature-grid-item:nth-child(3) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.12));
  border-color: rgba(34, 197, 94, 0.3);
}

.feature-grid-item:nth-child(3) .feature-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.35));
}

.feature-grid-item:nth-child(3):hover {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.25);
}

.feature-grid-item:nth-child(4) {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.08), rgba(251, 146, 60, 0.12));
  border-color: rgba(251, 146, 60, 0.3);
}

.feature-grid-item:nth-child(4) .feature-icon {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.25), rgba(251, 146, 60, 0.35));
}

.feature-grid-item:nth-child(4):hover {
  border-color: rgba(251, 146, 60, 0.5);
  box-shadow: 0 12px 32px rgba(251, 146, 60, 0.25);
}

.feature-grid-item .feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-strong));
  transition: transform 0.3s ease;
}

.feature-grid-item:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-grid-item .feature-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 8px;
  font-family: var(--mono);
}

.feature-grid-item .feature-desc {
  font-size: 13px;
  color: var(--page-muted);
  line-height: 1.5;
  font-family: var(--mono);
}

/* Capability Scores */
.capability-scores {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.capability-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.capability-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--page-text);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.capability-label .capability-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--page-text);
  background: var(--card-bg);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  position: static;
  transform: none;
  z-index: auto;
}

.capability-bar {
  position: relative;
  height: 32px;
  background: var(--accent-medium);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.capability-fill {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  font-family: var(--mono);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.capability-value {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--page-text);
  font-family: var(--mono);
  z-index: 2;
}

/* Workflow Integration */
.workflow-integration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 16px;
}

.workflow-step {
  flex: 1;
  min-width: 140px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-medium));
  border: 2px solid var(--accent-medium);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.workflow-step:hover {
  transform: translateY(-4px);
  border-color: rgba(87, 83, 78, 0.4);
  box-shadow: 0 8px 24px var(--accent-medium);
}

.workflow-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.workflow-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 6px;
  font-family: var(--mono);
}

.workflow-desc {
  font-size: 12px;
  color: var(--page-muted);
  font-family: var(--mono);
}

.workflow-arrow {
  font-size: 24px;
  color: var(--page-muted);
  font-weight: 700;
  flex-shrink: 0;
}

/* Speed Comparison */
.speed-comparison {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.speed-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.speed-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--page-text);
  font-family: var(--mono);
}

.speed-bar {
  position: relative;
  height: 36px;
  background: var(--accent-medium);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.speed-fill {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  font-family: var(--mono);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.speed-time {
  font-size: 11px;
  color: var(--page-muted);
  font-family: var(--mono);
  margin-top: 4px;
}

/* Access Levels */
.access-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.access-card {
  padding: 24px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-medium));
  border: 2px solid var(--accent-medium);
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.access-card:hover {
  transform: translateY(-4px);
  border-color: rgba(87, 83, 78, 0.4);
  box-shadow: 0 8px 24px var(--accent-medium);
}

.access-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.08), rgba(251, 146, 60, 0.12));
  border-color: rgba(251, 146, 60, 0.2);
}

.access-card:nth-child(2):hover {
  border-color: rgba(251, 146, 60, 0.4);
  box-shadow: 0 8px 24px rgba(251, 146, 60, 0.2);
}

.access-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.access-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 6px;
  font-family: var(--mono);
}

.access-desc {
  font-size: 12px;
  color: var(--page-muted);
  margin-bottom: 16px;
  font-family: var(--mono);
}

.access-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.access-feature {
  font-size: 12px;
  color: var(--page-text);
  font-family: var(--mono);
}

/* Mobile optimizations for new visuals */
@media (max-width: 768px) {
  .workflow-integration {
    flex-direction: column;
  }
  
  .workflow-arrow {
    transform: rotate(90deg);
    margin: 8px 0;
  }
  
  .access-levels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .feature-grid-item {
    padding: 20px;
  }
  
  .feature-grid-item .feature-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .capability-bar,
  .speed-bar {
    height: 28px;
  }
  
  .workflow-step {
    min-width: 100%;
  }
}

/* Icon-Based Stat Cards */
.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.stat-card {
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-medium));
  border: 1px solid var(--accent-medium);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.stat-card:hover::after {
  left: 100%;
}

.stat-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(236, 72, 153, 0.12));
  border-color: rgba(236, 72, 153, 0.2);
}

.stat-card:nth-child(3) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.12));
  border-color: rgba(34, 197, 94, 0.2);
}

.stat-card:nth-child(4) {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.08), rgba(251, 146, 60, 0.12));
  border-color: rgba(251, 146, 60, 0.2);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-medium);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-strong), rgba(87, 83, 78, 0.4));
  color: var(--page-text);
  flex-shrink: 0;
}

.stat-card:nth-child(2) .stat-icon {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(236, 72, 153, 0.4));
}

.stat-card:nth-child(3) .stat-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.4));
}

.stat-card:nth-child(4) .stat-icon {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(251, 146, 60, 0.4));
}

.stat-content {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--page-text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 11px;
  color: var(--page-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Visual Hierarchy Tree */
.hierarchy-tree {
  padding: 30px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
  position: relative;
}

.tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
}

.tree-node-main {
  padding: 20px 28px;
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-strong));
  border: 2px solid rgba(87, 83, 78, 0.4);
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--page-text);
  box-shadow: 0 4px 12px var(--accent-medium);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.tree-node-main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px var(--accent-strong);
}

.tree-branches {
  display: flex;
  gap: 20px;
  justify-content: center;
  position: relative;
}

.tree-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}

.tree-connector {
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, rgba(87, 83, 78, 0.4), rgba(236, 72, 153, 0.4));
  margin: -8px 0;
}

.tree-branch-node {
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(236, 72, 153, 0.2));
  border: 2px solid rgba(236, 72, 153, 0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--page-text);
  text-align: center;
  min-width: 120px;
  transition: all 0.3s ease;
}

.tree-branch-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}

.tree-branch-node:nth-child(2) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.2));
  border-color: rgba(34, 197, 94, 0.3);
}

.tree-branch-node:nth-child(3) {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(251, 146, 60, 0.2));
  border-color: rgba(251, 146, 60, 0.3);
}

/* Before/After Comparison Cards */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.before-card,
.after-card {
  padding: 24px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.before-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.15));
  border: 2px solid rgba(239, 68, 68, 0.3);
}

.after-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.15));
  border: 2px solid rgba(34, 197, 94, 0.3);
}

.before-after-label {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.before-card .before-after-label {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.after-card .before-after-label {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.before-after-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 12px;
  margin-top: 8px;
}

.before-after-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.before-after-item {
  padding: 8px 0;
  font-size: 13px;
  color: var(--page-text);
  position: relative;
  padding-left: 20px;
}

.before-after-item::before {
  content: '•';
  position: absolute;
  left: 0;
  font-size: 18px;
  line-height: 1;
}

.before-card .before-after-item::before {
  color: #ef4444;
}

.after-card .before-after-item::before {
  color: #22c55e;
}

/* Network/Connection Diagram */
.network-diagram {
  padding: 30px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
  position: relative;
  min-height: 300px;
}

.network-node {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--page-text);
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-strong));
  border: 3px solid rgba(87, 83, 78, 0.5);
  box-shadow: 0 4px 12px var(--accent-medium);
  transition: all 0.3s ease;
  z-index: 2;
}

.network-node:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(87, 83, 78, 0.4);
  z-index: 10;
}

.network-node:nth-child(2) {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.3));
  border-color: rgba(236, 72, 153, 0.5);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}

.network-node:nth-child(3) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3));
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.network-connection {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, rgba(87, 83, 78, 0.4), rgba(236, 72, 153, 0.4));
  z-index: 1;
  transform-origin: left center;
}

/* Animated Metric Cards */
.metric-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.metric-card {
  padding: 24px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-medium));
  border: 1px solid var(--accent-medium);
  border-radius: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, var(--accent-medium), transparent);
  animation: rotate 3s linear infinite;
}

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

.metric-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(236, 72, 153, 0.12));
  border-color: rgba(236, 72, 153, 0.2);
}

.metric-card:nth-child(3) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.12));
  border-color: rgba(34, 197, 94, 0.2);
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--accent-medium);
}

.metric-number {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, #57534e, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  line-height: 1;
}

.metric-card:nth-child(2) .metric-number {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-card:nth-child(3) .metric-number {
  background: linear-gradient(135deg, #22c55e, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-label {
  font-size: 13px;
  color: var(--page-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Visual Breakdown Cards */
.breakdown-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.breakdown-card {
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-medium));
  border: 2px solid var(--accent-strong);
  border-radius: 10px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.breakdown-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(87, 83, 78, 0.5), rgba(236, 72, 153, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.breakdown-card:hover::after {
  opacity: 1;
}

.breakdown-card:nth-child(2) {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(236, 72, 153, 0.15));
  border-color: rgba(236, 72, 153, 0.3);
}

.breakdown-card:nth-child(3) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.15));
  border-color: rgba(34, 197, 94, 0.3);
}

.breakdown-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 20px var(--accent-medium);
}

.breakdown-percentage {
  font-size: 32px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 8px;
  line-height: 1;
}

.breakdown-label {
  font-size: 12px;
  color: var(--page-muted);
  font-weight: 500;
}

/* Creative Fact Boxes */
.fact-box {
  padding: 24px;
  background: linear-gradient(135deg, var(--accent-medium), rgba(168, 85, 247, 0.1));
  border-left: 4px solid rgba(87, 83, 78, 0.6);
  border-radius: 8px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

.fact-box::before {
  content: '💡';
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  opacity: 0.2;
}

.fact-box-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fact-box-content {
  font-size: 14px;
  color: var(--page-text);
  line-height: 1.6;
}

/* Progress Rings with Multiple Metrics */
.progress-rings {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 30px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
  flex-wrap: wrap;
}

.progress-ring {
  position: relative;
  width: 120px;
  height: 120px;
}

.progress-ring-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.progress-ring-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 8;
}

.progress-ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.progress-ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-ring-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--page-text);
  line-height: 1;
  margin-bottom: 4px;
}

.progress-ring-label {
  font-size: 11px;
  color: var(--page-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Unique Infographics for Cost Optimization Guide */

/* Sankey Diagram - Cost Flow Visualization */
.sankey-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.sankey-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.sankey-source {
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--accent-medium), var(--accent-strong));
  border: 2px solid rgba(87, 83, 78, 0.4);
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--page-text);
  min-width: 120px;
  text-align: center;
  box-shadow: 0 2px 8px var(--accent-medium);
}

.sankey-connector {
  flex: 1;
  height: 4px;
  background: linear-gradient(90deg, rgba(87, 83, 78, 0.6), rgba(34, 197, 94, 0.6));
  position: relative;
  border-radius: 2px;
}

.sankey-connector::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid rgba(34, 197, 94, 0.6);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.sankey-target {
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.25));
  border: 2px solid rgba(34, 197, 94, 0.4);
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--page-text);
  min-width: 120px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
}

.sankey-value {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--page-muted);
  background: var(--card-bg);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Waterfall Chart - Cost Breakdown */
.waterfall-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.waterfall-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.waterfall-label {
  min-width: 140px;
  font-size: 12px;
  font-weight: 500;
  color: var(--page-text);
}

.waterfall-bar-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  height: 32px;
  position: relative;
}

.waterfall-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.waterfall-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.waterfall-bar-positive {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
}

.waterfall-bar-negative {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9));
}

.waterfall-bar-neutral {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.9), rgba(71, 85, 105, 0.9));
}

.waterfall-value {
  min-width: 80px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--page-text);
}

/* Scatter Plot - Cost vs Quality */
.scatter-plot {
  position: relative;
  padding: 30px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--line);
  min-height: 400px;
}

.scatter-plot-grid {
  position: absolute;
  inset: 30px;
  border-left: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}

.scatter-point {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.scatter-point:hover {
  transform: translate(-50%, 50%) scale(1.5);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.scatter-point-label {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--page-text);
  background: var(--card-bg);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.scatter-point:hover .scatter-point-label {
  opacity: 1;
}

.scatter-axis-label {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  color: var(--page-muted);
}

.scatter-axis-x {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.scatter-axis-y {
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}

/* Funnel Chart - Optimization Process */
.funnel-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 30px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.funnel-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-bottom: -1px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.funnel-stage:hover {
  transform: scale(1.02);
  z-index: 5;
}

.funnel-stage-1 {
  width: 100%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.3));
  border: 2px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px 8px 0 0;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

.funnel-stage-2 {
  width: 85%;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(234, 88, 12, 0.3));
  border: 2px solid rgba(251, 146, 60, 0.4);
  clip-path: polygon(5% 0, 95% 0, 90% 100%, 10% 100%);
}

.funnel-stage-3 {
  width: 70%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.3));
  border: 2px solid rgba(251, 191, 36, 0.4);
  clip-path: polygon(10% 0, 90% 0, 85% 100%, 15% 100%);
}

.funnel-stage-4 {
  width: 55%;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.3));
  border: 2px solid rgba(34, 197, 94, 0.4);
  border-radius: 0 0 8px 8px;
  clip-path: polygon(15% 0, 85% 0, 80% 100%, 20% 100%);
}

.funnel-stage-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--page-text);
  text-align: center;
}

.funnel-stage-value {
  position: absolute;
  right: 15px;
  font-size: 11px;
  font-weight: 600;
  color: var(--page-muted);
  background: var(--card-bg);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Prompts Page - Terminal/Cursor AI Focused Design */
.featured-link {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--accent);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: all 0.2s ease;
  display: inline-block;
  background: var(--card-bg);
  letter-spacing: 0.3px;
}

.featured-link:hover {
  border-color: var(--accent);
  background: rgba(113, 113, 122, 0.05);
  transform: translateY(-1px);
}

body[data-theme="dark"] .featured-link:hover {
  background: rgba(113, 113, 122, 0.1);
}

/* Terminal-focused styling */
.terminal-title {
  letter-spacing: -0.2px;
  font-weight: 700;
}

.terminal-text {
  letter-spacing: 0.1px;
  font-weight: 400;
}

.terminal-badge {
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 9px !important;
}

.terminal-code-block {
  background: var(--card-bg) !important;
  border: 1px solid var(--line) !important;
  font-family: var(--mono) !important;
}

body[data-theme="light"] .terminal-code-block {
  background: #f9fafb !important;
  border-color: #e4e4e7 !important;
}

body[data-theme="dark"] .terminal-code-block {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: #1a1a1a !important;
}

.terminal-tag {
  text-transform: lowercase;
  letter-spacing: 0.4px;
}

.terminal-footer {
  font-family: var(--mono) !important;
}

.terminal-meta {
  letter-spacing: 0.3px;
  text-transform: none;
}

.terminal-btn {
  transition: all 0.2s ease;
}

.terminal-btn:hover {
  opacity: 1 !important;
  color: var(--accent) !important;
}

.terminal-btn-small {
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
}

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

.view-btn:hover {
  border-color: var(--accent) !important;
  background: rgba(113, 113, 122, 0.05) !important;
}

.copy-btn:hover {
  background: var(--page-text) !important;
  transform: translateY(-1px);
}

body[data-theme="dark"] .copy-btn:hover {
  background: var(--page-text) !important;
}

.prompt-card {
  position: relative;
  overflow: hidden;
}

.prompt-card-header {
  position: relative;
  z-index: 1;
}

.category-badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.prompt-card:hover .category-badge {
  transform: scale(1.05);
}

.prompt-preview {
  position: relative;
  transition: all 0.2s ease;
}

.prompt-card:hover .prompt-preview {
  border-color: var(--accent);
  background: rgba(113, 113, 122, 0.02);
}

body[data-theme="light"] .prompt-preview {
  background: #f9fafb;
}

body[data-theme="light"] .prompt-card:hover .prompt-preview {
  background: #f3f4f6;
}

.copy-badge {
  transition: all 0.2s ease;
  cursor: pointer;
}

.prompt-card:hover .copy-badge {
  background: var(--page-text);
  transform: scale(1.05);
}

body[data-theme="dark"] .prompt-card:hover .copy-badge {
  background: var(--page-text);
}

/* Improved card hover effects */
.prompt-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.prompt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);
  border-color: var(--accent);
}

body[data-theme="light"] .prompt-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
}

body[data-theme="dark"] .prompt-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  border-color: var(--accent);
}

/* Terminal-style command input */
.command {
  font-family: var(--mono) !important;
  letter-spacing: 0.2px;
}

.command-input {
  font-family: var(--mono) !important;
  letter-spacing: 0.1px;
}

/* Enhanced terminal aesthetic */
.controls-title {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}

.results-title {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}

.kicker {
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Prompt Modal */
.prompt-modal {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.prompt-modal-content {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.modal-close:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}

.modal-copy-btn:hover {
  background: var(--page-text) !important;
  transform: translateY(-1px);
}

body[data-theme="dark"] .prompt-modal-content {
  background: #000000;
  border-color: #1a1a1a;
}

/* Creative Infographic Styles - Less Templated */

/* Quality Score Meter - Radial Progress with Visual Impact */
.quality-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  margin: 0;
}

.quality-meter-ring {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

.quality-meter-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  position: relative;
  z-index: 1;
}

.quality-meter-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  pointer-events: none;
  width: 100%;
}

.quality-meter-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--page-text);
  line-height: 1.2;
  margin-bottom: 4px;
  display: block;
}

.quality-meter-label {
  font-size: 10px;
  color: var(--page-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  white-space: nowrap;
}

.quality-meter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  margin: 24px 0;
  width: 100%;
}

/* Problem-Solution Connection Diagram */
.problem-solution-flow {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0;
  padding: 24px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(16, 185, 129, 0.05));
  border-radius: 16px;
  border: 1px solid var(--line);
}

.problem-solution-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
  position: relative;
}

.problem-solution-item:hover {
  transform: translateX(4px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.problem-solution-item::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent var(--accent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.problem-solution-item:hover::before {
  opacity: 1;
}

.problem-solution-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.2));
  border: 2px solid rgba(239, 68, 68, 0.3);
}

.problem-solution-icon.solution {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2));
  border-color: rgba(16, 185, 129, 0.3);
}

.problem-solution-content {
  flex: 1;
}

.problem-solution-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 4px;
}

.problem-solution-desc {
  font-size: 11px;
  color: var(--page-muted);
  line-height: 1.5;
}

.problem-solution-arrow {
  font-size: 20px;
  color: var(--accent);
  opacity: 0.6;
  margin: 8px 0;
  text-align: center;
  transition: transform 0.3s ease;
}

.problem-solution-flow:hover .problem-solution-arrow {
  transform: translateY(4px);
}

/* Visual Workflow Connection */
.workflow-connection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin: 32px 0;
  padding: 32px;
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.workflow-connection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}

.workflow-node {
  position: relative;
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.05));
  border-radius: 12px;
  border: 2px solid var(--accent-medium);
  transition: all 0.3s ease;
  cursor: pointer;
}

.workflow-node:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px var(--accent-medium);
}

.workflow-node::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: var(--accent-medium) transparent transparent transparent;
  transition: border-color 0.3s ease;
}

.workflow-node:hover::after {
  border-color: var(--accent) transparent transparent transparent;
}

.workflow-node-icon {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
}

.workflow-node-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 8px;
}

.workflow-node-desc {
  font-size: 11px;
  color: var(--page-muted);
  line-height: 1.5;
}

/* Visual Hierarchy Cards */
.hierarchy-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px 0;
}

.hierarchy-card {
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border-left: 4px solid var(--accent);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.hierarchy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hierarchy-card:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.hierarchy-card:hover::before {
  opacity: 1;
}

.hierarchy-card.level-1 {
  border-left-color: #57534e;
  margin-left: 0;
}

.hierarchy-card.level-2 {
  border-left-color: #10b981;
  margin-left: 24px;
}

.hierarchy-card.level-3 {
  border-left-color: #f59e0b;
  margin-left: 48px;
}

.hierarchy-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.hierarchy-card-number {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), rgba(87, 83, 78, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.hierarchy-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--page-text);
}

.hierarchy-card-content {
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.6;
}

/* Interactive Step Flow */
.interactive-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 32px 0;
  padding: 24px;
  background: linear-gradient(135deg, var(--accent-light), rgba(139, 92, 246, 0.03));
  border-radius: 16px;
  border: 1px solid var(--line);
}

.interactive-step {
  position: relative;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 2px solid var(--line);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-align: center;
}

.interactive-step::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 12px;
  background: linear-gradient(135deg, #57534e, #8b5cf6);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.interactive-step:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: transparent;
  box-shadow: 0 12px 32px var(--accent-strong);
}

.interactive-step:hover::before {
  opacity: 1;
}

.interactive-step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-medium), rgba(139, 92, 246, 0.2));
  border: 2px solid rgba(87, 83, 78, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--page-text);
  margin: 0 auto 16px;
  transition: all 0.3s ease;
}

.interactive-step:hover .interactive-step-number {
  background: linear-gradient(135deg, #57534e, #8b5cf6);
  border-color: transparent;
  color: white;
  transform: rotate(360deg);
}

.interactive-step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 8px;
}

.interactive-step-desc {
  font-size: 11px;
  color: var(--page-muted);
  line-height: 1.5;
}

/* Comparison Visual Cards */
.comparison-visual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.comparison-visual-card {
  padding: 24px;
  background: var(--card-bg);
  border-radius: 16px;
  border: 2px solid var(--line);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.comparison-visual-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.comparison-visual-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.comparison-visual-card:hover::after {
  opacity: 1;
}

.comparison-visual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.comparison-visual-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--page-text);
}

.comparison-visual-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.comparison-visual-content {
  font-size: 12px;
  color: var(--page-muted);
  line-height: 1.6;
}

.comparison-visual-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.comparison-visual-list li {
  padding: 8px 0;
  font-size: 11px;
  color: var(--page-muted);
  border-bottom: 1px solid var(--line);
  position: relative;
  padding-left: 20px;
}

.comparison-visual-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.comparison-visual-list li:last-child {
  border-bottom: none;
}

body[data-theme="light"] .prompt-modal-content {
  background: #ffffff;
  border-color: #e4e4e7;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Expandable prompt sections - SEO/AEO friendly */
.prompt-full-section {
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, padding 0.3s ease;
}

.prompt-container {
  transition: all 0.3s ease;
}

/* SEO: Content always in DOM, just visually hidden with max-height (better than display:none) */
.prompt-full-text {
  /* Content always accessible to crawlers, just visually hidden */
  /* Using max-height: 0 instead of display: none for better SEO */
}

/* Count toggle styling */
#showCounts {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

#showCounts:checked {
  accent-color: var(--accent);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .prompt-card {
    padding: 14px 16px;
  }
  
  .prompt-preview {
    padding: 12px;
    font-size: 10px;
  }
  
  .featured-link {
    font-size: 10px;
    padding: 5px 10px;
  }
}

/* ============================================
   MOBILE/TABLET HEADER FIX - ABSOLUTE LAST RULE
   ============================================ */
@media (max-width: 1024px) {
  html body header.chrome,
  html body > header.chrome,
  body > header.chrome,
  header.chrome {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 10px 12px 0 !important;
    z-index: 99999 !important;
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
  }
  
  html {
    overflow-x: hidden !important;
    transform: none !important;
    perspective: none !important;
    filter: none !important;
  }
  
  body {
    overflow-x: hidden !important;
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    position: relative !important;
  }
  
  .app {
    padding-top: 70px !important;
  }
}