/* --------------------------------------------------------------
   PLATFORM ARCHITECTURE — Sharp Schematic Blueprint (Artemis Style)
   -------------------------------------------------------------- */

.pa-section {
    --light-blue: #0ea5e9;
    position: relative;
    background-color: transparent !important;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    padding: 100px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Section Header ── */
.pa-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 48px;
}

.pa-eyebrow {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-text-cream-muted) !important;
    margin-bottom: 12px;
    display: inline-block;
}

.pa-headline {
    font-family: var(--font-primary), sans-serif !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    color: var(--ink) !important;
    margin: 0 0 16px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.pa-section .text-gradient {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
    font-weight: inherit !important;
}

/* ── Diagram Container ── */
.pa-diagram-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

/* ── Tab bar ── */
.pa-tab-bar {
    display: flex;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 16px;
    background: transparent;
    box-shadow: none;
}

.pa-tab-btn {
    flex: 1;
    padding: 16px 20px 14px;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: color .22s;
}

.pa-tab-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--pink);
    transform: scaleX(0);
    transition: transform 0.4s;
}

#t0.on::after,
#t1.on::after {
    background: var(--pink) !important;
}

#t2.on::after {
    background: var(--light-blue) !important;
}

#t3.on::after {
    background: var(--amber) !important;
}

.pa-tab-btn.on::after {
    transform: scaleX(1);
}

.pa-tab-num {
    font-family: var(--font-mono, 'Space Mono', monospace) !important;
    font-size: 10px !important;
    color: var(--ink-dim) !important;
    letter-spacing: .05em !important;
    display: block !important;
    margin-bottom: 6px !important;
    transition: color .2s !important;
}

#t0.on .pa-tab-num,
#t1.on .pa-tab-num {
    color: var(--pink) !important;
    font-weight: 700 !important;
}

#t2.on .pa-tab-num {
    color: var(--light-blue) !important;
    font-weight: 700 !important;
}

#t3.on .pa-tab-num {
    color: var(--amber) !important;
    font-weight: 700 !important;
}

.pa-tab-label {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ink-soft) !important;
    line-height: 1.35 !important;
    flex: 1 !important;
    transition: color .2s !important;
}

#t0.on .pa-tab-label,
#t2.on .pa-tab-label {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#t1.on .pa-tab-label,
#t3.on .pa-tab-label {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.pa-tab-arrow {
    font-size: 13px !important;
    margin-top: 7px !important;
    line-height: 1 !important;
    opacity: 0 !important;
    transition: opacity .2s !important;
}

#t0.on .pa-tab-arrow,
#t1.on .pa-tab-arrow {
    opacity: 1 !important;
    color: var(--pink) !important;
}

#t2.on .pa-tab-arrow {
    opacity: 1 !important;
    color: var(--light-blue) !important;
}

#t3.on .pa-tab-arrow {
    opacity: 1 !important;
    color: var(--amber) !important;
}

/* ── Description ── */
#pa-desc {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 16px !important;
    color: var(--color-text-cream-muted) !important;
    margin-bottom: 24px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* ── Architecture stack ── */
.arch {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.layer {
    transition: opacity .28s ease;
}

/* ── schematic typography ── */
.pa-section h1,
.pa-section h2:not(.pa-headline),
.pa-section h3,
.pa-section h4,
.pa-section h5,
.pa-section h6,
.pa-section .ttl,
.pa-section .h-ttl,
.pa-section .s-ttl,
.pa-section .brand-pill span,
.pa-section .inline-logo-item span {
    color: var(--ink) !important;
    font-weight: 600 !important;
}

.pa-section p,
.pa-section .sub,
.pa-section .h-sub,
.pa-section .s-sub,
.pa-section .pa-subtitle {
    color: var(--ink-soft) !important;
}

/* ── Consistent base card ── */
.card {
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 18px 24px;
    text-align: center;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* Universal title/sub sizing */
.ttl {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

.sub {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

/* ── Section shades (default, slightly richer for legibility/separability) ── */
#l0 .team-box {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}

#l1.card {
    background: var(--glass-bg) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#l2.harness-card {
    background: var(--glass-bg) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#l3.card {
    background: var(--glass-bg) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#l4.sys-card {
    background: var(--glass-bg) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Active section shades (CSS class on .page) ── */
/* Tab 0 (Dark Blue Your Team) */
.tab-0 #l0.team-box,
.tab-0 #l0 .team-box {
    background: rgba(30, 64, 175, 0.08) !important;
    border-color: #1e40af !important;
}

/* Tab 0 (static colors of all looks visible simultaneously) & Tab 1 (Pink Automation/Harness) */
.tab-0 #l1.card,
.tab-1 #l1.card {
    background: rgba(255, 61, 138, 0.08) !important;
    border-color: var(--pink) !important;
}

.tab-0 #l2.harness-card,
.tab-1 #l2.harness-card {
    background: rgba(255, 61, 138, 0.08) !important;
    border-color: var(--pink) !important;
}

/* Tab 0 & Tab 2 (Light Blue LLM Engine) */
.tab-0 #l3.card,
.tab-2 #l3.card {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: var(--light-blue) !important;
}

/* Tab 0 & Tab 3 (Yellow/Amber Systems) */
.tab-0 #l4.sys-card,
.tab-3 #l4.sys-card {
    background: rgba(255, 181, 71, 0.08) !important;
    border-color: var(--amber) !important;
}

.tab-0 #l4 .sbox,
.tab-3 #l4 .sbox {
    background: rgba(255, 181, 71, 0.08) !important;
    border-color: var(--amber) !important;
}

.tab-0 #la3 .div-line,
.tab-3 #la3 .div-line {
    background: var(--amber) !important;
}

.tab-0 #la3 .div-label,
.tab-3 #la3 .div-label {
    color: var(--amber) !important;
}

/* ── Team ── */
.team-wrap {
    display: flex;
    justify-content: center;
}

.team-box {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 16px 64px;
    text-align: center;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* ── Harness ── */
.harness-card {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 16px 20px;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: background .3s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.harness-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: var(--grad-cta) !important;
    z-index: 5 !important;
}

.harness-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 12px;
}

.harness-badge {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    background: var(--grad-cta) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    box-shadow: 0 2px 8px rgba(255, 61, 138, 0.25) !important;
}

.harness-name {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
}

.h-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.hbox {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    padding: 10px 14px;
    text-align: center;
    transition: border-color .18s, box-shadow .18s;
    cursor: default;
}

.hbox:hover {
    border-color: var(--color-violet, var(--pink)) !important;
    box-shadow: 0 4px 12px rgba(255, 61, 138, 0.08);
}

.hbox .h-ttl {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

.hbox .h-sub {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 12px !important;
}

/* ── LLM badge ── */
.llm-badge {
    display: inline-block;
    background: rgba(255, 61, 138, 0.06);
    border: 1px solid rgba(255, 61, 138, 0.2);
    border-radius: 100px !important;
    padding: 6px 20px;
    margin-top: 12px;
    transition: background .3s, border-color .3s;
}

.tab-2 .llm-badge {
    background: rgba(255, 61, 138, 0.12);
    border-color: var(--pink);
}

.llm-badge span {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 12px !important;
    color: var(--pink) !important;
    font-weight: 500 !important;
}

/* Brand Pills Row inside LLM */
.brand-pills-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.brand-pill {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 100px !important;
    padding: 6px 14px;
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 12px !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.brand-pill:hover {
    border-color: var(--color-violet, var(--pink)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 61, 138, 0.08);
}

.brand-logo {
    display: inline-block;
    flex-shrink: 0;
}

/* Inline logo item */
.inline-logo-item {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border) !important;
    border-radius: 100px !important;
    padding: 2px 8px;
    font-size: 11px;
}

/* ── Systems divider ── */
.sys-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}

.div-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    transition: background .3s;
}

.div-label {
    font-family: var(--font-mono, 'Space Mono', monospace) !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: color .3s !important;
    color: #999999 !important;
}

/* ── Systems ── */
.sys-card {
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 14px;
    transition: background .3s ease, border-color .3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

.sys-top {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.sys-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sbox {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    padding: 10px 8px;
    text-align: center;
    transition: background .3s, border-color .3s, box-shadow .3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.sbox:hover {
    border-color: var(--color-violet, var(--pink)) !important;
    box-shadow: 0 4px 12px rgba(255, 61, 138, 0.08);
}

.sbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sbox .s-ttl {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.sbox .s-sub {
    font-family: var(--font-primary, var(--font-primary)) !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    line-height: 1.35 !important;
}

@media (max-width: 768px) {
    .pa-section {
        padding: 60px 0;
    }

    .pa-header {
        margin-bottom: 32px;
    }



    .pa-tab-bar {
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
    }

    .pa-tab-bar::-webkit-scrollbar {
        display: none;
    }

    .pa-tab-btn {
        flex-shrink: 0;
        min-width: 140px;
        border-right: 1px solid var(--color-border-cream-dark) !important;
        border-bottom: none !important;
        padding: 12px 16px !important;
    }

    .pa-tab-btn:last-child {
        border-right: none !important;
    }

    .pa-tab-label {
        font-size: 11px !important;
    }

    .pa-tab-num {
        font-size: 12px !important;
    }

    #pa-desc {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }

    .h-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sys-top {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 6px;
    }

    .sys-bottom {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sbox {
        padding: 10px 12px;
    }

    .hbox {
        padding: 8px 10px;
    }

    .harness-card {
        padding: 12px 14px;
    }

    .team-box {
        padding: 12px 32px;
    }

    .arch {
        gap: 6px;
    }
}

/* ── White Blueprint Canvas Container Overrides ── */
.pa-diagram-container {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 40px !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(6, 12, 28, 0.08) !important;
}

/* Specific Active Tab Label Color Overrides (Fixing ID specificity) */
.pa-diagram-container #t0.on .pa-tab-label,
.pa-diagram-container #t1.on .pa-tab-label,
.pa-diagram-container #t2.on .pa-tab-label,
.pa-diagram-container #t3.on .pa-tab-label {
    color: #06122e !important;
    font-weight: 700 !important;
}

/* Dark Typography Overrides */
.pa-diagram-container h1,
.pa-diagram-container h2,
.pa-diagram-container h3,
.pa-diagram-container h4,
.pa-diagram-container h5,
.pa-diagram-container h6,
.pa-diagram-container .ttl,
.pa-diagram-container .h-ttl,
.pa-diagram-container .s-ttl,
.pa-diagram-container .brand-pill span,
.pa-diagram-container .inline-logo-item span,
.pa-diagram-container .harness-name {
    color: #06122e !important;
    font-weight: 700 !important;
}

.pa-diagram-container p,
.pa-diagram-container .sub,
.pa-diagram-container .h-sub,
.pa-diagram-container .s-sub,
.pa-diagram-container .pa-subtitle,
.pa-diagram-container #pa-desc {
    color: #475569 !important;
}

/* Tab Bar Overrides */
.pa-diagram-container .pa-tab-bar {
    border-bottom: 1px solid rgba(6, 12, 28, 0.08) !important;
}

.pa-diagram-container .pa-tab-btn {
    border-bottom: 1px solid transparent !important;
}

.pa-diagram-container .pa-tab-btn.on {
    background: #f1f5f9 !important;
    border-radius: 8px 8px 0 0 !important;
}

.pa-diagram-container .pa-tab-btn .pa-tab-label {
    color: #64748b !important;
}

.pa-diagram-container .pa-tab-btn.on .pa-tab-label {
    color: #06122e !important;
}

.pa-diagram-container .pa-tab-btn .pa-tab-num {
    color: #94a3b8 !important;
}

.pa-diagram-container #t0.on .pa-tab-num,
.pa-diagram-container #t1.on .pa-tab-num {
    color: var(--pink) !important;
}

.pa-diagram-container #t2.on .pa-tab-num {
    color: var(--light-blue) !important;
}

.pa-diagram-container #t3.on .pa-tab-num {
    color: var(--amber) !important;
}

/* Card Overrides (Fixing ID specificity) */
.pa-diagram-container #l0.team-box,
.pa-diagram-container #l0 .team-box,
.pa-diagram-container #l1.card,
.pa-diagram-container #l2.harness-card,
.pa-diagram-container #l3.card,
.pa-diagram-container #l4.sys-card,
.pa-diagram-container .card,
.pa-diagram-container .team-box,
.pa-diagram-container .harness-card,
.pa-diagram-container .sbox,
.pa-diagram-container .hbox,
.pa-diagram-container .sys-card {
    background: #f8fafc !important;
    border: 1px solid rgba(6, 12, 28, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 12px rgba(6, 12, 28, 0.03) !important;
    color: #06122e !important;
}


.pa-diagram-container .brand-pill,
.pa-diagram-container .inline-logo-item {
    background: #f1f5f9 !important;
    border: 1px solid rgba(6, 12, 28, 0.08) !important;
}

.pa-diagram-container .llm-badge {
    background: rgba(255, 61, 138, 0.08) !important;
    border: 1px solid rgba(255, 61, 138, 0.25) !important;
}

.pa-diagram-container .div-line {
    background: rgba(6, 12, 28, 0.08) !important;
}

.pa-diagram-container .div-label {
    color: #64748b !important;
}

/* Hover States on White Canvas */
.pa-diagram-container .hbox:hover,
.pa-diagram-container .brand-pill:hover,
.pa-diagram-container .sbox:hover {
    border-color: var(--pink) !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(255, 61, 138, 0.12) !important;
}

/* Active Highlight States Overrides */
.pa-diagram-container.tab-0 #l0.team-box,
.pa-diagram-container.tab-0 #l0 .team-box {
    background: rgba(30, 64, 175, 0.08) !important;
    border-color: #1e40af !important;
}

.pa-diagram-container.tab-0 #l1.card,
.pa-diagram-container.tab-1 #l1.card {
    background: rgba(255, 61, 138, 0.08) !important;
    border-color: var(--pink) !important;
}

.pa-diagram-container.tab-0 #l2.harness-card,
.pa-diagram-container.tab-1 #l2.harness-card {
    background: rgba(255, 61, 138, 0.08) !important;
    border-color: var(--pink) !important;
}

.pa-diagram-container.tab-0 #l3.card,
.pa-diagram-container.tab-2 #l3.card {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: var(--light-blue) !important;
}

.pa-diagram-container.tab-0 #l4.sys-card,
.pa-diagram-container.tab-3 #l4.sys-card {
    background: rgba(255, 181, 71, 0.08) !important;
    border-color: var(--amber) !important;
}

.pa-diagram-container.tab-0 #l4 .sbox,
.pa-diagram-container.tab-3 #l4 .sbox {
    background: rgba(255, 181, 71, 0.08) !important;
    border-color: var(--amber) !important;
}

.pa-diagram-container.tab-0 #la3 .div-line,
.pa-diagram-container.tab-3 #la3 .div-line {
    background: var(--amber) !important;
}

.pa-diagram-container.tab-0 #la3 .div-label,
.pa-diagram-container.tab-3 #la3 .div-label {
    color: var(--amber) !important;
}