/* THE LOCAL VISIBILITY FINDING — page-unique act content only.
   Act I runs on shared .decide/.act-payoff. This file: the act CTA row,
   the six includes, the score-vs-map staged lines (Act II), the price
   card, and the two after-cards. */

/* Act I CTA row */
.act-cta { margin-top: var(--space-5); }

/* Act I carries a CTA row on top of the standard stage — compress the
   vertical budget so the centered stage clears the topline. */
.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 49-point grid: each dot's opacity is a clamped function of the
   act's --p against its own inline --o threshold, so the grid fills in dot
   by dot as the act scrubs. Placement is an illustrative layout (captioned).
   Hidden on mobile; complete under reduced motion and no-js. */
.gridviz {
  position: absolute; z-index: 1; pointer-events: none;
  right: 7%; top: 50%; transform: translateY(-50%);
}
.gridviz__grid { display: grid; grid-template-columns: repeat(7, 14px); gap: 16px; }
.gridviz__grid span {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(236,237,236,0.22);
  opacity: clamp(0, calc((var(--p, 0) - var(--o, 0)) * 6), 1);
}
.gridviz__grid .gv--hit { background: var(--paper); box-shadow: 0 0 14px rgba(236,237,236,0.35); }
.gridviz__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) { .gridviz { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .gridviz__grid span, .gridviz__cap { opacity: 1; }
}
.no-js .gridviz__grid span, .no-js .gridviz__cap { opacity: 1; }

/* Keep the act's text clear of the grid on desktop */
@media (min-width: 1000px) {
  .act__stage .decide, .act__stage .act-payoff { max-width: 56%; }
}

/* 01 · the six includes */
.incgrid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .incgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .incgrid { grid-template-columns: repeat(3, 1fr); } }
.inc {
  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);
}
.inc__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); }
.inc h4 { font-size: var(--text-body-lg); color: var(--ink); }
.inc p { font-size: var(--text-small); color: var(--body-ink); }

/* ACT II · score vs map — three big staged lines, then the turn */
.scoresteps { display: grid; gap: var(--space-5); max-width: 760px; }
.scorestep {
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem); font-weight: 700; color: var(--label-ink);
  padding-top: var(--space-4); border-top: 1px solid rgba(14,19,24,0.14); line-height: var(--leading-snug);
}
.maps-payoff { font-size: var(--text-body-lg); }

/* The 1-vs-49 pair under the payoff — both figures share one duration on
   purpose: 1 barely moves while 49 sweeps, and that asymmetry is the point. */
.score-pair { margin-top: var(--space-6); max-width: 760px; }

/* 03 · the price card */
.pricecard {
  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);
}
.pricecard__amt { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.pricecard__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);
}
.pricecard__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); }
.pricecard__list { margin-top: var(--space-6); display: grid; gap: 0; }
.pricecard__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;
}
.pricecard__list li::before { content: "—"; color: var(--logo); font-weight: 700; }
.pricecard__cta { margin-top: var(--space-8); }

/* 04 · after you have it */
.after { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .after { grid-template-columns: repeat(2, 1fr); } }
.aftercard {
  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);
}
.aftercard__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); }
.aftercard h3 { font-size: var(--text-h4); color: var(--ink); }
.aftercard p { font-size: var(--text-small); color: var(--body-ink); }
.aftercard a { color: var(--logo); border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent); }
.aftercard--engine { border-color: var(--logo); }
.aftercard--engine .aftercard__k { color: var(--logo); }