/* Three Leadlinx diagrams adapted from the motion and framing of Ink Orbit. */
.approach .capability-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.approach .capability-card{position:relative;min-width:0;min-height:370px;padding:20px;border-radius:17px;background:#f8fbff;box-shadow:0 6px 24px rgba(16,35,72,.025);overflow:visible;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.approach .capability-card:hover{border-color:#b7cef4;box-shadow:0 14px 36px rgba(16,35,72,.075)}
.approach .cap-large{grid-column:auto;background:#f4f8ff}
.approach .cap-top{gap:12px}
.approach .cap-label{color:var(--blue-dark);font-size:.7rem}
.approach .cap-index{color:#7385a1;font-size:.62rem;letter-spacing:.09em;text-align:right}
.approach .cap-corner{position:absolute;width:13px;height:13px;border:solid #b8cce9;pointer-events:none;transition:transform .3s ease,border-color .3s ease}
.approach .cap-corner-tl{top:-5px;left:-5px;border-width:1.5px 0 0 1.5px}
.approach .cap-corner-tr{top:-5px;right:-5px;border-width:1.5px 1.5px 0 0}
.approach .cap-corner-bl{bottom:-5px;left:-5px;border-width:0 0 1.5px 1.5px}
.approach .cap-corner-br{bottom:-5px;right:-5px;border-width:0 1.5px 1.5px 0}
.approach .capability-card:hover .cap-corner{border-color:var(--blue)}
.approach .capability-card:hover .cap-corner-tl{transform:translate(-2px,-2px)}
.approach .capability-card:hover .cap-corner-tr{transform:translate(2px,-2px)}
.approach .capability-card:hover .cap-corner-bl{transform:translate(-2px,2px)}
.approach .capability-card:hover .cap-corner-br{transform:translate(2px,2px)}
.approach .cap-visual{position:relative;display:block;width:100%;height:auto;aspect-ratio:360/190;margin:20px 0 15px;border:1px solid #e1eafa;border-radius:10px;background-color:#fff;background-image:repeating-linear-gradient(135deg,rgba(92,143,255,.035) 0 1px,transparent 1px 10px);overflow:hidden}
.approach .cap-diagram svg{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.approach .cap-copy{margin-top:auto}
.approach .cap-copy h3{font-size:1.4rem;margin:0 0 7px}
.approach .cap-copy p{max-width:54ch;line-height:1.6}
.approach .cap-large .cap-copy p{max-width:54ch}
.cap-diagram .diagram-panel{fill:#fff;stroke:#cad9ee;stroke-width:1.3}
.cap-diagram .diagram-accent{fill:var(--blue)}
.cap-diagram .diagram-chip{fill:#e9f1ff}
.cap-diagram .diagram-chip-text{fill:#365aa0;font:600 9px 'IBM Plex Mono',monospace;letter-spacing:1px}
.cap-diagram .diagram-kicker{fill:var(--navy);font:600 11px 'IBM Plex Mono',monospace;letter-spacing:1px}
.cap-diagram .diagram-label,.cap-diagram .diagram-caption{fill:#607493;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:1px}
.cap-diagram .diagram-caption-muted{fill:#99a9bf}
.cap-diagram .diagram-skeleton{fill:none;stroke:#dce6f3;stroke-width:5;stroke-linecap:round}
.cap-diagram .diagram-track{fill:none;stroke:#d6e2f1;stroke-width:1.7;stroke-linecap:round}
.cap-diagram .diagram-standard-line{fill:none;stroke:#a8bfe8;stroke-width:1.5;stroke-dasharray:3 4}
.cap-diagram .standard-trace{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.cap-diagram .standard-trace-2{stroke:#74b5df}
.cap-diagram .standard-trace-3{stroke:var(--aqua)}
.cap-diagram .standard-node,.cap-diagram .standard-result-dot{fill:var(--aqua)}
.cap-diagram .standard-result{stroke:#a8dcd5}
.cap-diagram .intent-source{fill:var(--blue)}
.cap-diagram .intent-source-b{fill:var(--aqua)}
.cap-diagram .intent-trace{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.cap-diagram .intent-trace-b{stroke:var(--aqua)}
.cap-diagram .intent-halo{fill:rgba(69,205,184,.10);stroke:rgba(69,205,184,.32);stroke-width:1.5}
.cap-diagram .intent-core{fill:#e3f8f3;stroke:var(--aqua);stroke-width:1.5}
.cap-diagram .intent-check,.cap-diagram .review-check{fill:none;stroke:#208575;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cap-diagram .review-scan{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;opacity:.85}
.cap-diagram .review-gate{fill:#e8f8f4;stroke:var(--aqua);stroke-width:1.6}
.cap-diagram .review-pass{fill:none;stroke:var(--aqua);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.cap-diagram .review-hold{fill:none;stroke:#bdcadd;stroke-width:2;stroke-dasharray:3 5}
.cap-diagram .review-pass-dot{fill:var(--aqua)}
.cap-diagram .review-hold-dot{fill:#b8c8dc}

/* Each sequence runs only while its card is on screen. */
.approach .motion-active .standard-trace-1{animation:standard-line-1 7s ease-in-out infinite}
.approach .motion-active .standard-trace-2{animation:standard-line-2 7s ease-in-out infinite}
.approach .motion-active .standard-trace-3{animation:standard-line-3 7s ease-in-out infinite}
.approach .motion-active .standard-node-1{animation:standard-dot-1 7s ease-in-out infinite}
.approach .motion-active .standard-node-2{animation:standard-dot-2 7s ease-in-out infinite}
.approach .motion-active .standard-node-3{animation:standard-dot-3 7s ease-in-out infinite}
.approach .motion-active .intent-trace-a{animation:intent-line-a 6.5s ease-in-out infinite}
.approach .motion-active .intent-trace-b{animation:intent-line-b 6.5s ease-in-out infinite}
.approach .motion-active .intent-halo{animation:intent-halo 6.5s ease-in-out infinite;transform-origin:264px 95px}
.approach .motion-active .intent-check{animation:intent-check 6.5s ease-in-out infinite}
.approach .motion-active .review-scan{animation:review-scan 6.8s ease-in-out infinite}
.approach .motion-active .review-pass{animation:review-pass 6.8s ease-in-out infinite}
.approach .motion-active .review-pass-dot{animation:review-dot 6.8s ease-in-out infinite}

@keyframes standard-line-1{0%{stroke-dashoffset:1}18%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes standard-line-2{0%,12%{stroke-dashoffset:1}32%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes standard-line-3{0%,26%{stroke-dashoffset:1}46%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes standard-dot-1{0%,15%{opacity:.2}20%,84%{opacity:1}100%{opacity:.2}}
@keyframes standard-dot-2{0%,29%{opacity:.2}34%,84%{opacity:1}100%{opacity:.2}}
@keyframes standard-dot-3{0%,43%{opacity:.2}48%,84%{opacity:1}100%{opacity:.2}}
@keyframes intent-line-a{0%{stroke-dashoffset:1}32%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes intent-line-b{0%,18%{stroke-dashoffset:1}48%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes intent-halo{0%,43%,100%{transform:scale(1);opacity:.65}52%,70%{transform:scale(1.14);opacity:1}}
@keyframes intent-check{0%,43%{opacity:.25}52%,82%{opacity:1}100%{opacity:.25}}
@keyframes review-scan{0%{transform:translateY(0);opacity:0}10%{opacity:1}39%{transform:translateY(82px);opacity:1}46%,100%{transform:translateY(82px);opacity:0}}
@keyframes review-pass{0%,40%{stroke-dashoffset:1}62%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes review-dot{0%,59%,100%{opacity:.3}66%,84%{opacity:1}}

@media(max-width:980px){
  .approach .capability-grid{grid-template-columns:1fr}
  .approach .capability-card{min-height:0}
  .approach .cap-visual{max-height:230px;margin:20px 0}
}
@media(max-width:480px){
  .approach .capability-card{padding:18px}
  .approach .cap-index{font-size:.55rem}
}
@media(prefers-reduced-motion:reduce){
  .approach .motion-active .cap-diagram *{animation:none!important}
  .approach .capability-card,.approach .cap-corner{transition:none}
}