/* Home page (owner 2026-10-18): the Watch section title follows the selected recording (watch-title-v1.js): the Mac
   title while the Mac recording is selected, the original title for every other one. Both variants share one grid
   cell, so the title and sub-line never change height. The site's own motion rules switch the fade off when motion is.
   The tag is the pricing card's launch tag: pricing-card-v1.css's #pricing .pricing-card .pricing-launch-tag rules, unchanged. */
#workflow .watch-swap { display: grid; }
#workflow .watch-swap > [data-watch-variant] { grid-area: 1 / 1; }
#workflow .watch-swap > [data-watch-off] { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { #workflow .watch-swap > [data-watch-variant] { transition: opacity .2s ease, visibility .2s; } }
#workflow .pricing-launch-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px; border: 1px solid #c9a46885; border-radius: 999px; background: linear-gradient(90deg, #c9a46838, #c9a46812); box-shadow: 0 0 22px #c9a4681f; color: #e7cf9f; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .06em; white-space: nowrap; }
#workflow .pricing-launch-tag i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #dcc29a; box-shadow: 0 0 0 3px #c9a4682e, 0 0 10px #c9a468; }
@media (prefers-reduced-motion: no-preference) { #workflow .pricing-launch-tag i { animation: depth-pulse 3s infinite; } }