/* The habit app and a growing courtyard show the same progress in two places. */
.story-action .story-layout { row-gap: 36px; }
.story-action-summary { min-width: 0; }
.story-action .story-action-summary .story-description { margin-top: 0; }
.life-progress-visuals { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: 32px 56px; min-width: 0; }
.life-progress-visuals .habit-gallery { max-width: 300px; justify-self: center; }
.effort-demo { position: relative; width: 100%; min-width: 0; margin: 0; padding-top: 44px; text-align: left; }
.effort-demo[data-motion="reduced"] { padding-top: 0; }
.effort-world { min-width: 0; margin: 0; }
.effort-world-image { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 12px; background: oklch(.8 .06 155); }
.effort-world-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .9s cubic-bezier(.25,1,.5,1); }
.effort-world-before { opacity: 1; }
.effort-world-after { opacity: 0; }
.effort-demo[data-phase="grown"] .effort-world-after { opacity: 1; }
.effort-world figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; }
.effort-world figcaption span { font-size: 12px; }
.effort-world figcaption strong { font-size: 16px; font-weight: 550; line-height: 1.5; }
.effort-pause { position: absolute; right: 0; top: 0; min-height: 44px; padding: 4px 0; background: transparent; font-size: 12px; font-weight: 550; text-decoration: underline; text-underline-offset: 4px; }
.effort-demo[data-motion="paused"] .effort-world-image img { transition: none; }
@media (max-width: 960px) and (min-width: 761px) {
  .life-progress-visuals { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 32px; }
}
@media (max-width: 760px) {
  .life-progress-visuals { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .life-progress-visuals .habit-gallery { max-width: 320px; }
  .effort-world figcaption strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .effort-demo *, .effort-demo *::before, .effort-demo *::after { animation: none !important; transition: none !important; }
}