/* SPIDER R13 - consolidated compatibility layers. Order preserved from R12. */

/* --- spider-mobile-console-v13.css --- */
/* SPIDER V13 — mobile Transaction Console and sticky menu positioning */
@media (max-width: 720px) {
  .spider-premium-2[data-route-key="home"] .hero,
  .spider-premium-2[data-route-key="home"] .hero-grid,
  .spider-premium-2[data-route-key="home"] .hero-visual-wrap {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .spider-premium-2 .hero-card.p2-hero-console-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 748px !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    contain: none !important;
  }

  .spider-premium-2 .p2-console {
    display: grid !important;
    grid-template-rows: 50px auto 112px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 748px !important;
    max-height: none !important;
    overflow: visible !important;
    contain: none !important;
  }

  .spider-premium-2 .p2-console-body {
    display: block !important;
    height: auto !important;
    min-height: 586px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .spider-premium-2 .p2-console-main {
    display: grid !important;
    grid-template-rows: auto 300px auto !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 586px !important;
    max-height: none !important;
    padding: 12px 12px 14px !important;
    overflow: visible !important;
  }

  .spider-premium-2 .p2-transaction-map {
    display: grid !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    overflow: hidden !important;
  }

  .spider-premium-2 .p2-risk-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 74px !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .spider-premium-2 .p2-console-footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-height: 112px !important;
    height: 112px !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 8 !important;
  }

  .spider-premium-2 .p2-console-step {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  body.spider-mobile-menu-open {
    overflow-y: auto !important;
  }

  .header .mobile-panel,
  .header .nav-shell {
    max-height: calc(100dvh - var(--spider-menu-top, 72px) - 12px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}


/* --- spider-mobile-console-v14.css --- */
/* SPIDER V14 — mobile-only transaction map stacking and stable menu layer */
@media (max-width: 720px) {
  /* Keep the transaction map self-contained. */
  .spider-premium-2 .p2-transaction-map {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
  }

  /* Decorative grid and connecting paths always stay at the back. */
  .spider-premium-2 .p2-transaction-map::before,
  .spider-premium-2 .p2-transaction-map::after,
  .spider-premium-2 .p2-map-svg,
  .spider-premium-2 .p2-map-svg * {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Outer requirement/service cards remain below the central SPIDER core. */
  .spider-premium-2 .p2-map-node {
    z-index: 4 !important;
    position: absolute !important;
  }

  /* The central circle must always be visually dominant. */
  .spider-premium-2 .p2-map-core {
    z-index: 30 !important;
    position: absolute !important;
    isolation: isolate !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 42% 35%, rgba(255, 112, 55, .34), rgba(28, 16, 28, .96) 58%, rgba(7, 14, 29, .99) 100%) !important;
    border: 1px solid rgba(255, 106, 42, .78) !important;
    box-shadow:
      0 0 0 1px rgba(255, 106, 42, .22),
      0 0 34px rgba(255, 106, 42, .28),
      inset 0 0 28px rgba(255, 106, 42, .16) !important;
  }

  .spider-premium-2 .p2-map-core > * {
    position: relative !important;
    z-index: 31 !important;
  }

  /* Prevent a mobile menu opening from changing document flow. */
  .header .mobile-panel,
  .header .nav-shell {
    margin: 0 !important;
    transform: none !important;
    contain: layout paint !important;
  }
}


/* --- spider-layout-r07.css --- */
/* SPIDER R07 - production layout hardening */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%}
.container,.header .container.header-inner{min-width:0}
.card,.pill,.btn,.pp-r04-domain,.pp-r04-engine,.pp-r04-source-flow>*{min-width:0}

/* Header: keep enterprise navigation stable and prevent collisions */
.header{isolation:isolate}
.header .header-inner{min-height:72px}
.header .brand{flex:0 0 auto}
.header .nav{min-width:0}
.header .nav>a,.header .nav-group-trigger{white-space:nowrap}
.header-actions{flex:0 0 auto}
.pp-r04-platform-menu{min-width:260px;max-width:min(360px,calc(100vw - 32px))}

/* Home hero */
.hero-grid{align-items:center}
.hero-copy,.hero-visual-wrap{min-width:0}
.hero-copy h1,.hero-copy .lead{overflow-wrap:break-word}
.hero-points{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:none!important}
.hero-points .pill{min-width:0;overflow-wrap:anywhere}
.hero-card{isolation:isolate;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px!important;align-content:end!important;padding:24px!important;overflow:hidden!important}
.hero-card .hero-image{position:absolute!important;inset:0!important;overflow:hidden;border-radius:inherit;z-index:0;opacity:.42}
.hero-card .hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,18,.18),rgba(3,8,18,.86));z-index:1}
.hero-card .float-card,.hero-card .float-card.card-a,.hero-card .float-card.card-b,.hero-card .float-card.card-c,.hero-card .float-card.card-d{position:relative!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;z-index:2;max-width:none!important;min-width:0!important;width:auto!important;margin:0!important;animation:none!important;transform:none!important}
.hero-card .float-card p,.hero-card .float-card strong{overflow-wrap:anywhere}

/* Enterprise end-to-end architecture: no horizontal overflow */
.pp-r04-e2e{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px!important;overflow:visible!important}
.pp-r04-e2e li{min-width:0!important;width:auto!important;overflow-wrap:anywhere}
.pp-r04-e2e li:after{display:none!important}
.pp-r04-engine,.pp-r04-domain-grid,.pp-r04-intent-grid,.pp-r04-source-flow{min-width:0}
.pp-r04-pipeline li{overflow-wrap:anywhere}
.pp-r04-control{overflow-wrap:anywhere;white-space:normal}

/* Global R03 blocks */
.pp-global-network,.pp-global-network-inputs,.pp-global-roles-grid,.pp-global-scenarios-grid,.pp-content-cluster-grid{min-width:0}
.pp-global-node,.pp-global-flow,.pp-global-role-card,.pp-global-scenario-card,.pp-content-cluster-card{min-width:0;overflow-wrap:anywhere}

/* Existing product/process panels */
.pp-process-layout,.pp-product-panel,.pp-stage-panel,.pp-panel-top,.pp-flow-line,.pp-transaction-map{min-width:0}
.pp-panel-top strong{overflow-wrap:anywhere}
.pp-flow-line span{min-width:0;overflow-wrap:anywhere}
.pp-stage-card,.pp-module-card,.pp-industry-card,.pp-case-card,.pp-governance-card{min-width:0;overflow:hidden}
.pp-stage-card p,.pp-module-card p,.pp-industry-card p,.pp-case-card p,.pp-governance-card p{overflow-wrap:anywhere}

/* Process visual hardening */
.pp-process-section .pp-product-panel{overflow:hidden!important;height:auto!important;min-height:420px!important}
.pp-process-section .pp-panel-grid{display:none!important}
.pp-process-section .pp-stage-panel{padding:22px!important;min-width:0!important}
.pp-process-section .pp-flow-line{width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr)!important;gap:8px!important}
.pp-process-section .pp-flow-line span{min-width:0!important;font-size:12px!important;line-height:1.3!important;padding:12px!important}
.pp-process-section .pp-flow-line i{min-width:0!important}

/* Articles */
.articles-hero-grid,.articles-grid,.article-reading,.article-sidecard,.pp-content-cluster-grid{min-width:0}
.articles-card,.article-sidecard{overflow:hidden}
.articles-card h2,.articles-card h3,.articles-card p,.article-reading h1,.article-reading h2,.article-reading h3,.article-reading p{overflow-wrap:anywhere}

/* Contact / forms */
.contact-form,.pp-contact-layout,.pp-demo-form-card,.pp-demo-preview-card{min-width:0}
.contact-form input,.contact-form textarea,.contact-form select{max-width:100%;min-width:0}

/* Footer */
.footer-grid>*{min-width:0}
.footer a,.footer p{overflow-wrap:anywhere}

@media (max-width:1200px){
  .header .container.header-inner{width:min(100% - 36px,1180px)!important}
  .header .nav{gap:6px!important}
  .header .nav>a,.header .nav-group-trigger{font-size:.78rem!important;padding-inline:7px!important}
  .language-combo{min-width:150px!important}
  .pp-r04-e2e{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1024px){
  .header .nav,.header .header-actions{display:none!important}
  .mobile-toggle,.nav-toggle{display:grid!important;place-items:center}
  .hero-grid{grid-template-columns:1fr!important;gap:28px!important}
  .hero-copy{padding-top:10px!important}
  .hero-visual-wrap{min-height:0!important}
  .hero-card{width:100%!important;max-width:none!important;min-height:0!important;height:auto!important;padding:18px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;overflow:hidden!important;background:linear-gradient(145deg,rgba(11,23,43,.9),rgba(14,31,60,.58))!important}
  .hero-card .hero-image{display:none!important}
  .hero-card .float-card,.hero-card .float-card.card-a,.hero-card .float-card.card-b,.hero-card .float-card.card-c,.hero-card .float-card.card-d{position:relative!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;max-width:none!important;width:auto!important;margin:0!important;animation:none!important;transform:none!important}
  .hero-points{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pp-r04-e2e{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
  .container,.header .container.header-inner,.content .container,.pp-page-section,.doc-shell{width:min(100% - 28px,1200px)!important;max-width:calc(100vw - 28px)!important;margin-inline:auto!important}
  .header .header-inner{min-height:64px!important}
  .brand span{font-size:.95rem}
  .brand img{width:36px!important;height:36px!important}
  .hero{padding:36px 0 44px!important}
  .hero h1{font-size:clamp(2.25rem,11.5vw,3.6rem)!important;line-height:1.02!important;letter-spacing:-.045em!important}
  .hero .lead{font-size:1rem!important;line-height:1.6!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .hero-actions .btn{width:100%!important;min-width:0!important;white-space:normal!important;text-align:center}
  .hero-points{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .hero-card{grid-template-columns:1fr!important;padding:14px!important}
  .hero-card .float-card{padding:15px!important}
  .hero-card .float-card p{font-size:.9rem!important}
  .grid-2,.grid-3,.grid-4,.footer-grid,.pp-r04-domain-grid,.pp-r04-intent-grid,.pp-r04-engine,.pp-r04-source-flow,.pp-global-network,.pp-global-roles-grid,.pp-global-scenarios-grid,.pp-content-cluster-grid{grid-template-columns:1fr!important}
  .pp-r04-e2e{grid-template-columns:1fr!important;gap:8px!important}
  .pp-r04-domain,.pp-r04-trust .grid-3 .card,.pp-r04-detail-grid .card{min-height:0!important}
  .pp-r04-engine,.pp-r04-ai,.pp-r04-outreach{padding:18px!important}
  .pp-r04-pipeline{grid-template-columns:1fr!important}
  .pp-process-section .pp-product-panel{min-height:0!important}
  .pp-process-section .pp-flow-line{grid-template-columns:1fr!important}
  .pp-process-section .pp-flow-line i{width:2px!important;height:18px!important;justify-self:center!important}
  .pp-r04-ai{display:grid!important;grid-template-columns:1fr!important}
  .pp-r04-control{width:100%!important;min-width:0!important}
  .pp-global-network-inputs{grid-template-columns:1fr!important}
  .pp-global-flow:before{display:none!important}
  .section{padding:44px 0!important}
  .section-header{display:block!important}
  .section h2,.section-header h2{font-size:clamp(1.65rem,8vw,2.4rem)!important}
  .page-hero{padding:36px 0 28px!important}
  .page-hero h1{max-width:none!important;font-size:clamp(2rem,10vw,3rem)!important}
  .footer{padding:42px 0 88px!important}
  .footer-grid{gap:18px!important}
}

@media (max-width:430px){
  .container,.header .container.header-inner,.content .container,.pp-page-section,.doc-shell{width:calc(100% - 24px)!important;max-width:calc(100vw - 24px)!important}
  .hero h1{font-size:clamp(2.05rem,12vw,3rem)!important}
  .hero-points{grid-template-columns:1fr!important}
  .eyebrow{max-width:100%;white-space:normal!important;line-height:1.35!important}
  .card,.pp-r04-domain,.pp-r04-engine,.pp-r04-ai,.pp-r04-outreach{padding:16px!important}
  .pp-r04-kicker{margin-bottom:14px!important}
  .articles-card,.article-sidecard{border-radius:18px!important}
}


/* --- spider-layout-r08.css --- */
/* SPIDER R08 - navigation continuity and final UX hardening */

/* Keep the enterprise navigation visible while the user scrolls. Sticky is
   preferred over fixed positioning so the header keeps its natural place in
   the document flow and does not create a page jump. */
html{scroll-padding-top:92px}
.header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%;
  background:linear-gradient(180deg,rgba(6,12,24,.96),rgba(7,14,28,.90))!important;
  border-bottom:1px solid rgba(189,225,255,.13)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.24)!important;
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  isolation:isolate;
}
.header .header-inner{position:relative;z-index:5002}
.header .nav-submenu,.header .language-menu{z-index:5010!important}

/* When the mobile navigation is open, keep it usable inside the viewport
   while the header itself remains sticky. */
@media (max-width:1024px){
  html{scroll-padding-top:80px}
  .header .mobile-panel{
    max-height:calc(100vh - 72px);
    max-height:calc(100dvh - 72px);
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:768px){
  html{scroll-padding-top:72px}
  .header .mobile-panel{
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
  }
}

/* Fallback for browsers without backdrop-filter support. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header{background:#07101d!important}
}