/* ============================================
   BROBILLIONAIRE - COMPREHENSIVE RESPONSIVE FIX
   Full responsiveness for Home + Article pages
   ============================================ */

/* ===== GLOBAL RESPONSIVE BASE ===== */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    * {
        box-sizing: border-box !important;
    }

    main {
        overflow-x: hidden !important;
    }

    img,
    svg,
    video,
    iframe,
    embed,
    object {
        max-width: 100% !important;
    }

    pre,
    code {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
    }

    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
}

/* ============================================
   HOME PAGE RESPONSIVE FIXES
   ============================================ */

/* --- Navbar Mobile Perfection --- */
@media (max-width: 768px) {
    .navbar {
        padding: 8px 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    .nav-container {
        padding: 0 12px !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .logo {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .logo-img {
        width: 32px !important;
        height: 32px !important;
    }

    .logo-text {
        font-size: 1rem !important;
    }

    .nav-links {
        display: none !important;
    }

    .navbar .cta-btn.gold-btn {
        padding: 8px 14px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 380px) {
    .navbar .cta-btn.gold-btn {
        display: none !important;
    }

    .logo-text {
        font-size: 0.9rem !important;
    }
}

/* --- Market Ticker Mobile --- */
@media (max-width: 768px) {
    .market-ticker {
        height: 30px !important;
        font-size: 0.65rem !important;
    }

    .ticker-live-badge {
        font-size: 0.55rem !important;
        padding: 2px 8px !important;
    }
}

/* --- Hero Section Mobile --- */
@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 24px !important;
        padding: 30px 16px 40px !important;
        min-height: auto !important;
    }

    .hero-content {
        order: 1 !important;
        max-width: 100% !important;
    }

    .hero-visual {
        order: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .hero-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
    }

    .hero-badge {
        padding: 6px 14px !important;
    }

    .hero-badge span:last-child {
        font-size: 0.65rem !important;
    }

    /* Hero features - scrollable row */
    .hero-features {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 10px !important;
        padding-bottom: 6px !important;
        scrollbar-width: none !important;
    }

    .hero-features::-webkit-scrollbar {
        display: none !important;
    }

    .hero-feature {
        min-width: 155px !important;
        flex: 0 0 auto !important;
        scroll-snap-align: start !important;
        padding: 12px 14px !important;
    }

    .feature-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .feature-text strong {
        font-size: 0.82rem !important;
    }

    .feature-text span {
        font-size: 0.72rem !important;
    }

    /* Hero buttons */
    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .hero-buttons .cta-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .hero-buttons .cta-btn.large {
        padding: 14px 24px !important;
        font-size: 0.9rem !important;
    }

    /* Orbit visual */
    .orbit-container {
        width: 200px !important;
        height: 200px !important;
        margin: 0 auto !important;
    }

    .orbit-1 {
        width: 100px !important;
        height: 100px !important;
    }

    .orbit-2 {
        width: 150px !important;
        height: 150px !important;
    }

    .orbit-3 {
        width: 200px !important;
        height: 200px !important;
    }

    .center-icon {
        width: 44px !important;
        height: 44px !important;
    }

    .ticker-badge {
        padding: 5px 10px !important;
        min-width: auto !important;
        font-size: 0.55rem !important;
    }

    .ticker-2,
    .ticker-4,
    .ticker-5 {
        display: none !important;
    }

    .ticker-name {
        font-size: 0.45rem !important;
    }

    .ticker-value {
        font-size: 0.58rem !important;
    }

    .ticker-icon {
        font-size: 0.85rem !important;
    }

    .scroll-indicator {
        display: none !important;
    }
}

@media (max-width: 400px) {
    .hero {
        padding: 24px 12px 30px !important;
    }

    .hero-title {
        font-size: 1.75rem !important;
    }

    .orbit-container {
        width: 170px !important;
        height: 170px !important;
    }

    .orbit-1 {
        width: 85px !important;
        height: 85px !important;
    }

    .orbit-2 {
        width: 125px !important;
        height: 125px !important;
    }

    .orbit-3 {
        width: 170px !important;
        height: 170px !important;
    }

    .ticker-3 {
        display: none !important;
    }
}

/* --- Section headers & containers --- */
@media (max-width: 768px) {
    .section-container {
        padding: 0 16px !important;
        overflow-x: hidden !important;
    }

    .section-header {
        margin-bottom: 24px !important;
    }

    .section-title {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    .section-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .section-tag {
        font-size: 0.65rem !important;
        letter-spacing: 2px !important;
    }
}

@media (max-width: 400px) {
    .section-title {
        font-size: 1.4rem !important;
    }

    .section-container {
        padding: 0 12px !important;
    }
}

/* --- Why Section --- */
@media (max-width: 768px) {
    .why-section {
        padding: 40px 0 !important;
    }

    .why-pillars {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .why-main-message {
        padding: 24px 16px !important;
    }

    .why-headline {
        font-size: 1.3rem !important;
    }

    .why-description {
        font-size: 0.95rem !important;
    }
}

/* --- Featured Articles Grid --- */
@media (max-width: 768px) {
    .daily-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .daily-article-card {
        padding: 20px !important;
    }

    .article-title {
        font-size: 1.15rem !important;
    }

    .article-excerpt {
        font-size: 0.85rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .article-cta,
    .view-all-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* --- Philosophy Section --- */
@media (max-width: 768px) {
    .philosophy-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .philosophy-card {
        padding: 24px 20px !important;
    }
}

/* --- Elliott Wave Section --- */
@media (max-width: 768px) {
    .elliott-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .elliott-visual {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .elliott-svg {
        min-width: 380px !important;
    }

    .fib-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* --- Patterns Grid --- */
@media (max-width: 768px) {
    .patterns-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 400px) {
    .patterns-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- Mastery Journey --- */
@media (max-width: 768px) {
    .journey-stages {
        gap: 30px !important;
    }

    .journey-stage {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }

    .journey-stage:nth-child(2) {
        flex-direction: column !important;
    }

    .stage-marker {
        margin: 0 auto !important;
    }

    .stage-content {
        text-align: center !important;
    }

    .stage-stats {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .timeline-line {
        display: none !important;
    }

    .journey-cta {
        padding: 24px 16px !important;
    }
}

/* --- Quotes Marquee --- */
@media (max-width: 768px) {
    .quotes-section {
        padding: 40px 0 !important;
    }

    .quotes-header {
        padding: 0 16px !important;
    }

    .quotes-marquee-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        padding: 0 16px !important;
    }

    .quotes-marquee-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    .quotes-marquee,
    .quotes-row-1 {
        animation: none !important;
    }

    .quotes-track:nth-child(2) {
        display: none !important;
    }

    .quotes-track {
        gap: 16px !important;
    }

    .quote-card {
        width: 270px !important;
        min-width: 270px !important;
        padding: 20px !important;
        scroll-snap-align: start !important;
    }

    .quotes-fade-left,
    .quotes-fade-right {
        display: none !important;
    }
}

@media (max-width: 400px) {
    .quote-card {
        width: 230px !important;
        min-width: 230px !important;
    }
}

/* --- Money Killers Section --- */
@media (max-width: 768px) {
    .money-killers-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .stats-headlines-container {
        gap: 12px !important;
    }

    .killer-headline {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 20px 16px !important;
    }

    .stat-number-huge {
        font-size: 3.5rem !important;
    }

    .killer-card {
        padding: 24px 18px !important;
    }

    .graveyard-tombstones {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .tombstone {
        width: 100% !important;
        max-width: 300px !important;
    }

    .crash-indices {
        grid-template-columns: 1fr !important;
    }

    .crash-story-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .massacre-final-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .broker-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .survival-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .death-bar-row {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .death-bar-info {
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .death-bar-track {
        width: 100% !important;
    }

    .killer-warning-box {
        flex-direction: column !important;
        text-align: center !important;
        padding: 24px 16px !important;
    }

    /* Daily refresh note */
    .daily-refresh-note {
        font-size: 0.8rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 400px) {
    .stat-number-huge {
        font-size: 2.8rem !important;
    }

    .massacre-final-stats,
    .crash-story-grid,
    .survival-grid,
    .broker-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- Global Overflow Prevention --- */
@media (max-width: 768px) {

    .soros-bg-pound,
    .soros-bg-dollar {
        display: none !important;
    }
}


/* ============================================
   HOME PAGE — SIMONS AOTD OVERFLOW SAFETY
   ============================================ */
@media (max-width: 768px) {
    .simons-aotd {
        overflow: hidden !important;
    }

    .simons-orb,
    .simons-orb-1,
    .simons-orb-2,
    .simons-orb-3 {
        display: none !important;
    }

    .simons-data-stream {
        display: none !important;
    }

    .simons-eq {
        display: none !important;
    }

    .simons-mega-card {
        border-radius: 16px !important;
    }

    .simons-mega-glow {
        display: none !important;
    }

    .simons-terminal-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .simons-term-line {
        white-space: nowrap !important;
        font-size: 0.78rem !important;
    }

    .simons-returns-overlay {
        left: 10px !important;
        right: 10px !important;
        padding: 10px 12px !important;
    }

    .simons-returns-amount {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .simons-crash-secret {
        min-height: 100px !important;
    }

    .simons-secret-card {
        padding: 10px 8px !important;
    }

    .simons-secret-card strong {
        font-size: 0.72rem !important;
    }

    .simons-secret-card span {
        font-size: 0.58rem !important;
    }

    .simons-cta-btn {
        font-size: 0.75rem !important;
        padding: 12px 20px !important;
        gap: 8px !important;
    }
}


/* ============================================
   ARTICLE - JIM SIMONS PAGE RESPONSIVE FIXES
   ============================================ */

/* --- Crash Hunter Hero --- */
@media (max-width: 768px) {
    .crash-hunter-hero {
        padding: 90px 16px 40px !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .quant-title-container {
        padding: 0 8px !important;
        max-width: 100% !important;
    }

    .quant-main-title {
        font-size: 2.2rem !important;
        line-height: 1.15 !important;
    }

    .quant-main-title .title-line {
        display: block !important;
    }

    .quant-main-title .crash-hunter {
        font-size: 1.6rem !important;
    }

    .glitch-badge {
        font-size: 0.7rem !important;
        padding: 6px 14px !important;
    }

    .hero-tagline {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        padding: 0 8px !important;
        max-width: 100% !important;
    }

    .code-accent {
        font-size: inherit !important;
    }

    .floating-terminal {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .terminal-stat {
        padding: 12px 10px !important;
        min-width: 0 !important;
    }

    .stat-terminal-value {
        font-size: 1.3rem !important;
    }

    .stat-terminal-label {
        font-size: 0.6rem !important;
    }

    .scroll-indicator {
        display: none !important;
    }

    /* Data streams - reduce visual noise */
    .data-stream {
        opacity: 0.3 !important;
    }

    .algo-grid {
        opacity: 0.2 !important;
    }

    /* Matrix rain - lighter on mobile */
    .matrix-rain {
        opacity: 0.15 !important;
    }
}

@media (max-width: 480px) {
    .crash-hunter-hero {
        padding: 80px 12px 30px !important;
    }

    .quant-main-title {
        font-size: 1.8rem !important;
    }

    .quant-main-title .crash-hunter {
        font-size: 1.3rem !important;
    }

    .hero-tagline {
        font-size: 0.88rem !important;
    }

    .floating-terminal {
        gap: 8px !important;
    }

    .terminal-stat {
        padding: 10px 8px !important;
    }

    .stat-terminal-value {
        font-size: 1.1rem !important;
    }

    .stat-terminal-label {
        font-size: 0.55rem !important;
    }
}

/* --- Trust Signals --- */
@media (max-width: 768px) {
    .trust-signals {
        padding: 10px 16px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .trust-item {
        font-size: 0.78rem !important;
    }
}

/* --- Article Navigation Bar --- */
@media (max-width: 768px) {
    .article-nav {
        padding: 8px 0 !important;
    }

    .article-nav-container {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    .back-link {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .back-link span {
        display: none !important;
    }

    .nav-logo-small {
        width: 28px !important;
        height: 28px !important;
    }

    .share-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
    }
}

/* --- Decoder Section (Chapters) --- */
@media (max-width: 768px) {
    .decoder-section {
        padding: 40px 0 !important;
    }

    .decoder-container {
        padding: 0 16px !important;
        max-width: 100% !important;
    }

    .section-badge {
        font-size: 0.65rem !important;
        padding: 6px 14px !important;
        letter-spacing: 1.5px !important;
    }

    .section-title-large {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 480px) {
    .decoder-container {
        padding: 0 12px !important;
    }

    .section-title-large {
        font-size: 1.4rem !important;
    }
}

/* --- Algo Timeline --- */
@media (max-width: 768px) {
    .algo-timeline {
        margin: 24px 0 !important;
    }

    .timeline-node {
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 30px !important;
    }

    .node-marker {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.1rem !important;
        flex-shrink: 0 !important;
        margin: 0 auto !important;
    }

    .node-marker::after {
        display: none !important;
    }

    .node-content {
        text-align: center !important;
    }

    .node-year {
        font-size: 0.75rem !important;
    }

    .node-title {
        font-size: 1.1rem !important;
    }

    .node-description {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }

    .node-highlight {
        font-size: 0.78rem !important;
    }
}

/* --- Code Quote --- */
@media (max-width: 768px) {
    .code-quote {
        padding: 20px 16px !important;
        margin: 24px 0 !important;
    }

    .code-quote-text {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    .code-quote-author {
        font-size: 0.8rem !important;
    }
}

/* --- Algorithm Secrets --- */
@media (max-width: 768px) {
    .algorithm-secrets {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .secret-algo-card {
        padding: 20px 16px !important;
    }

    .algo-icon-wrap {
        width: 48px !important;
        height: 48px !important;
    }

    .algo-icon-wrap i {
        font-size: 1.3rem !important;
    }

    .algo-card-title {
        font-size: 1.05rem !important;
    }

    .algo-card-desc {
        font-size: 0.88rem !important;
    }

    .algo-code-tag {
        font-size: 0.72rem !important;
    }
}

/* --- Crash Performance Section --- */
@media (max-width: 768px) {
    .crash-performance {
        padding: 40px 0 !important;
    }

    .crash-container {
        padding: 0 16px !important;
    }

    .crash-header {
        padding: 0 !important;
    }

    .crash-events {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .crash-event-card {
        padding: 20px 16px !important;
    }

    .crash-year {
        font-size: 2rem !important;
    }

    .crash-name {
        font-size: 1rem !important;
    }

    .crash-compare {
        flex-direction: row !important;
        gap: 12px !important;
    }

    .crash-stat {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
    }

    .crash-stat-label {
        font-size: 0.68rem !important;
    }

    .crash-stat-value {
        font-size: 1.4rem !important;
    }
}

/* --- Playbook Section --- */
@media (max-width: 768px) {
    .playbook-grid {
        gap: 0 !important;
    }

    .playbook-rule {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 20px 16px !important;
    }

    .playbook-number {
        font-size: 1.4rem !important;
        min-width: auto !important;
    }

    .playbook-content h4 {
        font-size: 1.05rem !important;
    }

    .playbook-content p {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }

    .playbook-content code {
        font-size: 0.78rem !important;
        word-break: break-word !important;
    }

    .playbook-action {
        font-size: 0.82rem !important;
        padding: 10px 12px !important;
    }
}

/* --- Console Section --- */
@media (max-width: 768px) {
    .console-section {
        padding: 40px 0 !important;
    }

    .console-wrapper {
        padding: 0 16px !important;
    }

    .console-box {
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .console-header {
        padding: 10px 14px !important;
    }

    .console-title {
        font-size: 0.72rem !important;
    }

    .console-body {
        padding: 16px 12px !important;
        font-size: 0.78rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .console-line {
        white-space: nowrap !important;
        font-size: 0.75rem !important;
    }

    .console-output {
        font-size: 0.82rem !important;
        word-break: break-all !important;
        white-space: normal !important;
    }

    /* Performance visualizer */
    .performance-visualizer {
        padding: 0 !important;
    }

    .performance-visualizer h3 {
        font-size: 1.1rem !important;
        margin: 30px 0 24px !important;
    }

    .perf-bar-container {
        margin-bottom: 16px !important;
    }

    .perf-bar-label {
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
    }

    .perf-bar-name {
        font-size: 0.85rem !important;
    }

    .perf-bar-value {
        font-size: 0.9rem !important;
    }

    .perf-bar-track {
        height: 10px !important;
        border-radius: 5px !important;
    }
}

/* --- Legacy Section --- */
@media (max-width: 768px) {
    .legacy-section {
        padding: 40px 0 !important;
    }

    .legacy-container {
        padding: 0 16px !important;
    }

    .legacy-quote {
        font-size: 1rem !important;
        line-height: 1.7 !important;
        padding: 0 !important;
    }

    .legacy-stats {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .legacy-stat {
        padding: 20px 16px !important;
    }

    .legacy-stat-value {
        font-size: 1.8rem !important;
    }

    .legacy-stat-label {
        font-size: 0.82rem !important;
    }

    .legacy-stat-icon {
        font-size: 1.5rem !important;
    }
}

/* --- Final Algorithm Section --- */
@media (max-width: 768px) {
    .final-algorithm {
        padding: 40px 0 !important;
    }

    .final-container {
        padding: 0 16px !important;
    }

    .final-badge {
        font-size: 0.65rem !important;
        padding: 6px 16px !important;
    }

    .final-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }

    .final-rules {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .final-rule {
        padding: 20px 16px !important;
        gap: 14px !important;
    }

    .rule-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
        flex-shrink: 0 !important;
    }

    .rule-content h4 {
        font-size: 1rem !important;
    }

    .rule-content p {
        font-size: 0.85rem !important;
    }

    /* Memorial badge */
    .memorial-badge {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 20px 16px !important;
    }

    .memorial-text {
        font-size: 0.82rem !important;
    }

    .memorial-badge i {
        font-size: 1.5rem !important;
    }
}

/* --- Calculator Section --- */
@media (max-width: 768px) {
    .calc-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .calc-inputs {
        gap: 14px !important;
    }

    .calc-field label {
        font-size: 0.85rem !important;
    }

    .calc-field input {
        padding: 10px 14px !important;
        font-size: 0.95rem !important;
    }

    .calc-btn {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
    }

    .calc-results {
        padding: 18px 14px !important;
    }

    .calc-result-header {
        font-size: 0.8rem !important;
    }

    .calc-result-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .calc-label {
        font-size: 0.78rem !important;
    }

    .calc-value {
        font-size: 0.88rem !important;
    }

    .calc-value.gold {
        font-size: 1rem !important;
    }

    .calc-warning {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .calc-field input {
        font-size: 0.88rem !important;
        padding: 10px 12px !important;
    }
}

/* --- Checklist Section --- */
@media (max-width: 768px) {
    .checklist-box {
        max-width: 100% !important;
    }

    .checklist-item {
        padding: 14px 12px !important;
        gap: 12px !important;
    }

    .check-circle {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }

    .check-text strong {
        font-size: 0.88rem !important;
    }

    .check-text span {
        font-size: 0.78rem !important;
    }

    .checklist-score {
        padding: 16px !important;
    }

    .checklist-score #checklistScore {
        font-size: 2rem !important;
    }

    .checklist-verdict {
        font-size: 0.82rem !important;
    }
}

/* --- Daily Routine Timeline --- */
@media (max-width: 768px) {
    .routine-timeline::before {
        left: 15px !important;
    }

    .routine-block {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 24px 0 24px 40px !important;
    }

    .routine-block::before {
        left: 8px !important;
        top: 30px !important;
        width: 14px !important;
        height: 14px !important;
    }

    .routine-time {
        text-align: left !important;
        min-width: auto !important;
        font-size: 0.8rem !important;
    }

    .routine-phase {
        padding-left: 0 !important;
        font-size: 1rem !important;
    }

    .routine-tasks {
        padding-left: 0 !important;
    }

    .routine-tasks li {
        font-size: 0.88rem !important;
        padding: 5px 0 !important;
    }

    .routine-tasks li i {
        width: 18px !important;
        font-size: 0.78rem !important;
    }
}

/* --- Toolkit Grid --- */
@media (max-width: 768px) {
    .toolkit-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .toolkit-card {
        padding: 20px 16px !important;
    }

    .toolkit-category {
        font-size: 0.65rem !important;
    }

    .toolkit-card h4 {
        font-size: 1rem !important;
    }

    .toolkit-list li {
        font-size: 0.82rem !important;
        padding: 6px 0 !important;
    }
}

/* --- Journal Template Console --- */
@media (max-width: 768px) {
    .journal-template-section .console-body {
        font-size: 0.72rem !important;
        overflow-x: auto !important;
    }

    .journal-template-section .console-line {
        font-size: 0.72rem !important;
    }
}

/* --- FAQ Section (Article) --- */
@media (max-width: 768px) {
    .faq-section {
        padding: 40px 16px !important;
    }

    .faq-container {
        padding: 0 !important;
    }

    .faq-title {
        font-size: 1.3rem !important;
    }

    .faq-question {
        padding: 16px 14px !important;
        font-size: 0.9rem !important;
        gap: 12px !important;
    }

    .faq-question span {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    .faq-icon {
        font-size: 0.7rem !important;
        flex-shrink: 0 !important;
    }

    .faq-answer {
        padding: 0 14px 16px !important;
    }

    .faq-answer p {
        font-size: 0.88rem !important;
        line-height: 1.7 !important;
    }
}

/* --- Related Articles --- */
@media (max-width: 768px) {
    .related-articles-section {
        padding: 40px 0 !important;
    }

    .related-container {
        padding: 0 16px !important;
    }

    .related-title {
        font-size: 1.3rem !important;
    }

    .related-articles-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .related-article-card {
        padding: 20px 16px !important;
    }

    .related-article-card h3 {
        font-size: 1.05rem !important;
    }

    .related-article-card p {
        font-size: 0.85rem !important;
    }
}

/* --- Article CTA Section --- */
@media (max-width: 768px) {
    .article-cta-section {
        padding: 40px 0 !important;
    }

    .cta-container {
        padding: 30px 20px !important;
    }

    .cta-container h2 {
        font-size: 1.4rem !important;
    }

    .cta-container p {
        font-size: 0.9rem !important;
    }

    .cta-container .cta-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* --- Article Header / Title Area (generic article pages) --- */
@media (max-width: 768px) {
    .article-header {
        padding: 90px 16px 40px !important;
    }

    .article-title,
    .article-main-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    .article-subtitle {
        font-size: 1rem !important;
    }

    .article-content {
        padding: 30px 16px 50px !important;
        font-size: 1rem !important;
    }

    .article-content h2 {
        font-size: 1.4rem !important;
    }

    .article-content h3 {
        font-size: 1.15rem !important;
    }

    .article-meta {
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }

    .meta-item {
        font-size: 0.82rem !important;
    }

    .article-toc {
        padding: 16px !important;
    }

    .key-takeaways-box {
        padding: 20px 16px !important;
    }
}

@media (max-width: 480px) {

    .article-title,
    .article-main-title {
        font-size: 1.5rem !important;
    }

    .article-meta {
        flex-direction: column !important;
        gap: 6px !important;
    }
}

/* --- Scar Story (from styles.css for surviving crash articles) --- */
@media (max-width: 768px) {
    .scar-story {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 20px 16px !important;
    }

    .scar-icon {
        font-size: 2rem !important;
    }

    .scar-content h4 {
        font-size: 1.1rem !important;
    }

    .scar-content p {
        font-size: 0.9rem !important;
    }
}

/* --- Reading Progress Bar --- */
@media (max-width: 768px) {

    .reading-progress,
    .reading-progress-bar {
        height: 3px !important;
    }
}

/* ============================================
   EXTRA SMALL DEVICES (320px - 380px)
   ============================================ */
@media (max-width: 360px) {
    .quant-main-title {
        font-size: 1.6rem !important;
    }

    .quant-main-title .crash-hunter {
        font-size: 1.15rem !important;
    }

    .floating-terminal {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .terminal-stat {
        padding: 8px 6px !important;
    }

    .stat-terminal-value {
        font-size: 1rem !important;
    }

    .section-title-large {
        font-size: 1.25rem !important;
    }

    .hero-title {
        font-size: 1.5rem !important;
    }

    .section-title {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   LANDSCAPE MOBILE FIX
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .crash-hunter-hero {
        min-height: auto !important;
        padding: 70px 20px 30px !important;
    }

    .hero {
        min-height: auto !important;
    }

    .quant-main-title {
        font-size: 1.8rem !important;
    }

    .floating-terminal {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    .crash-hunter-hero,
    .hero {
        min-height: auto !important;
        padding: 40px 20px !important;
    }

    .floating-terminal,
    .orbit-container,
    .matrix-rain,
    .algo-grid,
    .data-streams,
    .scroll-indicator {
        display: none !important;
    }
}