@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,900,800&display=swap');
@import url('shared-product.css');
@import url('product.css');
@import url('knox.css');
@import url('research.css');
@import url('founder.css');

/* --- RESET & GLOBAL BASE --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.ks-environment, body {
    background-color: #E1E4E6;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0E1315;
    -webkit-font-smoothing: antialiased;
}

/* Remove default blue link styling */
a {
    text-decoration: none;
    color: inherit;
}

/* --- NAVIGATION BAR FIX --- */
.ks-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 40px !important;
    background: rgba(225, 228, 230, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #D1D5D8;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo {
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.05em;
}

.nav-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    align-items: center !important;
}

.nav-link {
    font-family: 'Geist Mono', monospace, sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #5B656B;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.nav-link:hover, .nav-link.active {
    color: #0E1315;
}

.btn-primary {
    background: #102026;
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: 'Geist Mono', monospace, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: inline-block;
}

:root {
    /* =========================================
       KNOWN SYSTEMS — CORE PALETTE
       ========================================= */

    --ks-black: #000000;

    --ks-white: #E1E4E6;
    --ks-gray: #B6BCC2;
    --ks-aqua: #A8D0CF;

    --ks-steel: #A6AEB2;
    --ks-cyan: #68A1A1;

    --ks-teal: #2B5B5D;
    --ks-slate: #51686A;

    /* =========================================
       SURFACES
       ========================================= */

    --ks-glass:
        rgba(255, 255, 255, 0.78);

    --ks-glass-light:
        rgba(255, 255, 255, 0.88);

    --ks-glass-aqua:
        rgba(168, 208, 207, 0.30);

    /* =========================================
       BORDERS
       ========================================= */

    --ks-border:
        rgba(168, 208, 207, 0.62);

    --ks-border-active:
        rgba(104, 161, 161, 0.75);

    /* =========================================
       SHADOWS
       ========================================= */

    --ks-shadow:
        0 20px 55px rgba(43, 91, 93, 0.08);

    --ks-shadow-hover:
        0 30px 75px rgba(43, 91, 93, 0.15);

    /* =========================================
       RADII
       ========================================= */

    --ks-radius-sm: 12px;
    --ks-radius-md: 20px;
    --ks-radius-lg: 28px;
    --ks-radius-xl: 36px;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Satoshi', sans-serif;
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(168, 208, 207, 0.38) 0%,
            transparent 38%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(255, 255, 255, 0.72) 0%,
            transparent 42%
        ),
        linear-gradient(
            90deg,
            #E1E4E6 0%,
            #B6BCC2 50%,
            #A8D0CF 100%
        );

    color: var(--ks-teal);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background-image:
        linear-gradient(
            rgba(104,161,161,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(104,161,161,0.035) 1px,
            transparent 1px
        );

    background-size: 80px 80px;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */

h1 {
    font-family: 'Satoshi', 'Plus Jakarta Sans', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 5vw, 5.5rem);
    line-height: .94;
    letter-spacing: -.055em;
    color: var(--ks-black);
    margin: 0 0 24px 0;
}

h2 {
    font-family: 'Satoshi', 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 3.5vw, 4rem);
    line-height: .98;
    letter-spacing: -.045em;
    color: var(--ks-black);
    margin: 0 0 16px 0;
}

h3 {
    font-family: 'Satoshi', 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: var(--ks-black);
}

.title-accent {
    color: var(--ks-teal);
}

.title-cyan {
    color: var(--ks-cyan);
}

.title-aqua {
    color: var(--ks-slate);
}

.utility-geist {
    font-family: 'Geist Mono', 'Share Tech Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ks-cyan);
    display: inline-block;
    margin-bottom: 24px;
}

/* =========================================
   COMPONENTS
   ========================================= */

.ks-card {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.84),
            rgba(225,228,230,.66),
            rgba(168,208,207,.25)
        );

    backdrop-filter: blur(24px);

    border: 1px solid rgba(168,208,207,.62);
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(43,91,93,.08);
    color: var(--ks-teal);
    transition: transform .35s cubic-bezier(.16,1,.3,1),
                border-color .35s ease,
                box-shadow .35s ease;
}

.ks-card:hover {
    transform: translateY(-5px);
    border-color: var(--ks-cyan);
    box-shadow: 0 30px 75px rgba(43,91,93,.13),
                0 0 25px rgba(104,161,161,.18);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--ks-teal);
    color: var(--ks-white);
    border: 1px solid var(--ks-cyan);
    border-radius: 10px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: .25s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--ks-cyan);
    color: var(--ks-black);
    box-shadow: 0 0 25px rgba(104,161,161,.30);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: transparent;
    color: var(--ks-teal);
    border: 1px solid var(--ks-border);
    border-radius: 10px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: .25s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    border-color: var(--ks-cyan);
    color: var(--ks-cyan);
}

/* =========================================
   NAVIGATION
   ========================================= */

.ks-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 40px;
    background: rgba(225, 228, 230, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(209, 213, 216, 0.6) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Status Badge */
.nav-status, .ks-brand-subtitle {
    font-family: 'Geist Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--ks-slate) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nav-status::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #68A1A1; /* Cyan indicator dot */
    border-radius: 50%;
}

.ks-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.ks-brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--ks-black);
    color: var(--ks-white);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    font-family: 'Satoshi', sans-serif;
    font-weight: 800;
}

.ks-brand-name {
    color: var(--ks-black);
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.ks-brand-subtitle {
    margin-top: 2px;
    color: var(--ks-slate);
    font-family: 'Geist Mono', monospace;
    font-size: 7px;
    letter-spacing: 0.08em;
}

.ks-nav-links {
    display: flex;
    gap: 24px;
}

.ks-nav-links a {
    text-decoration: none;
    color: var(--ks-teal);
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.ks-nav-links a:hover {
    color: var(--ks-cyan);
}

.ks-nav-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.system-status {
    font-family: 'Satoshi', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--ks-teal);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
}

.system-status i {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--ks-cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--ks-cyan);
}

/* =========================================
   HERO SECTION
   ========================================= */

.hero-section {
    padding-top: 48px;
    position: relative;
}

.hero-grid {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
    min-height: 680px;
    align-items: center;
}

.hero-copy {
    grid-column: span 6;
    position: relative;
    z-index: 5;
}

.hero-copy p {
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ks-teal);
    max-width: 480px;
    margin-bottom: 48px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.hero-visual {
    grid-column: 6 / 13;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-object {
    width: 100%;
    max-width: 760px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 35px 55px rgba(43, 91, 93, 0.16));
}

.hero-orbit {
    position: absolute;
    width: 120%;
    height: 120%;
    border: 1px dashed rgba(104, 161, 161, 0.3);
    border-radius: 50%;
    z-index: -1;
}

.hero-scan {
    /* Placeholder for scan line animation */
}

/* =========================================
   STATUS PANEL
   ========================================= */

.system-status-card {
    position: absolute;
    right: 0;
    top: 18%;
    width: 190px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(168,208,207,.28));
    backdrop-filter: blur(24px);
    border: 1px solid rgba(168,208,207,.7);
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(43,91,93,.12);
}

.status-heading {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ks-slate);
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-heading span {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--ks-cyan);
    border-radius: 50%;
}

.status-metric {
    margin-bottom: 16px;
}

.status-metric small {
    display: block;
    font-family: 'Geist Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    color: var(--ks-slate);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.status-metric strong {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--ks-black);
    line-height: 1;
    margin-bottom: 4px;
}

.status-metric span {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: 10px;
    color: var(--ks-teal);
    font-weight: 500;
}

.live-status {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Satoshi', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--ks-cyan);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.live-status i {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--ks-cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--ks-cyan);
}

/* =========================================
   CORE PILLARS
   ========================================= */

.ks-pillars-section {
    padding-top: 60px;
    position: relative;
    z-index: 5;
}

.ks-pillars-heading {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto 24px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--ks-slate);
    text-transform: uppercase;
}

.ks-pillars {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(225,228,230,.62), rgba(168,208,207,.25));
    backdrop-filter: blur(26px);
    border: 1px solid rgba(168,208,207,.65);
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(43,91,93,.08);
}

.ks-pillar {
    padding: 8px 22px;
    border-right: 1px solid rgba(166,174,178,.40);
    transition: background .3s ease, transform .3s ease;
    cursor: default;
}

.ks-pillar:last-child {
    border-right: none;
}

.ks-pillar:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.4);
}

.ks-pillar-icon {
    width: 42px;
    height: 42px;
    color: var(--ks-cyan);
    filter: drop-shadow(0 0 8px rgba(104,161,161,.22));
    margin-bottom: 16px;
    transition: color 0.3s ease, filter 0.3s ease;
}

.ks-pillar:hover .ks-pillar-icon {
    color: var(--ks-teal);
    filter: drop-shadow(0 0 12px rgba(104,161,161,.35));
}

.ks-pillar-number {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--ks-cyan);
    display: block;
}

.ks-pillar-title {
    margin-top: 8px;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ks-black);
    display: block;
    text-transform: uppercase;
}

.ks-pillar-subtitle {
    margin-top: 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    line-height: 1.4;
    color: var(--ks-slate);
    display: block;
}

/* =========================================
   VERIFICATION MATRIX
   ========================================= */

.matrix-section {
    width: min(1280px, calc(100% - 48px));
    margin: 80px auto;
    position: relative;
    z-index: 5;
    text-align: center;
}

.matrix-section h2 {
    font-size: 3rem;
    margin-bottom: 8px;
}

.matrix-section h2 span {
    color: var(--ks-slate);
}

.matrix-section p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.125rem;
    color: var(--ks-teal);
    max-width: 600px;
    margin: 0 auto 64px auto;
}

.matrix-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    position: relative;
}

.matrix-inputs, .matrix-outputs {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

.matrix-inputs::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 1px;
    background: var(--ks-cyan);
}

.matrix-outputs::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 1px;
    background: var(--ks-cyan);
}

.matrix-box {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(168,208,207,.5);
    border-radius: 12px;
    padding: 16px 24px;
    font-family: 'Satoshi', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ks-teal);
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(43,91,93,.05);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
    justify-content: flex-start;
}

.matrix-outputs .matrix-box {
    color: var(--ks-black);
    font-weight: 800;
}

.matrix-outputs .matrix-box::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%2368A1A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>') no-repeat center center;
}

.verification-core {
    width: 220px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 32px;
    background: radial-gradient(circle, #E1E4E6 0%, #A8D0CF 55%, #68A1A1 100%);
    border: 1px solid rgba(104,161,161,.8);
    box-shadow: 0 0 60px rgba(104,161,161,.25), 0 25px 70px rgba(43,91,93,.15);
    position: relative;
    z-index: 10;
}

.verification-core span {
    color: var(--ks-black);
    font-family: 'Satoshi', sans-serif;
    font-size: 64px;
    font-weight: 900;
}

.verification-core-label {
    position: absolute;
    bottom: -40px;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--ks-black);
    text-transform: uppercase;
}

.verification-core-sublabel {
    position: absolute;
    bottom: -56px;
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--ks-slate);
    text-transform: uppercase;
}

/* =========================================
   PHASE 07: 6-STAGE PROTOCOL
   ========================================= */

.protocol-section {
    width: min(1280px, calc(100% - 48px));
    margin: 120px auto;
    position: relative;
    z-index: 5;
    background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(225,228,230,.66), rgba(168,208,207,.25));
    backdrop-filter: blur(24px);
    border: 1px solid rgba(168,208,207,.62);
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(43,91,93,.08);
    padding: 64px 48px;
    text-align: center;
}

.protocol-header h2 {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.protocol-header p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--ks-teal);
    max-width: 600px;
    margin: 0 auto 64px;
}

.protocol-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding: 45px 20px;
    margin-bottom: 40px;
}

.protocol-track::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ks-cyan), transparent);
    z-index: 0;
}

.protocol-node {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.protocol-node-dot {
    width: 12px;
    height: 12px;
    background: var(--ks-aqua);
    border-radius: 50%;
    border: 2px solid var(--ks-white);
    box-shadow: 0 0 12px var(--ks-cyan);
}

.protocol-node:nth-child(n+4) .protocol-node-dot {
    background: var(--ks-steel);
    box-shadow: none;
    border-color: var(--ks-white);
}

.protocol-node-num {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--ks-black);
}

.protocol-node-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--ks-black);
    text-transform: uppercase;
}

.protocol-readout {
    border-top: 1px solid rgba(166,174,178,.40);
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.protocol-readout-title {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--ks-slate);
    margin-bottom: 24px;
}

.protocol-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: 'Satoshi', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ks-teal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.protocol-steps i {
    font-style: normal;
    color: var(--ks-cyan);
}

/* =========================================
   PHASE 08: EVIDENCE (PERFORMANCE/COMPLIANCE)
   ========================================= */

.evidence-section {
    width: min(1280px, calc(100% - 48px));
    margin: 80px auto;
    position: relative;
    z-index: 5;
}

.evidence-header {
    text-align: center;
    margin-bottom: 64px;
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.ks-card-evidence {
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--ks-slate);
    margin-bottom: 40px;
    text-transform: uppercase;
}

.perf-metric {
    margin-bottom: 32px;
}

.perf-metric h3 {
    font-size: 2.5rem;
    font-weight: 900;
    margin: 0 0 4px 0;
    line-height: 1;
}

.perf-metric p {
    font-family: 'Satoshi', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ks-teal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.compliance-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.compliance-verified {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(168,208,207,.25);
    border: 1px solid var(--ks-cyan);
    color: var(--ks-teal);
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.compliance-item {
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ks-black);
    text-transform: uppercase;
}

.benchmark-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.benchmark-item {
    border-bottom: 1px solid var(--ks-steel);
    padding-bottom: 8px;
}

.benchmark-item span {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ks-teal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.benchmark-item strong {
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--ks-black);
}

.latency-trace {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    color: var(--ks-steel);
    white-space: pre;
    text-align: center;
    opacity: 0.6;
}

/* =========================================
   PHASE 09: FINAL CTA
   ========================================= */

.cta-section {
    width: min(1280px, calc(100% - 48px));
    margin: 160px auto;
    position: relative;
    z-index: 5;
    text-align: center;
}

.cta-gateway-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Geist Mono', monospace;
    font-size: 240px;
    color: rgba(168,208,207,.15);
    z-index: -1;
    line-height: 1;
    pointer-events: none;
}

.cta-content h2 {
    font-size: 4rem;
    margin-bottom: 24px;
}

.cta-content p {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.125rem;
    color: var(--ks-teal);
    margin-bottom: 48px;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.cta-link {
    font-family: 'Satoshi', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--ks-teal);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.cta-link:hover {
    color: var(--ks-cyan);
}

/* =========================================
   PHASE 10: SYSTEM FOOTER
   ========================================= */

.ks-footer {
    position: relative;
    padding: 80px 0 40px;
    background: linear-gradient(135deg, #E1E4E6 0%, #B6BCC2 55%, #A8D0CF 100%);
    border-top: 1px solid rgba(166,174,178,.4);
    overflow: hidden;
}

.ks-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(43,91,93,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,91,93,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

.footer-content {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-brand .ks-brand-name {
    margin-bottom: 8px;
}

.footer-brand p {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--ks-teal);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.footer-col h4 {
    font-family: 'Satoshi', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--ks-black);
    text-transform: uppercase;
    margin-bottom: 24px;
    letter-spacing: 0.05em;
}

.footer-col a {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ks-teal);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--ks-cyan);
}

.footer-bottom {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 48px));
    margin: 80px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--ks-steel);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-status {
    margin-bottom: 16px;
}

.footer-status-label {
    font-family: 'Geist Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    color: var(--ks-slate);
    letter-spacing: .15em;
    margin-bottom: 8px;
    display: block;
}

.footer-status-live {
    font-family: 'Satoshi', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--ks-black);
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-status-live i {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--ks-cyan);
    border-radius: 50%;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    color: var(--ks-slate);
}

.footer-legal a {
    color: var(--ks-slate);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--ks-cyan);
}

/* =========================================
   COMPLIANCE BADGES & LATENCY PULSE STYLE
   ========================================= */

/* Cryptographic Badge Glow */
.compliance-verified, .compliance-item, .compliance-badge {
    display: inline-block !important;
    padding: 6px 12px !important;
    border: 1px solid rgba(168, 208, 207, 0.5) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 10px rgba(168, 208, 207, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--ks-teal) !important;
    margin: 4px !important;
}

/* Latency Readout Banners with Pulse Indicators */
.perf-metric {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.perf-metric h3 {
    font-family: 'Satoshi', sans-serif !important;
    font-size: 3rem !important;
    font-weight: 900 !important;
    color: var(--ks-black) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Animated pulse indicator next to latency */
.perf-metric h3::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--ks-cyan);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(104, 161, 161, 0.7);
    animation: pulseTurquoise 1.5s infinite;
}

@keyframes pulseTurquoise {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(104, 161, 161, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(104, 161, 161, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(104, 161, 161, 0);
    }
}

/* =========================================
   ADVANCED UI POLISH STYLES
   ========================================= */

/* Subtle Circuit Background Pattern */
body.ks-environment, body.knox-environment {
    background-color: #E1E4E6;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(168, 208, 207, 0.15) 0%, transparent 60%),
        linear-gradient(rgba(166, 174, 178, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(166, 174, 178, 0.12) 1px, transparent 1px) !important;
    background-size: 100% 100%, 40px 40px, 40px 40px !important;
}

/* Micro-Typography & Eyebrow Alignment */
.section-eyebrow {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    font-weight: 700;
    margin-bottom: 8px;
    display: inline-flex;
    gap: 8px;
    text-transform: uppercase;
}

.eyebrow-num {
    color: #68A1A1; /* Muted Cyan */
}

.eyebrow-text {
    color: #5B656B; /* Slate */
}

/* High-Glow Status Bullets & Badge Pills */
.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #68A1A1;
    border-radius: 50%;
    box-shadow: 0 0 8px #A8D0CF, 0 0 12px #A8D0CF;
    margin-right: 6px;
}

/* Glowing Horizontal Divider Lines */
.ks-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(166, 174, 178, 0.5) 20%, 
        rgba(168, 208, 207, 0.8) 50%, 
        rgba(166, 174, 178, 0.5) 80%, 
        transparent 100%
    );
    margin: 60px 0;
}

/* Custom Monospace Tooltip Callouts */
.ks-micro-tag {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    color: #2B5A5C;
    background: rgba(168, 208, 207, 0.2);
    border: 1px solid rgba(168, 208, 207, 0.5);
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    display: inline-block;
}

/* ==========================================================================
   GLOBAL LAYOUT & CONTAINER FIXES
   ========================================================================== */

/* 1. Global Shell Constraints */
body {
    background-color: #E1E4E6 !important;
    color: #0E1315 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.ks-environment, .shared-shell, main {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* 2. Hero Section Grid (Desktop 2-Column Split) */
@media screen and (min-width: 993px) {
    .ks-hero-grid, .shared-hero, .hero-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 Equal Columns on Desktop */
        gap: 48px !important;
        align-items: center !important;
        padding: 60px 0 !important;
    }
}

/* Restrain Hero Headline Sizing */
.ks-hero-grid h1, .hero-section h1, .sh-title {
    font-size: clamp(2rem, 4.2vw, 3rem) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 20px !important;
}

/* Restrain Hero Image Sizing */
.hero-composite-img, .ks-hero-visual-container img {
    width: 100% !important;
    max-height: 520px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

/* 3. System Core Pillars (4-Column Horizontal Grid) */
@media screen and (min-width: 993px) {
    .system-pillars-grid, .shared-telemetry, .ks-pillars, .ks-telemetry-strip {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* 4 Columns on Desktop */
        gap: 20px !important;
        margin: 40px 0 !important;
    }

    .protocol-overview-grid, .live-proof-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.2fr !important;
        gap: 48px !important;
        align-items: center !important;
        margin: 80px 0 !important;
    }
}

/* 5. Performance & Compliance Cards (Flex Wrap Fix) */
.performance-compliance-grid, .ks-card-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    justify-content: space-between !important;
}

.performance-compliance-grid .ks-card, .ks-card-grid .ks-card {
    flex: 1 1 280px !important;
    max-width: 100% !important;
}

/* Absolute Position for Hero Visual & Floating Status Card */
.ks-hero-visual, .sh-visual-container {
    position: relative !important;
}

.sh-status-panel, .ks-hero-status-card {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    width: 220px !important;
    background: rgba(225, 228, 230, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    z-index: 10 !important;
}

/* =========================================
   SOVEREIGN INFRASTRUCTURE HIGH-ASSURANCE STYLES
   ========================================= */

/* Dual-Layer Quantum Glass Cards */
.ks-card, .shared-panel, .lpg-stream-panel, .cp-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(225,228,230,0.45) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 
        0 20px 50px rgba(14, 19, 21, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Quantum Energy Pulse Indicators */
.live-pulse, .live-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background: #A8D0CF !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px #A8D0CF, 0 0 20px #A8D0CF, 0 0 30px rgba(168, 208, 207, 0.8) !important;
    animation: quantum-pulse 2s infinite ease-in-out !important;
}

@keyframes quantum-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Sharp Monospaced Telemetry Micro-Labels */
.card-ref-tag, .telemetry-tag {
    font-family: 'Geist Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    color: var(--ks-slate) !important;
    text-transform: uppercase !important;
}

/* --- SYSTEMS AVAILABLE / PRODUCTS SECTION & CATALOGUE GRID --- */
.systems-available-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 40px;
}

.systems-available-grid, .kcc-layout, .products-hero-container {
    display: grid !important;
    grid-template-columns: 1fr 1.1fr !important; /* Desktop: Split Left/Right */
    gap: 48px !important;
    align-items: start !important;
}

/* Remove default browser bullets & list padding */
.systems-list, .systems-list ul, .systems-list li, .kcc-list, .kcc-list ul, .kcc-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.system-item-card, .system-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid #D1D5D8;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.system-item-card.active, .system-card.active {
    border-color: #68A1A1; /* Active Cyan Accent */
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px rgba(168, 208, 207, 0.25);
}

/* Image Preview Container (Right Column) */
.product-preview-container, .kcc-display {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.product-preview-img, .kcc-display-img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px;
}

/* --- COMPOSITE HERO IMAGE & CONTAINER STYLING --- */
.ks-hero-visual-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.hero-composite-img {
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Floating Overlay Panel (Desktop Default) */
.ks-hero-status-card, .sh-status-panel {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    width: 220px !important;
    background: rgba(225, 228, 230, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    z-index: 10 !important;
    box-shadow: 0 10px 30px rgba(14, 19, 21, 0.1);
}

/* --- TABLET BREAKPOINT (769px - 1024px) --- */
@media screen and (max-width: 1024px) {
    .ks-hero-grid, .shared-hero {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 40px 0 !important;
    }

    .hero-composite-img {
        max-height: 480px !important;
    }

    .ks-hero-status-card, .sh-status-panel {
        top: 16px !important;
        right: 16px !important;
        width: 180px !important;
        padding: 14px !important;
    }

    .sh-title {
        font-size: 2.5rem !important;
    }
}

/* --- MOBILE BREAKPOINT (< 768px) --- */
@media screen and (max-width: 768px) {
    .systems-available-section, .knox-cc {
        padding: 32px 20px !important;
    }

    .systems-available-grid, .kcc-layout, .products-hero-container, .ks-hero-grid, .shared-hero, .live-proof-grid, .knox-deployment-grid, .pricing-card-grid {
        grid-template-columns: 1fr !important; /* Mobile: Stack Vertically */
        gap: 24px !important;
    }

    .system-item-card, .system-card {
        padding: 16px !important;
    }

    /* Keep main display title readable on small screens */
    h1.systems-header, .kcc-title {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }

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

    .sh-desc {
        font-size: 14px !important;
    }

    .sh-actions {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .sh-actions a {
        width: 100% !important;
        text-align: center !important;
    }

    .hero-composite-img {
        max-height: 320px !important;
        object-fit: cover !important;
    }

    .ks-hero-status-card, .sh-status-panel {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-top: 12px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   12-COLUMN ARCHITECTURAL COMPOSITION SYSTEM
   ========================================================================== */

/* 1. Main Master Shell Grid (1440px Centered) */
.about-narrative-container, .ks-environment main, .shared-shell {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 60px 40px !important;
    width: 100% !important;
}

/* 2. 12-Column Grid Split (5 Columns Left Content / 7 Columns Right System Visual) */
@media screen and (min-width: 993px) {
    .founder-hero-grid, .narrative-chapter-grid, .two-col-composition {
        display: grid !important;
        grid-template-columns: 5fr 7fr !important; /* 5/12 Typography, 7/12 System Visual */
        gap: 60px !important;
        align-items: start !important;
        width: 100% !important;
        margin-bottom: 80px !important;
    }
}

/* Left Column Typography & Statements */
.founder-hero-copy, .comp-copy-col {
    width: 100% !important;
    max-width: 100% !important; /* Removes narrow 30% text trap */
}

.founder-hero-copy h1, .narrative-headline {
    font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #0E1315 !important;
    margin-bottom: 24px !important;
}

.narrative-body-text, .founder-hero-copy p {
    font-size: 1.1rem !important;
    line-height: 1.65 !important;
    color: #3D484E !important;
    margin-bottom: 24px !important;
}

/* Right Column System Visual & Node Containers (Populates 65% Right Area) */
.founder-hero-visual, .comp-visual-col {
    width: 100% !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(225,228,230,0.45) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    padding: 36px !important;
    box-shadow: 0 20px 50px rgba(14, 19, 21, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    position: relative !important;
}

/* 3. Horizontal Decision Gap & Process Flow Nodes (Replaces vertical arrows) */
.decision-gap-diagram, .horizontal-flow-pipeline {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid #D1D5D8 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin: 40px 0 !important;
    overflow-x: auto !important;
}

.dg-step, .hfp-step {
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #0E1315 !important;
    background: #E1E4E6 !important;
    border: 1px solid #D1D5D8 !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.dg-arrow, .hfp-arrow {
    color: #68A1A1 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.dg-gap {
    background: rgba(255, 68, 68, 0.1) !important;
    border: 1px solid rgba(255, 68, 68, 0.4) !important;
    color: #D32F2F !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* 4. Three Resolutions Grid (Allow, Block, Quarantine) */
@media screen and (min-width: 993px) {
    .resolution-matrix-grid, .decision-states-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        margin: 48px 0 !important;
        width: 100% !important;
    }
}

.res-card {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid #D1D5D8 !important;
    border-radius: 12px !important;
    padding: 32px !important;
}

.res-card.allow { border-top: 4px solid #68A1A1 !important; }
.res-card.block { border-top: 4px solid #0E1315 !important; }
.res-card.quarantine { border-top: 4px solid #A6AEB2 !important; }

/* 5. 5-Layer Pipeline Stack */
.five-layers-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 40px 0 !important;
    width: 100% !important;
}

.layer-item {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid #D1D5D8 !important;
    border-radius: 8px !important;
    padding: 20px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.layer-num {
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #68A1A1;
}

.layer-title {
    font-weight: 700;
    font-size: 15px;
    color: #0E1315;
}

.layer-desc {
    font-size: 13px;
    color: #5B656B;
    margin-left: auto;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .resolution-matrix-grid {
        grid-template-columns: 1fr !important;
    }
    .narrative-headline {
        font-size: 32px !important;
    }
    .layer-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .layer-desc {
        margin-left: 0;
    }
}

/* =========================================
   UNIVERSAL FLUID RESPONSIVE ENGINE
   ========================================= */

/* 1. Prevent Horizontal Overflow & Enforce Fluid Box Sizing */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

*, *::before, *::after {
    box-sizing: inherit !important;
}

/* 2. Fluid Image & Canvas Media Constraints */
img, svg, video, canvas, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* 3. Fluid Container Max-Width & Padding */
.ks-environment, .knox-environment, main, .shared-shell, .about-narrative-container, .systems-available-section, .founder-room-section {
    width: 100% !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* 4. Fluid Typography (Clamps dynamically based on Viewport Width) */
h1, .sh-title, .narrative-headline, .kcc-title, .founder-hero-copy h1 {
    font-size: clamp(2rem, 4.5vw, 3.75rem) !important;
    line-height: 1.1 !important;
}

h2, .editorial-claim h2 {
    font-size: clamp(1.4rem, 3.2vw, 2.5rem) !important;
    line-height: 1.15 !important;
}

p, .sh-desc, .narrative-body-text, .founder-hero-copy p {
    font-size: clamp(0.9rem, 1.1vw, 1.1rem) !important;
}

/* 5. Responsive Grid Breakpoints */

/* Large Tablets & Small Laptops (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .ks-environment, .knox-environment, main, .shared-shell, .about-narrative-container, .systems-available-section, .founder-room-section {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .ks-hero-grid, .shared-hero, .founder-hero-grid, .systems-available-grid, .kcc-layout, .products-hero-container {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .hero-composite-img {
        max-height: 440px !important;
    }
}

/* Mobile Devices (max-width: 768px) */
@media screen and (max-width: 768px) {
    .ks-environment, .knox-environment, main, .shared-shell, .about-narrative-container, .systems-available-section, .founder-room-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ks-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .nav-links {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .ks-hero-grid, .shared-hero, .live-proof-grid, .knox-deployment-grid, .pricing-card-grid, .systems-available-grid, .kcc-layout, .products-hero-container, .resolution-matrix-grid, .founder-hero-grid, .four-fields, .five-components, .editorial-claim {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .hero-composite-img {
        max-height: 300px !important;
    }

    .ks-hero-status-card, .sh-status-panel {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-top: 12px !important;
    }

    .system-resolution-table, table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   STANDALONE CTA & FOOTER DOCUMENT FLOW FIXES
   ========================================================================== */

/* Standalone Product CTA Section */
.ks-bottom-banner, .product-cta-section {
    position: relative !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 80px auto 40px !important;
    padding: 60px 40px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(225,228,230,0.55) 100%) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    clear: both !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

/* Robot Arm Visual Layer (Inside CTA Only) */
.cta-robot-arm, .cta-arm-img {
    position: absolute !important;
    right: 20px !important;
    bottom: -10px !important;
    max-height: 120% !important;
    width: auto !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.cta-text {
    position: relative !important;
    z-index: 2 !important;
    max-width: 650px !important;
}

/* Independent Site Footer with High-Contrast Dark Surface Color System */
.ks-footer, .site-footer {
    --footer-bg: #0B0E10;
    --footer-primary: #FFFFFF;
    --footer-secondary: #B6D0D0;
    --footer-accent: #68A1A1;
    --footer-muted: #8A9E9E;
    --footer-divider: rgba(255, 255, 255, 0.25);

    position: relative !important;
    width: 100% !important;
    clear: both !important;
    display: block !important;
    margin-top: 60px !important;
    background: var(--footer-bg) !important;
    color: var(--footer-primary) !important;
    padding: 60px 40px 40px !important;
    border-top: 1px solid var(--footer-divider) !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}

.ks-footer *, .site-footer * {
    box-sizing: border-box !important;
}

.ks-footer .ks-brand-name, 
.ks-footer .footer-brand .ks-brand-name,
.ks-footer h2,
.ks-footer h3,
.ks-footer h4,
.ks-footer .footer-col h4,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
    color: var(--footer-primary) !important;
    font-family: 'Satoshi', sans-serif !important;
    letter-spacing: 0.12em !important;
    font-weight: 900 !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
}

.ks-footer p, 
.ks-footer .footer-brand p,
.site-footer p {
    color: var(--footer-accent) !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
}

.ks-footer a, 
.ks-footer .footer-col a,
.site-footer a {
    color: var(--footer-secondary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.ks-footer a:hover, 
.ks-footer .footer-col a:hover,
.site-footer a:hover {
    color: var(--ks-cyan, #68A1A1) !important;
}

.ks-footer .footer-status-label,
.ks-footer .footer-legal span,
.site-footer .footer-status-label {
    color: var(--footer-muted) !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
}

.ks-footer .footer-legal a,
.site-footer .footer-legal a {
    color: var(--footer-secondary) !important;
    font-size: 11px !important;
    display: inline-block !important;
    margin: 0 8px !important;
}

.ks-footer .footer-legal a:hover,
.site-footer .footer-legal a:hover {
    color: var(--ks-cyan, #68A1A1) !important;
}

.ks-footer .footer-status-live,
.site-footer .footer-status-live {
    color: var(--footer-primary) !important;
    font-family: 'Geist Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

.ks-footer .footer-bottom,
.site-footer .footer-bottom {
    border-top: 1px solid var(--footer-divider) !important;
    padding-top: 28px !important;
    margin-top: 48px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .ks-footer, .site-footer {
        padding: 40px 20px 30px !important;
    }

    .ks-footer a, .site-footer a {
        font-size: 0.95rem !important;
        line-height: 2 !important;
    }

    .ks-footer h4, .site-footer h4, .ks-footer .footer-col h4 {
        font-size: 0.85rem !important;
        letter-spacing: 0.14em !important;
        margin-top: 24px !important;
        margin-bottom: 12px !important;
    }

    .ks-footer .footer-bottom, .site-footer .footer-bottom {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }
}

/* Prevent Metric Card Overlap & Clipping */
.ks-card, .ks-card-evidence {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow: hidden !important;
}

/* ==========================================================================
   PHASE 11: RESPONSIVE & MOBILE REFLOW SYSTEM
   ========================================================================== */

/* 1. Architecture Flow Diagrams (Reflows to vertical flow on mobile) */
@media screen and (max-width: 992px) {
    .knox-architecture-diagram, .arch-diagram-flow, .hub-nodes-column, .horizontal-flow-pipeline {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .arch-line-vertical, .hub-line-left, .hub-line-right {
        width: 2px !important;
        height: 24px !important;
        margin: 8px auto !important;
    }
}

/* 2. Single-Column Metrics Reflow (< 768px) */
@media screen and (max-width: 768px) {
    .system-pillars-grid, .shared-telemetry, .ks-pillars, .ks-telemetry-strip, .metrics-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* 1 Metric Per Row */
        gap: 16px !important;
        width: 100% !important;
    }

    .metric-number, .perf-metric h3 {
        font-size: 28px !important;
    }
}

/* 3. Mobile Terminal & Execution Log Reflow (< 768px) */
@media screen and (max-width: 768px) {
    .klp-event-stream, #demo-stream, .terminal-line, .lsp-logs {
        font-size: 10px !important;
        padding: 12px !important;
        word-break: break-all !important;
        white-space: pre-wrap !important;
    }

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

/* 4. Single-Column Product Registry Cards (< 768px) */
@media screen and (max-width: 768px) {
    .kcc-pipeline-grid, .kcc-regulated-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .kcc-featured-card {
        padding: 20px !important;
    }

    .kcc-specs-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   MASTER STRICT GLOBAL RESPONSIVE ENGINE (12 → 6 → 1 REFLOW)
   ========================================================================== */

/* 1. TABLET BREAKPOINT (max-width: 900px) */
@media screen and (max-width: 900px) {
    *, *::before, *::after {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .ks-environment, .knox-environment, main, .shared-shell, .about-narrative-container, .systems-available-section, .founder-room-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
        max-width: 100% !important;
    }

    /* All 2-Column Split Grids Collapse to 1 Column */
    .ks-hero-grid, .shared-hero, .hero-section, .founder-hero-grid, .two-col-composition, .systems-available-grid, .kcc-layout, .kcc-hero-grid, .kcc-regulated-grid, .protocol-overview-grid, .live-proof-grid, .trust-hero-grid, .editorial-claim {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 32px !important;
        width: 100% !important;
    }

    /* 3 & 4 Column Grids Collapse to 2 Columns on Tablet */
    .system-pillars-grid, .shared-telemetry, .ks-pillars, .ks-telemetry-strip, .pricing-card-grid, .knox-deployment-grid, .kcc-pipeline-grid, .resolution-matrix-grid, .pillar-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* Width Overrides & Prevent Overflow */
    .comp-copy-col, .comp-visual-col, .founder-hero-copy, .founder-hero-visual, .ks-card, .res-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* 2. MOBILE BREAKPOINT (max-width: 600px) */
@media screen and (max-width: 600px) {
    /* All Grids & Flex Layouts Collapse Strict 1-Column */
    .ks-hero-grid, .shared-hero, .hero-section, .founder-hero-grid, .two-col-composition, .systems-available-grid, .kcc-layout, .kcc-hero-grid, .kcc-regulated-grid, .protocol-overview-grid, .live-proof-grid, .trust-hero-grid, .system-pillars-grid, .shared-telemetry, .ks-pillars, .ks-telemetry-strip, .pricing-card-grid, .knox-deployment-grid, .kcc-pipeline-grid, .resolution-matrix-grid, .pillar-grid, .performance-compliance-grid, .ks-card-grid, .four-fields, .five-components {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
        width: 100% !important;
    }

    /* Clear Fixed Widths, Padding, & Overflow Triggers */
    *, *::before, *::after {
        max-width: 100% !important;
    }

    .ks-environment, .knox-environment, main, .shared-shell, .about-narrative-container, .systems-available-section, .founder-room-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Clear Absolute Positioning Escapes on Mobile */
    .sh-status-panel, .ks-hero-status-card {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin-top: 16px !important;
    }

    /* Footer Stack Alignment */
    .footer-content, .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        align-items: flex-start !important;
    }
}

/* 3. STRICT CONTAINER CONTAINMENT & STACKING ENGINE (< 768px) */
@media screen and (max-width: 768px) {
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Enforce 100% Mobile Container Boundaries */
    .kcc-hero-grid, .two-col-composition, .founder-hero-grid, .hero-section {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Product Details & Specifications Stacked Vertically Below Product Info */
    .kcc-specs-grid, .kcc-display-specs {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.8) !important;
        padding: 16px !important;
        border-radius: 8px !important;
    }

    .kcc-display-img, .hero-composite-img, img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: 16px 0 !important;
    }

    .sh-actions, .kcc-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .sh-actions a, .btn-primary, .btn-ghost {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   INTERNAL CARD & TEXT UNCONSTRAIN ENGINE (NO TEXT SQUEEZING)
   ========================================================================== */

.ks-card, .ks-card-evidence, .res-card, .kcc-featured-card, .kcc-pipeline-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.card-title, .perf-metric, .compliance-list, .benchmark-list, .benchmark-item, .compliance-verified, .compliance-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: normal !important; /* Prevents single-character vertical wrapping */
    overflow-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

.perf-metric h3, .metric-number {
    font-size: clamp(1.8rem, 4vw, 3rem) !important;
    width: 100% !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    white-space: nowrap !important;
    margin: 12px 0 4px !important;
}

.perf-metric p {
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    color: #5B656B !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.compliance-verified, .compliance-item, .benchmark-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(209, 213, 216, 0.5) !important;
    font-size: 12px !important;
    color: #0E1315 !important;
}

/* ==========================================================================
   ZERO HORIZONTAL SCROLL / MOBILE VIEWPORT LOCK (< 768px)
   ========================================================================== */

@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    /* Wrap all process pipelines, code blocks, tables, and traces on mobile */
    .horizontal-flow-pipeline, .decision-gap-diagram, .latency-trace, .klp-event-stream, #demo-stream, .terminal-line, .lsp-logs {
        flex-wrap: wrap !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Tables reflow to block cards without horizontal scroll */
    .system-resolution-table, table, thead, tbody, th, td, tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Strict element containment lock */
    *, *::before, *::after {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   RESEARCH PAGE // NARRATIVE & SYSTEM ENTROPY COMPOSITION
   ========================================================================== */

.research-entropy-section {
    max-width: 1440px !important;
    margin: 60px auto !important;
    padding: 0 40px !important;
    width: 100% !important;
}

@media screen and (min-width: 993px) {
    .entropy-hero-grid {
        display: grid !important;
        grid-template-columns: 5fr 7fr !important; /* 5/12 Typography, 7/12 System Visual */
        gap: 60px !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 60px !important;
    }

/* ==========================================================================
   RESEARCH PAGE DIAGRAMS & RESPONSIVE REFLOW REBUILD
   ========================================================================== */

/* Stacked Diagram Architecture Engine */
.diagrams-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 60px auto !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.diagram-chain {
    width: 100% !important;
    max-width: 900px !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center !important;
    padding: 36px 28px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #D1D5D8 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(14, 19, 21, 0.05) !important;
}

.side-by-side-arch {
    width: 100% !important;
    max-width: 900px !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center !important;
    box-sizing: border-box !important;
}

.entropy-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
}

.entropy-hero-copy h1 {
    font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    color: #0E1315 !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
}

.entropy-hero-visual {
    width: 100% !important;
    min-height: 380px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(225,228,230,0.45) 100%) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    position: relative !important;
    box-shadow: 0 20px 50px rgba(14, 19, 21, 0.06) !important;
}

.entropy-scale {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid #D1D5D8 !important;
    border-radius: 8px !important;
    padding: 20px 28px !important;
    margin: 40px 0 !important;
}

.diagram-chain, .side-by-side-arch {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid #D1D5D8 !important;
    border-radius: 12px !important;
    padding: 32px 24px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.diagram-chain {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

.side-by-side-arch {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    gap: 24px !important;
}

/* Mobile Single-Column Reflow (max-width: 600px) */
@media screen and (max-width: 600px) {
    .diagrams-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin: 40px 0 !important;
    }

    .diagram-chain {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 24px 16px !important;
    }

    .side-by-side-arch {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 24px 16px !important;
    }

    .arch-divider {
        display: none !important;
    }

    .diagram-col span, .arch-flow span {
        font-size: 11px !important;
        line-height: 1.4 !important;
        word-break: normal !important;
        white-space: normal !important;
    }
}

/* ==========================================================================
   04 / 06 DETERMINISTIC CONTROL SECTION & MOBILE SEQUENTIAL REFLOW
   ========================================================================== */

/* Desktop Layout (min-width: 769px) */
@media screen and (min-width: 769px) {
    .control-section {
        display: grid !important;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
        gap: clamp(2rem, 5vw, 6rem) !important;
        align-items: center !important;
        width: 100% !important;
    }

    .control-copy, .control-visual, .control-flow, .control-outcomes {
        min-width: 0 !important;
    }
}

/* Mobile Single-Column Sequential Composition (max-width: 768px) */
@media screen and (max-width: 768px) {
    .control-section {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
        width: 100% !important;
        margin-bottom: 40px !important;
    }

    .control-copy {
        width: 100% !important;
        max-width: 100% !important;
    }

    .control-visual {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 24px 16px !important;
        box-sizing: border-box !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }

    .control-gate-visual, .control-flow {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .control-layer-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px 16px !important;
        text-align: center !important;
    }

    .control-outcomes, .decision-states {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Mobile Vertical Stack */
        gap: 1rem !important;
        width: 100% !important;
        margin-top: 32px !important;
    }

    .decision-state {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px 24px !important;
    }
}

/* ==========================================================================
   SOVEREIGN HERO & FULL-BLEED CINEMATIC VISUAL ENGINE
   ========================================================================== */

.sovereign-hero {
    width: 100% !important;
    padding: clamp(3.5rem, 6vw, 7rem) clamp(1.25rem, 4vw, 4rem) 3rem !important;
    box-sizing: border-box !important;
}

.sovereign-content {
    width: min(1200px, 100%) !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.sovereign-content h1 {
    font-size: clamp(2.25rem, 5vw, 4rem) !important;
    line-height: 1.05 !important;
    margin: 1.5rem auto !important;
    max-width: 1100px !important;
    text-transform: uppercase !important;
}

.sovereign-content p {
    max-width: 900px !important;
    margin: 0 auto 2.5rem !important;
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
    color: #3D484E !important;
}

.hero-actions {
    width: min(100%, 1000px) !important;
    margin: 0 auto !important;
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.sovereign-image {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.sovereign-image img {
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    border: none !important;
}

@media (max-width: 768px) {
    .sovereign-hero {
        padding: 3rem 1rem 2rem !important;
    }

    .sovereign-content h1 {
        font-size: clamp(2rem, 8vw, 3.2rem) !important;
        line-height: 1.05 !important;
    }

    .sovereign-content p {
        font-size: 1.05rem !important;
        line-height: 1.55 !important;
    }

    .hero-actions {
        flex-direction: column !important;
        width: 100% !important;
    }

    .hero-actions a {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .sovereign-image {
        width: 100% !important;
    }

    .sovereign-image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   PERMANENT REMOVAL OF OVERLAYS, STATUS CARDS & POPUPS
   ========================================================================== */
.shared-live-status,
.sh-status-panel,
.ks-hero-status-card,
.crypto-modal-backdrop,
#crypto-modal,
.modal-overlay,
.popup-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   SHARED COMPONENT SYSTEM & THREE-SURFACE VISUAL CONTAINMENT ENGINE
   ========================================================================== */

/* SURFACE 2: Shared Glass Panels & Bordered Data Blocks */
.shared-panel, .data-panel, .evidence-panel, .verified-record-box, .kcc-featured-card, .res-card, .ks-card, .ks-card-evidence {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(225, 228, 230, 0.5) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid #D1D5D8 !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: 0 20px 50px rgba(14, 19, 21, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Data Row & Telemetry Key-Value Grouping Inside Panels */
.data-row, .audit-row, .spec-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(209, 213, 216, 0.6) !important;
    font-size: 13px !important;
    width: 100% !important;
}

.data-row:last-child, .audit-row:last-child, .spec-row:last-child {
    border-bottom: none !important;
}

.data-label, .audit-label {
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    color: #5B656B !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.data-value, .audit-value {
    font-family: 'Geist Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0E1315 !important;
}

/* Precision Status Indicators (Surface 3) */
.status-indicator, .ks-micro-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #2B5A5C !important;
    background: rgba(104, 161, 161, 0.12) !important;
    border: 1px solid rgba(104, 161, 161, 0.4) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
}

/* Verified Record Panel Component */
.verified-record-panel {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #D1D5D8 !important;
    border-top: 4px solid var(--ks-cyan) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin: 20px 0 !important;
}

/* ==========================================================================
   43 INDUSTRIES SECTOR REGISTRY & RESPONSIVE REFLOW
   ========================================================================== */

.industry-registry-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
}

.industry-item {
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid #D1D5D8 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.industry-item:hover {
    border-color: var(--ks-cyan) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px) !important;
}

.ind-num {
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    color: #68A1A1 !important;
    font-weight: 700 !important;
}

.ind-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0E1315 !important;
    letter-spacing: 0.03em !important;
}

.ind-arrow {
    color: #68A1A1 !important;
    font-weight: 700 !important;
}

/* Tablet & Mobile Reflow for 43 Industries */
@media screen and (max-width: 900px) {
    .industry-registry-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media screen and (max-width: 600px) {
    .industry-registry-grid {
        grid-template-columns: 1fr !important; /* Single-column mobile list */
        gap: 10px !important;
    }

    .industry-item {
        padding: 14px 18px !important;
    }
}

/* ==========================================================================
   PERFORMANCE GRID & METRIC CARDS REFLOW ENGINE
   ========================================================================== */

/* Desktop Layout (min-width: 993px) */
@media screen and (min-width: 993px) {
    .performance-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
        width: 100% !important;
    }
}

/* Tablet Layout (max-width: 992px) */
@media screen and (max-width: 992px) {
    .performance-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
        width: 100% !important;
    }
}

/* Mobile Layout (max-width: 600px) */
@media screen and (max-width: 600px) {
    .performance-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important; /* Stacked 1-Column */
        gap: 20px !important;
        width: 100% !important;
    }

    .ks-card-evidence, .ks-card {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 24px !important;
        box-sizing: border-box !important;
    }

    .card-title {
        font-size: 16px !important;
        letter-spacing: 0.1em !important;
        word-break: normal !important;
        white-space: normal !important;
        width: 100% !important;
        display: block !important;
    }

    .perf-metric {
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    .perf-metric h3 {
        font-size: 28px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 6px !important;
    }

    .perf-metric p {
        font-size: 11px !important;
        word-break: normal !important;
        white-space: normal !important;
        letter-spacing: 0.05em !important;
    }

    .compliance-list, .benchmark-list {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .compliance-verified, .compliance-item, .benchmark-item {
        width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        font-size: 12px !important;
        padding: 10px 14px !important;
    }
}

/* ==========================================================================
   GLOBAL OPERATIONAL STATE ANIMATIONS & LIVE TELEMETRY SIGNALS
   ========================================================================== */

/* Quantum Pulse Indicator Dot */
.live-dot, .footer-status-live i, .st-indicator {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--ks-cyan, #68A1A1) !important;
    box-shadow: 0 0 10px rgba(104, 161, 161, 0.8) !important;
    animation: quantumPulse 2s infinite ease-in-out !important;
}

@keyframes quantumPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(104, 161, 161, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(104, 161, 161, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(104, 161, 161, 0);
    }
}

/* Event Stream Marquee Animation */
.shared-event-stream {
    background: #0E1315 !important;
    color: #E1E4E6 !important;
    padding: 14px 24px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    margin: 32px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ses-track {
    display: inline-flex !important;
    gap: 40px !important;
    animation: eventScroll 30s linear infinite !important;
}

@keyframes eventScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.shared-event-stream:hover .ses-track {
    animation-play-state: paused !important;
}

/* ==========================================================================
   FLEXIBLE PRODUCT CARD ARCHITECTURE SYSTEM
   ========================================================================== */

/* Product Grid & Res-Card Containers */
.kcc-regulated-grid,
.product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.kcc-pipeline-grid,
.knox-controls-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
}

/* Flexible Card Base Rules */
.res-card,
.product-card,
.ks-card {
    min-width: 0 !important;
    height: auto !important;
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 32px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    word-break: normal !important;
    hyphens: none !important;
}

.product-card__content,
.res-card-content {
    min-width: 0 !important;
    flex: 1 !important;
}

.product-card__description,
.res-card p {
    max-width: 38ch !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.6 !important;
}

.product-card__action,
.res-card .btn-ghost,
.res-card .btn-primary,
.res-card a.btn-primary,
.res-card a.btn-ghost {
    margin-top: auto !important;
    align-self: flex-start !important;
}

/* Tablet Layout (max-width: 1000px) */
@media screen and (max-width: 1000px) and (min-width: 681px) {
    .kcc-regulated-grid,
    .product-grid,
    .kcc-pipeline-grid,
    .knox-controls-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    .res-card,
    .product-card {
        min-height: 360px !important;
        padding: 28px 24px !important;
    }
}

/* Mobile Compact 1-Column Layout (max-width: 680px) */
@media screen and (max-width: 680px) {
    .kcc-regulated-grid,
    .product-grid,
    .kcc-pipeline-grid,
    .knox-controls-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .res-card,
    .product-card {
        min-height: 0 !important;
        padding: 24px 20px !important;
    }

    .product-card__description,
    .res-card p {
        max-width: none !important;
    }

    .product-card__action,
    .res-card .btn-ghost,
    .res-card .btn-primary,
    .res-card a.btn-primary,
    .res-card a.btn-ghost {
        width: 100% !important;
        text-align: center !important;
        margin-top: 20px !important;
        box-sizing: border-box !important;
    }

    .ks-nav {
        padding: 12px 16px !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    .nav-links {
        display: none !important;
   /* ==========================================================================
   MASTER SEMANTIC COMPONENT RESPONSIVE SYSTEM
   ========================================================================== */

/* 1. Global Gutters & Containers */
.container,
.section-inner,
.page-inner,
.hero-inner,
.shared-panel,
.shared-hero,
.sovereign-hero,
.legal-container,
.shared-shell,
main {
    width: min(1280px, calc(100% - 48px)) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .container,
    .section-inner,
    .page-inner,
    .hero-inner,
    .shared-panel,
    .shared-hero,
    .sovereign-hero,
    .legal-container,
    .shared-shell,
    main {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* 2. Kill Horizontal Overflow Globally */
html {
    overflow-x: hidden !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

img, svg, video, canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* 3. Fluid Responsive Typography Engine */
h1, .sh-title, .legal-title, .sovereign-hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 4.5rem) !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
}

h2, .sp-title, .legal-section-title {
    font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
}

h3 {
    font-size: clamp(1.3rem, 2.5vw, 2rem) !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
}

p, .sh-desc, .sp-body {
    font-size: clamp(0.95rem, 1.4vw, 1.2rem) !important;
    line-height: 1.6 !important;
}

/* 4. Semantic Responsive Grid Components */
.ks-execution-flow-grid,
.execution-flow {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.ks-deployment-cards-grid,
.platform-grid,
.knox-deployment-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.ks-sector-matrix-grid,
.industry-registry-grid,
.contact-gateways-grid,
.control-plane-cards,
.ks-telemetry-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

@media (max-width: 1024px) {
    .ks-execution-flow-grid,
    .execution-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .ks-deployment-cards-grid,
    .platform-grid,
    .knox-deployment-grid,
    .ks-sector-matrix-grid,
    .industry-registry-grid,
    .contact-gateways-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    /* Execution Boundary 6-step flow becomes deliberate vertical 1-column stack */
    .ks-execution-flow-grid,
    .execution-flow,
    .ks-deployment-cards-grid,
    .platform-grid,
    .knox-deployment-grid,
    .ks-sector-matrix-grid,
    .industry-registry-grid,
    .contact-gateways-grid,
    .control-plane-cards,
    .ks-telemetry-strip {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Content-driven cards without tall fixed heights */
    .application-card,
    .res-card,
    .product-card,
    .ks-card,
    .kd-tier,
    .cp-card {
        min-height: 0 !important;
        height: auto !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 24px 20px !important;
    }

    /* Stack buttons vertically */
    .sh-actions,
    .hero-btns,
    .button-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .sh-actions a,
    .sh-actions button,
    .hero-btns a,
    .hero-btns button,
    .button-group a,
    .button-group button,
    .btn-primary,
    .btn-solid,
    .btn-ghost {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Vertical arrow flow for execution step diagrams */
    .sia-arrow,
    .flow-arrow {
        transform: rotate(90deg) !important;
        margin: 8px auto !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    h1, .sh-title, .legal-title {
        font-size: clamp(1.8rem, 9vw, 2.8rem) !important;
    }

    h2, .sp-title {
        font-size: clamp(1.5rem, 7.5vw, 2.2rem) !important;
    }

    .shared-event-stream, .ks-telemetry-strip {
        padding: 10px 12px !important;
        font-size: 10.5px !important;
    }
}

/* ==========================================================================
   DESKTOP DEFAULT GRID LAYOUT ENGINE
   ========================================================================== */
.ks-execution-flow-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; text-align: center; }
.ks-deployment-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ks-deployment-domains-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ks-verification-model-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ks-philosophy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.qualification-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.industry-registry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.domain-selector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.knox-app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.dual-ai-architecture-grid { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; gap: 12px; align-items: center; }
.knox-product-systems-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ==========================================================================
   GLOBAL MOBILE RESPONSIVE ENGINE & CONTAINMENT OVERRIDES (< 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Fix full-bleed images causing horizontal overflow */
    .sovereign-image {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    .sovereign-image img {
        width: 100% !important;
        height: auto !important;
    }

    /* Force all multi-column grids and inline grids to stack 1 column on mobile */
    div[style*="grid-template-columns"],
    section[style*="grid-template-columns"],
    [style*="display: grid"],
    .ks-execution-flow-grid,
    .ks-deployment-cards-grid,
    .ks-deployment-domains-grid,
    .ks-verification-model-grid,
    .ks-philosophy-grid,
    .qualification-grid,
    .industry-registry-grid,
    .domain-selector-grid,
    .systems-available-grid,
    .knox-deployment-grid,
    .knox-app-grid,
    .knox-product-systems-grid,
    .gateway-panel-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .dual-ai-architecture-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .dual-ai-architecture-grid > div:nth-child(even) {
        display: none !important;
    }

    /* Prevent text cut-off or overflow */
    h1, h2, h3, h4, h5, h6, p, span, div, a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* Clean navigation header on mobile */
    .ks-nav {
        flex-direction: column !important;
        align-items: center !important;
        padding: 12px 16px !important;
        gap: 10px !important;
        text-align: center !important;
    }

    .nav-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 12px !important;
    }

    .nav-links a, .nav-link {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }

    /* Full width buttons on mobile with vertical stacking */
    .sh-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

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

    /* Heading responsive sizes */
    h1 {
        font-size: clamp(22px, 6.5vw, 36px) !important;
        line-height: 1.25 !important;
    }

    h2 {
        font-size: clamp(18px, 5.5vw, 28px) !important;
        line-height: 1.3 !important;
    }
}