/* ============================================================
   AI CALLER — SECTION ANIMATION
   Everything here is additive: with JS off or reduced motion
   on, content sits in its finished state.
   ============================================================ */

/* ---------- Generic child stagger ---------- */
[data-stagger] > * { opacity:0; transform:translateY(18px);
  transition:opacity 560ms var(--ease), transform 560ms var(--ease) }
[data-stagger].in > * { opacity:1; transform:none }

/* ---------- COMPARISON CARDS ---------- */
.cmp{transition:transform var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease),border-color var(--d-base) var(--ease)}
.cmp:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
.cmp li{opacity:0;transform:translateX(-8px);
  transition:opacity 440ms var(--ease),transform 440ms var(--ease)}
.compare.in .cmp li{opacity:1;transform:none}
.compare.in .cmp li:nth-child(1){transition-delay:120ms}
.compare.in .cmp li:nth-child(2){transition-delay:200ms}
.compare.in .cmp li:nth-child(3){transition-delay:280ms}
.compare.in .cmp:nth-child(2) li{transition-delay:220ms}
.compare.in .cmp:nth-child(2) li:nth-child(2){transition-delay:300ms}
.compare.in .cmp:nth-child(2) li:nth-child(3){transition-delay:380ms}
.compare.in .cmp:nth-child(3) li{transition-delay:320ms}
.compare.in .cmp:nth-child(3) li:nth-child(2){transition-delay:400ms}
.compare.in .cmp:nth-child(3) li:nth-child(3){transition-delay:480ms}

/* the winning card breathes so the eye lands on it */
.cmp--win{animation:win-breathe 4.5s var(--ease-soft) infinite}
@keyframes win-breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(232,130,26,0)}
  50%{box-shadow:0 0 0 7px rgba(232,130,26,.08)}
}
.cmp--win::before{animation:tag-pop 620ms var(--ease) backwards}
@keyframes tag-pop{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}

/* checkmarks draw themselves in */
.cmp--win li svg path{stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset 520ms var(--ease)}
.compare.in .cmp--win li svg path{stroke-dashoffset:0;transition-delay:420ms}
.compare.in .cmp--win li:nth-child(2) svg path{transition-delay:500ms}
.compare.in .cmp--win li:nth-child(3) svg path{transition-delay:580ms}

/* ---------- STEPS: the rail draws across ---------- */
.step{border-top:none;position:relative;padding-top:var(--s-m)}
.step::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ink-12)}
.step::after{content:'';position:absolute;top:0;left:0;width:0;height:2px;
  background:var(--amber);transition:width 720ms var(--ease)}
.steps.in .step::after{width:100%}
.steps.in .step:nth-child(1)::after{transition-delay:0ms}
.steps.in .step:nth-child(2)::after{transition-delay:180ms}
.steps.in .step:nth-child(3)::after{transition-delay:360ms}
.steps.in .step:nth-child(4)::after{transition-delay:540ms}
.step > *{opacity:0;transform:translateY(12px);
  transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.steps.in .step > *{opacity:1;transform:none}
.steps.in .step:nth-child(1) > *{transition-delay:140ms}
.steps.in .step:nth-child(2) > *{transition-delay:320ms}
.steps.in .step:nth-child(3) > *{transition-delay:500ms}
.steps.in .step:nth-child(4) > *{transition-delay:680ms}
.step:hover::after{background:var(--amber-hot)}

/* ---------- CAPABILITY CARDS ---------- */
.fcard{opacity:0;transform:translateY(20px) scale(.985);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease),
             box-shadow var(--d-base) var(--ease),border-color var(--d-base) var(--ease)}
.fgrid.in .fcard{opacity:1;transform:none}
.fgrid.in .fcard:nth-child(1){transition-delay:0ms}
.fgrid.in .fcard:nth-child(2){transition-delay:90ms}
.fgrid.in .fcard:nth-child(3){transition-delay:180ms}
.fgrid.in .fcard:nth-child(4){transition-delay:120ms}
.fgrid.in .fcard:nth-child(5){transition-delay:210ms}
.fgrid.in .fcard:nth-child(6){transition-delay:300ms}
a.fcard:hover{transform:translateY(-6px)}
.fcard-ic{transition:transform var(--d-base) var(--ease),background var(--d-base) var(--ease)}
a.fcard:hover .fcard-ic{transform:translateY(-2px) rotate(-4deg);background:var(--amber);color:#12100D}
.dark a.fcard:hover .fcard-ic{background:var(--amber);color:#12100D}

/* ---------- INTEGRATIONS: wave in ---------- */
.int{opacity:0;transform:translateY(14px);
  transition:opacity 480ms var(--ease),transform 480ms var(--ease),background var(--d-fast) var(--ease)}
.ints.in .int{opacity:1;transform:none}
.ints.in .int:nth-child(1){transition-delay:0ms}    .ints.in .int:nth-child(2){transition-delay:55ms}
.ints.in .int:nth-child(3){transition-delay:110ms}  .ints.in .int:nth-child(4){transition-delay:165ms}
.ints.in .int:nth-child(5){transition-delay:220ms}  .ints.in .int:nth-child(6){transition-delay:275ms}
.ints.in .int:nth-child(7){transition-delay:110ms}  .ints.in .int:nth-child(8){transition-delay:165ms}
.ints.in .int:nth-child(9){transition-delay:220ms}  .ints.in .int:nth-child(10){transition-delay:275ms}
.ints.in .int:nth-child(11){transition-delay:330ms} .ints.in .int:nth-child(12){transition-delay:385ms}
.int:hover{background:var(--amber-tint)}
.int b{transition:color var(--d-fast) var(--ease)}
.int:hover b{color:var(--amber-ink)}

/* ---------- INDUSTRY CARDS ---------- */
.icard{opacity:0;transform:translateY(20px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease),
             box-shadow var(--d-base) var(--ease),border-color var(--d-base) var(--ease)}
.icards.in .icard{opacity:1;transform:none}
.icards.in .icard:nth-child(1){transition-delay:0ms}
.icards.in .icard:nth-child(2){transition-delay:90ms}
.icards.in .icard:nth-child(3){transition-delay:180ms}
.icards.in .icard:nth-child(4){transition-delay:120ms}
.icards.in .icard:nth-child(5){transition-delay:210ms}
.icards.in .icard:nth-child(6){transition-delay:300ms}
a.icard:hover{transform:translateY(-6px)}
a.icard::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-base) var(--ease)}
.icard{position:relative;overflow:hidden}
a.icard:hover::after{transform:scaleX(1)}

/* ---------- PRICING ---------- */
.price{opacity:0;transform:translateY(20px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease),box-shadow var(--d-base) var(--ease)}
.prices.in .price{opacity:1;transform:none}
.prices.in .price:nth-child(1){transition-delay:0ms}
.prices.in .price:nth-child(2){transition-delay:110ms}
.prices.in .price:nth-child(3){transition-delay:220ms}
.price:hover{box-shadow:var(--sh-m)}

/* ---------- SECURITY ITEMS ---------- */
.seci{opacity:0;transform:translateY(14px);
  transition:opacity 480ms var(--ease),transform 480ms var(--ease)}
.secgrid.in .seci{opacity:1;transform:none}
.secgrid.in .seci:nth-child(1){transition-delay:0ms}
.secgrid.in .seci:nth-child(2){transition-delay:90ms}
.secgrid.in .seci:nth-child(3){transition-delay:180ms}
.secgrid.in .seci:nth-child(4){transition-delay:270ms}

/* ---------- PROOF CARDS ---------- */
.pcard{opacity:0;transform:translateY(20px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease),border-color var(--d-base) var(--ease)}
.proof.in .pcard{opacity:1;transform:none}
.proof.in .pcard:nth-child(1){transition-delay:0ms}
.proof.in .pcard:nth-child(2){transition-delay:110ms}
.proof.in .pcard:nth-child(3){transition-delay:220ms}
.pcard:hover{border-color:var(--amber)}

/* ---------- FAQ rows ---------- */
.faq details{opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.faq.in details{opacity:1;transform:none}
.faq.in details:nth-child(1){transition-delay:0ms}   .faq.in details:nth-child(2){transition-delay:55ms}
.faq.in details:nth-child(3){transition-delay:110ms} .faq.in details:nth-child(4){transition-delay:165ms}
.faq.in details:nth-child(5){transition-delay:220ms} .faq.in details:nth-child(6){transition-delay:275ms}
.faq.in details:nth-child(7){transition-delay:330ms} .faq.in details:nth-child(8){transition-delay:385ms}
.faq-a{animation:faq-open 300ms var(--ease)}
@keyframes faq-open{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ---------- Section heading underline sweep ---------- */
.sec-head .eyebrow::before{transform-origin:left;transform:scaleX(0);
  transition:transform 520ms var(--ease)}
.sec-head.in .eyebrow::before,.rv.in .eyebrow::before{transform:scaleX(1)}

/* ---------- REDUCED MOTION: everything rests finished ---------- */
@media (prefers-reduced-motion:reduce){
  [data-stagger] > *,.cmp li,.step > *,.fcard,.int,.icard,.price,.seci,.pcard,.faq details{
    opacity:1!important;transform:none!important;transition:none!important}
  .step::after{width:100%!important;transition:none!important}
  .cmp--win{animation:none!important}
  .cmp--win::before,.price--best::before{animation:none!important}
  .cmp--win li svg path{stroke-dashoffset:0!important}
  .sec-head .eyebrow::before{transform:scaleX(1)!important}
  .faq-a{animation:none!important}
}

/* ============================================================
   NO-JS FALLBACK
   Every rule above that starts content at opacity 0 only applies
   when JavaScript is running. Without it, nothing is hidden.
   ============================================================ */
html:not(.js) [data-stagger] > *,
html:not(.js) .cmp li,
html:not(.js) .step > *,
html:not(.js) .fcard,
html:not(.js) .int,
html:not(.js) .icard,
html:not(.js) .price,
html:not(.js) .seci,
html:not(.js) .pcard,
html:not(.js) .faq details,
html:not(.js) .rv,
html:not(.js) .spec > *,
html:not(.js) .panel-row,
html:not(.js) .flow-item > *,
html:not(.js) .ctable-wrap tbody tr{opacity:1!important;transform:none!important}
html:not(.js) .step::after,
html:not(.js) .spec::after{width:100%!important}
html:not(.js) .flow::after{height:calc(100% - 20px)!important}
html:not(.js) .flow-item::before{opacity:1!important;transform:scale(1)!important}
html:not(.js) .sec-head .eyebrow::before{transform:scaleX(1)!important}