/* ============================================
   OFFGRID AI INTEL - Content Pages Stylesheet
   Styles for extracted content from legacy HTML pages
   ============================================ */

/* --- Shared Content Container (wraps extracted content) --- */
.content-container .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
}

/* --- Page Hero (inside content pages) --- */
.content-container .hero {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.95), rgba(45, 30, 15, 0.95));
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 20px;
    margin-bottom: 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(184, 134, 11, 0.2);
    position: relative;
    overflow: hidden;
    min-height: auto;
    display: block;
    align-items: initial;
}
.content-container .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #b8860b, #daa520, #cd853f, #d2691e);
    background-size: 300% 100%;
    animation: gradient-shift 8s ease infinite;
}
.content-container .hero::after {
    display: none;
}
.content-container .hero h1 {
    font-size: 2.5em;
    font-weight: 900;
    margin-bottom: 12px;
    letter-spacing: -1px;
    color: var(--text-primary);
    line-height: 1.2;
}
.content-container .hero .hero-subtitle,
.content-container .hero p {
    color: var(--text-secondary);
    max-width: 700px;
    margin: 16px auto 0;
    line-height: 1.7;
    font-size: 16px;
}
.content-container .hero .version {
    color: var(--gold);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
}

/* --- Compass Container (in content pages) --- */
.content-container .compass-container {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    animation: compass-spin 20s linear infinite;
}
.content-container .compass-container svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* --- Section Blocks --- */
.content-container .section,
.content-container .intro-section,
.content-container .content-section {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}
.content-container .section h2,
.content-container .intro-section h2,
.content-container .content-section h2 {
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--gold);
}
.content-container .section h3,
.content-container .intro-section h3,
.content-container .content-section h3 {
    font-size: 1.3em;
    font-weight: 700;
    margin: 24px 0 12px;
    color: var(--text-primary);
}
.content-container .section h4,
.content-container .content-section h4 {
    font-size: 1.1em;
    font-weight: 600;
    margin: 20px 0 10px;
    color: var(--gold);
}
.content-container .section p,
.content-container .intro-section p,
.content-container .content-section p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
}
.content-container .section a,
.content-container .intro-section a,
.content-container .content-section a {
    color: var(--gold);
    text-decoration: underline;
    text-decoration-color: rgba(212, 175, 55, 0.3);
    transition: text-decoration-color 0.3s;
}
.content-container .section a:hover,
.content-container .intro-section a:hover,
.content-container .content-section a:hover {
    text-decoration-color: var(--gold);
}
.content-container .section ul,
.content-container .section ol,
.content-container .intro-section ul,
.content-container .content-section ul,
.content-container .content-section ol {
    color: var(--text-secondary);
    padding-left: 24px;
    margin-bottom: 16px;
}
.content-container .section li,
.content-container .intro-section li,
.content-container .content-section li {
    padding: 6px 0;
    line-height: 1.7;
}
.content-container .section li strong,
.content-container .intro-section li strong,
.content-container .content-section li strong {
    color: var(--text-primary);
}
.content-container .section strong,
.content-container .intro-section strong {
    color: var(--text-primary);
}
.content-container .section em,
.content-container .intro-section em {
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Tables --- */
.content-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 10px;
    overflow: hidden;
}
.content-container table th {
    background: rgba(184, 134, 11, 0.2);
    color: var(--gold);
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 2px solid rgba(184, 134, 11, 0.35);
    white-space: nowrap;
}
.content-container table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(184, 134, 11, 0.2);
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: top;
}
.content-container table tbody tr {
    border-bottom: 1px solid rgba(184, 134, 11, 0.15);
}
.content-container table tbody tr:last-child {
    border-bottom: none;
}
.content-container table tbody tr:nth-child(even) td {
    background: rgba(184, 134, 11, 0.03);
}
.content-container table tr:hover td {
    background: rgba(184, 134, 11, 0.08);
}
.content-container .medal {
    font-size: 18px;
    margin-right: 4px;
}

/* --- Special Boxes --- */
.content-container .example-box,
.content-container .info-box,
.content-container .warning-box,
.content-container .key-finding,
.content-container .transparency-box,
.content-container .hardware-note,
.content-container .disclaimer,
.content-container .tip-card,
.content-container .commitment-box,
.content-container .bottom-line,
.content-container .closing-message,
.content-container .final-thoughts {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 12px;
    padding: 24px;
    margin: 20px 0;
}
.content-container .key-finding {
    border-left: 4px solid var(--gold);
    background: rgba(212, 175, 55, 0.08);
}
.content-container .warning-box {
    border-left: 4px solid #FF9800;
    background: rgba(255, 152, 0, 0.08);
}
.content-container .key-finding p,
.content-container .example-box p,
.content-container .info-box p,
.content-container .warning-box p,
.content-container .disclaimer p,
.content-container .bottom-line p,
.content-container .closing-message p,
.content-container .final-thoughts p {
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.content-container .key-finding p:last-child,
.content-container .example-box p:last-child,
.content-container .info-box p:last-child {
    margin-bottom: 0;
}
.content-container .example-box ul,
.content-container .info-box ul {
    color: var(--text-secondary);
    padding-left: 20px;
}

/* --- Hardware Table --- */
.content-container .hardware-table {
    overflow-x: auto;
    margin: 20px 0;
}
.content-container .hardware-table table {
    min-width: 600px;
}

/* --- Footer Quote --- */
.content-container .footer-quote {
    text-align: center;
    padding: 32px;
    margin: 30px 0;
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    font-style: italic;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.8;
}

/* --- Table of Contents --- */
.content-container .toc {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.content-container .toc h2 {
    font-size: 1.5em;
    color: var(--gold);
    margin-bottom: 20px;
}
.content-container .toc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.content-container .toc-grid a {
    display: block;
    padding: 12px 16px;
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 10px;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.3s;
    text-decoration: none;
}
.content-container .toc-grid a:hover {
    background: rgba(184, 134, 11, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

/* --- Feature List --- */
.content-container .feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0;
}
.content-container .feature-list li {
    padding: 12px 16px;
    background: rgba(184, 134, 11, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(184, 134, 11, 0.15);
    color: var(--text-secondary);
}

/* --- Section Image --- */
.content-container .section-image {
    border-radius: 12px;
    margin: 20px 0;
    border: 1px solid rgba(184, 134, 11, 0.2);
    overflow: hidden;
}
.content-container .section-image img {
    width: 100%;
    border-radius: 12px;
}

/* --- Back to Top --- */
.content-container .back-to-top {
    display: none;
}

/* ============================================
   READY-MADE PROMPTS - Specific Styles
   ============================================ */

.content-container .category-section {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.content-container .category-header {
    font-size: 1.5em;
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 8px;
}
.content-container .category-section .content {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.7;
}
.content-container .prompt-list {
    list-style: none;
    padding: 0;
}
.content-container .prompt {
    background: rgba(26, 22, 17, 0.8);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 10px;
    padding: 14px 20px 14px 20px;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}
.content-container .prompt:hover {
    border-color: var(--gold);
    background: rgba(184, 134, 11, 0.08);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.12);
    transform: translateY(-1px);
}
.content-container .prompt::after {
    content: 'Click to copy';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--gold);
    opacity: 0;
    transition: opacity 0.25s;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    letter-spacing: 0.5px;
}
.content-container .prompt:hover::after {
    opacity: 0.6;
}

/* Quick Start Section */
.content-container .quick-start {
    background: linear-gradient(135deg, rgba(45, 35, 15, 0.95), rgba(60, 40, 20, 0.95));
    border: 2px solid rgba(184, 134, 11, 0.35);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    text-align: center;
}
.content-container .quick-start h2 {
    font-size: 1.5em;
    color: var(--gold);
    margin-bottom: 12px;
}
.content-container .quick-start p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Tips Section */
.content-container .tips-section {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.content-container .tips-section h2 {
    font-size: 1.5em;
    color: var(--gold);
    margin-bottom: 20px;
}
.content-container .tip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.content-container .tip-card {
    margin: 0;
}
.content-container .tip-card h3 {
    color: var(--gold);
    font-size: 1.1em;
    margin-bottom: 8px;
}
.content-container .tip-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ============================================
   WHAT TO EXPECT - Specific Styles
   ============================================ */

.content-container .expectations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.content-container .expectation-card {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 12px;
    padding: 24px;
}
.content-container .expectation-card h3 {
    color: var(--gold);
    font-size: 1.1em;
    margin-bottom: 8px;
}
.content-container .expectation-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.content-container .comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.content-container .comparison-card {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 12px;
    padding: 24px;
}
.content-container .comparison-card h3 {
    color: var(--gold);
    margin-bottom: 8px;
}
.content-container .comparison-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.content-container .performance-table {
    overflow-x: auto;
    margin: 20px 0;
}

/* FAQ Styles */
.content-container .faqs {
    margin: 20px 0;
}
.content-container .faq-item {
    background: rgba(184, 134, 11, 0.06);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
.content-container .faq-question {
    padding: 16px 20px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
}
.content-container .faq-question:hover {
    color: var(--gold);
}
.content-container .faq-toggle {
    color: var(--gold);
    font-size: 18px;
    font-weight: 700;
}
.content-container .faq-answer {
    padding: 0 20px 16px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ============================================
   PROMPT TESTING - Specific Styles
   ============================================ */

.content-container .methodology,
.content-container .transparency {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.content-container .methodology h2,
.content-container .transparency h2 {
    font-size: 1.5em;
    color: var(--gold);
    margin-bottom: 16px;
}
.content-container .methodology p,
.content-container .transparency p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 12px;
}
.content-container .transparency-link {
    display: inline-block;
    color: var(--gold);
    font-weight: 600;
    margin-top: 8px;
}

.content-container .criteria-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.content-container .criteria-card {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 12px;
    padding: 20px;
}
.content-container .criteria-card h3 {
    color: var(--gold);
    font-size: 1em;
    margin-bottom: 8px;
}
.content-container .criteria-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Test Log */
.content-container .test-log {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.content-container .test-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.content-container .test-title {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-primary);
}
.content-container .test-model {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    background: rgba(184, 134, 11, 0.15);
    padding: 4px 12px;
    border-radius: 6px;
}
.content-container .test-prompt {
    background: rgba(26, 22, 17, 0.8);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--text-secondary);
}
.content-container .test-examples {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
}
.content-container .test-examples p {
    margin-bottom: 8px;
}
.content-container .test-scores {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.content-container .score-item {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 8px;
    padding: 10px 16px;
    text-align: center;
}
.content-container .score-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--gold);
}
.content-container .score-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.content-container .overall-grade {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 12px;
}
.content-container .test-verdict {
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
}
.content-container .test-verdict.pass {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #4CAF50;
}
.content-container .confidence {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Charts */
.content-container .charts-section {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.content-container .charts-section h2 {
    font-size: 1.5em;
    color: var(--gold);
    margin-bottom: 20px;
}
.content-container .charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.content-container .chart-card {
    background: rgba(26, 22, 17, 0.6);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 12px;
    padding: 24px;
}
.content-container .chart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}
.content-container .bar-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.content-container .bar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.content-container .bar-label {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 80px;
    text-align: right;
}
.content-container .bar-value {
    height: 24px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    border-radius: 4px;
    min-width: 20px;
    position: relative;
}

/* Evaluator Section */
.content-container .evaluator-section {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.content-container .evaluator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 16px;
}
.content-container .evaluator-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--gold);
}
.content-container .expand-icon {
    color: var(--gold);
    font-size: 20px;
}
.content-container .evaluator-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}
.content-container .evaluator-prompt {
    background: rgba(26, 22, 17, 0.8);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 10px;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    margin: 16px 0;
}
.content-container .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(184, 134, 11, 0.2);
    border-radius: 50%;
    color: var(--gold);
    font-size: 12px;
    margin-left: 4px;
}

/* ============================================
   MODEL SIZE MATTERS - Specific Styles
   ============================================ */

.content-container .model-card {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.content-container .model-card.pass {
    border-color: rgba(76, 175, 80, 0.3);
}
.content-container .model-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.content-container .model-name {
    font-size: 1.3em;
    font-weight: 800;
    color: var(--text-primary);
}
.content-container .model-grade {
    font-size: 14px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 8px;
    background: rgba(184, 134, 11, 0.15);
    color: var(--gold);
}
.content-container .model-grade.grade-a-plus {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
}
.content-container .model-grade.grade-a {
    background: rgba(76, 175, 80, 0.1);
    color: #66BB6A;
}
.content-container .model-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}
.content-container .test-question {
    background: rgba(26, 22, 17, 0.8);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 10px;
    padding: 16px;
    margin: 12px 0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--text-secondary);
}
.content-container .feature-item {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}
.content-container .feature-item h4 {
    color: var(--gold);
    margin-bottom: 6px;
}
.content-container .feature-item p {
    color: var(--text-secondary);
    font-size: 14px;
}

.content-container .comparison-table {
    overflow-x: auto;
    margin: 20px 0;
}

/* ============================================
   HOW IT WORKS - Specific Styles
   ============================================ */

.content-container .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.content-container .feature-card {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 12px;
    padding: 24px;
}
.content-container .feature-card .icon,
.content-container .feature-card .icon-header {
    font-size: 28px;
    margin-bottom: 12px;
}
.content-container .feature-card h3 {
    color: var(--gold);
    font-size: 1.1em;
    margin-bottom: 8px;
}
.content-container .feature-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.content-container .subtitle {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 20px;
}
.content-container .divider {
    height: 1px;
    background: rgba(184, 134, 11, 0.15);
    margin: 30px 0;
}
.content-container .table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
}

/* Collapsible sections */
.content-container .collapsible {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}
.content-container .collapsible-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}
.content-container .collapsible-header:hover {
    background: rgba(184, 134, 11, 0.05);
}
.content-container .collapsible-header h3 {
    color: var(--text-primary);
    font-size: 1.1em;
    margin: 0;
}
.content-container .collapsible-indicator {
    color: var(--gold);
    font-size: 18px;
    transition: transform 0.3s;
}
.content-container .collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.content-container .collapsible-content-inner {
    padding: 0 24px 24px;
}
.content-container .collapsible-content-inner p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

/* ============================================
   TESTING OVERVIEW - Specific Styles
   ============================================ */

.content-container .main-content {
    margin-bottom: 24px;
}
.content-container .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.content-container .stat-card {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}
.content-container .stat-number {
    font-size: 2em;
    font-weight: 900;
    color: var(--gold);
    margin-bottom: 4px;
}
.content-container .stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.content-container .card-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.content-container .testing-highlights {
    margin: 30px 0;
}
.content-container .testing-highlights h2 {
    font-size: 1.5em;
    color: var(--gold);
    margin-bottom: 20px;
}
.content-container .testing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.content-container .testing-card {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s;
}
.content-container .testing-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}
.content-container .testing-card h3 {
    color: var(--text-primary);
    font-size: 1.1em;
    margin-bottom: 8px;
}
.content-container .testing-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}
.content-container .view-button {
    display: inline-block;
    color: var(--gold);
    font-weight: 600;
    font-size: 13px;
    transition: gap 0.3s;
}

.content-container .philosophy {
    margin: 30px 0;
}
.content-container .philosophy h2 {
    font-size: 1.5em;
    color: var(--gold);
    margin-bottom: 20px;
}
.content-container .philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.content-container .philosophy-item {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}
.content-container .philosophy-item h3 {
    color: var(--gold);
    font-size: 1em;
    margin-bottom: 8px;
}
.content-container .philosophy-item p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================
   ABOUT US - Specific Styles
   ============================================ */

.content-container .opening-quote {
    text-align: center;
    padding: 32px;
    margin-bottom: 24px;
    font-size: 18px;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.8;
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
}
.content-container .philosophy-section {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.9), rgba(45, 30, 15, 0.9));
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.content-container .philosophy-section h2 {
    color: var(--gold);
    font-size: 1.5em;
    margin-bottom: 16px;
}
.content-container .philosophy-section p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 12px;
}
.content-container .tagline-emphasis {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    margin: 24px 0;
}
.content-container .tagline-final {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin: 16px 0;
}

.content-container .serve-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.content-container .serve-card {
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.15);
    border-radius: 12px;
    padding: 24px;
}
.content-container .serve-card h3 {
    color: var(--gold);
    font-size: 1.1em;
    margin-bottom: 8px;
}
.content-container .serve-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================
   Responsive Overrides for Content Pages
   ============================================ */

@media (max-width: 768px) {
    .content-container .hero h1 { font-size: 1.8em; }
    .content-container .section,
    .content-container .intro-section,
    .content-container .content-section,
    .content-container .category-section,
    .content-container .methodology,
    .content-container .transparency,
    .content-container .evaluator-section,
    .content-container .charts-section,
    .content-container .test-log,
    .content-container .model-card { padding: 24px; }
    .content-container .toc-grid,
    .content-container .feature-list,
    .content-container .feature-grid,
    .content-container .criteria-grid,
    .content-container .tip-grid,
    .content-container .expectations-grid,
    .content-container .comparison-grid,
    .content-container .serve-grid,
    .content-container .testing-grid { grid-template-columns: 1fr; }
    .content-container .charts-grid { grid-template-columns: 1fr; }
    .content-container .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .content-container .philosophy-grid { grid-template-columns: 1fr; }
    .content-container .test-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .content-container .stats-grid { grid-template-columns: 1fr; }
}