/*
 * BluPrint Audience Toggle — toggle.css
 * Clean rewrite — consolidated from 2,740-line iterative patch file
 * Approved typography spec: Dina (2026-04-13)
 * Target: ~900 lines, zero duplicate rules, minimal !important
 *
 * SECTIONS
 *  1. CSS Custom Properties (design tokens)
 *  2. Global / theme baseline (scroll-reveal, WP layout, nav z-index)
 *  3. Toggle pill UI
 *  4. Plain-mode base overrides (html/body/containers)
 *  5. Navigation overrides
 *  6. Authoritative typography spec
 *  7. Hero styling
 *  8. Card / grid layouts
 *  9. CTA sections
 * 10. FAQ sections
 * 11. Footer
 * 12. Periodic table — in-place plain-mode styling
 * 13. Plain-mode overlay structural styling
 *     13a. Overlay container
 *     13b. Hero
 *     13c. Sections / typography
 *     13d. Card grids
 *     13e. CTA
 *     13f. FAQ
 *     13g. Footer
 *     13h. Animation containers (hz, pa2, br, c2, bg)
 *     13i. C2 network diagram
 *     13j. SVG / animation color overrides
 * 14. View Transitions API
 * 15. @media prefers-reduced-motion
 * 16. Responsive breakpoints
 */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
    /* --- Fonts --- */
    --bp-font-display: "Orbitron", sans-serif;
    --bp-font-text:    "Manrope", sans-serif;

    /* --- Typography scale --- */
    --bp-size-h1:   clamp(2rem, 5vw, 4.5rem);
    --bp-size-h2:   1.6rem;
    --bp-size-h3:   1.3rem;
    --bp-size-h4:   1.1rem;
    --bp-size-body: 1rem;
    --bp-size-meta: 0.9rem;
    --bp-size-xs:   0.85rem;
    --bp-size-small: 0.875rem; /* 14px — minimum for non-cell text */

    /* --- Color palette --- */
    --bp-color-heading:  #1a1a1a;
    --bp-color-body:     #444444;
    --bp-color-meta:     #666666;
    --bp-color-link:     #0066b3;
    --bp-color-link-hov: #004d8a;
    --bp-color-bg:       #faf9f5;
    --bp-color-card-bg:  #ffffff;
    --bp-color-accent:   rgba(0, 136, 168, 1);       /* darkened cyan for light mode */
    --bp-color-accent-20: rgba(0, 136, 168, 0.20);
    --bp-color-accent-30: rgba(0, 136, 168, 0.30);
    --bp-color-accent-50: rgba(0, 136, 168, 0.50);
    --bp-color-accent-03: rgba(0, 136, 168, 0.03);

    /* --- Technical-mode cyan (dark bg) --- */
    --bp-cyan: #00d4ff;
}


/* ============================================================
   2. GLOBAL / THEME BASELINE
   ============================================================ */

/* Scroll-reveal: disable sitewide — content always visible */
.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* WP theme layout constraint removal */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
}

/* Hide WP default page title (pages use hero h1) */
h1.wp-block-post-title,
.wp-block-post-title,
.entry-title {
    display: none !important;
}

/* Periodic table — spacer hole cells are invisible */
.pt-cell--hole {
    visibility: hidden !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* Periodic table 3D GPU promotion baseline — both modes (no !important; JS may override) */
.pt-cell:not(.pt-cell--hole) {
    transform: perspective(800px) translate3d(0, 0, -1px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s ease-out,
                border-color 0.3s ease;
}

/* Hide sparse Compute series row in periodic table */
.pt-series-break,
.pt-series-label[style*="9c27b0"],
.pt-cell--s[style*="9c27b0"] {
    display: none !important;
}

/* Division banner — hidden globally (content lives in overlay footer) */
.bw-division-banner {
    display: none !important;
}

/* CTA blocks — centered single-column layout */
.bp-cta,
.bp-cta-section,
[class*="cta-section"],
section:has(> .bp-cta) {
    text-align: center !important;
    display: block !important;
}

.bp-cta h2,
.bp-cta-section h2,
[class*="ready-to"] h2 {
    text-align: center !important;
}

.bp-cta p,
.bp-cta-section p {
    text-align: center !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.bp-cta a.btn,
.bp-cta-section a.btn,
.bp-cta .btn,
a[href*="contact"] {
    display: inline-block !important;
    margin: 1rem auto !important;
}

/* FAQ borders removed globally (JS uses inline !important; this is the CSS backup) */
.bp-faq-item,
details.bp-faq-item,
.bp-faq-item summary,
details.bp-faq-item summary,
.bp-faq-q {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
}

/* Smooth color transitions on mode switch — scoped to elements that change */
body,
html,
.wp-site-blocks,
.wp-block-group,
main,
header,
.bp-hn,
footer {
    transition: background-color 1400ms cubic-bezier(0.4, 0, 0.2, 1), color 1400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Pause button on tagline — invisible until hover */
#tagline-pause {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.hero-tagline:hover #tagline-pause {
    opacity: 0.5 !important;
}


/* ============================================================
   3. TOGGLE PILL UI
   ============================================================ */

#audience-toggle {
    position: fixed !important;
    top: 16px !important;
    left: 180px !important;     /* AS-794 fallback if JS relocate hasn't run yet (flash-of-position guard); JS moves it into .bp-hn as 3rd flex child + adds .audience-toggle--in-nav class. Per Dina diagnosis MM npcsa7q8jbyfjx8c16tkzqne6c. */
    right: auto !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    cursor: pointer !important;
    user-select: none !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 0.6rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 0.4 !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    transition: opacity 400ms ease, background 400ms ease !important;
}

/* AS-794 / BLUPROVAL-11 (2026-05-18): in-nav state — added by toggle.js after DOM-ready
   relocation. Toggle sits between .bp-hn__logo and .bp-hn__links as 3rd flex child of .bp-hn.
   v2 (Gary `p4ouku3x4fyt8dkir1hendef9h`): show short labels "Tech" / "Plain" so users can tell
   what the toggle does without hovering (title-attr-only was not discoverable enough). */
#audience-toggle.audience-toggle--in-nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 0 0 0.75rem !important;
    padding: 3px 4px !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    font-size: 0.6rem !important;
}

#audience-toggle.audience-toggle--in-nav .toggle-label {
    color: #c8c8d6 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

html.audience-plain #audience-toggle.audience-toggle--in-nav .toggle-label {
    color: #333 !important;
}

#audience-toggle:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.audience-plain #audience-toggle {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
    opacity: 0.4 !important;
}

html.audience-plain #audience-toggle:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Toggle track */
.toggle-track {
    width: 28px !important;
    height: 16px !important;
    min-width: 28px !important;
    min-height: 16px !important;
    border-radius: 10px !important;
    background: rgba(0, 212, 255, 0.3) !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background 3000ms ease;
}

html.audience-plain .toggle-track {
    background: rgba(0, 102, 179, 0.3) !important;
}

/* Toggle thumb */
.toggle-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: var(--bp-cyan) !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 800ms ease, background 3000ms ease;
}

html.audience-plain .toggle-thumb {
    transform: translateX(12px) !important;
    background: var(--bp-color-link) !important;
}

/* Toggle labels */
.toggle-label {
    color: #8888aa !important;
    font-weight: 400 !important;
    font-size: 0.6rem !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: color 3000ms ease;
}

.toggle-label--technical {
    color: var(--bp-cyan) !important;
}

html.audience-plain .toggle-label--technical {
    color: #999 !important;
}

html.audience-plain .toggle-label--plain {
    color: var(--bp-color-link) !important;
}


/* ============================================================
   4. PLAIN-MODE BASE OVERRIDES
   ============================================================ */

html.audience-plain,
html.audience-plain body,
html.audience-plain .wp-site-blocks,
html.audience-plain main,
html.audience-plain article,
html.audience-plain .wp-block-group,
html.audience-plain .entry-content,
html.audience-plain .wp-block-post-content {
    background: var(--bp-color-bg) !important;
    color: var(--bp-color-heading) !important;
}

/* Override animated grid / circuit board backgrounds */
html.audience-plain [class*="grid-bg"],
html.audience-plain .animated-grid,
html.audience-plain body::before,
html.audience-plain body::after {
    background: none !important;
    opacity: 0 !important;
}

/* Plain mode: generic link colours */
html.audience-plain a:not(.bp-cta-btn) {
    color: var(--bp-color-link) !important;
}

html.audience-plain a:not(.bp-cta-btn):hover {
    color: var(--bp-color-link-hov) !important;
}

/* Card link / glow-link colour */
html.audience-plain .card-link,
html.audience-plain .glow-link {
    color: var(--bp-color-link) !important;
}

/* Cards — cyan accent border */
html.audience-plain .bp-card,
#bluprint-plain-overlay .bp-card {
    background: var(--bp-color-card-bg) !important;
    border: 1px solid var(--bp-color-accent-20) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.audience-plain .bp-card:hover,
#bluprint-plain-overlay .bp-card:hover {
    border-color: var(--bp-color-accent-50) !important;
    box-shadow: 0 4px 20px rgba(0, 136, 168, 0.1) !important;
}

html.audience-plain .bp-feature-card,
#bluprint-plain-overlay .bp-feature-card {
    background: var(--bp-color-card-bg) !important;
    border: 1px solid var(--bp-color-accent-20) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.audience-plain .bp-team-card,
#bluprint-plain-overlay .bp-team-card {
    background: var(--bp-color-card-bg) !important;
    border: 1px solid rgba(0, 136, 168, 0.15) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

html.audience-plain .bp-team-card:hover,
#bluprint-plain-overlay .bp-team-card:hover {
    box-shadow: 0 4px 16px rgba(0, 102, 179, 0.1) !important;
    transform: translateY(-2px) !important;
}

html.audience-plain .capability-card,
html.audience-plain .bp-arch-box,
#bluprint-plain-overlay .capability-card,
#bluprint-plain-overlay .bp-arch-box {
    border: 1px solid var(--bp-color-accent-20) !important;
}

/* Author cards */
html.audience-plain .author-card,
html.audience-plain .bp-author-card,
#bluprint-plain-overlay .author-card,
#bluprint-plain-overlay .bp-author-card {
    background: var(--bp-color-card-bg) !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Blog search */
html.audience-plain .blog-search input,
html.audience-plain input[type="search"],
#bluprint-plain-overlay .blog-search input,
#bluprint-plain-overlay input[type="search"] {
    border: 1px solid var(--bp-color-accent-30) !important;
    background: var(--bp-color-card-bg) !important;
    color: var(--bp-color-heading) !important;
}

html.audience-plain .blog-search input::placeholder,
#bluprint-plain-overlay input[type="search"]::placeholder {
    color: #999 !important;
}

/* Scroll-reveal: disabled in plain mode (already sitewide above, belt+suspenders) */
html.audience-plain .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* ============================================================
   5. NAVIGATION OVERRIDES
   ============================================================ */

/* Nav always fixed and max z — unaffected by overlay */
.bp-hn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
}

/* Nav link spacing */
.bp-hn__links {
    gap: 0.5rem !important;
}

.bp-hn__links a,
.bp-hn__links .bp-hn__dropdown-toggle {
    padding: 0.4rem 0.6rem !important;
}

/* Dropdown base — always solid, above everything */
.bp-hn__dropdown {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 0 !important;
    z-index: 2147483647 !important;
    background: var(--bp-color-card-bg) !important;
    border: 1px solid #999 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px !important;
    padding: 4px 0 !important;
}

/* Dropdown trigger */
.bp-hn__links > li {
    position: relative !important;
}

.bp-hn__links > li:hover > .bp-hn__dropdown,
.bp-hn__dropdown.open {
    display: block !important;
    z-index: 2147483647 !important;
}

/* Plain-mode nav — white background, no backdrop-filter (avoids stacking context trap) */
html.audience-plain .bp-hn {
    background: rgba(255, 255, 255, 1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.audience-plain header.wp-block-template-part {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
}

html.audience-plain .bp-hn a,
html.audience-plain .bp-hn span,
html.audience-plain header a {
    color: var(--bp-color-heading) !important;
}

html.audience-plain .bp-hn a:hover,
html.audience-plain header a:hover {
    color: var(--bp-color-link) !important;
}

/* Plain-mode "AI" accent in logo */
html.audience-plain .bp-hn__logo .bp-accent {
    color: var(--bp-color-link) !important;
}

/* Hide original nav dropdown in plain mode — cloned dropdown handles it */
html.audience-plain .bp-hn .bp-hn__dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Plain-mode cloned dropdown styles */
html.audience-plain .bp-hn__dropdown.clone-dropdown,
html.audience-plain .bp-hn__links > li:hover > .bp-hn__dropdown.clone-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

html.audience-plain .bp-hn__dropdown a {
    color: #333 !important;
    display: block !important;
    padding: 8px 16px !important;
}

html.audience-plain .bp-hn__dropdown a:hover {
    color: var(--bp-color-link) !important;
    background: rgba(0, 102, 179, 0.05) !important;
}


/* ============================================================
   6. AUTHORITATIVE TYPOGRAPHY SPEC
   Per brand-bluprint.md, Dina team-lead approved 2026-04-13
   Single source of truth — overrides all earlier plugin rules
   ============================================================ */

html.audience-plain h1,
#bluprint-plain-overlay h1 {
    font-family: var(--bp-font-display) !important;
    font-size: var(--bp-size-h1) !important;
    font-weight: 700 !important;
    color: var(--bp-color-heading) !important;
    line-height: 1.1 !important;
}

html.audience-plain h2,
#bluprint-plain-overlay h2 {
    font-family: var(--bp-font-display) !important;
    font-size: var(--bp-size-h2) !important;
    font-weight: 600 !important;
    color: var(--bp-color-heading) !important;
    line-height: 1.25 !important;
}

html.audience-plain h3,
#bluprint-plain-overlay h3 {
    font-family: var(--bp-font-display) !important;
    font-size: var(--bp-size-h3) !important;
    font-weight: 600 !important;
    color: var(--bp-color-heading) !important;
    line-height: 1.3 !important;
}

html.audience-plain h4,
#bluprint-plain-overlay h4 {
    font-family: var(--bp-font-text) !important;
    font-size: var(--bp-size-h4) !important;
    font-weight: 600 !important;
    color: var(--bp-color-heading) !important;
    line-height: 1.3 !important;
}

html.audience-plain p,
#bluprint-plain-overlay p {
    font-family: var(--bp-font-text) !important;
    font-size: var(--bp-size-body) !important;
    font-weight: 400 !important;
    color: var(--bp-color-body) !important;
    line-height: 1.7 !important;
}

/* Sub-section headings — smaller scale (detail-section, nested sections) */
html.audience-plain .detail-section h2,
html.audience-plain .detail-section h3,
#bluprint-plain-overlay .detail-section h2,
#bluprint-plain-overlay .detail-section h3,
#bluprint-plain-overlay .bp-section .bp-section h2,
#bluprint-plain-overlay .ce-subhead + .bp-section h2 {
    font-size: var(--bp-size-h3) !important;
}

/* Meta / small text */
html.audience-plain .card-tagline,
html.audience-plain .bp-footer,
#bluprint-plain-overlay .card-tagline,
#bluprint-plain-overlay .bp-footer {
    font-size: var(--bp-size-meta) !important;
    color: var(--bp-color-meta) !important;
}

/* CTA button font */
html.audience-plain .bp-cta-btn,
#bluprint-plain-overlay .bp-cta-btn {
    font-family: var(--bp-font-text) !important;
    font-size: var(--bp-size-body) !important;
    font-weight: 600 !important;
}

/* Plain-mode link colour (non-button) */
html.audience-plain a:not(.bp-cta-btn),
#bluprint-plain-overlay a:not(.bp-cta-btn) {
    color: var(--bp-color-link) !important;
}


/* ============================================================
   7. HERO STYLING
   ============================================================ */

/* Plain-mode in-place hero (technical page with .hero class) */
html.audience-plain .hero {
    background: linear-gradient(135deg, var(--bp-color-bg) 0%, #e8e6dc 100%) !important;
}

html.audience-plain .hero-overlay {
    background: transparent !important;
}

/* Hero h1 — plain-mode: remove text-clip gradient, readable dark */
html.audience-plain .hero h1,
html.audience-plain .hero-content h1,
html.audience-plain .hero-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: var(--bp-color-heading) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

html.audience-plain .hero-tagline {
    color: #555 !important;
}

/* Hero h1 sizing consistent in both modes */
.hero-content h1,
#bluprint-plain-overlay .hero-content h1 {
    font-family: var(--bp-font-display) !important;
    font-size: var(--bp-size-h1) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


/* ============================================================
   8. CARD / GRID LAYOUTS (site-wide plain-mode)
   ============================================================ */

/* These are global plain-mode overrides for in-page content.
   Overlay-specific layout lives in section 13. */

html.audience-plain .pt-grid {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Section text centering */
html.audience-plain .bp-section > p,
html.audience-plain .hero-tagline,
#bluprint-plain-overlay .bp-section > p,
#bluprint-plain-overlay .hero-tagline {
    text-align: center !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html.audience-plain .bp-section > h2 + p,
#bluprint-plain-overlay .bp-section > h2 + p {
    text-align: center !important;
}


/* ============================================================
   9. CTA SECTIONS (plain-mode overlay — font/colour)
   ============================================================ */

#bluprint-plain-overlay .bp-cta h2,
html.audience-plain .bp-cta h2 {
    font-family: var(--bp-font-display) !important;
    font-size: var(--bp-size-h2) !important;
    text-align: center !important;
}

#bluprint-plain-overlay .bp-cta p,
html.audience-plain .bp-cta p {
    font-size: var(--bp-size-body) !important;
    color: var(--bp-color-body) !important;
}


/* ============================================================
   10. FAQ SECTIONS
   ============================================================ */

/* Border removal — plain mode and overlay (JS uses inline !important on JS-driven items;
   this covers everything else) */
html.audience-plain .bp-faq-item,
html.audience-plain details.bp-faq-item,
html.audience-plain .bp-faq-q,
html.audience-plain summary,
#bluprint-plain-overlay .bp-faq-item,
#bluprint-plain-overlay details.bp-faq-item,
#bluprint-plain-overlay .bp-faq-q,
#bluprint-plain-overlay summary,
#bluprint-plain-overlay details {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* FAQ summary chevron colour */
#bluprint-plain-overlay .bp-faq-q::after,
#bluprint-plain-overlay summary::after {
    color: var(--bp-color-link) !important;
}


/* ============================================================
   11. FOOTER
   ============================================================ */

/* Hide WP theme footer shell in plain mode (overlay has the real footer) */
html.audience-plain footer.wp-block-template-part {
    display: none !important;
}

/* Only ONE footer in plain mode — hide any .bp-footer outside the overlay */
html.audience-plain .bp-footer:not(#bluprint-plain-overlay .bp-footer) {
    display: none !important;
}

/* Overlay footer always visible */
#bluprint-plain-overlay > .bp-footer,
#bluprint-plain-overlay .bp-footer {
    display: block !important;
}

/* Plain-mode footer in-page hairline */
html.audience-plain .bp-footer {
    border-top: 1px solid rgba(0, 136, 168, 0.1) !important;
}


/* ============================================================
   12. PERIODIC TABLE — IN-PLACE PLAIN-MODE STYLING
   ============================================================ */

/* Cell base */
html.audience-plain .pt-cell,
html.audience-plain .pt-cell--s {
    transform: translate3d(0, 0, 0) !important;
    will-change: transform, box-shadow !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s ease-out,
                border-color 0.3s ease !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--bp-color-heading) !important;
}

/* Cell hover pop */
html.audience-plain .pt-cell:hover:not(.pt-cell--hole),
html.audience-plain .pt-cell--s:hover {
    transform: scale(1.04) translateY(-2px) translate3d(0, 0, 0) !important;
    box-shadow: 0 8px 25px rgba(0, 136, 168, 0.2) !important;
    border-color: var(--bp-color-accent-50) !important;
    z-index: 10 !important;
}

/* Cell typography */
html.audience-plain .pt-sym {
    text-shadow: none !important;
}

html.audience-plain .pt-nm {
    display: block !important;
    color: #555 !important;
}

html.audience-plain .pt-header {
    color: var(--bp-color-link) !important;
}

html.audience-plain .pt-row-label {
    color: #333 !important;
}

html.audience-plain .pt-corner {
    color: var(--bp-color-meta) !important;
}

/* Cell popup */
html.audience-plain .pt-pop {
    display: none !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 300px !important;
    z-index: 50 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid var(--bp-color-accent-20) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    font-size: var(--bp-size-xs) !important;
    color: #333 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(16px) !important;
}

html.audience-plain .pt-cell:hover .pt-pop {
    display: block !important;
    pointer-events: auto !important;
}

html.audience-plain .pt-pop strong {
    color: var(--bp-color-heading) !important;
    font-size: 0.95rem !important;
}

html.audience-plain .pt-pop p {
    margin: 0.4rem 0 !important;
    line-height: 1.45 !important;
    color: var(--bp-color-body) !important;
}

html.audience-plain .pt-pop-meta {
    display: block !important;
    font-size: 0.65rem !important;
    color: #888 !important;
    margin-bottom: 0.3rem !important;
}

/* Edge-alignment for cells near table border */
html.audience-plain .pt-cell:nth-child(-n+2) .pt-pop {
    left: 0 !important;
    transform: none !important;
}

html.audience-plain .pt-cell:nth-last-child(-n+2) .pt-pop {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

html.audience-plain .pt-cell--s .pt-pop {
    left: 0 !important;
    transform: none !important;
}

/* Hide technical external links in plain-mode popups */
html.audience-plain .pt-pop-ex,
html.audience-plain .pt-pop a[href*="github"],
html.audience-plain .pt-pop a[href*="docs."],
html.audience-plain .pt-pop a[target="_blank"] {
    display: none !important;
}

/* Hide cells with data-tech-display attribute in plain mode */
html.audience-plain .pt-cell[data-tech-display] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ============================================================
   13. PLAIN-MODE OVERLAY — STRUCTURAL STYLING
   ============================================================ */


/* -----------------------------------------------------------
   13a. Overlay container
   ----------------------------------------------------------- */

#bluprint-plain-overlay {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 3.75rem !important;    /* clears fixed nav (banner hidden) */
    margin-left: auto !important;
    margin-right: auto !important;
    background: var(--bp-color-bg) !important;
    overflow: clip !important;
    overflow-clip-margin: 0px !important;
}

/* Hide WP auto-p / br injected directly into grids */
#bluprint-plain-overlay .bp-grid > p,
#bluprint-plain-overlay .bp-feature-grid > p,
#bluprint-plain-overlay .bp-grid > br,
#bluprint-plain-overlay .bp-feature-grid > br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* Fix wpautop extra spacing */
#bluprint-plain-overlay p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

#bluprint-plain-overlay br + br {
    display: none !important;
}

#bluprint-plain-overlay .blog-body p,
#bluprint-plain-overlay article p {
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
}

/* Reset any z-index set by child elements (inherit from stacking context) */
#bluprint-plain-overlay * {
    z-index: auto;
}

/* SVG overflow visible */
#bluprint-plain-overlay svg {
    overflow: visible !important;
}

/* All animation containers — correct dimensions and positioning */
#bluprint-plain-overlay .c2-net,
#bluprint-plain-overlay .br-anim,
#bluprint-plain-overlay [class*="-anim"],
#bluprint-plain-overlay [class*="-net"] {
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
}


/* -----------------------------------------------------------
   13b. Hero
   ----------------------------------------------------------- */

#bluprint-plain-overlay .hero {
    position: relative !important;
    z-index: 0 !important;
    min-height: 30vh !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--bp-color-bg) 0%, #e8e6dc 100%) !important;
    background-size: cover !important;
    padding: 3rem 2rem 2rem !important;
    overflow: hidden !important;
}

#bluprint-plain-overlay .hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    background: rgba(250, 249, 245, 0.85) !important;
}

#bluprint-plain-overlay .hero-content {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    text-align: center !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

#bluprint-plain-overlay .hero-content h1 {
    color: var(--bp-color-heading) !important;
    margin-bottom: 0.5rem !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

#bluprint-plain-overlay .hero-tagline {
    font-size: 1.1rem !important;
    color: #555 !important;
    line-height: 1.5 !important;
    position: relative !important;
}

/* Periodic grid scale origin */
#bluprint-plain-overlay .periodic-grid,
#bluprint-plain-overlay [class*="periodic"] {
    transform-origin: top left;
    max-width: 100% !important;
    overflow-x: auto !important;
}


/* -----------------------------------------------------------
   13c. Sections / typography
   ----------------------------------------------------------- */

#bluprint-plain-overlay .bp-section {
    position: relative !important;
    overflow: visible !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 3rem 2rem !important;
}

#bluprint-plain-overlay .bp-section h2 {
    margin-bottom: 1.5rem !important;
    text-align: center !important;
}

#bluprint-plain-overlay .bp-section h3 {
    margin-bottom: 0.5rem !important;
}

#bluprint-plain-overlay .bp-section p {
    line-height: 1.7 !important;
}

/* Subhead style (intro line under h2) */
#bluprint-plain-overlay .ce-subhead {
    font-size: var(--bp-size-body) !important;
    color: var(--bp-color-meta) !important;
    text-align: center !important;
    max-width: 700px !important;
    margin: -0.5rem auto 1.5rem !important;
}

/* General links */
#bluprint-plain-overlay a {
    color: var(--bp-color-link) !important;
    text-decoration: none !important;
}

#bluprint-plain-overlay a:hover {
    color: var(--bp-color-link-hov) !important;
}

/* Lists */
#bluprint-plain-overlay ul,
#bluprint-plain-overlay ol {
    color: var(--bp-color-body) !important;
    padding-left: 1.5rem !important;
    margin: 0.75rem 0 !important;
}

#bluprint-plain-overlay li {
    margin-bottom: 0.4rem !important;
    line-height: 1.6 !important;
}


/* -----------------------------------------------------------
   13d. Card grids
   ----------------------------------------------------------- */

/* Main product card grid — 3 columns */
#bluprint-plain-overlay .bp-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

/* Product / bp-card */
#bluprint-plain-overlay .product-card,
#bluprint-plain-overlay .bp-card {
    background: var(--bp-color-card-bg) !important;
    border: 1px solid var(--bp-color-accent-20) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    text-decoration: none !important;
    color: var(--bp-color-heading) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}

#bluprint-plain-overlay .product-card:hover,
#bluprint-plain-overlay .bp-card:hover {
    border-color: var(--bp-color-accent-50) !important;
    box-shadow: 0 4px 20px rgba(0, 136, 168, 0.1) !important;
}

/* Card icon */
#bluprint-plain-overlay .card-icon-wrap {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 1rem !important;
}

#bluprint-plain-overlay .card-icon-svg {
    width: 48px !important;
    height: 48px !important;
}

/* Card text */
#bluprint-plain-overlay .card-tagline {
    font-size: var(--bp-size-xs) !important;
    color: var(--bp-color-link) !important;
    font-weight: 500 !important;
    margin-bottom: 0.75rem !important;
}

#bluprint-plain-overlay .card-desc {
    font-size: var(--bp-size-meta) !important;
    color: #555 !important;
    line-height: 1.6 !important;
    flex-grow: 1 !important;
}

#bluprint-plain-overlay .card-link {
    color: var(--bp-color-link) !important;
    font-weight: 500 !important;
    font-size: var(--bp-size-meta) !important;
    margin-top: 1rem !important;
    display: inline-block !important;
    text-decoration: none !important;
}

#bluprint-plain-overlay .card-link:hover {
    color: var(--bp-color-link-hov) !important;
}

/* Feature grid */
#bluprint-plain-overlay .bp-feature-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
}

#bluprint-plain-overlay .bp-feature-grid > p,
#bluprint-plain-overlay .bp-feature-grid > br {
    display: none !important;
}

/* Capability grid — 3 balanced columns */
#bluprint-plain-overlay .capability-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin-top: 1.5rem !important;
}

#bluprint-plain-overlay .capability-card {
    background: var(--bp-color-card-bg) !important;
    border: 1px solid var(--bp-color-accent-20) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}

/* Detail grid (AI Foundation) */
#bluprint-plain-overlay .detail-section {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}

#bluprint-plain-overlay .detail-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
}

#bluprint-plain-overlay .detail-card {
    background: var(--bp-color-card-bg) !important;
    border: 1px solid rgba(0, 136, 168, 0.15) !important;
    border-radius: 8px !important;
    padding: 1.25rem !important;
}

/* Use-cases grid (SF) */
#bluprint-plain-overlay .bp-use-cases {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-top: 1rem !important;
}

#bluprint-plain-overlay .bp-use-case {
    background: var(--bp-color-card-bg) !important;
    border: 1px solid rgba(0, 136, 168, 0.15) !important;
    border-radius: 10px !important;
    padding: 1.25rem !important;
}

/* Team grid */
#bluprint-plain-overlay .bp-team-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.25rem !important;
}

#bluprint-plain-overlay .bp-team-grid > p,
#bluprint-plain-overlay .bp-team-grid > br {
    display: none !important;
}

/* Author bio — horizontal layout */
#bluprint-plain-overlay .author-bio,
#bluprint-plain-overlay .bp-author {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

#bluprint-plain-overlay .author-bio > p,
#bluprint-plain-overlay .bp-author > p {
    display: none !important;
}

#bluprint-plain-overlay .author-bio img,
#bluprint-plain-overlay .bp-author img,
#bluprint-plain-overlay .author-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
}

/* Consistent card/body text colours */
#bluprint-plain-overlay h3,
#bluprint-plain-overlay h4 {
    color: var(--bp-color-heading) !important;
}

#bluprint-plain-overlay p,
#bluprint-plain-overlay .bp-section p,
#bluprint-plain-overlay .capability-card p,
#bluprint-plain-overlay .bp-use-case p,
#bluprint-plain-overlay .detail-card p {
    color: var(--bp-color-body) !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
}


/* -----------------------------------------------------------
   13e. CTA section
   ----------------------------------------------------------- */

#bluprint-plain-overlay .bp-cta {
    text-align: center !important;
    padding: 3rem 2rem !important;
    max-width: 700px !important;
    margin: 2rem auto !important;
}

#bluprint-plain-overlay .bp-cta p {
    text-align: center !important;
    max-width: 600px !important;
    margin: 0.5rem auto !important;
}

#bluprint-plain-overlay .bp-cta-btn {
    display: inline-block !important;
    background: var(--bp-color-link) !important;
    color: var(--bp-color-card-bg) !important;
    padding: 0.75rem 2rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    margin-top: 1rem !important;
    transition: background 0.3s !important;
}

#bluprint-plain-overlay .bp-cta-btn:hover {
    background: var(--bp-color-link-hov) !important;
}


/* -----------------------------------------------------------
   13f. FAQ section
   ----------------------------------------------------------- */

#bluprint-plain-overlay .bp-faq-section {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}

#bluprint-plain-overlay .bp-faq-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#bluprint-plain-overlay .bp-faq-item {
    border: none !important;
    padding: 0.75rem 0 !important;
}

#bluprint-plain-overlay .bp-faq-item summary {
    cursor: pointer !important;
    font-weight: 600 !important;
    color: var(--bp-color-heading) !important;
    font-size: var(--bp-size-body) !important;
    padding: 0.5rem 0 !important;
    border: none !important;
}

#bluprint-plain-overlay .bp-faq-item p {
    color: #555 !important;
    margin-top: 0.5rem !important;
}

#bluprint-plain-overlay hr {
    border-color: rgba(0, 0, 0, 0.04) !important;
}

#bluprint-plain-overlay section {
    border: none !important;
}


/* -----------------------------------------------------------
   13g. Overlay footer
   ----------------------------------------------------------- */

#bluprint-plain-overlay .bp-footer {
    background: var(--bp-color-bg) !important;
    border-top: 1px solid rgba(0, 136, 168, 0.1) !important;
    padding: 2rem !important;
    text-align: center !important;
    color: var(--bp-color-meta) !important;
    margin-top: 2rem !important;
}

#bluprint-plain-overlay .bp-footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem 1rem !important;
    margin-top: 0.75rem !important;
}

#bluprint-plain-overlay .bp-footer-links a {
    color: var(--bp-color-link) !important;
    text-decoration: none !important;
    font-size: var(--bp-size-xs) !important;
}

#bluprint-plain-overlay .bp-footer-links a:hover {
    color: var(--bp-color-link-hov) !important;
}


/* -----------------------------------------------------------
   13h. Animation containers (hz / pa2 / br / bg)
   ----------------------------------------------------------- */

/* Shared container base */
#bluprint-plain-overlay .hz-anim,
#bluprint-plain-overlay .pa2-anim,
#bluprint-plain-overlay .br-anim,
#bluprint-plain-overlay .bg-anim-wrap {
    position: relative !important;
    margin: 2rem auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: rgba(0, 102, 179, 0.03) !important;
    padding: 2rem !important;
}

#bluprint-plain-overlay .hz-anim {
    padding: 2.5rem 2rem !important;
}

/* Reveal always on in overlay */
#bluprint-plain-overlay .reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* --- SF: Horizontal pipeline (hz) --- */
#bluprint-plain-overlay .hz-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    position: relative !important;
    min-height: 80px !important;
}

#bluprint-plain-overlay .hz-node {
    background: var(--bp-color-card-bg) !important;
    border: 1.5px solid var(--bp-color-accent-30) !important;
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
    text-align: center !important;
    min-width: 140px !important;
    max-width: 180px !important;
    z-index: 2 !important;
    position: relative !important;
}

#bluprint-plain-overlay .hz-node h4 {
    font-size: 0.95rem !important;
    margin: 0 0 0.2rem 0 !important;
}

#bluprint-plain-overlay .hz-node p {
    font-size: 0.75rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    max-width: none !important;
}

#bluprint-plain-overlay .hz-node .hz-icon {
    margin-bottom: 0.4rem !important;
}

#bluprint-plain-overlay .hz-node .hz-icon svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    margin: 0 auto !important;
}

#bluprint-plain-overlay .hz-node.active {
    border-color: rgba(0, 136, 168, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 136, 168, 0.2) !important;
    background: rgba(0, 136, 168, 0.05) !important;
}

#bluprint-plain-overlay .hz-node.done {
    border-color: rgba(0, 180, 100, 0.5) !important;
    box-shadow: 0 0 12px rgba(0, 180, 100, 0.15) !important;
    background: rgba(0, 180, 100, 0.05) !important;
}

#bluprint-plain-overlay .hz-track {
    flex: 1 !important;
    height: 2px !important;
    position: relative !important;
    z-index: 1 !important;
    background: rgba(0, 136, 168, 0.15) !important;
    min-width: 30px !important;
}

/* hz-dot opacity NOT !important — JS animation must override it */
#bluprint-plain-overlay .hz-dot {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #0088a8 !important;
    opacity: 0;
    top: -3px !important;
    box-shadow: 0 0 4px rgba(0, 136, 168, 0.5) !important;
}

#bluprint-plain-overlay .hz-label {
    text-align: center !important;
    color: var(--bp-color-meta) !important;
    font-size: var(--bp-size-meta) !important;
    margin-top: 1rem !important;
    min-height: 1.2em !important;
}

/* --- PA: Fan-out pipeline (pa2) --- */
#bluprint-plain-overlay .pa2-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin: 0.5rem 0 !important;
}

#bluprint-plain-overlay .pa2-node {
    background: var(--bp-color-card-bg) !important;
    border: 1.5px solid var(--bp-color-accent-30) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    min-width: 100px !important;
    position: relative !important;
}

#bluprint-plain-overlay .pa2-label,
#bluprint-plain-overlay .pa2-fan-label {
    color: #333 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

#bluprint-plain-overlay .pa2-ico {
    font-size: 1.2rem !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
}

#bluprint-plain-overlay .pa2-track {
    width: 2px !important;
    height: 20px !important;
    background: rgba(0, 136, 168, 0.15) !important;
    margin: 0 auto !important;
}

#bluprint-plain-overlay .pa2-lines {
    position: relative !important;
    height: 30px !important;
}

#bluprint-plain-overlay .pa2-fan {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

#bluprint-plain-overlay .pa2-teams {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

/* --- Research: Branch animation (br) --- */
#bluprint-plain-overlay .br-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin: 0.5rem 0 !important;
}

#bluprint-plain-overlay .br-node {
    background: var(--bp-color-card-bg) !important;
    border: 1.5px solid var(--bp-color-accent-30) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    min-width: 100px !important;
}

#bluprint-plain-overlay .br-node.active,
html.audience-plain .br-node.active,
html.audience-plain [id^="br-n"].active {
    border-color: rgba(0, 136, 168, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 136, 168, 0.2) !important;
    background: rgba(0, 136, 168, 0.05) !important;
}

#bluprint-plain-overlay .br-node.done,
html.audience-plain .br-node.done,
html.audience-plain [id^="br-n"].done {
    border-color: rgba(0, 180, 100, 0.5) !important;
    box-shadow: 0 0 12px rgba(0, 180, 100, 0.15) !important;
    background: rgba(0, 180, 100, 0.05) !important;
}

#bluprint-plain-overlay .br-label,
html.audience-plain .br-label {
    text-align: center !important;
    color: #555 !important;
    font-size: var(--bp-size-meta) !important;
    margin-top: 1rem !important;
    transition: opacity 0.4s ease !important;
}

#bluprint-plain-overlay .br-icon {
    font-size: 1.2rem !important;
    margin-bottom: 0.25rem !important;
}

#bluprint-plain-overlay .br-track {
    width: 4px !important;
    height: 20px !important;
    background: rgba(0, 136, 168, 0.15) !important;
    margin: 0 auto !important;
}

#bluprint-plain-overlay .br-agents-grid {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    margin: 0.5rem 0 !important;
}

#bluprint-plain-overlay .br-agent {
    background: var(--bp-color-card-bg) !important;
    border: 1px solid var(--bp-color-accent-20) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    color: #333 !important;
}

#bluprint-plain-overlay .br-fan-lines-top,
#bluprint-plain-overlay .br-fan-lines-bottom,
#bluprint-plain-overlay .br-fan-area,
#bluprint-plain-overlay .br-fan-line,
#bluprint-plain-overlay .br-parallel-label {
    display: block !important;
}

/* Researching container glow */
#bluprint-plain-overlay .br-anim.researching,
html.audience-plain .br-anim.researching,
html.audience-plain #br-hz.researching {
    box-shadow: inset 0 0 30px rgba(0, 136, 168, 0.08) !important;
}

/* --- AI Foundation: Build graph (bg) --- */
#bluprint-plain-overlay .bg-scene {
    position: relative !important;
}

#bluprint-plain-overlay .bg-node {
    background: var(--bp-color-card-bg) !important;
    border: 1.5px solid var(--bp-color-accent-30) !important;
    border-radius: 10px !important;
    padding: 0.5rem 0.75rem !important;
    text-align: center !important;
    position: relative !important;
}

#bluprint-plain-overlay .bg-node-label,
#bluprint-plain-overlay .bg-scene-label,
#bluprint-plain-overlay .bg-phase-label {
    color: #333 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* Process flow row (generic) */
#bluprint-plain-overlay .hz-icon {
    font-size: 1.5rem !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}


/* -----------------------------------------------------------
   13i. C2 network diagram
   ----------------------------------------------------------- */

#bluprint-plain-overlay .c2-net,
html.audience-plain .c2-net {
    position: relative !important;
    height: 500px !important;
    border-radius: 12px !important;
    background: rgba(0, 136, 168, 0.03) !important;
    border: 1px solid rgba(0, 136, 168, 0.1) !important;
    overflow: hidden !important;
    margin: 2rem auto !important;
}

#bluprint-plain-overlay .c2-n,
html.audience-plain .c2-n {
    position: absolute !important;
    background: var(--bp-color-card-bg) !important;
    border: 1.5px solid var(--bp-color-accent-20) !important;
    border-radius: 10px !important;
    padding: 0.85rem 1rem !important;
    text-align: center !important;
    width: 120px !important;
    z-index: 2 !important;
}

#bluprint-plain-overlay .c2-n.server,
html.audience-plain .c2-n.server {
    width: 140px !important;
    border-color: rgba(0, 136, 168, 0.4) !important;
    box-shadow: 0 0 15px rgba(0, 136, 168, 0.1) !important;
}

/* Node text */
#bluprint-plain-overlay .c2-n h4,
html.audience-plain .c2-n h4 {
    font-size: 0.85rem !important;
    margin: 0 0 0.1rem 0 !important;
}

#bluprint-plain-overlay .c2-n p,
html.audience-plain .c2-n p {
    font-size: 0.65rem !important;
    margin: 0 !important;
}

/* Node state colours */
#bluprint-plain-overlay .c2-n.glow-cyan,
html.audience-plain .c2-n.glow-cyan {
    border-color: var(--bp-color-link) !important;
    box-shadow: 0 2px 8px rgba(0, 102, 179, 0.15) !important;
}

#bluprint-plain-overlay .c2-n.glow-green,
html.audience-plain .c2-n.glow-green {
    border-color: #00a855 !important;
    box-shadow: 0 2px 8px rgba(0, 168, 85, 0.15) !important;
}

#bluprint-plain-overlay .c2-n.glow-purple,
html.audience-plain .c2-n.glow-purple {
    border-color: #6b4c93 !important;
    box-shadow: 0 2px 8px rgba(107, 76, 147, 0.15) !important;
}

/* Connection lines SVG layer */
#bluprint-plain-overlay .c2-lines,
html.audience-plain .c2-lines {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

#bluprint-plain-overlay .c2-lines line,
html.audience-plain .c2-lines line {
    stroke: rgba(0, 136, 168, 0.15) !important;
    stroke-width: 1.5 !important;
    stroke-dasharray: 4 4 !important;
}

/* Network label */
#bluprint-plain-overlay .c2-net-label,
html.audience-plain .c2-net-label {
    text-align: center !important;
    color: var(--bp-color-meta) !important;
    font-size: 0.8rem !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
}

/* Node positions (absolute within .c2-net) */
html.audience-plain #c2-srv,
#bluprint-plain-overlay #c2-srv { left: 3% !important;  top: 38% !important; }
html.audience-plain #c2-ra,
#bluprint-plain-overlay #c2-ra  { left: 38% !important; top: 72% !important; }
html.audience-plain #c2-ma,
#bluprint-plain-overlay #c2-ma  { left: 65% !important; top: 72% !important; }
html.audience-plain #c2-rb,
#bluprint-plain-overlay #c2-rb  { left: 42% !important; top: 40% !important; }
html.audience-plain #c2-mb,
#bluprint-plain-overlay #c2-mb  { left: 65% !important; top: 40% !important; }
html.audience-plain #c2-rc,
#bluprint-plain-overlay #c2-rc  { left: 38% !important; top: 5% !important;  }
html.audience-plain #c2-mc,
#bluprint-plain-overlay #c2-mc  { left: 65% !important; top: 5% !important;  }


/* -----------------------------------------------------------
   13j. SVG / animation colour overrides for plain mode
   ----------------------------------------------------------- */

/* Technical-mode cyan → plain-mode blue */
html.audience-plain svg [stroke="#00d4ff"],
#bluprint-plain-overlay svg [stroke="#00d4ff"] {
    stroke: var(--bp-color-link) !important;
}

html.audience-plain svg [fill="#00d4ff"],
#bluprint-plain-overlay svg [fill="#00d4ff"] {
    fill: var(--bp-color-link) !important;
}

html.audience-plain svg [stroke="#7b5ea7"],
#bluprint-plain-overlay svg [stroke="#7b5ea7"] {
    stroke: #6b4c93 !important;
}

html.audience-plain svg [fill="#7b5ea7"],
#bluprint-plain-overlay svg [fill="#7b5ea7"] {
    fill: #6b4c93 !important;
}

#bluprint-plain-overlay svg [stroke*="0,212,255"] {
    stroke: rgba(0, 102, 179, 0.5) !important;
}

/* SVG icons inside animation nodes */
#bluprint-plain-overlay .hz-node svg *[stroke],
#bluprint-plain-overlay .pa2-node svg *[stroke],
#bluprint-plain-overlay .br-node svg *[stroke],
#bluprint-plain-overlay .c2-n svg *[stroke] {
    stroke: #0088a8 !important;
}

/* Periodic table overlay in plain mode (cells) */
#bluprint-plain-overlay .pt-grid,
#bluprint-plain-overlay [class*="pt-row"] {
    gap: 6px !important;
}

#bluprint-plain-overlay .pt-cell,
#bluprint-plain-overlay [class*="pt-el"] {
    min-width: 100px !important;
    min-height: 80px !important;
    padding: 8px !important;
    background: var(--bp-color-card-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

#bluprint-plain-overlay .pt-cell:hover {
    border-color: var(--bp-color-link) !important;
    box-shadow: 0 2px 8px rgba(0, 102, 179, 0.15) !important;
    transform: translateY(-1px) !important;
}

#bluprint-plain-overlay .pt-nm {
    display: block !important;
    font-size: 0.55rem !important;
    color: #555 !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
}

#bluprint-plain-overlay .pt-sym,
#bluprint-plain-overlay .pt-cell strong {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--bp-color-heading) !important;
}

#bluprint-plain-overlay .pt-pop {
    display: none !important;
}

#bluprint-plain-overlay .pt-cell:hover .pt-pop {
    display: block !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #333 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

#bluprint-plain-overlay .pt-pop strong {
    color: var(--bp-color-heading) !important;
}

#bluprint-plain-overlay .pt-row-label,
#bluprint-plain-overlay .pt-series-label {
    color: #333 !important;
    font-weight: 600 !important;
}

#bluprint-plain-overlay .pt-header {
    color: var(--bp-color-link) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
}


/* ============================================================
   14. VIEW TRANSITIONS API
   ============================================================ */

@supports (view-transition-name: hero) {
    .hero,                          #bluprint-plain-overlay .hero        { view-transition-name: hero; }
    .hero-content h1,               #bluprint-plain-overlay .hero-content h1 { view-transition-name: hero-title; }
    .hero-tagline,                  #bluprint-plain-overlay .hero-tagline { view-transition-name: hero-tagline; }
    .bp-grid,                       #bluprint-plain-overlay .bp-grid     { view-transition-name: product-grid; }
    .bp-hn                                                                { view-transition-name: nav; }
    .bw-division-banner                                                   { view-transition-name: banner; }
    footer, footer.wp-block-template-part                                 { view-transition-name: footer; }
    #audience-toggle                                                      { view-transition-name: toggle; }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 1400ms !important;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    mix-blend-mode: normal !important;
}

::view-transition-old(hero),
::view-transition-new(hero),
::view-transition-old(hero-title),
::view-transition-new(hero-title),
::view-transition-old(hero-tagline),
::view-transition-new(hero-tagline),
::view-transition-old(product-grid),
::view-transition-new(product-grid) {
    animation-duration: 1400ms !important;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

::view-transition-old(nav),
::view-transition-new(nav),
::view-transition-old(banner),
::view-transition-new(banner),
::view-transition-old(toggle),
::view-transition-new(toggle) {
    animation-duration: 1400ms !important;
}


/* ============================================================
   15. @MEDIA PREFERS-REDUCED-MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    #audience-toggle,
    .toggle-label,
    .toggle-track,
    .toggle-thumb,
    .v-technical,
    .v-plain {
        transition: none !important;
    }

    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(hero),
    ::view-transition-new(hero),
    ::view-transition-old(hero-title),
    ::view-transition-new(hero-title),
    ::view-transition-old(product-grid),
    ::view-transition-new(product-grid) {
        animation-duration: 0.01ms !important;
    }
}


/* ============================================================
   16. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Toggle: top-right on mobile (AS-784: matches desktop top-right floating pill) */
@media (max-width: 768px) {
    #audience-toggle {
        top: 12px !important;
        bottom: auto !important;
        right: 12px !important;
        left: auto !important;
        transform: none !important;
    }

    html.audience-plain #audience-toggle {
        transform: none !important;
    }
}

/* Card grids: 2 columns on tablet */
@media (max-width: 900px) {
    #bluprint-plain-overlay .bp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #bluprint-plain-overlay .capability-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Card grids: single column on mobile */
@media (max-width: 600px) {
    #bluprint-plain-overlay .bp-grid {
        grid-template-columns: 1fr !important;
    }

    #bluprint-plain-overlay .capability-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === §1.6 minimum text size enforcement === */
/* Contact + Webinars meta text — bump from 13.6px to 14px minimum */
html.audience-plain .contact-meta p,
html.audience-plain .webinar-meta,
#bluprint-plain-overlay .contact-meta p,
#bluprint-plain-overlay .webinar-meta {
    font-size: var(--bp-size-small) !important;
}

/* §1.6 exemption: periodic table cell labels are cell-constrained */
/* .pt-nm at 8px is intentional — not body copy */

/* === §2 contrast fix: hero text readable on dark backgrounds === */
.hero-tagline {
    color: #c0c0d0 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Dark scrim behind hero content for guaranteed contrast */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%);
}

/* Plain mode hero tagline — darker for warm bg */
html.audience-plain .hero-tagline,
#bluprint-plain-overlay .hero-tagline {
    text-shadow: none;
    color: var(--bp-color-body) !important;
}

/* Glossary plain heading — stronger contrast */
html.audience-plain .hero-content h1 {
    color: var(--bp-color-heading) !important;
    text-shadow: none !important;
}

/* === C2 architecture grid — balanced layout === */
#bluprint-plain-overlay .c2-arch {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) 3fr;
    gap: 2rem !important;
    align-items: center !important;
    max-width: 900px !important;
    margin: 2rem auto !important;
    padding: 2rem !important;
    background: rgba(0, 136, 168, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 136, 168, 0.1) !important;
}

#bluprint-plain-overlay .c2-arch-hub {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#bluprint-plain-overlay .c2-arch-card {
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 136, 168, 0.2) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    text-align: center !important;
}

#bluprint-plain-overlay .c2-arch-card--hub {
    border-color: rgba(0, 136, 168, 0.4) !important;
    box-shadow: 0 0 15px rgba(0, 136, 168, 0.1) !important;
    padding: 1.5rem !important;
}

#bluprint-plain-overlay .c2-arch-targets {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
}

#bluprint-plain-overlay .c2-arch-label {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    color: var(--bp-color-meta) !important;
    font-size: var(--bp-size-meta) !important;
    margin-top: 0.5rem !important;
}

/* Hero scrim for guaranteed contrast */
.hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.hero > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Don't apply scrim in plain mode (warm gradient hero doesn't need it) */
html.audience-plain .hero::before,
#bluprint-plain-overlay .hero::before {
    display: none !important;
}

/* === PA flow — balanced 3-row grid === */
#bluprint-plain-overlay .pa-flow {
    max-width: 900px !important;
    margin: 2rem auto !important;
    padding: 2rem !important;
    background: rgba(0, 136, 168, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 136, 168, 0.1) !important;
}

#bluprint-plain-overlay .pa-flow__stage {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
}

#bluprint-plain-overlay .pa-flow__stage--center {
    grid-template-columns: 1fr !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}

#bluprint-plain-overlay .pa-flow__card {
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 136, 168, 0.2) !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    text-align: center !important;
}

#bluprint-plain-overlay .pa-flow__card--primary {
    border-color: rgba(0, 136, 168, 0.4) !important;
    box-shadow: 0 0 15px rgba(0, 136, 168, 0.1) !important;
    padding: 1.5rem !important;
}

#bluprint-plain-overlay .pa-flow__arrow {
    text-align: center !important;
    color: var(--bp-color-meta) !important;
    font-size: var(--bp-size-meta) !important;
    padding: 0.75rem 0 !important;
}

/* === AIF blue/green deployment animation — horizontal layout === */
#bluprint-plain-overlay .bg-anim-wrap {
    margin: 2rem auto !important;
    max-width: 700px !important;
    position: relative !important;
}

#bluprint-plain-overlay .bg-scene {
    position: relative !important;
    height: 200px !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: rgba(0, 136, 168, 0.03) !important;
    border: 1px solid rgba(0, 136, 168, 0.1) !important;
}

#bluprint-plain-overlay .bg-node {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 100px !important;
    height: 80px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    background: #ffffff !important;
}

#bluprint-plain-overlay .bg-node-blue {
    left: 60% !important;
    border: 2px solid rgba(0, 136, 168, 0.5) !important;
}

#bluprint-plain-overlay .bg-node-green {
    left: 80% !important;
    border: 2px solid rgba(0, 180, 100, 0.3) !important;
}

#bluprint-plain-overlay .bg-node-blue.active {
    box-shadow: 0 0 15px rgba(0, 136, 168, 0.2) !important;
}

#bluprint-plain-overlay .bg-node-green.active {
    box-shadow: 0 0 15px rgba(0, 180, 100, 0.2) !important;
    border-color: rgba(0, 180, 100, 0.6) !important;
}

#bluprint-plain-overlay .bg-node-green.building {
    border-style: dashed !important;
}

#bluprint-plain-overlay .bg-node-green.failed {
    border-color: rgba(220, 60, 60, 0.6) !important;
}

#bluprint-plain-overlay .bg-node-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

#bluprint-plain-overlay .bg-node-status {
    font-size: 0.65rem !important;
    color: #666 !important;
}

#bluprint-plain-overlay .bg-source {
    position: absolute !important;
    left: 5% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #666 !important;
    font-size: 0.7rem !important;
    text-align: center !important;
    z-index: 2 !important;
}

#bluprint-plain-overlay .bg-source-icon {
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto 4px !important;
    border: 1.5px solid rgba(0, 136, 168, 0.3) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#bluprint-plain-overlay .bg-fail-x {
    position: absolute !important;
    left: 80% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 2.5rem !important;
    color: #dc3c3c !important;
    font-weight: 700 !important;
    opacity: 0 !important;
    z-index: 3 !important;
}

#bluprint-plain-overlay .bg-fail-x.show {
    opacity: 1 !important;
}

#bluprint-plain-overlay .bg-path {
    position: absolute !important;
    top: 50% !important;
    height: 1px !important;
    z-index: 0 !important;
    background: rgba(0, 136, 168, 0.15) !important;
}

#bluprint-plain-overlay .bg-path-blue {
    left: 18% !important;
    width: 45% !important;
}

#bluprint-plain-overlay .bg-path-green {
    left: 18% !important;
    width: 65% !important;
}

#bluprint-plain-overlay .bg-scene-label,
#bluprint-plain-overlay .bg-phase-label,
#bluprint-plain-overlay #bg-label {
    text-align: center !important;
    color: #666 !important;
    font-size: 0.8rem !important;
    margin-top: 0.75rem !important;
}

#bluprint-plain-overlay #bg-title {
    text-align: center !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
}

/* Dots in AIF animation */
#bluprint-plain-overlay .bg-dot {
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #0088a8 !important;
    opacity: 0;
}

#bluprint-plain-overlay .bg-dot.to-green {
    background: #00b464 !important;
}

#bluprint-plain-overlay .bg-dot.failed-dot {
    background: #dc3c3c !important;
}

/* === C2 network diagram — use original absolute layout with plain colors === */
#bluprint-plain-overlay .c2-net {
    position: relative !important;
    height: 500px !important;
    border-radius: 12px !important;
    background: rgba(0, 136, 168, 0.03) !important;
    border: 1px solid rgba(0, 136, 168, 0.1) !important;
    overflow: hidden !important;
    margin: 2rem auto !important;
}

#bluprint-plain-overlay .c2-n {
    position: absolute !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 136, 168, 0.2) !important;
    border-radius: 10px !important;
    padding: 0.85rem 1rem !important;
    text-align: center !important;
    width: 120px !important;
    z-index: 2 !important;
}

#bluprint-plain-overlay .c2-n.server {
    width: 140px !important;
    border-color: rgba(0, 136, 168, 0.4) !important;
    box-shadow: 0 0 15px rgba(0, 136, 168, 0.1) !important;
}

#bluprint-plain-overlay .c2-lines line {
    stroke: rgba(0, 136, 168, 0.15) !important;
    stroke-width: 1.5 !important;
    stroke-dasharray: 4 4 !important;
}

#bluprint-plain-overlay .c2-n h4 {
    color: #1a1a1a !important;
    font-size: 0.85rem !important;
}

#bluprint-plain-overlay .c2-n p {
    color: #666 !important;
    font-size: 0.65rem !important;
}

/* === Blog spacing — halve the article gap === */
html.audience-plain .wp-block-post-template,
#bluprint-plain-overlay .wp-block-post-template {
    gap: 1.5rem !important;
}

html.audience-plain article.wp-block-post,
#bluprint-plain-overlay article {
    margin-bottom: 0 !important;
}

/* === Single header + footer in plain mode === */
/* Hide the WP native footer when overlay is active — overlay has its own */
html.audience-plain footer.wp-block-template-part {
    display: none !important;
}

/* WP header kept visible — contains nav links */

/* Ensure only ONE bp-footer is visible */
html.audience-plain .bp-footer:not(#bluprint-plain-overlay .bp-footer) {
    display: none !important;
}

#bluprint-plain-overlay .bp-footer {
    display: block !important;
}

/* === About page "What Drives Us" — 2x2 balanced grid === */
#bluprint-plain-overlay .bp-values-grid,
html.audience-plain .bp-values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Universal: any grid with exactly 4 items — force 2x2 (no 3+1 orphans) */
#bluprint-plain-overlay .bp-feature-grid:has(> :nth-child(4):last-child),
#bluprint-plain-overlay .bp-use-cases:has(> :nth-child(4):last-child),
#bluprint-plain-overlay .capability-grid:has(> :nth-child(4):last-child),
#bluprint-plain-overlay .detail-grid:has(> :nth-child(4):last-child),
html.audience-plain .bp-feature-grid:has(> :nth-child(4):last-child),
html.audience-plain .bp-use-cases:has(> :nth-child(4):last-child),
html.audience-plain .capability-grid:has(> :nth-child(4):last-child),
html.audience-plain .detail-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* === Contact page — 2-column layout (form left, info right) === */
#bluprint-plain-overlay .contact-layout {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 3rem !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: left !important;
}

#bluprint-plain-overlay .contact-form {
    max-width: none !important;
    margin: 0 !important;
}

#bluprint-plain-overlay .contact-info-panel {
    padding: 2rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 136, 168, 0.15) !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

#bluprint-plain-overlay .contact-info-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

#bluprint-plain-overlay .contact-info-icon {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    color: #0066b3 !important;
}

#bluprint-plain-overlay .contact-form input,
#bluprint-plain-overlay .contact-form textarea {
    background: #ffffff !important;
    border: 1px solid rgba(0, 136, 168, 0.2) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    color: #1a1a1a !important;
    font-family: var(--bp-font-text) !important;
}

#bluprint-plain-overlay .contact-form button[type="submit"] {
    background: #0066b3 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 1rem 2rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

@media (max-width: 768px) {
    #bluprint-plain-overlay .contact-layout {
        grid-template-columns: 1fr !important;
    }
}

/* === Blog entry spacing — halved per Gary === */
#bluprint-plain-overlay .blog-entry,
html.audience-plain .blog-entry {
    padding: 10px 0 !important;
}

/* === Glossary: hide duplicate footer inside overlay === */
#bluprint-plain-overlay .bp-footer ~ .bp-footer {
    display: none !important;
}

/* === Research animation label centering === */
#bluprint-plain-overlay .br-label,
#bluprint-plain-overlay .br-parallel-label,
#bluprint-plain-overlay .br-agents-grid + p,
#bluprint-plain-overlay .br-anim p,
html.audience-plain .br-label {
    text-align: center !important;
}

/* === Fix double footer — hide last bp-footer in overlay (keep first) === */
#bluprint-plain-overlay > footer.bp-footer:last-of-type {
    display: none !important;
}

/* === Blog entry spacing — UNSCOPED to match both overlay and native DOM === */
.blog-entry {
    padding: 10px 0 !important;
}

/* === Research label centering — UNSCOPED === */
.br-parallel-label {
    text-align: center !important;
    max-width: 60ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.br-label {
    text-align: center !important;
}

/* === C2 animation dots — visible in plain mode === */
html.audience-plain .c2-dot,
#bluprint-plain-overlay .c2-dot {
    background: #0088a8 !important;
    opacity: 0;  /* no !important — let JS control */
    box-shadow: 0 0 4px rgba(0, 136, 168, 0.5) !important;
}

html.audience-plain .c2-dot.return-dot,
#bluprint-plain-overlay .c2-dot.return-dot {
    background: #00b464 !important;
    box-shadow: 0 0 4px rgba(0, 180, 100, 0.5) !important;
}

/* === C2 pulse dots — visible in plain mode === */
html.audience-plain .c2-pulse,
#bluprint-plain-overlay .c2-pulse {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #0066b3 !important;
    box-shadow: 0 0 6px rgba(0, 102, 179, 0.4) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* C2 node glow states in plain mode */
html.audience-plain .glow-cyan,
#bluprint-plain-overlay .glow-cyan {
    border-color: rgba(0, 136, 168, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 136, 168, 0.2) !important;
}

html.audience-plain .glow-green,
#bluprint-plain-overlay .glow-green {
    border-color: rgba(0, 180, 100, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 180, 100, 0.2) !important;
}

html.audience-plain .glow-purple,
#bluprint-plain-overlay .glow-purple {
    border-color: rgba(107, 76, 147, 0.6) !important;
    box-shadow: 0 0 15px rgba(107, 76, 147, 0.2) !important;
}

/* C2 connection lines more visible in plain mode */
html.audience-plain .c2-lines line,
#bluprint-plain-overlay .c2-lines line {
    stroke: rgba(0, 102, 179, 0.25) !important;
    stroke-width: 2 !important;
}

/* === Animation track/rail styling — unscoped for both modes === */

/* SF pipeline tracks — visible rails between nodes */
.hz-track {
    flex: 1 !important;
    height: 2px !important;
    position: relative !important;
    z-index: 1 !important;
    min-width: 30px !important;
}

html.audience-plain .hz-track,
#bluprint-plain-overlay .hz-track {
    background: rgba(0, 136, 168, 0.15) !important;
}

/* Research tracks and fan lines */
.br-track {
    width: 4px !important;
    height: 20px !important;
    position: relative !important;
}

html.audience-plain .br-track,
#bluprint-plain-overlay .br-track {
    background: rgba(0, 136, 168, 0.15) !important;
    margin: 0 auto !important;
}

/* Research fan lines — narrow lines fanning to agents, NOT full-width blocks */
.br-fan-line {
    width: 1px !important;
    background: rgba(0, 136, 168, 0.2) !important;
}

html.audience-plain .br-fan-lines-top,
html.audience-plain .br-fan-lines-bottom,
#bluprint-plain-overlay .br-fan-lines-top,
#bluprint-plain-overlay .br-fan-lines-bottom {
    display: flex !important;
    justify-content: center !important;
}

/* Research agent pills visible */
html.audience-plain .br-agent,
#bluprint-plain-overlay .br-agent {
    background: #ffffff !important;
    border: 1px solid rgba(0, 136, 168, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    color: #333 !important;
}

/* Research dot — visible on tracks */
html.audience-plain .br-dot,
#bluprint-plain-overlay .br-dot {
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #0088a8 !important;
    opacity: 0;  /* JS controls */
    box-shadow: 0 0 4px rgba(0, 136, 168, 0.5) !important;
}

/* SF node transition for smooth state changes */
html.audience-plain .hz-node,
#bluprint-plain-overlay .hz-node {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}



/* Toggle thumb v2 — contrast-inverting with subtle cyan ring (Dina spec, 2026-04-15) */
/* Note: site uses html.audience-plain for plain mode; tech mode has no class.    */
/* Append-after-existing rules + !important required to win over earlier toggle    */
/* CSS (which sets background-color with !important at lines 263-277).             */
.toggle-thumb {
  background: #e8e8e8 !important;          /* tech (default) — warm white */
  border: 1.5px solid rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  border-radius: 50% !important;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html.audience-plain .toggle-thumb {
  background: #141413 !important;          /* plain — warm black */
}

/* Active-label contrast — lift the active mode's label, mute the inactive */
.toggle-label--technical {
  color: var(--bp-cyan) !important;
  font-weight: 600 !important;
}
.toggle-label--plain {
  opacity: 0.5 !important;
  font-weight: 400 !important;
}
html.audience-plain .toggle-label--technical {
  opacity: 0.5 !important;
  color: #999 !important;
  font-weight: 400 !important;
}
html.audience-plain .toggle-label--plain {
  opacity: 1 !important;
  color: #141413 !important;
  font-weight: 600 !important;
}

/* Logo plain-mode flip — black BluPrint, cyan AI (Gary 2026-04-15) */
html.audience-plain .bp-hn__logo { color: #141413 !important; }
html.audience-plain .bp-hn__logo .bp-accent { color: #00d4ff !important; }

/* Toggle contrast bump — 22px thumb, larger track, stronger ring/shadow (Dina+Cody spec 2026-04-15) */
.toggle-track {
  width: 50px !important;
  height: 26px !important;
  min-width: 50px !important;
  min-height: 26px !important;
  border-radius: 13px !important;
}
.toggle-thumb {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid rgba(0, 212, 255, 0.8) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
html.audience-plain .toggle-thumb {
  transform: translateX(24px) !important;
}

/* Fix v3 — box-sizing on thumb (eliminates outer-overflow on plain), higher-specificity logo rule (Cody 2026-04-15) */
.toggle-thumb { box-sizing: border-box !important; }
html.audience-plain .bp-hn a.bp-hn__logo { color: #141413 !important; }
html.audience-plain .bp-hn a.bp-hn__logo .bp-accent { color: #00d4ff !important; }