/* Explanatory illustrations: one message, a concrete example and a visible outcome. */
.illustration-story {
  container: story / inline-size;
  max-width: 34rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, #203549, #122433 75%);
  box-shadow: 0 18px 45px rgb(3 12 21 / .14);
}
.page-hero__grid .illustration-story { max-width: 34rem; }
.story-intro { margin: 0; }
.story-context { display: block; color: var(--accent); font: 500 .625rem/1.6 var(--font-mono); letter-spacing: .09em; }
.story-message { margin: .45rem 0 0; color: var(--ink-text); font: 600 clamp(1.125rem, 1rem + .25vw, 1.375rem)/1.35 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.story-canvas { position: relative; margin: .75rem -.25rem 0; }
.story-canvas .iso-svg { display: block; overflow: hidden; }
.story-wire { fill: none; stroke: var(--accent); stroke-width: 2; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; }
.story-flow { fill: none; stroke-width: 4; stroke-opacity: 1; stroke-dasharray: 7 93; }
.story-risk { stroke: var(--offense-300); }
.story-safe { stroke: var(--defense-300); }
.story-unresolved { stroke: #7e98ac; stroke-dasharray: 5 8; stroke-opacity: .5; }
.story-arrow { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.story-arrow.story-safe { stroke: var(--defense-300); }
.story-arrow.story-risk { stroke: var(--offense-300); }
.story-stop rect { fill: #20323e; stroke: var(--defense-300); stroke-width: 1.7; }
.story-stop path { fill: none; stroke: var(--defense-300); stroke-width: 2.4; stroke-linecap: round; }
.story-check rect { fill: #163d46; stroke: var(--defense-300); stroke-width: 1.2; }
.story-check path { fill: none; stroke: var(--defense-300); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.story-finding rect { fill: var(--accent-faint); stroke: var(--accent); stroke-width: 1.2; }
.story-finding path { animation: story-attention 5s ease-in-out infinite; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.story-label {
  position: absolute;
  left: var(--label-x);
  top: var(--label-y);
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 30%;
  padding: .2rem .3rem;
  border-radius: var(--radius-xs);
  background: #192d3e;
  color: #e5eef4;
  font: 600 .8125rem/1.35 var(--font-sans);
  text-align: center;
  overflow-wrap: anywhere;
}
.story-label--event { border: 1px solid #5b7c93; color: #c2d3df; font-size: .6875rem; font-weight: 400; }
.story-label--safe { color: var(--defense-300); border: 1px solid rgb(95 227 232 / .45); }
.story-label--risk { color: var(--offense-300); border: 1px solid rgb(255 181 71 / .55); }
.story-gate { fill: rgb(95 227 232 / .09); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.story-label--layer { max-width: 19%; color: var(--accent); font-size: .75rem; }
.story-label--threat { max-width: 23%; color: var(--offense-300); font-size: .6875rem; font-weight: 400; }
.story-label--finding { width: 20%; max-width: 20%; background: transparent; text-align: left; font-size: .75rem; }
.story-notes { display: grid; margin-top: 1rem; }
.story-note { grid-area: 1 / 1; min-width: 0; }
.story-note strong { display: block; color: var(--ink-text); font: 600 .9375rem/1.4 var(--font-display); }
.story-note p { margin: .4rem 0 0; color: var(--ink-muted); font-size: .8125rem; line-height: 1.6; }
.story-mobile-path { display: none; list-style: none; margin: 1rem 0; padding: 0; }
.story-mobile-path li { position: relative; padding: .5rem .75rem .5rem 1.25rem; border-left: 2px solid var(--accent); color: var(--ink-text); font-size: .8125rem; }
.story-mobile-path li + li { margin-top: .6rem; }
.story-mobile-path li + li::before { content: "↓"; position: absolute; top: -.75rem; left: .15rem; color: var(--accent); }
@container story (max-width: 25rem) {
  .story-canvas { display: none; }
  .story-mobile-path { display: block; }
}
@media (max-width: 56rem) {
  .page-hero__grid .hero-art:has(.illustration-story) { display: block; }
  .illustration-story { justify-self: stretch; max-width: 100%; padding: 1rem; }
  .hero__top .illustration-story { width: 100%; max-width: 100%; }
}

@keyframes story-attention { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

.story-plan > path { fill: #28475c; stroke: #718fa6; stroke-width: 1.2; stroke-linejoin: round; }
.story-plan > .story-plan-edge { fill: #152c40; }
.story-plan > .story-plan-rule { fill: none; stroke: #65859b; stroke-width: 1; }
.story-label--field { width: 42%; max-width: 42%; background: transparent; text-align: left; font-size: .75rem; }