/* Shared layout for the Capacity and Agentic Automation stories. */
.narrative { position: relative; isolation: isolate; overflow: hidden; padding-block: 105px 80px; --narrative-muted: #565e6a; --narrative-line: #11182720; --narrative-accent: var(--vl-red); --vl-card-title-color: var(--vl-ink); --vl-card-text-color: var(--narrative-muted); }
.narrative__header { display: grid; grid-template-columns: 1.12fr 1fr; align-items: end; gap: 80px; margin-bottom: 60px; }
.narrative__header .section-kicker { margin-bottom: 36px; }
.narrative__header .section-title { max-width: 700px; }
.narrative__intro { max-width: 550px; color: var(--narrative-muted); font-size: 14px; line-height: 1.85; }
.narrative__intro p { margin: 0 0 16px; }
.narrative__intro p:last-child { margin-bottom: 0; }
.narrative-icon { --narrative-icon-size: 44px; display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--narrative-icon-size); height: var(--narrative-icon-size); border: 1px solid currentColor; border-radius: 50%; color: var(--narrative-accent); font-size: 18px; }
.narrative__benefits { --vl-card-grid-columns: repeat(4, minmax(0, 1fr)); --vl-card-grid-gap: 36px; margin-top: 58px; }
.narrative__benefits article { padding-top: 26px; border-top: 1px solid var(--narrative-line); }
.narrative__benefits .narrative-icon { margin-bottom: 24px; border-color: var(--narrative-line); }
.narrative__benefits h3 { --vl-card-title-margin: 0 0 16px; --vl-card-title-line-height: 1.13; max-width: 250px; }
.narrative__benefits p { --vl-card-text-size: 12px; --vl-card-text-line-height: 1.8; }
.narrative__closing { margin-top: 55px; padding-top: 32px; border-top: 1px solid var(--narrative-line); display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.narrative__closing p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--narrative-muted); }
.narrative__closing strong, .narrative__closing p > span { display: block; }
.narrative__closing strong { color: var(--vl-card-title-color); font-weight: 650; }
.narrative__closing .button { flex: 0 0 auto; }
.narrative-field { position: absolute; inset: -8%; z-index: -1; pointer-events: none; color: var(--narrative-accent); opacity: .08; translate: 0 var(--capacity-shift, 0px); rotate: var(--capacity-turn, 0deg); }
.narrative-field svg { width: 100%; height: 100%; stroke-width: .7; }
.narrative[data-background-playing="false"] .capacity-routing__signals path { animation-play-state: paused; }
@media (max-width: 1100px) { .narrative__header { gap: 40px; } .narrative__benefits { --vl-card-grid-gap: 24px; } }
@media (max-width: 900px) { .narrative { padding-block: 75px 60px; } .narrative__header { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; } .narrative__intro { max-width: 680px; } .narrative__benefits { --vl-card-grid-columns: repeat(2, minmax(0, 1fr)); } .narrative__closing { gap: 28px; } }
@media (max-width: 600px) { .narrative { padding-block: 60px 50px; } .narrative__header .section-title { font-size: clamp(34px, 9.3vw, 46px); } .narrative__intro { font-size: 12px; } .narrative__benefits { --vl-card-grid-gap: 30px 22px; margin-top: 38px; } .narrative__benefits h3 { --vl-card-title-size: 21px; } .narrative__benefits p { --vl-card-text-size: 11px; } .narrative__closing { align-items: start; flex-direction: column; margin-top: 38px; } }
@media (prefers-reduced-motion: reduce) { .narrative .capacity-routing__signals path { animation: none; } }