/* ==========================================================================
   Crux V6: Proof and Resources
   ==========================================================================
   Two secondary destinations, deliberately kept out of the primary navigation.
   Both are built on the Control Tower stage system so they read as part of the
   same site rather than as appendices, and both reuse the existing container,
   button, breadcrumb and stagehead primitives. Nothing here is a new pattern
   for its own sake: the only genuinely new components are the ones that carry
   evidence, because evidence has a shape the rest of the site does not need.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE BASIS BLOCK
   The first thing on the proof page is not a number. It is the disclosure of
   where the numbers come from, including the related-party relationship. That
   ordering is the point: a reader meets the caveats before the claims.
   -------------------------------------------------------------------------- */

.home .basis { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .home .basis { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.home .basis__item { border-top: 2px solid var(--navy); padding-top: 1rem; }
.home .basis__k {
  display: block; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.home .basis__v { color: var(--ink-body); font-size: 0.95rem; line-height: 1.6; margin: 0; max-width: 42ch; }

/* --------------------------------------------------------------------------
   2. ADOPTION METRICS
   Set in Bebas, because these are readings off an instrument rather than
   sentences. Each carries its own provenance label; a figure without one has
   no business being on this page.
   -------------------------------------------------------------------------- */

.home .metrics { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .home .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .home .metrics { grid-template-columns: repeat(4, 1fr); } }

.home .metric {
  background: var(--card); border: 1px solid var(--rule);
  border-top: 3px solid var(--yellow); border-radius: var(--radius-md);
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.home .metric__v {
  font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 0.9; color: var(--navy); letter-spacing: 0.01em;
}
.home .metric__k { font-size: 0.95rem; line-height: 1.4; color: var(--ink); font-weight: 500; }
.home .metric__src {
  margin-top: auto; padding-top: 0.6rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-muted);
}
.home .metrics__note {
  margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.74rem;
  line-height: 1.7; color: var(--ink-muted); max-width: 78ch;
}

/* --------------------------------------------------------------------------
   3. REPORTED RESULTS
   A figure, a provenance tag, the claim, and then the mechanism in a
   definition list. The mechanism rows are what stop this being a wall of
   marketing numbers: every result has to show its working.
   -------------------------------------------------------------------------- */

.home .results { display: grid; gap: 1.25rem; }
@media (min-width: 62rem) { .home .results { grid-template-columns: repeat(3, 1fr); } }

.home .result {
  background: var(--card); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md); padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.home .result__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.home .result__fig {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--navy); letter-spacing: 0.02em;
}
.home .result__tag {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: 2px 9px;
}
.home .result__tag--cust { color: var(--navy); border-color: var(--navy); }
.home .result__t { font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.3; margin: 0; }
.home .result__grid { display: grid; gap: 0.7rem; margin: 0; }
.home .result__grid dt {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.home .result__grid dd { margin: 0.15rem 0 0; color: var(--ink-body); font-size: 0.9rem; line-height: 1.5; }

/* The one quote on the page. Kept plain: a rule and a name, no giant glyph. */
.home .pquote {
  margin: var(--bay-tight) 0 0; padding-left: 1.4rem;
  border-left: 3px solid var(--yellow); max-width: 56ch;
}
.home .pquote blockquote { margin: 0; }
.home .pquote p {
  font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.4;
  color: var(--ink); font-weight: 500; margin: 0;
}
.home .pquote figcaption {
  margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em; color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   4. MECHANISM AND EVALUATION LISTS
   The same numbered-row component serves "why these outcomes happen" on Proof
   and "questions worth asking" on Resources. One pattern, two jobs.
   -------------------------------------------------------------------------- */

.home .mech, .home .evalq { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.home .mech__item, .home .evalq__item {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem;
  padding: 1.4rem 0; border-top: 1px solid var(--rule);
}
.home .mech__item:last-child, .home .evalq__item:last-child { border-bottom: 1px solid var(--rule); }
.home .mech__n, .home .evalq__n {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--yellow); padding-top: 0.2rem;
}
.home .mech__t, .home .evalq__t {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem); font-weight: 600;
  color: var(--ink); line-height: 1.3; margin: 0;
}
.home .mech__d, .home .evalq__d {
  margin: 0.5rem 0 0; color: var(--ink-body); font-size: 0.95rem;
  line-height: 1.6; max-width: 62ch;
}
@media (max-width: 34rem) {
  .home .mech__item, .home .evalq__item { grid-template-columns: 2.4rem 1fr; gap: 0.9rem; }
}

/* --------------------------------------------------------------------------
   5. RESOURCE CARDS AND OUTBOUND LINKS
   These ARE clickable, so they get the affordances the rest of the site
   deliberately withholds: a hover lift, a moving marker, and a focus ring.
   -------------------------------------------------------------------------- */

.home .reslist { display: grid; gap: 1.1rem; }
@media (min-width: 58rem) { .home .reslist { grid-template-columns: repeat(3, 1fr); } }

.home .rescard {
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--card); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md); padding: 1.5rem 1.4rem;
  text-decoration: none; color: inherit;
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.home .rescard:hover {
  border-color: var(--navy); transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20, 26, 60, 0.12);
}
.home .rescard:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.home .rescard__kind {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue);
}
.home .rescard__t { font-size: 1.1rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.home .rescard__d { color: var(--ink-body); font-size: 0.9rem; line-height: 1.55; }
.home .rescard__go {
  margin-top: auto; padding-top: 0.9rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--navy); font-weight: 500;
}
.home .rescard__go::after {
  content: " \2192"; display: inline-block;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.home .rescard:hover .rescard__go::after { transform: translateX(3px); }
.home .reslist__note {
  margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.74rem;
  line-height: 1.7; color: var(--ink-muted); max-width: 78ch;
}

/* The same card, on a dark stage. */
.home .ownlinks { display: grid; gap: 1.1rem; }
@media (min-width: 58rem) { .home .ownlinks { grid-template-columns: repeat(3, 1fr); } }
.home .ownlink {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md); padding: 1.4rem 1.35rem;
  text-decoration: none; color: inherit;
  transition: border-color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.home .ownlink:hover {
  border-color: var(--yellow); background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.home .ownlink:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.home .ownlink__k {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--yellow);
}
.home .ownlink__t { font-size: 1.02rem; font-weight: 600; color: #fff; line-height: 1.3; }
.home .ownlink__d { color: rgba(255, 255, 255, 0.72); font-size: 0.86rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   6. THE PENDING NOTE
   Saying plainly what is not yet published costs one paragraph and buys more
   credibility than any of the numbers above it.
   -------------------------------------------------------------------------- */

.home .pending__note {
  max-width: 64ch; color: rgba(255, 255, 255, 0.82);
  font-size: 1rem; line-height: 1.65;
  border-left: 3px solid var(--yellow); padding-left: 1.1rem;
}

/* A stage exit on a dark stage keeps the underline, loses the light rule. */
.home .stage-out--dark { border-top-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.82); }
.home .stage-out--dark a { color: #fff; }

/* h1 on these pages uses the stagehead ramp; give it the hero's weight. */
.home h1.stagehead__title { font-size: clamp(2.3rem, 4.2vw, 3.5rem); max-width: 19ch; }

/* ==========================================================================
   OUTCOMES WITH NO FIGURE ATTACHED
   ==========================================================================
   The page consolidates what financial control produces. Three of those
   outcomes have no measured figure, and the honest options were to leave them
   off the page or to put them on it with the gap stated. Leaving them off made
   the page look like the only outcomes worth having are the three with numbers
   beside them, which is not true and is not what the workflow does.

   So they sit here, after the reported results and before the mechanism they
   follow from, in a visually distinct band with their own evidence tag. The
   tag says what it is: this follows from how the workflow works, and nobody
   has measured it. No figure, no attribution, no case study.
   ========================================================================== */

.home .unmeas {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}
.home .unmeas__h {
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.35rem; line-height: 1.3; color: var(--ink);
}
.home .unmeas__lead {
  margin-top: 0.6rem; max-width: 34em;
  font-size: 0.9375rem; line-height: 1.65; color: var(--ink-body);
}
.home .unmeas__list {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: 1rem;
}
@media (min-width: 60rem) {
  .home .unmeas__list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.home .unmeas__item {
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  background: transparent;
  padding: 1.15rem 1.25rem 1.25rem;
}
.home .unmeas__head { display: grid; gap: 0.5rem; }
.home .unmeas__t {
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.35; color: var(--ink);
}
/* Deliberately not the tag treatment used by the measured results above: a
   dashed outline and no fill, so the difference is visible before it is read. */
.home .unmeas__tag {
  justify-self: start;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px dashed var(--rule-strong);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}
.home .unmeas__d {
  margin-top: 0.85rem;
  font-size: 1.0625rem; line-height: 1.65; color: var(--ink-body);
}