/* THE LOCAL ENGINE — page-unique act content only.
   Act I runs on shared .decide/.act-payoff; the engagement runs on shared
   .ladder/.rung. This file: the month rhythm (Act II), the software-vs-firm
   pair, and the three lines-we-hold cards. */

/* Ambient operational chips — same grammar as the home swarm: fade in on
   load, drift forever. Decorative: hidden mobile, still under reduced motion. */
.echips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.echip {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--font-label);
  font-size: clamp(0.78rem, 0.68rem + 0.4vw, 0.95rem);
  color: var(--slope); white-space: nowrap;
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(236,237,236,0.14); border-radius: 999px;
  background: rgba(236,237,236,0.03);
  opacity: 0;
  animation: echip-in 1.2s var(--ease-entrance) forwards,
             echip-drift var(--drift, 24s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 1.2s);
}
@keyframes echip-in { to { opacity: var(--depth, .8); } }
@keyframes echip-drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(var(--dx,12px), var(--dy,-14px), 0); }
}
@media (max-width: 999px) { .echips { display: none; } }
@media (prefers-reduced-motion: reduce) { .echip { animation: none; opacity: var(--depth, .8); } }
.no-js .echip { animation: none; opacity: var(--depth, .8); }

/* 02 · the strong-position stats under the scan evidence */
.eng-stats { margin-top: var(--space-16); }

/* Act I's decide paragraphs run long — mild compression so the centered
   stage clears the topline on shorter viewports. */
.act .decide { margin-top: var(--space-5); gap: var(--space-3); }
.act .decide__step p { max-width: 64ch; }
.act .act-payoff { margin-top: var(--space-5); }

/* ACT II · the operating rhythm — two-column staged items */
.rhy { display: grid; gap: var(--space-4) var(--space-8); max-width: 900px; }
@media (min-width: 800px) { .rhy { grid-template-columns: repeat(2, 1fr); } }
.rhy__item { padding-top: var(--space-4); border-top: 1px solid rgba(14,19,24,0.14); }
.rhy__tag { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--logo); }
.rhy__item h3 { font-size: var(--text-body-lg); color: var(--ink); margin-top: var(--space-1); }
.rhy__item p { margin-top: var(--space-1); font-size: var(--text-small); color: var(--body-ink); line-height: var(--leading-snug); }

/* ACT II · the compounding line — the site's .traj vocabulary, but driven by
   the act's --sub instead of the .is-in reveal (this lives inside a pin).
   Reduced-motion and no-js get the finished drawing. */
.eng-traj { margin-top: var(--space-6); max-width: 640px; }
.eng-traj svg { display: block; width: 100%; height: auto; }
.eng-traj .traj__line { transition: none; stroke-dashoffset: calc(1 - var(--sub, 1)); }
.eng-traj .traj__dot { transition: none; opacity: clamp(0, calc((var(--sub, 1) - var(--o, 0)) * 5), 1); }
.eng-traj__cap { margin-top: var(--space-3); font-family: var(--font-label); font-size: var(--text-caption);
  color: var(--label-ink); display: flex; align-items: center; gap: var(--space-3); }
@media (prefers-reduced-motion: reduce) {
  .eng-traj .traj__line { stroke-dashoffset: 0; }
  .eng-traj .traj__dot { opacity: 1; }
}
.no-js .eng-traj .traj__line { stroke-dashoffset: 0; }
.no-js .eng-traj .traj__dot { opacity: 1; }
/* On short pinned viewports the act's rhythm + payoff already fill the pin —
   the line is the first thing to give way rather than clip. */
@media (min-width: 1000px) and (max-height: 799px) { .eng-traj { display: none; } }

/* 03 · software vs firm */
.vs { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .vs { grid-template-columns: repeat(2, 1fr); } }
.vs__side {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 16px;
  padding: var(--space-8); display: grid; gap: var(--space-2); align-content: start;
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.vs__k { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); }
.vs__side h3 { font-size: var(--text-h4); color: var(--ink); }
.vs__side p { font-size: var(--text-small); color: var(--body-ink); }
.vs__side--us { border-color: var(--logo); box-shadow: 0 10px 34px color-mix(in srgb, var(--logo) 14%, transparent); }
.vs__side--us .vs__k { color: var(--logo); }

/* 04 · the lines we hold */
.holds { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .holds { grid-template-columns: repeat(3, 1fr); } }
.hold { padding-top: var(--space-5); border-top: 1px solid rgba(14,19,24,0.14); }
.hold h3 { font-size: var(--text-h4); color: var(--ink); }
.hold p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--body-ink); }