/* /in-action — three worked scenarios.

   The record flow is a numbered list, so reading order is carried by the
   markup rather than by the connectors. Connectors are decorative ::before
   glyphs with an empty accessible name, so assistive technology reads the
   records and not a row of arrows. Every outcome card states its result
   in words; colour only reinforces what the label already says. */

.ia-hero{padding:6.5rem 0 2.5rem}
.ia-h{
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:.65rem 0 0;
}
.ia-lede{
  max-width:44rem;
  margin:1rem 0 0;
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--muted-foreground);
}
.ia-jump{margin:1.5rem 0 0}

.ia-scn{padding:3rem 0;border-top:1px solid var(--border)}
.ia-scn-alt{background:var(--muted)}

.ia-grid{display:grid;gap:2rem}
@media(min-width:880px){
  .ia-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:start}
}

.ia-step{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-foreground);
}
.ia-p{margin:.75rem 0 0;line-height:1.65;max-width:34rem}
.ia-p-sub{color:var(--muted-foreground);font-size:.9375rem}

/* ── the record flow ─────────────────────────────────────────────── */
.ia-flow{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2rem;                 /* room for the connector between cards */
}
.ia-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:1rem 1.15rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.ia-scn-alt .ia-card{background:var(--background)}

/* Connector: a glyph between consecutive cards, never after the last.
   The `/ ""` gives the generated content an empty accessible name, so a
   screen reader reads the list items and not a row of arrows. The list
   order already carries the sequence. */
.ia-card + .ia-card::before{
  content:"↓" / "";
  position:absolute;
  top:-1.55rem;
  left:50%;
  transform:translateX(-50%);
  font-size:1rem;
  line-height:1;
  color:var(--muted-foreground);
}
/* Scenario two reads as arithmetic: 2,500 + 250 = 2,750. The glyph sits
   on the card it introduces, so only the approved change carries "+".
   These must repeat the sibling combinator: a bare `.ia-card-plus::before`
   is less specific than the rule above and loses to it, which silently
   turns the arithmetic back into a column of arrows. */
.ia-card + .ia-card-plus::before{content:"+" / ""}
.ia-card + .ia-card-sum::before{content:"=" / ""}

.ia-card-k{
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-foreground);
}
.ia-card-v{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
.ia-card-note{
  margin-top:.15rem;
  font-size:.875rem;
  color:var(--muted-foreground);
}

.ia-card-sum{border-color:var(--border-strong)}
.ia-card-unread{border-style:dashed}

/* Outcome cards carry the same status dot the homepage outcomes list
   uses (.out-dot), in the same tokens, so a reader meets one visual
   language for a result across the site. The dot is reinforcement only:
   the outcome is always spelled out beside it. */
.ia-card-out{border-color:var(--border-strong)}
.ia-dot{
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  flex-shrink:0;
  display:inline-block;
  margin-right:.5rem;
  vertical-align:.15em;
}
.ia-dot-agree{background:var(--status-green)}
.ia-dot-differ{background:var(--status-amber)}
.ia-dot-hold{background:hsl(0 0% 55%)}

/* ── why this matters ────────────────────────────────────────────── */
.ia-why{padding:3rem 0;border-top:1px solid var(--border)}
.ia-why-p{
  max-width:44rem;
  margin:.75rem 0 0;
  line-height:1.65;
  color:var(--muted-foreground);
}
.ia-points{
  list-style:none;
  margin:1.75rem 0 0;
  padding:0;
  display:grid;
  gap:.75rem;
}
@media(min-width:760px){
  .ia-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
}
.ia-point{
  padding:.9rem 1.1rem;
  background:var(--muted);
  border-radius:var(--radius-sm);
  font-weight:500;
}
.ia-note{
  max-width:44rem;
  margin:1.75rem 0 0;
  font-size:.875rem;
  line-height:1.6;
  color:var(--muted-foreground);
}