/* ============================================================================
 * VoiceInsights Africa — Homepage storytelling upgrade
 * ----------------------------------------------------------------------------
 * Additive only. Consumes tokens already defined in style.css and does not
 * override any existing homepage rule, so the approved hero, proof strip and
 * story sections render exactly as before.
 *
 * Two additions:
 *   .hero-positioning  — the product category line above the H1
 *   .e2i-*             — the Evidence-to-Impact operating loop
 * ========================================================================== */

/* ============================================================================
 * PORTED TYPOGRAPHIC REFINEMENTS
 * ----------------------------------------------------------------------------
 * Selectively ported from the untracked working tree's
 * assets/css/enterprise-refinement.css (52 lines), which was never committed.
 *
 * What was ported: the homepage typographic rhythm and reading-measure rules
 * below. They are genuine polish — tighter display headings with optical
 * letter-spacing, balanced text wrapping, and constrained measures.
 *
 * What was deliberately NOT ported, and why:
 *   - Every `.knowledge-*-focused` rule (roughly half that file). Those classes
 *     match ZERO pages in this repository — they target a rewritten
 *     sample-reports.html that exists only in the untracked tree. Porting them
 *     would add dead CSS.
 *   - `--surface-1`, used there for section background gradients. That token
 *     does not exist in this repository's style.css (which defines --surface,
 *     --surface-2, --surface-3). Ported gradients below use the real tokens;
 *     copying verbatim would have rendered transparent.
 *   - The untracked tree's 32KB-smaller index.html. That is a content deletion,
 *     not a refinement, and is a separate editorial decision.
 * ========================================================================== */

.phase1-home .phase1-hero {
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
/* The h1 rule lives ONCE, further down, with the sweep that justifies its
   measure. It used to be here at 15ch with text-wrap: balance, which is what
   set the brand line over six lines and split "decision-ready" at its hyphen. */
/* Narrowed from 64ch. At 64ch this ran nearly the full column and competed
   with the brand line above it for the eye; it is support, so it reads as
   support. */
.phase1-home .hero-support {
  max-width: 52ch; margin: 0;
  font-size: 1rem; line-height: 1.65;
  color: var(--text-muted);
}
.phase1-home .proof-strip { border-block: 1px solid var(--border); box-shadow: none; }
.phase1-home .story-section { padding-block: clamp(4rem, 7vw, 7.5rem); }
.phase1-home .section-header { max-width: 780px; }
.phase1-home .section-header h2 {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.phase1-home .section-header p { font-size: 1.06rem; line-height: 1.75; }

/* Alternating section rhythm. --surface-1 in the source did not exist here;
   mapped to the real tokens so the gradient actually renders. */
/* A SECTION THAT DECLARES A NARRATIVE BAND OWNS ITS OWN GROUND.
   These are ID selectors — specificity (1,1,0) — in a stylesheet that loads
   after style.css, so they beat any band rule no matter how it is written.
   That is why the emerald close kept rendering champagne text on white and
   measured 1.22:1: the band set the text, this set the ground, and this won.
   Excluding banded sections is the fix; escalating specificity elsewhere would
   only have hidden which rule was really in charge. */
.phase1-home #story-lifecycle:not([data-band]),
.phase1-home #story-knowledge:not([data-band]),
.phase1-home #story-implementation:not([data-band]) {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.phase1-home #story-channels:not([data-band]),
.phase1-home #story-trust:not([data-band]),
.phase1-home #story-final:not([data-band]) { background: var(--surface); }

.phase1-home .knowledge-package { gap: clamp(2rem, 5vw, 5rem); }
.phase1-home .story-section-final { max-width: none; }
.phase1-home .story-section-final .section-header { margin-inline: auto; }

/* A 700px font override for the h1 used to sit here. It is gone: the h1's size
   and measure are decided in one place, because the measure is what controls
   the wrapping and splitting them across the file is how they drift apart. */

/* ---------- Positioning line ------------------------------------------- */
.hero-positioning {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 .75rem;
  line-height: 1.5;
  max-width: 46ch;
}

/* ---------- Evidence-to-Impact loop ------------------------------------ */
.e2i-section .section-header { max-width: 68ch; }
.e2i-section .section-header p { color: var(--text-muted); line-height: 1.65; }

.e2i-flow {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  counter-reset: e2i;
}

.e2i-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* Directional connector between stages. Purely decorative — the ordered
   list already conveys sequence to assistive technology. */
.e2i-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -.62rem;
  width: .5rem;
  height: 1px;
  background: var(--border-strong);
  z-index: 1;
}
.e2i-step:last-child::after { display: none; }

.e2i-n {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--accent-text);
}

.e2i-step h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 0;
  line-height: 1.25;
}

.e2i-step p {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* The loop closes — the final stage is visually distinguished because it
   feeds back into the first, which is the whole argument of this section. */
.e2i-step-loop {
  border-top-color: var(--accent);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.e2i-loop-note {
  margin: 1rem 0 0;
  font-size: .88rem;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: .45rem;
  flex-wrap: wrap;
}
.e2i-loop-note span { color: var(--accent); font-size: 1.05rem; }

/* ---------- Responsive ------------------------------------------------- */
@media (max-width: 1100px) {
  .e2i-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .e2i-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 720px) {
  .e2i-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e2i-step:nth-child(3n)::after { display: block; }
  .e2i-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 460px) {
  .e2i-flow { grid-template-columns: 1fr; }
  .e2i-step::after { display: none; }
}

/* ---------- Motion ------------------------------------------------------
   Staged reveal is applied by script only when motion is allowed, and the
   section is fully readable without it — no content depends on animation. */
.e2i-step {
  transition: transform .18s ease, border-color .18s ease;
}
.e2i-step:hover,
.e2i-step:focus-within {
  transform: translateY(-2px);
  border-color: var(--accent-2);
}

@media (prefers-reduced-motion: reduce) {
  .e2i-step { transition: none !important; }
  .e2i-step:hover, .e2i-step:focus-within { transform: none !important; }
}

@media print {
  .e2i-flow { grid-template-columns: repeat(3, 1fr); }
  .e2i-step { break-inside: avoid; border: 1px solid #000; }
  .e2i-step::after { display: none; }
}

/* ============================================================
   HERO — three layers: VALUE, SYSTEM, ACTION
   ------------------------------------------------------------
   What was wrong, measured rather than felt:

     - The brand line is 68 characters and was set into max-width:19ch at
       ~56px. It broke over SIX lines and hyphenated "decision-ready" into
       "decision-" / "ready data" — splitting the compound the whole line is
       built on. It is now given a measure that lets it set in three lines
       with the compound intact.
     - The hero measured 1070px against a 980px fold, so the ACTION layer
       began below it and the third button was sliced by the viewport edge.
     - Four destinations competed with no hierarchy, two of them pointing at
       the same page.

   The h1 is pinned as literal markup by the release contract and carries no
   inner spans, so every typographic decision here is made in CSS.
   ============================================================ */

.phase1-home .phase1-hero-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
.phase1-home .hero-value { display: grid; gap: 0; align-content: center; }

/* The positioning statement kept every word and lost the shouting. Twelve
   words set in uppercase mono ran to three lines and read as a paragraph
   wearing a label's clothes. */
.phase1-home .hero-positioning {
  max-width: 44ch; margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: .95rem; line-height: 1.5; letter-spacing: 0;
  text-transform: none; font-weight: 500;
  color: var(--text-muted);
}
.phase1-home .hero-positioning::before {
  content: ""; display: block; width: 2.25rem; height: 2px; margin-bottom: .8rem;
  background: var(--accent); border-radius: 2px;
}

/* "decision-ready" carries a real hyphen, which is a break OPPORTUNITY the
   browser will take whenever the line is short of room — `hyphens: none` does
   not prevent it, because that property governs automatic hyphenation only.
   With no inner markup permitted in this h1, the only lever is to leave enough
   room that the break is never needed: the measure below fits the full
   compound, verified per-character against the painted line boxes rather than
   estimated. */
.phase1-home .phase1-hero h1 {
  max-width: 20ch; margin: 0 0 1.15rem;
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  line-height: 1.05; letter-spacing: -.03em;
  /* NOT balance. Balance was the cause: splitting the compound gives lines of
     24/21/23 characters, which it scores better than the intact 24/26/17. It
     bought evenness by breaking the phrase the line is built on. Greedy
     wrapping at this measure sets the compound whole. */
  text-wrap: wrap;
  hyphens: none; -webkit-hyphens: none;
}
.phase1-home .hero-actions { margin-top: 1.5rem; gap: .7rem; }

/* One quiet third destination, demoted out of the button row so the primary
   and secondary actually rank. */
.phase1-home .hero-tertiary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin: 1.05rem 0 0;
  font-size: .82rem; line-height: 1.5;
}
.phase1-home .hero-tertiary a { color: var(--accent-text); font-weight: 650; text-decoration: none; }
.phase1-home .hero-tertiary a:hover { text-decoration: underline; }
.phase1-home .hero-tertiary span { color: var(--text-dim); }

/* The line has exactly three sane settings, and the measure in `ch` is what
   selects between them, because capacity in CHARACTERS is what wrapping
   actually responds to:

   THE MEASURE IS THE ONLY LEVER, and it is font-size invariant: a 14ch measure
   produced identical line breaks at 27px, 31px and 36px. So the two settings
   below are measures, and the font sizes are free to be whatever suits the
   width.

     20ch  "Any voice, any language," / "turned into decision-ready" /
           "data — instantly."                                   — three lines
     14ch  "Any voice, any" / "language, turned" / "into decision-ready" /
           "data — instantly."                                    — four lines

   Everything between roughly 15ch and 18ch, and everything at 22ch and above,
   is defective: either "instantly." is widowed onto a line of its own, or the
   compound splits at its hyphen to avoid that. Both were measured, not
   guessed — a sweep drove max-width from 12ch to 34ch at seven viewports and
   read the painted line boxes back per character. An earlier pass set 24ch on
   the theory that 1ch was about 1.2 characters; it was wrong, and only the
   sweep showed it. */
@media (max-width: 1080px) {
  .phase1-home .phase1-hero-grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .phase1-home .phase1-hero h1 { max-width: 14ch; font-size: clamp(1.7rem, 8vw, 2.9rem); }
  .phase1-home .hero-positioning { font-size: .88rem; }
}

/* ============================================================
   FAQ — a disclosure that looks like one
   ------------------------------------------------------------
   The five questions are real <details>/<summary> pairs and always worked:
   clicking one reveals its answer. But a <summary> only paints its disclosure
   marker while it is display: list-item, and something set these to flex. The
   marker disappeared, `list-style-type: disclosure-closed` stayed in the
   computed style doing nothing, and the result was a section headed "Practical
   answers" showing five answers-that-look-like-inert-chips.

   So the affordance is drawn explicitly rather than left to the UA.

   THE SAME FAULT WAS IN THREE MORE PLACES. An audit of every <summary> the
   homepage renders found 19 of them across four sections — story-channels (1),
   story-products (8), story-buyers (5) and story-faq (5) — and every one was
   display:flex with no marker. In story-buyers that made "Typical products"
   look like a heading with nothing beneath it, on all five cards. In
   story-products it made "Available formats", "Purpose and access", "Included
   material" and "Access options" look like four inconsistent labels for an
   empty slot. None of them were labels; all of them were controls.

   So this is scoped to the homepage rather than to one grid.
   ============================================================ */
.phase1-home details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .9rem;
  list-style: none;
  cursor: pointer;
}
.phase1-home details > summary::-webkit-details-marker { display: none; }
.phase1-home details > summary::after {
  content: ""; flex: none;
  width: .48rem; height: .48rem; margin-right: .15rem;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.phase1-home details[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.phase1-home details > summary:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* The FAQ pills are the only ones that are themselves the card, so they alone
   take the hover/focus border. */
.phase1-home .faq-preview-grid details { transition: border-color .18s ease; }
.phase1-home .faq-preview-grid details:hover,
.phase1-home .faq-preview-grid details:focus-within { border-color: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  .phase1-home details > summary::after,
  .phase1-home .faq-preview-grid details { transition: none !important; }
}

/* ============================================================
   ONE GOVERNED DECISION MOMENT (story-example)
   ------------------------------------------------------------
   The "Governed synthetic demonstration" badge used to sit inside card 01,
   inline, immediately before the step label. .badge is inline-flex and taller
   than the line box it sits in, so as soon as the card was narrow enough for
   the two to wrap — the 3-column desktop layout and every phone width — the
   badge bled down over the step label. Measured overlap: 3941px² at 1440 and
   390, none at 1024 or 768, which is exactly the wrap threshold.

   It moved to the section header, where it labels the whole demonstration
   rather than one card of it. That also retires the third statement of the
   same fact: the header sentence and card 01's own copy both already say the
   data is fictional.

   The section now states its FINDING rather than only listing that a finding
   was created, so the record reads context → evidence → finding → decision →
   owner without a gap in the middle.
   ============================================================ */
.phase1-home .demo-finding {
  margin: .9rem 0 0;
  padding: .7rem .85rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--surface-2);
  font-size: .8rem; line-height: 1.55;
  color: var(--text);
}
.phase1-home .demo-finding b {
  display: block;
  font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .2rem;
}
.phase1-home .section-header .badge { margin-right: .45rem; vertical-align: middle; }

/* ============================================================
   CHANNELS — one list, then its detail
   ------------------------------------------------------------
   The section named the same five channels TWICE on one screen: once in the
   convergence diagram and again as five detail cards. Worse, in two different
   orders — the diagram is authored by availability state (three Available,
   then two Configurable), the cards ran Phone / WhatsApp / SMS / Web / Offline.
   Two orders for the same five things reads as two different lists.

   The cards now follow the diagram's order, and their Connection / Response /
   Use table sits behind a disclosure. The diagram states WHICH ways in exist
   and what state each is in; the cards say what each one is FOR; the detail is
   there for whoever wants it. Nothing was removed.
   ============================================================ */
.phase1-home .channel-lede {
  max-width: 62ch;
  margin: 1.9rem 0 1.1rem;
  font-size: .96rem; line-height: 1.65;
  color: var(--text-muted);
}
.phase1-home .channel-grid article > details { margin-top: .85rem; }
.phase1-home .channel-grid article > details > summary {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-text);
  padding-top: .6rem; border-top: 1px solid var(--border);
}
.phase1-home .channel-grid article > details dl { margin-top: .6rem; }

/* ============================================================
   KNOWLEDGE — the bridge, not a third product list
   ------------------------------------------------------------
   This section used to hold eight nodes named Dashboard, Report, Dataset,
   Publication, Evidence Pack, Methodology, Metadata and Policy Brief. That was
   the THIRD hand-written product list on one page — after the retired
   story-products and the canonical universe — and the one furthest from any
   authority that could keep it true.

   The section's actual job is to answer "what happens to evidence after the
   report?", so it now states what a record still carries once the project that
   produced it has closed. Each of the four was measured 100/100 across the
   published evidence records during the Trust authority audit; none of them is
   a feature claim, and the note is explicit that no self-answering institutional
   memory is being asserted.

   The full product showroom remains the Knowledge Ecosystem's own mission.
   ============================================================ */
.phase1-home .knowledge-afterlife {
  align-self: start;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--border); border-radius: var(--radius, 12px);
  background: var(--surface);
}
.phase1-home .knowledge-afterlife-head {
  margin: 0 0 .9rem; font-size: .92rem; font-weight: 650; color: var(--text);
}
.phase1-home .knowledge-afterlife ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .75rem;
  counter-reset: kaf;
}
.phase1-home .knowledge-afterlife li {
  counter-increment: kaf;
  display: grid; gap: .15rem;
  padding-left: 2.1rem; position: relative;
}
.phase1-home .knowledge-afterlife li::before {
  content: counter(kaf, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 650;
  color: var(--accent-text);
}
.phase1-home .knowledge-afterlife li b { font-size: .86rem; color: var(--text); }
.phase1-home .knowledge-afterlife li span { font-size: .8rem; line-height: 1.55; color: var(--text-muted); }
.phase1-home .knowledge-afterlife-note {
  margin: 1rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--border);
  font-size: .78rem; line-height: 1.6; color: var(--text-dim);
}

/* ============================================================
   TOUCH TARGETS ON STANDALONE LINK ROWS
   ------------------------------------------------------------
   Measured at 390px: six links rendered below 24px tall. WCAG 2.5.8 exempts a
   link sitting inline INSIDE a sentence, because enlarging it would break the
   line it belongs to — that covers "Try the respondent demo", which is followed
   by explanatory text on the same line.

   It does not cover a row of links that is its own block: the universe's three
   onward routes, "See all twelve stages" and "Explore all common questions" are
   navigation, not prose, and they were 15-22px. They get the height.
   ============================================================ */
.phase1-home .viuni-onward a,
.phase1-home a.text-link,
.phase1-home .visignal-more a,
.phase1-home .vitrace-more a {
  display: inline-flex; align-items: center;
  min-height: 24px;
  padding-block: 2px;
}