/* THESIVE v3.4.4 — containment + motion polish
   Focus: Human Attention, Portfolio Reality, THESIVE AI state containment.
   v3.4.3 remains the strategic/visual base. */

:root{--v344-gold:#d9a13a;--v344-green:#6fce8f;--v344-panel:#080a0b}

/* ---------------------------------------------------------------
   HUMAN ATTENTION
   Keep evidence outside the protected human-attention core.
   Paths draw, settle, and finally dim while judgement remains.
   --------------------------------------------------------------- */
.v341-attention-field{min-height:448px}
.v341-attention-field svg{z-index:1;overflow:hidden}
.v341-att-core{
  z-index:4;
  width:214px;
  height:214px;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 50% 40%,rgba(224,164,62,.105),rgba(8,10,11,.985) 62%),
    var(--v344-panel);
  box-shadow:0 0 0 1px rgba(224,164,62,.015),0 0 52px rgba(224,164,62,.07);
  overflow:visible;
}
.v341-att-core:before{inset:-18px}
.v341-att-core:after{inset:-36px}
.v341-att-core small{font-size:9px;letter-spacing:.19em}
.v341-att-core strong{
  width:100%;
  max-width:178px;
  text-align:center;
  font-size:28px;
  line-height:1;
  letter-spacing:-.005em;
  white-space:nowrap;
}
.v341-att-core span{width:116px;margin-top:8px;padding-top:11px;font-size:10px}
.v341-att-node{z-index:3}

/* The path movement is a one-way evidence draw, not an endless conveyor belt. */
.v341-attention-field .v341-path{
  opacity:.07;
  stroke-dasharray:8 12;
  stroke-dashoffset:92;
  animation:none!important;
  transition:stroke 1s ease,opacity 1s ease,filter 1s ease,stroke-dashoffset 1.45s cubic-bezier(.22,1,.36,1);
}
.v341-attention-field[data-v341-state="0"] .p-research,
.v341-attention-field[data-v341-state="1"] .p-remember,
.v341-attention-field[data-v341-state="2"] .p-monitor,
.v341-attention-field[data-v341-state="3"] .p-challenge{
  stroke:#d39b38;
  opacity:.72;
  stroke-dashoffset:0;
  filter:drop-shadow(0 0 3px rgba(224,164,62,.2));
}
/* Retain earlier context quietly rather than erasing it. */
.v341-attention-field[data-v341-state="1"] .p-research,
.v341-attention-field[data-v341-state="2"] .p-research,
.v341-attention-field[data-v341-state="2"] .p-remember,
.v341-attention-field[data-v341-state="3"] .p-research,
.v341-attention-field[data-v341-state="3"] .p-remember,
.v341-attention-field[data-v341-state="3"] .p-monitor{
  stroke:#9f7a39;
  opacity:.2;
  stroke-dashoffset:0;
  filter:none;
}
.v341-attention-field[data-v341-state="4"] .v341-path{
  stroke:#748078;
  opacity:.09;
  stroke-dashoffset:0;
  filter:none;
}
.v341-attention-field[data-v341-state="4"] .v341-att-node{opacity:.48;transform:none;color:#80888a}
.v341-attention-field[data-v341-state="4"] .v341-att-core{
  transform:translate(-50%,-50%) scale(1.012);
  border-color:rgba(111,206,143,.33);
  box-shadow:0 0 56px rgba(111,206,143,.075);
}

/* ---------------------------------------------------------------
   PORTFOLIO REALITY
   Keep the supporting phrase inside the core at every breakpoint.
   --------------------------------------------------------------- */
.v341-portfolio-field .portfolio-field-core{
  width:176px;
  height:176px;
  box-sizing:border-box;
  padding:22px 18px;
  background:
    radial-gradient(circle at 50% 38%,rgba(224,164,62,.09),rgba(8,10,11,.985) 65%),
    var(--v344-panel);
  overflow:hidden;
}
.v341-portfolio-field .portfolio-field-core b{
  display:block;
  width:100%;
  max-width:126px;
  margin:0 auto;
  text-align:center;
  line-height:1.2;
  white-space:normal;
  text-wrap:balance;
}
.v341-portfolio-field .portfolio-field-core small{
  display:block;
  width:100%;
  max-width:108px;
  margin:7px auto 0;
  text-align:center;
  font-size:7.2px;
  line-height:1.35;
  letter-spacing:.095em;
  white-space:normal;
  overflow-wrap:normal;
  text-wrap:balance;
}

/* ---------------------------------------------------------------
   MEET THESIVE AI
   State names are content, never allowed to escape their controls.
   --------------------------------------------------------------- */
.v341-ai-panel{overflow:hidden}
.v341-ai-panel .v340-ai-states{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
}
.v341-ai-panel .v340-ai-states span{
  box-sizing:border-box;
  min-width:0;
  min-height:42px;
  padding:9px 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.2;
  white-space:normal;
  overflow:hidden;
  text-wrap:balance;
}

@media(max-width:1100px){
  .v341-att-core{width:196px;height:196px}
  .v341-att-core strong{font-size:26px;max-width:162px}
  .v341-portfolio-field .portfolio-field-core{width:168px;height:168px}
  .v341-ai-panel .v340-ai-states span{font-size:8.5px;padding-inline:5px}
}

@media(max-width:820px){
  .v341-att-core{width:174px;height:174px}
  .v341-att-core strong{font-size:24px;max-width:144px}
  .v341-att-core:before{inset:-14px}.v341-att-core:after{inset:-27px}
  .v341-ai-panel .v340-ai-states{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v341-ai-panel .v340-ai-states span:nth-child(4),
  .v341-ai-panel .v340-ai-states span:nth-child(5){grid-column:auto}
}

@media(max-width:620px){
  /* Mobile uses stacked information architecture; no desktop path geometry. */
  .v341-attention-field{min-height:0!important}
  .v341-att-core{
    width:158px!important;
    height:158px!important;
    overflow:hidden;
  }
  .v341-att-core:before{inset:-10px}.v341-att-core:after{inset:-20px}
  .v341-att-core strong{font-size:22px;max-width:132px;white-space:normal;text-wrap:balance}
  .v341-att-core span{width:96px;font-size:9px;letter-spacing:.13em}

  .v341-portfolio-field .portfolio-field-core{
    width:158px!important;
    height:158px!important;
    padding:20px 16px!important;
    overflow:hidden;
  }
  .v341-portfolio-field .portfolio-field-core b{max-width:112px;font-size:9px}
  .v341-portfolio-field .portfolio-field-core small{max-width:96px;font-size:6.8px;letter-spacing:.08em}

  .v341-ai-panel .v340-ai-states{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .v341-ai-panel .v340-ai-states span{font-size:9px!important;min-height:44px!important;padding:9px 6px!important}
  .v341-ai-panel .v340-ai-states span:last-child{grid-column:1/-1!important}
}

@media(max-width:430px){
  .v341-att-core{width:152px!important;height:152px!important}
  .v341-att-core strong{font-size:21px;max-width:124px}
  .v341-portfolio-field .portfolio-field-core{width:152px!important;height:152px!important}
  .v341-ai-panel .v340-ai-states{grid-template-columns:1fr!important}
  .v341-ai-panel .v340-ai-states span:last-child{grid-column:auto!important}
}

@media(prefers-reduced-motion:reduce){
  .v341-attention-field .v341-path{stroke-dashoffset:0!important;opacity:.16!important}
}