/* cybee v3 · cy-flow, the story flow picture (10 Oct 2026). Contract and markup: SYSTEM-v3.md §3.42, gallery /system-v3#flow.
   One picture per page that starts in the visitor's own moment and reads left to right like the landing hero (sections/s1-hero.*):
   the trigger, cybee on your Macs (rows with states, the /cybee question and its one line answer), what cybee did (two to four
   chips), the Trust Passport, the asker. Same grey stage, white hairline nodes, radii 6/10/14/999, chip icons and colours, Passport
   ridge and seal, thin grey wires that turn violet for proof, the landing's easing and pace.
   Rules:
   - The resting picture is the default CSS: no JS, reduced motion, ?motion=still, print and a failed script all show it. The story
     only plays under html.js with motion welcome (the gate below), paused on its first frame until js/flow.js plays it. If the
     script never marks the figure live, html.intro-safe (the head script, 2.5s) brings the resting picture back.
   - Nothing appears that is not there at rest (the landing's rule): wires draw, states and chip icons pop, the question types, the
     Passport warms, ridges and seals. Nodes never fade, so the wires (their pseudo elements) are never hidden with them.
   - Wires are CSS: every step draws the wire that comes into it (::before), a chip list draws its brackets (first chip) and stubs,
     the junction where a fan meets one node is a small SVG with a stage grey mask over the bus. No coordinates per page.
   - Wide (the figure's content box 1090px and up): one row of fixed width steps on a 1280px band, zoomed like the landing between
     1090 and 1279. Tall (below, tablets and phones): one column, vertical wires, phone text 15px and labels 13px or more.
   - Every text sits in its own block (<p>), so each one is one clean unit for tools/i18n (German pictures speak German). */

@property --fl-a{syntax:'*';inherits:false}
@property --fl-arc{syntax:'<angle>';inherits:false;initial-value:360deg}

/* ------------------------------------------------------------------------------------------------ the stage */
.cy-flow{grid-column:1/-1;position:relative;box-sizing:border-box;min-width:0;margin:0;padding:32px 24px 64px;border-radius:14px;background:#F2F2F2;
  container-type:inline-size;color:#151515;
  --fl-ink:#151515;--fl-mut:#5B606B;--fl-line:#DBDEE4;--fl-soft:#EEF0F3;--fl-wire:#7C818A;--fl-blue:#2757C9;--fl-bluew:#EEF3FF;
  --fl-mint:#00D4A0;--fl-teal:#007A59;--fl-tealw:#E1FBF2;--fl-vio:#6938EF;--fl-vio2:#794DFF;--fl-viow:#F0EBFF;--fl-org:#FF6B2B;
  --fl-orgw:#FFF0E6;--fl-red:#C91432;--fl-redw:#FFEBEE;--fl-grey:#EFF1F4;
  --fl-ex:cubic-bezier(.16,1,.3,1);--fl-io:cubic-bezier(.65,0,.35,1);--fl-g:48px;--fl-rg:16px;--end:4.2s}
/* phones: edge to edge like the hero stage (.cy-phero__fig--stage); cy-flow--inset keeps the rounded stage inside the gutter */
@media (max-width:767px){.cy-flow:not(.cy-flow--inset){margin-inline:calc(-1 * var(--pg-gutter));padding-inline:var(--pg-gutter);border-radius:0}}

.cy-flow__band{position:relative;display:flex;flex-direction:column;align-items:stretch;max-width:560px;margin-inline:auto;
  --fl-l:15px;--fl-tt:16px;--fl-m:13px;--fl-tag:13px}
.cy-flow__band ul{list-style:none;margin:0;padding:0}
.cy-flow__step{position:relative;box-sizing:border-box;min-width:0}
.cy-flow__l{min-width:0;font-size:var(--fl-l);line-height:1.3;letter-spacing:.005em;color:var(--fl-ink);overflow-wrap:break-word;text-wrap:pretty}
.cy-flow__tm,.cy-flow__time,.cy-flow__pd{font-family:var(--font-mono);font-size:var(--fl-m);line-height:1.3;color:var(--fl-mut);font-variant-numeric:tabular-nums}
.cy-flow__tag{font-family:var(--font-mono);font-size:var(--fl-tag);line-height:1.2;color:var(--fl-vio);white-space:nowrap}
html[lang^="de"] .cy-flow__band{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}

/* icons: stroke drawings as masks, so a page writes <i class="cy-flow__ic cy-flow__ic--lock"></i> and never draws */
.cy-flow__ic{display:block;flex:none;width:20px;height:20px;background:var(--fl-ink);-webkit-mask:var(--fl-i) center/contain no-repeat;mask:var(--fl-i) center/contain no-repeat}
.cy-flow__ic--settings{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h9M17 8h3M4 16h3M11 16h9'/%3E%3Ccircle cx='15' cy='8' r='2'/%3E%3Ccircle cx='9' cy='16' r='2'/%3E%3C/svg%3E")}
.cy-flow__ic--apps{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E")}
.cy-flow__ic--ext{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9V5h4a2 2 0 1 1 4 0h4v4a2 2 0 1 1 0 4v4h-4a2 2 0 1 0-4 0H5v-4a2 2 0 1 0 0-4z'/%3E%3C/svg%3E")}
.cy-flow__ic--agents{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='7' height='7' rx='2'/%3E%3Cpath d='M11 12.5h4M14 8l3-3M14 17l3 3'/%3E%3Ccircle cx='18' cy='12.5' r='1.6'/%3E%3Ccircle cx='18.5' cy='4.5' r='1.6'/%3E%3Ccircle cx='18.5' cy='20.5' r='1.6'/%3E%3C/svg%3E")}
.cy-flow__ic--workspace{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.6-1.2A4.1 4.1 0 0 1 17 18z'/%3E%3C/svg%3E")}
.cy-flow__ic--building{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20V6.5L12 4v16M12 9h6v11M4 20h16M9 9v.01M9 13v.01M9 16.5v.01M15 13v.01M15 16.5v.01'/%3E%3C/svg%3E")}
.cy-flow__ic--lock{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5M12 14.5v2'/%3E%3C/svg%3E")}
.cy-flow__ic--disk{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2.5'/%3E%3Cpath d='M4 14h16M16.5 16.6v.01'/%3E%3C/svg%3E")}
.cy-flow__ic--shield{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8 5.5 6.3v5.2c0 4.1 2.7 7.3 6.5 8.7 3.8-1.4 6.5-4.6 6.5-8.7V6.3z'/%3E%3C/svg%3E")}
.cy-flow__ic--person{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c.9-3.6 3.6-5.6 7-5.6s6.1 2 7 5.6'/%3E%3C/svg%3E")}
.cy-flow__ic--team{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='3'/%3E%3Cpath d='M3.5 19c.7-3 2.8-4.6 5.5-4.6s4.8 1.6 5.5 4.6M15 6.2a3 3 0 0 1 0 5.6M17 14.8c1.8.5 3 1.9 3.5 4.2'/%3E%3C/svg%3E")}
.cy-flow__ic--form{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.8h7l4 4v12.4H7z'/%3E%3Cpath d='M14 3.8v4h4M10 12h5M10 15.5h5'/%3E%3C/svg%3E")}
.cy-flow__ic--bell{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 16.5h11l-1.4-2.1V10a4.1 4.1 0 0 0-8.2 0v4.4zM10.5 19.2h3'/%3E%3C/svg%3E")}
.cy-flow__ic--key{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='15.5' r='3.5'/%3E%3Cpath d='M11 13 19 5M16.5 7.5l2 2M14.5 9.5l1.5 1.5'/%3E%3C/svg%3E")}
.cy-flow__ic--drive{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a1.5 1.5 0 0 1 1.5-1.5h3.8l2 2.5h7.2A1.5 1.5 0 0 1 20 9.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5z'/%3E%3C/svg%3E")}
.cy-flow__ic--mac{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M3 18.5h18'/%3E%3C/svg%3E")}
.cy-flow__ic--calendar{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E")}
.cy-flow__ic--chat{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H11l-4 3.5v-3.5h-.5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E")}
.cy-flow__ic--mail{--fl-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='16' height='12' rx='2'/%3E%3Cpath d='m4.5 7 7.5 6 7.5-6'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------------------------------------------ 1 the trigger (the visitor's moment) */
.cy-flow__trig{padding:14px 16px 16px;background:#fff;border:1px solid var(--fl-line);border-radius:14px;
  box-shadow:0 1px 2px rgba(21,21,21,.05),0 12px 28px -16px rgba(21,21,21,.18)}
.cy-flow__th{display:flex;align-items:center;gap:12px}
.cy-flow__tw{flex:1;min-width:0}
.cy-flow__tt{font-size:var(--fl-tt);font-weight:500;line-height:1.3;color:var(--fl-ink);overflow-wrap:break-word;text-wrap:pretty}
.cy-flow__tw .cy-flow__tm{margin-top:2px}
.cy-flow__time{flex:none;align-self:center}
.cy-flow__tile{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:linear-gradient(180deg,#FFFFFF,var(--fl-bluew));
  box-shadow:inset 0 0 0 1px var(--fl-line);font-size:15px;font-weight:500;line-height:1;color:var(--fl-blue)}
.cy-flow__tile .cybee-emblem{--cy-emblem-height:15px;--wordmark:#2757C9}
.cy-flow__tile .cy-flow__ic{width:18px;height:18px;background:var(--fl-blue)}
.cy-flow__av{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:999px;background:#E6E9EE;font-size:14px;font-weight:500;line-height:1;color:var(--fl-ink)}
/* the macOS notification: the title and the line under the app row */
.cy-flow__trig--note .cy-flow__tt{margin-top:10px}
.cy-flow__td{margin-top:4px;font-size:var(--fl-l);line-height:1.4;color:var(--fl-mut);overflow-wrap:break-word;text-wrap:pretty}
.cy-flow__th+.cy-flow__td{margin-top:10px}
/* the form: up to three questions, each with its state */
.cy-flow__band .cy-flow__tq{margin-top:10px}
.cy-flow__tq>li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--fl-soft)}
.cy-flow__tq>li:last-child{padding-bottom:0}
.cy-flow__tq .cy-flow__l{flex:1}
/* the request: what the app may reach */
.cy-flow__scope{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:10px;background:#F6F7F9}
.cy-flow__scope .cy-flow__ic{width:18px;height:18px}
/* the foot: a mono line (day and time, via whom) and a small pill */
.cy-flow__tf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--fl-soft)}
.cy-flow__pill{box-sizing:border-box;padding:3px 8px;border-radius:6px;background:var(--fl-grey);font-family:var(--font-mono);font-size:var(--fl-m);line-height:1.3;color:var(--fl-ink);white-space:nowrap}
.cy-flow__pill--ember{background:var(--fl-orgw);color:#A63A0E}

/* ------------------------------------------------------------------------------------------------ states (rows and questions) */
.cy-flow__st{position:relative;flex:none;width:12px;height:12px;margin-left:auto}
.cy-flow__st::before,.cy-flow__st::after{content:"";position:absolute;box-sizing:border-box}
.cy-flow__st--on::after,.cy-flow__st--done::after,.cy-flow__st--fixed::after,.cy-flow__st--stop::after{inset:2px;border-radius:999px;background:var(--fl-mint);box-shadow:inset 0 0 0 1px rgba(0,122,89,.35)}
.cy-flow__st--ring::after,.cy-flow__st--open::after{inset:1px;border-radius:999px;border:1.5px solid var(--fl-ink)}
.cy-flow__st--needs::after{inset:1px;border-radius:999px;border:1.5px solid var(--fl-org)}
.cy-flow__st--fixed::before{inset:1px;border-radius:999px;border:1.5px solid var(--fl-org);opacity:0}
.cy-flow__st--done::before{inset:1px;border-radius:999px;border:1.5px solid var(--fl-ink);opacity:0}
.cy-flow__st--stop{width:30px}
.cy-flow__st--stop::before{left:0;top:1px;width:10px;height:10px;background:var(--fl-red)}
.cy-flow__st--stop::after{left:auto;width:8px}

/* ------------------------------------------------------------------------------------------------ 2 cybee on your Macs */
.cy-flow__mac{padding:2px 14px 14px;background:#fff;border:1px solid var(--fl-line);border-radius:14px}
.cy-flow__mac::after{content:"";position:absolute;left:-16px;right:-16px;top:calc(100% + 1px);height:9px;border-radius:0 0 10px 10px;background:linear-gradient(#E3E6EB,#D3D7DE)}
.cy-flow__row{display:flex;align-items:center;gap:12px;box-sizing:border-box;min-height:44px;padding-block:8px}
.cy-flow__row+.cy-flow__row{border-top:1px solid var(--fl-soft)}
.cy-flow__row .cy-flow__l{flex:1}
.cy-flow__ask{margin-top:2px;padding-top:14px;border-top:1px solid var(--fl-soft)}
.cy-flow__q{position:relative;box-sizing:border-box;min-height:46px;padding:11px 48px 11px 13px;background:#fff;border:1px solid var(--fl-blue);border-radius:10px;
  font-size:var(--fl-l);line-height:1.35;color:var(--fl-ink);overflow-wrap:break-word;box-shadow:0 1px 2px rgba(21,21,21,.05),0 12px 28px -16px rgba(21,21,21,.18)}
.cy-flow__q code{font-family:var(--font-mono);font-size:.93em;color:var(--fl-blue);margin-right:1px}
.cy-flow__q::before{content:"";position:absolute;left:8px;right:44px;top:6px;bottom:6px;background:#fff;transform-origin:100% 50%;transform:scaleX(0)}
.cy-flow__q::after{content:"";position:absolute;right:6px;bottom:6px;width:32px;height:32px;border-radius:999px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.5v-9M4.5 7 8 3.5 11.5 7'/%3E%3C/svg%3E") center/14px 14px no-repeat var(--fl-blue)}
.cy-flow__a{position:relative;margin-top:12px;padding-left:24px;font-size:var(--fl-l);line-height:1.35;color:var(--fl-ink);overflow-wrap:break-word;text-wrap:pretty}
.cy-flow__a::before{content:"";position:absolute;left:3px;top:calc(.675em - 6px);width:14px;height:12.12px;background:var(--fl-blue);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.cy-flow__a--needs::before{background:var(--fl-org)}

/* ------------------------------------------------------------------------------------------------ 3 what cybee did */
.cy-flow__did{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.cy-flow__chip{position:relative;display:flex;align-items:center;column-gap:10px;box-sizing:border-box;min-height:48px;padding:8px 12px 8px 8px;
  background:#fff;border:1px solid var(--fl-line);border-radius:14px}
.cy-flow__chip .cy-flow__l{flex:1 1 0}
.cy-flow__chip .cy-flow__tag{flex:none;margin-left:auto}
.cy-flow__ci{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:999px;background:var(--fl-grey)}
.cy-flow__ci::before,.cy-flow__ci::after{content:"";grid-area:1/1;box-sizing:border-box}
.cy-flow__chip--stop .cy-flow__ci{background:var(--fl-redw)}
.cy-flow__chip--stop .cy-flow__ci::before{width:10px;height:10px;background:var(--fl-red)}
.cy-flow__chip--fix .cy-flow__ci{background:var(--fl-tealw)}
.cy-flow__chip--fix .cy-flow__ci::before{width:18px;height:10px;border-radius:999px;background:var(--fl-mint)}
.cy-flow__chip--fix .cy-flow__ci::after{width:8px;height:8px;border-radius:999px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.15);transform:translateX(4px)}
.cy-flow__chip--alert .cy-flow__ci::before{width:18px;height:18px;background:var(--fl-ink);transform-origin:50% 22%;
  -webkit-mask:var(--fl-bell) center/contain no-repeat;mask:var(--fl-bell) center/contain no-repeat}
.cy-flow__chip--alert .cy-flow__ci::after{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:999px;background:var(--fl-org);opacity:0}
.cy-flow__chip--train .cy-flow__ci{background:var(--fl-viow)}
.cy-flow__chip--train .cy-flow__ci::before{width:10px;height:10px;background:var(--fl-vio2)}
.cy-flow__chip--check .cy-flow__ci{background:var(--fl-tealw)}
.cy-flow__chip--check .cy-flow__ci::before{width:8px;height:8px;border-radius:999px;background:var(--fl-mint);box-shadow:inset 0 0 0 1px rgba(0,122,89,.35)}
.cy-flow__chip--list .cy-flow__ci::before{width:10px;height:10px;border-radius:999px;border:1.5px solid var(--fl-ink)}
.cy-flow__chip--decide .cy-flow__ci{background:var(--fl-orgw)}
.cy-flow__chip--decide .cy-flow__ci::before{width:14px;height:3px;background:var(--fl-org)}
.cy-flow__chip--record .cy-flow__ci{background:var(--fl-bluew)}
.cy-flow__chip--record .cy-flow__ci::before{width:12px;height:10.4px;background:var(--fl-blue);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.cy-flow{--fl-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 16.5h11l-1.4-2.1V10a4.1 4.1 0 0 0-8.2 0v4.4zM10.5 19.2h3'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------------------------------------------ 4 the Trust Passport and the asker */
.cy-flow__pass{isolation:isolate;padding:16px 15px 14px;border-radius:14px;background:#fff;border:1px solid #D6CCFF}
.cy-flow__pass::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fl-viow)}
.cy-flow__ph{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 8px}
.cy-flow__pt{font-size:var(--fl-tt);font-weight:500;line-height:1.3;color:var(--fl-ink)}
.cy-flow__pd{margin-top:4px}
.cy-flow__ridge{display:block;width:180px;max-width:100%;height:32px;margin-top:20px;transform-origin:50% 100%;
  background:linear-gradient(#C9CDD4,#C9CDD4) 168px 0/1px 100% no-repeat,repeating-linear-gradient(90deg,var(--fl-vio2) 0 1px,transparent 1px 2px)}
.cy-flow__pc{margin-top:8px;padding-right:52px;font-size:var(--fl-l);line-height:1.3;color:var(--fl-ink);font-variant-numeric:tabular-nums}
.cy-flow__seal{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:44px;height:44px}
.cy-flow__seal::before{content:"";position:absolute;inset:0;border-radius:999px;border:1.5px solid var(--fl-vio);
  -webkit-mask:conic-gradient(#000 var(--fl-arc),transparent 0);mask:conic-gradient(#000 var(--fl-arc),transparent 0)}
.cy-flow__seal .cybee-emblem{--cy-emblem-height:16px;--wordmark:#6938EF}
.cy-flow__asker{display:flex;align-items:center;gap:8px;align-self:center;max-width:100%;min-height:40px;padding:7px 18px 7px 14px;background:#fff;
  border:1px solid var(--fl-line);border-radius:999px}
.cy-flow__asker::after{content:"";position:absolute;inset:-1px;border-radius:999px;border:1px solid var(--fl-vio)}
.cy-flow__asker .cy-flow__l{text-wrap:balance}

/* ------------------------------------------------------------------------------------------------ replay (after the first run) */
.cy-flow__replay{position:absolute;right:16px;bottom:16px;display:none;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--fl-line);
  border-radius:999px;background:#fff;color:var(--fl-ink);cursor:pointer}
.cy-flow__replay::before{content:"";position:absolute;inset:-6px}
.cy-flow__replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.js .cy-flow.is-live.is-done .cy-flow__replay{display:grid}

/* ------------------------------------------------------------------------------------------------ tall: one column, vertical wires */
.cy-flow__step+.cy-flow__step{margin-top:36px}
.cy-flow__mac+.cy-flow__step{margin-top:45px}
.cy-flow__step+.cy-flow__step::before{content:"";position:absolute;left:50%;top:-28px;width:1px;height:20px;background:var(--fl-w,var(--fl-wire));transform-origin:50% 0}
.cy-flow__mac+.cy-flow__step::before{top:-28px}
.cy-flow__pass,.cy-flow__pass~.cy-flow__step{--fl-w:var(--fl-vio)}
.cy-flow__did+.cy-flow__step{--fl-w:var(--fl-vio)}
/* a hand-off without the Trust Passport (a free dated list, 10 Oct 2026): violet means the Proof plan, so the wire stays grey and the
   asker's ring is the neutral hairline */
.cy-flow__band:not(:has(.cy-flow__pass)) .cy-flow__did+.cy-flow__step{--fl-w:var(--fl-wire)}
.cy-flow__band:not(:has(.cy-flow__pass)) .cy-flow__asker::after{border-color:var(--fl-wire)}
.cy-flow__did>li::before,.cy-flow__did>li::after{display:none}
/* tablets: two chips a row, the Passport at its paper width */
@container (min-width:480px){
  .cy-flow__did{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cy-flow__did>li:last-child:nth-child(odd){grid-column:1/-1}
  .cy-flow__pass{align-self:center;width:min(100%,360px)}
}

/* ------------------------------------------------------------------------------------------------ wide: one line, left to right */
/* the band is 1280: steps 232 + 264 + 232 + 208 + 168 (the asker at most) and three 48px wires and the 32px one to the asker */
@container (min-width:1090px){
  .cy-flow__band{flex-direction:row;align-items:center;justify-content:center;column-gap:var(--fl-g);width:1280px;max-width:none;padding-block:16px 0;
    --fl-l:14px;--fl-tt:15px;--fl-m:12px;--fl-tag:11px}
  .cy-flow__step+.cy-flow__step,.cy-flow__mac+.cy-flow__step{margin-top:0}
  .cy-flow__trig{flex:none;width:232px}
  .cy-flow__mac{flex:none;width:264px}
  .cy-flow__did{flex:none;width:232px;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:var(--fl-rg)}
  .cy-flow__did>li:last-child:nth-child(odd){grid-column:auto}
  .cy-flow__chip{min-height:44px;padding-block:6px}
  .cy-flow__pass{flex:none;width:208px;min-height:200px;padding-inline:14px}
  .cy-flow__pc{padding-right:0}
  .cy-flow__row{min-height:48px}
  .cy-flow__asker{flex:none;max-width:168px;padding-inline:14px 16px}
  /* the Passport hands over to the asker over a shorter wire, as on the landing (32px) */
  .cy-flow__pass+.cy-flow__asker{--fl-g:32px;margin-left:-16px}
  .cy-flow__a::before{top:calc(.675em - 6px)}

  /* one node to the next: the wire comes into the step at its middle (every node has a 1px hairline) */
  .cy-flow__step+.cy-flow__step::before,.cy-flow__mac+.cy-flow__step::before{left:calc(-1px - var(--fl-g));top:50%;width:var(--fl-g);height:1px;transform-origin:0 50%}

  /* one node into a chip list: a trunk to the junction, the junction's two arcs, then a bracket and stubs into the chips */
  .cy-flow__step+.cy-flow__did::before{left:calc(-1 * var(--fl-g));top:calc(50% - 10px);z-index:1;width:calc(var(--fl-g) / 2 + 1px);height:21px;
    background:linear-gradient(var(--fl-wire),var(--fl-wire)) 0 10px/calc(100% - 10px) 1px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='21' viewBox='0 0 12 21'%3E%3Crect x='10.3' y='1.4' width='1.7' height='18.2' fill='%23F2F2F2'/%3E%3Cpath d='M1.5 10.5A10 10 0 0 0 11.5 .5M1.5 10.5A10 10 0 0 1 11.5 20.5' fill='none' stroke='%237C818A'/%3E%3C/svg%3E") 100% 0/12px 21px no-repeat}
  .cy-flow__step+.cy-flow__did:has(>li:last-child:nth-child(odd))::before{background-size:100% 1px,12px 21px}
  .cy-flow__step+.cy-flow__did:has(>li:only-child)::before{top:50%;height:1px;width:calc(var(--fl-g) / 2);background:var(--fl-wire)}
  .cy-flow__did>li::before,.cy-flow__did>li::after{display:block;content:"";position:absolute;top:50%;height:0;width:calc(var(--fl-g) / 2)}
  .cy-flow__did>li::before{left:calc(-1px - var(--fl-g) / 2);box-sizing:border-box;border-top:1px solid var(--fl-wire)}
  .cy-flow__did>li:first-child{--fl-n:1}
  .cy-flow__did>li:first-child:nth-last-child(2){--fl-n:2}
  .cy-flow__did>li:first-child:nth-last-child(3){--fl-n:3}
  .cy-flow__did>li:first-child:nth-last-child(4){--fl-n:4}
  .cy-flow__did>li:first-child:nth-last-child(5){--fl-n:5}
  .cy-flow__did>li:first-child:not(:only-child)::before{height:calc((var(--fl-n) - 1) * (100% + 2px + var(--fl-rg)) + 1px);
    border-left:1px solid var(--fl-wire);border-bottom:1px solid var(--fl-wire);border-radius:10px 0 0 10px}
  .cy-flow__did>li:last-child:not(:only-child)::before{display:none}
  .cy-flow__did:first-child>li::before{display:none}

  /* a chip list into one node: stubs and a bracket out of the chips, the mirrored junction, a trunk into the next step */
  .cy-flow__did>li::after{left:calc(100% + 1px);width:calc(var(--fl-g) / 2 + 1px);box-sizing:border-box;border-top:1px solid var(--fl-vio)}
  .cy-flow__did>li:first-child:not(:only-child)::after{height:calc((var(--fl-n) - 1) * (100% + 2px + var(--fl-rg)) + 1px);
    border-right:1px solid var(--fl-vio);border-bottom:1px solid var(--fl-vio);border-radius:0 10px 10px 0}
  .cy-flow__did>li:last-child:not(:only-child)::after{display:none}
  .cy-flow__did:last-child>li::after{display:none}
  .cy-flow__did+.cy-flow__step::before{left:calc(-1px - var(--fl-g) / 2);top:calc(50% - 10px);z-index:1;width:calc(var(--fl-g) / 2 + 1px);height:21px;
    background:linear-gradient(var(--fl-vio),var(--fl-vio)) 100% 10px/calc(100% - 10px) 1px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='21' viewBox='0 0 12 21'%3E%3Crect x='0' y='1.4' width='1.7' height='18.2' fill='%23F2F2F2'/%3E%3Cpath d='M.5 .5A10 10 0 0 0 10.5 10.5M.5 20.5A10 10 0 0 1 10.5 10.5' fill='none' stroke='%236938EF'/%3E%3C/svg%3E") 0 0/12px 21px no-repeat}
  .cy-flow__did:has(>li:last-child:nth-child(odd))+.cy-flow__step::before{background-size:100% 1px,12px 21px}
  .cy-flow__did:has(>li:only-child)+.cy-flow__step::before{top:50%;height:1px;width:calc(var(--fl-g) / 2 + 1px);background:var(--fl-vio)}
  /* no Trust Passport in the story: the bracket out of the chips and its junction stay grey (violet means the Proof plan) */
  .cy-flow__band:not(:has(.cy-flow__pass)) .cy-flow__did>li::after{border-color:var(--fl-wire)}
  .cy-flow__band:not(:has(.cy-flow__pass)) .cy-flow__did+.cy-flow__step::before{
    background:linear-gradient(var(--fl-wire),var(--fl-wire)) 100% 10px/calc(100% - 10px) 1px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='21' viewBox='0 0 12 21'%3E%3Crect x='0' y='1.4' width='1.7' height='18.2' fill='%23F2F2F2'/%3E%3Cpath d='M.5 .5A10 10 0 0 0 10.5 10.5M.5 20.5A10 10 0 0 1 10.5 10.5' fill='none' stroke='%237C818A'/%3E%3C/svg%3E") 0 0/12px 21px no-repeat}
  .cy-flow__band:not(:has(.cy-flow__pass)) .cy-flow__did:has(>li:last-child:nth-child(odd))+.cy-flow__step::before{background-size:100% 1px,12px 21px}
  .cy-flow__band:not(:has(.cy-flow__pass)) .cy-flow__did:has(>li:only-child)+.cy-flow__step::before{background:var(--fl-wire)}
}
@container (min-width:1090px) and (max-width:1279.98px){.cy-flow__band{zoom:.92}}
@container (min-width:1090px) and (max-width:1177.98px){.cy-flow__band{zoom:.85}}

/* ------------------------------------------------------------------------------------------------ the story (about 4.9s) */
/* each step carries --at (its start) and --next (the next step's start), written by js/flow.js from the steps a page uses; the
   defaults below are the full five step story. --i numbers rows, questions and chips; --end is when the Passport seals. */
.cy-flow__trig{--at:0s;--next:.55s}
.cy-flow__mac{--at:.55s;--next:2.15s}
.cy-flow__did{--at:2.15s;--next:3.25s}
.cy-flow__pass{--at:3.25s;--next:4.4s}
.cy-flow__asker{--at:4.4s}
:is(.cy-flow__rows,.cy-flow__tq,.cy-flow__did)>li:nth-child(2){--i:1}
:is(.cy-flow__rows,.cy-flow__tq,.cy-flow__did)>li:nth-child(3){--i:2}
:is(.cy-flow__rows,.cy-flow__tq,.cy-flow__did)>li:nth-child(4){--i:3}
:is(.cy-flow__rows,.cy-flow__tq,.cy-flow__did)>li:nth-child(5){--i:4}
:is(.cy-flow__rows,.cy-flow__tq,.cy-flow__did)>li:nth-child(6){--i:5}

/* what plays (only read inside the gate) */
.cy-flow__step+.cy-flow__step::before{--fl-a:cy-flow-y .3s var(--fl-io) var(--at) both}
.cy-flow__trig>*{--fl-a:cy-flow-rise .4s var(--fl-ex) calc(.08s + var(--k,0) * .08s) both}
.cy-flow__trig>:nth-child(2){--k:1}.cy-flow__trig>:nth-child(3){--k:2}.cy-flow__trig>:nth-child(4){--k:3}
.cy-flow__tq>li{--fl-a:cy-flow-fade .24s ease-out calc(.24s + var(--i,0) * .09s) both}
/* phones (the scroll sets the time): the trigger is what a visitor recognises first, so its words stand from the first frame; at the
   top of the page an empty white card would read as broken (10 Oct 2026). Its status marks still turn as the story is scrolled. */
@media (max-width:767px){.cy-flow__trig>*,.cy-flow__tq>li{--fl-a:none}}
.cy-flow__st--done::before{--fl-a:cy-flow-hold var(--end) linear 0s both}
.cy-flow__st--done::after{--fl-a:cy-flow-pop .26s var(--fl-ex) calc(var(--end) + var(--i,0) * .08s) both}
.cy-flow__rows .cy-flow__st::after{--fl-a:cy-flow-pop .26s var(--fl-ex) calc(var(--at) + .4s + var(--i,0) * .07s) both}
.cy-flow__rows .cy-flow__st--stop::before{--fl-a:cy-flow-pop .26s var(--fl-ex) calc(var(--at) + .36s + var(--i,0) * .07s) both}
.cy-flow__rows .cy-flow__st--stop::after{--fl-a:cy-flow-pop .26s var(--fl-ex) calc(var(--next) + .1s) both}
.cy-flow__rows .cy-flow__st--fixed::before{--fl-a:cy-flow-window calc(var(--next) - var(--at)) linear calc(var(--at) + .4s + var(--i,0) * .07s) both}
.cy-flow__rows .cy-flow__st--fixed::after{--fl-a:cy-flow-pop .26s var(--fl-ex) calc(var(--next) + .42s) both}
.cy-flow__q::before{--fl-a:cy-flow-type .5s steps(18,end) calc(var(--at) + .62s) both}
.cy-flow__q::after{--fl-a:cy-flow-send .16s ease-out calc(var(--at) + 1.14s) both}
.cy-flow__a{--fl-a:cy-flow-rise .36s var(--fl-ex) calc(var(--at) + 1.3s) both}
.cy-flow__ci{--t:calc(var(--at) + .3s + var(--i,0) * .12s)}
.cy-flow__chip:not(.cy-flow__chip--fix):not(.cy-flow__chip--alert) .cy-flow__ci{--fl-a:cy-flow-pop .26s var(--fl-ex) var(--t) both}
.cy-flow__chip--fix .cy-flow__ci{--fl-a:cy-flow-pop .26s var(--fl-ex) var(--t) both,cy-flow-warn .7s linear var(--t) both}
.cy-flow__chip--fix .cy-flow__ci::before{--fl-a:cy-flow-off .2s ease-out calc(var(--t) + .44s) both}
.cy-flow__chip--fix .cy-flow__ci::after{--fl-a:cy-flow-knob .24s var(--fl-ex) calc(var(--t) + .44s) both}
.cy-flow__chip--alert .cy-flow__ci{--fl-a:cy-flow-pop .26s var(--fl-ex) var(--t) both}
.cy-flow__chip--alert .cy-flow__ci::before{--fl-a:cy-flow-bell .6s ease-in-out calc(var(--t) + .2s) both}
.cy-flow__chip--alert .cy-flow__ci::after{--fl-a:cy-flow-window .9s linear calc(var(--t) + .2s) both}
.cy-flow__pass::after{--fl-a:cy-flow-fade .32s ease-out calc(var(--at) + .2s) both}
.cy-flow__ridge{--fl-a:cy-flow-y .46s var(--fl-ex) calc(var(--at) + .3s) both}
.cy-flow__ridge{transform-origin:50% 100%}
.cy-flow__seal::before{--fl-a:cy-flow-arc .38s var(--fl-io) calc(var(--at) + .76s) both}
.cy-flow__seal .cybee-emblem{--fl-a:cy-flow-pop .3s var(--fl-ex) calc(var(--at) + 1.04s) both}
.cy-flow__asker::after{--fl-a:cy-flow-fade .2s ease-out calc(var(--at) + .26s) both}
@container (min-width:1090px){
  .cy-flow__step+.cy-flow__step::before{--fl-a:cy-flow-x .3s var(--fl-io) var(--at) both}
  .cy-flow__step+.cy-flow__did::before{--fl-a:cy-flow-clip .18s linear var(--at) both}
  .cy-flow__did>li::before{--fl-a:cy-flow-clip .26s var(--fl-io) calc(var(--at) + .14s) both}
  .cy-flow__did>li::after{--fl-a:cy-flow-clip .26s var(--fl-io) calc(var(--next) - .36s) both}
  .cy-flow__did+.cy-flow__step::before{--fl-a:cy-flow-clip .2s linear calc(var(--at) - .1s) both}
}

/* the gate: html.js, motion welcome, a figure with data-cy-flow that is not done. Until js/flow.js marks it live, the first frame
   holds for 2.5s at most (html.intro-safe), then the resting picture shows. */
@media (prefers-reduced-motion:no-preference){
  :is(html.js:not([data-reduced-motion="true"]):not(.intro-safe) .cy-flow[data-cy-flow]:not(.is-done),html.js:not([data-reduced-motion="true"]) .cy-flow[data-cy-flow].is-live:not(.is-done)) *,
  :is(html.js:not([data-reduced-motion="true"]):not(.intro-safe) .cy-flow[data-cy-flow]:not(.is-done),html.js:not([data-reduced-motion="true"]) .cy-flow[data-cy-flow].is-live:not(.is-done)) *::before,
  :is(html.js:not([data-reduced-motion="true"]):not(.intro-safe) .cy-flow[data-cy-flow]:not(.is-done),html.js:not([data-reduced-motion="true"]) .cy-flow[data-cy-flow].is-live:not(.is-done)) *::after{
    animation:var(--fl-a,none);animation-play-state:paused}
  .cy-flow[data-cy-flow].is-live.is-play:not(.is-done) *,.cy-flow[data-cy-flow].is-live.is-play:not(.is-done) *::before,.cy-flow[data-cy-flow].is-live.is-play:not(.is-done) *::after{
    animation-play-state:running!important}
}
@keyframes cy-flow-x{from{transform:scaleX(0)}}
@keyframes cy-flow-y{from{transform:scaleY(0)}}
@keyframes cy-flow-clip{from{clip-path:inset(0 100% 0 0)}}
@keyframes cy-flow-pop{from{opacity:0;transform:scale(.4)}}
@keyframes cy-flow-fade{from{opacity:0}}
@keyframes cy-flow-rise{from{opacity:0;transform:translateY(6px)}}
@keyframes cy-flow-type{from{transform:scaleX(1)}}
@keyframes cy-flow-send{from{background-color:#D5D9E0}}
@keyframes cy-flow-hold{0%,99%{opacity:1}100%{opacity:0}}
@keyframes cy-flow-window{0%{opacity:0}14%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes cy-flow-warn{0%,70%{background-color:#FFF0E6;box-shadow:inset 0 0 0 1.5px #FF6B2B}}
@keyframes cy-flow-off{from{background-color:#BFC4CC}}
@keyframes cy-flow-knob{from{transform:translateX(-4px)}}
@keyframes cy-flow-bell{0%,100%{transform:rotate(0)}22%{transform:rotate(14deg)}46%{transform:rotate(-10deg)}70%{transform:rotate(5deg)}}
@keyframes cy-flow-arc{from{--fl-arc:0deg}}