/* === styles-deliverability.css === */
/* Derived from styles-deliverability2.css - Refined for Footer and Component Specificity */
/* Assumes styles-marketing.css is loaded first. */
/* Styles for CTA, Accordion (NEW DESIGN), and Timeline are in cta-time-acc.css */

/* Interactive components additional styles */
.metric-box.hovered,
.metric-box.focused {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item.hovered,
.feature-item.focused {
  background-color: var(--blue-50);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.download-box .btn.downloading {
  background-color: var(--success);
  border-color: var(--success);
  cursor: wait;
}

.timeline-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger the animations */
.timeline-item:nth-child(2).visible {
  transition-delay: 0.1s;
}

.timeline-item:nth-child(3).visible {
  transition-delay: 0.2s;
}

.timeline-item:nth-child(4).visible {
  transition-delay: 0.3s;
}

.timeline-item:nth-child(5).visible {
  transition-delay: 0.4s;
}

/* --- Base Layout & Page Structure Partials --- */
.two-column-layout {
  display: flex;
  gap: var(--space-48);
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--space-48) var(--space-24);
  align-items: flex-start;
}

.main-content { /* Assuming this class wraps the main page content where shortcodes appear */
  flex: 1;
  min-width: 0; /* Prevent content overflow issues */
}

.sidebar-column {
  width: 300px;
  position: sticky;
  top: var(--space-24); /* Adjust based on header height if sticky header exists */
  flex-shrink: 0;
}

/* Full width hero image container */
.hero-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  margin-bottom: var(--space-32);
}

.hero-container .hero-image {
  width: 100%;
  margin: 0;
  padding: 0;
}

.hero-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Regular two-column layout styling */
.two-column-layout {
  display: flex;
  gap: var(--space-48);
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--space-24);
  align-items: flex-start;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.sidebar-column {
  width: 300px;
  position: sticky;
  top: var(--space-24);
  flex-shrink: 0;
}

/* Default styles for smaller screens */
.hero-image {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  z-index: 1;
}

.hero-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Guide Header */
.guide-header {
    background-color: var(--blue);
    color: white;
    padding: var(--space-64) 0;
    margin-bottom: var(--space-48);
}
.guide-header .container {
    max-width: 1140px; margin: 0 auto; padding: 0 var(--space-24);
}
.guide-header h1 {
    margin-bottom: var(--space-16);
    color: white !important; /* Ensure contrast */
}
.guide-header p {
    font-size: var(--font-size-lead);
    max-width: 800px;
    opacity: 0.9;
    color: white !important; /* Ensure contrast */
}

/* Hero Image Caption */
.main-content .hero-image figcaption { /* Increased specificity */
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin-top: var(--space-8);
    text-align: center;
}

/* TL;DR Box */
.main-content .tldr-box {
  background: var(--grey-100);
  border-left: 4px solid var(--blue);
  padding: var(--space-24);
  margin: var(--space-32) 0;
  border-radius: 12px;
  box-sizing: border-box;
}
.main-content .tldr-box h3 {
  margin-top: 0;
  margin-bottom: var(--space-16);
  color: var(--blue);
  font-size: var(--font-size-h4);
}
.main-content .tldr-box p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: var(--font-size-base);
  line-height: 1.5;
}
.dark-mode .main-content .tldr-box { background: var(--grey-800); border-color: var(--blue-400); }


/* Definition Box (Consolidated) */
.main-content .definition-box {
  background: var(--grey-100);
  border-left: 4px solid var(--blue);
  padding: var(--space-24);
  margin: var(--space-32) 0;
  border-radius: 12px;
}
.main-content .definition-box h3 {
  margin-top: 0;
  color: var(--blue);
  margin-bottom: var(--space-16);
}
.dark-mode .main-content .definition-box { background: var(--grey-800); border-color: var(--blue-400); }


/* Stat Callout */
.main-content aside.stat-callout { /* Used aside tag from shortcode */
  background: var(--pink-100);
  border: 1px solid var(--pink-200);
  padding: var(--space-24);
  margin: var(--space-32) 0;
  text-align: center;
  border-radius: 12px;
  box-sizing: border-box;
}
.main-content aside.stat-callout .stat { /* Class from shortcode */
  font-size: var(--font-size-h3);
  font-weight: 700;
  color: var(--pink);
  margin: 0 0 var(--space-8);
  line-height: 1.2;
  font-style: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.main-content aside.stat-callout cite {
  display: block;
  font-size: var(--font-size-small);
  color: var(--grey-600);
  font-style: normal;
  margin-top: var(--space-8);
}
.dark-mode .main-content aside.stat-callout { background: rgba(var(--pink-rgb), 0.15); border-color: rgba(var(--pink-rgb), 0.4); }


/* Step Box (Used by `steps` shortcode if it uses this class) or Standalone */
.main-content .step-box {
    background: var(--elevated-surface);
    border-radius: 16px;
    padding: var(--space-24);
    margin-bottom: var(--space-32);
    border: 1px solid var(--divider);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.08);
}
.main-content .step-box .step-number {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: var(--blue);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    margin-right: var(--space-12);
    font-weight: 600;
    flex-shrink: 0;
}
.main-content .step-box h3 { /* Assuming h3 is used for step title */
    display: flex;
    align-items: center;
    margin-bottom: var(--space-16);
}
.dark-mode .main-content .step-box { background: var(--elevated-surface); border-color: var(--divider); }

/* Steps Shortcode Styling (if it uses .step-by-step and .step) */
.main-content .step-by-step { margin: var(--space-32) 0; }
.main-content .step {
    margin-bottom: var(--space-24);
    padding-bottom: var(--space-24);
    border-bottom: 1px solid var(--divider);
}
.main-content .step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.main-content .step .step-number { /* Reusing class from .step-box for consistency */
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background-color: var(--blue); color: white;
    border-radius: 50%; font-weight: bold;
    margin-right: var(--space-16); flex-shrink: 0;
}
.main-content .step h3 { /* Assuming step shortcode also uses h3 for title */
    display: flex; align-items: flex-start; /* Align number with start of multi-line text */
    font-size: var(--font-size-h4);
    margin-top:0; /* Reset margin if h3 has global margin */
    margin-bottom: var(--space-8); /* Space between title and content */
}
.main-content .step h3 span:last-child { flex: 1; min-width: 0; } /* Allow title text to wrap */


/* Mini Case Study */
.main-content .mini-case {
    background: var(--elevated-surface);
    border: 1px solid var(--divider);
    border-radius: 16px;
    padding: var(--space-24);
    margin: var(--space-32) 0;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.08);
}
.main-content .mini-case-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-16);
}
.main-content .mini-case-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--blue-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-16);
    font-weight: 700;
    color: var(--blue);
    font-size: 20px;
    flex-shrink: 0;
}
.dark-mode .main-content .mini-case { background: var(--elevated-surface); border-color: var(--divider); }


/* Myth vs Fact */
.main-content .myth-vs-fact {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
    margin: var(--space-32) 0;
}
@media (min-width: 768px) {
    .main-content .myth-vs-fact {
        grid-template-columns: 1fr 1fr;
    }
}
.main-content .myth-box, .main-content .fact-box {
    padding: var(--space-24);
    border-radius: 16px;
}
.main-content .myth-box {
    background: rgba(var(--error-rgb), 0.05);
    border: 1px solid rgba(var(--error-rgb), 0.2);
}
.main-content .fact-box {
    background: rgba(var(--success-rgb), 0.05);
    border: 1px solid rgba(var(--success-rgb), 0.2);
}
.main-content .myth-box h3, .main-content .fact-box h3 {
    margin-top: 0;
    margin-bottom: var(--space-8);
}
.main-content .myth-box h3 { color: var(--error); }
.main-content .fact-box h3 { color: var(--success); }
.dark-mode .main-content .myth-box { background: rgba(var(--error-rgb), 0.15); border-color: rgba(var(--error-rgb), 0.4); }
.dark-mode .main-content .fact-box { background: rgba(var(--success-rgb), 0.15); border-color: rgba(var(--success-rgb), 0.4); }


/* Interactive Checklist / Data Table */
.main-content .interactive-checklist, .main-content .data-table { /* Grouping similar table-like components */
  margin: var(--space-32) 0;
  padding: var(--space-24);
  background: var(--elevated-surface);
  border-radius: 16px;
  border: 1px solid var(--divider);
  box-shadow: 0px 2px 8px rgba(0,0,0,0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  width: 100%;
}
.main-content .interactive-checklist h3, .main-content .data-table h3 { /* Optional title for these components */
  margin-top: 0;
  margin-bottom: var(--space-16);
  color: var(--text);
}
.main-content .interactive-checklist table, .main-content .data-table table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-16) 0;
  min-width: 600px;
}
.main-content .interactive-checklist th, .main-content .interactive-checklist td,
.main-content .data-table th, .main-content .data-table td {
  padding: var(--space-12);
  text-align: left;
  border-bottom: 1px solid var(--divider); /* Default border for all cells */
  vertical-align: top;
  font-size: var(--font-size-small);
}
.main-content .data-table td { border: 1px solid var(--divider); } /* data-table specific from original */
.main-content .data-table td:first-child { border-left: none; }
.main-content .data-table td:last-child { border-right: none; }
.main-content .data-table tr:last-child td { border-bottom: none;}


.main-content .interactive-checklist th, .main-content .data-table th {
  background: var(--grey-100);
  font-weight: 600;
  border-color: var(--grey-300); /* For data-table from original */
  border-bottom-width: 2px;
}
.main-content .interactive-checklist td:first-child {
    display: flex;
    align-items: center;
}
.main-content .interactive-checklist input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: var(--space-8);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}
.main-content .interactive-checklist label {
     display: inline;
     cursor: pointer;
     vertical-align: middle;
     line-height: 1.4;
}
.main-content .checklist-download {
    margin-top: var(--space-24);
    text-align: right;
}
.dark-mode .main-content .interactive-checklist, .dark-mode .main-content .data-table { background: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .main-content .interactive-checklist th, .dark-mode .main-content .data-table th { background: var(--grey-800); border-color: var(--grey-700); }
.dark-mode .main-content .data-table td { border-color: var(--grey-700); }


/* Quote Callout (Distinct from .expert-quote, from newsletter-growth-article-pillar.html) */
.main-content .quote-callout {
    margin-top: var(--space-32);
    padding: var(--space-24);
    border-left: 4px solid var(--blue);
    background-color: var(--blue-100);
    border-radius: 0 8px 8px 0; /* Original style */
}
.main-content .quote-callout p:first-of-type {
    font-style: italic;
    font-size: var(--font-size-lead);
    margin-bottom: var(--space-12);
}
.main-content .quote-callout p:last-of-type { /* Typically the citation */
    font-weight: 500;
    margin-bottom: 0;
    font-size: var(--font-size-small);
}
.dark-mode .main-content .quote-callout { background-color: rgba(var(--blue-rgb), 0.1); border-left-color: var(--button-primary-bg); }

/* Expert Quote (Distinct from .quote-callout) */
.main-content .expert-quote {
    background: var(--elevated-surface);
    border-radius: 12px;
    padding: var(--space-24);
    margin: var(--space-32) 0;
    border-left: 4px solid var(--blue); /* Similar accent */
}
.main-content .expert-quote blockquote { margin: 0; } /* Remove default blockquote margins */
.main-content .expert-quote p { font-style: italic; margin-bottom: var(--space-8); } /* Quote text */
.main-content .expert-quote cite { font-style: normal; font-weight: 500; color: var(--text-secondary); display: block; } /* Citation */
.dark-mode .main-content .expert-quote { background: var(--elevated-surface); border-left-color: var(--button-primary-bg); }


/* Mistakes Accordion (This is different from the NEW DESIGN accordion in cta-time-acc.css) */
.main-content .mistakes-accordion {
    margin: var(--space-32) 0;
}
.main-content .mistake-item { /* Can be used with or without .mistakes-accordion parent */
    background: var(--elevated-surface);
    border: 1px solid var(--divider);
    border-radius: 16px;
    margin-bottom: var(--space-16);
    overflow: hidden; /* For content hiding */
}
/* Styles for mistake item when used standalone and not part of an accordion structure */
.main-content .mistake-item:not(.accordion-item) { /* Example if it's NOT part of a JS accordion */
  padding: var(--space-24);
}
.main-content .mistake-item h3 { /* Title of the mistake */
  margin-top: 0;
  color: var(--pink); /* Keep pink for mistake title */
  margin-bottom: var(--space-8);
  font-size: var(--font-size-h4);
}
.main-content .mistake-header { /* If used as part of a JS accordion */
    padding: var(--space-16);
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-content .mistake-content {
    padding: 0 var(--space-16) var(--space-16);
    display: none; /* Start closed if JS controlled */
    font-size: var(--font-size-small);
}
.main-content .mistake-item.active .mistake-content { display: block; } /* JS adds .active */
.main-content .mistake-toggle {
    font-size: 24px;
    transform: rotate(0);
    transition: transform 0.3s ease;
    color: var(--blue);
}
.main-content .mistake-item.active .mistake-toggle { transform: rotate(45deg); }
.dark-mode .main-content .mistake-item { background: var(--grey-800); border-color: var(--grey-700); } /* Adjusted from .mistakes-accordion .mistake-item */
.dark-mode .main-content .mistakes-accordion .mistake-item { background: var(--elevated-surface); border-color: var(--divider); } /* If nested in specific accordion type */


/* Quick Poll */
.main-content .quick-poll {
    background: var(--blue-100);
    border-radius: 16px;
    padding: var(--space-24);
    margin: var(--space-32) 0;
    border: 1px solid var(--blue-200);
}
.main-content .poll-title {
    font-weight: 600;
    margin-bottom: var(--space-16);
    font-size: var(--font-size-h4);
}
.main-content .poll-options { margin-bottom: var(--space-16); }
.main-content .poll-option {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-8);
    font-size: var(--font-size-small);
}
.main-content .poll-bar {
    height: 16px; background: var(--blue-200); border-radius: 8px;
    margin: 0 var(--space-12); flex-grow: 1; position: relative; overflow: hidden;
}
.main-content .poll-fill {
    position: absolute; left: 0; top: 0; height: 100%;
    background: var(--blue); border-radius: 8px;
}
.main-content .poll-percentage { font-weight: 600; min-width: 40px; text-align: right; }
.main-content .quick-poll p:last-of-type {
    font-size: var(--font-size-tiny); color: var(--text-secondary); margin-bottom: 0;
}
.dark-mode .main-content .quick-poll { background: rgba(var(--blue-rgb), 0.15); border-color: rgba(var(--blue-rgb), 0.4); }


/* Workflow Box */
.main-content .workflow-box {
    background-color: var(--elevated-surface);
    border-radius: 16px;
    padding: var(--space-32);
    margin-bottom: var(--space-48);
    border: 1px solid var(--divider);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.08);
}
.main-content .workflow-header { display: flex; align-items: center; margin-bottom: var(--space-24); }
.main-content .workflow-icon {
    width: 48px; height: 48px; background-color: var(--blue-100); color: var(--blue);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; margin-right: var(--space-16); flex-shrink: 0;
}
.main-content .workflow-title { margin-bottom: 0; } /* Assumed h3/h4 */
.main-content .workflow-description { font-size: var(--font-size-lead); margin-bottom: var(--space-24); }
.main-content .workflow-steps { margin-bottom: var(--space-24); }
.main-content .workflow-step { display: flex; margin-bottom: var(--space-24); align-items: flex-start; }
.main-content .workflow-step .step-number { /* Reusing class for consistency */
    width: 32px; height: 32px; background-color: var(--blue); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 600; margin-right: var(--space-16); flex-shrink: 0; margin-top: 4px;
}
.main-content .workflow-step .step-content { flex-grow: 1; min-width: 0; }
.main-content .workflow-step .step-content h4 { margin-bottom: var(--space-8); }
.dark-mode .main-content .workflow-box { background-color: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .main-content .workflow-icon { background-color: rgba(var(--blue-rgb), 0.2); color: var(--button-primary-bg); }


/* Code Block (Shortcode: code-block) */
.main-content .code-block { /* Assuming this is a shortcode wrapper class */
    background-color: var(--grey-800);
    border-radius: 8px;
    padding: var(--space-16);
    margin: var(--space-16) 0;
    font-family: 'Courier New', Courier, monospace;
    color: #f8f8f2; /* Light text common for dark code blocks */
    overflow-x: auto;
    font-size: var(--font-size-small);
    border: 1px solid var(--grey-700);
    position: relative; /* For copy button positioning */
}
.main-content .code-block pre { margin: 0; white-space: pre; }
.main-content .code-block code {
    font-family: inherit; color: inherit; background: none; padding: 0; font-size: inherit;
}
.dark-mode .main-content .code-block { background: #2d2d2d; color: #ccc; border-color: #444; }
.dark-mode .main-content .code-block h4 { color: var(--grey-500); } /* If titles are used within */

/* Copy code button for code-block shortcode */
.main-content .code-block .copy-code-btn { /* Make it specific to code-block */
    position: absolute;
    top: var(--space-8);
    right: var(--space-8);
    background: var(--grey-700);
    color: white;
    border: none;
    border-radius: 4px;
    padding: var(--space-4) var(--space-8);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}
.main-content .code-block .copy-code-btn:hover { opacity: 1; background: var(--grey-600); }
.dark-mode .main-content .code-block .copy-code-btn { background: var(--grey-600); }
.dark-mode .main-content .code-block .copy-code-btn:hover { background: var(--grey-500); }


/* Tip Box */
.main-content .tip-box {
    background-color: var(--blue-100);
    border-left: 4px solid var(--blue);
    padding: var(--space-16);
    margin: var(--space-16) 0;
    border-radius: 0 8px 8px 0;
}
.main-content .tip-box h4 {
    color: var(--blue); margin-top: 0; margin-bottom: var(--space-8);
    font-size: var(--font-size-base);
}
.main-content .tip-box p:last-child { margin-bottom: 0; }
.main-content .tip-box ul { padding-left: var(--space-24); margin-bottom: 0; }
.main-content .tip-box li { margin-bottom: var(--space-4); }
.dark-mode .main-content .tip-box { background-color: rgba(var(--blue-rgb), 0.15); border-left-color: var(--button-primary-bg); }
.dark-mode .main-content .tip-box h4 { color: var(--blue-300); }


/* Warning Box */
.main-content .warning-box {
    background-color: rgba(var(--warning-rgb), 0.1);
    border-left: 4px solid var(--warning);
    padding: var(--space-16);
    margin: var(--space-16) 0;
    border-radius: 0 8px 8px 0;
}
.main-content .warning-box h4 {
    color: var(--warning); margin-top: 0; margin-bottom: var(--space-8);
    font-size: var(--font-size-base);
}
.main-content .warning-box p:last-child { margin-bottom: 0; }
.main-content .warning-box ul { padding-left: var(--space-24); margin-bottom: 0; }
.main-content .warning-box li { margin-bottom: var(--space-4); }
.dark-mode .main-content .warning-box { background-color: rgba(var(--warning-rgb), 0.15); border-left-color: var(--warning); }
.dark-mode .main-content .warning-box h4 { color: var(--warning); }


/* Example Box */
.main-content .example-box {
    background-color: var(--grey-100);
    border-radius: 8px;
    padding: var(--space-16);
    margin: var(--space-16) 0;
    border: 1px solid var(--divider);
}
.main-content .example-box h4 {
    margin-top: 0; margin-bottom: var(--space-12);
    font-size: var(--font-size-base);
}
.main-content .example-box p:last-child, .main-content .example-box ul:last-child, .main-content .example-box table:last-child {
    margin-bottom: 0;
}
.main-content .example-box table {
    width: 100%; margin-top: var(--space-8); border-collapse: collapse;
}
.main-content .example-box th, .main-content .example-box td {
    padding: var(--space-8); border: 1px solid var(--divider);
    font-size: var(--font-size-small); text-align: left;
}
.main-content .example-box th { background-color: var(--grey-200); }
.dark-mode .main-content .example-box { background-color: var(--grey-800); border-color: var(--grey-700); }
.dark-mode .main-content .example-box th { background-color: var(--grey-700); }
.dark-mode .main-content .example-box th, .dark-mode .main-content .example-box td { border-color: var(--grey-600); }


/* Download Box */
.main-content .download-box {
    background-color: var(--blue-100);
    border-radius: 16px;
    padding: var(--space-32);
    margin: var(--space-48) 0;
    text-align: center;
    border: 1px solid var(--blue-200);
}
.main-content .download-box h3 {
    margin-top: 0; margin-bottom: var(--space-16); color: var(--blue);
}
.main-content .download-box p {
    margin-bottom: var(--space-24); max-width: 600px; margin-left: auto; margin-right: auto;
}
.dark-mode .main-content .download-box { background-color: rgba(var(--blue-rgb), 0.15); border-color: rgba(var(--blue-rgb), 0.4); }
.dark-mode .main-content .download-box h3 { color: var(--button-primary-bg); }


/* Template Grid/Card (Shortcode: template-card) */
.main-content .template-grid { /* Parent wrapper if used */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-24);
    margin: var(--space-32) 0;
}
.main-content .template-card { /* For the template-card shortcode */
    background-color: var(--elevated-surface);
    border-radius: 12px;
    padding: var(--space-24);
    border: 1px solid var(--divider);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.main-content .template-card h4 { /* Title within template card */
    margin-top: 0; margin-bottom: var(--space-12);
    font-size: var(--font-size-h4);
}
.main-content .template-card p { /* Description within template card */
    margin-bottom: var(--space-16);
    flex-grow: 1;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}
.main-content .template-card .btn { /* Button within template card */
    align-self: flex-start;
    margin-top: auto;
}
.dark-mode .main-content .template-card { background-color: var(--elevated-surface); border-color: var(--divider); }
/* Code preview for template-card (hidden by default, JS toggles) */
.main-content .template-card .code-preview {
    margin-top: var(--space-16);
    border: 1px solid var(--divider);
    border-radius: 8px;
    overflow: hidden; /* Clip the pre/code block */
}
.main-content .template-card .code-preview pre {
    margin:0; /* Reset pre margin */
    background-color: var(--grey-800); /* Match code-block shortcode bg */
    padding: var(--space-16);
    overflow-x: auto;
}
.main-content .template-card .code-preview code {
    color: #f8f8f2; /* Match code-block shortcode text color */
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--font-size-small);
}


/* Table Container (for basic tables needing scroll) */
.main-content .table-container {
    overflow-x: auto;
    margin: var(--space-32) 0;
    border: 1px solid var(--divider);
    border-radius: 8px;
}
.main-content .table-container table {
    width: 100%; border-collapse: collapse; min-width: 500px;
}
.main-content .table-container th, .main-content .table-container td {
    padding: var(--space-12); text-align: left;
    border-bottom: 1px solid var(--divider);
    font-size: var(--font-size-small);
}
.main-content .table-container th {
    background-color: var(--grey-100); font-weight: 600;
    border-bottom-width: 2px;
}
.main-content .table-container tr:last-child td { border-bottom: none; }
.dark-mode .main-content .table-container { border-color: var(--divider); }
.dark-mode .main-content .table-container th { background-color: var(--grey-800); border-color: var(--grey-700); }
.dark-mode .main-content .table-container td { border-color: var(--grey-700); }


/* Key Takeaways Box */
.main-content .key-takeaways {
    background-color: var(--blue-100);
    border-left: 4px solid var(--blue);
    padding: var(--space-24);
    margin: var(--space-32) 0;
    border-radius: 0 8px 8px 0;
}
.main-content .key-takeaways h4 {
    color: var(--blue); margin-top: 0; margin-bottom: var(--space-12);
    font-size: var(--font-size-h4);
}
.main-content .key-takeaways ul {
    padding-left: var(--space-24); margin-top: 0; margin-bottom: 0;
    list-style-type: disc;
}
.main-content .key-takeaways li { margin-bottom: var(--space-8); }
.dark-mode .main-content .key-takeaways { background-color: rgba(var(--blue-rgb), 0.15); border-left-color: var(--button-primary-bg); }
.dark-mode .main-content .key-takeaways h4 { color: var(--blue-300); }


/* Formula Box */
.main-content .formula-box {
    background: var(--elevated-surface); border: 1px solid var(--divider);
    border-radius: 12px; padding: var(--space-24);
    margin: var(--space-24) 0; text-align: center;
}
.main-content .formula {
    font-family: 'Courier New', monospace; font-size: 20px;
    background: var(--grey-100); padding: var(--space-16);
    border-radius: 8px; margin: var(--space-16) 0;
    overflow-x: auto; text-align: left;
}
.dark-mode .main-content .formula { background: var(--grey-800); }


/* Pro Tips */
.main-content .pro-tips {
    background: var(--blue-100); border-radius: 12px;
    padding: var(--space-24); margin: var(--space-32) 0;
    border-left: 4px solid var(--blue);
}
.main-content .pro-tips h3 { color: var(--blue); margin-top: 0; margin-bottom: var(--space-16);}
.main-content .pro-tips ul { list-style-type: disc; padding-left: var(--space-24); margin-bottom: 0;}
.main-content .pro-tips li { margin-bottom: var(--space-8);}
.dark-mode .main-content .pro-tips { background: rgba(var(--blue-rgb), 0.15); border-left-color: var(--button-primary-bg);}
.dark-mode .main-content .pro-tips h3 { color: var(--blue-300);}


/* Implementation Note */
.main-content .implementation-note {
    background: rgba(var(--blue-rgb), 0.1); border-left: 4px solid var(--blue);
    padding: var(--space-16); margin: var(--space-16) 0;
    border-radius: 0 8px 8px 0;
}
.main-content .implementation-note h4 {
    margin-top: 0; color: var(--blue); font-size: var(--font-size-base);
    margin-bottom: var(--space-8);
}
.main-content .implementation-note ul {
    padding-left: var(--space-24); margin-bottom: 0; list-style-type: disc;
}
.main-content .implementation-note li { margin-bottom: var(--space-4); }
.dark-mode .main-content .implementation-note { background: rgba(var(--blue-rgb), 0.15); border-left-color: var(--blue-400); }
.dark-mode .main-content .implementation-note h4 { color: var(--blue-300); }


/* Troubleshooting Table */
.main-content .troubleshooting-table {
    overflow-x: auto; margin: var(--space-16) 0;
    border: 1px solid var(--divider); border-radius: 8px;
}
.main-content .troubleshooting-table table {
    width: 100%; min-width: 600px; border-collapse: collapse;
}
.main-content .troubleshooting-table th, .main-content .troubleshooting-table td {
    padding: var(--space-12); border: 1px solid var(--divider);
    text-align: left; vertical-align: top; font-size: var(--font-size-small);
}
.main-content .troubleshooting-table th {
    background: var(--grey-100); font-weight: 600;
    border-color: var(--grey-300); border-bottom-width: 2px;
}
.main-content .troubleshooting-table td { border-top: none; border-left: none; border-right: none;} /* From original */
.main-content .troubleshooting-table tr:last-child td { border-bottom: none;}
.main-content .troubleshooting-table ul { padding-left: var(--space-16); margin: 0; }
.main-content .troubleshooting-table li { margin-bottom: var(--space-4); }
.dark-mode .main-content .troubleshooting-table { border-color: var(--grey-700); }
.dark-mode .main-content .troubleshooting-table th { background: var(--grey-800); border-color: var(--grey-700); }
.dark-mode .main-content .troubleshooting-table td { border-color: var(--grey-700); }


/* Pros & Cons */
.main-content .pros-cons {
    display: grid; grid-template-columns: 1fr;
    gap: 1.5rem; margin: 2rem 0;
}
@media (min-width: 768px) {
    .main-content .pros-cons { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.main-content .pros {
    background: rgba(var(--success-rgb), 0.08); border-radius: 12px;
    padding: 1.5rem; border: 1px solid rgba(var(--success-rgb), 0.3);
}
.main-content .pros h3 { margin-top: 0; color: var(--success); margin-bottom: 1rem; }
.main-content .cons {
    background: rgba(var(--red-rgb), 0.08); border-radius: 12px;
    padding: 1.5rem; border: 1px solid rgba(var(--red-rgb), 0.3);
}
.main-content .cons h3 { margin-top: 0; color: var(--red-500); margin-bottom: 1rem; }
.main-content .pros ul, .main-content .cons ul {
    padding-left: var(--space-24); margin-bottom: 0; list-style-type: disc;
}
.main-content .pros li, .main-content .cons li { margin-bottom: var(--space-8); }
.dark-mode .main-content .pros { background: rgba(var(--success-rgb), 0.1); border-color: rgba(var(--success-rgb), 0.3); }
.dark-mode .main-content .pros h3 { color: var(--success); }
.dark-mode .main-content .cons { background: rgba(var(--red-rgb), 0.1); border-color: rgba(var(--red-rgb), 0.3); }
.dark-mode .main-content .cons h3 { color: var(--red-500); }


/* --- Partials Styling (ensure these are specific) --- */

/* Author Bio (Partial) */
.author-bio { /* This is a page-level partial, not necessarily in .main-content */
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-24); margin-top: var(--space-48);
  background: var(--elevated-surface); border: 1px solid var(--divider);
  border-radius: 16px; box-sizing: border-box; height: auto !important;
}
.author-image {
  width: 80px; height: 80px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.author-info h4 { margin-bottom: var(--space-4); }
.author-info p {
  margin-bottom: 0; color: var(--text-secondary);
  overflow-wrap: break-word; word-wrap: break-word;
  height: auto !important; max-height: none !important; overflow: visible !important;
  text-overflow: clip !important; display: block !important;
  -webkit-line-clamp: unset !important; white-space: normal !important;
}
.dark-mode .author-bio { background: var(--elevated-surface); border-color: var(--divider); }


/* FAQ Section (Partial) */
.faq { /* Page-level partial wrapper */
  margin: var(--space-48) 0;
}
.faq-item { /* Individual Q&A item */
  margin: var(--space-24) 0; padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--divider);
}
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item h3 { /* Question */
  margin-bottom: var(--space-8); color: var(--text);
  font-size: var(--font-size-h4); font-weight: 600;
  overflow-wrap: break-word; word-wrap: break-word;
}
.faq-item p { /* Answer */
  overflow-wrap: break-word; word-wrap: break-word;
  color: var(--text-secondary); font-size: var(--font-size-small);
  margin-bottom: 0;
}


/* Breadcrumbs (Partial) */
.breadcrumb-nav { /* Wrapper for breadcrumbs */
  padding: var(--space-16) 0; border-bottom: 1px solid var(--divider);
  background: var(--background); margin-bottom: var(--space-24);
}
.breadcrumb {
  display: flex; align-items: center; list-style: none;
  margin: 0 auto; padding: 0 var(--space-24); max-width: 1140px; /* Centered */
  flex-wrap: wrap; /* Allow wrapping on small screens */
}
.breadcrumb-item {
  display: inline-flex; align-items: center; font-size: var(--font-size-small);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: '›'; margin: 0 var(--space-8); color: var(--grey-500);
}
.breadcrumb-item a {
  color: var(--blue); text-decoration: none; transition: color 0.2s ease;
}
.breadcrumb-item a:hover { color: var(--blue-600); text-decoration: underline; }
.breadcrumb-item.active { color: var(--text-secondary); }


/* Sidebar Navigation (Partial) */
.sidebar-nav { /* Wrapper for main sidebar nav (TOC, articles) */
  padding: var(--space-24); background: var(--elevated-surface);
  border-radius: 16px; border: 1px solid var(--divider);
  margin-bottom: var(--space-32);
}
.sidebar-nav h3 {
  font-size: var(--font-size-h4); margin-top:0; margin-bottom: var(--space-16); font-weight: 600;
  color: var(--grey-700); border-bottom: 1px solid var(--divider);
  padding-bottom: var(--space-8);
}
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { margin-bottom: var(--space-12); }
.sidebar-nav a {
  color: var(--blue); text-decoration: none; display: block;
  padding: var(--space-4) 0; transition: color 0.2s ease;
  font-size: var(--font-size-small);
}
.sidebar-nav a:hover { color: var(--blue-600); text-decoration: underline; }
.sidebar-nav .active a {
    font-weight: 700; color: var(--text);
    pointer-events: none; text-decoration: none;
}
.dark-mode .sidebar-nav { background: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .sidebar-nav h3 { color: var(--grey-300); border-color: var(--divider); }
.dark-mode .sidebar-nav a { color: var(--button-primary-bg); }
.dark-mode .sidebar-nav a:hover { color: var(--blue-300); }
.dark-mode .sidebar-nav .active a { color: var(--text); }


/* Related Resources Sidebar (Partial) */
.related-resources { /* Wrapper for related content in sidebar */
  padding: var(--space-24); background: var(--grey-100);
  border-radius: 16px; margin-bottom: var(--space-32);
  border: 1px solid var(--divider);
}
.related-resources h3 {
  font-size: var(--font-size-h4); margin-top:0; margin-bottom: var(--space-16); font-weight: 600;
  color: var(--grey-700); border-bottom: 1px solid var(--divider);
  padding-bottom: var(--space-8);
}
.related-resources ul { list-style: none; padding: 0; margin: 0; }
.related-resources li { margin-bottom: var(--space-12); }
.related-resources a {
  color: var(--blue); text-decoration: none; display: block;
  transition: color 0.2s ease; font-size: var(--font-size-small);
}
.related-resources a:hover { color: var(--blue-600); text-decoration: underline; }
.dark-mode .related-resources { background: var(--grey-800); }
.dark-mode .related-resources h3 { color: var(--grey-300); border-color: var(--divider); }

/* Tools Section Styling */
.tools-section {
  background: var(--blue-100); /* Different background to distinguish it */
  border: 1px solid var(--blue-200);
}
.tools-section h3 {
  color: var(--blue);
  border-bottom-color: var(--blue-200);
}
.dark-mode .tools-section {
  background: rgba(var(--blue-rgb), 0.15);
  border-color: rgba(var(--blue-rgb), 0.3);
}
.dark-mode .tools-section h3 {
  color: var(--blue-300);
  border-bottom-color: rgba(var(--blue-rgb), 0.3);
}


/* Further Reading Section (Partial) */
.further-reading { /* Page-level partial wrapper */
  background: var(--section-bg-alt); border-radius: 16px;
  padding: var(--space-48); margin-top: var(--space-64); box-sizing: border-box;
}
.further-reading h2 {
  text-align: center; margin-top: 0; margin-bottom: var(--space-32);
}
.further-reading-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-32);
}
.further-reading-card {
  background: var(--elevated-surface); border-radius: 16px;
  padding: var(--space-24); transition: all 0.2s ease;
  border: 1px solid var(--divider); display: flex; flex-direction: column;
  box-sizing: border-box; height: auto !important;
}
.further-reading-card:hover {
  transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.further-reading-card h3 {
  margin-top: 0; margin-bottom: var(--space-12); color: var(--blue);
  overflow-wrap: break-word; word-wrap: break-word;
}
.further-reading-card p {
  flex-grow: 1; color: var(--text-secondary);
  margin-bottom: var(--space-16); overflow-wrap: break-word; word-wrap: break-word;
  height: auto !important; max-height: none !important; overflow: visible !important;
  text-overflow: clip !important; display: block !important;
  -webkit-line-clamp: unset !important; white-space: normal !important;
}
.further-reading-card .btn {
  align-self: flex-start; margin-top: auto;
  padding-left: var(--space-16); padding-right: var(--space-16);
}
.dark-mode .further-reading { background: var(--grey-800); }
.dark-mode .further-reading-card { background: var(--elevated-surface); border-color: var(--divider); }


/* --- Article Specific Typography (apply within .main-content or article tag) --- */
.main-content article h1, .main-content .content h1 { /* Target h1 within article or .content div */
  font-size: var(--font-size-h1); font-weight: 800; margin-bottom: var(--space-24);
  line-height: 1.2; letter-spacing: -0.02em;
}
.main-content article h2, .main-content .content h2 {
  font-size: var(--font-size-h2); font-weight: 700; margin-top: var(--space-48);
  margin-bottom: var(--space-24); line-height: 1.2; letter-spacing: -0.02em;
}
.main-content article h3, .main-content .content h3 { /* Excludes component h3s that are already specific */
  font-size: var(--font-size-h3); font-weight: 600; margin-bottom: var(--space-16);
  line-height: 1.3;
}
.main-content article p, .main-content .content p { /* Excludes component p that are already specific */
  margin-bottom: var(--space-16); line-height: 1.6;
}
.main-content article ul, .main-content article ol,
.main-content .content ul, .main-content .content ol { /* Excludes component ul/ol that are already specific */
  margin: var(--space-16) 0; padding-left: var(--space-24);
}
.main-content article li, .main-content .content li { /* Excludes component li that are already specific */
  margin-bottom: var(--space-8);
}

/* Footer Styles (Refined for Robustness & Column Width) */
/* .marketing-footer provides the dark background and base text color from styles-marketing.css */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* More robust for varying content */
    /* For strictly 3 columns: grid-template-columns: repeat(3, minmax(0, 1fr)); */
    gap: var(--space-24);
    margin-bottom: var(--space-32);
}
.footer-column {
    min-width: 0; /* Crucial for grid items to prevent overflow from breaking layout */
}
.footer-column ul {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%; /* Ensure ul can take full width of its column */
}
.footer-column li {
    margin-bottom: var(--space-12);
}
.footer-column li:last-child {
    margin-bottom: 0;
}
.footer-column a {
    display: inline-block;
    word-break: break-word;
    overflow-wrap: break-word;
}
.footer-legal-nav {
    margin-top: var(--space-24);
    padding-top: var(--space-24);
    border-top: 1px solid var(--grey-700);
    text-align: center;
}
.legal-links-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-16) var(--space-24);
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.footer-home-link {
    text-align: center;
    margin-top: var(--space-24);
    margin-bottom: var(--space-16);
    font-size: var(--font-size-small);
}
.footer-home-link a { color: var(--blue); }
.dark-mode .footer-home-link a { color: var(--button-primary-bg); }
.footer-copyright {
    margin-top: var(--space-16);
    padding-top: var(--space-16);
    border-top: 1px solid var(--grey-700);
    text-align: center;
}


/* Responsive Adjustments (Consolidated from original) */
@media (max-width: 992px) {
  .two-column-layout {
    flex-direction: column;
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }
  .sidebar-column {
    width: 100%;
    position: static;
    margin-top: var(--space-48);
  }
  .further-reading-grid { grid-template-columns: 1fr; }
  .main-content .myth-vs-fact { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .main-content .tldr-box, .main-content aside.stat-callout, .main-content .interactive-checklist,
  .author-bio, .faq, .further-reading, .main-content .workflow-box, .main-content .download-box,
  .main-content .tip-box, .main-content .warning-box, .main-content .example-box, .main-content .key-takeaways {
      padding: var(--space-24);
  }
  .main-content article h1, .main-content .content h1 { font-size: calc(var(--font-size-h1) * 0.8); }
  .main-content article h2, .main-content .content h2 { font-size: calc(var(--font-size-h2) * 0.85); }
  .main-content article h3, .main-content .content h3 { font-size: calc(var(--font-size-h3) * 0.9); }
  .guide-header { padding: var(--space-48) 0; }
  .guide-header h1 { font-size: calc(var(--font-size-h1) * 0.7); }
  .main-content .template-grid { grid-template-columns: 1fr; }
  .footer-grid {
      grid-template-columns: 1fr; /* Stack footer columns */
  }
  .footer-column {
      margin-bottom: var(--space-24);
  }
}

@media (max-width: 480px) {
  .two-column-layout { padding-left: var(--space-8); padding-right: var(--space-8); }
  .main-content .tldr-box, .main-content aside.stat-callout, .main-content .interactive-checklist,
  .author-bio, .faq, .further-reading, .main-content .workflow-box, .main-content .download-box,
  .main-content .tip-box, .main-content .warning-box, .main-content .example-box, .main-content .key-takeaways {
      padding: var(--space-16);
  }
  .breadcrumb-nav { padding-left: var(--space-8); padding-right: var(--space-8); }
  .breadcrumb-item { font-size: var(--font-size-tiny); }
  .main-content aside.stat-callout .stat { font-size: calc(var(--font-size-h3) * 0.85); }
  .author-bio { flex-direction: column; text-align: center; }
  .author-info { margin-top: var(--space-16); }
  .main-content article h1, .main-content .content h1 { font-size: calc(var(--font-size-h1) * 0.7); }
  .main-content article h2, .main-content .content h2 { font-size: calc(var(--font-size-h2) * 0.75); }
  .main-content article h3, .main-content .content h3 { font-size: calc(var(--font-size-h3) * 0.85); }
  .main-content article h4, .main-content .content h4 { font-size: calc(var(--font-size-h4) * 0.9); }
  .main-content article p, .main-content article li,
  .main-content .content p, .main-content .content li { font-size: var(--font-size-small); }
  .guide-header { padding: var(--space-32) 0; }
  .guide-header h1 { font-size: calc(var(--font-size-h1) * 0.6); }
  .guide-header p { font-size: var(--font-size-base); }
  .main-content .workflow-header { flex-direction: column; align-items: flex-start; }
  .main-content .workflow-icon { margin-bottom: var(--space-16); }
  .main-content .checklist-download { text-align: left; }
  .main-content .pros-cons { gap: 1rem; }
  .main-content .pros, .main-content .cons { padding: 1rem; }
}

/* Pink CTA Override - COMMENTED OUT */
/*
.cta-button { ... }
.cta-button a, .cta-button .btn, .btn-secondary { ... }
.cta-button a:hover, .cta-button .btn:hover, .btn-secondary:hover { ... }
*/

/* Skip Link Hiding */
.skip-to-content {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-to-content:focus {
  position: static; width: auto; height: auto; overflow: visible;
  display: inline-block; padding: var(--space-8) var(--space-16);
  background-color: var(--blue); color: white; font-weight: bold;
  margin: var(--space-8); border-radius: 8px; text-decoration: none;
  z-index: 1100;
}

/* Base Button Style Refinements (COMMENTED OUT - Rely on styles-marketing.css) */
/*
.btn { ... }
.btn:hover { ... }
*/

/* Dark Mode Adjustments (Consolidated and specific) */
.dark-mode .main-content .tldr-box { background: var(--grey-800); border-color: var(--blue-400); }
.dark-mode .main-content aside.stat-callout { background: rgba(var(--pink-rgb), 0.15); border-color: rgba(var(--pink-rgb), 0.4); }
.dark-mode .main-content .interactive-checklist { background: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .main-content .interactive-checklist th { background: var(--grey-800); }
.dark-mode .author-bio { background: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .related-resources { background: var(--grey-800); }
.dark-mode .further-reading { background: var(--grey-800); }
.dark-mode .further-reading-card { background: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .sidebar-nav { background: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .sidebar-nav h3 { color: var(--grey-300); border-color: var(--divider); }
.dark-mode .sidebar-nav a { color: var(--button-primary-bg); }
.dark-mode .sidebar-nav a:hover { color: var(--blue-300); }
.dark-mode .sidebar-nav .active a { color: var(--text); }
.dark-mode .guide-header { background-color: var(--button-primary-bg); }
.dark-mode .guide-header h1, .dark-mode .guide-header p { color: #FFFFFF !important; }

.dark-mode .main-content .step-box { background: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .main-content .mini-case { background: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .main-content .myth-box { background: rgba(var(--error-rgb), 0.15); border-color: rgba(var(--error-rgb), 0.4); }
.dark-mode .main-content .fact-box { background: rgba(var(--success-rgb), 0.15); border-color: rgba(var(--success-rgb), 0.4); }
.dark-mode .main-content .quote-callout { background-color: rgba(var(--blue-rgb), 0.1); border-left-color: var(--button-primary-bg); }
.dark-mode .main-content .mistakes-accordion .mistake-item { background: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .main-content .mistake-item:not(.accordion-item) { background: var(--grey-800); border-color: var(--grey-700); }
.dark-mode .main-content .quick-poll { background: rgba(var(--blue-rgb), 0.15); border-color: rgba(var(--blue-rgb), 0.4); }
.dark-mode .main-content .workflow-box { background-color: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .main-content .workflow-icon { background-color: rgba(var(--blue-rgb), 0.2); color: var(--button-primary-bg); }
.dark-mode .main-content .code-block { background: #2d2d2d; color: #ccc; border-color: #444; }
.dark-mode .main-content .code-block h4 { color: var(--grey-500); }
.dark-mode .main-content .tip-box { background-color: rgba(var(--blue-rgb), 0.15); border-left-color: var(--button-primary-bg); }
.dark-mode .main-content .tip-box h4 { color: var(--blue-300); }
.dark-mode .main-content .warning-box { background-color: rgba(var(--warning-rgb), 0.15); border-left-color: var(--warning); }
.dark-mode .main-content .warning-box h4 { color: var(--warning); }
.dark-mode .main-content .example-box { background-color: var(--grey-800); border-color: var(--grey-700); }
.dark-mode .main-content .example-box th { background-color: var(--grey-700); }
.dark-mode .main-content .example-box th, .dark-mode .main-content .example-box td { border-color: var(--grey-600); }
.dark-mode .main-content .download-box { background-color: rgba(var(--blue-rgb), 0.15); border-color: rgba(var(--blue-rgb), 0.4); }
.dark-mode .main-content .download-box h3 { color: var(--button-primary-bg); }
.dark-mode .main-content .template-card { background-color: var(--elevated-surface); border-color: var(--divider); }
.dark-mode .main-content .table-container { border-color: var(--divider); }
.dark-mode .main-content .table-container th { background-color: var(--grey-800); border-color: var(--grey-700); }
.dark-mode .main-content .table-container td { border-color: var(--grey-700); }
.dark-mode .main-content .key-takeaways { background-color: rgba(var(--blue-rgb), 0.15); border-left-color: var(--button-primary-bg); }
.dark-mode .main-content .key-takeaways h4 { color: var(--blue-300); }
.dark-mode .main-content .formula { background: var(--grey-800); }
.dark-mode .main-content .data-table { border-color: var(--grey-700); }
.dark-mode .main-content .data-table th { background: var(--grey-800); border-color: var(--grey-700); }
.dark-mode .main-content .data-table td { border-color: var(--grey-700); }
.dark-mode .main-content .definition-box { background: var(--grey-800); border-color: var(--blue-400); }
.dark-mode .main-content .expert-quote { background: var(--elevated-surface); border-left-color: var(--button-primary-bg); }
.dark-mode .main-content .pro-tips { background: rgba(var(--blue-rgb), 0.15); border-left-color: var(--button-primary-bg);}
.dark-mode .main-content .pro-tips h3 { color: var(--blue-300);}
.dark-mode .main-content .implementation-note { background: rgba(var(--blue-rgb), 0.15); border-left-color: var(--blue-400); }
.dark-mode .main-content .implementation-note h4 { color: var(--blue-300); }
.dark-mode .main-content .troubleshooting-table { border-color: var(--grey-700); }
.dark-mode .main-content .troubleshooting-table th { background: var(--grey-800); border-color: var(--grey-700); }
.dark-mode .main-content .troubleshooting-table td { border-color: var(--grey-700); }
.dark-mode .main-content .pros { background: rgba(var(--success-rgb), 0.1); border-color: rgba(var(--success-rgb), 0.3); }
.dark-mode .main-content .pros h3 { color: var(--success); }
.dark-mode .main-content .cons { background: rgba(var(--red-rgb), 0.1); border-color: rgba(var(--red-rgb), 0.3); }
.dark-mode .main-content .cons h3 { color: var(--red-500); }


/* FORCE TEXT WRAP OVERRIDES */
.further-reading-card p,
.author-info p {
    height: auto !important; max-height: none !important; overflow: visible !important;
    text-overflow: clip !important; display: block !important;
    -webkit-line-clamp: unset !important; white-space: normal !important;
    overflow-wrap: break-word; word-wrap: break-word;
}
.further-reading-card p { margin-bottom: var(--space-16); }
.author-info p { margin-bottom: 0; }
.further-reading-card, .author-bio { height: auto !important; }

/* === IMAGE RESPONSIVENESS FIXES === */
.section-image {
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    margin: var(--space-24) 0;
}

.section-image img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    display: block;
}

/* End of file */