/* 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); }

/* ============ The monthly rhythm (added 2026-08-11) ============
   Four numbered steps that say what actually happens each month AND who
   does it. The who-badge is the load-bearing part: three steps are
   machine-run and one is a person, and the whole $299 case rests on that
   last one, so the palette's single chromatic note (--logo, reserved for
   what is live/measured/yours) marks the human step and the automated
   ones stay in greyscale. Colour carries the meaning, and the badge also
   states it in words so it survives greyscale and colour-blindness. */
.rhythm { margin-top: var(--space-12); display: grid; gap: 0; list-style: none; padding: 0; }
.rhythm__step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-6);
  padding: var(--space-8) 0; border-top: 1px solid rgba(14,19,24,0.12);
}
.rhythm__step:last-child { border-bottom: 1px solid rgba(14,19,24,0.12); }
.rhythm__n {
  font-family: var(--font-label); font-weight: 800; font-size: var(--text-small);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  color: var(--slope); line-height: 1.4;
}
.rhythm__body h3 { font-size: var(--text-h4, var(--text-body-lg)); }
.rhythm__body p { margin-top: var(--space-3); color: var(--body-ink); font-size: var(--text-small); max-width: 66ch; }
.rhythm__who {
  display: inline-block; margin-top: var(--space-4);
  font-family: var(--font-label); font-size: var(--text-caption); font-weight: 700;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-round);
}
.rhythm__who--auto { color: var(--label-ink); box-shadow: inset 0 0 0 1px rgba(14,19,24,0.16); }
.rhythm__who--human {
  color: var(--paper); background: var(--logo);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--logo) 30%, transparent);
}
@media (min-width: 800px) {
  .rhythm__step { grid-template-columns: 4rem 1fr; gap: var(--space-8); }
}

/* ============ FAQ (added 2026-08-11) ============
   Native <details> so it works with zero JS and stays keyboard- and
   screen-reader-accessible for free. Ruled rows rather than cards: this
   is a register to scan, not seven things competing for attention. */
.faq { margin-top: var(--space-10); border-top: 1px solid rgba(14,19,24,0.12); }
.faq__item { border-bottom: 1px solid rgba(14,19,24,0.12); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: var(--space-6) 0;
  font-family: var(--font-label); font-weight: 700; font-size: var(--text-body-lg);
  color: var(--ink); display: flex; align-items: baseline; gap: var(--space-4);
  transition: color var(--dur-fast) var(--ease-entrance);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: "+"; color: var(--logo); font-weight: 800; flex: none;
  transition: transform var(--dur-fast) var(--ease-entrance);
}
.faq__item[open] summary::before { content: "\2212"; }
.faq__item summary:hover { color: var(--logo); }
.faq__item p {
  padding: 0 0 var(--space-6) calc(1ch + var(--space-4));
  color: var(--body-ink); font-size: var(--text-small); max-width: 68ch;
}
.faq__item p a { color: var(--logo); font-weight: 700; }