<!-- Copyright (c) 2026 Diamond Software International Inc. -->
<!--
  GLAD "Get a GLAD" campaign — Spot 05-120: "ChurchTrac" (extended rebuild)
  =========================================================================
  Self-contained 1920x1080 animated spot, ~120s (110–130 window), autoplays on
  load, holds on end card. No external assets, no CDNs. System font stack.
  One amber accent (#F59E0B -> #EA580C). Same locked GLAD character + palette
  as Spot 01/02 (im-breeze.html) — do not restyle.

  Shape: the Breeze rebuild — white limbo, kinetic type, a NAMED human
  protagonist (Ruth, small-church worship leader), competitor as an original
  friendly character (a checklist-card with a green bookkeeper's visor).

  Carried-over fix: the bottom caption. Previously small italic grey sitting
  on the light floor gradient — unreadable. Now: 34px, weight 600, ink color,
  lifted 170px off the floor, on a white scrim pill with border + shadow.
  The end-card footnote gets the same scrim treatment at 23px.

  QA affordances:
    ?t=NN        render the exact state at NN seconds as a still (all motion
                 frozen at end-state) — e.g. im-churchtrac-120.html?t=62
    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: "ChurchTrac" appears only as an original stylized character with a
  plain name badge (nominative use). No competitor logo or trade dress.

  Claims: every competitor fact on screen traces to
  docs/specs/COMPETITOR_AD_CLAIMS.md (ChurchTrac section, verified 2026-08-12).
    Credit beat (REQUIRED, honored in Act II): core from $9/mo includes
    people, check-in, worship planning, giving, a website, and the Church
    Connect app; automations included; accounting is a real published
    +$15/mo add-on (credited on screen, never mocked).
    Vetted gaps (the only asks that get "not our thing"): presentation
    suite, real-time multi-screen sync + stage tablets/confidence monitor,
    payroll.
    Banned (and absent): books-as-a-spreadsheet, any no-mobile implication,
    disparagement framing. The old slide deck shown is generic slideware on
    the office computer — where lyrics actually live when your ChMS has no
    presentation product — never their product.
-->
<!--
  CUE SHEET — for scoring the MP4 in post (same data console.table'd on load)
  ===========================================================================
    sec    beat
    ─────  ─────────────────────────────────────────────────────────────────
      0.5  ENTRANCE — Ruth walks in
      0.8  Title: "This is Ruth."
      3.8  Setup: leads worship at a small church
      7.4  Congregation dots in — "Small church. Small budget. Big Sunday."
     11.5  ENTRANCE — ChurchTrac (green ticker-tape streaks)
     12.3  "Meet ChurchTrac."
     15.4  CREDIT BEAT — six verified chips + sparkle beam ($9/mo core)
     21.4  Credit, cont. — accounting is a real published $15 add-on
     25.8  Warm plateau: "The office ran like a dream."
     29.4  Pivot line: "Then Sunday morning asked a bigger question."
     33.2  ASK 1 — "Can you run our Sunday screens?"
     35.6  ESCALATION TICK 1 — deflate d1, "not really our thing"
     39.2  ASK 2 — "Lyrics on every screen — live?"
     41.4  ESCALATION TICK 2 — deflate d2, ceiling dashes in
     45.2  RAPID ASKS — confidence monitor / stage tablets / payroll
     47.2  ESCALATION TICK 3 — deflate d3, ceiling goes SOLID (thunk)
     50.4  ChurchTrac waves goodbye (friendly), floats off
     52.0  Verdict line: "A lot for nine dollars. Just not Sunday's screens."
     55.8  THE ACHE — Sunday screens rig in (v27 deck / lobby / blind stage)
     60.4  Caption (scrim pill): "Which verse are we on?"
     65.2  ✕ flags pop — "Three screens. Three islands."
     69.8  Screens out — beat of silence before the turn
     70.4  THE TURN — GLAD enters, amber warm wash
     73.6  Office-parity chips (people / giving / planning / books+payroll)
     78.6  Tease: "And Sunday? Watch."
     81.0  PAYOFF — screens flip LIVE, all synced, amber sync rings
     87.0  Ceiling SHATTERS
     87.4  "No ceiling."
     89.8  Relief — Ruth exhales, GLAD hops
     91.2  Books + payroll button line
     95.9  QUOTE CARD — "I pressed Go — and every screen just went."
    101.5  PUNCH CARD — end card (mark, wordmark, rule, tagline)
    102.8  Footnote scrim fades in (fair-play credit + trademark line)
    119.0  Replay control appears — safe out-point ≈ 120s
-->
<!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 — “ChurchTrac” · 120s spot</title>
<style>
  /* ============ tokens (locked — same as Spot 01) ============ */
  :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;
    --font-2009:Tahoma,"Segoe UI",Verdana,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 70% 72%, rgba(245,158,11,.10), rgba(245,158,11,0) 62%);}
  #warm.on{opacity:1}

  /* ============ kinetic type ============ */
  #kt{
    position:absolute;top:104px;left:0;right:0;text-align:center;padding:0 180px;
    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}
  .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:830px;top:450px;width:260px;height:430px;transition:transform 1.25s var(--ease)}
  #stage.two #ruthWrap{transform:translateX(-330px)}
  #stage.three #ruthWrap{transform:translateX(-560px)}
  #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:translateX(-560px) 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)}

  /* 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)}}

  /* ============ ChurchTrac ============ */
  #ctWrap{left:1080px;top:462px;width:360px;height:418px;transition:opacity 1.5s var(--ease), transform 1.5s var(--ease)}
  #ctWrap .ent{transform:translateX(-560px)}
  #ctWrap.in .ent{opacity:1;transform:none;transition-duration:1.5s}
  #ctWrap.in .shadow{width:210px;height:28px;opacity:.65}
  #ctWrap .bob{animation:bob 3.6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
  #ctWrap.gone{opacity:0;transform:translate(230px,-430px) rotate(7deg)}

  #ct .squash{transform-box:fill-box;transform-origin:50% 94%;transition:transform 1s var(--ease)}
  #ctWrap[data-state="d1"] .squash{transform:scale(.93,.8)}
  #ctWrap[data-state="d2"] .squash{transform:scale(.83,.63) rotate(-2deg)}
  #ctWrap[data-state="d3"] .squash{transform:scale(.7,.46) rotate(-4deg)}
  #ctWrap.in[data-state="d1"] .shadow{width:180px;opacity:.5}
  #ctWrap.in[data-state="d2"] .shadow{width:150px;opacity:.42}
  #ctWrap.in[data-state="d3"] .shadow{width:125px;opacity:.34}

  #ct .m-worry,#ct .lids,#ct .sparks,#ct .pff1,#ct .pff2,#ct .pff3{opacity:0}
  #ct .m-smile{transition:opacity .3s}
  #ctWrap[data-state^="d"] #ct .m-smile{opacity:0}
  #ctWrap[data-state^="d"] #ct .m-worry{opacity:1}
  #ctWrap[data-state^="d"] #ct .lids{opacity:1}
  #ctWrap.beam #ct .sparks{opacity:1}
  #ctWrap.beam #ct .spark{animation:twinkle 1.5s ease-in-out infinite}
  #ct .spark{transform-box:fill-box;transform-origin:center}
  #ct .spark:nth-child(2){animation-delay:.4s!important}
  #ct .spark:nth-child(3){animation-delay:.8s!important}
  @keyframes twinkle{0%,100%{transform:scale(.55);opacity:.4}50%{transform:scale(1.15);opacity:1}}
  @keyframes pff{0%{opacity:.9;transform:translate(0,0)}100%{opacity:0;transform:translate(34px,-8px)}}
  #ctWrap[data-state="d1"] .pff1{animation:pff .8s ease-out forwards}
  #ctWrap[data-state="d2"] .pff2{animation:pff .8s ease-out forwards}
  #ctWrap[data-state="d3"] .pff3{animation:pff .8s ease-out forwards}
  #ct .armCt{transform-box:fill-box;transform-origin:8% 92%}
  #ctWrap.wave .armCt{animation:wavey 1s ease-in-out 2}
  @keyframes wavey{0%,100%{transform:rotate(0)}30%{transform:rotate(26deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(22deg)}}

  /* entrance streaks — a little ticker-tape of green */
  #streaks span{position:absolute;height:5px;border-radius:3px;opacity:0;
    background:linear-gradient(90deg, rgba(196,232,212,0), #C4E8D4 40%, rgba(196,232,212,0));}
  #streaks.go span{animation:streak 1.25s var(--ease) forwards}
  #streaks span:nth-child(1){left:340px;top:560px;width:420px}
  #streaks span:nth-child(2){left:240px;top:640px;width:520px;animation-delay:.12s!important}
  #streaks span:nth-child(3){left:420px;top:706px;width:330px;animation-delay:.22s!important}
  @keyframes streak{0%{opacity:0;transform:translateX(-160px)}30%{opacity:.9}100%{opacity:0;transform:translateX(560px)}}

  /* ============ GLAD (locked mascot) ============ */
  #gladWrap{left:1340px;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)}

  /* ============ congregation dots ============ */
  #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}

  /* ============ 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}

  /* credit beat — two rows of three (all verified) */
  #baseChips{position:absolute;top:326px;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:center;
    gap:22px 26px;padding:0 240px;pointer-events:none}
  #baseChips .chip{opacity:0;transform:translateY(28px) scale(.9);transition:transform .8s var(--spring), opacity .5s ease}
  #baseChips.in .chip{opacity:1;transform:none}
  #baseChips.in .chip:nth-child(2){transition-delay:.14s}
  #baseChips.in .chip:nth-child(3){transition-delay:.28s}
  #baseChips.in .chip:nth-child(4){transition-delay:.42s}
  #baseChips.in .chip:nth-child(5){transition-delay:.56s}
  #baseChips.in .chip:nth-child(6){transition-delay:.70s}
  #baseChips.out .chip{opacity:0;transform:translateY(-20px);transition:opacity .45s ease, transform .45s ease;transition-delay:0s!important}

  #asks{position:absolute;left:300px;top:392px;width:600px;display:flex;justify-content:center;pointer-events:none}
  #asks .chip{position:absolute;opacity:0;transform:translateY(30px) scale(.9);transition:transform .75s var(--spring), opacity .5s ease}
  #asks .chip.in{opacity:1;transform:none}
  #asks .chip.no{opacity:0;transform:translateY(46px) scale(.94);filter:grayscale(1);
    transition:opacity .7s ease, transform .7s ease, filter .4s ease}

  #rapid{position:absolute;left:330px;top:248px;width:540px;display:flex;flex-direction:column;align-items:center;gap:16px;pointer-events:none}
  #rapid .chip{opacity:0;transform:translateY(26px) scale(.92);transition:transform .65s var(--spring), opacity .45s ease;
    transition-delay:calc(var(--i)*.4s);font-size:27px;padding:14px 26px}
  #rapid.in .chip{opacity:1;transform:none}
  #rapid.no .chip{opacity:0;transform:translateY(40px);filter:grayscale(1);
    transition:opacity .6s ease, transform .6s ease;transition-delay:calc(var(--i)*.08s)}

  /* GLAD feature row — what the office already loved */
  #feat{position:absolute;top:405px;left:0;right:0;display:flex;justify-content:center;gap:20px;pointer-events:none}
  #feat .chip{position:relative;opacity:0;transform:translateY(32px) scale(.9);font-size:26px;padding:15px 26px;
    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 .55s var(--spring);transition-delay:calc(var(--d) + .6s);
  }
  #feat.go .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)}

  /* ============ speech bubble (ChurchTrac) ============ */
  #bubble{
    position:absolute;left:1250px;top:330px;max-width:600px;width:max-content;opacity:0;
    transform:translateX(-58%) translateY(16px) scale(.92);
    transform-origin:58% 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(58% - 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(-58%)}

  /* ============ the ceiling ============ */
  #ceiling{position:absolute;left:760px;top:290px;width:660px;height:10px;pointer-events:none}
  #ceiling .bar{position:absolute;inset:0;border-radius:5px;transform:scaleX(0);transform-origin:left;
    background:repeating-linear-gradient(90deg, #A9B7C9 0 36px, transparent 36px 58px);opacity:.7;
    transition:transform 1.1s var(--ease), opacity .5s ease, background .5s ease;}
  #ceiling.dash .bar{transform:scaleX(1)}
  #ceiling.solid .bar{background:#64748B;opacity:1;animation:thunk .55s ease-out .15s 1}
  @keyframes thunk{0%{transform:scaleX(1) translateY(-14px)}55%{transform:scaleX(1) translateY(5px)}80%{transform:scaleX(1) translateY(-2px)}100%{transform:scaleX(1) translateY(0)}}
  #ceiling .frags{position:absolute;inset:0}
  #ceiling .frags span{position:absolute;top:0;width:60px;height:10px;border-radius:5px;background:#64748B;opacity:0}
  #ceiling.broken .bar{opacity:0;transition:opacity .12s}
  #ceiling.broken .frags span{animation:fly 1s var(--ease) forwards}
  #ceiling .frags span:nth-child(1){left:0}    #ceiling .frags span:nth-child(2){left:66px}
  #ceiling .frags span:nth-child(3){left:132px}#ceiling .frags span:nth-child(4){left:198px}
  #ceiling .frags span:nth-child(5){left:264px}#ceiling .frags span:nth-child(6){left:330px}
  #ceiling .frags span:nth-child(7){left:396px}#ceiling .frags span:nth-child(8){left:462px}
  #ceiling .frags span:nth-child(9){left:528px}#ceiling .frags span:nth-child(10){left:594px}
  #ceiling.broken .frags span:nth-child(3n){animation-delay:.05s}
  #ceiling.broken .frags span:nth-child(3n+1){animation-delay:.11s}
  @keyframes fly{
    0%{opacity:1;transform:translate(0,0) rotate(0)}
    100%{opacity:0;transform:translate(var(--fx,20px), -150px) rotate(var(--fr,24deg))}
  }
  #ceiling .frags span:nth-child(odd){--fx:-34px;--fr:-30deg}
  #ceiling .frags span:nth-child(even){--fx:42px;--fr:26deg}
  #ceiling .frags span:nth-child(4n){--fx:8px;--fr:52deg}

  /* ============ the Sunday screens ============ */
  #screens{position:absolute;left:560px;top:366px;width:660px;height:440px;pointer-events:none;
    opacity:0;transform:translateY(46px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
  #screens.in{opacity:1;transform:none}
  #screens.out{opacity:0!important;transform:translateY(-26px)!important}

  #screens .ring{position:absolute;left:50%;top:44%;width:90px;height:90px;border:3px solid rgba(245,158,11,.5);
    border-radius:50%;opacity:0;transform:translate(-50%,-50%)}
  #screens.live .ring{animation:ringx 2.4s ease-out infinite}
  #screens.live .ring.r2{animation-delay:1.2s}
  @keyframes ringx{0%{opacity:.65;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(6.5)}}

  #screens .scr{position:absolute;border-radius:14px;background:#fff;border:1.5px solid var(--line);
    box-shadow:0 14px 36px rgba(15,23,42,.10);overflow:visible}
  #screens .tb{position:relative;height:44px;border-radius:12px 12px 0 0;overflow:hidden;
    font-family:var(--font-2009);font-size:17px;font-weight:700;color:#4A4A44;
    background:linear-gradient(#EBE7DC,#D7D2C4);border-bottom:1px solid #B9B4A6;
    display:flex;align-items:center;padding:0 16px;white-space:nowrap;transition:background .6s ease, color .6s ease}
  #screens .tb .tb-new{position:absolute;left:16px;top:0;bottom:0;display:flex;align-items:center;
    opacity:0;transition:opacity .6s ease;font-family:var(--font);font-weight:750;letter-spacing:.02em;color:#fff}
  #screens .tb .tb-old{transition:opacity .6s ease}
  #screens.live .tb{background:linear-gradient(100deg,var(--amber1),var(--amber2));border-bottom-color:transparent}
  #screens.live .tb .tb-old{opacity:0}
  #screens.live .tb .tb-new{opacity:1}

  #screens .bd{position:relative;overflow:hidden;border-radius:0 0 12px 12px}
  #screens .s-old,#screens .s-new{position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:8px;transition:opacity .7s ease;text-align:center;padding:0 14px}
  #screens .s-old{background:#EFEEE8;font-family:var(--font-2009)}
  #screens .s-old .lyr{font-size:30px;font-weight:700;color:#6B6B60;letter-spacing:.01em}
  #screens .s-old .sub{font-size:16px;color:#8B8B7E}
  #screens .s-new{opacity:0;background:#0F172A}
  #screens .s-new .lyr{font-size:29px;font-weight:750;color:#fff;letter-spacing:-.01em}
  #screens .s-new .sub{font-size:17px;font-weight:650;color:var(--amber1)}
  #screens.live .s-old{opacity:0}
  #screens.live .s-new{opacity:1}

  #screens .lab{position:absolute;left:0;right:0;bottom:-38px;text-align:center;
    font-size:18px;font-weight:750;letter-spacing:.18em;color:var(--mut)}

  #screens .bx,#screens .bok{position:absolute;right:-15px;top:-15px;width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;color:#fff;
    transform:scale(0);transition:transform .5s var(--spring)}
  #screens .bx{background:#94A3B8;box-shadow:0 6px 16px rgba(71,85,105,.35);transition-delay:calc(var(--i)*.45s)}
  #screens.flags .bx{transform:scale(1)}
  #screens.live .bx{transform:scale(0);transition-delay:0s}
  #screens .bok{background:linear-gradient(135deg,var(--amber1),var(--amber2));
    box-shadow:0 6px 16px rgba(234,88,12,.35);transition-delay:calc(var(--i)*.3s + .55s)}
  #screens.live .bok{transform:scale(1)}

  #screens .mon{left:0;top:32px;width:340px;height:264px}
  #screens .mon .bd{height:220px}
  #screens .mon::after{content:'';position:absolute;left:50%;bottom:-26px;width:110px;height:26px;
    transform:translateX(-50%);background:linear-gradient(#CBD5E1,#B0BCCB);
    clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%);border-radius:0 0 6px 6px}
  #screens .mon .lab{bottom:-62px}
  #screens .lobby{left:388px;top:0;width:254px;height:172px}
  #screens .lobby .bd{height:128px}
  #screens .lobby .tb{height:42px;font-size:15px}
  #screens .stag{left:404px;top:224px;width:238px;height:172px;transform:rotate(-2deg);
    border:8px solid #1E293B;border-radius:18px;background:#1E293B}
  #screens .stag .tb{display:none}
  #screens .stag .bd{height:100%;border-radius:10px}
  #screens .stag .s-old{background:#111826}
  #screens .stag .s-old .lyr{color:#3E4C63;font-size:40px}
  #screens .stag .s-old .sub{color:#55657F}
  #screens .stag .lab{bottom:-38px}

  /* ============ caption — THE FIX: big, ink-on-scrim, lifted off the floor ============ */
  #cap{
    position:absolute;left:50%;bottom:170px;transform:translateX(-50%) translateY(18px) scale(.96);
    max-width:1360px;width:max-content;opacity:0;pointer-events:none;text-align:center;
    background:rgba(255,255,255,.94);border:1.5px solid var(--line);border-radius:999px;
    padding:20px 46px;box-shadow:0 16px 44px rgba(15,23,42,.12);
    font-size:34px;font-weight:600;color:var(--ink);letter-spacing:-.005em;line-height:1.3;
    transition:opacity .5s ease, transform .6s var(--spring);
  }
  #cap .who{font-size:26px;font-weight:600;color:var(--mut);margin-left:6px}
  #cap.on{opacity:1;transform:translateX(-50%)}

  /* ============ quote ============ */
  #quote{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:0 300px;text-align:center;opacity:0;transform:translateY(34px);
    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:72px;font-weight:750;letter-spacing:-.02em;line-height:1.18;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;padding-bottom:120px}
  #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}
  /* footnote — same readability fix: real size, ink2 on white scrim, off the floor */
  #end .foot{
    position:absolute;left:50%;bottom:84px;transform:translateX(-50%) translateY(18px);
    width:max-content;max-width:1420px;text-align:center;
    background:rgba(255,255,255,.94);border:1.5px solid var(--line);border-radius:22px;
    padding:22px 40px;box-shadow:0 14px 40px rgba(15,23,42,.10);
    font-size:23px;line-height:1.55;font-weight:500;color:var(--ink2);
    opacity:0;transition:opacity .9s var(--ease), transform .9s var(--ease);transition-delay:1.3s;
  }
  #end .foot .tm{display:block;margin-top:6px;font-size:19px;color:var(--mut)}
  #end.in .mark{opacity:1;transform:scale(1)}
  #end.in .word,#end.in .by,#end.in .tag{opacity:1;transform:none}
  #end.in .foot{opacity:1;transform:translateX(-50%)}
  #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>

    <!-- the ceiling -->
    <div id="ceiling">
      <div class="bar"></div>
      <div class="frags"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>

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

    <!-- Ruth's 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>

    <!-- 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, a worship leader">
          <g class="torsoG">
            <!-- legs + shoes -->
            <rect x="100" y="322" width="27" height="86" rx="13" fill="#2B3447"/>
            <rect x="133" y="322" width="27" height="86" rx="13" fill="#2B3447"/>
            <rect x="88"  y="400" width="50" height="17" rx="8" fill="#171E2B"/>
            <rect x="126" y="400" width="50" height="17" rx="8" fill="#171E2B"/>
            <!-- arms -->
            <g class="armL">
              <rect x="56" y="212" width="22" height="112" rx="11" fill="#5B6B8C"/>
              <circle cx="67" cy="326" r="11" fill="#B97B4F"/>
            </g>
            <g class="armR">
              <rect x="182" y="212" width="22" height="112" rx="11" fill="#5B6B8C"/>
              <circle cx="193" cy="326" r="11" fill="#B97B4F"/>
            </g>
            <!-- cardigan + collar -->
            <rect x="78" y="198" width="104" height="148" rx="38" fill="#5B6B8C"/>
            <rect x="118" y="172" width="24" height="32" fill="#C68B59"/>
            <rect x="112" y="196" width="36" height="17" rx="5" fill="#F8FAFC"/>
          </g>
          <!-- head -->
          <circle cx="130" cy="120" r="62" fill="#C68B59"/>
          <!-- hair: cap + side locks + bun -->
          <path d="M70.7 102 A62 62 0 0 1 189.3 102 Z" fill="#241A14"/>
          <rect x="60" y="96" width="22" height="66" rx="11" fill="#241A14"/>
          <rect x="178" y="96" width="22" height="66" rx="11" fill="#241A14"/>
          <circle cx="130" cy="54" r="15" fill="#241A14"/>
          <!-- face -->
          <g class="brows">
            <rect x="96"  y="107" width="21" height="5" rx="2.5" fill="#241A14"/>
            <rect x="143" y="107" width="21" height="5" rx="2.5" fill="#241A14"/>
          </g>
          <g class="browsW">
            <rect x="96"  y="105" width="21" height="5" rx="2.5" fill="#241A14" transform="rotate(-9 106 107)"/>
            <rect x="143" y="105" width="21" height="5" rx="2.5" fill="#241A14" transform="rotate(9 154 107)"/>
          </g>
          <g class="eyes">
            <circle cx="108" cy="126" r="6" fill="#1F2937"/>
            <circle cx="152" cy="126" r="6" 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>
          <g fill="none" stroke="#1F2937" stroke-width="5" stroke-linecap="round">
            <path class="m-smile" d="M112 148 Q130 163 148 148"/>
            <path class="m-flat"  d="M114 154 L146 154"/>
            <path class="m-grim"  d="M112 159 Q130 147 148 159"/>
            <path class="m-big"   d="M110 148 Q130 172 150 148"/>
          </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>

    <!-- ChurchTrac -->
    <div id="streaks" aria-hidden="true"><span></span><span></span><span></span></div>
    <div id="ctWrap" class="actor" data-state="">
      <div class="ent"><div class="bob">
        <svg id="ct" width="340" height="300" viewBox="0 0 320 300" aria-label="ChurchTrac, a friendly little checklist with a bookkeeper's visor">
          <g class="squash">
            <!-- clipboard clip -->
            <rect x="128" y="18" width="64" height="34" rx="12" fill="#9BD4B4"/>
            <!-- tucked pencil -->
            <rect x="246" y="52" width="12" height="58" rx="5" fill="#E7B75F" transform="rotate(18 252 81)"/>
            <rect x="249" y="98" width="12" height="14" rx="4" fill="#6B5138" transform="rotate(18 255 105)"/>
            <!-- card body -->
            <rect x="58" y="38" width="204" height="226" rx="36" fill="#DFF3E7"/>
            <!-- green eyeshade visor -->
            <path d="M78 92 Q160 62 242 92 L242 106 Q160 80 78 106 Z" fill="rgba(47,133,90,.5)"/>
            <!-- little waving arm -->
            <path class="armCt" d="M258 176 q32 -6 28 -36" fill="none" stroke="#9BD4B4" stroke-width="10" stroke-linecap="round"/>
            <!-- blush -->
            <ellipse cx="106" cy="150" rx="9" ry="6" fill="#F9A8D4" opacity=".35"/>
            <ellipse cx="214" cy="150" rx="9" ry="6" fill="#F9A8D4" opacity=".35"/>
            <!-- eyes -->
            <g class="eyes">
              <circle cx="132" cy="128" r="7" fill="#1E293B"/>
              <circle cx="188" cy="128" r="7" fill="#1E293B"/>
            </g>
            <g class="lids" fill="none" stroke="#1E293B" stroke-width="4" stroke-linecap="round">
              <path d="M123 116 q9 -6 18 -1"/>
              <path d="M179 115 q9 -5 18 1"/>
            </g>
            <!-- mouth -->
            <g fill="none" stroke="#1E293B" stroke-width="5" stroke-linecap="round">
              <path class="m-smile" d="M144 152 Q160 167 176 152"/>
              <path class="m-worry" d="M146 160 q7 -7 14 0 q7 7 14 0"/>
            </g>
            <!-- checklist rows -->
            <g stroke="#2F855A" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path d="M92 196 l7 8 12 -14"/>
              <path d="M92 224 l7 8 12 -14"/>
            </g>
            <rect x="122" y="194" width="104" height="8" rx="4" fill="#B9D8C6"/>
            <rect x="122" y="222" width="88"  height="8" rx="4" fill="#B9D8C6"/>
            <!-- sparks (the great-deal beam) -->
            <g class="sparks" fill="#FBBF24">
              <path class="spark" d="M84 40 l4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4 z"/>
              <path class="spark" d="M238 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="M282 176 l3 7.6 7.6 3 -7.6 3 -3 7.6 -3 -7.6 -7.6 -3 7.6 -3 z"/>
            </g>
            <!-- deflate puffs -->
            <g class="pff1" fill="none" stroke="#B9D8C6" stroke-width="5" stroke-linecap="round"><path d="M268 118 h14"/><path d="M266 132 h10"/></g>
            <g class="pff2" fill="none" stroke="#B9D8C6" stroke-width="5" stroke-linecap="round"><path d="M268 118 h14"/><path d="M266 132 h10"/></g>
            <g class="pff3" fill="none" stroke="#B9D8C6" stroke-width="5" stroke-linecap="round"><path d="M268 118 h14"/><path d="M266 132 h10"/></g>
          </g>
        </svg>
      </div></div>
      <div class="shadow" style="bottom:0"></div>
    </div>

    <!-- GLAD (locked mascot — identical to Spot 01) -->
    <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>

    <!-- credit beat — all six verified: $9 core scope, Church Connect app, automations -->
    <div id="baseChips">
      <div class="chip">
        <svg width="30" height="30" viewBox="0 0 30 30"><path d="M4 13V6a2 2 0 0 1 2-2h7l13 13-9 9L4 13z"/><circle cx="10" cy="10" r="2"/></svg>
        From $9 a month
      </div>
      <div class="chip">
        <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 &amp; check-in
      </div>
      <div class="chip">
        <svg width="30" height="30" viewBox="0 0 30 30"><path d="M10 23V7l14-3v16"/><circle cx="7" cy="23" r="3"/><circle cx="21" cy="20" r="3"/></svg>
        Worship planning
      </div>
      <div class="chip">
        <svg width="30" height="30" viewBox="0 0 30 30"><path d="M15 26s-10-6.2-10-13a5.6 5.6 0 0 1 10-3.4A5.6 5.6 0 0 1 25 13c0 6.8-10 13-10 13z"/></svg>
        Giving + a website
      </div>
      <div class="chip">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="8" y="3" width="14" height="24" rx="4"/><path d="M13 24h4"/></svg>
        Church Connect app
      </div>
      <div class="chip">
        <svg width="30" height="30" viewBox="0 0 30 30"><path d="M15 4v5M15 21v5M4 15h5M21 15h5"/><circle cx="15" cy="15" r="4"/></svg>
        Automations included
      </div>
    </div>

    <!-- the asks — vetted gaps only -->
    <div id="asks">
      <div class="chip" id="ask1">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="3" y="5" width="24" height="16" rx="3"/><path d="M15 21v4M10 25h10"/></svg>
        Can you run our Sunday screens?
      </div>
      <div class="chip" id="ask2">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="3" y="4" width="16" height="12" rx="2"/><rect x="11" y="14" width="16" height="12" rx="2"/></svg>
        Lyrics on every screen — live?
      </div>
    </div>
    <div id="rapid">
      <div class="chip" style="--i:0">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="3" y="7" width="24" height="14" rx="3"/><path d="M8 12h9M8 16h6"/></svg>
        A confidence monitor?
      </div>
      <div class="chip" style="--i:1">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="4" y="6" width="22" height="16" rx="3"/><path d="M4 26h22"/></svg>
        Stage tablets, in sync?
      </div>
      <div class="chip" style="--i:2">
        <svg width="30" height="30" viewBox="0 0 30 30"><rect x="3" y="8" width="24" height="15" rx="3"/><circle cx="15" cy="15.5" r="4"/><path d="M7 12h.1M23 19h.1"/></svg>
        Payroll?
      </div>
    </div>

    <!-- the Sunday screens -->
    <div id="screens" aria-hidden="true">
      <span class="ring"></span><span class="ring r2"></span>
      <div class="scr mon">
        <div class="tb"><span class="tb-old">sunday_slides_FINAL_v27.pptx</span><span class="tb-new">GLAD Present · LIVE</span></div>
        <div class="bd">
          <div class="s-old"><div class="lyr">Amazing Grace</div><div class="sub">Slide 4 of 31 · edited 11:48 PM Saturday</div></div>
          <div class="s-new"><div class="lyr">♪ 10,000 Reasons</div><div class="sub">Verse 2 · live</div></div>
        </div>
        <div class="lab">MAIN SCREEN</div>
        <span class="bx" style="--i:0">✕</span><span class="bok" style="--i:0">✓</span>
      </div>
      <div class="scr lobby">
        <div class="tb"><span class="tb-old">announcements.pptx</span><span class="tb-new">GLAD · LOBBY</span></div>
        <div class="bd">
          <div class="s-old"><div class="lyr" style="font-size:21px">ANNOUNCEMENTS</div><div class="sub">…from last week</div></div>
          <div class="s-new"><div class="lyr" style="font-size:21px">♪ 10,000 Reasons</div><div class="sub">Verse 2 · live</div></div>
        </div>
        <div class="lab">LOBBY TV</div>
        <span class="bx" style="--i:1">✕</span><span class="bok" style="--i:1">✓</span>
      </div>
      <div class="scr stag">
        <div class="bd">
          <div class="s-old"><div class="lyr">—</div><div class="sub">no stage view</div></div>
          <div class="s-new"><div class="lyr" style="font-size:23px">Verse 2</div><div class="sub">Chorus next · 4 bars</div></div>
        </div>
        <div class="lab">STAGE TABLET</div>
        <span class="bx" style="--i:2">✕</span><span class="bok" style="--i:2">✓</span>
      </div>
    </div>

    <!-- caption (readable: ink on scrim, lifted off the floor) -->
    <div id="cap"><span id="capTxt"></span></div>

    <!-- GLAD feature row — office parity -->
    <div id="feat">
      <div class="chip" style="--d: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 &amp; check-in
        <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:.3s">
        <svg width="28" height="28" viewBox="0 0 30 30"><path d="M15 26s-10-6.2-10-13a5.6 5.6 0 0 1 10-3.4A5.6 5.6 0 0 1 25 13c0 6.8-10 13-10 13z"/></svg>
        Giving + a 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:.6s">
        <svg width="28" height="28" viewBox="0 0 30 30"><path d="M10 23V7l14-3v16"/><circle cx="7" cy="23" r="3"/><circle cx="21" cy="20" r="3"/></svg>
        Worship planning
        <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:.9s">
        <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>
        Books &amp; payroll
        <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">I pressed Go —<br>and every screen just went.</div>
      <div class="qwho">— Ruth, worship leader</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">Easy to start. <em>Impossible to outgrow.</em></div>
      <div class="foot">
        Fair’s fair: ChurchTrac’s core starts at $9/mo and includes people, check-in, worship planning, giving,
        a website, and the Church Connect app — automations included, accounting a published $15/mo add-on.<br>
        It does not publish a presentation product, real-time multi-screen sync, stage displays, or payroll. GLAD includes them all.
        <span class="tm">ChurchTrac is a trademark of its owner, portrayed here as a friendly caricature. No affiliation or endorsement implied.</span>
      </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;

  /* ---------- cue sheet (for scoring the MP4 in post) ---------- */
  var BEATS = [
    { sec:   0.5, beat: 'ENTRANCE — Ruth walks in' },
    { sec:   0.8, beat: 'Title: "This is Ruth."' },
    { sec:   3.8, beat: 'Setup: leads worship at a small church' },
    { sec:   7.4, beat: 'Congregation in — "Small church. Small budget. Big Sunday."' },
    { sec:  11.5, beat: 'ENTRANCE — ChurchTrac (ticker-tape streaks)' },
    { sec:  12.3, beat: '"Meet ChurchTrac."' },
    { sec:  15.4, beat: 'CREDIT BEAT — six chips + sparkle beam ($9/mo core)' },
    { sec:  21.4, beat: 'Credit cont. — accounting, a published $15 add-on' },
    { sec:  25.8, beat: 'Warm plateau: "The office ran like a dream."' },
    { sec:  29.4, beat: 'Pivot: "Sunday morning asked a bigger question."' },
    { sec:  33.2, beat: 'ASK 1 — Sunday screens?' },
    { sec:  35.6, beat: 'ESCALATION TICK 1 — deflate d1, "not our thing"' },
    { sec:  39.2, beat: 'ASK 2 — lyrics on every screen, live?' },
    { sec:  41.4, beat: 'ESCALATION TICK 2 — deflate d2, ceiling dashes' },
    { sec:  45.2, beat: 'RAPID ASKS — monitor / stage tablets / payroll' },
    { sec:  47.2, beat: 'ESCALATION TICK 3 — deflate d3, ceiling SOLID (thunk)' },
    { sec:  50.4, beat: 'ChurchTrac waves goodbye, floats off' },
    { sec:  52.0, beat: 'Verdict: "A lot for nine dollars…"' },
    { sec:  55.8, beat: 'THE ACHE — Sunday screens rig in (v27 deck)' },
    { sec:  60.4, beat: 'Caption: "Which verse are we on?"' },
    { sec:  65.2, beat: '✕ flags — "Three screens. Three islands."' },
    { sec:  69.8, beat: 'Screens out — breath before the turn' },
    { sec:  70.4, beat: 'THE TURN — GLAD enters, warm wash' },
    { sec:  73.6, beat: 'Office-parity chips' },
    { sec:  78.6, beat: 'Tease: "And Sunday? Watch."' },
    { sec:  81.0, beat: 'PAYOFF — screens flip LIVE, sync rings' },
    { sec:  87.0, beat: 'Ceiling SHATTERS' },
    { sec:  87.4, beat: '"No ceiling."' },
    { sec:  89.8, beat: 'Relief — exhale + GLAD hop' },
    { sec:  91.2, beat: 'Button: real books, payroll, to the penny' },
    { sec:  95.9, beat: 'QUOTE CARD — Ruth' },
    { sec: 101.5, beat: 'PUNCH CARD — end card' },
    { sec: 102.8, beat: 'Footnote scrim in (fair-play credit)' },
    { sec: 119.0, beat: 'Replay appears — safe out-point ≈ 120s' }
  ];
  if (window.console && console.table) console.table(BEATS);

  /* ---------- 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){
    var b = $('#bubble');
    $('#bubbleTxt').textContent = text;
    b.classList.remove('show'); void b.offsetWidth;
    b.classList.add('show');
  }
  function sayOff(){ $('#bubble').classList.remove('show'); }

  function cap(html){
    $('#capTxt').innerHTML = html;
    $('#cap').classList.add('on');
  }
  function capOff(){ $('#cap').classList.remove('on'); }

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

  /* ---------- cue sheet (seconds) ---------- */
  var cues = [
    /* ACT I — meet Ruth (0–11) */
    [0.5,  function(){ cls('#ruthWrap','in'); mood('hopeful'); }],
    [0.8,  function(){ kt('This is Ruth.', 'xl'); }],
    [3.4,  ktOut],
    [3.8,  function(){ kt('Ruth leads worship at a small church.', 'lg'); }],
    [7.0,  ktOut],
    [7.4,  function(){ kt('Small church. Small budget. Big Sunday.', 'lg'); cls('#fam','in'); }],
    [10.9, function(){ ktOut(); cls('#fam','out'); }],

    /* ACT II — meet ChurchTrac: the honest credit beat (11.5–33) */
    [11.5, function(){ cls('#stage','two'); cls('#ctWrap','in'); cls('#streaks','go'); }],
    [12.3, function(){ kt('Meet ChurchTrac.', 'lg'); }],
    [14.9, ktOut],
    [15.4, function(){ kt('From nine dollars a month — and the core includes a lot.', 'md');
                       cls('#baseChips','in'); cls('#ctWrap','beam'); mood('delighted'); }],
    [20.8, function(){ ktOut(); cls('#baseChips','out'); cls('#ctWrap','beam', false); }],
    [21.4, function(){ kt('Even real accounting — a published fifteen-dollar add-on.', 'md'); mood('hopeful'); }],
    [25.2, ktOut],
    [25.8, function(){ kt('The office ran like a dream.', 'md'); }],
    [28.8, ktOut],
    [29.4, function(){ kt('Then Sunday morning asked a bigger question.', 'md'); }],
    [32.6, ktOut],

    /* ACT III — the asks, then the Sunday ache (33–70) */
    [33.2, function(){ cls('#ask1','in'); cls('#ruth','ask'); }],
    [35.6, function(){ ctState('d1'); say('Ooh… that’s not really our thing.'); }],
    [38.4, function(){ sayOff(); cls('#ask1','no'); cls('#ruth','ask', false); }],
    [39.2, function(){ cls('#ask2','in'); cls('#ruth','ask'); }],
    [41.4, function(){ ctState('d2'); say('…that’s not really our thing either.'); cls('#ceiling','dash'); }],
    [44.4, function(){ sayOff(); cls('#ask2','no'); cls('#ruth','ask', false); mood('worried'); }],
    [45.2, function(){ cls('#rapid','in'); }],
    [47.2, function(){ ctState('d3'); say('…we, um.'); cls('#ceiling','solid'); }],
    [49.6, function(){ sayOff(); cls('#rapid','no'); }],
    [50.4, function(){ cls('#ctWrap','wave'); }],
    [51.6, function(){ cls('#ctWrap','gone'); }],
    [52.0, function(){ kt('A lot for nine dollars. Just not Sunday’s screens.', 'lg'); }],
    [55.3, ktOut],
    [55.8, function(){ cls('#stage','three'); cls('#screens','in');
                       kt('So the lyrics live in a deck on the office computer.', 'md'); mood('stretched'); }],
    [59.8, ktOut],
    [60.4, function(){ cap('“Which verse are we on?” <span class="who">— the stage, most Sundays</span>'); }],
    [64.6, capOff],
    [65.2, function(){ kt('Three screens. Three islands. Every single week.', 'lg'); cls('#screens','flags'); mood('worried'); }],
    [69.2, ktOut],
    [69.8, function(){ cls('#screens','out'); }],

    /* ACT IV — GLAD (70–95) */
    [70.4, function(){ cls('#gladWrap','in'); cls('#warm','on'); kt('This is GLAD.', 'lg'); mood('hopeful'); }],
    [73.2, ktOut],
    [73.6, function(){ kt('Everything the office loved — still simple, still one place.', 'md'); cls('#feat','go'); }],
    [78.0, function(){ ktOut(); cls('#feat','bye'); }],
    [78.6, function(){ kt('And Sunday? Watch.', 'lg'); }],
    [80.6, ktOut],
    [81.0, function(){ cls('#screens','out', false); cls('#screens','live'); mood('delighted'); }],
    [82.2, function(){ kt('Lyrics. Lobby. Stage. One tap — every screen, live.', 'md'); }],
    [86.6, ktOut],
    [87.0, function(){ cls('#ceiling','broken'); }],
    [87.4, function(){ kt('No ceiling.', 'xl'); }],
    [89.8, function(){ ktOut(); mood('relieved'); cls('#ruth','exhale'); cls('#gladWrap','yay'); }],
    [91.2, function(){ kt('And yes — real books. Payroll too. To the penny.', 'md'); }],
    [95.2, ktOut],

    /* ACT V — relief, then the card (95.9–119) */
    [95.9, function(){ cls('#ruthWrap','bye'); cls('#gladWrap','bye'); cls('#screens','out');
                       cls('#warm','on', false); cls('#quote','in'); }],
    [100.9, function(){ var q = $('#quote'); q.classList.remove('in'); q.classList.add('outing'); }],
    [101.5, function(){ cls('#end','in'); }],
    [119.0, function(){ $('#replay').classList.add('show'); }]
  ];

  /* ---------- 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>