/* rr-motion (homepage + pricing). Added 2026-10-03.
   Rules: transform/opacity only, each animation runs once per page view, no layout shift
   (decorative nodes are absolutely positioned with fixed sizes), and reduced motion shows the final state at once.
   Base styles ARE the final state; keyframes only describe the way in (fill-mode: backwards). */

/* 1. Homepage hero: radius map chip on the sample-pack figure */
.hero-report{position:relative}
/* The chip never covers the sample image (2026-10-03 merge fix). Below 1280px it sits in flow under the image, next to the
   caption. From 1280px it floats in the column gap, left of the image, bottom-aligned with it. Fixed sizes, so no layout shift. */
.hero-report{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start}
.hero-report img{grid-column:1/-1}
.hero-report figcaption{grid-column:1;grid-row:2}
.rr-motion-map{position:relative;grid-column:2;grid-row:2;margin-top:10px;width:112px;height:112px;background:#fff;border:1px solid var(--s200);border-radius:12px;box-shadow:0 20px 44px -22px rgba(11,27,52,.5);pointer-events:none;animation:rr-motion-rise .45s cubic-bezier(.2,.8,.2,1) both}
@media (min-width:1280px){.rr-motion-map{grid-area:auto;position:absolute;left:-116px;bottom:29px;width:108px;height:108px;margin:0}}
.rr-motion-map svg{width:100%;height:100%}
.rr-motion-map text{font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:700;fill:var(--navy)}
.rr-motion-map .rr-motion-c,.rr-motion-map .rr-motion-ring,.rr-motion-map .rr-motion-dot,.rr-motion-map .rr-motion-pin{transform-box:fill-box;transform-origin:center}
.rr-motion-map .rr-motion-pin{transform-origin:50% 100%;animation:rr-motion-drop .4s .1s cubic-bezier(.3,1.4,.5,1) both}
.rr-motion-map .rr-motion-c{animation:rr-motion-grow .6s .25s cubic-bezier(.2,.8,.2,1) both}
.rr-motion-map .rr-motion-ring{opacity:0;animation:rr-motion-pulse .8s .3s ease-out both}
.rr-motion-map .rr-motion-dot{animation:rr-motion-pop .3s cubic-bezier(.3,1.5,.5,1) both}
.rr-motion-map .rr-motion-dot:nth-of-type(1){animation-delay:.55s}
.rr-motion-map .rr-motion-dot:nth-of-type(2){animation-delay:.62s}
.rr-motion-map .rr-motion-dot:nth-of-type(3){animation-delay:.69s}
.rr-motion-map .rr-motion-dot:nth-of-type(4){animation-delay:.76s}
.rr-motion-map .rr-motion-dot:nth-of-type(5){animation-delay:.83s}
.rr-motion-map .rr-motion-dot:nth-of-type(6){animation-delay:.9s}
@keyframes rr-motion-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes rr-motion-drop{from{opacity:0;transform:translateY(-14px)}}
@keyframes rr-motion-grow{from{opacity:0;transform:scale(.15)}}
@keyframes rr-motion-pulse{0%{opacity:.7;transform:scale(.2)}100%{opacity:0;transform:scale(1.25)}}
@keyframes rr-motion-pop{from{opacity:0;transform:scale(0)}}

/* 2. "Free through Oct 16" badges: one light sweep on load */
.rr-motion-badge{display:inline-block;font-size:12.5px;font-weight:700;color:#0F766E;background:var(--acc3);border-radius:999px;padding:5px 11px;margin-bottom:10px;line-height:1.3}
.rr-motion-shimmer{position:relative;overflow:hidden;isolation:isolate}
.rr-motion-shimmer::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);transform:translateX(120%);animation:rr-motion-sweep 1s .4s ease-in-out both;pointer-events:none}
@keyframes rr-motion-sweep{from{transform:translateX(-120%)}}

/* 3. Pricing plan cards: lift on hover, keyboard focus, or tap */
.plan{isolation:isolate;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.plan::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 22px 44px -24px rgba(11,27,52,.45);opacity:0;transition:opacity .2s;pointer-events:none}
@media (hover:hover){.plan:hover{transform:translateY(-4px)}.plan:hover::after{opacity:1}}
.plan:focus-within,.plan:active{transform:translateY(-4px)}
.plan:focus-within::after,.plan:active::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .rr-motion-map,.rr-motion-map *,.rr-motion-shimmer::after{animation:none!important}
  .rr-motion-shimmer::after{opacity:0}
  .plan,.plan::after{transition:none}
  .plan:hover,.plan:focus-within,.plan:active{transform:none!important}
}