/* VISIBILITY MONITORING — page-unique act content only.
   Act I runs on shared .decide/.act-payoff/.act-cta. This file: the
   cadence-pip visual, the three includes, the monitoring-vs-Engine
   comparison (Act II), and the price card. */

/* Act I CTA row — same compression as findings.html's Act I */
.act-cta { margin-top: var(--space-5); }
.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 I's cadence pips: a single row standing in for "one scan a month,
   on repeat." Each pip's opacity is a clamped function of the act's --p
   against its own inline --o threshold, same mechanism as findings.html's
   gridviz. Placement is illustrative (captioned). Hidden on mobile, full
   under reduced motion and no-js. */
.cadence {
  position: absolute; z-index: 1; pointer-events: none;
  right: 7%; top: 50%; transform: translateY(-50%);
}
.cadence__row { display: flex; gap: 14px; }
.cadence__row span {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(236,237,236,0.22);
  opacity: clamp(0, calc((var(--p, 0) - var(--o, 0)) * 6), 1);
}
.cadence__row .cad--hit { background: var(--paper); box-shadow: 0 0 14px rgba(236,237,236,0.35); }
.cadence__cap {
  margin-top: var(--space-5); text-align: center;
  font-family: var(--font-label); font-size: var(--text-caption);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slate);
  opacity: clamp(0, calc((var(--p, 0) - 0.5) * 4), 1);
}
@media (max-width: 999px) { .cadence { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cadence__row span, .cadence__cap { opacity: 1; }
}
.no-js .cadence__row span, .no-js .cadence__cap { opacity: 1; }
@media (min-width: 1000px) {
  .act__stage .decide, .act__stage .act-payoff { max-width: 56%; }
}

/* 01 · the four includes */
.moninc { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .moninc { grid-template-columns: repeat(2, 1fr); } }
.mi {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 16px;
  padding: var(--space-6); display: grid; gap: var(--space-2); align-content: start;
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.mi__k { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--logo); }
.mi h4 { font-size: var(--text-body-lg); color: var(--ink); }
.mi p { font-size: var(--text-small); color: var(--body-ink); }

/* ACT II · monitoring vs the Engine — same two-card comparison shape as
   local-engine.html's .vs, distinct class so this page never has to load
   local-engine.css to get it. */
.diff { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .diff { grid-template-columns: repeat(2, 1fr); } }
.diff__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);
}
.diff__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); }
.diff__side h3 { font-size: var(--text-h4); color: var(--ink); }
.diff__side p { font-size: var(--text-small); color: var(--body-ink); }
.diff__side a { color: var(--logo); border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent); }
.diff__side--engine { border-color: var(--logo); box-shadow: 0 10px 34px color-mix(in srgb, var(--logo) 14%, transparent); }
.diff__side--engine .diff__k { color: var(--logo); }

/* 02 · the price card */
.moncard {
  background: var(--card); border: 1px solid var(--logo); border-radius: 16px;
  padding: var(--space-12); max-width: 760px;
  box-shadow: 0 10px 34px color-mix(in srgb, var(--logo) 14%, transparent);
}
.moncard__amt { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.moncard__fig {
  font-family: var(--font-label); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); color: var(--ink);
}
.moncard__per { 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); }
.moncard__list { margin-top: var(--space-6); display: grid; gap: 0; }
.moncard__list li {
  padding: var(--space-3) 0; border-top: 1px solid rgba(14,19,24,0.12);
  font-size: var(--text-small); color: var(--body-ink); list-style: none;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: baseline;
}
.moncard__list li::before { content: "—"; color: var(--logo); font-weight: 700; }
.moncard__cta { margin-top: var(--space-8); }
.moncard__fine { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--slate); }