/* Financial forecast: the app's calendar and the forecast it shows, side by side. */
.forecast-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.forecast-story-copy p:not(.eyebrow) { margin-top: 18px; color: var(--muted); max-width: 460px; }
.forecast-story-copy .fine-print { margin-top: 18px; }
.forecast-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(10px, 2vw, 24px); align-items: center; width: min(560px, 100%); justify-self: center; }
.forecast-pair figure { display: grid; gap: 18px; justify-items: center; align-self: start; }
.forecast-pair figure > .dev { width: 100%; }
.forecast-step-arrow { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 64px; border-radius: 50%; background: var(--chip); color: var(--ink); }
.forecast-step-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .forecast-story { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .forecast-step-arrow { width: 28px; height: 28px; margin-bottom: 72px; }
  .forecast-step-arrow svg { width: 14px; height: 14px; }
}
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) .forecast-pair { grid-template-columns: minmax(0, 1fr); width: min(300px, 100%); }
html:is([data-a11y-size="150"], [data-a11y-size="175"], [data-a11y-size="200"]) .forecast-step-arrow { transform: rotate(90deg); justify-self: center; margin: 0; }