/* Runwise motion layer.
   Native CSS adaptations of Magic UI patterns (Blur Fade, Border Beam, Animated Gradient Text, Dot Pattern,
   Number Ticker, Magic Card, Interactive Hover Button, Pulsating Button) for this static site. Blue comes only
   from the brand tokens. Everything animates transform, opacity or filter, never layout. Content is fully
   visible without JavaScript, with reduced motion, in forced colors and in print. See docs/49. */

@property --rw-beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rw-beam-spin { to { --rw-beam-angle: 360deg; } }
@keyframes rw-rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rw-text-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes rw-pulse { 0% { box-shadow: 0 0 0 0 rgb(36 73 233 / .38); } 70%, 100% { box-shadow: 0 0 0 14px rgb(36 73 233 / 0); } }
@keyframes rw-panel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rw-bump { 0% { transform: scale(1); } 35% { transform: scale(1.07); color: var(--brand-primary); } 100% { transform: scale(1); } }
@keyframes rw-aurora { from { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } to { transform: translate3d(4%, 3%, 0) rotate(6deg) scale(1.08); } }
@keyframes rw-cell { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 1; } }
@keyframes rw-drift { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 10px -16px; rotate: 2deg; } }
@keyframes rw-pulse-light { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .42); } 70%, 100% { box-shadow: 0 0 0 16px rgb(255 255 255 / 0); } }
@keyframes rw-marquee { to { transform: translateX(-50%); } }
@keyframes rw-segment { 0% { background-position: 0 -40%; opacity: 1; } 22% { background-position: 0 140%; opacity: 1; } 23%, 100% { background-position: 0 140%; opacity: 0; } }
@keyframes rw-glow-drift { from { transform: translate3d(-3%, 0, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }

/* Header: a hairline and soft shadow once the page scrolls beneath it. */
.site-header { transition: box-shadow var(--duration-250) ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 28px rgb(23 25 28 / .05); }

/* Hero backdrop: a masked dot pattern and a soft pointer-following glow, behind all content. */
.home-page .hero { overflow-x: clip; }
.home-page .hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgb(36 73 233 / .16) 1px, transparent 0);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--brand-primary) 16%, transparent) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 28%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 28%, #000 15%, transparent 72%);
}
.home-page .hero::after {
  content: ''; position: absolute; inset: -10% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px circle at var(--glow-x, 50%) var(--glow-y, 22%), rgb(36 73 233 / .1), transparent 70%);
  background: radial-gradient(560px circle at var(--glow-x, 50%) var(--glow-y, 22%), color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 70%);
}

/* Border Beam: a short travelling highlight around the main planner card. */
.rw-beam { position: relative; }
.rw-beam::after {
  content: ''; position: absolute; inset: -1px; z-index: 2; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--rw-beam-angle), transparent 0 70%, var(--brand-line) 79%, var(--brand-primary) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rw-beam-spin 8s linear infinite; animation-play-state: paused;
}
.rw-beam.is-inview::after { animation-play-state: running; }

/* Interactive Hover Button: arrows lean into the action; transform only. */
.rw-icon:has(use[href$="#arrow-right"]), .rw-icon:has(use[href$="#arrow-up-right"]) { transition: transform .28s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover > .rw-icon:has(use[href$="#arrow-right"]) { transform: translateX(4px); }
  :is(a, button):hover > .rw-icon:has(use[href$="#arrow-up-right"]) { transform: translate(2px, -2px); }
}

/* Animated Beam: the process steps are joined by a line, and a light travels down it in order. */
.home-page .beam-steps > li { position: relative; }
.home-page .beam-steps > li > span { position: relative; z-index: 1; }
.home-page .beam-steps > li:not(:last-child)::before, .home-page .beam-steps > li:not(:last-child)::after {
  content: ''; position: absolute; left: 19px; top: 52px; bottom: -32px; width: 2px; border-radius: 2px; pointer-events: none;
}
.home-page .beam-steps > li:not(:last-child)::before { background: var(--brand-line); }
.home-page .beam-steps > li:not(:last-child)::after {
  background: linear-gradient(to bottom, transparent, var(--brand-primary) 50%, transparent) 0 -40% / 100% 40% no-repeat;
  opacity: 0; animation: rw-segment 4.8s linear infinite; animation-play-state: paused;
}
.home-page .beam-steps.is-visible > li:not(:last-child)::after { animation-play-state: running; }
.home-page .beam-steps > li:nth-child(2)::after { animation-delay: 1.2s; }
.home-page .beam-steps > li:nth-child(3)::after { animation-delay: 2.4s; }

/* Marquee: a slow strip of real product outputs. Decorative and hidden from assistive technology. */
.rw-marquee { border-block: 1px solid var(--line); background: var(--surface-subtle); }
.rw-marquee-viewport { overflow: hidden; padding: var(--space-4) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.rw-marquee-track { display: flex; width: max-content; animation: rw-marquee 46s linear infinite; }
.rw-marquee:hover .rw-marquee-track { animation-play-state: paused; }
.rw-marquee ul { display: flex; gap: var(--space-11); margin: 0; padding: 0 var(--space-11) 0 0; list-style: none; }
.rw-marquee li { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--text-small); font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
.rw-marquee li::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--brand-primary); opacity: .55; }

/* Sliding indicator (Animated Tabs): one marker glides between choices instead of each swapping its own fill.
   motion.js adds .rw-slide and measures the selected control. Without it the original selected styles apply. */
.rw-slide { position: relative; isolation: isolate; }
.rw-slide::before {
  content: ''; position: absolute; z-index: -1; top: var(--slide-top, 8px); bottom: var(--slide-bottom, 8px); left: 0; width: var(--slide-w, 0);
  transform: translateX(var(--slide-x, 0)); border: 1px solid var(--brand-line); border-radius: var(--slide-radius, 12px); background: var(--brand-tint);
  transition: transform var(--duration-400) var(--ease-out), width var(--duration-400) var(--ease-out);
}
.product-preview-tabs.rw-slide button[aria-selected="true"] { border-color: transparent; background: transparent; }
.demo-mode-picker.rw-slide { --slide-top: 3px; --slide-bottom: 3px; --slide-radius: 6px; }
.demo-mode-picker.rw-slide::before { border-color: var(--color-mist); background: var(--color-snow); box-shadow: 0 1px 2px rgb(23 25 28 / .08); }
.demo-mode-picker.rw-slide button.active { border-color: transparent; background: transparent; }

/* Product preview: panels arrive, list items settle in order, and items respond to the pointer. */
.product-preview-panel > * { min-width: 0; }
.preview-release-columns li, .preview-estimate-metrics > div, .preview-app-window { transition: transform var(--duration-250) var(--ease-out), box-shadow var(--duration-250), border-color var(--duration-250); }
@media (hover: hover) and (pointer: fine) {
  .preview-release-columns li:hover { transform: translateY(-2px); border-color: var(--brand-line); box-shadow: 0 8px 18px rgb(36 73 233 / .08); }
  .preview-app-window:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgb(23 25 28 / .08); }
}

/* Three-step overview: on a stacked layout the card nearest the middle of the screen is lit. */
.editorial-principle-card { transition: transform var(--duration-350) var(--ease-out), translate var(--duration-450) var(--ease-out), border-color var(--duration-350), box-shadow var(--duration-450); }
.editorial-principle-card.is-active { border-color: var(--brand-primary); box-shadow: var(--shadow-ring), 0 22px 44px rgb(36 73 233 / .1); translate: 0 -3px; }
@media (hover: hover) and (pointer: fine) {
  .editorial-principle-card:hover { translate: 0 -3px; box-shadow: 0 18px 40px rgb(23 25 28 / .07); }
}

/* Scope lab: a meter shows how much of the full scope the chosen release is, and changed figures pop. */
.demo-result strong, .demo-result > span, .demo-saving { transform-origin: left center; }
#demo-cost, #demo-days, #demo-count { display: inline-block; }
.rw-bump { animation: rw-bump var(--duration-550) var(--ease-out); }
.demo-meter { align-self: stretch; margin: var(--space-1) 0 6px; }
.demo-meter-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .16); }
.demo-meter-fill { display: block; width: var(--meter, 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-ink), var(--brand-primary) 60%, #8eacff); transition: width var(--duration-700) var(--ease-out); }
.demo-meter-caption { display: block; margin-top: var(--space-2); color: var(--text-on-dark); font-size: var(--text-caption); }
.demo-meter-caption b { color: var(--color-snow); font-weight: 600; }
.demo-template-picker button { transition: background-color var(--duration-250), border-color var(--duration-250), color var(--duration-250), transform var(--duration-200); }
.demo-template-picker button:active, .demo-mode-picker button:active { transform: scale(.97); }
#demo-use { position: relative; overflow: hidden; }

/* Section backdrops: slow aurora light plus a fine grid whose cells fade in and out (Aurora, Animated Grid Pattern).
   Decorative, behind content, paused while off screen. */
.editorial-overview-section, #outcomes { position: relative; isolation: isolate; overflow: hidden; }
.editorial-overview-section::before, #outcomes::before {
  content: ''; position: absolute; inset: -20% -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 28%, rgb(36 73 233 / .15), transparent 70%),
    radial-gradient(34% 38% at 84% 16%, rgb(142 172 255 / .22), transparent 70%),
    radial-gradient(42% 46% at 62% 88%, rgb(23 63 159 / .11), transparent 70%);
  filter: blur(12px); animation: rw-aurora 24s ease-in-out infinite alternate; animation-play-state: paused;
}
.editorial-overview-section::after, #outcomes::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(36 73 233 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(36 73 233 / .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 18%, transparent 78%); mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 18%, transparent 78%);
}
.editorial-overview-section.is-inview::before, #outcomes.is-inview::before { animation-play-state: running; }
.rw-cells { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 18%, transparent 78%); mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 18%, transparent 78%); }
.rw-cells span { position: absolute; left: calc(var(--c) * 56px); top: calc(var(--r) * 56px); width: 56px; height: 56px; background: rgb(36 73 233 / .09); opacity: 0; animation: rw-cell 8s ease-in-out infinite; animation-delay: var(--d); animation-play-state: paused; }
.is-inview > .rw-cells span { animation-play-state: running; }

/* Tilt and glare (Glare Hover): cards lean toward a fine pointer and catch the light. */
.rw-tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--duration-400) var(--ease-out), translate var(--duration-450) var(--ease-out), border-color var(--duration-350), box-shadow var(--duration-450); }
.rw-glare { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--duration-300);
  background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .55), transparent 62%), radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgb(36 73 233 / .08), transparent 70%); }
.rw-tilt:hover > .rw-glare { opacity: 1; }

/* Scroll-linked stepper above the three-step overview: the line fills as the section moves up the screen. */
.rw-stepper { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 22px; padding: 0; list-style: none; }
.rw-stepper::before, .rw-stepper::after { content: ''; position: absolute; top: 15px; left: 16.66%; right: 16.66%; height: 2px; border-radius: 2px; }
.rw-stepper::before { background: var(--brand-line); }
.rw-stepper::after { background: linear-gradient(90deg, var(--brand-primary), #8eacff); transform-origin: left; transform: scaleX(var(--p, 0)); }
.rw-stepper li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; color: var(--muted); font-size: var(--text-caption); font-weight: 500; text-align: center; }
.rw-stepper li > b { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--brand-line); border-radius: var(--radius-round); background: var(--color-snow); color: var(--color-fog); font-size: var(--text-11); font-weight: 600; transition: border-color var(--duration-350), background-color var(--duration-350), color var(--duration-350), box-shadow var(--duration-350); }
.rw-stepper li.is-on { color: var(--brand-ink); }
.rw-stepper li.is-on > b { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--color-snow); box-shadow: var(--shadow-ring-strong); }
@media (max-width: 900px) { .rw-stepper { display: none; } }

/* Outcomes bento: two Runwise-blue aurora cards, an animated border on the second, and a drifting glow. */
.home-page #outcomes .outcomes-bento .feature-card.rw-blue:nth-child(n) { border-color: transparent; color: var(--color-snow); box-shadow: 0 26px 54px rgb(36 73 233 / .22);
  background: radial-gradient(120% 90% at 100% 0%, rgb(142 172 255 / .4), transparent 55%), linear-gradient(150deg, #0c1c66 0%, var(--brand-ink) 40%, var(--brand-primary) 100%); background-color: var(--brand-ink); }
.home-page #outcomes .outcomes-bento .feature-card.rw-blue:nth-child(3) { background: radial-gradient(110% 90% at 0% 100%, rgb(142 172 255 / .4), transparent 55%), linear-gradient(150deg, var(--brand-ink) 0%, var(--brand-primary) 70%, #4a6bf3 100%); background-color: var(--brand-ink); }
.home-page #outcomes .outcomes-bento .feature-card.rw-blue:nth-child(n) :is(h3, .card-intro, .outcome-step) { color: var(--color-snow); }
.home-page #outcomes .outcomes-bento .feature-card.rw-blue:nth-child(n) .card-intro { color: rgb(255 255 255 / .92); }
.home-page #outcomes .outcomes-bento .feature-card.rw-blue:nth-child(n) .outcome-step { color: #b9ccff; }
.home-page #outcomes .outcomes-bento .feature-card.rw-blue:nth-child(n) .icon-badge { border-color: rgb(255 255 255 / .28); background: rgb(255 255 255 / .14); color: var(--color-snow); }
.home-page #outcomes .outcomes-bento .feature-card.rw-blue:nth-child(n) .artifact-preview { color: var(--ink); background: var(--color-snow); border-color: transparent; }
.home-page #outcomes .outcomes-bento .feature-card.rw-blue::before { animation: rw-glow-drift 14s ease-in-out infinite alternate; }
.home-page #outcomes .outcomes-bento .feature-card:nth-child(2) {
  border: 1px solid transparent;
  background: linear-gradient(var(--brand-tint), var(--brand-tint)) padding-box, conic-gradient(from var(--rw-beam-angle), var(--brand-line) 0 58%, var(--brand-primary) 80%, var(--brand-line) 100%) border-box;
  background-color: var(--brand-tint);
  animation: rw-beam-spin 9s linear infinite;
}
#outcomes:not(.is-inview) .outcomes-bento .feature-card { animation-play-state: paused; }

/* ---- Final call to action: the closing moment is a Runwise-blue stage with aurora light, a grid, and the six real
   starter patterns drifting behind the copy. ---- */
.home-page .final-cta { position: relative; isolation: isolate; overflow: hidden; border-top: 0; color: var(--color-snow);
  background: radial-gradient(90% 120% at 100% 0%, rgb(142 172 255 / .42), transparent 55%), linear-gradient(160deg, #0c1c66 0%, var(--brand-ink) 38%, var(--brand-primary) 100%); background-color: var(--brand-ink); }
.home-page .final-cta::before { content: ''; position: absolute; inset: -30% -10%; z-index: -2; pointer-events: none;
  background: radial-gradient(34% 40% at 16% 30%, rgb(142 172 255 / .35), transparent 70%), radial-gradient(36% 42% at 86% 70%, rgb(255 255 255 / .16), transparent 70%);
  filter: blur(14px); animation: rw-aurora 20s ease-in-out infinite alternate; animation-play-state: paused; }
.home-page .final-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 12%, transparent 75%); mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 12%, transparent 75%); }
.home-page .final-cta.is-inview::before { animation-play-state: running; }
.home-page .final-cta .final-inner h2, .home-page .final-cta .kicker { color: var(--color-snow); }
.home-page .final-cta .final-inner > p:not(.kicker) { color: rgb(255 255 255 / .9); }
.home-page .final-cta .final-inner .final-manager-note { color: rgb(255 255 255 / .82); }
.home-page .final-cta .manager-contact-link { color: var(--color-snow); }
.home-page .final-cta .action-row > .button:not(.button-secondary) { border-color: var(--color-snow); background: var(--color-snow); color: var(--brand-ink); font-weight: 600; box-shadow: 0 14px 34px rgb(0 0 0 / .22); }
.home-page .final-cta .action-row > .button.button-secondary { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .08); color: var(--color-snow); }
.home-page .final-cta .action-row > .button.button-secondary:hover { background: rgb(255 255 255 / .18); }
.rw-drift { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rw-drift span { position: absolute; left: var(--x); top: var(--y); padding: var(--space-2) 14px; border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .92); font-size: var(--text-small); font-weight: 500; white-space: nowrap;
  animation: rw-drift 9s ease-in-out infinite; animation-delay: var(--d); animation-play-state: paused; backdrop-filter: blur(6px); }
.final-cta.is-inview .rw-drift span { animation-play-state: running; }
@media (max-width: 900px) { .rw-drift { display: none; } }

/* ---- FAQ: answers open smoothly where the browser supports it; the left column carries a helper. ---- */
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
.faq-list details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--duration-400) var(--ease-out), opacity var(--duration-300) ease, content-visibility var(--duration-400) allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; opacity: 1; }
.faq-list summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-right: var(--space-1); list-style: none; cursor: pointer; transition: color var(--duration-200), padding-left var(--duration-300) var(--ease-out); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-round); color: var(--brand-primary); font-size: var(--text-20); line-height: 1; transition: transform var(--duration-350) var(--ease-out), background-color var(--duration-250), border-color var(--duration-250), color var(--duration-250); }
.faq-list details[open] > summary::after { transform: rotate(45deg); border-color: var(--brand-primary); background: var(--brand-primary); color: var(--color-snow); }
@media (hover: hover) and (pointer: fine) { .faq-list summary:hover { color: var(--brand-ink); padding-left: 6px; } .faq-list summary:hover::after { border-color: var(--brand-line); background: var(--brand-tint); } }
.faq-list summary .disclosure-icon { display: none; }
.faq-layout > div:first-child { align-self: start; }
.faq-help { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; align-items: center; max-width: 420px; margin-top: var(--space-8); padding: 18px; border: 1px solid var(--brand-line); border-radius: var(--radius-20); background: var(--brand-tint); }
.faq-help-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-14); background: var(--color-snow); color: var(--brand-primary); }
.faq-help p { margin: 0; color: var(--brand-ink); font-size: var(--text-small); line-height: 1.5; }
.faq-help .hero-pill { grid-column: 1 / -1; justify-self: start; margin-top: 6px; background: var(--color-snow); }
@media (min-width: 901px) { .faq-layout > div:first-child { position: sticky; top: 112px; } }

/* ---- Privacy: the three facts become scannable chips. ---- */
.trust-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.trust-chips li { display: flex; align-items: center; gap: var(--space-3); width: fit-content; max-width: 100%; padding: 10px var(--space-4) 10px var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--color-snow); color: var(--ink); font-size: var(--text-small); font-weight: 500; transition: border-color var(--duration-250), transform var(--duration-300) var(--ease-out), box-shadow var(--duration-300); }
.trust-chips .rw-icon { box-sizing: border-box; width: 28px; height: 28px; padding: 6px; border-radius: var(--radius-round); background: var(--brand-tint); color: var(--brand-primary); }
@media (hover: hover) and (pointer: fine) { .trust-chips li:hover { border-color: var(--brand-line); transform: translateX(4px); box-shadow: 0 8px 20px rgb(36 73 233 / .08); } }

/* ---- Services and free tools: icons respond, and the free-tools section gets the quiet aurora backdrop. ---- */
#services article .icon-badge, #free-tools article .icon-badge { transition: background-color var(--duration-250), color var(--duration-250), transform var(--duration-350) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { #services article:hover .icon-badge, #free-tools article:hover .icon-badge { background: var(--brand-primary); color: var(--color-snow); transform: translateY(-2px) rotate(-5deg); } }
#free-tools { position: relative; isolation: isolate; overflow: hidden; }
#free-tools::before { content: ''; position: absolute; inset: -20% -10%; z-index: -2; pointer-events: none; background: radial-gradient(36% 44% at 84% 20%, rgb(36 73 233 / .12), transparent 70%), radial-gradient(34% 40% at 10% 90%, rgb(142 172 255 / .2), transparent 70%); filter: blur(12px); animation: rw-aurora 26s ease-in-out infinite alternate; animation-play-state: paused; }
#free-tools.is-inview::before { animation-play-state: running; }

/* ---- Process: steps light up, and their connectors turn solid, as the page scrolls past them. ---- */
.home-page .beam-steps > li > span { transition: background-color var(--duration-400), color var(--duration-400), box-shadow var(--duration-400), transform var(--duration-400) var(--ease-out); }
.home-page .beam-steps > li.is-lit > span { background: var(--brand-primary); color: var(--color-snow); box-shadow: var(--shadow-ring-strong); transform: scale(1.06); }
.home-page .beam-steps > li:not(:last-child)::before { transition: background-color .5s; }
.home-page .beam-steps > li.is-lit:not(:last-child)::before { background: var(--brand-primary); }

/* ---- Floating call to action: appears once the planner has scrolled away, and steps aside near the closing section. ---- */
.rw-float { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; background: var(--color-obsidian); color: var(--color-snow); font: 600 var(--text-ui)/1 var(--font-ui); text-decoration: none; box-shadow: 0 18px 40px rgb(23 25 28 / .28), 0 0 0 4px rgb(36 73 233 / .0);
  visibility: hidden; opacity: 0; translate: 0 18px; transition: opacity var(--duration-300) ease, translate var(--duration-400) var(--ease-out), visibility 0s linear .4s, box-shadow var(--duration-300); }
.rw-float.is-shown { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.rw-float .rw-icon { width: 18px; height: 18px; color: #8eacff; }
.rw-float:hover { box-shadow: 0 22px 46px rgb(23 25 28 / .32), 0 0 0 4px rgb(36 73 233 / .35); }
.rw-float:focus-visible { outline: 3px solid #8eacff; outline-offset: 3px; }
@media (max-width: 640px) { .rw-float { right: 16px; left: 16px; justify-content: center; min-height: 54px; } }

/* ---- Magnetic buttons: the main actions lean a few pixels toward a fine pointer. ---- */
.idea-actions > .button, .final-cta .action-row > .button, .rw-float { transition-property: translate, background-color, border-color, box-shadow, color, opacity, visibility; }

/* Pulsating Button: one calm ring on the closing call to action. */
.home-page .final-cta .action-row > .button:not(.button-secondary) { animation: rw-pulse-light 3s ease-out infinite; }
.home-page .final-cta .action-row > .button:hover, .home-page .final-cta .action-row > .button:focus-visible { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance is pure CSS, so it also plays if the script never loads. The h1 is the likely Largest
     Contentful Paint element and is never animated in, so the metric is not delayed. */
  .home-page .hero-heading > :not(h1), .home-page .hero-composer { animation: rw-rise var(--duration-700) var(--ease-out) both; }
  .home-page .hero-heading > .hero-copy { animation-delay: .06s; }
  .home-page .hero-composer { animation-delay: .12s; }
  .home-page .hero::after { animation: rw-glow-drift 16s ease-in-out infinite alternate; }

  /* Animated Gradient Text: ink to brand blue, slowly. Both ends keep strong contrast on white. */
  .home-page .hero h1 .hero-emphasis {
    background: linear-gradient(100deg, var(--color-obsidian) 0%, var(--brand-primary) 40%, var(--brand-ink) 55%, var(--color-obsidian) 100%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: rw-text-sheen 10s ease-in-out infinite;
  }


  /* Panels and list items arrive in order. Pure CSS, so it also plays without the script. */
  .product-preview-panel:not([hidden]) { animation: rw-panel .5s var(--ease-out) both; }
  .product-preview-panel:not([hidden]) :is(.preview-release-columns li, .preview-estimate-metrics > div, .preview-app-window) { animation: rw-rise var(--duration-550) var(--ease-out) both; animation-delay: calc(var(--s, 0) * 70ms + 140ms); }
  .preview-release-columns li:nth-child(2) { --s: 1; }
  .preview-release-columns li:nth-child(3) { --s: 2; }
  .preview-estimate-metrics > div:nth-child(2) { --s: 1; }
  #demo-story-list li { animation: rw-rise var(--duration-450) var(--ease-out) both; animation-delay: calc(var(--s, 0) * 55ms); }
  #demo-story-list li:nth-child(2) { --s: 1; } #demo-story-list li:nth-child(3) { --s: 2; } #demo-story-list li:nth-child(4) { --s: 3; } #demo-story-list li:nth-child(5) { --s: 4; } #demo-story-list li:nth-child(6) { --s: 5; }

  /* Blur Fade: motion.js adds .rw-pending only to blocks that start below the fold. */
  .rw-pending { opacity: 0; translate: 0 18px; filter: blur(6px); will-change: opacity, translate, filter; }
  .rw-pending.rw-in {
    opacity: 1; translate: none; filter: none;
    transition: opacity var(--duration-700) var(--ease-out), translate var(--duration-700) var(--ease-out), filter var(--duration-700) var(--ease-out);
    transition-delay: calc(var(--rw-i, 0) * 70ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rw-marquee-track { width: auto; animation: none; justify-content: center; }
  .rw-marquee ul { flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-8); padding: 0 var(--space-5); }
  .rw-marquee ul + ul { display: none; }
  .rw-marquee-viewport { -webkit-mask-image: none; mask-image: none; }
  .home-page .beam-steps > li::after { animation: none; opacity: 0; }
  .rw-beam::after, .home-page .hero::after, .home-page .final-cta .action-row > .button, .rw-drift span { animation: none; }
  .rw-beam::after { opacity: .0; }
  .site-header { transition: none; }
  .rw-slide::before, .demo-meter-fill, .editorial-principle-card, .hero-outcomes > li, .hero-outcomes .rw-icon { transition: none; }
  .rw-bump { animation: none; }
  .home-page .final-cta::before, #free-tools::before { animation: none; }
  .faq-list details::details-content, .faq-list summary, .faq-list summary::after, .trust-chips li, .rw-float, #services article .icon-badge, #free-tools article .icon-badge { transition: none; }
  .home-page .beam-steps > li > span { transition: none; }
  .editorial-overview-section::before, #outcomes::before, .rw-cells span, .home-page #outcomes .outcomes-bento .feature-card, .home-page #outcomes .outcomes-bento .feature-card::before { animation: none; }
  .rw-cells { display: none; }
  .rw-tilt { transform: none; }
  .rw-glare { display: none; }
  .editorial-principle-card.is-active, .editorial-principle-card:hover { translate: none; }
}
@media (forced-colors: active) {
  .rw-slide button[aria-selected="true"], .rw-slide button.active { border-color: Highlight; }
  .home-page .hero h1 .hero-emphasis { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
  .rw-beam::after, .home-page .hero::before, .home-page .hero::after { display: none; }
  .rw-slide::before { display: none; }
  .home-page .final-cta::before, .home-page .final-cta::after, .rw-drift, #free-tools::before { display: none; }
  .home-page .final-cta { background: Canvas; color: CanvasText; }
  .editorial-overview-section::before, .editorial-overview-section::after, #outcomes::before, #outcomes::after, .rw-cells, .rw-glare { display: none; }
}
@media print {
  .rw-float, .rw-drift { display: none !important; }
  .home-page .final-cta { background: none; color: #000; }
  .home-page .final-cta :is(h2, p, .kicker) { color: #000; }
  .editorial-overview-section::before, .editorial-overview-section::after, #outcomes::before, #outcomes::after, .rw-cells, .rw-glare, .rw-stepper { display: none; }
  .rw-marquee { display: none; }
  .rw-pending { opacity: 1 !important; translate: none !important; filter: none !important; }
  .rw-beam::after, .home-page .hero::before, .home-page .hero::after { display: none; }
}