/* SPIDER V16 — Transaction Console visual and interaction layer for all devices.
   Preserves existing DOM/data/event logic and enhances readability across desktop, tablet and mobile. */

.spider-premium-2 .p2-console-main {
  grid-template-rows: auto minmax(360px, 440px) auto !important;
}

.spider-premium-2 .p2-transaction-map {
  position: relative !important;
  isolation: isolate !important;
  min-height: 420px !important;
  height: 420px !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(84,151,211,.28) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(18,68,105,.22), transparent 50%),
    linear-gradient(rgba(44,113,160,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,113,160,.08) 1px, transparent 1px),
    rgba(2,11,26,.92) !important;
  background-size: auto, 38px 38px, 38px 38px, auto !important;
  box-shadow: inset 0 0 44px rgba(0,42,75,.3), 0 16px 44px rgba(0,0,0,.2) !important;
}

.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;
}

.spider-premium-2 .p2-map-svg {
  opacity: .72 !important;
  filter: drop-shadow(0 0 7px rgba(53,180,255,.16)) !important;
}

.spider-premium-2 .p2-map-node {
  position: absolute !important;
  z-index: 6 !important;
  width: min(34%, 270px) !important;
  min-height: 62px !important;
  height: auto !important;
  padding: 12px 42px 12px 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 20px !important;
  color: #f4f8ff !important;
  font-size: clamp(13px,1.15vw,16px) !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  text-align: left !important;
  white-space: normal !important;
  cursor: pointer !important;
  background: linear-gradient(135deg,rgba(8,23,43,.98),rgba(7,15,31,.95)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.36), inset 0 0 18px rgba(55,139,205,.08) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
  overflow: hidden !important;
}

.spider-premium-2 .p2-map-node:hover,
.spider-premium-2 .p2-map-node:focus-visible,
.spider-premium-2 .p2-map-node.is-v16-active {
  transform: translateY(-2px) scale(1.015) !important;
  filter: brightness(1.12) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 0 24px color-mix(in srgb,currentColor 30%,transparent) !important;
  outline: none !important;
}

.spider-premium-2 .p2-map-node::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 25px;
  height: 25px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: .98;
  -webkit-mask: var(--p2-icon) center/contain no-repeat;
  mask: var(--p2-icon) center/contain no-repeat;
}

.spider-premium-2 .p2-map-node::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: currentColor;
  box-shadow: 0 0 13px currentColor;
}

.spider-premium-2 .p2-map-node.n1 {
  left: 4% !important; top: 28px !important; right: auto !important; bottom: auto !important;
  color: #2d9cff !important; border: 1px solid rgba(45,156,255,.78) !important;
  --p2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v8H3z'/%3E%3Cpath d='M14 10h4l3 3v2h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}
.spider-premium-2 .p2-map-node.n2 {
  right: 4% !important; top: 28px !important; left: auto !important; bottom: auto !important;
  color: #a85cff !important; border: 1px solid rgba(168,92,255,.78) !important;
  --p2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10v18H7z'/%3E%3Cpath d='M9 3V1h6v2M10 8h4M10 12h4M10 16h4'/%3E%3C/svg%3E");
}
.spider-premium-2 .p2-map-node.n3 {
  left: 4% !important; bottom: 28px !important; right: auto !important; top: auto !important;
  color: #35df83 !important; border: 1px solid rgba(53,223,131,.78) !important;
  --p2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='7' ry='3'/%3E%3Cpath d='M5 5v5c0 1.7 3.1 3 7 3s7-1.3 7-3V5M5 10v5c0 1.7 3.1 3 7 3 1 0 2-.1 2.8-.3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M18 16.5v3M16.5 18h3'/%3E%3C/svg%3E");
}
.spider-premium-2 .p2-map-node.n4 {
  right: 4% !important; bottom: 28px !important; left: auto !important; top: auto !important;
  color: #26d9f4 !important; border: 1px solid rgba(38,217,244,.78) !important;
  --p2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17c3-1 4-3 7-3h3c1 0 2 .7 2 1.5S14 17 13 17h-2'/%3E%3Cpath d='M15 15l3-2c1-.6 2.2-.3 2.7.7.4.8.1 1.7-.7 2.2l-6 3.6c-.8.5-1.8.6-2.7.3L6 18'/%3E%3Ccircle cx='15' cy='7' r='3'/%3E%3Cpath d='M15 2v2M15 10v2M10 7H8M22 7h-2M11.5 3.5 10 2M20 12l-1.5-1.5M18.5 3.5 20 2'/%3E%3C/svg%3E");
}

.spider-premium-2 .p2-map-core {
  position: absolute !important;
  z-index: 30 !important;
  isolation: isolate !important;
  width: clamp(190px,22vw,240px) !important;
  height: clamp(190px,22vw,240px) !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,-50%) !important;
  border: 2px solid rgba(255,73,39,.96) !important;
  border-radius: 50% !important;
  background:
    url('/assets/img/spider-logo-console-v15.webp') center 42%/88% auto no-repeat,
    radial-gradient(circle at 50% 45%,rgba(92,10,12,.38),rgba(8,9,20,.99) 72%) !important;
  box-shadow: 0 0 0 5px rgba(255,73,39,.08),0 0 36px rgba(255,73,39,.48),inset 0 0 30px rgba(255,73,39,.24) !important;
  pointer-events: none !important;
}

.spider-premium-2 .p2-map-core::after {
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(255,106,55,.26);
  pointer-events:none;
}

.spider-premium-2 .p2-map-core > div {
  width:100% !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:center !important;
  padding:0 14px 18px !important;
}
.spider-premium-2 .p2-map-core strong {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}
.spider-premium-2 .p2-map-core span {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:28px !important;
  padding:5px 12px !important;
  border-radius:999px !important;
  color:#dce7f6 !important;
  font-size:12px !important;
  font-weight:650 !important;
  background:rgba(2,9,20,.8) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(4px) !important;
}

.spider-premium-2 .p2-risk-strip { gap: 12px !important; }
.spider-premium-2 .p2-risk-item {
  position:relative !important;
  min-height:118px !important;
  padding:48px 12px 13px !important;
  border-radius:18px !important;
  text-align:center !important;
  background:linear-gradient(180deg,rgba(8,19,37,.97),rgba(4,12,25,.98)) !important;
  border:1px solid rgba(103,156,202,.25) !important;
  overflow:hidden !important;
  cursor:pointer !important;
  transition:transform .2s ease,filter .2s ease,border-color .2s ease !important;
}
.spider-premium-2 .p2-risk-item:hover,
.spider-premium-2 .p2-risk-item:focus-visible,
.spider-premium-2 .p2-risk-item.is-v16-active {
  transform:translateY(-2px) !important;
  filter:brightness(1.1) !important;
  border-color:currentColor !important;
  outline:none !important;
}
.spider-premium-2 .p2-risk-item::before {
  content:"";
  position:absolute;
  top:12px;
  left:50%;
  width:28px;
  height:28px;
  transform:translateX(-50%);
  background:currentColor;
  -webkit-mask:var(--p2-risk-icon) center/contain no-repeat;
  mask:var(--p2-risk-icon) center/contain no-repeat;
  opacity:.96;
}
.spider-premium-2 .p2-risk-item:nth-child(1) { color:#2d9cff !important; --p2-risk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 2h9l4 4v16H6z'/%3E%3Cpath d='M14 2v5h5M9 12h7M9 16h7'/%3E%3C/svg%3E"); }
.spider-premium-2 .p2-risk-item:nth-child(2) { color:#a85cff !important; --p2-risk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2 20 5v6c0 5-3.4 9-8 11-4.6-2-8-6-8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E"); }
.spider-premium-2 .p2-risk-item:nth-child(3) { color:#35df83 !important; --p2-risk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 19c4-7 7-12 16-14'/%3E%3Cpath d='m15 5 5 0 0 5'/%3E%3Ccircle cx='5' cy='18' r='2'/%3E%3C/svg%3E"); }
.spider-premium-2 .p2-risk-item small { color:#dce6f5 !important; opacity:.84 !important; font-size:11px !important; line-height:1.2 !important; }
.spider-premium-2 .p2-risk-item strong { display:block !important; margin-top:6px !important; color:currentColor !important; font-size:13px !important; line-height:1.2 !important; }

.spider-premium-2 .p2-console-step {
  min-height:58px !important;
  border-radius:16px !important;
  transition:transform .2s ease,filter .2s ease,border-color .2s ease !important;
}
.spider-premium-2 .p2-console-step:hover,
.spider-premium-2 .p2-console-step:focus-visible { transform:translateY(-2px); filter:brightness(1.08); outline:none; }
.spider-premium-2 .p2-console-step.is-active { box-shadow:0 0 0 1px rgba(54,198,255,.22),0 12px 30px rgba(0,0,0,.28) !important; }

@media (min-width: 1101px) {
  .spider-premium-2 .p2-console-body { grid-template-columns:minmax(0,1fr) minmax(230px,29%) !important; gap:18px !important; }
  .spider-premium-2 .p2-console-side { min-width:0 !important; }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .spider-premium-2 .p2-console-main { grid-template-rows:auto 400px auto !important; }
  .spider-premium-2 .p2-transaction-map { height:400px !important; min-height:400px !important; }
  .spider-premium-2 .p2-map-node { width:38% !important; font-size:14px !important; }
  .spider-premium-2 .p2-map-core { width:205px !important; height:205px !important; }
}

@media (max-width: 720px) {
  .spider-premium-2 .p2-console-main { grid-template-rows:auto 420px auto !important; }
  .spider-premium-2 .p2-transaction-map { height:420px !important; min-height:420px !important; border-radius:22px !important; background-size:auto,34px 34px,34px 34px,auto !important; }
  .spider-premium-2 .p2-map-node { width:43% !important; min-height:58px !important; padding:10px 12px 10px 42px !important; font-size:clamp(12px,3.4vw,15px) !important; border-radius:18px !important; }
  .spider-premium-2 .p2-map-node::before { left:12px; width:22px; height:22px; }
  .spider-premium-2 .p2-map-node::after { right:11px; width:7px; height:7px; }
  .spider-premium-2 .p2-map-node.n1,.spider-premium-2 .p2-map-node.n2 { top:22px !important; }
  .spider-premium-2 .p2-map-node.n3,.spider-premium-2 .p2-map-node.n4 { bottom:22px !important; }
  .spider-premium-2 .p2-map-core { width:190px !important; height:190px !important; }
  .spider-premium-2 .p2-risk-strip { gap:8px !important; }
  .spider-premium-2 .p2-risk-item { min-height:108px !important; padding:42px 7px 10px !important; border-radius:16px !important; }
  .spider-premium-2 .p2-risk-item::before { top:10px; width:25px; height:25px; }
  .spider-premium-2 .p2-risk-item small { font-size:10px !important; }
  .spider-premium-2 .p2-risk-item strong { font-size:12px !important; }
}

@media (max-width: 390px) {
  .spider-premium-2 .p2-map-node { width:45% !important; min-height:54px !important; padding-left:37px !important; padding-right:8px !important; font-size:11px !important; }
  .spider-premium-2 .p2-map-node::before { left:10px; width:19px; height:19px; }
  .spider-premium-2 .p2-map-node::after { display:none; }
  .spider-premium-2 .p2-map-core { width:168px !important; height:168px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .spider-premium-2 .p2-map-node,
  .spider-premium-2 .p2-risk-item,
  .spider-premium-2 .p2-console-step { transition:none !important; }
}

/* SPIDER V24 — coherent desktop layout rebuild.
   The previous V18–V23 desktop overrides were removed because they imposed
   mutually contradictory fixed heights, widths and overflow rules.
   Mobile/tablet styles above remain unchanged. */
@media (min-width:1101px){
  /* The rich two-column console cannot fit inside the former narrow hero side
     column. Give it a full desktop row instead of scaling/cropping it. */
  body[data-route-key="home"].spider-premium-2 .hero .container.hero-grid,
  body[data-route-key="home"].spider-premium-2 .hero-grid{
    width:min(1220px,calc(100% - 64px)) !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:38px !important;
    align-items:start !important;
  }
  body[data-route-key="home"].spider-premium-2 .hero-copy{
    width:min(880px,100%) !important;
    min-height:0 !important;
    margin:0 auto !important;
    text-align:center !important;
    align-items:center !important;
  }
  body[data-route-key="home"].spider-premium-2 .hero-copy .lead{
    margin-inline:auto !important;
  }
  body[data-route-key="home"].spider-premium-2 .hero-actions{
    justify-content:center !important;
  }
  body[data-route-key="home"].spider-premium-2 .hero-points{
    width:100% !important;
    max-width:900px !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  body[data-route-key="home"].spider-premium-2 .hero-visual-wrap{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 0 56px !important;
    margin:0 auto !important;
    display:block !important;
    overflow:visible !important;
  }

  .spider-premium-2 .hero-card.p2-hero-console-card{
    width:min(1180px,100%) !important;
    max-width:1180px !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
    transform:none !important;
    contain:none !important;
    box-sizing:border-box !important;
  }

  .spider-premium-2 .p2-console{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-rows:64px auto 76px !important;
    border-radius:30px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .spider-premium-2 .p2-console-top{
    min-width:0 !important;
    height:64px !important;
    padding:0 24px !important;
    box-sizing:border-box !important;
  }
  .spider-premium-2 .p2-console-body{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.62fr) minmax(300px,.78fr) !important;
    align-items:stretch !important;
    gap:20px !important;
    padding:22px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  .spider-premium-2 .p2-console-main{
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-rows:126px 520px 136px !important;
    gap:18px !important;
    padding:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    background:none !important;
  }
  .spider-premium-2 .p2-partner-card{
    width:100% !important;
    min-width:0 !important;
    min-height:126px !important;
    margin:0 !important;
    padding:18px 22px !important;
    box-sizing:border-box !important;
  }
  .spider-premium-2 .p2-transaction-map{
    width:100% !important;
    min-width:0 !important;
    height:520px !important;
    min-height:520px !important;
    margin:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .spider-premium-2 .p2-map-core{
    width:238px !important;
    height:238px !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
  .spider-premium-2 .p2-map-node{
    width:min(31%,190px) !important;
    min-width:150px !important;
    min-height:62px !important;
    font-size:13px !important;
  }
  .spider-premium-2 .p2-map-node.n1{left:28px !important;top:34px !important;}
  .spider-premium-2 .p2-map-node.n2{right:28px !important;top:34px !important;}
  .spider-premium-2 .p2-map-node.n3{left:28px !important;bottom:34px !important;}
  .spider-premium-2 .p2-map-node.n4{right:28px !important;bottom:34px !important;}

  .spider-premium-2 .p2-risk-strip{
    width:100% !important;
    min-width:0 !important;
    min-height:136px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  .spider-premium-2 .p2-risk-item{
    min-width:0 !important;
    min-height:136px !important;
    box-sizing:border-box !important;
  }

  .spider-premium-2 .p2-console-side{
    min-width:0 !important;
    height:auto !important;
    min-height:800px !important;
    padding:18px !important;
    display:grid !important;
    grid-template-rows:auto repeat(3,minmax(126px,1fr)) minmax(116px,auto) !important;
    align-content:stretch !important;
    gap:14px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    border-radius:24px !important;
  }
  .spider-premium-2 .p2-metric-card,
  .spider-premium-2 .p2-readiness{
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  .spider-premium-2 .p2-console-footer{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    width:calc(100% - 44px) !important;
    min-width:0 !important;
    height:64px !important;
    min-height:64px !important;
    margin:0 22px 12px !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    align-self:end !important;
    overflow:hidden !important;
    border:1px solid rgba(188,211,244,.11) !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
    z-index:40 !important;
  }
  .spider-premium-2 .p2-console-step{
    min-width:0 !important;
    width:auto !important;
    height:62px !important;
    min-height:62px !important;
    padding:0 12px 0 30px !important;
    font-size:11px !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }
}

@media (min-width:1101px) and (max-width:1279px){
  body[data-route-key="home"].spider-premium-2 .hero .container.hero-grid,
  body[data-route-key="home"].spider-premium-2 .hero-grid{
    width:min(1120px,calc(100% - 40px)) !important;
  }
  .spider-premium-2 .p2-console-body{
    grid-template-columns:minmax(0,1.7fr) minmax(270px,.72fr) !important;
    gap:16px !important;
    padding:18px !important;
  }
  .spider-premium-2 .p2-console-main{
    grid-template-rows:118px 480px 126px !important;
    gap:14px !important;
  }
  .spider-premium-2 .p2-transaction-map{
    height:480px !important;
    min-height:480px !important;
  }
  .spider-premium-2 .p2-map-core{width:214px !important;height:214px !important;}
  .spider-premium-2 .p2-map-node{width:165px !important;min-width:145px !important;font-size:12px !important;}
  .spider-premium-2 .p2-console-side{min-height:738px !important;padding:15px !important;gap:11px !important;}
  .spider-premium-2 .p2-console-footer{width:calc(100% - 36px) !important;margin-inline:18px !important;}
}