/* home-v3.css — the research landing.
 *
 * Tokens, ground and type come from styles-v2.css, whose own comment states the
 * identity: MONO IS THE BODY FACE, "this reads as an instrument, not a
 * marketing site". Nothing here introduces a face, a hue or a gradient.
 *
 * MOTION HAS A JOB HERE. The hero canvas is a sonar sweep over a flat trace
 * that occasionally spikes — that is finding 04 drawn instead of described, and
 * the reason the product is called Sonar. Icons DRAW themselves when scrolled
 * into view, the way an instrument plots a reading rather than displaying a
 * picture of one. Everything else is a short fade-and-rise. No parallax, no
 * scroll-jacking, and every animation is off under prefers-reduced-motion.
 *
 * The left rule on each card carries the RESULT — coral for failed, brass for
 * conditional — so the page can be skimmed for "what worked" without reading.
 */

/* styles-v2.css sets `html, body { height: 100% }` for the app shell, which is
   a full-height flex layout. This is a long document; a percentage min-height
   against an auto html is indeterminate (one engine computed a 23,500px body
   from it), so vh. */
html { height: auto; }
body { height: auto; min-height: 100vh; }

.rp-page { position: relative; z-index: 1; }

/* ── reveal ────────────────────────────────────────────────────────────── */
.rp-rv { opacity: 0; transform: translateY(14px); }
.rp-rv.in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* ── nav ───────────────────────────────────────────────────────────────── */
.rp-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
}
.rp-brandlink { display: flex; align-items: center; gap: 11px; color: inherit; }
.rp-mark { color: var(--acc); flex: none; }
.rp-lockup { display: flex; flex-direction: column; line-height: 1; }
.rp-wordmark { font-size: 16px; color: var(--wordmark); }
.rp-tag { font-size: 8.5px; letter-spacing: .2em; color: var(--acc); margin-top: 5px; }
.rp-nav .v2-btn { margin-left: auto; }

/* ── hero ──────────────────────────────────────────────────────────────── */
.rp-hero { position: relative; overflow: hidden; }
.rp-sweep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
  z-index: 0;
}
.rp-hero-in {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 88px 28px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rp-eyebrow {
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--ink-4);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* A live indicator, because the measurement is ongoing rather than a snapshot
   somebody took once. */
.rp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 0 var(--acc-line);
  animation: rp-pulse 2.4s ease-out infinite;
}
@keyframes rp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(87, 207, 146, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(87, 207, 146, 0); }
  100% { box-shadow: 0 0 0 0 rgba(87, 207, 146, 0); }
}
.rp-h1 {
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.rp-em { color: var(--acc); }
.rp-lede {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 62ch;
  margin: 0;
}
.rp-lede b, .rp-card b, .rp-survivor b { color: var(--ink); font-weight: 500; }

.rp-facts {
  list-style: none;
  margin: 12px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.rp-facts li { display: flex; flex-direction: column; gap: 4px; }
.rp-facts b {
  font-family: var(--disp);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* The last stat is a FAILURE count. Green would read as an achievement. */
.rp-facts li.rp-fact-neg b { color: var(--neg); }
.rp-facts span { font-size: 10px; color: var(--ink-4); letter-spacing: .04em; }

/* ── sections ──────────────────────────────────────────────────────────── */
.rp-sec { padding: 64px 28px; }
.rp-sec-alt { background: var(--card); border-block: 1px solid var(--line-soft); }
.rp-sechead {
  max-width: 860px;
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rp-idx { font-size: 9.5px; letter-spacing: .2em; color: var(--ink-4); }
.rp-h2 {
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* ── findings grid ─────────────────────────────────────────────────────── */
.rp-grid {
  list-style: none;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 10px;
}
.rp-card {
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--line);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.rp-card:hover { transform: translateY(-2px); background: var(--card); }
.rp-card.rp-neg { border-left-color: var(--neg-line); }
.rp-card.rp-warn { border-left-color: var(--warn-line); }
.rp-card.rp-neg:hover { border-color: var(--neg-line); }
.rp-card.rp-warn:hover { border-color: var(--warn-line); }

.rp-ico { width: 34px; height: 34px; flex: none; }
.rp-ico-lg { width: 40px; height: 40px; }
.rp-card.rp-neg .rp-ico { color: var(--neg); }
.rp-card.rp-warn .rp-ico { color: var(--warn); }
.rp-survivor .rp-ico { color: var(--acc); }

.rp-ch {
  font-size: 15.5px;
  line-height: 1.28;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.rp-card p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0;
}
/* The method stays visibly quieter than the claim — that contrast is what
   separates a finding from an assertion. */
.rp-m { color: var(--ink-5); }

/* ── icon drawing ──────────────────────────────────────────────────────────
   Strokes plot themselves once, when the card enters the viewport. The dash
   length is set from the real path length in JS, so it works on any shape
   without hand-tuned magic numbers. */
.rp-ico .rp-d { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.in .rp-ico .rp-d { animation: rp-draw .85s ease forwards; }
@keyframes rp-draw { to { stroke-dashoffset: 0; } }

/* Per-icon accents: each one moves the way the finding does. */
.rp-ico .rp-x, .rp-ico .rp-miss, .rp-ico .rp-flat { opacity: 0; }
.in .rp-ico .rp-x,
.in .rp-ico .rp-miss,
.in .rp-ico .rp-flat { animation: rp-fade .5s ease .7s forwards; }
@keyframes rp-fade { to { opacity: 1; } }

/* The order that pushes its own book. */
.rp-ico .rp-push { opacity: 0; transform: translateY(5px); }
.in .rp-ico .rp-push { animation: rp-push .7s cubic-bezier(.2,.7,.3,1) .55s forwards; }
@keyframes rp-push { to { opacity: 1; transform: none; } }

/* The needle that flips sign two quarters in five. */
.rp-ico .rp-needle { transform-origin: 20px 20px; }
.in .rp-ico .rp-needle { animation: rp-flip 5s ease-in-out 1s infinite; }
@keyframes rp-flip {
  0%, 40%   { transform: rotate(0deg); }
  50%, 90%  { transform: rotate(148deg); }
  100%      { transform: rotate(0deg); }
}

/* The two legs of the carry, opening in opposite directions. */
.rp-ico .rp-legs { opacity: 0; }
.in .rp-ico .rp-legs { animation: rp-fade .6s ease .5s forwards; }

/* ── survivors ─────────────────────────────────────────────────────────── */
.rp-survivors {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.rp-survivor {
  border: 1px solid var(--acc-line);
  border-radius: var(--r-card);
  background: var(--acc-bg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .25s ease;
}
.rp-survivor:hover { transform: translateY(-2px); }
.rp-sh {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.rp-survivor p { font-size: 12.5px; line-height: 1.68; color: var(--ink-2); margin: 0; }

.rp-caveat {
  max-width: 860px;
  margin: 14px auto 0;
  padding: 14px 18px;
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: var(--r-card);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
.rp-caveat-k {
  display: block;
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--warn);
  margin-bottom: 6px;
}

/* ── open questions + CTA ──────────────────────────────────────────────── */
.rp-final {
  max-width: 916px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.rp-open { display: flex; flex-direction: column; gap: 12px; }
.rp-open ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rp-open li {
  font-size: 12px;
  color: var(--ink-3);
  border: 1px dashed var(--line);
  border-radius: var(--r-pill);
  padding: 7px 12px;
}
.rp-finalbox {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
.rp-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.v2-btn.lg { padding: 11px 18px; font-size: 13px; }

/* ── footer ────────────────────────────────────────────────────────────── */
.rp-foot {
  border-top: 1px solid var(--line-soft);
  padding: 26px 28px 46px;
  max-width: 916px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.rp-foot .px { font-size: 9px; letter-spacing: .16em; color: var(--ink-5); }
.rp-footlinks { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.rp-footlinks a { font-size: 12px; color: var(--ink-4); }
.rp-footlinks a:hover { color: var(--ink-2); }
.rp-disclaimer {
  flex-basis: 100%;
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-5);
}

/* ── narrow ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .rp-nav { padding: 13px 18px; gap: 12px; }
  .rp-hero-in { padding: 52px 18px 44px; }
  .rp-sec { padding: 44px 18px; }
  .rp-facts { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .rp-grid { grid-template-columns: 1fr; }
  .rp-finalbox { padding: 24px 20px; }
  .rp-foot { padding: 24px 18px 40px; }
  .rp-footlinks { margin-left: 0; }
}

/* ── motion off ────────────────────────────────────────────────────────────
   Not a token gesture: the sweep is stopped in JS as well, and everything that
   starts hidden must end visible, or the page is blank for these users. */
@media (prefers-reduced-motion: reduce) {
  .rp-rv { opacity: 1; transform: none; transition: none; }
  .rp-sweep { display: none; }
  .rp-ico .rp-d { stroke-dasharray: none; stroke-dashoffset: 0; }
  .rp-ico .rp-x,
  .rp-ico .rp-miss,
  .rp-ico .rp-flat,
  .rp-ico .rp-push,
  .rp-ico .rp-legs { opacity: 1; transform: none; }
  .rp-card:hover, .rp-survivor:hover { transform: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}