/* Local Visibility — page-unique material only, loaded after site.css.
   One dark act (how buyers decide now) into the lit sections: who it's for,
   the scan grid, the three pillars, the honesty rules, the monthly rhythm,
   the pricing ladder, close. */

/* ============ ACT · HOW BUYERS DECIDE NOW (dark, colorless) ============
   Opens the page — plays on load, same reasoning as home's Act I and
   ai-check's Act I. --p only drives the vignette and the scroll cue. */

@keyframes lv-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
.lv-in { opacity: 0; animation: lv-in 0.85s var(--ease-entrance) forwards; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .lv-in { opacity: 1; animation: none; } }
.no-js .lv-in { opacity: 1; animation: none; }

/* .decide (staged step list), .ladder/.rung, .sec-head--act, and .tm-note
   were promoted to site.css when /growth became their second user. */

.lv-payoff { margin-top: var(--space-6); font-size: var(--text-body); color: var(--paper); max-width: 54ch; font-weight: 500; }
.lv-payoff strong { font-weight: 800; }

/* ============ WHO THIS IS FOR (lit) ============ */

.forgrid { display: grid; gap: var(--space-6); margin-top: var(--space-4); }
@media (min-width: 700px) { .forgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .forgrid { grid-template-columns: repeat(3, 1fr); } }
.forcard { padding-top: var(--space-4); border-top: 1px solid rgba(14,19,24,0.14); }
.forcard h4 { font-size: var(--text-h4); color: var(--ink); }
.forcard p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--body-ink); }

.sizing {
  margin-top: var(--space-12); padding: var(--space-6); border-radius: 12px;
  background: color-mix(in srgb, var(--logo) 6%, transparent);
  border-left: 2px solid var(--logo);
}
.sizing .osk { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--logo); }
.sizing p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--body-ink); max-width: 68ch; }
.sizing a { color: var(--logo); border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent); }

/* moved to site.css: .sec-head--act */

/* moved to site.css: .scangrid / .scanrow / .scanmetric — the dual-metric
   scan-row chart is shared now (/proof's twelve-market study reuses it) */

/* ============ ACT II · THE PILLARS (lit, pinned) ============
   Compressed to hold sec-head + three cards inside one pinned viewport. */

.pillars { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 16px;
  padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start;
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.pillar__n { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  color: var(--logo); letter-spacing: var(--tracking-wide); }
.pillar h3 { font-size: var(--text-h3); color: var(--ink); }
.pillar p { font-size: var(--text-small); color: var(--body-ink); }
.pillar p + p { margin-top: var(--space-2); }

/* ============ THE LINES WE HOLD (lit) ============ */

.lines { display: grid; gap: var(--space-8); margin-top: var(--space-4); }
@media (min-width: 900px) { .lines { grid-template-columns: repeat(3, 1fr); } }
.line { padding-top: var(--space-5); border-top: 1px solid var(--slate); }
.line h3 { font-size: var(--text-h4); color: var(--ink); }
.line p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--body-ink); }

/* ============ THE MONTHLY RHYTHM (lit) ============ */

.rhythm { display: grid; gap: var(--space-6); margin-top: var(--space-4); }
@media (min-width: 760px) { .rhythm { grid-template-columns: repeat(2, 1fr); } }
.rhythm__col { display: grid; gap: var(--space-6); }
.rhythm__item { padding-top: var(--space-4); border-top: 1px solid rgba(14,19,24,0.14); }
.rhythm__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); }
.rhythm__item h4 { margin-top: var(--space-2); font-size: var(--text-h4); color: var(--ink); }
.rhythm__item p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--body-ink); }

/* moved to site.css: .ladder / .rung — the pricing spine is shared now */

/* ============ WHY A FIRM AND NOT SOFTWARE (lit) ============ */

.swvs { display: grid; gap: var(--space-6); margin-top: var(--space-4); }
@media (min-width: 800px) { .swvs { grid-template-columns: 1fr 1fr; } }
.swvs__side {
  padding: var(--space-6); border-radius: 14px;
  background: var(--card); border: 1px solid rgba(14,19,24,0.1);
}
.swvs__side--us { border-color: var(--logo); box-shadow: 0 8px 30px color-mix(in srgb, var(--logo) 10%, transparent); }
.swvs__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); }
.swvs__side--us .swvs__k { color: var(--logo); }
.swvs__side h3 { margin-top: var(--space-2); font-size: var(--text-h4); color: var(--ink); }
.swvs__side p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--body-ink); }

/* Industry cards that have their own lander (2026-08-06): same card, now a
   link, with a quiet destination line. The consultants card stays a plain
   div until that vertical has real proof behind it. */
.forcard--link { display: block; color: inherit; }
.forcard--link .forcard__go {
  display: inline-block; margin-top: var(--space-3);
  font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); color: var(--logo);
  border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent);
  transition: border-color var(--dur-fast) var(--ease-entrance);
}
.forcard--link:hover .forcard__go { border-color: var(--logo); }