/* Find me customers, the ABM need page.
   Page-specific styles, all scoped under #page-fmc. Shared chrome (header,
   buttons, eyebrow, the ownership colour key, band-soft base, the .contrast
   compare, .caveat, the cta-band, breadcrumb, footer) lives in chrome.css and
   is reused, not cloned. Raw #fff swapped for var(--bg); the maths-panel row
   divider uses the --line-faint token and the "the deal" sub-line on the navy
   close box uses --on-navy-soft, both in tokens.css. The two flow SVGs and
   the funnel SVG keep their own fills (SVG attributes, not CSS). The animated
   funnel block is the same component the solar and wheeling pages carry; for
   now each page scopes its own copy. */

/* Hero and section rhythm (mirrors the other need pages) */
#page-fmc .hero{padding-top:78px;padding-bottom:14px}
#page-fmc .hero h1{font-size:clamp(33px,5vw,48px);font-weight:700;max-width:780px}
#page-fmc .hero p.lead{font-size:19px;max-width:640px;margin-top:22px;color:var(--slate)}
#page-fmc .sec{padding-top:64px;padding-bottom:64px}
#page-fmc .sec>h2,#page-fmc .band-soft h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;max-width:680px}
#page-fmc .sec>.sub,#page-fmc .band-soft .sub{font-size:16px;max-width:640px;margin-top:8px;color:var(--slate)}

/* The problem: three-link chain cards */
#page-fmc .chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:30px}
#page-fmc .link{position:relative;border:.5px solid var(--line);border-radius:14px;background:var(--bg);padding:26px 26px 26px 30px;overflow:hidden}
#page-fmc .link .accent{position:absolute;left:0;top:0;bottom:0;width:5px}
#page-fmc .link .ln{font-family:var(--display);font-weight:700;font-size:13px;color:var(--bg);background:var(--navy);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#page-fmc .link .chiplab{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;float:right;margin-top:7px}
#page-fmc .link h3{font-size:18px;font-weight:600;margin:14px 0 7px;color:var(--navy);clear:none}
#page-fmc .link p{font-size:14px;line-height:1.55;color:var(--slate)}
#page-fmc .chainfoot{font-size:15px;color:var(--slate);margin-top:24px;max-width:660px}

/* How it works: flow toolbar (mode toggle, legend, step controls) */
#page-fmc .toolbar{position:sticky;top:66px;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(4px);margin-top:26px;padding-top:12px;padding-bottom:12px;border-bottom:.5px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#page-fmc .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
#page-fmc .seg button{font-family:var(--display);font-weight:600;font-size:13px;border:none;background:var(--bg);color:var(--slate);padding:9px 18px;cursor:pointer}
#page-fmc .seg button.active{background:var(--navy);color:var(--bg)}
#page-fmc .legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--slate)}
#page-fmc .legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
#page-fmc .controls{display:flex;gap:8px;align-items:center}
#page-fmc .controls button{font-family:var(--display);font-weight:600;font-size:13px;border:1px solid var(--line);background:var(--bg);color:var(--navy);border-radius:8px;padding:8px 14px;cursor:pointer}
#page-fmc .controls button:hover{border-color:var(--cyan-ink);color:var(--cyan-ink)}
#page-fmc .controls .stepcount{font-size:12.5px;color:var(--muted);min-width:86px;text-align:center}
#page-fmc .controls.hidden{display:none}

/* How it works: the two SVG frames */
#page-fmc .frame{margin-top:18px;border:.5px solid var(--line);border-radius:18px;background:var(--bg-soft);padding:18px;overflow-x:auto}
#page-fmc .frame.hidden{display:none}
#page-fmc .frame .scaler{min-width:0}
#page-fmc .frame svg{display:block;width:100%;height:auto}
#page-fmc .frame svg text{font-family:var(--body)}
#page-fmc .flowsteer{margin-top:14px;text-align:center;font-size:14px;color:var(--slate)}
#page-fmc .flowsteer .steerbig{margin-top:10px;font-family:var(--display);font-weight:600;background:var(--navy);color:var(--bg);border:0;border-radius:10px;padding:12px 22px;font-size:15px;cursor:pointer;transition:.15s}
#page-fmc .flowsteer .steerbig:hover{background:var(--cyan-ink);color:var(--bg)}

/* SVG text styles shared by both flow diagrams */
#page-fmc .band{font-family:var(--display);font-weight:600;font-size:13px;fill:var(--navy);letter-spacing:.12em}
#page-fmc .band-sub{font-weight:400;font-size:12.5px;fill:var(--slate)}
#page-fmc .step-t{font-family:var(--display);font-weight:600;font-size:15px;fill:var(--navy)}
#page-fmc .desc{font-weight:400;font-size:11.5px;fill:var(--slate)}
#page-fmc .num{font-family:var(--display);font-weight:700;font-size:13px;fill:var(--bg)}
#page-fmc .out-h{font-family:var(--display);font-weight:600;font-size:12px;fill:var(--cyan-ink);letter-spacing:.12em}
#page-fmc .out-d{font-weight:400;font-size:14px;fill:var(--navy)}
#page-fmc .tag{font-family:var(--display);font-weight:600;font-size:10.5px;fill:var(--cyan-ink);letter-spacing:.1em}
#page-fmc .row-tag{font-family:var(--display);font-weight:600;font-size:10px;fill:var(--cyan-ink);letter-spacing:.12em}
#page-fmc .chip{font-family:var(--display);font-weight:600;font-size:9.5px;letter-spacing:.1em}
#page-fmc .chip-g{fill:var(--cyan-ink)}
#page-fmc .chip-b{fill:var(--navy)}
#page-fmc .chip-y{fill:var(--muted)}
#page-fmc .ring-lab{font-family:var(--display);font-weight:600;font-size:9px;fill:var(--cyan-ink);letter-spacing:.08em}
#page-fmc .node-t{font-family:var(--display);font-weight:600;font-size:14px;fill:var(--navy)}
#page-fmc .close-t{font-family:var(--display);font-weight:700;font-size:18px;fill:var(--bg)}
#page-fmc .close-s{font-weight:400;font-size:11px;fill:var(--on-navy-soft)}
#page-fmc .cut-num{font-family:var(--display);font-weight:700;font-size:16px;fill:var(--navy)}
#page-fmc .cut-num2{font-family:var(--display);font-weight:700;font-size:16px;fill:var(--cyan-ink)}
#page-fmc .cut-cap{font-weight:400;font-size:11.5px;fill:var(--slate)}

/* Full-machinery storyboard reveal (JS toggles .on per step) */
#page-fmc [data-step]{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
#page-fmc [data-step].on{opacity:1;transform:none}
#page-fmc.no-motion [data-step]{opacity:1;transform:none;transition:none}

/* Glossary strip under the flow */
#page-fmc .glossary{margin-top:18px;border:.5px solid var(--line);border-radius:14px;padding:16px 22px;font-size:13px;color:var(--slate);line-height:1.7;background:var(--bg)}
#page-fmc .glossary b{color:var(--navy);font-weight:600}
#page-fmc .glossary a{color:var(--cyan-ink);font-weight:600}
#page-fmc .glossary a:hover{text-decoration:underline}

/* Why it works: many-in few-out funnel card */
#page-fmc .funnel{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px;background:var(--bg);border:.5px solid var(--line);border-radius:14px;padding:24px 30px}
#page-fmc .funnel .big{font-family:var(--display);font-weight:700;font-size:30px;color:var(--navy);letter-spacing:-.02em;line-height:1}
#page-fmc .funnel .cap{font-size:12px;color:var(--muted);margin-top:4px}
#page-fmc .funnel .fnl{flex:1 1 260px;min-width:240px;max-width:560px;height:auto;display:block}
#page-fmc .funnel .fcap{flex-basis:100%;font-size:13px;color:var(--muted)}

/* Animated funnel dots: two pass through, four are removed at the first
   filter and two at the second; every removal falls out just before its
   dashed line. */
#page-fmc .fnl .fm{opacity:0;animation-duration:6.6s;animation-timing-function:linear;animation-iteration-count:infinite}
#page-fmc .fnl .fm1{animation-name:fnlPassA}
#page-fmc .fnl .fm2{animation-name:fnlDropA;animation-delay:.7s}
#page-fmc .fnl .fm3{animation-name:fnlDropB;animation-delay:1.4s}
#page-fmc .fnl .fm5{animation-name:fnlDropC;animation-delay:2s}
#page-fmc .fnl .fm4{animation-name:fnlPassB;animation-delay:2.7s}
#page-fmc .fnl .fm7{animation-name:fnlDropE;animation-delay:3.6s}
#page-fmc .fnl .fm8{animation-name:fnlDropF;animation-delay:4.5s}
#page-fmc .fnl .fm6{animation-name:fnlDropD;animation-delay:5.4s}
@keyframes fnlPassA{0%{transform:translate(28px,62px);opacity:0}6%{opacity:.85}62%{transform:translate(392px,79px);opacity:.85}82%{transform:translate(508px,80px);opacity:.85}90%{transform:translate(534px,80px);opacity:0}100%{transform:translate(534px,80px);opacity:0}}
@keyframes fnlPassB{0%{transform:translate(36px,118px);opacity:0}6%{opacity:.85}64%{transform:translate(392px,83px);opacity:.85}84%{transform:translate(512px,80px);opacity:.85}92%{transform:translate(534px,80px);opacity:0}100%{transform:translate(534px,80px);opacity:0}}
@keyframes fnlDropA{0%{transform:translate(30px,95px);opacity:0}7%{opacity:.8}36%{transform:translate(136px,101px);opacity:.8}54%{transform:translate(146px,172px);opacity:0}100%{transform:translate(146px,172px);opacity:0}}
@keyframes fnlDropB{0%{transform:translate(32px,45px);opacity:0}7%{opacity:.8}38%{transform:translate(140px,55px);opacity:.8}48%{transform:translate(146px,118px);opacity:.6}60%{transform:translate(151px,174px);opacity:0}100%{transform:translate(151px,174px);opacity:0}}
@keyframes fnlDropE{0%{transform:translate(48px,130px);opacity:0}7%{opacity:.8}34%{transform:translate(133px,124px);opacity:.8}52%{transform:translate(141px,170px);opacity:0}100%{transform:translate(141px,170px);opacity:0}}
@keyframes fnlDropF{0%{transform:translate(26px,72px);opacity:0}7%{opacity:.8}40%{transform:translate(141px,80px);opacity:.8}58%{transform:translate(149px,168px);opacity:0}100%{transform:translate(149px,168px);opacity:0}}
@keyframes fnlDropC{0%{transform:translate(30px,80px);opacity:0}7%{opacity:.8}52%{transform:translate(256px,90px);opacity:.8}70%{transform:translate(264px,162px);opacity:0}100%{transform:translate(264px,162px);opacity:0}}
@keyframes fnlDropD{0%{transform:translate(40px,132px);opacity:0}7%{opacity:.8}50%{transform:translate(258px,104px);opacity:.8}68%{transform:translate(266px,158px);opacity:0}100%{transform:translate(266px,158px);opacity:0}}
@media(prefers-reduced-motion:reduce){#page-fmc .fnl .fm{animation:none;display:none}}

/* The maths: prose column plus the cost-of-one-unqualified-lead panel */
#page-fmc .mathwrap{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;margin-top:30px;align-items:start}
#page-fmc .mathwrap .why p{font-size:15.5px;color:var(--slate);line-height:1.65;margin-top:12px}
#page-fmc .mathwrap .why p b{color:var(--navy);font-weight:600}
#page-fmc .mathpanel{background:var(--bg);border:.5px solid var(--line);border-radius:14px;padding:26px 28px}
#page-fmc .mathpanel .mtag{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:14px}
#page-fmc .mathpanel .mrow{display:flex;gap:14px;align-items:baseline;padding-top:12px;padding-bottom:12px;border-bottom:.5px solid var(--line-faint)}
#page-fmc .mathpanel .mrow:last-of-type{border-bottom:0}
#page-fmc .mathpanel .mv{font-family:var(--display);font-weight:700;font-size:19px;color:var(--navy);letter-spacing:-.02em;white-space:nowrap;min-width:158px}
#page-fmc .mathpanel .ml{font-size:13.5px;color:var(--slate);line-height:1.5}
#page-fmc .mathpanel .mtotal{margin-top:14px;border-top:1.5px solid var(--navy);padding-top:14px;display:flex;gap:14px;align-items:baseline}
#page-fmc .mathpanel .mtotal .mv{color:var(--cyan-ink)}
#page-fmc .mathpanel .mnote{font-size:12px;color:var(--muted);margin-top:14px}
#page-fmc .mathclose{font-family:var(--display);font-weight:600;color:var(--navy);font-size:19px;border-left:3px solid var(--cyan);padding-left:16px;margin-top:30px;max-width:560px}

/* Who does what: four ownership cards */
#page-fmc .ww{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;margin-top:30px}
#page-fmc .ww .w{position:relative;border:.5px solid var(--line);border-radius:12px;background:var(--bg);padding:22px 22px 22px 26px;overflow:hidden}
#page-fmc .ww .w .accent{position:absolute;left:0;top:0;bottom:0;width:5px}
#page-fmc .ww .w .chiplab{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
#page-fmc .ww .w h3{font-size:16px;font-weight:600;color:var(--navy);margin:10px 0 6px}
#page-fmc .ww .w p{font-size:13.5px;line-height:1.55;color:var(--slate)}

/* The menu: seven priced items */
#page-fmc .menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;margin-top:30px}
#page-fmc .menu .mi{border:.5px solid var(--line);border-radius:12px;background:var(--bg);padding:22px}
#page-fmc .menu .mi .mh{display:flex;align-items:center;gap:9px}
#page-fmc .menu .mi .owndot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
#page-fmc .menu .mi h3{font-size:16px;font-weight:600;color:var(--navy)}
#page-fmc .menu .mi p{font-size:13.5px;line-height:1.55;color:var(--slate);margin-top:8px}
#page-fmc .menunote{font-size:14px;color:var(--slate);margin-top:22px;max-width:620px}

/* Compliance: the two POPIA gate cards */
#page-fmc .popia2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
#page-fmc .popia2 .pt{border:.5px solid var(--line);border-radius:14px;background:var(--bg);padding:26px}
#page-fmc .popia2 .pt .pn{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:10px}
#page-fmc .popia2 .pt h3{font-size:18px;font-weight:600;color:var(--navy);margin-bottom:8px}
#page-fmc .popia2 .pt p{font-size:14px;line-height:1.6;color:var(--slate)}

/* One engine, many doorways: vertical chips */
#page-fmc .vchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
#page-fmc .vchip{border:1px solid var(--chip-border);background:var(--bg);border-radius:22px;padding:9px 17px;font-size:13.5px;color:var(--navy);cursor:pointer;transition:.14s;display:inline-flex;align-items:center;gap:8px}
#page-fmc .vchip:hover{border-color:var(--navy);background:var(--navy);color:var(--bg)}
#page-fmc .vsoon{font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:var(--rt-soon-bg);color:var(--slate);border-radius:5px;padding:2px 6px;font-weight:600}
#page-fmc .vchip:hover .vsoon{background:rgba(255,255,255,.22);color:var(--bg)}

@media(max-width:760px){#page-fmc .mathwrap,#page-fmc .popia2{grid-template-columns:1fr}}