<!-- Copyright (c) 2026 Diamond Software International Inc. -->
<!--
  GLAD "Get a GLAD" campaign — Spot: "Planning Center · Good News" (long cut)
  ===========================================================================
  Self-contained 1920x1080 animated spot, ~158s, autoplays on load, holds on end card.
  No external assets, no CDNs. System font stack. One amber accent (#F59E0B -> #EA580C)
  — the ONLY saturated colour in the film; the whole competitor act plays in slate/neutrals.

  THE SPINE — growth costs money, over and over. Pastor Ray keeps having good news;
  Planning Center (an original stylized desk-calendar character — no competitor logo or
  trade dress reproduced) is genuinely delighted every time, and a register rings on a
  different meter every time. He is never the villain: the nicest guy who cannot stop
  charging. The data is free — the VERBS are metered.

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

  CLAIMS — sourced from docs/specs/COMPETITOR_AD_CLAIMS.md (Planning Center section,
  verified against planningcenter.com/pricing 2026-08-12):
    · FREE at PCO and credited ON CAMERA (bubble at ~19s, kinetic type at ~22s, credit
      chips at ~73s, end-card fine print): People, Church Center, Publishing Essential.
    · Priced per product, scaling on team members / attendees / check-ins:
      Services, Check-Ins, Groups, Registrations, Calendar, Music Stand.
      Register meter labels use only those verified dimensions or their own published
      wording ("priced per product", "pay as you grow").
    · Giving is per-transaction (framed exactly that way; no rates shown).
  BANNED AND ABSENT: per-module dollar figures; framing People / Church Center /
  Publishing as paid; any per-record / database-size cost claim; any "separate login"
  claim. The joke is only ever the meters on activity. Money is shown iconographically
  only — $ glyphs, coins, an opening drawer, receipt tape — never a digit, total, or
  amount anywhere on Planning Center's side.
  GLAD honesty rail: GLAD plans ARE priced by congregation size — said on screen
  ("Sized by your congregation — the only number that moves" + Starter 50 · Grow 150 ·
  Church 500 · Church Plus 2000). The only growth claim made for GLAD is the team-seat
  one: "Your tenth volunteer costs what your first did: nothing."
  GLAD payoff features (live transcribe, tablet→screen annotate, bulletin builder) are
  shown on GLAD's side only — no claim, stated or implied, that Planning Center lacks them.

  CUE SHEET FOR SCORING (seconds → beat) — also printed as console.table on load.
  Register rings are the key sound cues — each ring is a full cha-ching: $ coin punches
  in, coins drop into the slot, the drawer slides open and shut, receipt tape unspools.
  The mirror beat at 136.5 is scored SILENT.
  ─────────────────────────────────────────────────────────────
  ACT I — a growing church
     0.5  Pastor Ray enters (white limbo)
     0.8  TITLE "This is Pastor Ray."
     3.4  congregation dots bloom · "His church keeps growing."
     6.8  "New names every week — and every one needs looking after."
  ACT II — meet Planning Center
    10.4  Planning Center enters right (paper wisps); pastor slides left
    11.2  TITLE "Meet Planning Center."
    13.8  "Genuinely the nicest guy in church software." (beam + sparkle)
    17.0  Ray asks: "Can you keep track of everybody?"
    19.2  PCO: "All two hundred? Free — People is always free."  ← credit, on camera
    22.4  TITLE "The People database costs nothing. Truly."
  ACT III — THE RUN (the escalation ticks)
    25.8  GOOD NEWS 1 — "Fifty new volunteers just signed up!"
    30.3  🔔 RING 1 — SERVICES · scales with your team (register 1 rises)
    33.7  GOOD NEWS 2 — "The kids wing is packed!"
    38.2  🔔 RING 2 — CHECK-INS · scales with check-ins
    41.6  GOOD NEWS 3 — "Summer camp just sold out!"
    46.1  🔔 RING 3 — REGISTRATIONS · scales with attendees
    49.5  GOOD NEWS 4 — "And giving is up!"
    54.0  🔔 RING 4 — GIVING · per transaction
    57.4  stingers — "Twelve new small groups—" (PCO steps back)
    58.6  🔔 RING 5 — GROUPS
    60.6  🔔 RING 6 — CALENDAR
    62.6  🔔 RING 7 — MUSIC STAND
    63.6  🔔🔔 SALVO — all seven ring staggered; PCO conducts; tapes spool
    63.9  TITLE "“Pay as you grow,” they call it."
    66.9  THESIS "He genuinely cheers. And genuinely charges."
  CREDIT
    70.3  "Now — fair is fair." (registers dim)
    72.6  chips: People free · Church Center free · Publishing Essential free ·
          Giving per transaction  +  "Some of it really is free."
  TURN
    76.9  PCO goodbye: "Congrats again on ALL that growth!" (wave)
    79.7  register parade exits right, PCO leads
    81.6  GLAD enters · warm wash · TITLE "This is GLAD."
    84.4  "Storing them is free."
    87.2  "It’s everything you’d actually do with them that costs."
  ANSWER
    90.8  one-plan card in · "GLAD is one plan. One bill."
    94.0  amber checks pop · "Every module already in it."
    97.4  honesty beat · "Sized by your congregation — the only number that moves."
          (Starter 50 · Grow 150 · Church 500 · Church Plus 2000 underlined)
  PAYOFF — one Sunday, three moments
   101.8  "Here’s what Sunday feels like now."
   104.4  SET 1 — sanctuary · live transcription
   105.2  captions type, line 1 · 108.6 line 2 ("…grace isn’t something you chase. It finds you.")
   114.0  SET 2 — annotate
   115.6  stroke draws on tablet AND sanctuary screen simultaneously (amber dot travels)
   118.4  second stroke (underline)
   123.6  SET 3 — bulletin builder
   125.2  bulletin assembles from the service plan
   128.8  PDF badge stamps
  MIRROR — the ring that never comes
   133.6  Ray + GLAD return (white limbo)
   134.3  GOOD NEWS 5 — "Another volunteer just signed up!" (Ray braces for the ding)
   136.5  ghost register peeks… and sinks. SILENCE — no ring. (score: nothing)
   138.1  GLAD's only spoken line: "Your tenth volunteer costs what your first did: nothing."
   141.4  relief — exhale, GLAD bounce
   141.7  "The whole team, on every plan — even free Starter."
  OUTRO — let the plane land
   145.2  congregation blooms back around Ray + GLAD (warm wash, no registers anywhere)
   145.4  TITLE "His church keeps growing." (Act I callback)
   148.8  TITLE "Now that’s just good news." (GLAD bounce)
   152.4  actors + congregation fade out, warm wash dims
  PUNCH CARD
   153.2  END CARD builds slowly — mark → GLAD → by-line → rule → tag
          "Nobody should get a bill for saying yes." → fair-is-fair fine print
   157.0  replay affordance
  ─────────────────────────────────────────────────────────────
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<title>GLAD — “Planning Center · Good News” · 158s spot</title>
<style>
  /* ============ tokens ============ */
  :root{
    --amber1:#F59E0B;
    --amber2:#EA580C;
    --ink:#0F172A;
    --ink2:#334155;
    --slate:#475569;
    --mut:#64748B;
    --faint:#94A3B8;
    --line:#E2E8F0;
    --cloud:#EEF2F7;
    --stone:#9DAABB;
    --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 acts */
  #warm{position:absolute;inset:0;opacity:0;transition:opacity 2s var(--ease);pointer-events:none;
    background:radial-gradient(1250px 900px at 62% 70%, rgba(245,158,11,.10), rgba(245,158,11,0) 62%);}
  #warm.on{opacity:1}

  /* ============ kinetic type ============ */
  #kt{
    position:absolute;top:96px;left:0;right:0;text-align:center;padding:0 170px;
    color:var(--ink);letter-spacing:-.025em;line-height:1.12;pointer-events:none;z-index:60;
    transition:opacity .55s var(--ease), transform .55s var(--ease);
  }
  #kt.xl{font-size:92px;font-weight:800}
  #kt.lg{font-size:68px;font-weight:750}
  #kt.md{font-size:52px;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}
  .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)}
  #pastorWrap.in .shadow,#gladWrap.in .shadow,#pcoWrap.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)}}

  /* ============ Pastor Ray ============ */
  #pastorWrap{left:830px;top:450px;width:260px;height:430px;
    transition:opacity 1s var(--ease), transform 1.25s var(--ease)}
  #stage.two #pastorWrap{transform:translateX(-700px)}
  #pastorWrap .ent{transform:translateY(46px) scale(.92)}
  #pastorWrap.in .ent{opacity:1;transform:none}
  #pastorWrap .shadow{width:230px;height:34px}
  #pastorWrap.bye{opacity:0;transform:translateX(-700px) translateY(24px)}

  #pastor .armR{transform-box:fill-box;transform-origin:50% 9%;transition:transform .7s var(--spring)}
  #pastor.ask .armR{transform:rotate(-80deg)}

  /* moods — swap face groups */
  #pastor .m-smile,#pastor .m-flat,#pastor .m-grim,#pastor .m-big,#pastor .eyesClosed,#pastor .browsW,
  #pastor .sweat,#pastor .puff{opacity:0}
  #pastor[data-mood="hopeful"]   .m-smile{opacity:1}
  #pastor[data-mood="delighted"] .m-big{opacity:1}
  #pastor[data-mood="stretched"] .m-flat{opacity:1}
  #pastor[data-mood="stretched"] .sweat{opacity:1;animation:drip 1.9s ease-in .25s 2}
  #pastor[data-mood="stretched"] .torsoG{transform:translateY(5px) scaleY(.985)}
  #pastor[data-mood="worried"]   .m-grim{opacity:1}
  #pastor[data-mood="worried"]   .browsW{opacity:1}
  #pastor[data-mood="worried"]   .brows{opacity:0}
  #pastor[data-mood="worried"]   .sweat{opacity:1;animation:drip 2.1s ease-in .4s 2}
  #pastor[data-mood="braced"]    .m-grim{opacity:1}
  #pastor[data-mood="braced"]    .browsW{opacity:1}
  #pastor[data-mood="braced"]    .brows{opacity:0}
  #pastor[data-mood="braced"]    .eyes{opacity:0}
  #pastor[data-mood="braced"]    .eyesClosed{opacity:1}
  #pastor[data-mood="braced"]    .torsoG{transform:translateY(9px) scaleY(.965)}
  #pastor[data-mood="relieved"]  .m-big{opacity:1}
  #pastor[data-mood="relieved"]  .eyes{opacity:0}
  #pastor[data-mood="relieved"]  .eyesClosed{opacity:1}
  #pastor.slump .torsoG{transform:translateY(9px) scaleY(.972)}
  #pastor .torsoG{transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s var(--ease)}
  #pastor .m-smile,#pastor .m-flat,#pastor .m-grim,#pastor .m-big{transition:opacity .35s ease}
  @keyframes drip{0%{transform:translateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(30px);opacity:0}}
  #pastor.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)}}

  /* ============ Planning Center — a tidy desk-calendar fellow ============ */
  #pcoWrap{left:1520px;top:470px;width:340px;height:400px;
    transition:opacity 1s var(--ease), transform 1.1s var(--ease)}
  #pcoWrap .ent{transform:translateX(480px)}
  #pcoWrap.in .ent{opacity:1;transform:none;transition-duration:1.4s}
  #pcoWrap .shadow{width:250px;height:32px}
  #pcoWrap .bob{animation:pcobob 3.8s ease-in-out infinite}
  @keyframes pcobob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  #pcoWrap.back{transform:translate(-330px,-215px) scale(.84)}
  #pcoWrap.back .shadow{opacity:.25;width:170px}
  #pcoWrap.bye{opacity:0;transform:translate(430px,-96px) scale(.92)}

  #pco .m-beam,#pco .lids,#pco .sparks,#pco .m-yay{opacity:0}
  #pco .m-smile,#pco .m-yay{transition:opacity .3s}
  #pcoWrap.beam #pco .m-smile{opacity:0}
  #pcoWrap.beam #pco .m-yay{opacity:1}
  #pcoWrap.beam #pco .eyes{opacity:0}
  #pcoWrap.beam #pco .m-beam{opacity:1}
  #pcoWrap.beam #pco .lids{opacity:1}
  #pcoWrap.beam #pco .sparks{opacity:1}
  #pcoWrap.beam #pco .spark{animation:twinkle 1.5s ease-in-out infinite}
  #pco .spark{transform-box:fill-box;transform-origin:center}
  #pco .spark:nth-child(2){animation-delay:.4s!important}
  #pco .spark:nth-child(3){animation-delay:.8s!important}
  @keyframes twinkle{0%,100%{transform:scale(.55);opacity:.4}50%{transform:scale(1.15);opacity:1}}

  #pco .armL,#pco .armR{transform-box:fill-box;transition:transform .8s var(--spring)}
  #pco .armL{transform-origin:88% 10%}
  #pco .armR{transform-origin:12% 10%}
  #pcoWrap.conduct #pco .armL{transform:rotate(118deg);animation:condL 1.1s ease-in-out .8s infinite alternate}
  #pcoWrap.conduct #pco .armR{transform:rotate(-118deg);animation:condR 1.1s ease-in-out .8s infinite alternate}
  @keyframes condL{from{transform:rotate(118deg)}to{transform:rotate(96deg)}}
  @keyframes condR{from{transform:rotate(-118deg)}to{transform:rotate(-96deg)}}
  #pcoWrap.wave #pco .armR{animation:pcowave 1s ease-in-out 2}
  @keyframes pcowave{0%,100%{transform:rotate(0)}30%{transform:rotate(-120deg)}55%{transform:rotate(-95deg)}80%{transform:rotate(-118deg)}}

  /* grayscale confetti — he celebrates in neutrals */
  #pcoWrap .conf{position:absolute;left:50%;top:60px;width:0;height:0;pointer-events:none}
  #pcoWrap .conf i{position:absolute;left:0;top:0;width:13px;height:13px;opacity:0;border-radius:3px}
  #pcoWrap .conf i:nth-child(3n){border-radius:50%}
  #pcoWrap.cheer .conf i{animation:confFall 1.5s ease-out forwards;animation-delay:calc(var(--ci)*.05s)}
  @keyframes confFall{0%{opacity:0;transform:translate(0,-10px) rotate(0)}14%{opacity:1}
    100%{opacity:0;transform:translate(var(--cx), var(--cy)) rotate(var(--cr))}}

  /* entrance streaks (tidy paper wisps) */
  #streaks span{position:absolute;height:5px;border-radius:3px;opacity:0;
    background:linear-gradient(90deg, rgba(215,222,232,0), #D7DEE8 40%, rgba(215,222,232,0));}
  #streaks.go span{animation:streak 1.25s var(--ease) forwards}
  #streaks span:nth-child(1){left:1150px;top:560px;width:420px}
  #streaks span:nth-child(2){left:1250px;top:640px;width:520px;animation-delay:.12s!important}
  #streaks span:nth-child(3){left:1180px;top:706px;width:330px;animation-delay:.22s!important}
  @keyframes streak{0%{opacity:0;transform:translateX(560px)}30%{opacity:.9}100%{opacity:0;transform:translateX(-160px)}}

  /* ============ the registers ============ */
  #regs{position:absolute;inset:0;pointer-events:none}
  .reg{position:absolute;bottom:132px;width:186px;height:330px;opacity:0;
    transform:translateY(360px);
    transition:transform .9s var(--spring), opacity .55s ease, filter .6s ease}
  .reg.up{opacity:1;transform:none}
  #regs.dim .reg{opacity:.5}
  #regs.parade .reg{opacity:1;transform:translateX(1560px) rotate(2.5deg);
    transition:transform 1.5s cubic-bezier(.5,.05,.75,.5) var(--pd), opacity 1.4s ease var(--pd)}
  .reg .rin{position:relative;width:100%;height:100%}
  .reg.ring .rin{animation:jig .55s ease}
  #regs.salvo .reg .rin{animation:jig .6s ease var(--sd)}
  @keyframes jig{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.8deg)}
    50%{transform:rotate(1.6deg) translateY(-3px)}75%{transform:rotate(-1deg)}}

  .reg .flag{position:absolute;left:4px;top:0;width:178px;background:#fff;border:2px solid #CBD5E1;
    border-radius:14px;padding:11px 6px 10px;text-align:center;box-shadow:0 8px 20px rgba(15,23,42,.06);z-index:4}
  .reg .flag b{display:block;font-size:19px;font-weight:800;letter-spacing:.05em;color:var(--ink2)}
  .reg .flag i{display:block;font-style:normal;font-size:15px;font-weight:600;color:var(--mut);
    margin-top:3px;line-height:1.18}
  .reg .stem{position:absolute;left:50%;top:84px;width:10px;height:32px;margin-left:-5px;
    background:#94A3B8;border-radius:4px}
  .reg .rbody{position:absolute;left:0;top:112px;width:186px;height:150px;background:#F1F5F9;
    border:2.5px solid var(--mut);border-radius:16px}
  .reg .keys{position:absolute;left:16px;top:20px;display:grid;grid-template-columns:repeat(4,16px);
    gap:9px}
  .reg .keys i{width:16px;height:16px;border-radius:5px;background:#CBD5E1}
  .reg .lever{position:absolute;right:14px;top:22px;width:12px;height:52px;border-radius:6px;background:#94A3B8}
  .reg .lever::after{content:'';position:absolute;left:-3px;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--mut)}
  .reg .drawer{position:absolute;left:6px;bottom:-24px;width:170px;height:30px;background:#E2E8F0;
    border:2.5px solid var(--mut);border-radius:9px}
  .reg .drawer::after{content:'$';position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);
    font-size:19px;font-weight:800;color:var(--mut);line-height:1}
  .reg.ring .drawer{animation:drawerPop .95s ease}
  #regs.salvo .reg .drawer{animation:drawerPop 1s ease var(--sd)}
  @keyframes drawerPop{0%,100%{transform:none}28%{transform:translateY(15px)}70%{transform:translateY(15px)}}
  /* money iconography — symbols only, never a digit */
  .reg .slot{position:absolute;left:28px;top:104px;width:44px;height:9px;border-radius:5px;background:var(--mut);z-index:2}
  .reg .coinbig{position:absolute;left:50%;top:-48px;width:56px;height:56px;margin-left:-28px;border-radius:50%;
    background:#fff;border:3.5px solid var(--mut);color:var(--slate);font-size:32px;font-weight:800;
    display:flex;align-items:center;justify-content:center;opacity:0;z-index:5;font-family:var(--font)}
  .reg.ring .coinbig{animation:coinPunch 1.1s ease}
  #regs.salvo .reg .coinbig{animation:coinPunch 1.15s ease var(--sd)}
  @keyframes coinPunch{0%{opacity:0;transform:scale(2.3)}18%{opacity:1;transform:scale(1)}
    72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9) translateY(-10px)}}
  .reg .coin{position:absolute;left:38px;top:44px;width:20px;height:20px;border-radius:50%;
    background:#F1F5F9;border:3px solid #94A3B8;opacity:0;z-index:1}
  .reg .coin.c2{left:58px;animation-delay:.14s!important}
  .reg.ring .coin{animation:coinDrop .85s ease-in}
  #regs.salvo .reg .coin{animation:coinDrop .9s ease-in var(--sd)}
  @keyframes coinDrop{0%{opacity:0;transform:translateY(-50px)}22%{opacity:1}
    85%{opacity:1;transform:translateY(52px)}100%{opacity:0;transform:translateY(58px)}}
  .reg .tape{position:absolute;right:34px;top:126px;width:40px;height:14px;background:#fff;
    border:2px solid #CBD5E1;border-top:none;border-radius:0 0 6px 6px;z-index:3;
    background-image:repeating-linear-gradient(180deg,#D7DEE8 0 3px,transparent 3px 12px);
    transition:height .6s var(--ease)}
  .reg .star{position:absolute;left:50%;top:-40px;width:76px;height:76px;margin-left:-38px;opacity:0;
    transform-origin:center}
  .reg.ring .star{animation:dingPop .85s ease}
  #regs.salvo .reg .star{animation:dingPop .9s ease var(--sd)}
  @keyframes dingPop{0%{opacity:0;transform:scale(.35)}25%{opacity:1}100%{opacity:0;transform:scale(1.55)}}
  .reg .star line{stroke:#94A3B8;stroke-width:5;stroke-linecap:round}
  .reg .rshad{position:absolute;left:50%;bottom:-30px;width:170px;height:26px;transform:translateX(-50%);
    border-radius:50%;background:radial-gradient(50% 50% at 50% 50%, rgba(15,23,42,.16), rgba(15,23,42,0) 72%);
    opacity:0;transition:opacity .8s ease}
  .reg.up .rshad{opacity:1}

  /* the ghost register — the ring that never comes */
  #ghost{position:absolute;left:640px;bottom:150px;width:160px;height:150px;opacity:0;pointer-events:none}
  #ghost .gf{position:absolute;left:14px;top:0;width:132px;height:52px;border:3px dashed #CBD5E1;border-radius:12px}
  #ghost .gb{position:absolute;left:0;top:66px;width:160px;height:84px;border:3px dashed #CBD5E1;border-radius:14px}
  #ghost.peek{animation:ghostPeek 2.6s var(--ease) forwards}
  @keyframes ghostPeek{0%{opacity:0;transform:translateY(300px)}
    30%{opacity:.9;transform:translateY(150px)}58%{opacity:.9;transform:translateY(150px)}
    100%{opacity:0;transform:translateY(300px)}}

  /* ============ GLAD ============ */
  #gladWrap{left:1130px;top:520px;width:260px;height:360px;
    transition:opacity 1s var(--ease), transform 1s var(--ease)}
  #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)}

  /* ============ growing families ============ */
  #fam{position:absolute;left:600px;top:470px;width:720px;height:430px;pointer-events:none}
  #fam .dot{position:absolute;opacity:0;transform:scale(0);transition:transform .8s var(--spring), opacity .5s ease;
    transition-delay:calc(var(--i)*.11s)}
  #fam.in .dot{opacity:1;transform:scale(1)}
  #fam.out .dot{opacity:0;transform:scale(.6);transition:opacity .5s ease, transform .5s ease;transition-delay:0s}
  #fam .dot svg{display:block}

  /* ============ speech bubbles ============ */
  .bub{
    position:absolute;max-width:590px;width:max-content;opacity:0;z-index:55;
    transform:translateY(16px) scale(.92);transform-origin:50% 100%;
    transition:opacity .4s ease, transform .55s var(--spring);
    background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:19px 28px;
    box-shadow:0 14px 36px rgba(15,23,42,.09);font-size:30px;font-weight:600;color:var(--ink2);
  }
  .bub::after{
    content:'';position:absolute;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);
  }
  .bub.show{opacity:1;transform:none}
  #bubP{left:120px;top:302px}
  #bubP::after{left:16%}
  #bubC{left:1900px;top:228px;transform:translateX(-100%) translateY(16px) scale(.92)}
  #bubC.show{transform:translateX(-100%)}
  #bubC::after{left:72%}
  #bubG{left:960px;top:320px}
  #bubG::after{left:58%}

  /* ============ chips (credit beat) ============ */
  .chip{
    display:inline-flex;align-items:center;gap:13px;background:#fff;border:1.5px solid var(--line);
    border-radius:999px;padding:16px 27px;font-size:27px;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}
  #credit{position:absolute;top:236px;left:60px;width:1160px;display:flex;flex-direction:column;
    align-items:center;gap:20px;pointer-events:none}
  #credit .crow{display:flex;gap:22px}
  #credit .chip{opacity:0;transform:translateY(28px) scale(.9);
    transition:transform .8s var(--spring), opacity .5s ease;transition-delay:var(--cd,0s)}
  #credit.in .chip{opacity:1;transform:none}
  #credit.out .chip{opacity:0;transform:translateY(-20px);transition:opacity .45s ease, transform .45s ease;transition-delay:0s!important}

  /* ============ the one-plan card ============ */
  #planCard{position:absolute;left:400px;top:292px;width:740px;opacity:0;pointer-events:none;
    transform:translateY(38px) scale(.96);transition:opacity .7s var(--ease), transform .8s var(--spring);
    background:#fff;border:1.5px solid #F3D9A7;border-radius:30px;padding:34px 40px 30px;
    box-shadow:0 30px 80px rgba(234,88,12,.13), 0 0 60px rgba(245,158,11,.10), 0 2px 8px rgba(15,23,42,.05)}
  #planCard.in{opacity:1;transform:none}
  #planCard.outing{opacity:0;transform:translateY(-24px);transition:opacity .6s ease, transform .6s ease}
  #planCard .head{display:flex;align-items:center;gap:18px;padding-bottom:18px;border-bottom:1.5px solid #F6EFE2}
  #planCard .head svg{flex:none}
  #planCard .head b{font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  #planCard .mods{display:flex;flex-wrap:wrap;gap:13px;padding:22px 0 6px;justify-content:center}
  #planCard .mchip{position:relative;display:inline-flex;align-items:center;background:#fff;
    border:1.5px solid var(--line);border-radius:999px;padding:11px 22px;font-size:24px;font-weight:650;
    color:var(--ink2);opacity:0;transform:translate(var(--mx,0), var(--my,20px)) scale(.85);
    transition:transform .7s var(--spring), opacity .45s ease;transition-delay:calc(var(--mi)*.06s)}
  #planCard.in .mchip{opacity:1;transform:none}
  #planCard .ck{position:absolute;right:-11px;top:-11px;width:32px;height:32px;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:calc(var(--mi)*.1s)}
  #planCard.checked .ck{transform:scale(1)}
  #planCard .ck svg{stroke:#fff;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
  #planCard .foot{margin-top:16px;padding-top:16px;border-top:1.5px solid #F6EFE2;text-align:center}
  #planCard .foot em{display:block;font-style:normal;font-size:21px;font-weight:600;color:var(--mut);margin-bottom:8px}
  #planCard .sizes{position:relative;display:inline-block;font-size:23px;font-weight:700;color:var(--ink2);
    letter-spacing:.01em;padding-bottom:7px;white-space:nowrap}
  #planCard .sizes .ul{position:absolute;left:0;bottom:0;height:4px;width:100%;border-radius:2px;
    background:linear-gradient(90deg, var(--amber1), var(--amber2));
    transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
  #planCard.sized .sizes .ul{transform:scaleX(1)}

  /* ============ payoff sets ============ */
  .set{position:absolute;inset:0;opacity:0;pointer-events:none;
    transform:translateY(26px) scale(.985);
    transition:opacity .8s var(--ease), transform .8s var(--ease)}
  .set.in{opacity:1;transform:none}
  .set.outing{opacity:0;transform:translateY(-22px)}

  /* --- set A · live transcription --- */
  #setA .screen{position:absolute;left:460px;top:238px;width:1000px;height:404px;background:#1E293B;
    border-radius:26px;box-shadow:0 34px 90px rgba(15,23,42,.25)}
  #setA .live{position:absolute;left:34px;top:28px;display:flex;align-items:center;gap:12px;
    font-size:22px;font-weight:700;letter-spacing:.09em;color:#E2E8F0}
  #setA .live i{width:16px;height:16px;border-radius:50%;background:var(--amber1);
    box-shadow:0 0 18px rgba(245,158,11,.8)}
  #setA.in .live i{animation:livepulse 1.6s ease-in-out infinite}
  @keyframes livepulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}}
  #setA .sermon{position:absolute;right:34px;top:28px;font-size:21px;font-weight:600;color:#94A3B8}
  #setA .cap{position:absolute;left:70px;right:70px;text-align:center;color:#F8FAFC;
    font-weight:650;letter-spacing:-.01em}
  #setA .cap1{top:130px;font-size:47px}
  #setA .cap2{top:236px;font-size:47px}
  #setA .cap .cw{display:inline-block;opacity:0;transform:translateY(14px);
    transition:opacity .45s ease, transform .45s var(--ease);transition-delay:calc(var(--i)*.22s)}
  #setA .cap.on .cw{opacity:1;transform:none}
  #setA .stagefloor{position:absolute;left:360px;right:360px;top:700px;height:4px;border-radius:2px;background:var(--line)}
  #setA .preacher{position:absolute;left:920px;top:560px}
  #setA .pew{position:absolute;height:34px;border-radius:12px;background:var(--cloud)}
  #setA .head{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--stone)}

  /* --- set B · annotate --- */
  #setB .panelT{position:absolute;left:320px;top:318px;width:560px;height:400px;background:#0F172A;
    border-radius:30px;padding:22px;box-shadow:0 26px 70px rgba(15,23,42,.22)}
  #setB .panelS{position:absolute;left:1040px;top:266px;width:620px;height:452px;background:#1E293B;
    border-radius:22px;padding:16px;box-shadow:0 34px 90px rgba(15,23,42,.25)}
  #setB .face{position:relative;width:100%;height:100%;background:#fff;border-radius:14px;overflow:hidden}
  #setB .slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
  #setB .slide b{font-size:64px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
  #setB .panelS .slide b{font-size:72px}
  #setB .slide span{font-size:30px;font-weight:600;color:var(--mut)}
  #setB .panelS .slide span{font-size:34px}
  #setB .slide i{position:absolute;left:26px;bottom:20px;font-style:normal;font-size:20px;font-weight:600;color:var(--stone)}
  #setB .lab{position:absolute;left:0;width:100%;text-align:center;font-size:24px;font-weight:600;color:var(--stone)}
  #setB .labT{top:738px;left:320px;width:560px}
  #setB .labS{top:738px;left:1040px;width:620px}
  #setB svg.ann{position:absolute;inset:0;width:100%;height:100%}
  #setB .st1,#setB .st2{fill:none;stroke:var(--amber1);stroke-width:7;stroke-linecap:round;
    stroke-dasharray:100;stroke-dashoffset:100}
  #setB .panelS .st1,#setB .panelS .st2{stroke-width:8}
  #setB.drawn .st1{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease)}
  #setB.drawn2 .st2{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease)}
  #setB .pen{position:absolute;left:700px;top:428px;opacity:0;transition:opacity .5s ease;transform:rotate(38deg)}
  #setB.in .pen{opacity:1}
  #setB.drawn .pen{animation:penwig 1.5s ease}
  #setB.drawn2 .pen{opacity:0;transition:opacity .7s ease 1.1s}
  @keyframes penwig{0%,100%{transform:rotate(38deg)}30%{transform:rotate(33deg) translate(-14px,8px)}
    65%{transform:rotate(42deg) translate(10px,-4px)}}
  #setB .link{position:absolute;left:880px;top:360px;width:170px;height:60px}
  #setB .link path{fill:none;stroke:var(--amber1);stroke-width:4;stroke-linecap:round;
    stroke-dasharray:2 14;opacity:.55}
  #setB .bdot{position:absolute;left:886px;top:404px;width:16px;height:16px;opacity:0}
  #setB .bdot i{display:block;width:16px;height:16px;border-radius:50%;
    background:radial-gradient(circle at 34% 28%, #FDE68A 0%, var(--amber1) 46%, var(--amber2) 92%);
    box-shadow:0 0 16px rgba(245,158,11,.7)}
  #setB.drawn .bdot{animation:bdX 1.15s cubic-bezier(.5,.1,.5,.9) .15s forwards}
  #setB.drawn .bdot i{animation:bdY 1.15s cubic-bezier(.3,-.2,.6,1) .15s forwards}
  @keyframes bdX{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(158px)}}
  @keyframes bdY{0%{transform:translateY(0)}45%{transform:translateY(-52px)}100%{transform:translateY(-6px)}}

  /* --- set C · bulletin builder --- */
  #setC .plan{position:absolute;left:330px;top:280px;width:500px;background:#fff;border:1.5px solid var(--line);
    border-radius:24px;padding:30px 34px;box-shadow:0 24px 60px rgba(15,23,42,.10)}
  #setC .plan .kick{font-size:17px;font-weight:800;letter-spacing:.18em;color:var(--stone);margin-bottom:18px}
  #setC .plan .row{display:flex;align-items:baseline;gap:14px;padding:10px 0;font-size:25px;font-weight:600;color:var(--ink2)}
  #setC .plan .row b{flex:none;font-size:20px;font-weight:700;color:var(--stone);width:84px}
  #setC .chev{position:absolute;top:472px;opacity:0}
  #setC .chev svg{stroke:var(--amber1);stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round}
  #setC.built .chev{animation:chevGo 1.6s ease infinite;animation-delay:var(--cd)}
  @keyframes chevGo{0%{opacity:0;transform:translateX(-8px)}35%{opacity:1}70%,100%{opacity:0;transform:translateX(10px)}}
  #setC .page{position:absolute;left:1020px;top:206px;width:560px;height:610px;background:#fff;
    border:1.5px solid var(--line);border-radius:18px;padding:34px 38px;
    box-shadow:0 34px 90px rgba(15,23,42,.14)}
  #setC .bb{opacity:0;transform:translateY(24px);transition:transform .7s var(--spring), opacity .5s ease;
    transition-delay:var(--bd)}
  #setC.built .bb{opacity:1;transform:none}
  #setC .mast b{display:block;font-size:33px;font-weight:800;letter-spacing:.01em;color:var(--ink)}
  #setC .mast span{display:block;margin-top:5px;font-size:20px;font-weight:600;color:var(--mut)}
  #setC .mast .mrule{margin-top:16px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--amber1),var(--amber2))}
  #setC .serm{margin-top:20px}
  #setC .serm b{font-size:26px;font-weight:750;color:var(--ink)}
  #setC .serm span{display:block;margin-top:4px;font-size:19px;font-weight:600;color:var(--mut)}
  #setC .ord{margin-top:18px;border-top:1.5px solid var(--line);padding-top:14px}
  #setC .ord .r{display:flex;gap:12px;padding:6px 0;font-size:20px;font-weight:600;color:var(--ink2)}
  #setC .ord .r b{flex:none;width:64px;font-size:17px;font-weight:700;color:var(--stone)}
  #setC .tiles{margin-top:18px;display:flex;gap:14px}
  #setC .tile{flex:1;background:var(--cloud);border-radius:12px;padding:13px 15px;font-size:18px;font-weight:650;color:var(--ink2)}
  #setC .tile span{display:block;margin-top:3px;font-size:15.5px;font-weight:600;color:var(--mut)}
  #setC .pdfB{position:absolute;right:-26px;top:-24px;display:flex;align-items:center;gap:9px;
    background:linear-gradient(135deg, var(--amber1), var(--amber2));color:#fff;
    font-size:25px;font-weight:800;letter-spacing:.05em;border-radius:15px;padding:12px 21px;
    box-shadow:0 14px 34px rgba(234,88,12,.4);transform:scale(0) rotate(-8deg);
    transition:transform .55s var(--spring)}
  #setC.pdf .pdfB{transform:scale(1) rotate(-8deg)}
  #setC .pdfB svg{stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
  #setC .ready{position:absolute;left:1020px;top:838px;width:560px;text-align:center;
    font-size:22px;font-weight:600;color:var(--stone);opacity:0;transition:opacity .8s ease}
  #setC.pdf .ready{opacity:1}

  /* ============ 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:70}
  #end .mark{width:164px;height:164px;opacity:0;transform:scale(.5);transition:transform .9s var(--spring), opacity .5s ease}
  #end .word{margin-top:30px;font-size:126px;font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1;
    opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease);transition-delay:.4s}
  #end .by{margin-top:15px;font-size:25px;font-weight:650;letter-spacing:.26em;color:var(--faint);text-transform:uppercase;
    opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease), transform .9s var(--ease);transition-delay:.7s}
  #end .rule{margin-top:40px;height:3px;width:0;border-radius:2px;
    background:linear-gradient(90deg, var(--amber1), var(--amber2));
    transition:width 1.1s var(--ease);transition-delay:1.05s}
  #end .tag{margin-top:34px;font-size:47px;font-weight:700;letter-spacing:-.015em;color:var(--ink);
    opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease), transform 1s var(--ease);transition-delay:1.5s}
  #end .tag em{font-style:normal;background:linear-gradient(110deg, var(--amber1), var(--amber2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  #end .fine{margin-top:44px;max-width:1240px;font-size:20px;font-weight:500;color:#A6AEBB;line-height:1.4;
    opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease), transform 1s var(--ease);transition-delay:1.95s}
  #end.in .mark{opacity:1;transform:scale(1)}
  #end.in .word,#end.in .by,#end.in .tag,#end.in .fine{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;
  }
  #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">
  <div id="stage">
    <div id="warm"></div>

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

    <!-- growing congregation -->
    <div id="fam" aria-hidden="true">
      <div class="dot" style="--i:0;left:96px;top:150px"><svg width="56" height="56" viewBox="0 0 54 54"><circle cx="27" cy="27" r="27" fill="#EEF2F7"/><circle cx="27" cy="20" r="9" fill="#9DAABB"/><path d="M11 45a16 16 0 0 1 32 0z" fill="#9DAABB"/></svg></div>
      <div class="dot" style="--i:1;left:540px;top:70px"><svg width="48" height="48" viewBox="0 0 54 54"><circle cx="27" cy="27" r="27" fill="#EEF2F7"/><circle cx="27" cy="20" r="9" fill="#9DAABB"/><path d="M11 45a16 16 0 0 1 32 0z" fill="#9DAABB"/></svg></div>
      <div class="dot" style="--i:2;left:30px;top:308px"><svg width="62" height="62" viewBox="0 0 54 54"><circle cx="27" cy="27" r="27" fill="#EEF2F7"/><circle cx="27" cy="20" r="9" fill="#9DAABB"/><path d="M11 45a16 16 0 0 1 32 0z" fill="#9DAABB"/></svg></div>
      <div class="dot" style="--i:3;left:606px;top:212px"><svg width="52" height="52" viewBox="0 0 54 54"><circle cx="27" cy="27" r="27" fill="#EEF2F7"/><circle cx="27" cy="20" r="9" fill="#9DAABB"/><path d="M11 45a16 16 0 0 1 32 0z" fill="#9DAABB"/></svg></div>
      <div class="dot" style="--i:4;left:196px;top:26px"><svg width="46" height="46" viewBox="0 0 54 54"><circle cx="27" cy="27" r="27" fill="#EEF2F7"/><circle cx="27" cy="20" r="9" fill="#9DAABB"/><path d="M11 45a16 16 0 0 1 32 0z" fill="#9DAABB"/></svg></div>
      <div class="dot" style="--i:5;left:452px;top:0px"><svg width="50" height="50" viewBox="0 0 54 54"><circle cx="27" cy="27" r="27" fill="#EEF2F7"/><circle cx="27" cy="20" r="9" fill="#9DAABB"/><path d="M11 45a16 16 0 0 1 32 0z" fill="#9DAABB"/></svg></div>
      <div class="dot" style="--i:6;left:118px;top:372px"><svg width="54" height="54" viewBox="0 0 54 54"><circle cx="27" cy="27" r="27" fill="#EEF2F7"/><circle cx="27" cy="20" r="9" fill="#9DAABB"/><path d="M11 45a16 16 0 0 1 32 0z" fill="#9DAABB"/></svg></div>
      <div class="dot" style="--i:7;left:634px;top:340px"><svg width="58" height="58" viewBox="0 0 54 54"><circle cx="27" cy="27" r="27" fill="#EEF2F7"/><circle cx="27" cy="20" r="9" fill="#9DAABB"/><path d="M11 45a16 16 0 0 1 32 0z" fill="#9DAABB"/></svg></div>
    </div>

    <!-- the registers -->
    <div id="regs" aria-hidden="true">
      <div class="reg" id="r1" style="left:430px;--sd:.0s;--pd:.30s">
        <div class="rin">
          <div class="flag"><b>SERVICES</b><i>scales with your team</i></div>
          <div class="stem"></div>
          <div class="tape"></div>
          <div class="rbody">
            <div class="keys"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
            <div class="lever"></div>
            <div class="drawer"></div>
          </div>
          <div class="slot"></div>
          <div class="coinbig">$</div>
          <div class="coin c1"></div><div class="coin c2"></div>
          <svg class="star" viewBox="0 0 76 76"><line x1="38" y1="6" x2="38" y2="22"/><line x1="12" y1="16" x2="22" y2="28"/><line x1="64" y1="16" x2="54" y2="28"/><line x1="4" y1="44" x2="18" y2="42"/><line x1="72" y1="44" x2="58" y2="42"/></svg>
        </div>
        <div class="rshad"></div>
      </div>
      <div class="reg" id="r2" style="left:628px;--sd:.08s;--pd:.22s">
        <div class="rin">
          <div class="flag"><b>CHECK-INS</b><i>scales with check-ins</i></div>
          <div class="stem"></div>
          <div class="tape"></div>
          <div class="rbody">
            <div class="keys"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
            <div class="lever"></div>
            <div class="drawer"></div>
          </div>
          <div class="slot"></div>
          <div class="coinbig">$</div>
          <div class="coin c1"></div><div class="coin c2"></div>
          <svg class="star" viewBox="0 0 76 76"><line x1="38" y1="6" x2="38" y2="22"/><line x1="12" y1="16" x2="22" y2="28"/><line x1="64" y1="16" x2="54" y2="28"/><line x1="4" y1="44" x2="18" y2="42"/><line x1="72" y1="44" x2="58" y2="42"/></svg>
        </div>
        <div class="rshad"></div>
      </div>
      <div class="reg" id="r3" style="left:826px;--sd:.16s;--pd:.14s">
        <div class="rin">
          <div class="flag"><b>REGISTRATIONS</b><i>scales with attendees</i></div>
          <div class="stem"></div>
          <div class="tape"></div>
          <div class="rbody">
            <div class="keys"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
            <div class="lever"></div>
            <div class="drawer"></div>
          </div>
          <div class="slot"></div>
          <div class="coinbig">$</div>
          <div class="coin c1"></div><div class="coin c2"></div>
          <svg class="star" viewBox="0 0 76 76"><line x1="38" y1="6" x2="38" y2="22"/><line x1="12" y1="16" x2="22" y2="28"/><line x1="64" y1="16" x2="54" y2="28"/><line x1="4" y1="44" x2="18" y2="42"/><line x1="72" y1="44" x2="58" y2="42"/></svg>
        </div>
        <div class="rshad"></div>
      </div>
      <div class="reg" id="r4" style="left:1024px;--sd:.24s;--pd:.06s">
        <div class="rin">
          <div class="flag"><b>GIVING</b><i>per transaction</i></div>
          <div class="stem"></div>
          <div class="tape"></div>
          <div class="rbody">
            <div class="keys"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
            <div class="lever"></div>
            <div class="drawer"></div>
          </div>
          <div class="slot"></div>
          <div class="coinbig">$</div>
          <div class="coin c1"></div><div class="coin c2"></div>
          <svg class="star" viewBox="0 0 76 76"><line x1="38" y1="6" x2="38" y2="22"/><line x1="12" y1="16" x2="22" y2="28"/><line x1="64" y1="16" x2="54" y2="28"/><line x1="4" y1="44" x2="18" y2="42"/><line x1="72" y1="44" x2="58" y2="42"/></svg>
        </div>
        <div class="rshad"></div>
      </div>
      <div class="reg" id="r5" style="left:1222px;--sd:.32s;--pd:.0s">
        <div class="rin">
          <div class="flag"><b>GROUPS</b><i>priced per product</i></div>
          <div class="stem"></div>
          <div class="tape"></div>
          <div class="rbody">
            <div class="keys"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
            <div class="lever"></div>
            <div class="drawer"></div>
          </div>
          <div class="slot"></div>
          <div class="coinbig">$</div>
          <div class="coin c1"></div><div class="coin c2"></div>
          <svg class="star" viewBox="0 0 76 76"><line x1="38" y1="6" x2="38" y2="22"/><line x1="12" y1="16" x2="22" y2="28"/><line x1="64" y1="16" x2="54" y2="28"/><line x1="4" y1="44" x2="18" y2="42"/><line x1="72" y1="44" x2="58" y2="42"/></svg>
        </div>
        <div class="rshad"></div>
      </div>
      <div class="reg" id="r6" style="left:1420px;--sd:.40s;--pd:.10s">
        <div class="rin">
          <div class="flag"><b>CALENDAR</b><i>priced per product</i></div>
          <div class="stem"></div>
          <div class="tape"></div>
          <div class="rbody">
            <div class="keys"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
            <div class="lever"></div>
            <div class="drawer"></div>
          </div>
          <div class="slot"></div>
          <div class="coinbig">$</div>
          <div class="coin c1"></div><div class="coin c2"></div>
          <svg class="star" viewBox="0 0 76 76"><line x1="38" y1="6" x2="38" y2="22"/><line x1="12" y1="16" x2="22" y2="28"/><line x1="64" y1="16" x2="54" y2="28"/><line x1="4" y1="44" x2="18" y2="42"/><line x1="72" y1="44" x2="58" y2="42"/></svg>
        </div>
        <div class="rshad"></div>
      </div>
      <div class="reg" id="r7" style="left:1618px;--sd:.48s;--pd:.18s">
        <div class="rin">
          <div class="flag"><b>MUSIC STAND</b><i>priced per product</i></div>
          <div class="stem"></div>
          <div class="tape"></div>
          <div class="rbody">
            <div class="keys"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
            <div class="lever"></div>
            <div class="drawer"></div>
          </div>
          <div class="slot"></div>
          <div class="coinbig">$</div>
          <div class="coin c1"></div><div class="coin c2"></div>
          <svg class="star" viewBox="0 0 76 76"><line x1="38" y1="6" x2="38" y2="22"/><line x1="12" y1="16" x2="22" y2="28"/><line x1="64" y1="16" x2="54" y2="28"/><line x1="4" y1="44" x2="18" y2="42"/><line x1="72" y1="44" x2="58" y2="42"/></svg>
        </div>
        <div class="rshad"></div>
      </div>
    </div>

    <!-- the ghost register — the ring that never comes -->
    <div id="ghost" aria-hidden="true"><div class="gf"></div><div class="gb"></div></div>

    <!-- Pastor Ray -->
    <div id="pastorWrap" class="actor">
      <div class="ent">
        <svg id="pastor" data-mood="hopeful" width="260" height="430" viewBox="0 0 260 430" aria-label="Pastor Ray">
          <g class="torsoG">
            <!-- legs + shoes -->
            <rect x="100" y="322" width="27" height="86" rx="13" fill="#1E293B"/>
            <rect x="133" y="322" width="27" height="86" rx="13" fill="#1E293B"/>
            <rect x="88"  y="400" width="50" height="17" rx="8" fill="#111827"/>
            <rect x="126" y="400" width="50" height="17" rx="8" fill="#111827"/>
            <!-- arms -->
            <g class="armL">
              <rect x="56" y="212" width="22" height="112" rx="11" fill="#334155"/>
              <circle cx="67" cy="326" r="11" fill="#C68642"/>
            </g>
            <g class="armR">
              <rect x="182" y="212" width="22" height="112" rx="11" fill="#334155"/>
              <circle cx="193" cy="326" r="11" fill="#C68642"/>
            </g>
            <!-- torso + collar -->
            <rect x="78" y="198" width="104" height="148" rx="38" fill="#334155"/>
            <rect x="118" y="172" width="24" height="32" fill="#C68642"/>
            <rect x="112" y="196" width="36" height="17" rx="5" fill="#F8FAFC"/>
          </g>
          <!-- head -->
          <circle cx="130" cy="120" r="62" fill="#C68642"/>
          <path d="M70.7 102 A62 62 0 0 1 189.3 102 L184 96 Q130 66 76 96 Z" fill="#111827"/>
          <path d="M70.7 102 A62 62 0 0 1 189.3 102 Q160 86 130 86 Q100 86 70.7 102" fill="#111827"/>
          <!-- short beard line -->
          <path d="M86 146 Q130 196 174 146" fill="none" stroke="#111827" stroke-width="10" stroke-linecap="round" opacity=".85"/>
          <!-- face -->
          <g class="brows">
            <rect x="96"  y="103" width="21" height="5" rx="2.5" fill="#111827"/>
            <rect x="143" y="103" width="21" height="5" rx="2.5" fill="#111827"/>
          </g>
          <g class="browsW">
            <rect x="96"  y="101" width="21" height="5" rx="2.5" fill="#111827" transform="rotate(-9 106 103)"/>
            <rect x="143" y="101" width="21" height="5" rx="2.5" fill="#111827" transform="rotate(9 154 103)"/>
          </g>
          <!-- glasses -->
          <g fill="none" stroke="#1F2937" stroke-width="4">
            <circle cx="108" cy="126" r="16.5"/>
            <circle cx="152" cy="126" r="16.5"/>
            <path d="M124.5 126 L135.5 126"/>
          </g>
          <g class="eyes">
            <circle cx="108" cy="126" r="6" fill="#0F172A"/>
            <circle cx="152" cy="126" r="6" fill="#0F172A"/>
          </g>
          <g class="eyesClosed" fill="none" stroke="#0F172A" stroke-width="5" stroke-linecap="round">
            <path d="M101 126 Q108 132 115 126"/>
            <path d="M145 126 Q152 132 159 126"/>
          </g>
          <g fill="none" stroke="#0F172A" stroke-width="5" stroke-linecap="round">
            <path class="m-smile" d="M113 152 Q130 165 147 152"/>
            <path class="m-flat"  d="M115 156 L145 156"/>
            <path class="m-grim"  d="M113 161 Q130 150 147 161"/>
            <path class="m-big"   d="M111 150 Q130 172 149 150"/>
          </g>
          <path class="sweat" d="M204 84 q10 14 0 21 q-10 -7 0 -21" fill="#A8BBD0"/>
          <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>

    <!-- Planning Center -->
    <div id="streaks" aria-hidden="true"><span></span><span></span><span></span></div>
    <div id="pcoWrap" class="actor">
      <div class="ent"><div class="bob">
        <svg id="pco" width="340" height="380" viewBox="0 0 340 380" aria-label="Planning Center, a tidy desk-calendar fellow">
          <!-- feet -->
          <rect x="118" y="352" width="46" height="17" rx="8" fill="#475569"/>
          <rect x="176" y="352" width="46" height="17" rx="8" fill="#475569"/>
          <!-- arms -->
          <g class="armL">
            <rect x="30" y="150" width="18" height="104" rx="9" fill="#64748B"/>
            <circle cx="39" cy="258" r="12" fill="#F1F5F9" stroke="#64748B" stroke-width="3"/>
          </g>
          <g class="armR">
            <rect x="292" y="150" width="18" height="104" rx="9" fill="#64748B"/>
            <circle cx="301" cy="258" r="12" fill="#F1F5F9" stroke="#64748B" stroke-width="3"/>
          </g>
          <!-- calendar body -->
          <rect x="44" y="88" width="252" height="268" rx="30" fill="#F8FAFC" stroke="#64748B" stroke-width="5"/>
          <path d="M44 118 L44 118 Q44 88 74 88 L266 88 Q296 88 296 118 L296 148 L44 148 Z" fill="#E2E8F0"/>
          <path d="M44 148 L296 148" stroke="#CBD5E1" stroke-width="3"/>
          <!-- spiral binder rings -->
          <g fill="none" stroke="#475569" stroke-width="6" stroke-linecap="round">
            <path d="M92 100 L92 74"/><path d="M144 100 L144 74"/><path d="M196 100 L196 74"/><path d="M248 100 L248 74"/>
          </g>
          <g fill="none" stroke="#475569" stroke-width="5">
            <circle cx="92" cy="68" r="10"/><circle cx="144" cy="68" r="10"/><circle cx="196" cy="68" r="10"/><circle cx="248" cy="68" r="10"/>
          </g>
          <!-- bow tie on the header band -->
          <g fill="#64748B">
            <path d="M170 112 L142 100 L142 128 Z"/>
            <path d="M170 112 L198 100 L198 128 Z"/>
            <circle cx="170" cy="113" r="7"/>
          </g>
          <!-- page curl -->
          <path d="M296 316 Q296 356 256 356 L296 356 Z" fill="#E2E8F0"/>
          <!-- face -->
          <ellipse cx="112" cy="248" rx="12" ry="8" fill="#F9A8D4" opacity=".3"/>
          <ellipse cx="228" cy="248" rx="12" ry="8" fill="#F9A8D4" opacity=".3"/>
          <g class="eyes">
            <circle cx="128" cy="210" r="9" fill="#1E293B"/>
            <circle cx="212" cy="210" r="9" fill="#1E293B"/>
          </g>
          <g class="m-beam" fill="none" stroke="#1E293B" stroke-width="5.5" stroke-linecap="round">
            <path d="M116 210 Q128 199 140 210"/>
            <path d="M200 210 Q212 199 224 210"/>
          </g>
          <g class="lids" fill="none" stroke="#1E293B" stroke-width="4" stroke-linecap="round">
            <path d="M117 194 q11 -6 22 -1"/>
            <path d="M201 193 q11 -5 22 1"/>
          </g>
          <g fill="none" stroke="#1E293B" stroke-width="6" stroke-linecap="round">
            <path class="m-smile" d="M138 262 Q170 288 202 262"/>
            <path class="m-yay"   d="M130 258 Q170 296 210 258"/>
          </g>
          <g class="sparks" fill="#CBD5E1">
            <path class="spark" d="M64 40 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4 z"/>
            <path class="spark" d="M278 26 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="M312 148 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 class="conf" aria-hidden="true">
          <i style="--ci:0;--cx:-150px;--cy:170px;--cr:200deg;background:#CBD5E1"></i>
          <i style="--ci:1;--cx:-84px;--cy:210px;--cr:-160deg;background:#E2E8F0"></i>
          <i style="--ci:2;--cx:-20px;--cy:180px;--cr:140deg;background:#94A3B8"></i>
          <i style="--ci:3;--cx:44px;--cy:220px;--cr:-220deg;background:#CBD5E1"></i>
          <i style="--ci:4;--cx:118px;--cy:184px;--cr:180deg;background:#E2E8F0"></i>
          <i style="--ci:5;--cx:-118px;--cy:120px;--cr:-140deg;background:#94A3B8"></i>
          <i style="--ci:6;--cx:12px;--cy:130px;--cr:240deg;background:#CBD5E1"></i>
          <i style="--ci:7;--cx:86px;--cy:126px;--cr:-190deg;background:#E2E8F0"></i>
          <i style="--ci:8;--cx:150px;--cy:150px;--cr:160deg;background:#94A3B8"></i>
          <i style="--ci:9;--cx:-52px;--cy:236px;--cr:-250deg;background:#E2E8F0"></i>
        </div>
      </div></div>
      <div class="shadow" style="bottom:0"></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>

    <!-- speech bubbles -->
    <div class="bub" id="bubP"><span></span></div>
    <div class="bub" id="bubC"><span></span></div>
    <div class="bub" id="bubG"><span></span></div>

    <!-- fair-is-fair chips (required credit beat) -->
    <div id="credit">
      <div class="crow">
        <div class="chip" style="--cd:0s">
          <svg width="30" height="30" 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 — free
        </div>
        <div class="chip" style="--cd:.16s">
          <svg width="30" height="30" viewBox="0 0 30 30"><path d="M15 4l9 6v13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V10z"/><path d="M12 25v-8h6v8"/></svg>
          Church Center — free
        </div>
      </div>
      <div class="crow">
        <div class="chip" style="--cd:.32s">
          <svg width="30" height="30" viewBox="0 0 30 30"><rect x="4" y="5" width="22" height="17" rx="3"/><path d="M9 11h12M9 16h8"/></svg>
          Publishing Essential — free
        </div>
        <div class="chip" style="--cd:.48s">
          <svg width="30" height="30" viewBox="0 0 30 30"><path d="M15 4v22M9 9c0-2 2.5-3.5 6-3.5s6 1.5 6 3.5-2 3-6 3.6-6 1.6-6 3.9 2.5 3.5 6 3.5 6-1.5 6-3.5"/></svg>
          Giving — per transaction
        </div>
      </div>
    </div>

    <!-- the one-plan card -->
    <div id="planCard">
      <div class="head">
        <svg width="58" height="58" viewBox="0 0 240 240" aria-hidden="true">
          <defs>
            <linearGradient id="gg3" 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(#gg3)"/>
          <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>
        <b>One plan. One bill.</b>
      </div>
      <div class="mods">
        <span class="mchip" style="--mi:0;--mx:-160px;--my:-60px">People<span class="ck"><svg width="17" height="17" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span>
        <span class="mchip" style="--mi:1;--mx:120px;--my:-80px">Check-In<span class="ck"><svg width="17" height="17" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span>
        <span class="mchip" style="--mi:2;--mx:-90px;--my:70px">Events<span class="ck"><svg width="17" height="17" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span>
        <span class="mchip" style="--mi:3;--mx:170px;--my:40px">Groups<span class="ck"><svg width="17" height="17" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span>
        <span class="mchip" style="--mi:4;--mx:-40px;--my:-90px">Giving<span class="ck"><svg width="17" height="17" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span>
        <span class="mchip" style="--mi:5;--mx:60px;--my:80px">Worship<span class="ck"><svg width="17" height="17" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span>
        <span class="mchip" style="--mi:6;--mx:-170px;--my:30px">Media<span class="ck"><svg width="17" height="17" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span>
        <span class="mchip" style="--mi:7;--mx:140px;--my:-40px">Messages<span class="ck"><svg width="17" height="17" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span>
        <span class="mchip" style="--mi:8;--mx:0px;--my:96px">AI Assist<span class="ck"><svg width="17" height="17" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span>
      </div>
      <div class="foot">
        <em>Sized by your congregation</em>
        <span class="sizes">Starter 50 &nbsp;·&nbsp; Grow 150 &nbsp;·&nbsp; Church 500 &nbsp;·&nbsp; Church Plus 2000<span class="ul"></span></span>
      </div>
    </div>

    <!-- ══ payoff set A · live transcription ══ -->
    <div class="set" id="setA" aria-hidden="true">
      <div class="screen">
        <div class="live"><i></i>LIVE · TRANSCRIBING</div>
        <div class="sermon">“Grace That Finds You”</div>
        <div class="cap cap1">
          <span class="cw" style="--i:0">…grace</span>
          <span class="cw" style="--i:1">isn’t</span>
          <span class="cw" style="--i:2">something</span>
          <span class="cw" style="--i:3">you</span>
          <span class="cw" style="--i:4">chase.</span>
        </div>
        <div class="cap cap2">
          <span class="cw" style="--i:0">It</span>
          <span class="cw" style="--i:1">finds</span>
          <span class="cw" style="--i:2">you.</span>
        </div>
      </div>
      <div class="stagefloor"></div>
      <div class="preacher">
        <svg width="86" height="128" viewBox="0 0 86 128" aria-hidden="true">
          <circle cx="43" cy="22" r="18" fill="#64748B"/>
          <rect x="22" y="44" width="42" height="60" rx="18" fill="#64748B"/>
          <rect x="12" y="102" width="62" height="22" rx="8" fill="#475569"/>
        </svg>
      </div>
      <div class="pew" style="left:390px;top:800px;width:300px"></div>
      <div class="pew" style="left:730px;top:800px;width:300px"></div>
      <div class="pew" style="left:1070px;top:800px;width:300px"></div>
      <div class="pew" style="left:320px;top:872px;width:330px"></div>
      <div class="pew" style="left:690px;top:872px;width:330px"></div>
      <div class="pew" style="left:1060px;top:872px;width:330px"></div>
      <div class="head" style="left:452px;top:760px"></div>
      <div class="head" style="left:562px;top:764px"></div>
      <div class="head" style="left:812px;top:758px"></div>
      <div class="head" style="left:948px;top:764px"></div>
      <div class="head" style="left:1180px;top:760px"></div>
      <div class="head" style="left:404px;top:834px"></div>
      <div class="head" style="left:590px;top:838px"></div>
      <div class="head" style="left:788px;top:832px"></div>
      <div class="head" style="left:1010px;top:838px"></div>
      <div class="head" style="left:1236px;top:834px"></div>
    </div>

    <!-- ══ payoff set B · annotate ══ -->
    <div class="set" id="setB" aria-hidden="true">
      <div class="panelT">
        <div class="face">
          <div class="slide">
            <b>GRACE</b>
            <span>that finds you</span>
            <i>Ephesians 2:8</i>
          </div>
          <svg class="ann" viewBox="0 0 516 356" aria-hidden="true">
            <path class="st1" pathLength="100" d="M156 138 C196 108 330 106 366 140 C396 168 380 208 328 218 C264 232 172 226 146 194 C126 166 140 146 172 132"/>
            <path class="st2" pathLength="100" d="M182 250 C226 260 296 260 338 250"/>
          </svg>
        </div>
      </div>
      <div class="panelS">
        <div class="face">
          <div class="slide">
            <b>GRACE</b>
            <span>that finds you</span>
            <i>Ephesians 2:8</i>
          </div>
          <svg class="ann" viewBox="0 0 516 356" aria-hidden="true">
            <path class="st1" pathLength="100" d="M156 138 C196 108 330 106 366 140 C396 168 380 208 328 218 C264 232 172 226 146 194 C126 166 140 146 172 132"/>
            <path class="st2" pathLength="100" d="M182 250 C226 260 296 260 338 250"/>
          </svg>
        </div>
      </div>
      <div class="lab labT">his tablet</div>
      <div class="lab labS">the sanctuary screen</div>
      <svg class="link" viewBox="0 0 170 60" aria-hidden="true">
        <path d="M6 50 C 50 6, 120 6, 164 50"/>
      </svg>
      <div class="bdot"><i></i></div>
      <div class="pen" aria-hidden="true">
        <svg width="30" height="96" viewBox="0 0 30 96">
          <rect x="7" y="4" width="16" height="66" rx="8" fill="#334155"/>
          <path d="M7 70 L23 70 L15 92 Z" fill="#F59E0B"/>
        </svg>
      </div>
    </div>

    <!-- ══ payoff set C · bulletin builder ══ -->
    <div class="set" id="setC" aria-hidden="true">
      <div class="plan">
        <div class="kick">SUNDAY · SERVICE PLAN</div>
        <div class="row"><b>9:00</b>Welcome &amp; prayer</div>
        <div class="row"><b>9:10</b>Worship — 3 songs</div>
        <div class="row"><b>9:35</b>Message: “Grace That Finds You”</div>
        <div class="row"><b>10:15</b>Benediction</div>
        <div class="row"><b>wk</b>Youth camp signups open</div>
      </div>
      <div class="chev" style="left:874px;--cd:0s"><svg width="34" height="44" viewBox="0 0 34 44"><path d="M8 6l18 16-18 16"/></svg></div>
      <div class="chev" style="left:912px;--cd:.22s"><svg width="34" height="44" viewBox="0 0 34 44"><path d="M8 6l18 16-18 16"/></svg></div>
      <div class="chev" style="left:950px;--cd:.44s"><svg width="34" height="44" viewBox="0 0 34 44"><path d="M8 6l18 16-18 16"/></svg></div>
      <div class="page">
        <div class="bb mast" style="--bd:.15s">
          <b>HOPE COMMUNITY CHURCH</b>
          <span>Sunday Bulletin · August 16 · 9:00 AM</span>
          <div class="mrule"></div>
        </div>
        <div class="bb serm" style="--bd:.5s">
          <b>“Grace That Finds You”</b>
          <span>Pastor Ray · Ephesians 2:8</span>
        </div>
        <div class="bb ord" style="--bd:.85s">
          <div class="r"><b>9:00</b>Welcome &amp; prayer</div>
          <div class="r"><b>9:10</b>Worship — 3 songs</div>
          <div class="r"><b>9:35</b>Message</div>
          <div class="r"><b>10:15</b>Benediction</div>
        </div>
        <div class="bb tiles" style="--bd:1.2s">
          <div class="tile">Youth Camp<span>signups open this week</span></div>
          <div class="tile">Volunteer huddle<span>Sunday, 8:30 sharp</span></div>
        </div>
        <div class="pdfB"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3v11M7.5 9.5L12 14l4.5-4.5"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>PDF</div>
      </div>
      <div class="ready">drafted from the plan — ready to print &amp; send</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">Nobody should get a bill for <em>saying yes.</em></div>
      <div class="fine">Fair’s fair: Planning Center’s People, Church Center, and Publishing Essential are free — and Giving is per-transaction rather than monthly.</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(id, text){
    var b = $(id);
    b.querySelector('span').textContent = text;
    b.classList.remove('show'); void b.offsetWidth;
    b.classList.add('show');
  }
  function off(id){ $(id).classList.remove('show'); }

  function mood(m){ $('#pastor').setAttribute('data-mood', m); }
  function cls(sel, c, on){ $(sel).classList[on === false ? 'remove' : 'add'](c); }

  function reg(n){ cls('#r'+n, 'up'); }
  function ding(n){
    var el = $('#r'+n);
    el.classList.remove('ring'); void el.offsetWidth;
    el.classList.add('ring');
  }
  function tape(n, dh){
    var el = $('#r'+n+' .tape');
    var h = (parseFloat(el.dataset.h) || 14) + (dh || 34);
    el.dataset.h = h;
    el.style.height = h + 'px';
  }
  function tapesAll(dh){ for (var i = 1; i <= 7; i++) tape(i, dh); }
  function cheer(){
    var w = $('#pcoWrap');
    w.classList.remove('cheer'); void w.offsetWidth;
    w.classList.add('cheer');
  }
  function beam(on){ cls('#pcoWrap', 'beam', on); }

  /* ---------- cue sheet (seconds) ---------- */
  var cues = [
    /* ═══ ACT I — Pastor Ray, a growing church ═══ */
    [0.5,  function(){ cls('#pastorWrap','in'); mood('hopeful'); }],
    [0.8,  function(){ kt('This is Pastor Ray.', 'xl'); }],
    [3.0,  ktOut],
    [3.4,  function(){ kt('His church keeps growing.', 'lg'); cls('#fam','in'); }],
    [6.4,  ktOut],
    [6.8,  function(){ kt('New names every week — and every one needs looking after.', 'md'); mood('delighted'); }],
    [10.0, function(){ ktOut(); cls('#fam','out'); }],

    /* ═══ ACT II — meet Planning Center ═══ */
    [10.4, function(){ cls('#stage','two'); cls('#pcoWrap','in'); cls('#streaks','go'); mood('hopeful'); }],
    [11.2, function(){ kt('Meet Planning Center.', 'lg'); }],
    [13.4, ktOut],
    [13.8, function(){ kt('Genuinely the nicest guy in church software.', 'md'); beam(); }],
    [16.6, function(){ ktOut(); beam(false); }],
    [17.0, function(){ cls('#pastor','ask'); say('#bubP', 'Can you keep track of everybody?'); }],
    [19.2, function(){ say('#bubC', 'All two hundred? Free — People is always free.'); beam(); }],
    [22.1, function(){ off('#bubP'); off('#bubC'); cls('#pastor','ask', false); beam(false); }],
    [22.4, function(){ kt('The People database costs nothing. Truly.', 'md'); }],
    [25.4, ktOut],

    /* ═══ ACT III — THE RUN · every verb has a meter ═══ */
    /* beat 1 — schedule them → Services */
    [25.8, function(){ say('#bubP', 'Fifty new volunteers just signed up!'); mood('delighted'); }],
    [28.2, function(){ say('#bubC', 'GREAT news! Let’s get them scheduled!'); beam(); cheer(); }],
    [30.3, function(){ reg(1); ding(1); tape(1); }],
    [32.1, function(){ off('#bubP'); off('#bubC'); beam(false); }],
    /* beat 2 — check them in → Check-Ins */
    [33.7, function(){ say('#bubP', 'The kids wing is packed!'); }],
    [36.1, function(){ say('#bubC', 'Wonderful! Check every kid in!'); beam(); cheer(); }],
    [38.2, function(){ reg(2); ding(2); tape(2); mood('stretched'); }],
    [40.0, function(){ off('#bubP'); off('#bubC'); beam(false); }],
    /* beat 3 — register them → Registrations */
    [41.6, function(){ say('#bubP', 'Summer camp just sold out!'); }],
    [44.0, function(){ say('#bubC', 'Fantastic! Register every camper!'); beam(); cheer(); }],
    [46.1, function(){ reg(3); ding(3); tape(3); mood('worried'); }],
    [47.9, function(){ off('#bubP'); off('#bubC'); beam(false); }],
    /* beat 4 — take their gift → Giving */
    [49.5, function(){ say('#bubP', 'And giving is up!'); }],
    [51.9, function(){ say('#bubC', 'Amazing! Every gift, processed!'); beam(); cheer(); }],
    [54.0, function(){ reg(4); ding(4); tape(4); cls('#pastor','slump'); }],
    [55.8, function(){ off('#bubP'); off('#bubC'); beam(false); }],
    /* stingers — Groups, Calendar, Music Stand */
    [57.4, function(){ say('#bubP', 'Twelve new small groups—'); cls('#pcoWrap','back'); }],
    [58.6, function(){ reg(5); ding(5); tape(5); }],
    [59.4, function(){ say('#bubP', '—the calendar’s full—'); }],
    [60.6, function(){ reg(6); ding(6); tape(6); }],
    [61.4, function(){ say('#bubP', '—even the music stand app!'); }],
    [62.6, function(){ reg(7); ding(7); tape(7); }],
    [63.2, function(){ off('#bubP'); }],
    /* the salvo — a small orchestra of registers */
    [63.6, function(){ cls('#regs','salvo'); cls('#pcoWrap','conduct'); beam(); cheer(); tapesAll(38); }],
    [63.9, function(){ kt('“Pay as you grow,” they call it.', 'md'); }],
    [66.5, function(){ ktOut(); cls('#pcoWrap','conduct', false); }],
    [66.9, function(){ kt('He genuinely cheers. And genuinely charges.', 'lg'); }],
    [69.9, function(){ ktOut(); beam(false); }],

    /* ═══ CREDIT — fair is fair ═══ */
    [70.3, function(){ kt('Now — fair is fair.', 'md'); cls('#regs','dim'); }],
    [72.3, ktOut],
    [72.6, function(){ cls('#credit','in'); beam(); kt('Some of it really is free.', 'md'); }],
    [76.2, function(){ ktOut(); cls('#credit','out'); beam(false); }],

    /* ═══ TURN — a warm goodbye, then GLAD ═══ */
    [76.9, function(){ $('#bubC').style.left = '1660px'; say('#bubC', 'Congrats again on ALL that growth!'); cls('#pcoWrap','wave'); beam(); }],
    [79.3, function(){ off('#bubC'); }],
    [79.7, function(){ cls('#pcoWrap','bye'); cls('#regs','parade'); }],
    [81.6, function(){ cls('#gladWrap','in'); cls('#warm','on'); kt('This is GLAD.', 'lg'); mood('hopeful'); }],
    [84.0, ktOut],
    [84.4, function(){ kt('Storing them is free.', 'lg'); }],
    [86.8, ktOut],
    [87.2, function(){ kt('It’s everything you’d actually do with them that costs.', 'md'); }],
    [90.4, ktOut],

    /* ═══ ANSWER — one plan, one bill ═══ */
    [90.8, function(){ cls('#planCard','in'); kt('GLAD is one plan. One bill.', 'lg'); }],
    [93.7, ktOut],
    [94.0, function(){ kt('Every module already in it.', 'md'); cls('#planCard','checked'); mood('delighted'); }],
    [97.0, ktOut],
    [97.4, function(){ kt('Sized by your congregation — the only number that moves.', 'md'); cls('#planCard','sized'); }],
    [100.8, ktOut],
    [101.1, function(){ cls('#planCard','outing'); }],
    [101.3, function(){ cls('#pastorWrap','bye'); cls('#gladWrap','bye'); }],

    /* ═══ PAYOFF — one Sunday, three moments, unhurried ═══ */
    [101.8, function(){ kt('Here’s what Sunday feels like now.', 'md'); }],
    [104.0, ktOut],
    /* live transcription */
    [104.4, function(){ cls('#setA','in'); }],
    [105.2, function(){ cls('#setA .cap1','on'); }],
    [106.0, function(){ kt('The sermon captions itself — live.', 'md'); }],
    [108.6, function(){ cls('#setA .cap2','on'); }],
    [112.6, ktOut],
    [113.2, function(){ cls('#setA','outing'); }],
    /* annotate, tablet → sanctuary screen */
    [114.0, function(){ cls('#setB','in'); }],
    [114.8, function(){ kt('He draws on the tablet — it lands on the big screen. Live.', 'md'); }],
    [115.6, function(){ cls('#setB','drawn'); }],
    [118.4, function(){ cls('#setB','drawn2'); }],
    [122.4, ktOut],
    [123.0, function(){ cls('#setB','outing'); }],
    /* bulletin builder */
    [123.6, function(){ cls('#setC','in'); }],
    [124.4, function(){ kt('And the bulletin drafts itself from the service plan.', 'md'); }],
    [125.2, function(){ cls('#setC','built'); }],
    [128.8, function(){ cls('#setC','pdf'); }],
    [132.4, ktOut],
    [133.0, function(){ cls('#setC','outing'); }],

    /* ═══ MIRROR — good news, and nothing rings ═══ */
    [133.6, function(){ cls('#pastorWrap','bye', false); cls('#gladWrap','bye', false); mood('hopeful'); cls('#pastor','slump', false); }],
    [134.3, function(){ say('#bubP', 'Another volunteer just signed up!'); mood('braced'); }],
    [136.3, function(){ off('#bubP'); }],
    [136.5, function(){ cls('#ghost','peek'); }],
    [138.1, function(){ say('#bubG', 'Your tenth volunteer costs what your first did: nothing.'); }],
    [141.4, function(){ off('#bubG'); mood('relieved'); cls('#pastor','exhale'); cls('#gladWrap','yay'); }],
    [141.7, function(){ kt('The whole team, on every plan — even free Starter.', 'md'); }],
    [144.7, ktOut],

    /* ═══ OUTRO — let the plane land ═══ */
    [145.2, function(){ var f = $('#fam'); f.style.left = '420px'; cls('#fam','out', false);
                        mood('delighted'); cls('#gladWrap','yay', false); }],
    [145.4, function(){ kt('His church keeps growing.', 'md'); }],
    [148.4, ktOut],
    [148.8, function(){ kt('Now that’s just good news.', 'lg'); cls('#gladWrap','yay'); }],
    [151.8, ktOut],
    [152.4, function(){ cls('#pastorWrap','bye'); cls('#gladWrap','bye'); cls('#fam','out'); cls('#warm','on', false); }],

    /* ═══ END CARD ═══ */
    [153.2, function(){ cls('#end','in'); }],
    [157.0, function(){ $('#replay').classList.add('show'); }]
  ];

  /* ---------- cue sheet for post/scoring (mirrors the header comment) ---------- */
  var CUE_SHEET = [
    {t: 0.5,   beat: 'Pastor Ray enters'},
    {t: 0.8,   beat: 'TITLE — This is Pastor Ray.'},
    {t: 3.4,   beat: 'Congregation dots bloom — church keeps growing'},
    {t: 6.8,   beat: 'New names every week / looking after'},
    {t: 10.4,  beat: 'Planning Center enters (paper wisps)'},
    {t: 11.2,  beat: 'TITLE — Meet Planning Center.'},
    {t: 13.8,  beat: 'Nicest guy in church software (beam)'},
    {t: 17.0,  beat: 'Ray: Can you keep track of everybody?'},
    {t: 19.2,  beat: 'PCO: People is always free (credit, on camera)'},
    {t: 22.4,  beat: 'TITLE — The People database costs nothing.'},
    {t: 25.8,  beat: 'GOOD NEWS 1 — fifty new volunteers'},
    {t: 30.3,  beat: 'RING 1 — SERVICES (scales with your team)'},
    {t: 33.7,  beat: 'GOOD NEWS 2 — kids wing packed'},
    {t: 38.2,  beat: 'RING 2 — CHECK-INS (scales with check-ins)'},
    {t: 41.6,  beat: 'GOOD NEWS 3 — summer camp sold out'},
    {t: 46.1,  beat: 'RING 3 — REGISTRATIONS (scales with attendees)'},
    {t: 49.5,  beat: 'GOOD NEWS 4 — giving is up'},
    {t: 54.0,  beat: 'RING 4 — GIVING (per transaction)'},
    {t: 57.4,  beat: 'Stingers — twelve new small groups'},
    {t: 58.6,  beat: 'RING 5 — GROUPS'},
    {t: 60.6,  beat: 'RING 6 — CALENDAR'},
    {t: 62.6,  beat: 'RING 7 — MUSIC STAND'},
    {t: 63.6,  beat: 'SALVO — all seven ring, PCO conducts'},
    {t: 63.9,  beat: 'TITLE — Pay as you grow, they call it.'},
    {t: 66.9,  beat: 'THESIS — genuinely cheers / genuinely charges'},
    {t: 70.3,  beat: 'CREDIT — fair is fair (registers dim)'},
    {t: 72.6,  beat: 'Credit chips — People/CC/Publishing free, Giving per-txn'},
    {t: 76.9,  beat: 'PCO goodbye — congrats on ALL that growth (wave)'},
    {t: 79.7,  beat: 'Register parade exits right'},
    {t: 81.6,  beat: 'TURN — GLAD enters, warm wash'},
    {t: 84.4,  beat: 'Storing them is free.'},
    {t: 87.2,  beat: 'Everything you actually DO with them costs.'},
    {t: 90.8,  beat: 'ANSWER — one-plan card, one bill'},
    {t: 94.0,  beat: 'Amber checks — every module already in it'},
    {t: 97.4,  beat: 'HONESTY — sized by congregation, one number moves'},
    {t: 101.8, beat: 'PAYOFF intro — what Sunday feels like now'},
    {t: 104.4, beat: 'SET 1 — live transcription (captions type at 105.2, 108.6)'},
    {t: 114.0, beat: 'SET 2 — annotate (stroke on both screens 115.6, underline 118.4)'},
    {t: 123.6, beat: 'SET 3 — bulletin builder (assembles 125.2, PDF 128.8)'},
    {t: 133.6, beat: 'MIRROR — Ray + GLAD return'},
    {t: 134.3, beat: 'GOOD NEWS 5 — another volunteer (Ray braces)'},
    {t: 136.5, beat: 'GHOST REGISTER — silence, no ring (score: nothing)'},
    {t: 138.1, beat: 'GLAD: your tenth volunteer costs what your first did'},
    {t: 141.4, beat: 'RELIEF — exhale, GLAD bounce'},
    {t: 141.7, beat: 'Whole team on every plan — even free Starter'},
    {t: 145.2, beat: 'OUTRO — congregation blooms back, no registers'},
    {t: 145.4, beat: 'TITLE — His church keeps growing. (callback)'},
    {t: 148.8, beat: 'TITLE — Now that’s just good news. (GLAD bounce)'},
    {t: 152.4, beat: 'Actors + congregation fade, warm wash dims'},
    {t: 153.2, beat: 'PUNCH CARD — end card builds slowly (Nobody should get a bill for saying yes.)'},
    {t: 157.0, beat: 'Replay affordance'}
  ];
  if (window.console){
    if (console.table) console.table(CUE_SHEET);
    else CUE_SHEET.forEach(function(c){ console.log(c.t + 's — ' + c.beat); });
  }

  /* ---------- 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][1](); 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[1](); });
  }

  /* ---------- 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[1](); });
  } else if (RM){
    jumpToEnd();
  } else {
    window.addEventListener('load', function(){ setTimeout(begin, 250); });
  }
})();
</script>
</body>
</html>