/* THE $297 LOCAL VISIBILITY FINDING — page-unique act content only.
   Built 2026-08-27. Everything reusable (act mechanics, sec-head, tm-note,
   scangrid/scanrow, pair, decide, close, badges) comes from site.css.

   EVERY class here is prefixed `fnd-`. That is deliberate: on 2026-08-27 a
   page stylesheet reused `.rung`, a name site.css owns for the shared pricing
   ladder, and broke every card on that page. A prefix makes the collision
   impossible rather than merely unlikely. */

/* ---- Act I: the CTA row, and the vertical budget -------------------------
   Same headroom trap as findings.html's Act I: .act__stage is centred while
   .act__topline is absolutely positioned, so a stage that grows too tall
   slides its first eyebrow underneath the topline eyebrow — two lines of type
   superimposed, invisible in the markup, no console error. Keep this act's
   copy short and RENDER IT at desktop before committing. */
.fnd-actcta { margin-top: var(--space-5); }

/* Act I's headline sizes off BOTH axes. The width clamp alone is what let the
   stage grow past its act on a 1280x720 laptop and slide its eyebrow under
   the topline (measured 2026-08-27: topline 102-122, stage eyebrow 108-148).
   Font-size lives here rather than inline so a short-viewport rule can win:
   an inline style would need !important to override. */
.fnd-h1 {
  margin-top: var(--space-4); max-width: 15ch;
  font-size: clamp(2.2rem, 1.6rem + 3vw, 4.5rem);
}
@media (max-height: 860px) {
  .fnd-h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); max-width: 18ch; }
}
.act .decide { margin-top: var(--space-5); gap: var(--space-3); }
.act .decide__step p { max-width: 62ch; }
.act .act-payoff { margin-top: var(--space-5); }

/* ---- Act I's device: four assistants answering, and you not in it --------
   Four engine rows. Each named rival chip resolves as the act scrubs, on its
   own --o threshold; the last row is yours and stays empty, which is the
   whole argument of the page made without a word. Placement and the names
   are ILLUSTRATIVE and the caption says so — no real business is named.
   Hidden on mobile; fully resolved under reduced motion and no-js. */
.fnd-ans {
  position: absolute; z-index: 1; pointer-events: none;
  right: 6%; top: 50%; transform: translateY(-50%);
  width: min(30vw, 360px);
}
.fnd-ans__row {
  display: grid; gap: var(--space-2);
  padding: var(--space-3) 0; border-top: var(--rule-dark-soft);
}
.fnd-ans__eng {
  font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slate);
}
.fnd-ans__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 26px; }
.fnd-ans__chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-round);
  border: var(--rule-dark); background: var(--surface);
  font-family: var(--font-label); font-size: var(--text-caption); color: var(--mist);
  opacity: clamp(0, calc((var(--p, 0) - var(--o, 0)) * 8), 1);
}
.fnd-ans__row--you { border-top: 1px solid rgba(236, 237, 236, 0.28); }
.fnd-ans__row--you .fnd-ans__eng { color: var(--paper); }
.fnd-ans__empty {
  /* A flex item with no content collapses to zero width — the empty row IS
     the argument here, so it needs an explicit box to be visible at all. */
  display: block; width: 150px; flex: none; height: 26px; border-radius: var(--radius-round);
  border: 1px dashed rgba(236, 237, 236, 0.24);
}
.fnd-ans__cap {
  margin-top: var(--space-4);
  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) { .fnd-ans { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fnd-ans__chip, .fnd-ans__cap { opacity: 1; }
}
.no-js .fnd-ans__chip, .no-js .fnd-ans__cap { opacity: 1; }

/* Keep Act I's type clear of the device on desktop. */
@media (min-width: 1000px) {
  .act__stage .decide, .act__stage .act-payoff, .act__stage .fnd-actcta { max-width: 58%; }
}

/* ---- 01 · what lands in your inbox -------------------------------------- */
.fnd-docs { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .fnd-docs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .fnd-docs { grid-template-columns: repeat(3, 1fr); } }
.fnd-doc {
  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);
}
.fnd-doc__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);
}
.fnd-doc h4 { font-size: var(--text-body-lg); color: var(--ink); }
.fnd-doc p { font-size: var(--text-small); color: var(--body-ink); }

/* ---- Act II · why the order is the product ------------------------------ */
.fnd-steps { display: grid; gap: var(--space-5); max-width: 780px; }
.fnd-step {
  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);
}
.fnd-turn { font-size: var(--text-body-lg); }
/* Neither figure counts. 3 and 2 are small integers that were always true —
   animating them would be decoration wearing an instrument's clothes, and
   this system reserves counted motion for numbers that actually moved. */
.fnd-pair { margin-top: var(--space-6); max-width: 780px; }

/* ---- 03 · price --------------------------------------------------------- */
.fnd-price {
  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);
}
.fnd-price__amt { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.fnd-price__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);
}
.fnd-price__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);
}
.fnd-price__list { margin-top: var(--space-6); display: grid; gap: 0; }
.fnd-price__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;
}
.fnd-price__list li::before { content: "—"; color: var(--logo); font-weight: 700; }
.fnd-price__cta { margin-top: var(--space-8); }
/* One priced button, and the alternative as a line of text rather than a
   second button — two priced buttons side by side is the choice paralysis the
   funnel restack exists to remove. */
.fnd-price__alt {
  margin-top: var(--space-4); font-size: var(--text-small); color: var(--body-ink);
  opacity: .78; line-height: 1.55; text-align: center;
}
.fnd-price__alt a { color: var(--logo); font-weight: 700; }

/* ---- 04 · what it is not ------------------------------------------------ */
.fnd-alts { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .fnd-alts { grid-template-columns: repeat(2, 1fr); } }
.fnd-alt {
  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);
}
.fnd-alt__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);
}
.fnd-alt h3 { font-size: var(--text-h4); color: var(--ink); }
.fnd-alt p { font-size: var(--text-small); color: var(--body-ink); }
.fnd-alt a { color: var(--logo); border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent); }
.fnd-alt--done { border-color: var(--logo); }
.fnd-alt--done .fnd-alt__k { color: var(--logo); }