/* "How it works": the agent inbox animation with four numbered hints beside it, on the homepage and app pages.
   Each hint lights up while the animation shows its step; both run on the flow's clock (--rd-flow-loop). */
.rd-steps { color:var(--rd-ink); font-family:var(--rd-font); }
.rd-home .rd-steps { padding:48px 36px 56px; border-bottom:1px solid var(--rd-line); }
.rd-app-landing .rd-steps { margin-top:48px; }
.rd-steps .rd-steps__title { margin:0 0 28px; font-size:22px; font-weight:500; line-height:1.3; letter-spacing:-.02em; }
.rd-steps__body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); align-items:center; gap:56px; }
.rd-steps__list { display:grid; gap:22px; margin:0; padding:0; list-style:none; counter-reset:none; }
.rd-steps__list li { position:relative; margin:0; padding:0 0 0 44px; opacity:.45; animation:var(--rd-flow-loop,16s) ease-in-out infinite; }
.rd-steps__list li:nth-child(1) { animation-name:rd-steps-hint-1; }
.rd-steps__list li:nth-child(2) { animation-name:rd-steps-hint-2; }
.rd-steps__list li:nth-child(3) { animation-name:rd-steps-hint-3; }
.rd-steps__list li:nth-child(4) { animation-name:rd-steps-hint-4; }
.rd-steps__num { position:absolute; top:0; left:0; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--rd-accent-soft); color:var(--rd-accent); font:600 14px/1 var(--rd-font); }
.rd-steps h3 { margin:3px 0 4px; font-size:16px; font-weight:500; line-height:1.4; letter-spacing:0; }
.rd-steps p { margin:0; color:var(--rd-muted); font-size:14px; line-height:1.6; }
.rd-steps .rd-flow { align-self:center; width:100%; }

/* Hint timing matches the flow's steps: 1) the email arrives and the agent is told, 2) the agent asks to
   read it and the email is read, 3) the reads go to the audit log, 4) the data is back with the agent ("Got the data"). */
@keyframes rd-steps-hint-1 { 0%,22% { opacity:1; } 25%,96% { opacity:.45; } 99%,100% { opacity:1; } }
@keyframes rd-steps-hint-2 { 0%,23% { opacity:.45; } 26%,40% { opacity:1; } 43%,100% { opacity:.45; } }
@keyframes rd-steps-hint-3 { 0%,40% { opacity:.45; } 43%,59% { opacity:1; } 62%,100% { opacity:.45; } }
@keyframes rd-steps-hint-4 { 0%,59% { opacity:.45; } 62%,94% { opacity:1; } 97%,100% { opacity:.45; } }

@media(max-width:1100px) { .rd-home .rd-steps { padding-inline:28px; } .rd-steps__body { grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:36px; } }
/* Narrow screens: the animation first, the hints under it. */
@media(max-width:800px) {
  .rd-steps__body { grid-template-columns:1fr; gap:32px; }
  .rd-steps .rd-flow { order:-1; }
  .rd-steps__list { max-width:520px; width:100%; margin-inline:auto; gap:18px; }
  .rd-home .rd-steps { padding:36px 24px 40px; }
}
@media(max-width:480px) { .rd-home .rd-steps { padding:30px 18px 36px; } .rd-app-landing .rd-steps { margin-top:36px; } }
@media(prefers-reduced-motion:reduce) { .rd-steps__list li { animation:none; opacity:1; } }