/* ============================================================
   LEO SPEKTOR — CASE BLOCKS (v11.5)
   Loaded on case pages after main.css. Replaces the white .card grids
   with one treatment per kind of information:
     .findings  research findings with evidence drawn from their own numbers
     .forces    constraints / requirements: a 2×2 field of forces
     .scale     ordered levels on one axis
     .groups    grouped inventories under ruled heads
   plus .journey (PeakPrivacy): the buyer journey and the three paths chosen at Pricing.
   No surfaces, radii or shadows: rules, type and data carry the structure.
   Tokens only, so every block follows the v11 colour fields.
   ============================================================ */

/* ── FINDINGS: claim · explanation · evidence ─────────────────── */
.findings {
  margin-top: var(--space-block);
  border-top: 1px solid var(--line);
}
.finding {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 1rem;
  align-items: start;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
}
.finding__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: var(--text-title);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.finding__text {
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 30em;
  text-wrap: pretty;
}
/* evidence: only numbers the text already states, drawn so the scale is felt */
.ev-fig {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.ev-fig__of { font-size: 0.5em; color: var(--ink-3); letter-spacing: 0; }
.ev-cap {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-3);
}
/* 37 of 58: one cell per captured screen */
.ev-units {
  display: grid;
  grid-template-columns: repeat(29, minmax(0, 1fr));
  gap: 3px;
  max-width: 22rem;
  margin-top: 1rem;
}
.ev-units i { display: block; aspect-ratio: 1; background: var(--line); }
.ev-units i.on { background: var(--ink); }
/* 388 px screen vs 991 px page, to scale */
.ev-bars { display: grid; gap: 0.6rem; max-width: 22rem; margin-top: 1rem; }
.ev-bar {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ev-bar span { color: var(--ink); }
.ev-bar::before {
  content: "";
  display: block;
  width: var(--w);
  height: 0.75rem;
  margin-bottom: 0.3rem;
  background: var(--ink);
}
.ev-bar--screen::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
/* what global search covers: three in, one out */
.ev-cover {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--text-small);
  font-weight: 500;
}
.ev-cover li { display: inline-flex; align-items: center; gap: 0.5rem; }
.ev-cover li::before {
  content: "";
  width: 0.625rem; height: 0.625rem;
  border-radius: 50%;
  background: var(--ink);
}
.ev-cover li.off { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.ev-cover li.off::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }

@media (max-width: 1000px) {
  .finding { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finding__title { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .finding { grid-template-columns: minmax(0, 1fr); row-gap: 0.85rem; }
  .finding__evidence { margin-top: 0.4rem; }
}

/* ── FORCES: four pressures on one design, as a 2×2 field ─────── */
.forces {
  --fx: clamp(1.5rem, 3vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--space-block);
  border-block: 1px solid var(--line);
}
.force { padding: clamp(1.5rem, 3vw, 2.5rem) var(--fx) clamp(1.75rem, 3vw, 2.75rem) 0; }
.force:nth-child(even) { padding-inline: var(--fx) 0; border-left: 1px solid var(--line-soft); }
.force:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
.force__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: var(--text-title);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.force__text { margin-top: 0.65rem; color: var(--ink-2); line-height: 1.6; max-width: 28em; text-wrap: pretty; }
@media (max-width: 640px) {
  .forces { grid-template-columns: minmax(0, 1fr); }
  .force, .force:nth-child(even) { padding-inline: 0; border-left: none; }
  .force + .force { border-top: 1px solid var(--line-soft); }
}

/* ── SCALE: ordered levels on one axis ──────────────────────────
   The levels are a trade-off, not three products: one line from
   "most sensitive data" to "broader model access", the existing
   level colours as stops. */
.scale { margin-top: var(--space-block); }
.scale__ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-3);
}
.scale__ends span:first-child::before { content: "← "; }
.scale__ends span:last-child::after { content: " →"; }
.scale__stops {
  --gap: clamp(1.5rem, 3vw, 3rem);
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-top: 0.9rem;
  padding-top: 2rem;
}
.scale__stops::before {             /* the axis */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0.4rem;
  height: 1px;
  background: var(--ink);
}
.scale__stop { position: relative; }
.scale__stop::before {              /* the level's own colour, sitting on the axis */
  content: "";
  position: absolute;
  left: 0; top: calc(-2rem + 0.4rem - 0.40625rem);
  width: 0.8125rem; height: 0.8125rem;
  border-radius: 50%;
  background: var(--dot, var(--ink));
  box-shadow: 0 0 0 4px var(--paper);
}
.scale__level {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-3);
}
.scale__title {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: var(--text-title);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.scale__text { margin-top: 0.6rem; color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
/* phone and small tablet: the axis turns vertical, ends above and below */
@media (max-width: 760px) {
  .scale { display: flex; flex-direction: column; }
  .scale__ends { display: contents; }
  .scale__ends span { font-family: var(--font-mono); }
  .scale__ends span:first-child::before { content: "↑ "; }
  .scale__ends span:last-child { order: 2; margin-top: 1rem; }
  .scale__ends span:last-child::after { content: " ↓"; }
  .scale__stops {
    order: 1;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
    margin-top: 1rem;
    padding: 0.25rem 0 0.25rem 2.25rem;
  }
  .scale__stops::before { left: 0.40625rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .scale__stop::before { left: -2.25rem; top: 0.15rem; }
}

/* ── GROUPS: an inventory under ruled heads ───────────────────── */
.groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 2.5rem;
  margin-top: var(--space-block);
}
.group { border-top: 2px solid var(--ink); padding-top: 1rem; }
.group__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: var(--text-sub);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.group__list { list-style: none; margin-top: 1rem; }
.group__list li {
  padding-block: 0.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-small);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .groups { grid-template-columns: minmax(0, 1fr); }
  .group__list { columns: 2; column-gap: clamp(1.5rem, 3vw, 3rem); }
  .group__list li { break-inside: avoid; }
}
@media (max-width: 480px) {
  .group__list { columns: 1; }
}

/* ── JOURNEY (PeakPrivacy, v12.7): one buyer journey, the path is chosen at Pricing ──
   Layer 1 — the journey: six numbered stops on one axis (a real sequence, so numbers).
   Layer 2 — three readiness paths: they hang from stop 04 (filled dot + drop line)
   because the plan is chosen there (UJM: "Pricing / Plans" → "Plan comparison").
   Markup: the paths are nested inside the Pricing <li>; on desktop that <li> is
   display: contents so the paths can take the full second row of the grid.
   ≤900px the axis turns vertical and the paths sit inside the journey, right under Pricing. */
.journey {
  --dot: 0.8125rem;
  --axis-top: 0.4rem;
  --row-gap: clamp(2.25rem, 4vw, 3rem);
  margin-top: var(--space-block);
}
.journey__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-3);
}
.journey__stages {
  position: relative;
  list-style: none;
  margin: 1rem 0 0;
  padding: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: var(--row-gap);
}
.journey__stages::before {            /* the axis */
  content: "";
  position: absolute;
  left: 0; top: var(--axis-top);
  right: calc((100% - 5 * 1.25rem) / 6 - var(--dot) / 2);   /* ends at the last stop */
  height: 1px;
  background: var(--ink);
}
.journey__stage { grid-row: 1; min-width: 0; }
.journey__stage--choice { display: contents; }
.journey__stage--choice > .journey__stop { grid-row: 1; grid-column: 4; }
.journey__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding-left: calc(var(--dot) + 0.5rem);   /* text hangs right of the stop, clear of the drop line */
}
.journey__stop::before {               /* the stop on the axis */
  content: "";
  position: absolute;
  left: 0;
  top: calc(-2rem + var(--axis-top) - var(--dot) / 2);
  width: var(--dot); height: var(--dot);
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.journey__stage--choice .journey__stop::before { background: var(--ink); }
.journey__stage--choice > .journey__stop::after {   /* the drop from Pricing to the paths */
  content: "";
  position: absolute;
  left: calc(var(--dot) / 2 - 0.5px);
  top: calc(-2rem + var(--axis-top));
  bottom: calc(-1 * var(--row-gap));
  width: 1px;
  background: var(--ink);
}
.journey__num,
.journey__note {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-3);
}
.journey__name {
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.journey__note { margin-top: 0.2rem; line-height: 1.4; }
.journey__paths {
  grid-row: 2;
  grid-column: 1 / -1;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
}
.journey__plans {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
}
.journey__plan-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-serif);
  font-size: var(--text-sub);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.journey__plan-desc {
  margin: 0.5rem 0 0;
  max-width: 34ch;
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* tablet and phone: the axis turns vertical; the paths sit inside the journey, under Pricing */
@media (max-width: 900px) {
  .journey__stages { display: block; padding: 0 0 0 2.25rem; margin-top: 1.25rem; }
  .journey__stages::before { content: none; }
  .journey__stage { position: relative; padding-bottom: 1.5rem; }
  .journey__stage:last-child { padding-bottom: 0; }
  .journey__stage:not(:last-child)::after {   /* axis segment down to the next stop */
    content: "";
    position: absolute;
    left: calc(-2.25rem + var(--dot) / 2 - 0.5px);
    top: calc(0.2rem + var(--dot)); bottom: -0.2rem;   /* from this stop's dot to the next one */
    width: 1px;
    background: var(--ink);
  }
  .journey__stage--choice { display: block; }
  .journey__stop { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; padding-left: 0; }
  .journey__stop::before { left: -2.25rem; top: 0.2rem; }
  .journey__stage--choice > .journey__stop::after { content: none; }
  .journey__note { flex-basis: 100%; margin-top: 0; }
  .journey__paths { border-top: 0; padding-top: 1.25rem; }
  .journey__plans { display: block; margin-top: 0.75rem; }
  .journey__plan {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 1.5rem;
    padding-block: 1rem;
    border-top: 1px solid var(--line-soft);
  }
  .journey__plan-desc { margin-top: 0.2rem; }
}
@media (max-width: 640px) {
  .journey__plan { display: block; }
  .journey__plan-desc { margin-top: 0.4rem; }
}