/* Display the completed screen by default, including for reduced motion. */
.story-illustration.ft-scene { background: transparent; font: 15px/1.35 RestockHero, Roboto, Arial, sans-serif; color: #20241f; }
.ft-scene::before { content: ''; position: absolute; inset: 6% 5%; border-radius: 50%; background: #eaf0e2; transform: rotate(-14deg); }
.ft-frame { position: relative; width: min(330px, 92%); overflow: hidden; background: #fffdfa; border: 1px solid #deddd4; border-radius: 21px; box-shadow: 0 6px 18px #24312218; }
.ft-status, .ft-cap { display: flex; align-items: center; background: #f9dec3; }
.ft-status { justify-content: space-between; padding: 6px 18px 0; font-size: 10px; font-weight: 600; }
.ft-cap { gap: 8px; padding: 11px 16px 12px; border-radius: 0 0 48% 0; font-size: 19px; }
.ft-cap img { width: 32px; height: 32px; object-fit: contain; }
.ft-tabs, .ft-footer { display: flex; justify-content: space-around; padding: 9px 4px; font-size: 12px; color: #606660; }
.ft-tabs { border-bottom: 1px solid #ede9de; }
.ft-tabs b, .ft-footer b { color: #216540; }
.ft-footer { border-top: 1px solid #ede9de; font-size: 11px; }
.ft-body { padding: 13px 15px; }
.ft-summary, .ft-date, .ft-row { display: flex; align-items: center; }
.ft-summary, .ft-date { justify-content: space-between; }
.ft-summary { margin-bottom: 8px; }
.ft-summary small { font-size: 12px; color: #5b655f; }
.ft-summary strong { display: block; font-size: 31px; line-height: 1.15; letter-spacing: -1px; }
.ft-period { background: #ecf2e6; color: #216540; padding: 5px 8px; border-radius: 12px; font-size: 12px; }
.ft-date { padding: 6px 0 4px; font-size: 12px; }
.ft-amount { display: inline-grid; font-variant-numeric: tabular-nums; }
.ft-amount > span { grid-area: 1/1; background: #fffdfa; }
.ft-date .ft-amount { text-align: right; }
.ft-row { gap: 8px; padding: 5px 8px; margin-top: 3px; background: #f4f3ed; border-radius: 9px; }
.ft-row img { width: 30px; height: 33px; }
.ft-row small { display: block; font-size: 11px; color: #13786e; }
.ft-price { margin-left: auto; font-size: 13px; }
@media (max-width: 959px) { .story-illustration.ft-scene { min-height: 450px; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.story-in-view > .story-active, .story-play) .ft-row {
    animation: ft-arrive 330ms ease-out var(--appear) backwards;
  }
  :is(.story-in-view > .story-active, .story-play) :is(.ft-date, .ft-amount > span) {
    animation: ft-show 1ms steps(1) var(--appear) backwards;
  }
}
@keyframes ft-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ft-show { from { opacity: 0; } to { opacity: 1; } }