/* Feature films (feature-film.js): the visuals a page's film.js asks for.
   The stage, poster, captions, dots and buttons are the CBI film's
   (cbi-film.css, loaded first). Everything here is drawn from data; see
   marketing/FEATURE-FILMS.md. Sizes are in em of the stage's --fs, so a
   scene scales with the stage; phones held upright get a tall frame. */
.ff{--ok:#2fbf71;--okt:#e7f6ee;--okd:#1f6b45;--warn:#f59e0b;--warnt:#fff4dc;--warnd:#7a4f00;--bad:#ef5350;--badt:#fdecea;--badd:#a12b28;--info:#3f7cac;--infot:#e9f1f7;--infod:#2f5f86;--neu:#5b6574;--neut:#eef1f5}
.ff-badge{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 4px;border-radius:7px;background:var(--a);color:var(--ai);font:900 9px/1 "Public Sans",system-ui,sans-serif;letter-spacing:0}
.ff-chap::before{content:" · "}
.cbf-btns .cbf-sound[aria-pressed="false"]{color:#9fb0c6;text-decoration:line-through}
.ff .cbf-poster .cbf-cta{display:none;margin:1.4cqw auto 0;color:var(--a);font:700 max(14px,1.3cqw)/1.2 system-ui,sans-serif;font-family:inherit;text-decoration:underline}
.ff .cbf-poster.again .cbf-cta{display:inline-block}
.ff .orb span{font-size:.82em;letter-spacing:0}
.ff .ff-gone{display:none!important}

/* layouts: split (words left, visuals right), wide (words on top), center */
.ff-s .cbf-h h3 span{color:var(--a)}
.ff-dev{display:grid;gap:1em;align-content:center;justify-items:stretch}
.ff-wide{grid-template-columns:minmax(0,1fr);align-content:center;gap:2cqw}
.ff-wide .cbf-h p{max-width:none}
.ff-center{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;align-content:center;gap:1.4cqw}
.ff-center .cbf-h h3{font-size:4.6cqw;line-height:1.02}
.ff-center .cbf-h p{margin-left:auto;margin-right:auto}
.ff-center .ff-dev{justify-items:center}

/* shared bits */
.ff-v{min-width:0}
.ff-v h5{margin:0 0 .5em;font:700 .8em/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase;color:#8a5a00}
.ff-b{display:inline-block;white-space:nowrap;border-radius:999px;padding:.15em .65em;font-weight:700;font-size:.8em;border:1px solid transparent}
.ff-b.ff-ok{background:var(--okt);color:var(--okd);border-color:#b6e2c8}.ff-b.ff-warn{background:var(--warnt);color:var(--warnd);border-color:#f3d38b}
.ff-b.ff-bad{background:var(--badt);color:var(--badd);border-color:#f5c2c0}.ff-b.ff-info{background:var(--infot);color:var(--infod);border-color:#c9dbea}
.ff-b.ff-neutral{background:var(--neut);color:var(--neu);border-color:#dde3ea}

/* card (and the cards inside a phone) */
.ff-card,.ff-list,.ff-ledger,.ff-calendar,.ff-flow,.ff-map{background:#fff;color:var(--ink);border-radius:1em;padding:.9em 1em;box-shadow:0 14px 40px rgba(0,0,0,.3);font-size:1.02em}
.ff-text{margin:0 0 .5em;color:#3b4554;line-height:1.4}
.ff-row{display:flex;align-items:center;gap:.6em;padding:.42em 0;border-top:1px dashed #e1e5ec}
.ff-row:first-of-type{border-top:0}
.ff-row .ff-l{flex:1;min-width:0;font-weight:600;line-height:1.25}
.ff-row .ff-l small,.ff-li small,.ff-lrow small,.ff-box small,.ff-lane small{display:block;font-weight:500;color:#5b6574;font-size:.82em}
.ff-val{font-weight:800;white-space:nowrap}
.ff-row.on,.ff-li.on,.ff-lrow.on{background:#fff8e8;box-shadow:inset 3px 0 0 var(--a);padding-left:.5em;transition:background .3s}
.ff-btns{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.6em}
.ff-btn{display:inline-block;border-radius:.6em;padding:.38em .85em;font-weight:800;font-size:.9em;border:1px solid #d7dde6;color:#3b4554;background:#fff}
.ff-btn.ff-primary{background:#0f3d3a;border-color:#0f3d3a;color:#fff}
.ff .ff-btn.ff-press.in{animation:cbfpop .55s cubic-bezier(.2,1.4,.4,1) both,ffpress .7s ease-out calc(var(--d,0s) + .9s) both}
@keyframes ffpress{40%{transform:scale(.9);filter:brightness(.85)}100%{transform:none}}
.ff-check{margin-top:.6em;color:#1f6b45;font-weight:800}

/* phone */
.ff-phone{justify-self:center;width:20.5cqw;aspect-ratio:9/17.5;background:#0a1222;border:3px solid #33465f;border-radius:2.6cqw;padding:2.8cqw .7cqw .7cqw;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden;position:relative;font-size:.92em}
.ff-phone::before{content:"";position:absolute;top:.85cqw;left:50%;width:34%;height:1.1cqw;margin-left:-17%;background:#1b2a42;border-radius:8px}
.ff-scr{flex:1;display:flex;flex-direction:column;gap:.5em;min-height:0;background:#f4f6f9;color:var(--ink);border-radius:1.5cqw;padding:.6em;overflow:hidden;line-height:1.3}
.ff-bar{display:flex;align-items:center;gap:.5em;margin:-.6em -.6em .1em;padding:.55em .7em;background:#0f3d3a;color:#fff;font-weight:800;font-size:.95em}
.ff-bar i{display:grid;place-items:center;min-width:2em;height:2em;padding:0 .2em;border-radius:.5em;background:#f2c14e;color:#0f3d3a;font:900 .7em/1 "Public Sans",system-ui,sans-serif;font-style:normal}
.ff-bar small{margin-left:auto;font-weight:600;opacity:.75;font-size:.8em}
.ff-pcard{background:#fff;border-radius:.8em;padding:.55em .65em;box-shadow:0 1px 0 #e1e5ec,0 6px 18px rgba(15,26,46,.08);font-size:.92em}
.ff-pcard h5{font-size:.78em}

/* flow */
.ff-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:.4em}
.ff-step{position:relative;flex:1 1 0;min-width:6.5em;border:1.5px solid #dfe4ec;border-radius:.7em;padding:.5em .6em;background:#fff;transition:all .35s}
.ff-step+.ff-step{margin-left:1.1em}
.ff-step+.ff-step::before{content:"→";position:absolute;left:-1.2em;top:50%;transform:translateY(-50%);color:#9fb0c6;font-weight:900}
.ff-step b{display:block;font-size:.95em;line-height:1.2}
.ff-step small{display:block;color:#5b6574;font-size:.8em;margin-top:.15em}
.ff-step.on{border-color:var(--a);background:#fff8e8;box-shadow:0 0 0 3px rgba(245,158,11,.25)}
.ff-step.ff-t-ok.on{border-color:var(--ok);background:var(--okt);box-shadow:0 0 0 3px rgba(47,191,113,.2)}
.ff-step.ff-t-bad.on{border-color:var(--bad);background:var(--badt);box-shadow:0 0 0 3px rgba(239,83,80,.2)}

/* list */
.ff-li{display:flex;align-items:center;gap:.7em;padding:.45em 0;border-top:1px dashed #e1e5ec}
.ff-li:first-of-type{border-top:0}
.ff-li>span:not(.ff-b){flex:1;min-width:0;font-weight:700;line-height:1.25}
.ff-av{display:grid;place-items:center;width:2.1em;height:2.1em;flex-shrink:0;border-radius:50%;font-style:normal;font-weight:900;color:#fff;background:var(--info)}
.ff-av.ff-ok{background:var(--ok);color:#06301c}.ff-av.ff-warn{background:var(--warn);color:var(--ai)}.ff-av.ff-bad{background:var(--bad)}.ff-av.ff-neutral{background:#7b8798}

/* stats and chips sit on the dark stage */
.ff-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8em,1fr));gap:.8em}
.ff-stat{background:var(--n2);border:1px solid #2b3c55;border-radius:1em;padding:.8em 1em}
.ff-stat b{display:block;color:#fff;font:800 2.1em/1 "Public Sans",system-ui,sans-serif;letter-spacing:-.02em}
.ff-stat span{display:block;margin-top:.35em;color:#9fb0c6;font-size:.95em;line-height:1.3}
.ff-stat.ff-ok b{color:#4cc38a}.ff-stat.ff-warn b{color:var(--a)}.ff-stat.ff-bad b{color:#ff8a80}.ff-stat.ff-info b{color:#8ec5f0}
.ff-chips{display:flex;flex-wrap:wrap;gap:.5em}
.ff-center .ff-chips{justify-content:center}
.ff-chip{border:1px solid #33465f;background:var(--n2);border-radius:999px;padding:.35em .9em;font-weight:700;color:#e8ecf2}
.ff-chip.ff-ok{border-color:#2f7d55}.ff-chip.ff-warn{background:var(--a);border-color:var(--a);color:var(--ai)}.ff-chip.ff-bad{border-color:var(--bad);color:#ffb4ab}.ff-chip.ff-info{border-color:#3f7cac}
.ff-chip.on{background:var(--a);border-color:var(--a);color:var(--ai)}

/* two boxes, synced */
.ff-two{display:flex;align-items:center;justify-content:center;gap:1em}
.ff-box{background:var(--n2);border:1px solid #2b3c55;border-radius:.9em;padding:.7em 1em;text-align:center;color:#e8ecf2;min-width:0}
.ff-box b{display:block;color:#fff}
.ff-box small{color:#9fb0c6}
.ff-box .ff-b{margin-top:.4em}
.ff-arrow{font-style:normal;color:var(--a);font-size:1.8em;font-weight:900}

/* ledger */
.ff-lrow{display:flex;align-items:center;gap:.6em;padding:.42em 0;border-top:1px dashed #e1e5ec}
.ff-lrow:first-of-type{border-top:0}
.ff-lrow>span:not(.ff-b){flex:1;min-width:0;font-weight:600}
.ff-lrow em{font-style:normal;font:800 1em/1 "JetBrains Mono",ui-monospace,monospace;white-space:nowrap}
.ff-lrow.ff-t-ok em{color:var(--okd)}.ff-lrow.ff-t-bad em{color:var(--badd)}.ff-lrow.ff-t-warn em{color:var(--warnd)}
.ff-total{border-top:2px solid #18212e;font-weight:800}

/* map */
.ff-mapbox{position:relative;aspect-ratio:16/9;border-radius:.7em;overflow:hidden;background:#e9eef2;
  background-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0),linear-gradient(#fff 0 0),linear-gradient(90deg,#fff 0 0),linear-gradient(90deg,#fff 0 0),radial-gradient(circle at 70% 30%,#d6e8d4 0 18%,transparent 19%);
  background-size:100% 6px,100% 4px,100% 4px,6px 100%,4px 100%,100% 100%;background-position:0 30%,0 68%,0 88%,28% 0,72% 0,0 0;background-repeat:no-repeat}
.ff-mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.ff-route{fill:none;stroke:var(--a);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
.ff-mapbox svg .ff-route{stroke-width:3}
.ff-pin{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:.15em}
.ff-pin i{display:grid;place-items:center;width:1.1em;height:1.1em;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);font-style:normal;font-size:.8em;font-weight:900;color:#fff;background:var(--info)}
.ff-pin.ff-tech i{width:2em;height:2em;background:#0f1a2e;color:var(--a);border-color:var(--a)}
.ff-pin.ff-ok i{background:var(--ok)}.ff-pin.ff-warn i{background:var(--warn)}.ff-pin.ff-bad i{background:var(--bad)}.ff-pin.ff-neutral i{background:#7b8798}
.ff-pin small{background:rgba(255,255,255,.92);border-radius:.4em;padding:.05em .4em;font-size:.72em;font-weight:700;white-space:nowrap;color:#18212e}
.ff-eta{position:absolute;right:.5em;bottom:.5em;background:#0f1a2e;color:#fff;border-radius:999px;padding:.3em .8em;font-weight:800;font-size:.85em}

/* calendar */
.ff-cal{display:grid;gap:.3em}
.ff-hours,.ff-lane{display:grid;grid-template-columns:5.6em minmax(0,1fr);align-items:center;gap:.5em}
.ff-hours div{position:relative;height:1.1em}
.ff-hours i{position:absolute;font-style:normal;font-size:.72em;color:#7b8798;transform:translateX(-30%)}
.ff-lane>span{font-weight:700;font-size:.9em;line-height:1.15}
.ff-lane>div{position:relative;height:2.3em;border-radius:.5em;background:repeating-linear-gradient(90deg,#f1f4f8 0 calc(12.5% - 1px),#e3e8ef calc(12.5% - 1px) 12.5%)}
.ff-blk{position:absolute;top:.25em;bottom:.25em;left:var(--x);width:var(--w);border-radius:.4em;padding:0 .4em;font-size:.72em;font-weight:700;color:#fff;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:var(--info)}
.ff-blk.ff-ok{background:var(--ok);color:#06301c}.ff-blk.ff-warn{background:var(--warn);color:var(--ai)}.ff-blk.ff-bad{background:var(--bad)}.ff-blk.ff-neutral{background:#7b8798}
.ff-blk.ff-ghost{background:rgba(63,124,172,.12);color:var(--infod);border:1.5px dashed var(--info)}
.ff-blk.ff-clash{box-shadow:0 0 0 2px var(--bad);background:var(--badt);color:var(--badd);border:0}
.ff-blk.on{box-shadow:0 0 0 2px var(--a),0 0 0 5px rgba(245,158,11,.3)}
.ff-lane.ff-t-neutral>span{color:#7b8798}

/* chat */
.ff-chat{display:grid;gap:.5em}
.ff-msg{max-width:24em;justify-self:start;border-radius:1em 1em 1em .25em;padding:.5em .75em;background:var(--n2);border:1px solid #2b3c55;color:#e8ecf2;font-size:1.02em;line-height:1.35}
.ff-msg.ff-me{justify-self:end;border-radius:1em 1em .25em 1em;background:var(--a);color:var(--ai);border-color:var(--a);font-weight:600}
.ff-msg small{display:block;font-size:.78em;opacity:.75;margin-top:.2em}

/* orb and call to action */
.ff-v.orb{justify-self:center}
.ff-center>.orb{margin-bottom:.6cqw}
.ff-cta{display:inline-block;justify-self:center;background:var(--a);color:var(--ai);border-radius:999px;padding:.55em 1.2em;font-weight:800;font-size:1.25em}

/* tree: a workflow, lit node by node; branches show what else could happen */
.ff-tree h5{color:var(--a)}
.ff-trunk{list-style:none;margin:0;padding:0;display:grid;gap:.25em;position:relative}
.ff-node{position:relative;display:grid;grid-template-columns:1.5em minmax(0,1fr) auto;grid-template-areas:"dot lbl st" ". brs brs";column-gap:.6em;align-items:center;padding:.3em .5em .3em .2em;border-radius:.7em;opacity:.42;transition:opacity .4s,background .4s}
.ff-node+.ff-node::before{content:"";position:absolute;left:calc(.2em + .75em - 1px);top:-.55em;height:.9em;width:2px;background:#33465f}
.ff-node.on+.ff-node::before{background:#4cc38a}
.ff-dot{grid-area:dot;justify-self:center;width:1em;height:1em;border-radius:50%;border:2px solid #4a5d78;background:var(--n);font-style:normal}
.ff-nl{grid-area:lbl;min-width:0;line-height:1.2}
.ff-nl b{display:block;color:#e8ecf2;font-size:1.02em}
.ff-nl small{display:block;color:#9fb0c6;font-size:.8em}
.ff-st{grid-area:st;visibility:hidden}
.ff-brs{grid-area:brs;display:flex;flex-wrap:wrap;gap:.35em;margin-top:.25em}
.ff-br{display:inline-flex;align-items:baseline;gap:.35em;border:1px dashed #4a5d78;border-radius:.6em;padding:.15em .55em;color:#9fb0c6;font-size:.8em;opacity:.75;transition:all .4s}
.ff-br::before{content:"↳";color:#6b7f99}
.ff-br b{color:#c9d3df;font-weight:700}
.ff-br small{color:#8a9ab0}
.ff-node.on{opacity:1}
.ff-node.on .ff-dot{background:#4cc38a;border-color:#4cc38a}
.ff-node.on .ff-st{visibility:visible}
.ff-node.here{background:rgba(245,158,11,.10);box-shadow:inset 0 0 0 1px rgba(245,158,11,.45)}
.ff-node.here .ff-dot{background:var(--a);border-color:var(--a);animation:ffpulse 1.4s ease-out infinite}
.ff-node.here .ff-nl b{color:#fff}
@keyframes ffpulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.6)}100%{box-shadow:0 0 0 .7em rgba(245,158,11,0)}}
.ff-br.on{opacity:1;border-style:solid;border-color:var(--a);background:rgba(245,158,11,.14);color:#fff}
.ff-br.on b{color:#fff}
.ff-br.here{background:var(--a);color:var(--ai);border-color:var(--a)}
.ff-br.here b,.ff-br.here small,.ff-br.here::before{color:var(--ai)}
.ff-compact{font-size:.78em}
.ff-compact .ff-nl small,.ff-compact .ff-br small{display:none}
.ff-compact .ff-trunk{gap:.12em}
.ff-compact .ff-node{padding-top:.18em;padding-bottom:.18em}
.ff-compact .ff-brs{margin-top:.05em;gap:.25em}
.ff-compact .ff-trunk.ff-cols{grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows),auto);column-gap:1.2em}
.ff-compact .ff-br{font-size:.72em;padding:.05em .45em}
/* steps: what has been done, with times */
.ff-tl{list-style:none;margin:0;padding:0;display:grid;gap:.35em}
.ff-ti{display:grid;grid-template-columns:4.2em minmax(0,1fr);column-gap:.6em;align-items:baseline;background:var(--n2);border:1px solid #2b3c55;border-left:3px solid #4cc38a;border-radius:.6em;padding:.4em .7em;color:#e8ecf2}
.ff-ti time{font:700 .85em/1.2 "JetBrains Mono",ui-monospace,monospace;color:var(--a)}
.ff-ti b{font-size:.98em}
.ff-ti small{grid-column:2;color:#9fb0c6;font-size:.8em}
.ff-ti.ff-warn{border-left-color:var(--warn)}.ff-ti.ff-bad{border-left-color:var(--bad)}.ff-ti.ff-info{border-left-color:var(--info)}.ff-ti.ff-neutral{border-left-color:#7b8798}
.ff-tl.ff-h{display:flex;flex-wrap:wrap;gap:.45em}
.ff-tl.ff-h .ff-ti{display:flex;flex-direction:column;gap:.1em;flex:1 1 7em;min-width:0}

/* The intro, in words (build-film-transcripts.mjs): every line, as text. */
.film-words{margin:6px 0 26px;border:1px solid rgba(127,140,160,.35);border-radius:12px;padding:10px 16px}
.film-words summary{cursor:pointer;font-weight:700}
.film-words ol{margin:12px 0 4px;padding-left:1.3em}
.film-words li{margin:0 0 12px}
.film-words h3{margin:0 0 4px;font-size:1.02rem}
.film-words p{margin:0 0 4px}

@media (max-width:700px) and (orientation:portrait){
  .ff-eb1{display:none}
  .ff-chap::before{content:none}
  .ff-s .cbf-h p{display:none}
  .ff-mhide{display:none!important}
  .ff-dev{gap:.7em;align-content:start}
  .ff-center{grid-template-rows:none;align-content:center;padding-bottom:30cqw}
  .ff .cbf-btns button{white-space:nowrap}
  .ff-center .cbf-h h3{font-size:9cqw}
  .ff-phone{width:50cqw;border-radius:6cqw;padding:7cqw 1.8cqw 1.8cqw}
  .ff-phone::before{top:2.2cqw;height:2.6cqw}
  .ff-scr{border-radius:4cqw}
  .ff-steps{flex-direction:column;flex-wrap:nowrap;gap:.9em}
  .ff-step+.ff-step{margin-left:0}
  .ff-step+.ff-step::before{content:"↓";left:50%;top:-1.05em;transform:translateX(-50%)}
  .ff-step{padding:.35em .6em}
  .ff-step small{display:none}
  .ff-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em}
  .ff-stat b{font-size:1.7em}
  .ff-hours,.ff-lane{grid-template-columns:4.2em minmax(0,1fr)}
  .ff-two{gap:.5em}
  .ff-node{grid-template-columns:1.3em minmax(0,1fr) auto;padding:.22em .4em .22em .1em}
  .ff-nl small{display:none}
  .ff-br small{display:none}
  .ff-br{font-size:.74em;padding:.1em .45em}
  .ff-node:not(.on):not(.here) .ff-brs{display:none}
  .ff-tl.ff-h{display:grid}
  .ff-compact .ff-trunk.ff-cols{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  /* a long list of steps stays above the caption */
  .ff-tl{max-height:92cqw;overflow:hidden;gap:.25em}
  .ff-ti{padding:.28em .6em}
  .ff-ti small{font-size:.74em}
  .ff-compact .ff-node{grid-template-columns:1.3em minmax(0,1fr) auto;grid-template-areas:"dot lbl st"}
  .ff-compact .ff-brs{display:none}
  .ff-tl.ff-h .ff-ti{display:grid}
  .ff-box{padding:.5em .6em}
}
@media (prefers-reduced-motion: reduce){
  .ff .ff-btn.ff-press.in{animation:none;opacity:1}
}