/* Phone-scale adaptation of S05 Identity's real asset-grid. Shell stays untouched. */
.phase3.story-revision .how-frame .step3-interactive {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 5.2cqw 5.6cqw 6.2cqw;
  color: #14151a;
  background: linear-gradient(125deg, #f9fafb, #edf0f3 72%, #e5e9ed);
  font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 3.85cqw;
  line-height: 1.45;
  text-align: left;
  letter-spacing: -.008em;
}
.phase3.story-revision .how-frame .step3-interactive * { box-sizing: border-box; }
.phase3.story-revision .how-frame .step3-interactive p, .phase3.story-revision .how-frame .step3-interactive h4, .phase3.story-revision .how-frame .step3-interactive h5 { margin: 0; }
.phase3.story-revision .how-frame .step3-interactive p { font-size: 3.85cqw; line-height: 1.45; color: #424b57; margin: 0; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__eyebrow {
  color: #646973;
  font-size: 3cqw;
  line-height: 1.45;
  margin: 0;
  font-weight: 600;
  letter-spacing: .13em;
}
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__title {
  margin: 2.2cqw 0 2cqw;
  font-size: 8.9cqw;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__lead { margin: 0; color: #535b65; max-width: 28ch; font-size: 3.85cqw; line-height: 1.45; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__axes {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 5cqw 0 2cqw;
  color: #626b75;
  font-size: 3.25cqw;
}
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__quadrant {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5cqw;
  width: 100%;
  min-width: 0;
  min-height: 29.3cqw;
  padding: 3.5cqw;
  border: 1px solid #c8cdd3;
  border-radius: 0;
  background: #ffffff59;
  color: #171b22;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__quadrant strong { display: block; font-size: 4.85cqw; font-weight: 450; line-height: 1.13; letter-spacing: -.025em; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__quadrant > span { display: block; font-size: 3.1cqw; line-height: 1.35; color: #5b626b; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__quadrant.is-selected {
  background: linear-gradient(120deg, #d2d8df, #e5e9ef);
  border-color: #65707c;
  box-shadow: inset 0 0 0 1px #65707c;
}
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__quadrant.is-selected > span { color: #202a36; font-weight: 550; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__static { color: #727780; background: #e7ebef80; cursor: default; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__quadrant:focus-visible { outline: 2px solid #14151a; outline-offset: 2px; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__outcome { padding: 4.2cqw 0 0; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__kicker { font-size: 2.9cqw; line-height: 1.45; margin: 0; color: #626b75; letter-spacing: .045em; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__decision { margin: 1.8cqw 0 2.4cqw; font-size: 5.75cqw; font-weight: 500; line-height: 1.13; letter-spacing: -.025em; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__takeaway { margin: 0; color: #424b57; font-size: 3.55cqw; line-height: 1.48; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 4cqw 0 0; border: 0; max-width: none; font-size: 3.05cqw; color: #535c66; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__position { font-variant-numeric: tabular-nums; font-size: 3.3cqw; color: #202936; letter-spacing: .08em; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__note { margin: 2cqw 0 0; border-top: 1px solid #ccd1d7; padding-top: 2.5cqw; font-size: 2.65cqw; line-height: 1.45; color: #65707a; }
.phase3.story-revision .how-frame .step3-interactive .step3-interactive__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* No animation, time-based advance, translation or inner scrolling. Changes are
   direct state choices, and the JS also respects global Pause motion/reduced motion. */