/*
 * Homepage section 09: the closing promise beside what lands while you work.
 *
 * Static by default (reduced motion, print): all three rows on screen. When
 * motion is allowed the card replays on one 12 s loop: the oldest event
 * arrives first (6-9%), then the lead (22-25%), then the booking (38-41%), and
 * it holds before the loop resets. The main button gets a soft ring. Pure CSS.
 */
.st-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.st-assure {
  list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-muted);
}
.st-assure li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--ok); vertical-align: middle; }

.st-card {
  position: relative; padding: 24px; border-radius: 22px; background: var(--panel);
  border: 1px solid rgba(18, 181, 166, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 80px rgba(18, 181, 166, .12);
}
.st-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.st-ex {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 99px; padding: 3px 8px;
}
.st-rows { display: grid; gap: 10px; }
.st-row {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 14px; background: var(--panel-raised); border: 1px solid var(--border);
}
.st-row b { display: block; font-family: var(--archivo); font-size: .98rem; }
.st-row small { display: block; margin-top: 2px; color: var(--text-muted); font-size: .85rem; }
.st-time { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--text-muted); }
.st-dot { width: 10px; height: 10px; border-radius: 50%; }
.st-dot-ok { background: var(--ok); }
.st-dot-hot { background: var(--hot); }
.st-dot-warm { background: var(--warm); }

@media (max-width: 960px) {
  .st-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (prefers-reduced-motion: no-preference) {
  .st-row-3 { animation: st-row-3 12s infinite both; }
  .st-row-2 { animation: st-row-2 12s infinite both; }
  .st-row-1 { animation: st-row-1 12s infinite both; }
  .st-cta { animation: st-ring 2.6s ease-out infinite; }
  @keyframes st-row-3 { 0%, 6% { opacity: 0; transform: translateY(12px); } 9%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes st-row-2 { 0%, 22% { opacity: 0; transform: translateY(12px); } 25%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes st-row-1 { 0%, 38% { opacity: 0; transform: translateY(12px); } 41%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes st-ring {
    0% { box-shadow: 0 0 0 0 rgba(244, 245, 244, .45); }
    70%, 100% { box-shadow: 0 0 0 14px rgba(244, 245, 244, 0); }
  }
}