/* The finale: Milli chases Luke over "Feed the mill". Shared by the generated
   marketing pages (subject pages, blog, hub); the homepage has its own inline
   copy. Source: marketing/landing-v2/finale.css + finale.js; costumes in scripts/finale-costumes.js. */
.finale-wrap { padding-block: 24px 72px; }
.finale { --on-dark: #f4f0ff; --display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--body); }
.finale h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; margin: 0; }
.finale h2 em { font-style: normal; }
.finale p { line-height: 1.6; }
.cta-spot .feed { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-weight: 700; color: #fff; background: #6a47e6; text-decoration: none; box-shadow: 0 10px 28px rgba(106,71,230,.35), inset 0 -3px 0 rgba(0,0,0,.18); }
.cta-spot .feed:focus-visible { outline: 3px solid #ff9e7c; outline-offset: 3px; }
.actor .costume { pointer-events: none; }
/* ---------------- finale: a little world at the bottom of the page ----------------
   Desktop: copy top-left, dusk sky (with a distant mill) top-right, and a ground
   strip across the whole card where Milli chases Luke over the CTA. The scene is
   one fixed-height stage, so nothing shifts as the characters move. */
.finale { position: relative; overflow: hidden; border-radius: 34px; isolation: isolate; color: var(--on-dark); min-height: 650px;
  background: radial-gradient(80% 90% at 8% 0%, rgba(124,92,240,.55), transparent 60%), linear-gradient(180deg, #1a1240 0%, #2a1a66 58%, #3c2780 100%);
  box-shadow: 0 40px 80px rgba(20,10,60,.28); }
.finale .sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.finale .twinkle circle { animation: twinkle 4s ease-in-out infinite; }
.finale .twinkle circle:nth-child(2n) { animation-delay: 1.3s; } .finale .twinkle circle:nth-child(3n) { animation-delay: 2.6s; }
@keyframes twinkle { 50% { opacity: .25; } }
.finale .far-sails { transform-box: fill-box; transform-origin: center; animation: farturn 22s linear infinite; }
@keyframes farturn { to { transform: rotate(360deg); } }
.finale-copy { position: relative; z-index: 2; padding: 76px 64px 0; max-width: 580px; }
.finale h2 { font-size: clamp(40px, 4.6vw, 62px); color: #fff; max-width: 12ch; }
.finale h2 em { color: #ffd76a; }
.finale p { margin-top: 16px; font-size: 18.5px; color: #cfc6f0; max-width: 27ch; }

.stage2 { position: absolute; inset: 0; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, #4a2fa3 0, #33207a 14px, #24175a 100%); border-top: 2px solid rgba(255,255,255,.12); }
.ground::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.05) 46px 48px); }

.cta-spot { position: absolute; left: 61%; bottom: 70px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; z-index: 4; }
.cta-spot .feed { position: relative; z-index: 1; font-size: 19px; padding: 19px 30px; border-radius: 16px; white-space: nowrap; transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .2s; }
.cta-spot .feed:hover, .cta-spot .feed:focus-visible { transform: translateY(-3px) scale(1.03); }
.cta-spot .feed:active { transform: translateY(1px) scale(.97); }
.cta-spot .feed .arr { display: inline-block; transition: transform .2s; }
.cta-spot .feed:hover .arr, .cta-spot .feed:focus-visible .arr { transform: translateX(4px); }
.cta-note { font: 600 13px/1 var(--body); color: #b9afe0; white-space: nowrap; }
.halo { position: absolute; left: 50%; top: 30px; width: 340px; height: 170px; transform: translate(-50%, -50%) scale(calc(.8 + var(--glow, 0) * .35)); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143,114,255,.7), rgba(143,114,255,0)); opacity: calc(.25 + var(--glow, 0) * .75); pointer-events: none; transition: opacity .25s, transform .25s; }
.cta-spot.hot .halo { --glow: 1; }
.cta-spot .feed.pop { animation: feedpop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes feedpop { 40% { transform: scale(1.08); } }

.actor { position: absolute; left: 0; bottom: 70px; z-index: 5; pointer-events: none; will-change: transform; }
.actor.ready { pointer-events: auto; cursor: pointer; }
.actor .body { transform-origin: 50% 100%; will-change: transform; position: relative; }
.actor .body > svg:first-child { display: block; width: 100%; height: auto; overflow: visible; }
#aLuke { width: 112px; } #aMilli { width: 126px; }
.actor .shadow { position: absolute; left: 50%; bottom: -5px; width: 62%; height: 12px; margin-left: -31%; border-radius: 50%; background: rgba(8,4,30,.55); filter: blur(2px); transform-origin: 50% 50%; }
.actor .eyes, .actor .qmark, .actor .antenna { transform-box: fill-box; transform-origin: 50% 50%; }
.actor .qmark, .actor .antenna { transform-origin: 50% 100%; }
.actor .book { position: absolute; width: 44%; left: 56%; top: -6%; transform-origin: 12% 85%; transform: rotate(-20deg); }
.emote { position: absolute; left: 50%; top: -30px; transform: translate(-50%, 8px) scale(.6); opacity: 0; font: 800 15px/1 var(--display); color: #17122e; background: #fff; border-radius: 12px; padding: 7px 10px; white-space: nowrap; box-shadow: 0 6px 16px rgba(10,5,40,.35); transition: opacity .18s, transform .25s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.emote.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.puff, .spark { position: absolute; pointer-events: none; z-index: 6; border-radius: 50%; }
.puff { background: rgba(230,222,255,.7); }
.spark { width: 8px; height: 8px; background: #ffd76a; border-radius: 2px; }

/* tablet and phone: copy on top, the scene below it, so the jump never crosses the text */
@media (max-width: 1000px) {
  .finale { min-height: 0; }
  .finale-copy { padding: 52px 44px 0; max-width: none; }
  .stage2 { position: relative; inset: auto; height: 350px; margin-top: 0; }
  .cta-spot { left: 50%; }
  #aLuke { width: 96px; } #aMilli { width: 108px; }
}
@media (max-width: 720px) {
  .finale { border-radius: 26px; }
  .finale-copy { padding: 40px 24px 0; }
  .finale h2 { font-size: clamp(34px, 10vw, 44px); }
  .finale p { font-size: 16.5px; }
  .stage2 { height: 272px; margin-top: 0; }
  .ground { height: 52px; }
  .cta-spot, .actor { bottom: 52px; }
  .cta-spot .feed { font-size: 17px; padding: 16px 24px; }
  .halo { width: 230px; height: 120px; }
  #aLuke { width: 64px; } #aMilli { width: 72px; }
  .emote { font-size: 13px; padding: 6px 8px; top: -26px; }
}
@media (prefers-reduced-motion: reduce) {
  .finale .twinkle circle, .finale .far-sails { animation: none; }
  .cta-spot .feed { transition: none; }
}