/* Bedtime ritual: three calm steps, connected by a dotted firefly path. Warm, sleepy tone.
   API: <div class="db-ritual"> <ol class="db-ritual__steps"> <li class="db-ritual__step"> */
.db-ritual__head{max-width:52ch;margin-bottom:var(--db-s7)}

.db-ritual__steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--db-s8) var(--db-s6);list-style:none;margin:0;padding:0}
@media (max-width:759px){.db-ritual__steps{grid-template-columns:1fr;gap:var(--db-s7)}}

.db-ritual__path{position:absolute;top:44px;left:16.5%;width:67%;height:16px;overflow:visible;
  pointer-events:none}
@media (max-width:759px){.db-ritual__path{display:none}}
.db-ritual__path line{stroke:var(--db-gold);stroke-opacity:.4;stroke-width:2.5;stroke-dasharray:1 11;
  stroke-linecap:round}
.db-ritual__firefly{fill:var(--db-gold)}
.db-ritual__firefly--a{animation:db-firefly-drift 5.5s ease-in-out infinite}
.db-ritual__firefly--b{animation:db-firefly-drift 6.5s ease-in-out infinite reverse}
@keyframes db-firefly-drift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(0,-7px)}
}

.db-ritual__step{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:var(--db-s3)}

.db-ritual__badge{width:88px;height:88px;border-radius:var(--db-r-pill);background:var(--db-card);
  box-shadow:var(--db-shadow-1),0 0 0 1px rgba(255,206,92,.16) inset;display:flex;align-items:center;
  justify-content:center}
.db-ritual__badge svg{width:44px;height:44px}

.db-ritual__num{font-size:var(--db-fs-label);font-weight:800;letter-spacing:var(--db-track-label);
  text-transform:uppercase;color:var(--db-gold)}
.db-ritual__title{font-size:var(--db-fs-h3);font-weight:700}
.db-ritual__text{color:var(--fg-muted);max-width:26ch;font-size:var(--db-fs-small)}

@media (prefers-reduced-motion:reduce){
  .db-ritual__firefly--a,.db-ritual__firefly--b{animation:none}
}