/* v58 (14 Oct 2026): one colour system. The buttons were jade but the icons, cards, film and figures were blue,
   violet and navy, so the page read as two brands. Everything now comes from the jade family:
   jade #007F61 (brand), deep jade #00694F (links, small text on white), bright jade #00A676 (lines, highlights),
   mint #E6F4EE (soft fills), forest #0A3A2D, graphite #121715 to #3A413E, copper #9A5B2D only for the payments card,
   coral #D9442C only for costs, gold only for money. Loaded last. */
:root{--j:#007F61;--j-ink:#00694F;--j-hi:#00A676;--j-mint:#E6F4EE;--j-mint2:#CFE8DD;--j-forest:#0A3A2D;--z50-ok:#00694F;--z50-okbg:#E3F4EC}

/* figures and links that were blue */
.fe42-r.best .cost,.fe42-month b.now,.fe42-month .now,.fe42-calc td:last-child{color:var(--j)!important}
.fe42-r.best{box-shadow:inset 0 0 0 2px var(--j)}
.fe42-calc summary,.z57-one>summary,.tlink,.z55-cost .tlink,.z55-end .tlink,.pa42-m .tlink{color:var(--j-ink)!important}
.f46 .f42-tag.b b,.sx45-steps .vis.prof .r.n b{color:var(--j)}
.sx45-steps .vis.prof .r.n{background:var(--j-mint)}
.sx45-c:target{box-shadow:inset 0 0 0 2px var(--j)}
.z51-row summary:focus-visible{outline-color:var(--j)}

/* the small product cards (Flow jobs, Partners) */
.u-bars i,.u-leg i{background:var(--j-hi)}
.u-leg i.o{background:var(--j-mint2)}
.u-arr{color:var(--j)}
.u-acct.r i{background:linear-gradient(90deg,var(--j-hi) var(--w),#EEF1EF var(--w))}
.u-spark polyline{stroke:var(--j-hi)}
.u-chip{background:var(--j-mint);color:var(--j-ink)}

/* the Flow page's phone: a deep green screen and a green bank tile instead of navy and blue */
.z55-ph-s{background:linear-gradient(170deg,#1D4A3E 0%,#0F3A30 48%,#0A1F1A 100%)}
.z55-bk{background:linear-gradient(160deg,#1F8A69,#0A4E3B)}

/* "Where is your company based?": BVI and Cayman as their two flags, like every other place */
.z50-pick .zv-fl.many svg+svg{margin-left:-6px;box-shadow:0 0 0 2px #1E2025}   /* the BVI crest stays visible */

/* ===================== the film, designed light (v58) =====================
   v57 made the dark film light by inverting it, which turned every dark card into a flat grey card on a grey page.
   Here the film is styled light on purpose: white cards with soft, layered shadows on a pale studio background,
   ink text, coral for what today's bank loses, jade for the new route, the matches and everything that is done.
   Scoped to #filmZ so it outranks every earlier film rule (f36 to f48). Exported by tools/render-film-v58.mjs. */
#filmZ{--fi:#0B0D12;--fm:#5C6460;--fl:rgba(11,13,18,.07);--fsoft:#F3F6F4;--fco:#D9442C;--fj:#007F61;--fjh:#00A676;--fji:#00694F;--fmint:#E3F4EC;
  --fsh:0 1px 2px rgba(16,32,26,.05),0 2px 6px rgba(16,32,26,.04),0 28px 56px -28px rgba(16,40,32,.26);--fbd:0 0 0 1px rgba(11,13,18,.06)}
#filmZ .fm-stage,#filmZ .fm-sum{color:var(--fi);background:radial-gradient(110% 85% at 50% -12%,#FFFFFF 0%,#F6F8F7 48%,#EAF0ED 100%)}
#filmZ .fm-view::after{display:none}
#filmZ .fm-stage .cap40{color:var(--fi)}
#filmZ .fm-stage.tall .fx.veil{background:linear-gradient(180deg,rgba(246,248,247,0) 28%,rgba(246,248,247,.86) 58%)}
/* cards and panels */
#filmZ .fm-stage .panel,#filmZ .fm-stage .f43-receipt,#filmZ .fm-stage .f43-total,#filmZ .fm-stage .f48-note,#filmZ .fm-stage .chip40,#filmZ .fm-stage .f43-pay,#filmZ .fm-stage .f42-tag,#filmZ .fm-stage .f42-due{
  background:#fff;border-color:transparent;box-shadow:var(--fbd),var(--fsh);color:var(--fi)}
#filmZ .fm-stage .chip40 b,#filmZ .fm-stage .f42-lab b,#filmZ .fm-stage .f43-pay b,#filmZ .fm-stage .f43-receipt b,#filmZ .fm-stage .f43-total b,#filmZ .fm-stage .f47-k b{color:var(--fi)}
#filmZ .fm-stage .chip40 span,#filmZ .fm-stage div>span,#filmZ .fm-stage .f42-lab span,#filmZ .fm-stage .f47-k span,#filmZ .fm-stage .f43-total p.h,#filmZ .fm-stage .f43-total .set span,#filmZ .fm-stage .ev span{color:var(--fm)}
/* chapter 1: the documents and the profile */
#filmZ .fm-stage .f48-sheet .grp{background:var(--fsoft)}
#filmZ .fm-stage .f48-sheet .row.on{background:var(--fmint)}
#filmZ .fm-stage .f48-sheet p.st{color:var(--fi);box-shadow:none}
#filmZ .fm-stage .f48-sheet p.sh,#filmZ .fm-stage .f48-sheet .tx span{color:var(--fm)}
#filmZ .fm-stage .f48-sheet .tx b{color:var(--fi)}
#filmZ .fm-stage u.ok{color:var(--fji)}
#filmZ .fm-stage .ok i{background-color:var(--fjh);border-radius:50%}
#filmZ .fm-stage .f46-pf p.co,#filmZ .fm-stage .f46-pf b,#filmZ .fm-stage .f46-pf em{color:var(--fi)}
#filmZ .fm-stage .f46-pf p.ty,#filmZ .fm-stage .f46-pf p.rd,#filmZ .fm-stage .f46-pf span.l{color:var(--fm)}
#filmZ .fm-stage .f46-pf .r.hot span.l{color:var(--fji)}
#filmZ .fm-stage .f46-pf .r{border-color:var(--fl)}
#filmZ .fm-stage i.sk{background:rgba(11,13,18,.07)}
/* chapter 2 and 5: the map, today's route (coral) and the new one (jade) */
#filmZ .f42-map path{stroke:rgba(16,48,38,.16)}
#filmZ .fl-svg .f43-base{stroke:rgba(11,13,18,.12)}
#filmZ .fl-svg .f42-r.a{stroke:var(--fco)}
#filmZ .fl-svg .f42-r.b{stroke:var(--fjh)}
#filmZ .fm-stage .f42-pin i{background:var(--fi);box-shadow:0 0 0 5.5px rgba(11,13,18,.09)}
#filmZ .fm-stage .f42-pin.co i{background:var(--fj);box-shadow:0 0 0 6.5px rgba(0,127,97,.16)}
#filmZ .fm-stage .f42-tag.a b,#filmZ .fm-stage b.lost,#filmZ .fm-stage .f43-total .a b:first-child,#filmZ .fm-stage .f43-total:not(.good) b{color:var(--fco)}
#filmZ .fm-stage .f42-tag.b b{color:var(--fj)}
#filmZ .fm-stage .f42-tag span{color:var(--fm)}
#filmZ .fm-stage .f43-drop,#filmZ .fm-stage .f43-gate.a{background:var(--fco)}
#filmZ .fm-stage .f43-pay.a{box-shadow:0 0 0 1.5px var(--fco),var(--fsh)}
#filmZ .fm-stage .f43-pay.b{box-shadow:0 0 0 1.5px var(--fjh),var(--fsh)}
#filmZ .fm-stage .f43-pay em.ev{background:var(--fsoft);box-shadow:var(--fbd)}
#filmZ .fm-stage .f43-ring.b{border-color:var(--fjh)}
#filmZ .fm-stage .f43-total.good b{color:var(--fi)}
#filmZ .fm-stage .f43-total p.was{color:var(--fm)}
#filmZ .fm-stage .f43-total .set{border-color:var(--fl)}
#filmZ .fm-stage .f43-total .set em{color:var(--fi)}
#filmZ .fm-stage .ux .u0{color:#C2392A}
#filmZ .fm-stage .ux .u1{color:var(--fji)}
#filmZ .fm-stage .f48-note .nm,#filmZ .fm-stage .f48-note .nh b{color:var(--fi)}
#filmZ .fm-stage .f48-note .ns,#filmZ .fm-stage .f48-note .nh span{color:var(--fm)}
/* chapter 3: what you need, matching and the three matches */
#filmZ .fm-stage .znr{background:var(--fsoft)}
#filmZ .fm-stage .znr p{color:var(--fi)}
#filmZ .fm-stage .znr.on{background:var(--fmint)}
#filmZ .fm-stage .ztag{color:var(--fji)}
#filmZ .fm-stage p.zh{color:var(--fi)}
#filmZ .fm-stage p.zh.sm,#filmZ .fm-stage p.zs{color:var(--fm)}
#filmZ .fm-stage .zpl{background:#EDF1EF;color:#3D4541}
#filmZ .fm-stage .zpl.b{background:var(--fmint);color:var(--fji)}
#filmZ .fm-stage .zcr{border-color:var(--fl)}
#filmZ .fm-stage .zcn b{color:var(--fi)}
#filmZ .fm-stage .zcn span{color:var(--fm)}
#filmZ .fm-stage .zsc b{color:var(--fm)}
#filmZ .fm-stage .zcr.fit .zsc b{color:var(--fj)}
#filmZ .fm-stage .zsc i{background:rgba(11,13,18,.08)}
#filmZ .fm-stage .zsc i s{background:rgba(11,13,18,.26)}
#filmZ .fm-stage .zcr.fit .zsc i s{background:var(--fjh)}
#filmZ .fm-stage .zc .bd{color:var(--fi)}
#filmZ .fm-stage .zc.open .bd{color:var(--fji)}
#filmZ .fm-stage .zc{box-shadow:0 1.5px 3.6px rgba(16,32,26,.14),0 18px 40px -16px rgba(16,40,32,.38),inset 0 0 0 .5px rgba(255,255,255,.22)}
/* chapter 4: one after the other, or all together */
#filmZ .fm-stage .tl-tr{background:#EDF1EF}
#filmZ .fm-stage .tl-tr i{background:rgba(11,13,18,.26)}
#filmZ .fm-stage .tl-ln.par .tl-tr i{background:var(--fjh)}
#filmZ .fm-stage .tl-who b{color:var(--fi)}
#filmZ .fm-stage .tl-t.par{color:var(--fji)}
#filmZ .fm-stage .tl-t.seq,#filmZ .fm-stage .tl-end,#filmZ .fm-stage .tl-ax span{color:var(--fm)}
/* chapter 6: you pay when it works, and the end card */
#filmZ .fm-stage .f42-due span{color:#3F4743}
#filmZ .fm-sum h3{color:var(--fi)}
#filmZ .fm-sum .fm-sub{color:var(--fm)}
#filmZ .fm-sum .fm-cta{background:var(--fj);color:#fff;box-shadow:none}
#filmZ .fm-sum .fm-logo{filter:none}
/* the dark film's text shadows, swapped for a soft light halo that keeps words clear over the map's dots */
#filmZ .fm-stage *{text-shadow:none}
#filmZ .fm-stage .f42-lab b,#filmZ .fm-stage .f42-lab span,#filmZ .fm-stage .cap40{text-shadow:0 0 10px rgba(246,248,247,.95),0 0 3px rgba(246,248,247,.95)}
#filmZ .fm-stage .ok i{color:#fff}
#filmZ .fm-stage .f43-total.good .a b,#filmZ .fm-stage .f43-total.good .a b:first-child{color:var(--fj)}
/* the closing shot: the client's three new cards, rendered in Blender (tools/cards58.py), above the last line */
#filmZ .fm-sum .fm-hero58{width:21em;margin:-1.2em 0 -.9em}
#filmZ .fm-stage.tall .fm-sum .fm-hero58{width:18.5em;margin:-1em 0 -.6em}
#filmZ .fm-sum .fm-hero58 img{display:block;width:100%;height:auto;transform-origin:50% 60%}
/* the film's in-between moments: the payment passing a gate, the toll ring, the document being read */
#filmZ{--mint:var(--fjh)}
#filmZ .zi{--zc:var(--fj)}
#filmZ .fm-stage .f43-gate.b{background:var(--fjh)}
#filmZ .fm-stage .f43-ring{border-color:var(--fco)}
#filmZ .fm-stage .f43-ring.b{border-color:var(--fjh)}
#filmZ .fm-stage .f45-pay.b .ev{color:var(--fji)}
#filmZ .fm-stage .f46-doc.on{background:var(--fmint);box-shadow:inset 0 0 0 1.5px rgba(0,127,97,.45)}

/* ===================== v58 round 4 (14 Oct): icons and text, laid out so the eye knows where to go =====================
   Owner: the icons in "Who it's for" and "There's a right set" don't look centred; make the text clearer (bold where
   the attention should go); the "Get paid and pay" box looks off next to "Banking".
   - the two icon grids are centred: the object centred over a centred title and line (the renders are centred on the
     object, so no left-edge correction any more); titles in one weight, the line in grey with its key words in ink;
   - the titles of a row start on the same line (they no longer sit on the description);
   - Services: the two boxes of a row are the same height and their cards share the room; each card's icon lines up
     with its title, not with the middle of the card; the examples and "and more" fit on one line. */
@media(min-width:735px){
 .sx48-who>.sx48-t{justify-items:center;text-align:center;padding:26px 22px 28px}
 .sx48-who>.sx48-t>h3{align-self:start}
 .sx48-t .zi5{width:128px;height:128px;margin:-8px auto 6px}
 .sx48-t:hover .zi5{transform:translateY(-4px)}
}
.sx48-t h3{font-weight:650;color:var(--z50-ink)}
.sx48-t p{color:var(--z50-muted)}
.sx48-t p b,.z53-set .z53-grid p b,.z51-row .z51-tx>span b{display:inline;margin:0;font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:600;color:#1D2421}

@media(min-width:735px){
 .z53-set .z53-grid article{align-items:center;text-align:center}
 .z53-set .z54-o{width:140px;max-width:none;aspect-ratio:1;margin:0 auto 6px!important}
}
.z53-set .z53-grid h3{font-weight:650}

@media(min-width:901px){
 .sx45-groups{align-items:stretch}
 .z51-g{display:flex;flex-direction:column}
 .z51-g>.z51-list{flex:1;display:flex;flex-direction:column}
 .z51-g>.z51-list>.z51-row{flex:1 1 auto}
}
.z51-row summary{align-items:start}
.z51-row .z51-im{align-self:start;padding-top:2px}
.z51-im .zi5{width:64px;height:64px;margin:-6px 0 -4px}
.z51-tx b{font-weight:650}
.z51-chev{padding-top:4px}
.z51-side .lgs{--lh:15px;gap:8px 14px}