/**
 * Unified Editor Block Styles
 * Single source of truth for all block styling across:
 * - Editor.js tools (preview mode)
 * - Admin panel rendering
 * - Frontend display
 * - Schema-based consistency
 */

/* ========================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Refined for cutting-edge look with Proxima Nova
   ======================================== */

:root {
  /* Font Family */
  --font-family-proxima: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Brand Colors - More vibrant and modern */
  --brand-primary: #EE4B7F;
  /* A vibrant, slightly deeper pink */
  --brand-secondary: #FF6F9C;
  /* Lighter, more playful pink */
  --brand-accent: #FFC0CB;
  /* Soft, very light pink for highlights */
  --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));

  /* Text Colors - High contrast and modern neutrals */
  --text-primary: #121212;
  /* Nearly black for strong headings */
  --text-body: #333333;
  /* Dark gray for main body text */
  --text-secondary: #6B7280;
  /* Medium gray for supporting text */
  --text-muted: #9CA3AF;
  /* Light gray for subtle details */

  /* Background Colors - Clean, subtle, and engaging */
  --bg-white: #ffffff;
  --bg-light: #F9FAFB;
  /* Very light gray */
  --bg-soft-pink: #FFF0F5;
  /* Gentle blush */
  --bg-soft-blue: #F0F5FF;
  /* Softest blue */
  --bg-gradient-light: linear-gradient(135deg, #F0F5FF, #FFF0F5);
  /* Soft, airy gradient */

  /* CTA Dark Colors - Deep and inviting with subtle gradients */
  --cta-dark-1: #1E293B;
  /* Darker slate */
  --cta-dark-2: #0F172A;
  /* Deep navy-blue */
  --cta-dark-3: #020617;
  /* Near black */
  --cta-gradient-dark: linear-gradient(135deg, var(--cta-dark-1), var(--cta-dark-2), var(--cta-dark-3));

  /* Border & Shadows - Defined but not heavy */
  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  /* Slightly larger for modern feel */
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.05);
  /* Softer, wider shadow */
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.02);
  /* Subtle inner shadow */

  /* Spacing - Consistent and airy */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Typography - Proxima Nova optimized for desktop and mobile */
  /* Base font size for desktop for good readability */
  --font-size-body-desktop: 1.125rem;
  /* 18px */
  --font-size-h1-desktop: 3.25rem;
  /* ~52px */
  --font-size-h2-desktop: 2.5rem;
  /* ~40px */
  --font-size-h3-desktop: 2rem;
  /* ~32px */
  --font-size-h4-desktop: 1.625rem;
  /* ~26px */
  --font-size-h5-desktop: 1.375rem;
  /* ~22px */
  --font-size-h6-desktop: 1.25rem;
  /* ~20px */

  /* Base font size for mobile for good readability */
  --font-size-body-mobile: 1.125rem;
  /* 16px */
  --font-size-h1-mobile: 2.25rem;
  /* ~36px */
  --font-size-h2-mobile: 1.875rem;
  /* ~30px */
  --font-size-h3-mobile: 1.5rem;
  /* ~24px */
  --font-size-h4-mobile: 1.25rem;
  /* ~20px */
  --font-size-h5-mobile: 1.125rem;
  /* ~18px */
  --font-size-h6-mobile: 1rem;
  /* ~16px */

  /* General typography sizes based on desktop */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 2rem;
  /* 32px */
  --font-size-4xl: 2.5rem;
  /* 40px */
  --font-size-5xl: 3.25rem;
  /* 52px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-body: 1.7;
  --line-height-heading: 1.2;
}

/* Base styles for headings and body text */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-proxima);
  font-weight: var(--font-weight-extrabold);
  /* Make headings very bold */
  color: var(--text-primary);
  line-height: var(--line-height-heading);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.03em;
  /* Slightly tighter for modern feel */
}

h1 {
  font-size: var(--font-size-h1-desktop);
}

h2 {
  font-size: var(--font-size-h2-desktop);
}

h3 {
  font-size: var(--font-size-h3-desktop);
}

h4 {
  font-size: var(--font-size-h4-desktop);
}

h5 {
  font-size: var(--font-size-h5-desktop);
}

h6 {
  font-size: var(--font-size-h6-desktop);
}


#editorjs h2 {
  font-size: 2rem !important;
  font-weight: 600 !important
}

#editorjs h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important
}

.post-content p,
.post-content ul,
.post-content ol {
  font-family: var(--font-family-proxima);
  font-size: var(--font-size-body-desktop);
  line-height: var(--line-height-body);
  color: var(--text-body);
}

.post-content li {
  /* Ensure list items also have correct body text style */
  font-family: var(--font-family-proxima);
  font-size: var(--font-size-body-desktop);
  line-height: var(--line-height-body);
  color: var(--text-body);
}

/* ========================================
   BASE BLOCK STYLES
   ======================================== */
.ce-block i {
  font-style: normal !important;
}

/* Reset italic for icons */
.editor-block {
  margin: var(--space-lg) 0;
  /* Slightly more vertical rhythm */
}

.editor-block:first-child {
  margin-top: 0;
}

.editor-block:last-child {
  margin-bottom: 0;
}

/* ========================================
   STYLED CARD BLOCK
   ======================================== */
.stat-hero {
  font-size: var(--font-size-body-desktop);
}

.stat-hero .badge {
  font-size: var(--font-size-xl);
}

.stat-hero .badge span {
  margin-left: 10px;
}

.styled-card,
.styled-card-tool .styled-card {
  background: var(--card-bg, var(--bg-gradient-light));
  color: var(--card-text, var(--text-body));
  border-left: 4px solid var(--card-border, var(--brand-primary));
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.styled-card:hover {
  box-shadow: var(--shadow-md);
}

.styled-card p {
  margin: 0;
  line-height: 1.6;
}

.styled-card p:not(:last-child) {
  margin-bottom: var(--space-sm);
}
.post-content a,
.blog-content a,
article a {
  color: #de347f !important;
}

.post-content a:visited,
.blog-content a:visited,
article a:visited {
  color: #de347f !important;
}
/* ========================================
   STATISTICS BLOCK
   ======================================== */

.statistics-display,
.statistics-tool .statistics-display {
  text-align: center;
  padding: var(--space-3xl);
  /* More generous padding */
  background: var(--bg-gradient-light);
  border-radius: var(--radius-xl);
  margin: var(--space-2xl) 0;
  border: 2px solid var(--brand-primary);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.statistics-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(238, 75, 127, 0.08) 0%, transparent 50%),
    /* Using new brand primary */
    radial-gradient(circle at 80% 20%, rgba(238, 75, 127, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.stat-context {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(238, 75, 127, 0.15);
  /* Using new brand primary */
  color: var(--brand-primary);
  padding: 6px var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  z-index: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stat-value {
  font-size: var(--font-size-5xl);
  /* Larger for impact */
  font-weight: var(--font-weight-extrabold);
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: var(--space-md);
  letter-spacing: -0.05em;
  /* Tighter for display text */
  position: relative;
  z-index: 1;
}

.stat-value .unit {
  font-size: var(--font-size-3xl);
  /* Proportionately smaller */
  margin-left: 8px;
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

.stat-label {
  font-size: var(--font-size-xl);
  /* Larger and clearer */
  color: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  max-width: 80%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.stat-source {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-md);
  font-style: italic;
  position: relative;
  z-index: 1;
  opacity: 0.8;
}

/* ========================================
   CTA BLOCK
   ======================================== */

.cta-block,
.cta-tool .cta-block {
  background: var(--cta-gradient-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-2xl);
  /* More generous padding */
  text-align: center;
  margin: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.cta-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.07) 0%, transparent 50%);
  pointer-events: none;
}

.cta-icon {
  width: 90px;
  /* Slightly larger icon */
  height: 90px;
  background: var(--brand-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2xl);
  /* More space */
  color: white;
  font-size: 2.5rem;
  /* Larger icon font */
  box-shadow: 0 10px 40px rgba(238, 75, 127, 0.4);
  /* Deeper shadow */
  position: relative;
  z-index: 1;
}

.cta-title {
  color: white;
  font-size: var(--font-size-4xl);
  /* More impactful title */
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.04em;
  position: relative;
  z-index: 1;
}

.cta-description {
  color: #E0E7EB;
  /* Lighter, subtle text */
  font-size: var(--font-size-xl);
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
  max-width: 700px;
  /* Wider text for better readability */
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  opacity: 0.9;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  background: rgba(255, 255, 255, 0.2);
  /* Slightly more opaque for better contrast */
  color: white;
  padding: var(--space-md) var(--space-2xl);
  border-radius: 50px;
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  transition: all 0.3s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  border: none;
  cursor: pointer;
  backdrop-filter: blur(12px);
  /* Slightly stronger blur */
  position: relative;
  z-index: 1;
}

.cta-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px);
  /* More pronounced lift */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* CTA Outline Variant */
.cta-block.outline {
  background: var(--bg-white);
  border: 2px solid var(--brand-primary);
  box-shadow: var(--shadow-md);
  /* Softer shadow */
}

.cta-block.outline .cta-title {
  color: var(--brand-primary);
}

.cta-block.outline .cta-description {
  color: var(--text-body);
}

.cta-block.outline .cta-button {
  background: var(--brand-primary);
  color: white;
  box-shadow: 0 4px 15px rgba(238, 75, 127, 0.3);
  backdrop-filter: none;
  /* No blur on solid button */
}

.cta-block.outline .cta-button:hover {
  background: var(--brand-secondary);
  box-shadow: 0 6px 20px rgba(238, 75, 127, 0.4);
}


/* CTA style variants (class-based) and alignment helpers */
.cta-block.align-left {
  text-align: left;
}

.cta-block.align-center {
  text-align: center;
}

.cta-block.align-right {
  text-align: right;
}

/* Gradient */
.cta-block.style-gradient {
  background: linear-gradient(135deg, #2B0B3A, #FF4081);
  color: #ffffff;
}

.cta-block.style-gradient .cta-title {
  color: #ffffff;
}

.cta-block.style-gradient .cta-description {
  color: rgba(255, 255, 255, 0.9);
}

.cta-block.style-gradient .cta-button {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-block.style-gradient .cta-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Solid Purple */
.cta-block.style-solid-purple {
  background: #2B0B3A;
  color: #ffffff;
}

.cta-block.style-solid-purple .cta-title {
  color: #ffffff;
}

.cta-block.style-solid-purple .cta-description {
  color: rgba(255, 255, 255, 0.9);
}

.cta-block.style-solid-purple .cta-button {
  background: #ffffff;
  color: #2B0B3A;
  border: 2px solid #ffffff;
}

/* Solid Pink */
.cta-block.style-solid-pink {
  background: #FF4081;
  color: #ffffff;
}

.cta-block.style-solid-pink .cta-title {
  color: #ffffff;
}

.cta-block.style-solid-pink .cta-description {
  color: rgba(255, 255, 255, 0.9);
}

.cta-block.style-solid-pink .cta-button {
  background: #ffffff;
  color: #FF4081;
  border: 2px solid #ffffff;
}

/* Outline */
.cta-block.style-outline {
  background: var(--bg-white);
  border: 2px solid var(--brand-primary);
  color: var(--text-body);
  box-shadow: var(--shadow-md);
}

.cta-block.style-outline .cta-title {
  color: var(--brand-primary);
}

.cta-block.style-outline .cta-description {
  color: var(--text-body);
}

.cta-block.style-outline .cta-button {
  background: var(--brand-primary);
  color: #ffffff;
  border: 2px solid var(--brand-primary);
  box-shadow: 0 4px 15px rgba(238, 75, 127, 0.3);
}

.cta-block.style-outline .cta-button:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}


/* ========================================
   TAKEAWAYS BLOCK
   ======================================== */

.takeaways-block,
.takeaways-tool .takeaways-block {
  padding: var(--space-xl);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  /* Softer corners */
  margin: var(--space-lg) 0;
  box-shadow: var(--shadow-sm);
}

.takeaways-title {
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  /* More space */
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  /* Larger title */
  letter-spacing: -0.02em;
}

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

.takeaway-item {
  position: relative;
  padding-left: var(--space-2xl);
  /* More space for checkmark */
  margin-bottom: var(--space-md);
  /* More space between items */
  font-size: var(--font-size-lg);
  /* Consistent with body text */
  line-height: var(--line-height-body);
  color: var(--text-body);
}

.takeaway-item::before {
  content: "\f00c";
  /* check icon */
  font-family: var(--fa-family-sharp);
  font-weight: 900;
  /* solid sharp weight */
  position: absolute;
  left: 0;
  top: 0;

  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-primary);

  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-sm);
}

/* ========================================
   NOTICE/ALERT BLOCKS
   ======================================== */

.notice,
.notice-tool .notice {
  border-radius: var(--radius-xl);
  /* Softer corners */
  padding: var(--space-xl);
  /* More padding */
  margin: var(--space-lg) 0;
  border-left: 6px solid;
  /* Thicker border */
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  /* More space between icon and text */
  box-shadow: var(--shadow-sm);
}

.notice-success {
  background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
  border-color: #28A745;
  /* Deeper green */
  color: #1A5E2E;
  /* Darker text */
}

.notice-warning {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border-color: #FFC107;
  /* Brighter yellow */
  color: #856404;
  /* Darker text */
}

.notice-error {
  background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
  border-color: #DC3545;
  /* Brighter red */
  color: #721C24;
  /* Darker text */
}

.notice-info {
  background: linear-gradient(135deg, #fff5f8, #f8f9ff);
  border-color: #de347f;
  color: #de347f;
}

.notice-icon {
  font-size: 1.8rem;
  /* Larger icon */
  margin-top: 0.15rem;
  /* Better alignment */
  flex-shrink: 0;
  color: inherit;
  /* Inherit color from notice type */
  opacity: 0.8;
}

.notice-content h4 {
  margin: 0 0 var(--space-sm);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  /* Larger title */
  letter-spacing: -0.02em;
  color: var(--text-primary);
  /* Stronger title color */
}

.notice-content p {
  margin: 0;
  line-height: var(--line-height-body);
  font-size: var(--font-size-lg);
  /* Consistent paragraph size */
  color: var(--text-body);
}

/* ========================================
   FEATURE LIST BLOCKS
   ======================================== */

.feature-list,
.feature-list-tool .feature-list {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0;
}

.feature-list li,
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  /* Softer corners */
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.feature-list li:hover,
.feature-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-accent);
  /* Highlight border on hover */
}

.feature-icon {
  width: 50px;
  /* Larger icon */
  height: 50px;
  background: var(--brand-gradient);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  /* Larger icon font */
  flex-shrink: 0;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.feature-content h4 {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-xl);
  /* Larger title */
  letter-spacing: -0.02em;
}

.feature-content p {
  color: var(--text-body);
  margin: 0;
  line-height: var(--line-height-body);
  font-size: var(--font-size-lg);
  /* Consistent paragraph size */
}

/* ========================================
   STEP GUIDE BLOCKS
   ======================================== */

.step-list,
.step-guide-tool .step-list {
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
}

.step-list li,
.step-item {
  counter-increment: step-counter;
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow 0.2s ease;
}

.step-list li:hover,
.step-item:hover {
  box-shadow: var(--shadow-md);
}

/* Ensure no default markers appear for ordered step lists */
ol.step-list,
.step-list {
  list-style: none !important;
  padding-left: 0;
}

ol.step-list>li::marker {
  content: none;
  color: transparent;
}


.step-list li::before,
.step-item::before {
  content: counter(step-counter);
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  font-size: var(--font-size-lg);
}

.step-content h4 {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
}

.step-content p {
  color: var(--text-body);
  margin: 0;
  line-height: 1.6;
}

/* ========================================
   TIMELINE BLOCKS
   ======================================== */

.timeline,
.timeline-tool .timeline {
  position: relative;
  margin: var(--space-3xl) 0;
  padding-left: var(--space-lg);
  /* Add some left padding to make space for line */
}

.timeline::before {
  content: '';
  position: absolute;
  left: var(--space-md);
  /* Adjust line position */
  top: 0;
  bottom: 0;
  width: 3px;
  /* Thicker line */
  background: linear-gradient(to bottom, var(--brand-primary), var(--brand-secondary));
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-2xl);
  /* More space between items */
  padding-left: var(--space-3xl);
  /* Space for marker and content */
}

.timeline-marker {
  position: absolute;
  left: var(--space-sm);
  /* Adjust marker position relative to line */
  top: 8px;
  /* Slightly lower to align with text */
  width: 24px;
  /* Larger marker */
  height: 24px;
  background: var(--brand-primary);
  border-radius: 50%;
  border: 4px solid var(--bg-white);
  box-shadow: var(--shadow-sm);
  z-index: 1;
  /* Ensure marker is above line */
}

.timeline-content {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  /* Softer corners */
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.timeline-content:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-accent);
}

.timeline-date {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* More pronounced letter spacing */
  opacity: 0.8;
}

.timeline-title {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-xl);
  /* Larger title */
  letter-spacing: -0.02em;
}

.timeline-content p {
  color: var(--text-body);
  margin: 0;
  line-height: var(--line-height-body);
  font-size: var(--font-size-lg);
  /* Consistent paragraph size */
}

/* ========================================
   TESTIMONIAL BLOCKS
   ======================================== */

.testimonial,
.testimonial-tool .testimonial {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  /* Softer corners */
  padding: var(--space-2xl);
  /* More padding */
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-sm);
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.testimonial:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-accent);
}

.testimonial::before {
  content: '“';
  /* Modern quotation mark */
  font-family: var(--font-family-proxima);
  font-size: 5rem;
  /* Larger quote mark */
  color: var(--brand-accent);
  /* Softer color */
  position: absolute;
  top: 10px;
  /* Adjust position */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.2;
  /* Lighter opacity */
  line-height: 1;
  font-weight: var(--font-weight-extrabold);
}

.testimonial-text {
  font-size: var(--font-size-2xl);
  /* Larger, more impactful text */
  color: var(--text-primary);
  /* Stronger text color */
  font-style: italic;
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

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

.testimonial-avatar {
  width: 70px;
  /* Larger avatar */
  height: 70px;
  background: var(--brand-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.testimonial-info h4 {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin: 0;
  font-size: var(--font-size-lg);
}

.testimonial-info p {
  color: var(--text-secondary);
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.4;
}

/* ========================================
   COMPARISON TABLE BLOCKS
   ======================================== */

.comparison-table-container,
.comparison-table-tool .comparison-table-container {
  background: transparent;
  border: none;
  padding: 0;
  margin: var(--space-xl) 0;
  overflow-x: auto;
  /* Enable horizontal scrolling for smaller screens */
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-md);
}

.comparison-title {
  font-family: var(--font-family-proxima);
  color: var(--text-primary);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-xl);
  text-align: center;
  font-size: var(--font-size-3xl);
  /* Larger, more impactful title */
  letter-spacing: -0.03em;
}

.comparison-table {
  width: 100%;
  border-collapse: separate;
  /* Use separate to allow border-radius on cells */
  border-spacing: 0;
  margin: 0;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  /* Rounded table corners */
  overflow: hidden;
  /* Hide overflow for rounded corners */
  box-shadow: var(--shadow-sm);
  min-width: 600px;
  /* Ensure table doesn't get too cramped on mobile */
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-lg) var(--space-md);
  /* More padding */
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  font-family: var(--font-family-proxima);
}

.comparison-table th {
  background: var(--bg-gradient-light);
  /* Soft gradient for headers */
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison-table th:first-child {
  border-top-left-radius: var(--radius-md);
  /* Rounded top-left */
}

.comparison-table th:last-child {
  border-top-right-radius: var(--radius-md);
  /* Rounded top-right */
}

.comparison-table tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-md);
  /* Rounded bottom-left */
}

.comparison-table tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-md);
  /* Rounded bottom-right */
}


.feature-header {
  background: linear-gradient(135deg, var(--cta-dark-1), var(--cta-dark-2)) !important;
  /* Darker, more premium feel */
  color: white !important;
  text-align: left !important;
  font-weight: var(--font-weight-extrabold) !important;
  letter-spacing: 0.02em !important;
}

.plan-header {
  background: var(--brand-gradient) !important;
  /* Vibrant brand gradient */
  color: white !important;
  position: relative;
  font-weight: var(--font-weight-extrabold) !important;
  letter-spacing: 0.02em !important;
  padding-bottom: calc(var(--space-lg) + 10px);
  /* Space for arrow */
}

.plan-header::after {
  content: '';
  position: absolute;
  bottom: -10px;
  /* Adjust position */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--brand-primary);
  /* Use primary brand color */
  transition: border-top-color 0.3s ease;
}

.comparison-table th.plan-header:hover::after {
  border-top-color: var(--brand-secondary);
  /* Highlight on hover */
}

.feature-cell {
  background: var(--bg-light);
  font-weight: var(--font-weight-medium);
  color: var(--text-body);
  text-align: left;
  border-right: 2px solid var(--border-medium);
  font-size: var(--font-size-base);
  /* Consistent with body text */
}

.value-cell {
  color: var(--text-body);
  font-size: var(--font-size-base);
  transition: background-color 0.2s ease;
}

.value-cell:hover {
  background: var(--bg-soft-pink);
  /* Subtle hover effect */
}

.boolean-cell {
  font-size: var(--font-size-xl);
}

.boolean-cell i {
  font-size: 1.4rem;
  /* Larger icon */
  color: #28A745;
  /* Success green for checkmarks */
  vertical-align: middle;
}

.boolean-cell i.false {
  /* Style for false/cross icons if needed */
  color: #DC3545;
  /* Error red for crosses */
}


.comparison-table tr:nth-child(even) td:not(.feature-cell) {
  background: var(--bg-soft-blue);
  /* Alternate row background */
}

.comparison-table tr:hover td:not(.feature-cell) {
  background: var(--bg-soft-pink);
  /* Stronger hover for rows */
}

/* 3. Table of Contents */
.table-of-contents {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  /* More generous padding */
  margin: var(--space-xl) 0;
  box-shadow: var(--shadow-sm);
}

.toc-title {
  font-family: var(--font-family-proxima);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xl);
  /* More space below title */
  font-size: var(--font-size-2xl);
  /* Larger title */
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: -0.02em;
}

.toc-title i {
  /* Icon for TOC title */
  color: var(--brand-primary);
  font-size: 1.8rem;
}

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

.toc-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px dashed var(--border-light);
  /* Dashed border for modern feel */
}

.toc-list li:last-child {
  border-bottom: none;
}

.toc-list a {
  font-family: var(--font-family-proxima);
  color: var(--text-body);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  /* Consistent with body text */
}

.toc-list a:hover {
  color: var(--brand-primary);
  transform: translateX(5px);
  /* Subtle slide effect */
}

.toc-list .toc-number {
  background: rgba(238, 75, 127, 0.15);
  /* Using new brand primary with opacity */
  color: var(--brand-primary);
  width: 30px;
  /* Larger number badge */
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  /* Prevent shrinking on smaller screens */
}

/* TOC Style Variants */
.toc-style-minimal .table-of-contents {
  background: transparent !important;
  border: none !important;
  padding: var(--space-lg) 0 !important;
  margin: var(--space-lg) 0 !important;
  box-shadow: none !important;
}

.toc-style-minimal .toc-list a {
  color: var(--text-secondary);
}

.toc-style-minimal .toc-list a:hover {
  color: var(--brand-primary);
}

.toc-style-minimal .toc-title {
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
}

.toc-style-minimal .toc-list .toc-number {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  box-shadow: none;
}

.toc-style-minimal .toc-list a:hover .toc-number {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}


.toc-style-card .table-of-contents {
  background: var(--bg-soft-blue) !important;
  /* Soft background */
  border: 2px solid var(--brand-accent) !important;
  /* Accent border */
  border-radius: var(--radius-xl) !important;
  padding: var(--space-3xl) !important;
  /* More padding */
  margin: var(--space-3xl) 0 !important;
  box-shadow: var(--shadow-lg) !important;
  /* More prominent shadow */
}

.toc-style-card .toc-title {
  color: var(--text-primary);
  font-size: var(--font-size-3xl);
}

.toc-style-card .toc-list a {
  color: var(--text-body);
  font-weight: var(--font-weight-semibold);
}

.toc-style-card .toc-list a:hover {
  color: var(--brand-primary);
}

.toc-style-card .toc-list .toc-number {
  background: var(--brand-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

.control-select {
  padding: 6px 10px;
  /* Slightly larger padding */
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--bg-white);
  color: var(--text-body);
  font-family: var(--font-family-proxima);
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-select:hover {
  border-color: var(--brand-primary);
}

.control-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(238, 75, 127, 0.2);
  /* Focus ring */
}

.color-button {
  width: 28px;
  /* Slightly larger */
  height: 28px;
  border: 3px solid var(--bg-white);
  /* Thicker white border */
  border-radius: 50%;
  background: var(--color);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-button:hover {
  transform: scale(1.15);
  /* More pronounced scale */
  border-color: var(--brand-accent);
  /* Subtle highlight on hover */
}

/* ========================================
   STAT GRID BLOCKS
   ======================================== */

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

/* Force 3 columns on desktop */
@media (min-width: 992px) {

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

.stat-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease-out;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-primary);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-accent);
}

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

/* 
   Improved Layout: 
   Label (Top Left) -> Value (Middle) -> Desc (Bottom)
   Icon (Absolute Top Right)
   Trend (Inline with Value or Below)
*/

.stat-icon {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: rgba(238, 75, 127, 0.08);
  color: var(--brand-primary);
  opacity: 0.8;
  /* Subtle */
  order: -1;
  /* Remove from flex flow */
}

/* Apply custom color override */
.stat-icon[style*="--stat-color"] {
  background: color-mix(in srgb, var(--stat-color) 10%, transparent);
  color: var(--stat-color);
}

.stat-label {
  order: 1;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
  line-height: 1.2;
  padding-right: 50px;
  /* Space for Icon */
}

.stat-value {
  order: 2;
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  /* Reduced margin */
  letter-spacing: -0.04em;
  line-height: 1;
  font-family: var(--font-family-proxima);
  font-feature-settings: "tnum";
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* Allow wrapping if very long */
  gap: 8px;
}

.stat-value .unit {
  font-size: 0.5em;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: normal;
}

/* Trend Indicator - Now separate from absolute positioning */
.stat-trend {
  order: 3;
  /* Below value */
  position: static;
  /* Join the flow */
  background: transparent;
  color: #28a745;
  font-weight: 700;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--space-md);
  white-space: nowrap;
  /* Prevent wrapping */
  height: auto;
  padding: 0;
}

.stat-trend i {
  font-size: 0.9em;
  transform: rotate(45deg);
}

.stat-description {
  order: 4;
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--bg-soft-blue);
  font-size: 0.875rem;
  color: var(--text-body);
  line-height: 1.5;
}

/* Mobile Adjustments */
@media (max-width: 768px) {

  .stat-grid,
  .stat-grid-tool .stat-grid {
    /* Ensure 1 column on mobile */
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .stat-card {
    padding: var(--space-lg);
  }

  .stat-value {
    font-size: 2.25rem;
  }

  .stat-icon {
    top: var(--space-lg);
    right: var(--space-lg);
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

/* ========================================
   BEFORE/AFTER COMPARISON BLOCKS
   ======================================== */

.stat-comparison,
.before-after-tool .stat-comparison {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
  /* Generous padding */
  box-shadow: var(--shadow-md);
  margin: var(--space-2xl) 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-comparison:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2xl);
  /* More space between sections */
  margin-bottom: var(--space-3xl);
  /* More space between rows */
}

.comparison-section {
  display: flex;
  flex-direction: column;
  /* Stack label and value */
  justify-content: center;
  align-items: center;
}

.comparison-item {
  text-align: center;
  width: 100%;
}

.comparison-item .label {
  font-size: var(--font-size-lg);
  /* Larger label */
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  /* More prominent letter spacing */
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.comparison-item.before .label {
  color: #DC3545;
  /* Error red */
}

.comparison-item.after .label {
  color: #28A745;
  /* Success green */
}

.comparison-item .value {
  font-size: var(--font-size-2xl);
  /* Balanced size for both stats and descriptive text */
  font-weight: var(--font-weight-extrabold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.comparison-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  /* Taller divider area */
  min-width: 100px;
}

.comparison-arrow {
  width: 60px;
  /* Larger arrow */
  height: 60px;
  background: var(--brand-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  /* Larger icon */
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comparison-arrow:hover {
  transform: scale(1.15);
  /* More pronounced scale */
  box-shadow: var(--shadow-lg);
}

.comparison-result {
  text-align: center;
  margin-top: var(--space-3xl);
  /* More space above result */
  padding-top: var(--space-2xl);
  /* More padding */
  border-top: 2px solid var(--border-medium);
  /* Thicker border */
  font-size: var(--font-size-xl);
  /* Balanced result text */
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  letter-spacing: -0.02em;
}

.comparison-result i {
  font-size: 1.2em;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */


@media (max-width: 1024px) {

  /* Adjust for larger tablets */
  :root {
    --font-size-h1-desktop: 2.8rem;
    --font-size-h2-desktop: 2.2rem;
    --font-size-h3-desktop: 1.8rem;
    --font-size-h4-desktop: 1.5rem;
    --font-size-h5-desktop: 1.25rem;
    --font-size-h6-desktop: 1.125rem;
  }
}


@media (max-width: 768px) {

  /* Mobile and smaller tablets */
  :root {
    /* Adjust typography for mobile readability */
    --font-size-body-desktop: var(--font-size-body-mobile);
    /* Use mobile body font size */

    h1 {
      font-size: var(--font-size-h1-mobile);
    }

    h2 {
      font-size: var(--font-size-h2-mobile);
    }

    h3 {
      font-size: var(--font-size-h3-mobile);
    }

    h4 {
      font-size: var(--font-size-h4-mobile);
    }

    h5 {
      font-size: var(--font-size-h5-mobile);
    }

    h6 {
      font-size: var(--font-size-h6-mobile);
    }

    .post-content p,
    .post-content ul,
    .post-content ol,
    .post-content li {
      font-size: var(--font-size-body-mobile);
    }

    /* Smaller spacing */
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* Smaller radii */
    --radius-xl: 16px;
  }

  .stat-hero {
    font-size: var(--font-size-body-mobile);
  }

  /* General Block Adjustments */
  .editor-block {
    margin: var(--space-xl) 0;
  }

  .styled-card,
  .statistics-display,
  .cta-block,
  .takeaways-block,
  .notice,
  .feature-list li,
  .step-list li,
  .timeline-content,
  .testimonial,
  .comparison-table-container,
  .stat-card,
  .stat-comparison,
  .table-of-contents {
    padding: var(--space-xl);
    /* Consistent mobile padding */
    margin: var(--space-xl) 0;
  }

  /* Statistics Block */
  .stat-value {
    font-size: var(--font-size-4xl);
    /* Adjusted for mobile */
    letter-spacing: -0.03em;
  }

  .stat-value .unit {
    font-size: var(--font-size-2xl);
  }

  .stat-label {
    font-size: var(--font-size-lg);
    max-width: 95%;
  }

  /* CTA Block */
  .cta-title {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
  }

  .cta-description {
    font-size: var(--font-size-base);
    max-width: 90%;
  }

  .cta-icon {
    width: 70px;
    height: 70px;
    font-size: 2rem;
    margin-bottom: var(--space-xl);
  }

  .cta-button {
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--font-size-base);
  }

  /* Takeaways Block */
  .takeaways-title {
    font-size: var(--font-size-xl);
  }

  .takeaway-item {
    font-size: var(--font-size-base);
    padding-left: var(--space-2xl);
    margin-bottom: var(--space-sm);
  }

  .takeaway-item::before {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-sm);
    margin-top: var(--space-sm);
  }

  /* Notice/Alert Blocks */
  .notice-icon {
    font-size: 1.5rem;
  }

  .notice-content h4 {
    font-size: var(--font-size-lg);
  }

  .notice-content p {
    font-size: var(--font-size-base);
  }

  /* Feature List Blocks */
  .feature-list li,
  .feature-item {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  .feature-icon {
    align-self: center;
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }

  .feature-content h4 {
    font-size: var(--font-size-lg);
  }

  .feature-content p {
    font-size: var(--font-size-base);
  }

  /* Step Guide Blocks */
  .step-list li,
  .step-item {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  .step-list li::before,
  .step-item::before {
    align-self: center;
    width: 45px;
    height: 45px;
    font-size: var(--font-size-lg);
  }

  .feature-content h4,
  .step-content h4 {
    font-size: var(--font-size-h3-mobile);
  }

  .step-content p {
    font-size: var(--font-size-base);
  }

  /* Timeline Blocks */
  .timeline::before {
    left: 15px;
  }

  .timeline-item {
    padding-left: 50px;
    margin-bottom: var(--space-xl);
  }

  .timeline-marker {
    left: 5px;
    width: 20px;
    height: 20px;
  }

  .timeline-title {
    font-size: var(--font-size-lg);
  }

  .timeline-content p {
    font-size: var(--font-size-base);
  }

  /* Testimonial Blocks */
  .testimonial-text {
    font-size: var(--font-size-xl);
  }

  .testimonial-avatar {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-lg);
  }

  .testimonial-info h4 {
    font-size: var(--font-size-base);
  }

  .testimonial-info p {
    font-size: var(--font-size-sm);
  }

  /* Comparison Table Blocks */
  .comparison-title {
    font-size: var(--font-size-2xl);
  }

  .comparison-table {
    min-width: unset;
    /* Allow table to shrink, but overflow-x is active */
  }

  .comparison-table th,
  .comparison-table td {
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--font-size-sm);
  }

  .plan-header::after {
    display: none;
    /* Hide arrow on mobile to save space */
  }

  .feature-header {
    font-weight: var(--font-weight-bold) !important;
  }

  /* Table of Contents */
  .toc-title {
    font-size: var(--font-size-xl);
  }

  .toc-list a {
    font-size: var(--font-size-h4-mobile);
  }

  .toc-list .toc-number {
    width: 26px;
    height: 26px;
    font-size: var(--font-size-sm);
  }

  /* Stat Grid Blocks */
  .stat-grid {
    grid-template-columns: 1fr;
    /* Single column on mobile */
    gap: var(--space-lg);
  }

  .stat-card {
    padding: var(--space-xl) var(--space-lg);
  }

  .stat-icon {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
    margin-bottom: var(--space-md);
  }

  .stat-value {
    font-size: var(--font-size-3xl);
  }

  .stat-value .unit {
    font-size: var(--font-size-xl);
  }

  .stat-label {
    font-size: var(--font-size-lg);
  }

  .stat-trend {
    position: static;
    /* Place trend inline on mobile */
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
    align-self: flex-start;
  }

  /* Before/After Comparison Blocks */
  .comparison-row {
    grid-template-columns: 1fr;
    /* Stack vertically on mobile */
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
  }

  .comparison-divider {
    height: 80px;
    min-width: 60px;
    transform: rotate(90deg);
    /* Rotate arrow to point down */
  }

  .comparison-arrow {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .comparison-item .value {
    font-size: var(--font-size-xl);
  }

  .comparison-item .label {
    font-size: var(--font-size-base);
  }

  .comparison-result {
    font-size: var(--font-size-lg);
    padding-top: var(--space-lg);
    margin-top: var(--space-xl);
    flex-direction: column;
    /* Stack result text and icon */
    gap: var(--space-sm);
  }
}

/* ========================================
   EDITOR-SPECIFIC STYLES
   ======================================== */

/* Hide controls in read-only mode */
.cdx-block[data-readonly="true"] .block-controls {
  display: none;
}

/* Editor tool wrapper styles */
.editor-block-tool {
  position: relative;
}

.block-controls {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  padding: var(--space-xs);
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.control-button {
  padding: 4px var(--space-xs);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  background: var(--bg-white);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s ease;
}

.control-button:hover {
  background: var(--bg-light);
}

.control-button.active {
  background: var(--button-bg, var(--brand-primary));
  color: white;
  border-color: var(--button-bg, var(--brand-primary));
}

/* ========================================
   INLINE POST IMAGES & SVG (4:3 Aspect)
   ======================================== */

figure.post-image {
  position: relative;
  width: 100%;
  margin: var(--space-lg) 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-gradient-light);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

figure.post-svg {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: var(--space-lg) 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-gradient-light);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

figure.post-image img {
  width: 100%;
  height: auto;
  display: block;
}

figure.post-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

figure.post-image figcaption,
figure.post-svg figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(29, 29, 31, .88);
  color: #fff;
  padding: 12px 16px;
  text-align: center;
}

/* Ensure SVG scales crisply and respects 4:3 container */
figure.post-svg svg {
  height: 100%;
  width: 100%;
  preserveAspectRatio: xMidYMid meet;
}

/* Soft hover elevation */
figure.post-image:hover,
figure.post-svg:hover {
  box-shadow: var(--shadow-lg);
}

/* Mobile adjustments: keep caption readable */
@media (max-width: 768px) {

  figure.post-image figcaption,
  figure.post-svg figcaption {
    font-size: var(--font-size-sm);
    padding: 10px 12px;
  }
}