/* Flagship system diagram: Your Aussie Uncle (13 Nov 2026). Sand background (Ellie).
   Colours follow web-look.md §3: orange = a person, teal = the system; AI = peach.
   On sand, line colours are deepened so they read at rest; the moving light uses the bright brand colours. */
.fm,.fm-mini{--f-sand:#FBF9F4;--f-ink:#1F1B24;--f-ink3:#3A3441;--f-muted:#6B6474;--f-line:#D9D4E0;--f-soft:#B9B3C2;
  --f-lead:#FC561E;--f-lead-d:#C2380A;--f-lead-t:#FFF0E8;
  --f-sys:#33D1C6;--f-sys-d:#0E7F78;--f-sys-t:#E7F8F6;
  --f-ai:#FDAA68;--f-ai-d:#D9772A;--f-ai-t:#FFF3E6;
  --f-dia:#F1EEF5;--f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.fm{background:var(--f-sand);color:var(--f-ink);padding:64px 0 72px;border-top:1px solid rgba(31,27,36,.06)}
.fm-wrap{max-width:1330px;margin:0 auto;padding:0 20px}
@media(min-width:700px){.fm-wrap{padding:0 32px}}
.fm-head{max-width:820px;margin:0 auto 26px;text-align:center}
.fm-head .kick{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--f-sys-d);margin:0 0 10px;font-weight:800}
.fm-head h2{font-size:clamp(28px,3.8vw,42px);line-height:1.12;margin:0 0 14px;color:var(--f-ink);text-wrap:balance}
.fm-lede{margin:0 auto;color:var(--f-ink3);font-size:17px;max-width:720px}
.fm-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;list-style:none;margin:20px 0 0;padding:0}
.fm-stats li{background:#fff;border:1px solid var(--f-line);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--f-muted)}
.fm-stats b{color:var(--f-ink);font-size:16px;margin-right:6px;font-variant-numeric:tabular-nums}

/* phase strip (tracks the light) */
.fm-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;list-style:none;margin:0 0 14px;padding:0;counter-reset:none}
.fm-strip li{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800;color:var(--f-muted);
  background:#fff;border:1px solid var(--f-line);border-radius:999px;padding:5px 13px 5px 6px;transition:all .3s ease}
.fm-strip li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--f-dia);color:var(--f-ink3);font-size:11.5px}
.fm-strip li.on{color:var(--f-ink);border-color:var(--f-ink)}
.fm-strip li.on span{background:var(--f-ink);color:#fff}
.fm-strip li.done span{background:var(--f-sys-d);color:#fff}

.fm-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.fm-now{margin:0;display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--f-ink3);min-height:24px}
.fm-now .dot{width:10px;height:10px;border-radius:50%;background:var(--f-soft);flex:none;transition:background .2s}
.fm-now.lead .dot{background:var(--f-lead);box-shadow:0 0 0 4px rgba(252,86,30,.18)}
.fm-now.team .dot{background:var(--f-lead);box-shadow:0 0 0 4px rgba(252,86,30,.18)}
.fm-now.sys .dot{background:var(--f-sys);box-shadow:0 0 0 4px rgba(51,209,198,.22)}
.fm-now.ai .dot{background:var(--f-ai);box-shadow:0 0 0 4px rgba(253,170,104,.25)}
.fm-now.loop .dot{background:var(--f-ai)}
.fm-now b{font-weight:800}
.c-lead{color:var(--f-lead-d)}.c-sys{color:var(--f-sys-d)}.c-ai{color:var(--f-ai-d)}
.fm-ctl{display:flex;gap:8px}
.fm-ctl button{font:800 13px/1 'Poppins',system-ui,sans-serif;color:var(--f-ink);background:#fff;border:1px solid var(--f-line);
  border-radius:999px;padding:8px 14px;cursor:pointer}
.fm-ctl button:hover{border-color:var(--f-ink)}
.fm-ctl button:focus-visible{outline:2px solid var(--f-lead);outline-offset:2px}
.fm-ctl[hidden]{display:none}

.fm-legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:0 0 12px;padding:0;font-size:12.5px;color:var(--f-muted)}
.fm-legend li{display:flex;align-items:center;gap:6px}
.fm-legend .k{display:inline-block;width:18px;height:12px;border-radius:3px;border:1.5px solid var(--f-soft);background:#fff}
.fm-legend .k.start{border-radius:8px;background:var(--f-ink);border-color:var(--f-ink)}
.fm-legend .k.dia{width:12px;height:12px;transform:rotate(45deg);background:var(--f-dia);border-color:#8E879A;margin:0 3px}
.fm-legend .k.lead{border-color:var(--f-lead);background:var(--f-lead-t)}
.fm-legend .k.ai{border-color:var(--f-ai-d);background:var(--f-ai-t)}
.fm-legend .k.sys{border-color:var(--f-sys-d);background:var(--f-sys-t)}
.fm-legend .k.control{border:1.5px dashed var(--f-lead);background:var(--f-ai-t)}
.fm-legend .k.main,.fm-legend .k.alt,.fm-legend .k.loop{height:0;border:0;border-top:2px solid var(--f-muted);border-radius:0;background:none;width:22px}
.fm-legend .k.alt{border-top-style:dashed}
.fm-legend .k.loop{border-top:2.5px dashed var(--f-ai-d)}
.fm-legend .k.code{width:auto;height:auto;border:0;background:none;font:600 11px var(--f-mono);color:var(--f-ink3)}

.fm-swipe{display:none;margin:0 0 8px;font-size:13px;color:var(--f-muted)}
@media(max-width:1000px){.fm-swipe{display:block}}
.fm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--f-line);border-radius:18px;
  box-shadow:0 18px 40px -30px rgba(31,27,36,.35)}
.fm-svg{display:block;width:100%;min-width:1100px;height:auto;font-family:'Poppins',system-ui,sans-serif}

/* ---------- inside the SVG ---------- */
.fm-svg .lane{fill:var(--f-sand)}
.fm-svg .lane.odd{fill:#F4F1EB}
.fm-svg .lane.empty{fill:#F7F5F0}
.fm-svg .lanecol{stroke:var(--f-line);stroke-width:1}
.fm-svg .rl{font-size:12.5px;font-weight:800;fill:var(--f-ink)}
.fm-svg .rs{font-size:10px;fill:var(--f-muted)}
.fm-svg .rlx{font-size:10px;fill:#A39CAD;font-style:italic}
.fm-svg .chev{fill:#fff;stroke:var(--f-line);stroke-width:1;transition:fill .3s ease,stroke .3s ease}
.fm-svg .chev.on{fill:var(--f-ink);stroke:var(--f-ink)}
.fm-svg .cn{font-size:12.5px;font-weight:800;fill:var(--f-ink)}
.fm-svg .cn .cl{font-weight:500;fill:var(--f-muted)}
.fm-svg .hl{fill:rgba(51,209,198,.10);stroke:var(--f-sys-d);stroke-width:1.5;stroke-dasharray:6 4}
.fm-svg .hlt{font-size:10.5px;font-weight:800;letter-spacing:.12em;fill:var(--f-sys-d)}
.fm-svg .chev.same{fill:var(--f-sys-t);stroke:var(--f-sys-d)}

/* nodes */
.fm-svg .nd rect,.fm-svg .nd polygon{stroke-width:1.6;transition:filter .25s ease,stroke-width .25s ease}
.fm-svg .nd.box rect{fill:#fff}
.fm-svg .nd.w-lead rect,.fm-svg .nd.w-team rect{stroke:var(--f-lead);fill:var(--f-lead-t)}
.fm-svg .nd.w-ai rect{stroke:var(--f-ai-d);fill:var(--f-ai-t)}
.fm-svg .nd.w-sys rect{stroke:var(--f-sys-d);fill:var(--f-sys-t)}
.fm-svg .nd.dia polygon{fill:var(--f-dia);stroke:#8E879A}
.fm-svg .nd.start rect,.fm-svg .nd.end rect{fill:var(--f-ink);stroke:var(--f-ink)}
.fm-svg .nd.start text,.fm-svg .nd.end text{fill:#fff}
.fm-svg .nd.start .ns,.fm-svg .nd.end .ns{fill:#D9D4E0}
.fm-svg .nd.control rect{stroke:var(--f-lead);stroke-dasharray:5 3;fill:var(--f-ai-t)}
.fm-svg .nt{font-size:11.2px;font-weight:800;fill:var(--f-ink)}
.fm-svg .ns{font-size:9.6px;fill:var(--f-muted)}
.fm-svg .dt{font-size:9.6px;font-weight:800;fill:var(--f-ink)}
.fm-svg .badge{font-size:8.5px;font-weight:800;letter-spacing:.08em;fill:var(--f-lead-d)}
.fm-svg .nd.hot rect,.fm-svg .nd.hot polygon{stroke-width:2.6;filter:url(#fm-glow)}

/* edges: at rest each arrow shows who moves it on, in a soft tint */
.fm-svg .ed polyline{fill:none;stroke-linejoin:round;stroke-linecap:round}
.fm-svg .ed .base{stroke-width:1.5;stroke-opacity:.55;marker-end:url(#fm-a)}
.fm-svg .ed.alt .base{stroke-dasharray:5 4}
.fm-svg .ed.loop .base{stroke-width:2;stroke-dasharray:7 5;stroke-opacity:.8}
.fm-svg .by-lead .base,.fm-svg .by-team .base{stroke:var(--f-lead-d)}
.fm-svg .by-sys .base{stroke:var(--f-sys-d)}
.fm-svg .by-ai .base,.fm-svg .by-loop .base{stroke:var(--f-ai-d)}
.fm-svg .ah{fill:#8E879A}
.fm-svg .ed.done .base{stroke-opacity:1;stroke-width:2}
.fm-svg .ed .glow{stroke-width:4.5;opacity:0;filter:url(#fm-glow)}
.fm-svg .by-lead .glow,.fm-svg .by-team .glow{stroke:var(--f-lead)}
.fm-svg .by-sys .glow{stroke:var(--f-sys)}
.fm-svg .by-ai .glow,.fm-svg .by-loop .glow{stroke:var(--f-ai)}
.fm-svg .el,.fm-svg .yn,.fm-svg .ll{paint-order:stroke;stroke:var(--f-sand);stroke-width:4px;stroke-linejoin:round}
.fm-svg .el{font:600 9.3px var(--f-mono);fill:var(--f-ink3)}
.fm-svg .yn{font-size:9.5px;font-weight:800;fill:var(--f-ink3);letter-spacing:.03em}
.fm-svg .ll{font-size:11px;font-weight:800;fill:var(--f-ai-d)}

/* phase table */
.fm-table{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:10px;margin:18px 0 0}
@media(max-width:1100px){.fm-table{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.fm-table{grid-template-columns:1fr}}
.fm-col{background:#fff;border:1px solid var(--f-line);border-radius:14px;padding:14px 14px 12px;min-width:0;transition:border-color .3s ease}
.fm-col.on{border-color:var(--f-ink)}
.fm-col .ph{margin:0 0 8px;font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px}
.fm-col .ph span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--f-ink);color:#fff;font-size:11.5px}
.fm-col ul{margin:0 0 10px;padding-left:16px;font-size:13px;line-height:1.45;color:var(--f-ink3)}
.fm-col li{margin:0 0 4px}
.fm-col .bw{margin:0 0 8px;font-size:12px;color:var(--f-muted)}
.fm-col .bw b{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--f-ink3)}
.fm-col .pf{margin:0;padding-top:8px;border-top:1px solid var(--f-line);font-weight:800;font-size:13.5px;color:var(--f-sys-d)}
.fm-more{text-align:center;margin:22px 0 0}
.fm-more a{color:var(--f-lead-d);font-weight:800;border-bottom:2px solid currentColor}

@media(prefers-reduced-motion:reduce){.fm-svg .ed .base{stroke-opacity:.9}.fm-svg .chev,.fm-strip li{transition:none}}

/* homepage teaser: same diagram, same light, no text. The whole card links to the full board. */
.fm-mini{position:relative;display:block;background:var(--f-sand);border-radius:18px;padding:12px 12px 56px;
  box-shadow:0 22px 44px -26px rgba(0,0,0,.55);text-decoration:none;color:inherit}
.fm-mini .fm-svg{min-width:0}
.fm-mini .fm-svg text{display:none}
.fm-mini .fm-svg .ed .base{stroke-width:3.2;stroke-opacity:.45}
.fm-mini .fm-svg .ed.done .base{stroke-width:3.6;stroke-opacity:1}
.fm-mini .fm-svg .ed .glow{stroke-width:10}
.fm-mini .fm-svg .nd rect,.fm-mini .fm-svg .nd polygon{stroke-width:3}
.fm-mini .fm-svg .chev{stroke-width:2}
.fm-mini-cta{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:center;align-items:center;
  height:36px;border-radius:999px;background:var(--f-ink);color:#fff;font-weight:800;font-size:14px;transition:background .2s ease}
.fm-mini:hover .fm-mini-cta,.fm-mini:focus-visible .fm-mini-cta{background:var(--f-lead)}
.fm-mini:focus-visible{outline:3px solid var(--f-ai);outline-offset:4px}

/* a board that starts closed (FOLD): animated preview + one button; opens to every step */
.fm-fold>summary{list-style:none;cursor:pointer;display:block;max-width:760px;margin:6px auto 0}
.fm-fold>summary::-webkit-details-marker{display:none}
.fm-fold .fm-fold-prev{padding:12px;margin:0 0 12px}
.fm-fold[open] .fm-fold-prev{display:none}
.fm-fold-btn{display:flex;justify-content:center}
.fm-fold-btn span{display:inline-block;font-weight:800;font-size:15px;color:#fff;background:var(--f-ink);border-radius:999px;padding:11px 20px;transition:background .2s ease}
.fm-fold>summary:hover .fm-fold-btn span,.fm-fold>summary:focus-visible .fm-fold-btn span{background:var(--f-lead)}
.fm-fold>summary:focus-visible{outline:none}
.fm-fold .fm-fold-btn .c,.fm-fold[open] .fm-fold-btn .o{display:none}
.fm-fold[open] .fm-fold-btn .c{display:inline-block;background:#fff;color:var(--f-ink);border:1px solid var(--f-line)}
.fm-fold[open]>summary{margin-bottom:18px}