/* ==========================================================================
   KNOWN SYSTEMS - UNIVERSAL MOBILE RESPONSIVE ENGINE (< 1024px & < 480px)
   Loaded as the final stylesheet to guarantee 100% mobile adaptability across ALL pages.
   ========================================================================== */

@media screen and (max-width: 1024px) {
    /* 1. VIEWPORT CONTAINMENT & PADDING RESET */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    main, section, header, footer,
    .ks-environment, .knox-environment, .knox-section,
    .sp-hero, .shared-shell, .legal-container, .sovereign-hero, .sovereign-content,
    .knox-cc, .about-narrative-container, .research-entropy-section, .room-statement,
    [style*="padding: 80px"], [style*="padding: 60px"], [style*="padding: 120px"], [style*="padding: 48px"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 2. FULL-BLEED IMAGES & HERO MEDIA CONTAINMENT */
    .sovereign-image,
    .hero-section,
    .full-width-image,
    .hero-composite,
    .kcc-hero-display,
    .hero-graphic,
    .visual-canvas,
    .entropy-hero-visual {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        overflow: hidden !important;
    }

    .sovereign-image img,
    .hero-composite-img,
    .kcc-display-img,
    img, video, canvas, svg {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* 3. INLINE FONT SIZE & HEAVY TYPOGRAPHY DOWN-SCALING */
    h1, h2, h3, .sh-title, .sp-title, .legal-title,
    [style*="font-size: 5rem"],
    [style*="font-size: 4.5rem"],
    [style*="font-size: 4.2rem"],
    [style*="font-size: 4rem"],
    [style*="font-size: 3.5rem"],
    [style*="font-size: 3rem"],
    [style*="font-size: 2.5rem"],
    [style*="font-size: 2.2rem"] {
        font-size: clamp(20px, 6vw, 32px) !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    h4, h5, h6, p, span, div, a, li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 4. UNIVERSAL GRID, HORIZONTAL CARD CONTAINERS & PIPELINES (FORCE VERTICAL 1-COLUMN STACKING) */
    div[style*="grid-template-columns"],
    section[style*="grid-template-columns"],
    [style*="display: grid"],
    .decision-gap-diagram,
    .horizontal-flow-pipeline,
    .entropy-scale,
    .diagram-chain,
    .side-by-side-arch,
    .rwa-containment-flow,
    .industry-registry-grid,
    .ks-execution-flow-grid,
    .ks-deployment-cards-grid,
    .ks-deployment-domains-grid,
    .ks-verification-model-grid,
    .ks-philosophy-grid,
    .qualification-grid,
    .domain-selector-grid,
    .knox-app-grid,
    .dual-ai-architecture-grid,
    .knox-product-systems-grid,
    .gateway-panel-grid,
    .systems-available-grid,
    .knox-deployment-grid,
    .five-components,
    .five-fields,
    .four-fields,
    .three-cards,
    .trajectory-grid,
    .event-progression,
    .model-comparison,
    .audit-comparison,
    .audit-split,
    .dual-comparison,
    .resolution-matrix-grid,
    .control-cards,
    .five-layers-grid,
    .system-architecture-layers,
    .kcc-layout,
    .kcc-hero-grid,
    .kcc-specs-grid,
    .live-proof-grid,
    .editorial-claim,
    .products-hero-container,
    .founder-hero-grid,
    .two-col-composition,
    .about-narrative-container,
    .systems-available-section,
    .founder-room-section,
    .sp-grid-4,
    .sp-grid-3,
    .sp-grid-2,
    .sp-five-steps,
    .sp-two-col,
    .sp-three-col,
    .sp-four-col,
    .knox-grid-4,
    .knox-grid-3,
    .knox-grid-2,
    .uikit-grid,
    .sectors-grid,
    .performance-metrics-grid,
    .telemetry-grid,
    .implementation-phases-grid,
    .protocol-list,
    .research-hero-grid,
    .entropy-matrix,
    .trust-hero-grid,
    .pillar-grid,
    .knox-os-grid,
    .knox-workflow,
    .knox-control-grid,
    .knox-performance-strip,
    .hero-grid,
    .feature-grid,
    .specs-grid,
    .benefits-grid,
    .architecture-grid,
    .integrations-grid,
    .use-cases-grid,
    .pricing-cards-grid,
    .sectors-hero {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* 5. FORCE ALL CARD ELEMENTS TO BE FULL-WIDTH & VISIBLE */
    .res-card,
    .gateway-card,
    .pillar-card,
    .sector-card,
    .verif-card,
    .ks-app-card,
    .ks-domain-card,
    .ks-philosophy-card,
    .ks-execution-step-card,
    .dg-step,
    .hfp-step,
    .ep-col,
    .traj-col,
    .mc-col,
    .kd-tier,
    .knox-app-card,
    .domain-btn,
    .uikit-component {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 6. DIAGRAM & NODE LINE MOBILE FIXES */
    .node-line,
    .flow-connector,
    .model-comparison > div[style*="width: 1px"],
    .model-comparison > div[style*="background"],
    .audit-split > div[style*="width: 1px"],
    .audit-comparison > div[style*="width: 1px"],
    .dual-comparison > div[style*="width: 1px"],
    .event-progression .ep-arrow,
    .trajectory-grid .traj-arrow,
    .dual-ai-architecture-grid > div:nth-child(even),
    .flow-arrow-horizontal {
        display: none !important;
    }

    .model-blocks {
        width: 100% !important;
        margin: 12px 0 !important;
    }

    .decision-states {
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* 7. INDUSTRY REGISTRY (43 SECTORS) MOBILE STACKING */
    .industry-registry-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .industry-registry-grid > div {
        width: 100% !important;
    }

    .industry-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        width: 100% !important;
        gap: 8px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid #D1D5D8 !important;
        border-radius: 4px !important;
        margin-bottom: 6px !important;
    }

    .ind-num {
        font-weight: 700 !important;
        color: var(--ks-cyan, #68A1A1) !important;
        margin-right: 8px !important;
    }

    .ind-name {
        flex: 1 !important;
        word-break: break-word !important;
    }

    /* 8. TABLES & AUDIT FLOW CONTAINMENT */
    table,
    .matrix-table,
    .system-resolution-table,
    .shared-event-stream {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    /* 9. CLEAN MOBILE NAVIGATION HEADER */
    .ks-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 12px 16px !important;
        gap: 10px !important;
        text-align: center !important;
        width: 100% !important;
    }

    .nav-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px 10px !important;
        width: 100% !important;
    }

    .nav-links a, .nav-link {
        font-size: 11px !important;
        padding: 6px 10px !important;
        background: rgba(255, 255, 255, 0.6) !important;
        border-radius: 4px !important;
    }

    /* 10. FOOTER MOBILE STACKING */
    .ks-footer, footer {
        padding: 40px 16px !important;
        width: 100% !important;
    }

    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .footer-col {
        width: 100% !important;
    }

    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 11. BUTTON STACKING */
    .sh-actions,
    .hero-btns,
    .button-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .sh-actions a,
    .sh-actions button,
    .btn-primary,
    .btn-solid,
    .btn-ghost,
    .btn-secondary {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    .ks-environment, .knox-environment, main, .shared-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    h1, [style*="font-size: 5rem"], [style*="font-size: 4rem"] {
        font-size: clamp(18px, 7vw, 26px) !important;
    }

    h2, [style*="font-size: 3rem"] {
        font-size: clamp(16px, 6vw, 22px) !important;
    }
}