<!-- Copyright (c) 2026 Diamond Software International Inc. -->
<!--
  GLAD "Get a GLAD" campaign — Spot: "Tithe.ly · Ruth Closes the Books" (120s)
  ============================================================================
  Self-contained 1920x1080 animated spot, ~121s, autoplays on load, silent,
  holds on end card. No external assets, no CDNs. System font stack.
  One amber accent (#F59E0B -> #EA580C) — GLAD is the only saturated colour
  in the film. Slate cast #1E293B/#475569/#64748B, neutrals #EEF2F7/#9DAABB.

  QA affordances:
    ?t=NN        render the exact state at NN seconds as a still (all motion
                 frozen at end-state) — e.g. im-tithely-120.html?t=33
    r key        replay (same as the on-screen replay button once it appears)
  prefers-reduced-motion: jumps straight to the end card, no animation.

  Note: "Tithe.ly" appears only as an original stylized card-terminal buddy.
  No competitor logo or trade dress is reproduced.

  STORY (acts / rough seconds)
    I    0–19    Ruth, volunteer treasurer, Sunday 9:41 PM at the kitchen desk.
                 Paperwork everywhere — except the giving. That runs itself.
    II   19–44   Meet Tithe.ly: the likeable specialist. Genuinely great at
                 giving — free monthly, rates published up front. Gifts land,
                 receipts print, everyone's happy. Tithe.ly takes a bow.
    III  44–84   Everything else is still manual: spreadsheet member list,
                 sticky-note follow-ups, five logins, 11:58 PM and Sunday
                 never quite closes out. Tithe.ly honestly offers its stack
                 ($72+$19+$29+$19+$89) and the All-Access bundle ($119 —
                 honestly, the better deal). But Ruth was hoping for ONE thing.
    IV   84–108  GLAD: one login, the whole church. One gift in — everything
                 follows. Ruth asks about card fees; GLAD concedes the line
                 verbatim; Tithe.ly nods: "…that's fair."
    V    108–121 Sunday, two in the afternoon. Closed out. Ruth's quote, end card.

  CUE SHEET (seconds → beat) — for scoring the MP4 in post. The same table
  prints as console.table on load, generated from the live cues array.
     0.6  ENTRANCE: Ruth (kitchen desk, night)
     0.9  Title — "This is Ruth."
     3.9  "Volunteer treasurer. Twenty-two years." + wave
     7.7  Clock in — SUN · 9:41 PM
    10.9  Sticky notes, wave one · Ruth stretched
    15.1  Pivot — "Except the giving. The giving runs itself."
    19.3  Environment out → white limbo
    19.9  ENTRANCE: Tithe.ly (card-swipe streaks)
    20.3  "Meet Tithe.ly."
    23.3  Credit chips — free monthly · published rates (beam)
    28.1  Gift 1 flies         28.9  lands — receipt prints, pip
    29.6  Gift 2 flies         30.4  lands — receipt grows
    31.1  Gift 3 flies         31.9  lands — receipt full
    32.4  Tithe.ly — "Counted. Receipted. Filed." + bow
    35.8  "Ruth loves this part."
    39.2  "So does Tithe.ly. You can tell." + second bow
    43.2  Tithe.ly waves off
    44.6  Environment returns — SUN · 10:07 PM
    45.2  ESCALATION 1: the spreadsheet
    49.8  ESCALATION 2: sticky-note bloom
    54.2  ESCALATION 3: five logins
    58.9  "Five tools. One volunteer." + wobble
    62.9  ESCALATION PEAK: clock 11:58 PM — "Sunday never quite closes out."
    67.9  Tithe.ly re-enters
    68.7  Tithe.ly — "We do sell tools for all of this."
    71.7  Price stack ticks in ($72 / $19 / $29 / $19 / $89)
    75.4  REQUIRED BEAT: All-Access $119 — honestly, the better deal
    80.0  THE TURN: "Six good products. Ruth was hoping for one."
    84.4  ENTRANCE: GLAD (warm wash; Tithe.ly steps aside)
    85.0  "This is GLAD."
    88.0  Feature row — one login, the whole church
    92.6  Gift 4 flies to GLAD
    93.4  PAYOFF: gift lands — amber ticks cascade
    98.6  Ruth asks — "And the card fees?"
   100.7  REQUIRED BEAT: concession line (GLAD, verbatim)
   104.9  Tithe.ly — "…that's fair." + nod
   109.6  Daylight — SUN · 2:00 PM
   110.2  "Sunday, two in the afternoon. Closed out."
   114.6  RELIEF: Ruth's quote
   120.0  PUNCH CARD: end card
   121.2  Replay available

  Claims: every competitor fact on screen traces to
  docs/specs/COMPETITOR_AD_CLAIMS.md (Tithe.ly section, verified July 2026).
  Six separately-priced products — never "giving-only". Required beats kept:
  Giving free monthly (Act II chip), All-Access $119 the better deal (Act III
  bubble), and the fee-concession line spoken by GLAD in Act IV. GLAD claims
  no fee advantage anywhere (we take 1% on our own free tier).
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GLAD — “Ruth Closes the Books” · 120s spot</title>
<style>
  /* ============ tokens ============ */
  :root{
    --amber1:#F59E0B;
    --amber2:#EA580C;
    --ink:#0F172A;
    --ink2:#334155;
    --mut:#64748B;
    --faint:#94A3B8;
    --line:#E2E8F0;
    --ease:cubic-bezier(.22,1,.36,1);
    --spring:cubic-bezier(.34,1.56,.64,1);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;background:#fff;overflow:hidden}
  body{font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

  /* ============ fit-to-window scaler ============ */
  #fit{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
  #ad{position:relative;width:1920px;height:1080px;flex:none;transform-origin:center center}
  #stage{position:absolute;inset:0;background:#fff;overflow:hidden}

  /* soft limbo floor */
  #stage::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:360px;pointer-events:none;
    background:radial-gradient(62% 130% at 50% 104%, rgba(15,23,42,.05), rgba(15,23,42,0) 70%);
  }

  /* warm wash for the GLAD act */
  #warm{position:absolute;inset:0;opacity:0;transition:opacity 2s var(--ease);pointer-events:none;
    background:radial-gradient(1250px 900px at 58% 72%, rgba(245,158,11,.10), rgba(245,158,11,0) 62%);}
  #warm.on{opacity:1}

  /* ============ environment: Ruth's kitchen desk ============ */
  #env{position:absolute;inset:0;opacity:0;transition:opacity 1.3s var(--ease);pointer-events:none;z-index:1}
  #env.on{opacity:1}
  #env .wall{position:absolute;inset:0;background:linear-gradient(180deg,#FBFCFE 0%,#F4F7FB 78%,#EDF1F7 100%)}
  #env .base{position:absolute;left:0;right:0;top:942px;height:3px;background:#E2E8F0}

  /* window */
  #env .win{position:absolute;left:1390px;top:225px;width:350px;height:410px;border-radius:20px;
    border:14px solid #E7EDF4;background:#2E3A50;overflow:hidden;box-shadow:0 16px 40px rgba(15,23,42,.07)}
  #env .skyN,#env .skyD{position:absolute;inset:0;transition:opacity 1.6s var(--ease)}
  #env .skyN{background:linear-gradient(180deg,#2C3950 0%,#3B4B66 100%);opacity:1}
  #env .skyD{background:linear-gradient(180deg,#D9E7F5 0%,#EDF4FB 100%);opacity:0}
  #env.day .skyN{opacity:0}
  #env.day .skyD{opacity:1}
  #env .moon{position:absolute;left:196px;top:64px;width:64px;height:64px;border-radius:50%;background:#E6ECF4}
  #env .moon::after{content:'';position:absolute;left:16px;top:-8px;width:58px;height:58px;border-radius:50%;background:#2F3D56}
  #env .star{position:absolute;width:5px;height:5px;border-radius:50%;background:#DCE4EF;opacity:.8}
  #env .cloud{position:absolute;width:120px;height:34px;border-radius:20px;background:#FFFFFF;opacity:.9}
  #env .cloud::after{content:'';position:absolute;left:26px;top:-16px;width:52px;height:34px;border-radius:50%;background:#FFFFFF}
  #env .mull1{position:absolute;left:50%;top:0;bottom:0;width:10px;transform:translateX(-50%);background:#E7EDF4}
  #env .mull2{position:absolute;left:0;right:0;top:50%;height:10px;transform:translateY(-50%);background:#E7EDF4}

  /* shelf */
  #env .shelf{position:absolute;left:170px;top:330px;width:280px;height:12px;border-radius:6px;background:#E2E8F0}
  #env .book{position:absolute;bottom:12px;width:26px;border-radius:4px 4px 0 0}
  #env .plant{position:absolute;left:224px;bottom:12px}

  /* wall clock chip */
  #clock{position:absolute;left:1508px;top:132px;z-index:8;opacity:0;transform:translateY(-16px) scale(.92);
    transition:opacity .6s var(--ease), transform .6s var(--spring);
    background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:14px 28px;
    font-size:30px;font-weight:750;color:var(--ink2);letter-spacing:.04em;
    box-shadow:0 10px 28px rgba(15,23,42,.07);font-variant-numeric:tabular-nums;white-space:nowrap}
  #clock.on{opacity:1;transform:none}
  #clock.tick{animation:clockTick .55s var(--spring) 1}
  @keyframes clockTick{0%{transform:scale(1)}40%{transform:scale(1.1) rotate(-1.5deg)}100%{transform:scale(1)}}
  #clock .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:12px;
    background:#9DAABB;vertical-align:2px}

  /* desk (in front of Ruth — sells "sitting behind the table") */
  #desk{position:absolute;left:250px;top:735px;width:780px;height:300px;z-index:6;pointer-events:none;
    opacity:0;transform:translateY(56px);transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
  #desk.on{opacity:1;transform:none}
  #desk .top{position:absolute;left:0;right:0;top:0;height:30px;border-radius:15px;background:#E7EDF4;
    box-shadow:0 14px 30px rgba(15,23,42,.08)}
  #desk .apron{position:absolute;left:22px;right:22px;top:28px;bottom:16px;border-radius:0 0 18px 18px;
    background:linear-gradient(180deg,#F0F4F9,#E9EEF5)}
  /* laptop (lid faces camera) */
  #desk .lapLid{position:absolute;left:470px;top:-148px;width:206px;height:146px;border-radius:14px 14px 4px 4px;
    background:linear-gradient(180deg,#CBD5E1,#B7C3D2)}
  #desk .lapLid::after{content:'';position:absolute;left:50%;top:52%;width:20px;height:20px;border-radius:50%;
    transform:translate(-50%,-50%);background:rgba(255,255,255,.55)}
  #desk .lapHinge{position:absolute;left:460px;top:-8px;width:226px;height:10px;border-radius:5px;background:#AEBBCB}
  /* mug + steam */
  #desk .mug{position:absolute;left:706px;top:-52px;width:46px;height:54px;border-radius:6px 6px 12px 12px;background:#F4E4E8}
  #desk .mug::after{content:'';position:absolute;right:-16px;top:10px;width:20px;height:26px;border:6px solid #F4E4E8;
    border-left:none;border-radius:0 14px 14px 0}
  #desk .steam{position:absolute;left:718px;top:-96px;width:5px;height:26px;border-radius:3px;background:#DDE5EE;
    opacity:0;animation:steam 3.2s ease-in-out infinite}
  #desk .steam.s2{left:734px;animation-delay:1.4s}
  @keyframes steam{0%{opacity:0;transform:translateY(8px) scaleY(.6)}40%{opacity:.85}100%{opacity:0;transform:translateY(-26px) scaleY(1.15)}}
  /* paper stack */
  #desk .pp{position:absolute;width:120px;height:14px;border-radius:4px;background:#fff;border:1.5px solid var(--line)}

  /* ============ kinetic type ============ */
  #kt{
    position:absolute;top:104px;left:0;right:0;text-align:center;padding:0 180px;z-index:9;
    color:var(--ink);letter-spacing:-.025em;line-height:1.12;pointer-events:none;
    transition:opacity .55s var(--ease), transform .55s var(--ease);
  }
  #kt.xl{font-size:92px;font-weight:800}
  #kt.lg{font-size:70px;font-weight:750}
  #kt.md{font-size:54px;font-weight:650}
  #kt .w{display:inline-block;opacity:0;transform:translateY(36px);filter:blur(5px);
    transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);}
  #kt.in .w{opacity:1;transform:none;filter:none}
  #kt.outing{opacity:0;transform:translateY(-28px)}

  /* ============ actors: shared ============ */
  .actor{position:absolute;z-index:5}
  .ent{opacity:0;transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
  .shadow{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border-radius:50%;
    background:radial-gradient(50% 50% at 50% 50%, rgba(15,23,42,.18), rgba(15,23,42,0) 72%);
    opacity:0;transition:opacity 1.2s var(--ease), width 1s var(--ease)}
  #ruthWrap.in .shadow,#gladWrap.in .shadow{opacity:1}

  svg .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
  @keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}

  /* ============ Ruth ============ */
  #ruthWrap{left:400px;top:450px;width:260px;height:430px}
  #ruthWrap .ent{transform:translateY(46px) scale(.92)}
  #ruthWrap.in .ent{opacity:1;transform:none}
  #ruthWrap .shadow{width:230px;height:34px}
  #ruthWrap.bye{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease), transform .9s var(--ease)}

  #ruth .armR{transform-box:fill-box;transform-origin:50% 9%;transition:transform .7s var(--spring)}
  #ruth.ask .armR{transform:rotate(-80deg)}
  #ruthWrap.hi #ruth .armR{animation:hiWave 1.9s var(--ease) 1}
  @keyframes hiWave{0%,100%{transform:rotate(0)}28%{transform:rotate(-76deg)}48%{transform:rotate(-58deg)}68%{transform:rotate(-76deg)}}

  /* moods — swap face groups */
  #ruth .m-smile,#ruth .m-flat,#ruth .m-grim,#ruth .m-big,#ruth .eyesClosed,#ruth .browsW,
  #ruth .sweat,#ruth .puff{opacity:0}
  #ruth[data-mood="hopeful"]   .m-smile{opacity:1}
  #ruth[data-mood="delighted"] .m-big{opacity:1}
  #ruth[data-mood="stretched"] .m-flat{opacity:1}
  #ruth[data-mood="stretched"] .sweat{opacity:1;animation:drip 1.9s ease-in .25s 2}
  #ruth[data-mood="stretched"] .torsoG{transform:translateY(5px) scaleY(.985)}
  #ruth[data-mood="worried"]   .m-grim{opacity:1}
  #ruth[data-mood="worried"]   .browsW{opacity:1}
  #ruth[data-mood="worried"]   .brows{opacity:0}
  #ruth[data-mood="relieved"]  .m-big{opacity:1}
  #ruth[data-mood="relieved"]  .eyes{opacity:0}
  #ruth[data-mood="relieved"]  .eyesClosed{opacity:1}
  #ruth .torsoG{transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s var(--ease)}
  #ruth .m-smile,#ruth .m-flat,#ruth .m-grim,#ruth .m-big{transition:opacity .35s ease}
  @keyframes drip{0%{transform:translateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(30px);opacity:0}}
  #ruth.exhale .puff{animation:puffout 1.7s ease-out forwards}
  @keyframes puffout{0%{opacity:.95;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(60px,-16px) scale(1.35)}}

  /* ============ Tithe.ly — stylized card-terminal buddy ============ */
  #tithelyWrap{left:1060px;top:566px;width:340px;height:310px;
    transition:opacity 1.2s var(--ease), transform 1.25s var(--ease)}
  #tithelyWrap .ent{transform:translateX(560px)}
  #tithelyWrap.in .ent{opacity:1;transform:none;transition-duration:1.2s}
  #tithelyWrap.in .shadow{opacity:1;width:220px;height:30px}
  #tithelyWrap .bob{animation:bobT 3.6s ease-in-out infinite}
  @keyframes bobT{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  #tithelyWrap.aside{transform:translateX(330px)}
  #tithelyWrap.exit{opacity:0;transform:translateX(430px)}
  #tithelyWrap.aside.exit{transform:translateX(660px)}

  #tithely .tBody{transform-box:fill-box;transform-origin:50% 96%}
  #tithelyWrap.bow #tithely .tBody{animation:tbow 1.7s var(--ease) 1}
  @keyframes tbow{0%,100%{transform:none}30%,62%{transform:rotate(9deg) translateY(5px)}}
  #tithelyWrap.nod #tithely .tBody{animation:tnod 1.2s ease-in-out 1}
  @keyframes tnod{0%,100%{transform:none}25%{transform:rotate(3.5deg)}55%{transform:rotate(-2deg)}78%{transform:rotate(2.5deg)}}
  #tithely .armR{transform-box:fill-box;transform-origin:14% 50%}
  #tithelyWrap.wave #tithely .armR{animation:twavey 1.1s ease-in-out 2}
  @keyframes twavey{0%,100%{transform:rotate(0)}30%{transform:rotate(-38deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(-34deg)}}
  #tithely .sparks{opacity:0}
  #tithelyWrap.beam #tithely .sparks{opacity:1}
  #tithelyWrap.beam #tithely .spark{animation:twinkle 1.5s ease-in-out infinite}
  #tithely .spark{transform-box:fill-box;transform-origin:center}
  #tithely .spark:nth-child(2){animation-delay:.4s!important}
  #tithely .spark:nth-child(3){animation-delay:.8s!important}
  @keyframes twinkle{0%,100%{transform:scale(.55);opacity:.4}50%{transform:scale(1.15);opacity:1}}

  /* card-swipe entrance streaks */
  #streaks span{position:absolute;height:5px;border-radius:3px;opacity:0;
    background:linear-gradient(90deg, rgba(207,220,234,0), #CFDCEA 40%, rgba(207,220,234,0));}
  #streaks.go span{animation:streak 1.2s var(--ease) forwards}
  #streaks span:nth-child(1){left:1230px;top:620px;width:420px}
  #streaks span:nth-child(2){left:1300px;top:700px;width:520px;animation-delay:.12s!important}
  #streaks span:nth-child(3){left:1260px;top:766px;width:330px;animation-delay:.22s!important}
  @keyframes streak{0%{opacity:0;transform:translateX(180px)}30%{opacity:.9}100%{opacity:0;transform:translateX(-540px)}}

  /* receipt printing from the top slot */
  #receipt{position:absolute;left:126px;top:-46px;width:88px;height:96px;z-index:-1;
    transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s var(--ease), opacity .6s ease;
    background:#fff;border:1.5px solid var(--line);border-bottom:none;
    clip-path:polygon(0 8px,8% 0,16% 8px,24% 0,32% 8px,40% 0,48% 8px,56% 0,64% 8px,72% 0,80% 8px,88% 0,96% 8px,100% 4px,100% 100%,0 100%)}
  #receipt::after{content:'';position:absolute;left:12px;right:12px;top:18px;bottom:10px;
    background:repeating-linear-gradient(180deg, #E2E8F0 0 4px, transparent 4px 14px)}
  #receipt.r1{transform:scaleY(.38)}
  #receipt.r2{transform:scaleY(.68)}
  #receipt.r3{transform:scaleY(1)}
  #receipt.done{opacity:0}

  /* received pips */
  .pip{position:absolute;left:216px;top:-16px;width:44px;height:44px;border-radius:50%;
    background:#EEF2F7;border:1.5px solid var(--line);color:#475569;
    display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;opacity:0}
  .pip.go{animation:pipUp 1.25s var(--ease) forwards}
  @keyframes pipUp{0%{opacity:0;transform:translateY(6px) scale(.5)}22%{opacity:1;transform:translateY(-14px) scale(1.06)}
    100%{opacity:0;transform:translateY(-70px) scale(.92)}}

  /* ============ GLAD (locked campaign character) ============ */
  #gladWrap{left:1000px;top:520px;width:260px;height:360px}
  #gladWrap .ent{transform:translateX(520px)}
  #gladWrap.in .ent{opacity:1;transform:none;transition-duration:1.4s}
  #gladWrap .shadow{width:210px;height:30px}
  #gladWrap .hover{animation:hoverG 4s ease-in-out infinite}
  @keyframes hoverG{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-11px) rotate(.8deg)}}
  #gladWrap .glow{position:absolute;left:50%;top:110px;width:420px;height:420px;transform:translate(-50%,-50%);
    background:radial-gradient(50% 50% at 50% 50%, rgba(245,158,11,.28), rgba(245,158,11,0) 70%);
    opacity:0;transition:opacity 1.6s var(--ease)}
  #gladWrap.in .glow{opacity:1}
  #gladWrap.yay .hover{animation:yayG .9s var(--spring) 1}
  @keyframes yayG{0%{transform:translateY(0)}35%{transform:translateY(-30px) scale(1.04,.98)}70%{transform:translateY(2px) scale(.98,1.03)}100%{transform:translateY(0)}}
  #gladWrap.bye{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease), transform .9s var(--ease)}

  /* ============ chips ============ */
  .chip{
    display:inline-flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--line);
    border-radius:999px;padding:17px 30px;font-size:29px;font-weight:650;color:var(--ink2);
    box-shadow:0 10px 28px rgba(15,23,42,.07);white-space:nowrap;
  }
  .chip svg{flex:none;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .chip svg .fl{fill:var(--mut);stroke:none}

  /* Act II credit chips (the honest ones) */
  #chips2{position:absolute;top:348px;left:0;right:0;display:flex;justify-content:center;gap:26px;pointer-events:none;z-index:8}
  #chips2 .chip{opacity:0;transform:translateY(28px) scale(.9);transition:transform .8s var(--spring), opacity .5s ease}
  #chips2.in .chip{opacity:1;transform:none}
  #chips2.in .chip:nth-child(2){transition-delay:.2s}
  #chips2.out .chip{opacity:0;transform:translateY(-20px);transition:opacity .45s ease, transform .45s ease;transition-delay:0s!important}

  /* Act III price stack */
  #prices{position:absolute;left:560px;top:236px;width:560px;display:flex;flex-direction:column;align-items:center;gap:15px;
    pointer-events:none;z-index:8}
  #prices .chip{opacity:0;transform:translateY(26px) scale(.92);transition:transform .65s var(--spring), opacity .45s ease;
    transition-delay:calc(var(--i)*.42s);font-size:27px;padding:13px 26px}
  #prices.in .chip{opacity:1;transform:none}
  #prices.out .chip{opacity:0;transform:translateY(40px);filter:grayscale(1);
    transition:opacity .6s ease, transform .6s ease;transition-delay:calc(var(--i)*.06s)}
  #bundle{position:absolute;left:560px;top:704px;width:560px;display:flex;justify-content:center;pointer-events:none;z-index:8}
  #bundle .chip{border-width:2.5px;border-color:#475569;color:var(--ink);font-weight:750;
    opacity:0;transform:translateY(30px) scale(.9);transition:transform .75s var(--spring), opacity .5s ease}
  #bundle.in .chip{opacity:1;transform:none}
  #bundle.out .chip{opacity:0;transform:translateY(-18px);transition:opacity .45s ease, transform .45s ease}

  /* GLAD feature row */
  #feat{position:absolute;top:405px;left:0;right:0;display:flex;justify-content:center;gap:18px;pointer-events:none;z-index:8}
  #feat .chip{position:relative;opacity:0;transform:translateY(32px) scale(.9);font-size:26px;padding:15px 24px;
    transition:transform .8s var(--spring), opacity .5s ease;transition-delay:var(--d)}
  #feat.go .chip{opacity:1;transform:none}
  #feat .ck{
    position:absolute;right:-13px;top:-13px;width:38px;height:38px;border-radius:50%;
    background:linear-gradient(135deg, var(--amber1), var(--amber2));
    box-shadow:0 6px 16px rgba(234,88,12,.35);display:flex;align-items:center;justify-content:center;
    transform:scale(0);transition:transform .5s var(--spring);transition-delay:var(--d2);
  }
  #feat.done .ck{transform:scale(1)}
  #feat .ck svg{stroke:#fff;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  #feat.bye{opacity:0;transition:opacity .8s var(--ease)}

  /* the ask chip (card fees) */
  #askChip{position:absolute;left:620px;top:436px;transform:translateX(-50%);pointer-events:none;z-index:8}
  #askChip .chip{opacity:0;transform:translateY(30px) scale(.9);transition:transform .75s var(--spring), opacity .5s ease}
  #askChip.in .chip{opacity:1;transform:none}
  #askChip.out .chip{opacity:0;transform:translateY(-18px);transition:opacity .45s ease, transform .45s ease}

  /* ============ sticky notes ============ */
  .note{position:absolute;width:86px;height:86px;border-radius:6px;
    box-shadow:0 8px 18px rgba(15,23,42,.09);
    opacity:0;transform:scale(0) rotate(var(--r));transition:transform .75s var(--spring), opacity .45s ease;
    transition-delay:calc(var(--i)*.13s)}
  .note::before{content:'';position:absolute;left:12px;right:12px;top:22px;height:38px;
    background:repeating-linear-gradient(180deg, rgba(100,116,139,.5) 0 4px, transparent 4px 15px)}
  .note::after{content:'';position:absolute;left:0;right:0;top:0;height:14px;background:rgba(15,23,42,.05)}
  .note.nA{background:#E9EEF5}.note.nB{background:#F0EBF2}.note.nC{background:#EAF0EA}
  .notes.in .note{opacity:1;transform:scale(1) rotate(var(--r))}
  .notes.out .note{opacity:0;transform:scale(.6) rotate(var(--r));transition:opacity .5s ease, transform .5s ease;transition-delay:0s}
  .notes{position:absolute;inset:0;pointer-events:none;z-index:7}

  /* ============ spreadsheet ============ */
  #sheet{position:absolute;left:640px;top:322px;width:640px;z-index:8;pointer-events:none;
    opacity:0;transform:translateY(70px) scale(.94);transition:transform .9s var(--spring), opacity .6s ease}
  #sheet.in{opacity:1;transform:none}
  #sheet.out{opacity:0;transform:translateY(-26px);transition:opacity .5s ease, transform .5s ease}
  #sheet .card{background:#fff;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;
    box-shadow:0 22px 48px rgba(15,23,42,.10)}
  #sheet .bar{display:flex;align-items:center;gap:10px;background:#EEF2F7;padding:14px 20px;
    font-size:21px;font-weight:750;color:var(--mut);letter-spacing:.02em}
  #sheet .bar i{font-style:normal;width:14px;height:14px;border-radius:50%;background:#CBD5E1}
  #sheet table{width:100%;border-collapse:collapse}
  #sheet td{border:1px solid #EDF1F6;height:52px;padding:0 14px}
  #sheet td .pillC{display:block;height:14px;border-radius:7px;background:#E2E8F0}
  #sheet td .pillD{display:block;height:14px;border-radius:7px;background:#CBD5E1}
  #sheet .who{font-size:20px;font-weight:650;color:var(--mut);font-style:italic;white-space:nowrap}

  /* ============ login cards ============ */
  #logins{position:absolute;left:610px;top:258px;width:430px;display:flex;flex-direction:column;gap:14px;
    pointer-events:none;z-index:8}
  #logins .log{display:flex;align-items:center;gap:16px;background:#fff;border:1.5px solid var(--line);
    border-radius:18px;padding:14px 22px;box-shadow:0 10px 26px rgba(15,23,42,.07);
    opacity:0;transform:translateX(-40px);transition:transform .65s var(--spring), opacity .45s ease;
    transition-delay:calc(var(--i)*.38s)}
  #logins.in .log{opacity:1;transform:none}
  #logins.out .log{opacity:0;transform:translateY(34px);filter:grayscale(1);
    transition:opacity .55s ease, transform .55s ease;transition-delay:calc(var(--i)*.06s)}
  #logins.wob .log{animation:wob 1s ease-in-out 1;animation-delay:calc(var(--i)*.09s)}
  @keyframes wob{0%,100%{transform:rotate(0)}30%{transform:rotate(-1.6deg)}65%{transform:rotate(1.4deg)}}
  #logins .log svg{flex:none;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #logins .log b{font-size:25px;font-weight:700;color:var(--ink2)}
  #logins .log span{margin-left:auto;font-size:24px;font-weight:800;color:#9DAABB;letter-spacing:.14em}

  /* ============ gifts ============ */
  .gift{position:absolute;top:-140px;opacity:0;z-index:8;pointer-events:none;
    transition:transform .85s cubic-bezier(.35,.25,.35,1), opacity .35s ease}
  .gift .chip{font-size:26px;padding:13px 24px;gap:11px}
  .gift .chip svg{stroke:#475569}
  .gift.fly{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(-4deg)}
  .gift.gone{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 34px)) scale(.25) rotate(-4deg);
    transition:transform .4s ease-in, opacity .32s ease}
  #gift1{left:1080px;--dx:80px;--dy:700px}
  #gift2{left:940px;--dx:220px;--dy:712px}
  #gift3{left:1240px;--dx:-60px;--dy:706px}
  #gift4{left:960px;--dx:110px;--dy:700px}

  /* ============ speech bubble ============ */
  #bubble{
    position:absolute;max-width:640px;width:max-content;opacity:0;z-index:9;
    transform:translateX(-50%) translateY(16px) scale(.92);text-align:center;
    transform-origin:50% 100%;transition:opacity .4s ease, transform .55s var(--spring);
    background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:20px 30px;
    box-shadow:0 14px 36px rgba(15,23,42,.09);font-size:31px;font-weight:600;color:var(--ink2);
  }
  #bubble::after{
    content:'';position:absolute;left:calc(50% - 12px);bottom:-13px;width:24px;height:24px;background:#fff;
    border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:rotate(45deg);
  }
  #bubble.show{opacity:1;transform:translateX(-50%)}
  #bubble.posT{left:1230px;top:398px}
  #bubble.posT2{left:1560px;top:398px}
  #bubble.posG{left:1120px;top:368px}
  #bubble.small{font-size:26px;font-weight:600;color:var(--mut);padding:14px 24px}

  /* ============ quote ============ */
  #quote{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:0 280px;text-align:center;opacity:0;transform:translateY(34px);z-index:10;
    transition:opacity 1s var(--ease), transform 1s var(--ease);pointer-events:none}
  #quote .qmark{font-size:190px;line-height:.55;font-weight:800;margin-bottom:26px;
    background:linear-gradient(135deg, var(--amber1), var(--amber2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  #quote .qtext{font-size:68px;font-weight:750;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
  #quote .qwho{margin-top:34px;font-size:31px;font-weight:600;color:var(--mut)}
  #quote.in{opacity:1;transform:none}
  #quote.outing{opacity:0;transform:translateY(-30px);transition-duration:.6s}

  /* ============ end card ============ */
  #end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:0;text-align:center;pointer-events:none;z-index:11}
  #end .mark{width:172px;height:172px;opacity:0;transform:scale(.5);transition:transform .9s var(--spring), opacity .5s ease}
  #end .word{margin-top:34px;font-size:132px;font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1;
    opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);transition-delay:.25s}
  #end .by{margin-top:16px;font-size:26px;font-weight:650;letter-spacing:.26em;color:var(--faint);text-transform:uppercase;
    opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease), transform .8s var(--ease);transition-delay:.45s}
  #end .rule{margin-top:46px;height:3px;width:0;border-radius:2px;
    background:linear-gradient(90deg, var(--amber1), var(--amber2));
    transition:width 1s var(--ease);transition-delay:.7s}
  #end .tag{margin-top:38px;font-size:48px;font-weight:700;letter-spacing:-.015em;color:var(--ink);
    opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease), transform .9s var(--ease);transition-delay:.95s}
  #end .tag em{font-style:normal;background:linear-gradient(110deg, var(--amber1), var(--amber2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  #end.in .mark{opacity:1;transform:scale(1)}
  #end.in .word,#end.in .by,#end.in .tag{opacity:1;transform:none}
  #end.in .rule{width:340px}

  /* ============ replay ============ */
  #replay{
    position:absolute;right:44px;bottom:38px;width:56px;height:56px;border-radius:50%;cursor:pointer;
    background:#fff;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .8s ease, border-color .3s ease, transform .3s ease;z-index:12
  }
  #replay svg{stroke:var(--mut);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .45s var(--ease), stroke .3s ease}
  #replay.show{opacity:1;pointer-events:auto}
  #replay:hover{border-color:var(--amber1);transform:scale(1.06)}
  #replay:hover svg{transform:rotate(70deg);stroke:var(--amber2)}
  #replay:focus-visible{outline:3px solid var(--amber1);outline-offset:3px}

  /* ============ still-frame QA mode (?t=NN) ============ */
  .still #stage *,.still #stage *::before,.still #stage *::after{
    transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  .still #replay{transition:none}

  /* ============ reduced motion ============ */
  @media (prefers-reduced-motion: reduce){
    #stage *,#stage *::before,#stage *::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  }
</style>
</head>
<body>
<div id="fit"><div id="ad" role="img"
  aria-label="Animated story ad. Ruth, a volunteer church treasurer, loves her giving tool — Tithe.ly, whose giving product really is free monthly with rates published up front — but the member list is a spreadsheet, follow-ups are sticky notes, and five other logins keep Sunday from ever closing out. Tithe.ly honestly offers its six products, and its 119-dollar All-Access bundle honestly is the better deal — but Ruth was hoping for one thing, not six. GLAD is one login for the whole church: one gift in, everything follows. On card fees GLAD concedes: everyone pays the card company — that part's fair. Sunday now closes by two in the afternoon. GLAD by MinistrySaaS. Giving is table stakes — we do the whole church.">
  <div id="stage">
    <div id="warm"></div>

    <!-- environment: Ruth's Sunday-night desk -->
    <div id="env" class="on" aria-hidden="true">
      <div class="wall"></div>
      <div class="base"></div>
      <div class="win">
        <div class="skyN">
          <div class="moon"></div>
          <span class="star" style="left:44px;top:60px"></span>
          <span class="star" style="left:96px;top:130px"></span>
          <span class="star" style="left:60px;top:230px"></span>
          <span class="star" style="left:170px;top:190px"></span>
          <span class="star" style="left:250px;top:280px"></span>
          <span class="star" style="left:130px;top:320px"></span>
        </div>
        <div class="skyD">
          <div class="cloud" style="left:30px;top:110px"></div>
          <div class="cloud" style="left:150px;top:250px;width:96px"></div>
        </div>
        <div class="mull1"></div><div class="mull2"></div>
      </div>
      <div class="shelf">
        <span class="book" style="left:16px;height:52px;background:#CBD5E1"></span>
        <span class="book" style="left:46px;height:64px;background:#9DAABB"></span>
        <span class="book" style="left:76px;height:46px;background:#DDE4ED"></span>
        <svg class="plant" width="52" height="58" viewBox="0 0 52 58" aria-hidden="true">
          <path d="M26 34 Q12 26 14 8 Q28 14 26 34" fill="#B8C7B8"/>
          <path d="M26 34 Q40 24 38 6 Q25 13 26 34" fill="#A9BCA9"/>
          <rect x="16" y="34" width="20" height="20" rx="5" fill="#E2E8F0"/>
        </svg>
      </div>
    </div>

    <!-- wall clock chip -->
    <div id="clock"><span class="dot"></span><span id="clockTxt">SUN · 9:41 PM</span></div>

    <!-- desk (in front of Ruth) -->
    <div id="desk" class="on" aria-hidden="true">
      <div class="apron"></div>
      <div class="top"></div>
      <div class="lapLid"></div>
      <div class="lapHinge"></div>
      <div class="mug"></div>
      <span class="steam"></span><span class="steam s2"></span>
      <div class="pp" style="left:66px;top:-14px;transform:rotate(-2deg)"></div>
      <div class="pp" style="left:74px;top:-26px;transform:rotate(1.5deg)"></div>
      <div class="pp" style="left:60px;top:-38px;transform:rotate(-1deg)"></div>
    </div>

    <h1 id="kt" class="lg" aria-live="polite"></h1>

    <!-- Act I sticky notes -->
    <div id="notesA" class="notes" aria-hidden="true">
      <div class="note nA" style="--i:0;--r:-4deg;left:300px;top:340px"></div>
      <div class="note nB" style="--i:1;--r:3deg;left:1000px;top:560px"></div>
      <div class="note nC" style="--i:2;--r:-2deg;left:760px;top:610px"></div>
      <div class="note nA" style="--i:3;--r:5deg;left:520px;top:868px"></div>
    </div>

    <!-- Act III sticky-note bloom -->
    <div id="notesB" class="notes" aria-hidden="true">
      <div class="note nB" style="--i:0;--r:-5deg;left:262px;top:310px"></div>
      <div class="note nA" style="--i:1;--r:4deg;left:372px;top:430px"></div>
      <div class="note nC" style="--i:2;--r:-3deg;left:1418px;top:296px"></div>
      <div class="note nA" style="--i:3;--r:6deg;left:1636px;top:470px"></div>
      <div class="note nC" style="--i:4;--r:-4deg;left:352px;top:856px"></div>
      <div class="note nB" style="--i:5;--r:2deg;left:648px;top:882px"></div>
      <div class="note nA" style="--i:6;--r:-6deg;left:912px;top:850px"></div>
      <div class="note nB" style="--i:7;--r:3deg;left:772px;top:598px"></div>
    </div>

    <!-- spreadsheet -->
    <div id="sheet" aria-hidden="true">
      <div class="card">
        <div class="bar"><i></i><i></i><i></i>&nbsp; members — spreadsheet, 14 tabs</div>
        <table>
          <tr>
            <td style="width:30%"><span class="pillD" style="width:74%"></span></td>
            <td style="width:26%"><span class="pillC" style="width:82%"></span></td>
            <td style="width:22%"><span class="pillC" style="width:58%"></span></td>
            <td style="width:22%"><span class="pillC" style="width:70%"></span></td>
          </tr>
          <tr>
            <td><span class="pillD" style="width:58%"></span></td>
            <td><span class="pillC" style="width:66%"></span></td>
            <td><span class="who">moved…?</span></td>
            <td><span class="pillC" style="width:44%"></span></td>
          </tr>
          <tr>
            <td><span class="pillD" style="width:82%"></span></td>
            <td><span class="who">new number?</span></td>
            <td><span class="pillC" style="width:64%"></span></td>
            <td><span class="pillC" style="width:52%"></span></td>
          </tr>
          <tr>
            <td><span class="pillD" style="width:64%"></span></td>
            <td><span class="pillC" style="width:74%"></span></td>
            <td><span class="pillC" style="width:48%"></span></td>
            <td><span class="who">ask Marge</span></td>
          </tr>
        </table>
      </div>
    </div>

    <!-- login cards -->
    <div id="logins" aria-hidden="true">
      <div class="log" style="--i:0">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="3" y="6" width="24" height="18" rx="4"/><path d="M4 8l11 9 11-9"/></svg>
        <b>Email blasts</b><span>••••••••</span>
      </div>
      <div class="log" style="--i:1">
        <svg width="30" height="30" viewBox="0 0 30 30"><circle cx="15" cy="15" r="11"/><path d="M4 15h22M15 4c4 3.5 4 18.5 0 22c-4-3.5-4-18.5 0-22z"/></svg>
        <b>Website host</b><span>••••••••</span>
      </div>
      <div class="log" style="--i:2">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="4" y="6" width="22" height="19" rx="4"/><path d="M4 12h22M10 3v6M20 3v6"/></svg>
        <b>Shared calendar</b><span>••••••••</span>
      </div>
      <div class="log" style="--i:3">
        <svg width="30" height="30" viewBox="0 0 30 30"><path d="M26 14a11 9.5 0 0 1-11 9.5c-1.6 0-3.2-.3-4.6-.8L4 24.5l1.9-5A9.4 9.4 0 0 1 4 14a11 9.5 0 0 1 22 0z"/></svg>
        <b>Texting app</b><span>••••••••</span>
      </div>
      <div class="log" style="--i:4">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="4" y="5" width="22" height="20" rx="4"/><circle cx="11" cy="12" r="2.6"/><path d="M4 21l7-6 5 4 5-5 5 5"/></svg>
        <b>Photo drive</b><span>••••••••</span>
      </div>
    </div>

    <!-- Act III price stack (their published prices) -->
    <div id="prices" aria-hidden="true">
      <div class="chip" style="--i:0">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="4" y="10" width="22" height="15" rx="3"/><path d="M4 15h22M10 10V6a5 5 0 0 1 10 0v4"/></svg>
        Church Management — $72/mo
      </div>
      <div class="chip" style="--i:1">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="8" y="3" width="14" height="24" rx="4"/><path d="M12 23h6"/></svg>
        Text Giving — $19/mo
      </div>
      <div class="chip" style="--i:2">
        <svg width="30" height="30" viewBox="0 0 30 30"><path d="M20 4v13.4a4.3 4.3 0 1 1-3-4.1V7l8-3v10.2a4.3 4.3 0 1 1-3-4.1"/></svg>
        Worship Team Tools — $29/mo
      </div>
      <div class="chip" style="--i:3">
        <svg width="30" height="30" viewBox="0 0 30 30"><circle cx="15" cy="15" r="11"/><path d="M4 15h22M15 4c4 3.5 4 18.5 0 22c-4-3.5-4-18.5 0-22z"/></svg>
        Website — $19/mo
      </div>
      <div class="chip" style="--i:4">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="7" y="3" width="16" height="24" rx="4"/><path d="M13 23h4"/><circle cx="15" cy="13" r="4"/></svg>
        Custom App — $89/mo
      </div>
    </div>
    <div id="bundle" aria-hidden="true">
      <div class="chip">
        <svg width="30" height="30" viewBox="0 0 30 30"><path class="fl" d="M15 3l3.1 8.1 8.1 3.1-8.1 3.1L15 25.4l-3.1-8.1L3.8 14.2l8.1-3.1z" style="fill:#475569"/></svg>
        All-Access — $119/mo
      </div>
    </div>

    <!-- the ask chip -->
    <div id="askChip">
      <div class="chip">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="3" y="7" width="24" height="17" rx="4"/><path d="M3 12h24M7 19h6"/></svg>
        And the card fees?
      </div>
    </div>

    <!-- Ruth -->
    <div id="ruthWrap" class="actor">
      <div class="ent">
        <svg id="ruth" data-mood="hopeful" width="260" height="430" viewBox="0 0 260 430" aria-label="Ruth, volunteer treasurer">
          <g class="torsoG">
            <!-- legs + flats -->
            <rect x="100" y="322" width="27" height="86" rx="13" fill="#334155"/>
            <rect x="133" y="322" width="27" height="86" rx="13" fill="#334155"/>
            <rect x="90"  y="402" width="48" height="15" rx="7" fill="#1E293B"/>
            <rect x="128" y="402" width="48" height="15" rx="7" fill="#1E293B"/>
            <!-- arms (cardigan sleeves) -->
            <g class="armL">
              <rect x="56" y="212" width="22" height="112" rx="11" fill="#475569"/>
              <circle cx="67" cy="326" r="11" fill="#EFC5A0"/>
            </g>
            <g class="armR">
              <rect x="182" y="212" width="22" height="112" rx="11" fill="#475569"/>
              <circle cx="193" cy="326" r="11" fill="#EFC5A0"/>
            </g>
            <!-- cardigan + blouse collar -->
            <rect x="78" y="198" width="104" height="148" rx="38" fill="#475569"/>
            <rect x="126" y="214" width="8" height="118" rx="4" fill="rgba(15,23,42,.18)"/>
            <circle cx="130" cy="246" r="4" fill="#CBD5E1"/>
            <circle cx="130" cy="274" r="4" fill="#CBD5E1"/>
            <rect x="118" y="172" width="24" height="32" fill="#EFC5A0"/>
            <path d="M112 200 L130 216 L148 200 L148 210 L130 226 L112 210 Z" fill="#F8FAFC"/>
          </g>
          <!-- head -->
          <circle cx="130" cy="120" r="62" fill="#EFC5A0"/>
          <!-- silver hair + bun -->
          <circle cx="130" cy="46" r="23" fill="#C7CFDA"/>
          <path d="M70.7 102 A62 62 0 0 1 189.3 102 L189 118 Q176 92 130 90 Q84 92 71 118 Z" fill="#C7CFDA"/>
          <circle cx="72" cy="140" r="6" fill="#9DAABB"/>
          <circle cx="188" cy="140" r="6" fill="#9DAABB"/>
          <!-- face -->
          <g class="brows">
            <rect x="96"  y="99" width="21" height="5" rx="2.5" fill="#8B95A5"/>
            <rect x="143" y="99" width="21" height="5" rx="2.5" fill="#8B95A5"/>
          </g>
          <g class="browsW">
            <rect x="96"  y="97" width="21" height="5" rx="2.5" fill="#8B95A5" transform="rotate(-9 106 99)"/>
            <rect x="143" y="97" width="21" height="5" rx="2.5" fill="#8B95A5" transform="rotate(9 154 99)"/>
          </g>
          <g class="eyes">
            <circle cx="108" cy="126" r="5.5" fill="#1F2937"/>
            <circle cx="152" cy="126" r="5.5" fill="#1F2937"/>
          </g>
          <g class="eyesClosed" fill="none" stroke="#1F2937" stroke-width="5" stroke-linecap="round">
            <path d="M100 126 Q108 133 116 126"/>
            <path d="M144 126 Q152 133 160 126"/>
          </g>
          <!-- glasses -->
          <g fill="none" stroke="#475569" stroke-width="4">
            <circle cx="108" cy="126" r="17"/>
            <circle cx="152" cy="126" r="17"/>
            <path d="M125 124 h10"/>
            <path d="M91 122 L76 116"/>
            <path d="M169 122 L184 116"/>
          </g>
          <ellipse cx="94" cy="150" rx="8" ry="5" fill="#F4A8B8" opacity=".3"/>
          <ellipse cx="166" cy="150" rx="8" ry="5" fill="#F4A8B8" opacity=".3"/>
          <g fill="none" stroke="#1F2937" stroke-width="5" stroke-linecap="round">
            <path class="m-smile" d="M112 152 Q130 166 148 152"/>
            <path class="m-flat"  d="M114 157 L146 157"/>
            <path class="m-grim"  d="M112 162 Q130 150 148 162"/>
            <path class="m-big"   d="M110 151 Q130 174 150 151"/>
          </g>
          <path class="sweat" d="M204 84 q10 14 0 21 q-10 -7 0 -21" fill="#93C5FD"/>
          <g class="puff" fill="#E2E8F0">
            <circle cx="176" cy="152" r="7"/>
            <circle cx="189" cy="147" r="10"/>
            <circle cx="202" cy="152" r="7"/>
          </g>
        </svg>
      </div>
      <div class="shadow" style="bottom:0"></div>
    </div>

    <!-- Tithe.ly -->
    <div id="streaks" aria-hidden="true"><span></span><span></span><span></span></div>
    <div id="tithelyWrap" class="actor">
      <div class="ent"><div class="bob">
        <div id="receipt"></div>
        <div class="pip" id="pip1">✓</div>
        <div class="pip" id="pip2" style="left:236px">✓</div>
        <div class="pip" id="pip3" style="left:196px">✓</div>
        <svg id="tithely" width="320" height="300" viewBox="0 0 320 300" aria-label="Tithe.ly, a friendly little card terminal">
          <g class="tBody">
            <!-- arms -->
            <rect x="34" y="150" width="52" height="20" rx="10" fill="#B9C9DB"/>
            <g class="armR"><rect x="234" y="150" width="52" height="20" rx="10" fill="#B9C9DB"/></g>
            <!-- body -->
            <rect x="60" y="36" width="200" height="228" rx="52" fill="#DCE7F3"/>
            <path d="M84 66 Q90 46 116 42" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="11" stroke-linecap="round"/>
            <!-- top receipt slot -->
            <rect x="115" y="52" width="90" height="9" rx="4.5" fill="#A9B8C9"/>
            <!-- screen face -->
            <rect x="92" y="88" width="136" height="100" rx="24" fill="#F5F9FD" stroke="#C9D6E4" stroke-width="2"/>
            <g class="eyes">
              <circle cx="136" cy="126" r="7" fill="#1E293B"/>
              <circle cx="184" cy="126" r="7" fill="#1E293B"/>
            </g>
            <ellipse cx="116" cy="150" rx="8" ry="5" fill="#F9A8D4" opacity=".35"/>
            <ellipse cx="204" cy="150" rx="8" ry="5" fill="#F9A8D4" opacity=".35"/>
            <path d="M146 148 Q160 162 174 148" fill="none" stroke="#1E293B" stroke-width="5" stroke-linecap="round"/>
            <!-- heart -->
            <path d="M160 234 q-14 -12 -14 -21 q0 -9 8 -9 q5 0 6 5 q1 -5 6 -5 q8 0 8 9 q0 9 -14 21z" fill="#B9C9DB"/>
            <!-- feet -->
            <rect x="102" y="262" width="42" height="16" rx="8" fill="#9DAABB"/>
            <rect x="176" y="262" width="42" height="16" rx="8" fill="#9DAABB"/>
          </g>
          <g class="sparks" fill="#BFD9F2">
            <path class="spark" d="M84 30 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4 z"/>
            <path class="spark" d="M252 20 l3.4 8.6 8.6 3.4 -8.6 3.4 -3.4 8.6 -3.4 -8.6 -8.6 -3.4 8.6 -3.4 z"/>
            <path class="spark" d="M290 150 l3 7.6 7.6 3 -7.6 3 -3 7.6 -3 -7.6 -7.6 -3 7.6 -3 z"/>
          </g>
        </svg>
      </div></div>
      <div class="shadow" style="bottom:-2px"></div>
    </div>

    <!-- GLAD -->
    <div id="gladWrap" class="actor">
      <div class="ent">
        <div class="glow"></div>
        <div class="hover">
          <svg width="240" height="240" viewBox="0 0 240 240" aria-label="GLAD">
            <defs>
              <linearGradient id="gg" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="#F59E0B"/><stop offset="1" stop-color="#EA580C"/>
              </linearGradient>
            </defs>
            <rect x="20" y="20" width="200" height="200" rx="54" fill="url(#gg)"/>
            <path d="M44 74 Q48 42 80 36" fill="none" stroke="rgba(255,255,255,.35)" stroke-width="13" stroke-linecap="round"/>
            <g class="eyes">
              <circle cx="96" cy="110" r="9.5" fill="#fff"/>
              <circle cx="144" cy="110" r="9.5" fill="#fff"/>
            </g>
            <path d="M86 140 Q120 170 154 140" fill="none" stroke="#fff" stroke-width="11" stroke-linecap="round"/>
          </svg>
        </div>
      </div>
      <div class="shadow" style="bottom:0"></div>
    </div>

    <!-- Act II credit chips — the honest ones (verified July 2026) -->
    <div id="chips2">
      <div class="chip">
        <svg width="30" height="30" viewBox="0 0 30 30"><path d="M15 25 q-11 -9 -11 -16 q0 -6 5.5 -6 q4 0 5.5 4 q1.5 -4 5.5 -4 q5.5 0 5.5 6 q0 7 -11 16z"/></svg>
        Giving — free monthly
      </div>
      <div class="chip">
        <svg width="30" height="30" viewBox="0 0 30 30"><circle cx="9" cy="9" r="3.4"/><circle cx="21" cy="21" r="3.4"/><path d="M24 6L6 24"/></svg>
        2.9% + 30¢ card · 1% + 30¢ ACH — published up front
      </div>
    </div>

    <!-- gifts -->
    <div class="gift" id="gift1"><div class="chip">
      <svg width="26" height="26" viewBox="0 0 30 30"><path d="M15 25 q-11 -9 -11 -16 q0 -6 5.5 -6 q4 0 5.5 4 q1.5 -4 5.5 -4 q5.5 0 5.5 6 q0 7 -11 16z"/></svg>
      $50 · youth trip
    </div></div>
    <div class="gift" id="gift2"><div class="chip">
      <svg width="26" height="26" viewBox="0 0 30 30"><path d="M15 25 q-11 -9 -11 -16 q0 -6 5.5 -6 q4 0 5.5 4 q1.5 -4 5.5 -4 q5.5 0 5.5 6 q0 7 -11 16z"/></svg>
      $20 · flowers
    </div></div>
    <div class="gift" id="gift3"><div class="chip">
      <svg width="26" height="26" viewBox="0 0 30 30"><path d="M15 25 q-11 -9 -11 -16 q0 -6 5.5 -6 q4 0 5.5 4 q1.5 -4 5.5 -4 q5.5 0 5.5 6 q0 7 -11 16z"/></svg>
      $120 · tithe
    </div></div>
    <div class="gift" id="gift4"><div class="chip">
      <svg width="26" height="26" viewBox="0 0 30 30"><path d="M15 25 q-11 -9 -11 -16 q0 -6 5.5 -6 q4 0 5.5 4 q1.5 -4 5.5 -4 q5.5 0 5.5 6 q0 7 -11 16z"/></svg>
      $100 · missions
    </div></div>

    <!-- speech bubble -->
    <div id="bubble"><span id="bubbleTxt"></span></div>

    <!-- GLAD feature row -->
    <div id="feat">
      <div class="chip" style="--d:0s;--d2:0s">
        <svg width="28" height="28" viewBox="0 0 30 30"><circle cx="11" cy="12" r="4"/><path d="M4 24c1.5-4 4-6 7-6s5.5 2 7 6"/><circle cx="21" cy="11" r="3"/><path d="M21 17c3 .3 4.6 2.2 5.5 5"/></svg>
        People
        <span class="ck"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
      </div>
      <div class="chip" style="--d:.22s;--d2:.25s">
        <svg width="28" height="28" viewBox="0 0 30 30"><path d="M15 25 q-11 -9 -11 -16 q0 -6 5.5 -6 q4 0 5.5 4 q1.5 -4 5.5 -4 q5.5 0 5.5 6 q0 7 -11 16z"/></svg>
        Giving
        <span class="ck"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
      </div>
      <div class="chip" style="--d:.44s;--d2:.5s">
        <svg width="28" height="28" viewBox="0 0 30 30"><rect x="3" y="6" width="24" height="18" rx="4"/><path d="M4 8l11 9 11-9"/></svg>
        Messages
        <span class="ck"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
      </div>
      <div class="chip" style="--d:.66s;--d2:.75s">
        <svg width="28" height="28" viewBox="0 0 30 30"><rect x="4" y="6" width="22" height="19" rx="4"/><path d="M4 12h22M10 3v6M20 3v6"/></svg>
        Events
        <span class="ck"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
      </div>
      <div class="chip" style="--d:.88s;--d2:1s">
        <svg width="28" height="28" viewBox="0 0 30 30"><circle cx="15" cy="15" r="11"/><path d="M4 15h22M15 4c4 3.5 4 18.5 0 22c-4-3.5-4-18.5 0-22z"/></svg>
        Website
        <span class="ck"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
      </div>
      <div class="chip" style="--d:1.1s;--d2:1.25s">
        <svg width="28" height="28" viewBox="0 0 30 30"><rect x="6" y="3" width="18" height="24" rx="4"/><path d="M10 9h10M10.2 15h.1M15 15h.1M19.8 15h.1M10.2 20h.1M15 20h.1M19.8 20h.1"/></svg>
        Accounting
        <span class="ck"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>
      </div>
    </div>

    <!-- Ruth's relief -->
    <div id="quote">
      <div class="qmark">“</div>
      <div class="qtext">For the first time in twenty-two years,<br>Sunday ends on Sunday.</div>
      <div class="qwho">— Ruth, volunteer treasurer</div>
    </div>

    <!-- end card -->
    <div id="end">
      <svg class="mark" viewBox="0 0 240 240" aria-hidden="true">
        <defs>
          <linearGradient id="gg2" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#F59E0B"/><stop offset="1" stop-color="#EA580C"/>
          </linearGradient>
        </defs>
        <rect x="20" y="20" width="200" height="200" rx="54" fill="url(#gg2)"/>
        <path d="M44 74 Q48 42 80 36" fill="none" stroke="rgba(255,255,255,.35)" stroke-width="13" stroke-linecap="round"/>
        <circle cx="96" cy="110" r="9.5" fill="#fff"/><circle cx="144" cy="110" r="9.5" fill="#fff"/>
        <path d="M86 140 Q120 170 154 140" fill="none" stroke="#fff" stroke-width="11" stroke-linecap="round"/>
      </svg>
      <div class="word">GLAD</div>
      <div class="by">by MinistrySaaS</div>
      <div class="rule"></div>
      <div class="tag">Giving is table stakes. <em>We do the whole church.</em></div>
    </div>
  </div><!-- /stage -->

  <button id="replay" aria-label="Replay">
    <svg width="26" height="26" viewBox="0 0 26 26"><path d="M22 13a9 9 0 1 1-2.7-6.4"/><path d="M22 3v6.6h-6.6"/></svg>
  </button>
</div></div>

<script>
(function(){
  'use strict';
  var $ = function(s){ return document.querySelector(s); };
  var stage = $('#stage');
  var STAGE0 = stage.innerHTML;

  var P = new URLSearchParams(location.search);
  var STILL_T = P.get('t');
  var STILL = STILL_T !== null;
  var RM = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  /* ---------- fit 1920x1080 to the window ---------- */
  var ad = $('#ad');
  function fit(){
    var s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
    ad.style.transform = 'scale(' + s + ')';
  }
  window.addEventListener('resize', fit); fit();

  /* ---------- primitives ---------- */
  function kt(text, cls){
    var el = $('#kt');
    el.className = cls || 'lg';
    el.innerHTML = '';
    text.split(' ').forEach(function(w, i){
      var s = document.createElement('span');
      s.className = 'w'; s.textContent = w;
      s.style.transitionDelay = (i * 70) + 'ms';
      el.appendChild(s);
      el.appendChild(document.createTextNode(' '));
    });
    if (STILL || RM) { el.classList.add('in'); return; }
    requestAnimationFrame(function(){ requestAnimationFrame(function(){ el.classList.add('in'); }); });
  }
  function ktOut(){ var el = $('#kt'); el.classList.remove('in'); el.classList.add('outing'); }

  function say(text, pos, small){
    var b = $('#bubble');
    $('#bubbleTxt').textContent = text;
    b.className = pos + (small ? ' small' : '');
    void b.offsetWidth;
    b.classList.add('show');
  }
  function sayOff(){ $('#bubble').classList.remove('show'); }

  function mood(m){ $('#ruth').setAttribute('data-mood', m); }
  function cls(sel, c, on){ $(sel).classList[on === false ? 'remove' : 'add'](c); }
  function clockSet(txt){
    var c = $('#clock');
    $('#clockTxt').textContent = txt;
    c.classList.add('on');
    c.classList.remove('tick'); void c.offsetWidth;
    c.classList.add('tick');
  }

  /* ---------- cue sheet (seconds → beat → fn) ----------
     Beat names feed the console.table printed on load — the scoring sheet
     for the MP4 edit. Keep them in lockstep with the header comment. */
  var cues = [
    /* ACT I — Ruth, Sunday night (env + desk are .on from markup) */
    [0.6,  'ENTRANCE: Ruth (kitchen desk, night)',            function(){ cls('#ruthWrap','in'); mood('hopeful'); }],
    [0.9,  'Title — "This is Ruth."',                         function(){ kt('This is Ruth.', 'xl'); }],
    [3.5,  '(title out)',                                     ktOut],
    [3.9,  '"Volunteer treasurer. Twenty-two years." + wave', function(){ kt('Volunteer treasurer. Twenty-two years.', 'lg'); cls('#ruthWrap','hi'); }],
    [7.3,  '(title out)',                                     ktOut],
    [7.7,  'Clock in — SUN 9:41 PM',                          function(){ kt('It’s Sunday night.', 'lg'); clockSet('SUN · 9:41 PM'); }],
    [10.5, '(title out)',                                     ktOut],
    [10.9, 'Sticky notes wave one · Ruth stretched',          function(){ kt('And Sundays come with paperwork.', 'md'); cls('#notesA','in'); mood('stretched'); }],
    [14.7, '(title out)',                                     ktOut],
    [15.1, 'Pivot — "Except the giving."',                    function(){ kt('Except the giving. The giving runs itself.', 'md'); mood('hopeful'); }],
    [18.9, '(title out)',                                     ktOut],
    [19.3, 'Environment out → white limbo',                   function(){ cls('#env','on', false); cls('#desk','on', false); cls('#notesA','out'); cls('#clock','on', false); }],

    /* ACT II — meet Tithe.ly, the likeable specialist */
    [19.9, 'ENTRANCE: Tithe.ly (card-swipe streaks)',         function(){ cls('#tithelyWrap','in'); cls('#streaks','go'); }],
    [20.3, '"Meet Tithe.ly."',                                function(){ kt('Meet Tithe.ly.', 'lg'); }],
    [22.9, '(title out)',                                     ktOut],
    [23.3, 'Credit chips — free monthly · published rates',   function(){ kt('At giving? Genuinely great.', 'md'); cls('#chips2','in'); cls('#tithelyWrap','beam'); }],
    [27.7, '(title out)',                                     ktOut],
    [28.1, 'Gift 1 flies',                                    function(){ cls('#gift1','fly'); }],
    [28.9, 'Gift 1 lands — receipt prints, pip',              function(){ cls('#gift1','gone'); cls('#receipt','r1'); cls('#pip1','go'); }],
    [29.6, 'Gift 2 flies',                                    function(){ cls('#gift2','fly'); }],
    [30.4, 'Gift 2 lands — receipt grows',                    function(){ cls('#gift2','gone'); cls('#receipt','r2'); cls('#pip2','go'); }],
    [31.1, 'Gift 3 flies',                                    function(){ cls('#gift3','fly'); }],
    [31.9, 'Gift 3 lands — receipt full',                     function(){ cls('#gift3','gone'); cls('#receipt','r3'); cls('#pip3','go'); cls('#chips2','out'); }],
    [32.4, 'Tithe.ly — "Counted. Receipted. Filed." + bow',   function(){ say('Counted. Receipted. Filed.', 'posT'); cls('#tithelyWrap','bow'); }],
    [35.4, '(bubble off)',                                    sayOff],
    [35.8, '"Ruth loves this part."',                         function(){ kt('Ruth loves this part.', 'lg'); mood('delighted'); }],
    [38.8, '(title out)',                                     ktOut],
    [39.2, '"So does Tithe.ly." + second bow',                function(){ kt('So does Tithe.ly. You can tell.', 'md');
                       cls('#tithelyWrap','bow', false); void $('#tithelyWrap').offsetWidth; cls('#tithelyWrap','bow'); }],
    [42.6, '(title out, receipt fades)',                      function(){ ktOut(); cls('#receipt','done'); }],
    [43.2, 'Tithe.ly waves off',                              function(){ cls('#tithelyWrap','wave'); cls('#tithelyWrap','beam', false); }],
    [44.2, '(Tithe.ly exits)',                                function(){ cls('#tithelyWrap','exit'); cls('#tithelyWrap','wave', false); }],

    /* ACT III — everything else is still manual */
    [44.6, 'Environment returns — SUN 10:07 PM',              function(){ cls('#env','on'); cls('#desk','on'); clockSet('SUN · 10:07 PM'); mood('stretched'); }],
    [45.2, 'ESCALATION 1: the spreadsheet',                   function(){ kt('The member list lives in a spreadsheet.', 'md'); cls('#sheet','in'); }],
    [49.2, '(sheet out)',                                     function(){ ktOut(); cls('#sheet','out'); }],
    [49.8, 'ESCALATION 2: sticky-note bloom',                 function(){ kt('The follow-ups live on sticky notes.', 'md'); cls('#notesB','in'); }],
    [53.6, '(title out)',                                     ktOut],
    [54.2, 'ESCALATION 3: five logins',                       function(){ kt('Everything else lives across five logins.', 'md'); cls('#logins','in'); }],
    [58.4, '(title out)',                                     ktOut],
    [58.9, '"Five tools. One volunteer." + wobble',           function(){ kt('Five tools. One volunteer.', 'lg'); mood('worried'); cls('#logins','wob'); }],
    [62.3, '(title out)',                                     ktOut],
    [62.9, 'ESCALATION PEAK: clock 11:58 PM',                 function(){ clockSet('SUN · 11:58 PM'); kt('And Sunday never quite closes out.', 'md'); mood('stretched'); }],
    [67.1, '(props out)',                                     function(){ ktOut(); cls('#notesB','out'); cls('#logins','out'); }],
    [67.9, 'Tithe.ly re-enters',                              function(){ cls('#tithelyWrap','exit', false); }],
    [68.7, 'Tithe.ly — "We do sell tools for all of this."',  function(){ say('You know… we do sell tools for all of this.', 'posT'); }],
    [71.7, 'Price stack ticks in ($72/$19/$29/$19/$89)',      function(){ sayOff(); cls('#prices','in'); }],
    [75.4, 'REQUIRED BEAT: All-Access $119, the better deal', function(){ say('Or All-Access — $119 a month. Honestly, the better deal.', 'posT');
                        cls('#prices','out'); cls('#bundle','in'); }],
    [79.6, '(bubble off)',                                    sayOff],
    [80.0, 'THE TURN: "Ruth was hoping for one."',            function(){ kt('Six good products. Ruth was hoping for one.', 'md'); mood('hopeful'); }],
    [83.8, '(bundle out)',                                    function(){ ktOut(); cls('#bundle','out'); }],

    /* ACT IV — GLAD */
    [84.4, 'ENTRANCE: GLAD (warm wash, Tithe.ly aside)',      function(){ cls('#env','on', false); cls('#desk','on', false); cls('#clock','on', false);
                       cls('#tithelyWrap','aside'); cls('#warm','on'); cls('#gladWrap','in'); }],
    [85.0, '"This is GLAD."',                                 function(){ kt('This is GLAD.', 'lg'); }],
    [87.6, '(title out)',                                     ktOut],
    [88.0, 'Feature row — one login, the whole church',       function(){ kt('One login. The whole church.', 'md'); cls('#feat','go'); }],
    [92.0, '(title out)',                                     ktOut],
    [92.6, 'Gift 4 flies to GLAD',                            function(){ cls('#gift4','fly'); }],
    [93.4, 'PAYOFF: gift lands — amber ticks cascade',        function(){ cls('#gift4','gone'); cls('#gladWrap','yay'); cls('#feat','done'); }],
    [93.8, '"One gift in. Everything follows."',              function(){ kt('One gift in. Everything follows.', 'md'); }],
    [97.8, '(title out)',                                     ktOut],
    [98.2, '(feature row out)',                               function(){ cls('#feat','bye'); }],
    [98.6, 'Ruth asks — "And the card fees?"',                function(){ cls('#ruth','ask'); cls('#askChip','in'); }],
    [100.7, 'REQUIRED BEAT: concession line (GLAD)',          function(){ say('Everyone pays the card company. That part’s fair.', 'posG'); }],
    [104.4, '(ask chip out)',                                 function(){ cls('#askChip','out'); cls('#ruth','ask', false); }],
    [104.9, 'Tithe.ly — "…that’s fair." + nod',          function(){ say('…that’s fair.', 'posT2', true); cls('#tithelyWrap','nod'); }],
    [107.6, 'Ruth relieved · GLAD yay',                       function(){ sayOff(); mood('relieved'); cls('#ruth','exhale'); cls('#gladWrap','yay', false);
                        void $('#gladWrap').offsetWidth; cls('#gladWrap','yay'); }],
    [108.4, 'Tithe.ly waves goodbye',                         function(){ cls('#tithelyWrap','wave'); }],
    [109.2, '(Tithe.ly exits)',                               function(){ cls('#tithelyWrap','exit'); }],

    /* ACT V — Sunday closes out */
    [109.6, 'Daylight — SUN 2:00 PM',                        function(){ cls('#env','day'); cls('#env','on'); cls('#desk','on'); clockSet('SUN · 2:00 PM'); }],
    [110.2, '"Sunday, two in the afternoon. Closed out."',          function(){ kt('Sunday, two in the afternoon. Closed out.', 'md'); }],
    [114.0, '(title out)',                                    ktOut],
    [114.6, 'RELIEF: Ruth’s quote',                      function(){ cls('#ruthWrap','bye'); cls('#gladWrap','bye'); cls('#env','on', false);
                        cls('#desk','on', false); cls('#clock','on', false); cls('#warm','on', false);
                        cls('#quote','in'); }],
    [119.4, '(quote out)',                                    function(){ var q = $('#quote'); q.classList.remove('in'); q.classList.add('outing'); }],
    [120.0, 'PUNCH CARD: end card',                           function(){ cls('#end','in'); }],
    [121.2, 'Replay available',                               function(){ $('#replay').classList.add('show'); }]
  ];

  /* scoring sheet for post — same data that drives the film */
  if (window.console && console.table){
    console.table(cues.map(function(c){ return { t: c[0], beat: c[1] }; }));
  }

  /* ---------- clock ---------- */
  var raf = null, idx = 0, t0 = null;
  function tick(now){
    if (t0 === null) t0 = now;
    var t = (now - t0) / 1000;
    while (idx < cues.length && cues[idx][0] <= t){ cues[idx][2](); idx++; }
    if (idx < cues.length) raf = requestAnimationFrame(tick);
  }
  function begin(){
    idx = 0; t0 = null;
    raf = requestAnimationFrame(tick);
  }
  function restart(){
    if (raf) cancelAnimationFrame(raf);
    stage.innerHTML = STAGE0;
    $('#replay').classList.remove('show');
    void stage.offsetWidth;
    if (RM) { jumpToEnd(); } else { begin(); }
  }

  function jumpToEnd(){
    cues.forEach(function(c){ c[2](); });
  }

  /* ---------- boot ---------- */
  $('#replay').addEventListener('click', restart);
  document.addEventListener('keydown', function(e){
    if ((e.key === 'r' || e.key === 'R') && $('#replay').classList.contains('show')) restart();
  });

  if (STILL){
    document.documentElement.classList.add('still');
    var T = parseFloat(STILL_T) || 0;
    cues.forEach(function(c){ if (c[0] <= T) c[2](); });
  } else if (RM){
    jumpToEnd();
  } else {
    window.addEventListener('load', function(){ setTimeout(begin, 250); });
  }
})();
</script>
</body>
</html>