/* ==========================================================================
   EMPLOYAI — Product visual system
   New "ea-" prefixed components layered on top of the existing design
   system in styles.css (same tokens: --primary/--secondary/--gray-*/--c-*/
   --shadow-*/--radius-*/--ease/--font-*). Powers the realistic product-
   screen mockups (AI matching, pipeline, candidate intelligence, resume
   analysis, workforce analytics, team builder) and the "Limitless" section.

   Perf/accessibility notes:
   - Infinite CSS animations only run while a JS-added `.is-inview` class is
     present (IntersectionObserver in employai-visuals.js); otherwise paused.
   - The global `prefers-reduced-motion` override in styles.css already
     zeroes animation/transition durations, which neutralizes everything
     below automatically — no separate reduced-motion block needed here.
   ========================================================================== */

/* ---------- product mockup frame (browser/app chrome) ---------- */
.ea-mockup{
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop);overflow:hidden;
}
.ea-mockup-bar{
  display:flex;align-items:center;gap:var(--sp-2);padding:12px 16px;border-bottom:1px solid var(--gray-200);background:var(--gray-50);
}
.ea-mockup-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-200)}
/* macOS/Safari-style traffic-light window controls (close/minimize/zoom) */
.ea-mockup-bar .ea-mockup-dot:nth-child(1){background:#ff5f57}
.ea-mockup-bar .ea-mockup-dot:nth-child(2){background:#febc2e}
.ea-mockup-bar .ea-mockup-dot:nth-child(3){background:#28c840}
.ea-mockup-title{
  margin-left:var(--sp-3);font-family:var(--font-mono);font-size:.75rem;color:var(--gray-500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ea-mockup-live{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:.6875rem;color:var(--gray-500);letter-spacing:.04em;text-transform:uppercase;
}
.ea-live-dot{width:6px;height:6px;border-radius:50%;background:var(--c-green);flex-shrink:0}
.ea-mockup.is-inview .ea-live-dot{animation:ea-pulse 2.2s ease-in-out infinite}
.ea-mockup-body{padding:var(--sp-6)}
@media (max-width:560px){.ea-mockup-body{padding:var(--sp-5) var(--sp-4)}}

/* ---------- avatar ---------- */
.ea-avatar{
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  font-family:var(--font-display);font-weight:700;flex-shrink:0;
  width:40px;height:40px;font-size:.875rem;
}
.ea-avatar.sm{width:30px;height:30px;font-size:.6875rem}
.ea-avatar.lg{width:64px;height:64px;font-size:1.25rem}
.ea-avatar.c-blue{background:var(--c-blue-soft);color:var(--c-blue)}
.ea-avatar.c-purple{background:var(--c-purple-soft);color:var(--c-purple)}
.ea-avatar.c-green{background:var(--c-green-soft);color:var(--c-green)}
.ea-avatar.c-orange{background:var(--c-orange-soft);color:var(--c-orange)}
.ea-avatar.c-coral{background:var(--c-coral-soft);color:var(--c-coral)}
.ea-avatar.c-teal{background:var(--c-teal-soft);color:var(--c-teal)}

/* ---------- match score chip ---------- */
.ea-score{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:600;
  font-size:.8125rem;color:var(--primary);
}
.ea-score .num{font-size:1rem}
.ea-score-badge{
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--primary);color:var(--secondary);font-family:var(--font-mono);font-weight:700;
  width:52px;height:52px;font-size:.9375rem;flex-shrink:0;
}

/* ---------- progress / meter bar ---------- */
.ea-bar{height:6px;border-radius:99px;background:var(--gray-200);overflow:hidden}
.ea-bar-fill{
  height:100%;border-radius:99px;background:var(--primary);width:0%;
  transition:width 1.1s var(--ease);
}
.ea-bar-fill.c-accent{background:var(--secondary)}

/* ---------- section scaffolding shared by the new visuals ---------- */
.ea-eyebrow-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}

/* ==========================================================================
   How EMPLOYAI Works — pinned, scroll-scrubbed section (index.html)
   Technique: a tall wrapper (N * ~85vh) containing a `position:sticky`
   inner viewport, with scroll fraction through the wrapper mapped to an
   active-step index — the position:sticky-wrapper pinned-section pattern
   also used by the Jwalix reference site's own "how it works" section
   (behavior only, no Jwalix copy/visuals/layout reused). Step entrance/exit
   and the per-card content stagger are driven at runtime by Motion
   (motion.dev — Framer Motion's vanilla-JS engine) via scroll()/animate();
   see initPinnedWorks in employai-visuals.js. Opacity/transform below are
   only the *default* (pre-JS / no-JS) resting state — Motion owns the
   transition itself, so no CSS `transition` is declared for those properties.
   ========================================================================== */
.ea-pinned-wrap{position:relative}
.ea-pinned-viewport{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.ea-pinned-steps{position:relative;min-height:360px}
.ea-pinned-step{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(18px);pointer-events:none}
.ea-pinned-step.is-active{pointer-events:auto}
.ea-pinned-dots{display:flex;gap:8px;margin-top:var(--sp-6)}
.ea-pinned-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--gray-200);transition:background .3s var(--ease),transform .3s var(--ease)}
.ea-pinned-dots .dot.is-active{background:var(--ink);transform:scale(1.3)}

.ea-step-card{
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:var(--sp-7);box-shadow:var(--shadow-pop);max-width:460px;width:100%;
}
.ea-step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5)}
.ea-step-num{font-family:var(--font-mono);font-size:.75rem;color:var(--gray-500);letter-spacing:.04em}
.ea-step-num span{color:var(--gray-200)}
.ea-step-card h3{margin-top:0}
.ea-step-card p{color:var(--gray-700);font-size:.9375rem;margin-top:var(--sp-3)}
.ea-step-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-5)}

/* three ways this collapses to a plain static stacked list instead of a
   pinned scroll-scrubbed one: narrow viewport, prefers-reduced-motion, and
   (via the .ea-pinned-fallback class added by JS) the Motion CDN failing to
   load — same fallback markup/CSS shape in all three cases */
@media (max-width:900px){
  .ea-pinned-wrap{height:auto!important}
  .ea-pinned-viewport{position:static;min-height:0;display:block}
  .ea-pinned-steps{min-height:0;display:flex;flex-direction:column;gap:var(--sp-5)}
  .ea-pinned-step{position:static;opacity:1!important;transform:none!important;pointer-events:auto}
  .ea-step-card{max-width:none}
  .ea-pinned-dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ea-pinned-wrap{height:auto!important}
  .ea-pinned-viewport{position:static;min-height:0;display:block}
  .ea-pinned-steps{min-height:0;display:flex;flex-direction:column;gap:var(--sp-5)}
  .ea-pinned-step{position:static;opacity:1!important;transform:none!important;pointer-events:auto}
  .ea-step-card{max-width:none}
  .ea-pinned-dots{display:none}
}
.ea-pinned-wrap.ea-pinned-fallback{height:auto!important}
.ea-pinned-wrap.ea-pinned-fallback .ea-pinned-viewport{position:static;min-height:0;display:block}
.ea-pinned-wrap.ea-pinned-fallback .ea-pinned-steps{min-height:0;display:flex;flex-direction:column;gap:var(--sp-5)}
.ea-pinned-wrap.ea-pinned-fallback .ea-pinned-step{position:static;opacity:1!important;transform:none!important;pointer-events:auto}
.ea-pinned-wrap.ea-pinned-fallback .ea-step-card{max-width:none}
.ea-pinned-wrap.ea-pinned-fallback .ea-pinned-dots{display:none}

/* ==========================================================================
   Hero product visualization (index.html)
   ========================================================================== */
.ea-hero-demo{position:absolute;inset:0}
.ea-hero-job{
  position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(240px,72%);text-align:center;
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--sp-4);
  box-shadow:var(--shadow-card);opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease);z-index:3;
}
.ea-hero-job.is-active{opacity:1}
.ea-hero-job strong{font-size:.9375rem;display:block;margin-top:2px}
.ea-hero-job .tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px}
.ea-hero-ai-badge{
  position:absolute;top:29%;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;
  background:var(--primary);color:var(--secondary);font-family:var(--font-mono);font-size:.75rem;font-weight:600;
  padding:8px 16px;border-radius:99px;opacity:0;transition:opacity .4s var(--ease);white-space:nowrap;z-index:3;
}
.ea-hero-ai-badge.is-active{opacity:1}
.ea-hero-ai-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--secondary);animation:ea-pulse 1.4s ease-in-out infinite}
.ea-hero-lines{position:absolute;inset:0;z-index:1}
.ea-hero-lines path{fill:none;stroke:var(--gray-200);stroke-width:1.5;transition:stroke-dashoffset .7s var(--ease)}
.ea-hero-candidates{position:absolute;top:56%;left:2%;right:2%;display:flex;justify-content:space-between;gap:8px;z-index:3}
.ea-hero-cand{
  display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--white);border:1px solid var(--gray-200);
  border-radius:var(--radius-md);padding:10px 8px;width:23%;text-align:center;box-shadow:var(--shadow-card);
  opacity:0;transform:translateY(8px) scale(.92);transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.ea-hero-cand.is-active{opacity:1;transform:translateY(0) scale(1)}
.ea-hero-cand strong{font-size:.6875rem;font-weight:600}
.ea-hero-cand .score{font-family:var(--font-mono);font-size:.8125rem;font-weight:700;color:var(--primary)}
.ea-hero-cand.is-best-active{border-color:var(--ink);box-shadow:var(--shadow-pop)}
.ea-hero-cand.is-best-active .score{color:var(--c-green)}
.ea-hero-recommendation{
  position:absolute;top:82%;left:58%;display:flex;flex-direction:column;gap:2px;background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:10px 14px;box-shadow:var(--shadow-pop);
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);z-index:4;
}
.ea-hero-recommendation.is-active{opacity:1;transform:translateY(0)}
.ea-hero-recommendation .badge{font-family:var(--font-mono);font-size:.625rem;color:var(--primary);text-transform:uppercase;letter-spacing:.05em}
.ea-hero-recommendation strong{font-size:1rem;color:var(--c-green)}
.ea-hero-recommendation .note{font-size:.75rem;color:var(--gray-700)}
@media (max-width:1100px){.ea-hero-recommendation{left:50%;transform:translateX(-50%) translateY(6px);top:86%}
  .ea-hero-recommendation.is-active{transform:translateX(-50%) translateY(0)}}

/* ==========================================================================
   AI Candidate Matching (index.html)
   ========================================================================== */
.ea-match-flow{display:flex;flex-direction:column;gap:var(--sp-3)}
.ea-match-row{
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);
  background:var(--gray-50);border:1px solid var(--gray-200);opacity:.35;transform:translateX(-8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.ea-match-row.is-active{opacity:1;transform:translateX(0);background:var(--white);border-color:var(--ink)}
.ea-match-row .step-ic{
  width:32px;height:32px;border-radius:8px;background:var(--white);border:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:center;color:var(--gray-500);flex-shrink:0;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.ea-match-row.is-active .step-ic{background:var(--primary);color:var(--secondary);border-color:var(--primary)}
.ea-match-row strong{font-size:.9375rem}
.ea-match-row .count{margin-left:auto;font-family:var(--font-mono);font-size:.8125rem;color:var(--gray-500);white-space:nowrap}

.ea-match-results{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
@media (max-width:820px){.ea-match-results{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ea-match-results{grid-template-columns:1fr}}
.ea-match-card{
  border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-4);text-align:left;
  opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ea-match-card.is-active{opacity:1;transform:translateY(0) scale(1)}
.ea-match-card:hover{border-color:var(--ink);box-shadow:var(--shadow-card)}
.ea-match-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.ea-match-card .score-num{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--primary)}
.ea-match-card .score-num::after{content:'%';font-size:.8125rem;color:var(--gray-500);margin-left:1px}
.ea-match-card h4{font-size:.9375rem;margin-top:2px}
.ea-match-card .role{font-size:.8125rem;color:var(--gray-700);margin-top:1px}
.ea-match-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3)}
.ea-match-card.is-best{border-color:var(--ink);box-shadow:var(--shadow-pop);position:relative}
.ea-match-card.is-best::before{
  content:'Best match';position:absolute;top:-10px;left:var(--sp-4);background:var(--primary);color:var(--secondary);
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;
}

/* SVG connector from the requirement label down to the best-match card */
.ea-match-results-wrap{position:relative}
.ea-connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.ea-connector path{
  fill:none;stroke:var(--secondary);stroke-width:2;stroke-linecap:round;
  transition:stroke-dashoffset .8s var(--ease),opacity .3s var(--ease);opacity:0;
}
.ea-connector.is-drawn path{opacity:.9}
.ea-connector-dot{fill:var(--ink);opacity:0;transition:opacity .3s var(--ease)}
.ea-connector.is-drawn .ea-connector-dot{opacity:1}
.ea-match-results{position:relative;z-index:1}

/* ==========================================================================
   Recruitment Pipeline board (index.html)
   ========================================================================== */
.ea-pipeline{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3);align-items:start}
@media (max-width:980px){.ea-pipeline{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.ea-pipeline{grid-template-columns:1fr 1fr}}
.ea-pipeline-col{
  background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);
  padding:var(--sp-3);min-height:120px;transition:background .18s var(--ease),border-color .18s var(--ease);
}
.ea-pipeline-col.is-dragover{background:var(--accent-soft);border-color:var(--ink);border-style:dashed}
.ea-pipeline-head{
  display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);
  font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-700);
  margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--gray-200);
}
.ea-pipeline-head .n{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--white);border:1px solid var(--gray-200);font-size:.6875rem;color:var(--gray-700);
}
.ea-pipeline-cards{display:flex;flex-direction:column;gap:var(--sp-2);min-height:40px}
.ea-pipeline-card{
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:10px;
  cursor:grab;transition:border-color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease),opacity .15s var(--ease);
}
.ea-pipeline-card:hover{border-color:var(--ink);box-shadow:var(--shadow-card)}
.ea-pipeline-card.is-dragging{opacity:.4}
.ea-pipeline-card.is-moved{animation:ea-card-land .4s var(--ease)}
.ea-pipeline-card.is-demo{border-color:var(--secondary);box-shadow:0 0 0 3px var(--accent-ring)}
.ea-pipeline-card .row1{display:flex;align-items:center;gap:8px}
.ea-pipeline-card strong{font-size:.8125rem;display:block;line-height:1.25}
.ea-pipeline-card .role{font-size:.75rem;color:var(--gray-700);display:block}
.ea-pipeline-card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.ea-pipeline-card .score{font-family:var(--font-mono);font-size:.6875rem;color:var(--gray-500)}
.ea-pipeline-move{display:flex;gap:4px}
.ea-pipeline-move button{
  width:22px;height:22px;border-radius:6px;border:1px solid var(--gray-200);display:flex;align-items:center;
  justify-content:center;color:var(--gray-700);transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.ea-pipeline-move button:hover:not(:disabled){background:var(--primary);color:var(--secondary);border-color:var(--primary)}
.ea-pipeline-move button:disabled{opacity:.3;cursor:not-allowed}
.ea-pipeline-empty{font-size:.75rem;color:var(--gray-500);text-align:center;padding:var(--sp-3) 0}

/* ==========================================================================
   Candidate Intelligence profile (candidates.html)
   ========================================================================== */
.ea-profile-head{display:flex;gap:var(--sp-5);align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.ea-profile-id{display:flex;gap:var(--sp-4);align-items:center}
.ea-profile-id h3{font-size:1.25rem}
.ea-profile-id .role{color:var(--gray-700);font-size:.9375rem;margin-top:2px}
.ea-profile-facts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:10px}
.ea-profile-facts span{
  display:inline-flex;align-items:center;gap:5px;font-size:.75rem;color:var(--gray-700);
  font-family:var(--font-mono);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:99px;padding:4px 10px;
}
.ea-profile-match{margin-left:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.ea-profile-match .label{font-family:var(--font-mono);font-size:.6875rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}
.ea-skill-row{display:grid;grid-template-columns:120px 1fr 40px;align-items:center;gap:var(--sp-3);margin-bottom:10px}
.ea-skill-row .name{font-size:.8125rem;font-weight:600}
.ea-skill-row .pct{font-family:var(--font-mono);font-size:.75rem;color:var(--gray-700);text-align:right}
.ea-timeline{border-left:2px solid var(--gray-200);padding-left:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
.ea-timeline-item{
  position:relative;opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.ea-timeline-item.is-active{opacity:1;transform:translateY(0)}
.ea-timeline-item::before{
  content:'';position:absolute;left:calc(-1 * var(--sp-4) - 5px);top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--primary);border:2px solid var(--white);box-shadow:0 0 0 1px var(--gray-200);
}
.ea-timeline-item strong{font-size:.9375rem;display:block}
.ea-timeline-item .org{font-size:.8125rem;color:var(--gray-700)}
.ea-timeline-item .period{font-family:var(--font-mono);font-size:.75rem;color:var(--gray-500);margin-top:2px}
.ea-rec-list{display:flex;flex-direction:column;gap:10px}
.ea-rec-card{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:12px 14px;
  border:1px solid var(--gray-200);border-radius:var(--radius-sm);
}
.ea-rec-card strong{font-size:.875rem;display:block}
.ea-rec-card .co{font-size:.8125rem;color:var(--gray-700)}
.ea-rec-card{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ea-rec-card.is-active{opacity:1;transform:translateY(0)}
.ea-score-badge{opacity:0;transform:scale(.85);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ea-score-badge.is-active{opacity:1;transform:scale(1)}
.ea-profile-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--gray-200)}

/* ==========================================================================
   AI Resume Intelligence (candidates.html)
   ========================================================================== */
.ea-resume-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--sp-6)}
@media (max-width:860px){.ea-resume-grid{grid-template-columns:1fr}}
.ea-resume-preview{
  position:relative;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);
  padding:var(--sp-5);overflow:hidden;
}
.ea-resume-line{height:9px;border-radius:3px;background:var(--gray-200);margin-bottom:10px}
.ea-resume-line.head{width:55%;height:14px;background:var(--gray-500)}
.ea-resume-line.w80{width:80%}.ea-resume-line.w60{width:60%}.ea-resume-line.w90{width:90%}.ea-resume-line.w40{width:40%}.ea-resume-line.w70{width:70%}
.ea-resume-block{margin-top:var(--sp-4)}
.ea-scan-line{
  position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,var(--primary) 45%,var(--secondary) 55%,transparent);
  opacity:0;
}
.ea-resume-preview.is-scanning .ea-scan-line{opacity:1;animation:ea-scan 2.4s ease-in-out infinite}
.ea-resume-results{display:flex;flex-direction:column;gap:var(--sp-5)}
.ea-result-block h4{font-size:.8125rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--gray-700);margin-bottom:10px}
.ea-tag-list{display:flex;flex-wrap:wrap;gap:8px}
.ea-tag-in{opacity:0;transform:translateY(6px) scale(.9);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ea-tag-in.is-active{opacity:1;transform:translateY(0) scale(1)}
.ea-confidence-row{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.ea-confidence{display:flex;flex-direction:column;gap:6px;min-width:140px}
.ea-confidence .num{font-family:var(--font-display);font-size:1.5rem;font-weight:700}
.ea-confidence .lbl{font-size:.75rem;color:var(--gray-700)}
.ea-missing-list{display:flex;flex-wrap:wrap;gap:8px}

/* ==========================================================================
   AI Screening animation (employers.html)
   ========================================================================== */
.ea-screening-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.ea-screening-head .role{font-size:.8125rem;color:var(--gray-700)}
.ea-screening-status{
  margin-left:auto;font-family:var(--font-mono);font-size:.75rem;color:var(--gray-500);
  white-space:nowrap;transition:color .2s var(--ease);
}
.ea-screening-status.is-done{color:var(--c-green)}
.ea-checklist{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp-6)}
.ea-checklist-row{display:flex;align-items:center;gap:var(--sp-3);opacity:.45;transition:opacity .3s var(--ease)}
.ea-checklist-row.is-done{opacity:1}
.ea-chk-dot{
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--gray-200);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .25s var(--ease),border-color .25s var(--ease);
}
.ea-checklist-row.is-done .ea-chk-dot{background:var(--primary);border-color:var(--primary)}
.ea-chk-dot svg path{
  fill:none;stroke:var(--secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-dashoffset .35s var(--ease);
}
.ea-checklist-row strong{font-size:.875rem;display:block}
.ea-checklist-row .detail{font-size:.75rem;color:var(--gray-700)}
.ea-screening-score{display:flex;align-items:center;gap:var(--sp-4);padding-top:var(--sp-5);border-top:1px solid var(--gray-200)}
.ea-screening-score .label{font-family:var(--font-mono);font-size:.75rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}

/* ==========================================================================
   AI Automation Workflow (employers.html)
   ========================================================================== */
.ea-workflow{position:relative;padding-left:var(--sp-6);border-left:2px solid var(--gray-200)}
.ea-workflow-progress{position:absolute;left:-2px;top:0;width:2px;height:0%;background:var(--primary);transition:height .5s var(--ease)}
.ea-workflow-node{position:relative;padding-bottom:var(--sp-6)}
.ea-workflow-node:last-child{padding-bottom:0}
.ea-workflow-dot{
  position:absolute;left:calc(-1 * var(--sp-6) - 8px);top:2px;width:16px;height:16px;border-radius:50%;
  background:var(--white);border:2px solid var(--gray-200);transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.ea-workflow-node.is-processing .ea-workflow-dot{border-color:var(--primary);animation:ea-pulse 1.2s ease-in-out infinite}
.ea-workflow-node.is-done .ea-workflow-dot{background:var(--primary);border-color:var(--primary)}
.ea-workflow-body strong{font-size:.9375rem;display:block}
.ea-workflow-body .detail{font-size:.8125rem;color:var(--gray-700);margin-top:2px}
.ea-workflow-body .status{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.75rem;color:var(--gray-500);
  margin-top:6px;
}
.ea-workflow-node.is-done .status{color:var(--c-green)}

/* ==========================================================================
   Recruitment Form Builder (employers.html, drag-and-drop)
   ========================================================================== */
.ea-formbuilder{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--sp-6);align-items:start}
@media (max-width:900px){.ea-formbuilder{grid-template-columns:1fr}}
.ea-fb-library{display:flex;flex-direction:column;gap:8px}
.ea-fb-field{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);
  background:var(--white);cursor:grab;text-align:left;width:100%;font-size:.875rem;font-weight:600;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),opacity .15s var(--ease);
}
.ea-fb-field:hover:not(:disabled){border-color:var(--ink);box-shadow:var(--shadow-card)}
.ea-fb-field:disabled{opacity:.4;cursor:default}
.ea-fb-field svg{color:var(--gray-500);flex-shrink:0}
.ea-fb-canvas{
  border:1.5px dashed var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-4);min-height:160px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .18s var(--ease),background .18s var(--ease);
}
.ea-fb-canvas.is-dragover{border-color:var(--ink);background:var(--accent-soft)}
.ea-fb-empty{font-size:.8125rem;color:var(--gray-500);text-align:center;padding:var(--sp-5) 0}
.ea-fb-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);
  background:var(--white);opacity:0;transform:scale(.95);transition:opacity .25s var(--ease),transform .25s var(--ease),border-color .15s var(--ease);
}
.ea-fb-row.is-entering{opacity:0;transform:scale(.95)}
.ea-fb-row.is-in{opacity:1;transform:scale(1)}
.ea-fb-row.is-dragging{opacity:.4}
.ea-fb-row .handle{cursor:grab;color:var(--gray-500);flex-shrink:0}
.ea-fb-row .label{font-size:.875rem;font-weight:600;flex:1}
.ea-fb-row .fb-actions{display:flex;gap:4px}
.ea-fb-row .fb-actions button{
  width:24px;height:24px;border-radius:6px;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;
  color:var(--gray-700);transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.ea-fb-row .fb-actions button:hover:not(:disabled){background:var(--primary);color:var(--secondary);border-color:var(--primary)}
.ea-fb-row .fb-actions button:disabled{opacity:.3;cursor:not-allowed}
.ea-fb-row .fb-actions .remove:hover:not(:disabled){background:var(--danger);color:var(--white);border-color:var(--danger)}

/* ==========================================================================
   Self-drawing line chart (employers.html — hiring velocity)
   ========================================================================== */
.ea-linechart{width:100%;height:64px;display:block;overflow:visible}
.ea-linechart-path{
  fill:none;stroke:var(--primary);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-dashoffset 1s var(--ease);
}
.ea-linechart-dot{
  fill:var(--white);stroke:var(--primary);stroke-width:2.5;r:3.5;opacity:0;transform:scale(.4);
  transform-box:fill-box;transform-origin:center;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.ea-linechart-dot.is-active{opacity:1;transform:scale(1)}
.ea-linechart-dot.is-peak{stroke:var(--c-green)}
.ea-linechart-tooltip{
  position:absolute;top:0;transform:translate(-50%,-100%);background:var(--ink);color:var(--white);
  font-family:var(--font-mono);font-size:.6875rem;padding:5px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;
}
.ea-linechart-tooltip.is-visible{opacity:1}

/* ==========================================================================
   Workforce Analytics (employers.html)
   ========================================================================== */
.ea-analytics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
@media (max-width:900px){.ea-analytics-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ea-analytics-grid{grid-template-columns:1fr}}
.ea-metric{
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--sp-5);
  display:flex;flex-direction:column;gap:6px;
}
.ea-metric .val{font-family:var(--font-display);font-size:1.875rem;font-weight:700;color:var(--primary)}
.ea-metric .label{font-size:.8125rem;color:var(--gray-700)}
.ea-metric .trend{font-family:var(--font-mono);font-size:.6875rem;color:var(--c-green);display:inline-flex;align-items:center;gap:4px}
.ea-metric .trend.down{color:var(--c-coral)}
.ea-stagebar{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ea-stagebar-row{display:grid;grid-template-columns:88px 1fr 30px;align-items:center;gap:8px}
.ea-stagebar-row .lbl{font-size:.6875rem;color:var(--gray-700);font-family:var(--font-mono)}
.ea-stagebar-row .cnt{font-size:.6875rem;color:var(--gray-500);text-align:right;font-family:var(--font-mono)}

/* ==========================================================================
   Build Your Perfect Team (employers.html)
   ========================================================================== */
.ea-team-builder{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--sp-6);align-items:start}
@media (max-width:900px){.ea-team-builder{grid-template-columns:1fr}}
.ea-pool{display:flex;flex-direction:column;gap:var(--sp-3)}
.ea-chip{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-md);
  background:var(--white);cursor:grab;text-align:left;width:100%;
  transition:border-color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease),opacity .15s var(--ease);
}
.ea-chip:hover{border-color:var(--ink);box-shadow:var(--shadow-card)}
.ea-chip.is-selected{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-ring)}
.ea-chip.is-placed{opacity:.4;cursor:default}
.ea-chip .info{display:flex;flex-direction:column;line-height:1.3}
.ea-chip strong{font-size:.875rem}
.ea-chip .skills{font-size:.75rem;color:var(--gray-700)}
.ea-slots{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.ea-slot{
  border:1.5px dashed var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-4);min-height:76px;
  display:flex;align-items:center;gap:var(--sp-3);transition:border-color .18s var(--ease),background .18s var(--ease);
}
.ea-slot.is-dragover{border-color:var(--ink);background:var(--accent-soft)}
.ea-slot.is-filled{border-style:solid;border-color:var(--ink);background:var(--white)}
.ea-slot .placeholder{color:var(--gray-500);font-size:.8125rem}
.ea-slot .slot-label{font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500)}
.ea-slot-body{display:flex;flex-direction:column;flex:1;min-width:0}
.ea-slot-fill{display:flex;align-items:center;gap:10px;flex:1}
.ea-slot-remove{
  width:24px;height:24px;border-radius:50%;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;
  color:var(--gray-700);flex-shrink:0;transition:background .15s var(--ease),color .15s var(--ease);
}
.ea-slot-remove:hover{background:var(--danger);color:var(--white);border-color:var(--danger)}
.ea-fit-panel{
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--sp-5);background:var(--gray-50);
  display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap;
}
.ea-fit-score{text-align:center;flex-shrink:0}
.ea-fit-score .num{font-family:var(--font-display);font-size:2.25rem;font-weight:700;color:var(--primary);transition:color .2s var(--ease)}
.ea-fit-score .lbl{font-family:var(--font-mono);font-size:.6875rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}
.ea-insight{flex:1;min-width:200px}
.ea-insight .lbl{font-family:var(--font-mono);font-size:.6875rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;display:block}
.ea-insight p{font-size:.9375rem;color:var(--ink)}

/* ==========================================================================
   Consider Your Workforce Limitless (index.html)
   ========================================================================== */
.ea-limitless{position:relative}
.ea-limitless-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-8);align-items:start}
@media (max-width:900px){.ea-limitless-grid{grid-template-columns:1fr}}
/* note: this section sits on a dark --ink background (see index.html), so
   these colors are chosen for dark-surface contrast rather than reusing the
   light-surface --gray-700/--accent tokens used elsewhere in the file */
.ea-limitless-steps{display:flex;flex-direction:column;gap:var(--sp-6)}
.ea-limitless-step{
  opacity:.32;transition:opacity .4s var(--ease);padding-left:var(--sp-4);border-left:2px solid rgba(255,255,255,.18);
}
.ea-limitless-step.is-active{opacity:1;border-left-color:var(--secondary)}
.ea-limitless-step .tag-label{font-family:var(--font-mono);font-size:.75rem;color:var(--secondary);letter-spacing:.06em;text-transform:uppercase}
.ea-limitless-step h3{margin-top:6px}
.ea-limitless-step p{color:var(--gray-200);font-size:.9375rem;margin-top:6px;max-width:44ch}

.ea-limitless-visual{
  position:sticky;top:120px;height:440px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  background:var(--gray-50);overflow:hidden;display:flex;align-items:center;justify-content:center;
}
@media (max-width:900px){.ea-limitless-visual{position:static;height:340px}}
.ea-node-center{
  position:absolute;width:76px;height:76px;border-radius:50%;background:var(--primary);color:var(--secondary);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  text-align:center;z-index:2;box-shadow:var(--shadow-pop);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.ea-node{
  position:absolute;display:flex;align-items:center;gap:8px;background:var(--white);color:var(--ink);border:1px solid var(--gray-200);
  border-radius:99px;padding:8px 14px 8px 8px;font-size:.8125rem;font-weight:600;box-shadow:var(--shadow-card);
  opacity:0;transform:scale(.5);transition:opacity .5s var(--ease),transform .5s var(--ease);white-space:nowrap;z-index:2;
}
.ea-node.is-active{opacity:1;transform:scale(1)}
.ea-node.center-x{left:50%;margin-left:-78px}
.ea-node.center-x.is-active{transform:scale(1)}
.ea-node .dot{width:22px;height:22px;border-radius:50%;flex-shrink:0}
.ea-node-lines{position:absolute;inset:0;z-index:1}
.ea-node-lines path{
  fill:none;stroke:var(--gray-200);stroke-width:1.5;opacity:0;
  transition:opacity .3s var(--ease),stroke-dashoffset .8s var(--ease);
}
.ea-node-lines path.is-active{opacity:1}
/* once a line has finished self-drawing, .is-drawn swaps it to a dashed,
   gently pulsing idle state (see initLimitless in employai-visuals.js) */
.ea-node-lines path.is-drawn{stroke-dasharray:4 5!important}
.ea-limitless-visual.is-inview .ea-node-lines path.is-drawn{animation:ea-dash 3s linear infinite}

.ea-limitless-counter{
  position:absolute;top:22px;left:50%;transform:translateX(-50%);text-align:center;z-index:3;
  font-family:var(--font-mono);color:var(--white);
}
.ea-limitless-counter .num{font-size:1.75rem;font-weight:700;display:block;line-height:1}
.ea-limitless-counter .suffix{font-size:.6875rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.05em}
.ea-node-center.is-final{transform:scale(1.08);box-shadow:0 0 0 8px rgba(250,254,85,.16),var(--shadow-pop)}

/* ==========================================================================
   Customer Stories (index.html homepage panel + customer-stories/story.html)
   ========================================================================== */
.ea-stories{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-6);align-items:start}
@media (max-width:860px){.ea-stories{grid-template-columns:1fr}}
.ea-stories-tabs{display:flex;flex-direction:column;gap:var(--sp-3)}
.ea-story-tab{
  display:flex;align-items:center;gap:var(--sp-4);text-align:left;width:100%;padding:var(--sp-4);
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white);position:relative;overflow:hidden;
  opacity:.62;transform:scale(.98);transition:opacity .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.ea-story-tab:hover{opacity:.85}
.ea-story-tab.is-active{opacity:1;transform:scale(1);border-color:var(--ink);box-shadow:var(--shadow-card)}
.ea-story-tab .num{font-family:var(--font-mono);font-size:.75rem;color:var(--gray-500);flex-shrink:0}
.ea-story-tab.is-active .num{color:var(--primary)}
.ea-story-tab .tab-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ea-story-tab .tab-body strong{font-size:.9375rem}
.ea-story-tab .tab-body .headline{font-size:.8125rem;color:var(--gray-700)}
.ea-story-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gray-200)}
.ea-story-progress .fill{display:block;height:100%;width:0%;background:var(--primary)}

.ea-story-panel{
  border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--sp-7);background:var(--gray-50);
  opacity:0;transition:opacity .3s var(--ease);min-height:280px;
}
.ea-story-panel.is-in{opacity:1}
.ea-story-quote{
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.125rem,1.8vw,1.5rem);line-height:1.35;
  margin-top:var(--sp-4);color:var(--ink);
}
.ea-story-metric-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-6);border-top:1px solid var(--gray-200)}
.ea-story-metric{display:flex;flex-direction:column;gap:2px}
.ea-story-metric .num{font-family:var(--font-display);font-size:2.25rem;font-weight:700;color:var(--primary)}
.ea-story-metric .lbl{font-family:var(--font-mono);font-size:.75rem;color:var(--gray-700);text-transform:uppercase;letter-spacing:.04em}

/* ==========================================================================
   keyframes
   ========================================================================== */
@keyframes ea-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.25)}}
@keyframes ea-scan{0%{top:0}50%{top:calc(100% - 2px)}100%{top:0}}
@keyframes ea-dash{to{stroke-dashoffset:-18}}
@keyframes ea-card-land{0%{transform:scale(1.04);box-shadow:var(--shadow-pop)}100%{transform:scale(1);box-shadow:none}}

/* pause any decorative infinite animation until its container has scrolled into view */
.ea-mockup:not(.is-inview) .ea-live-dot,
.ea-limitless-visual:not(.is-inview) .ea-node-lines path{animation-play-state:paused}