/* 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 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:104px;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}
/* Same mobile blur-drop fix as chrome.css's header rule: solid background, no backdrop-filter */
@media(max-width:760px){#page-fmc .toolbar{background:var(--bg);backdrop-filter:none}}
/* The mode toggle itself (.seg) is shared chrome now: see chrome.css */
#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}
/* Ownership colour key: standardised and right-aligned above each device that uses it on this page */
#page-fmc .ownkey{justify-content:flex-end}
#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-ink);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)}
/* The steer device itself (.flowsteer, .steerbig) is shared chrome now: see chrome.css */

/* 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(--navy)}
#page-fmc .close-s{font-weight:400;font-size:11px;fill:var(--slate)}
#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-ink);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-ink)}

/* Animated funnel dots: two pass through, four are removed at the first
   filter, two at the second and one at the third; 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}
#page-fmc .fnl .fm9{animation-name:fnlDropG;animation-delay:3s}
@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}}
@keyframes fnlDropG{0%{transform:translate(28px,68px);opacity:0}7%{opacity:.8}60%{transform:translate(340px,96px);opacity:.8}80%{transform:translate(350px,150px);opacity:0}100%{transform:translate(350px,150px);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:18px;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:188px}
#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:18px;align-items:baseline}
#page-fmc .mathpanel .mtotal .mv{color:var(--cyan-ink)}
#page-fmc .mathpanel .mnote{font-size:12px;color:var(--muted-ink);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}

/* The maths panel reveals its lines in sequence when scrolled into view, and
   the total counts up. The figures keep their final value in the HTML, so
   no-JS and reduced-motion visitors always see the full numbers. */
.js #page-fmc .mathpanel .mrow,.js #page-fmc .mathpanel .mtotal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js #page-fmc .mathpanel.mathgo .mrow:nth-of-type(2){opacity:1;transform:none;transition-delay:0s}
.js #page-fmc .mathpanel.mathgo .mrow:nth-of-type(3){opacity:1;transform:none;transition-delay:.18s}
.js #page-fmc .mathpanel.mathgo .mrow:nth-of-type(4){opacity:1;transform:none;transition-delay:.36s}
.js #page-fmc .mathpanel.mathgo .mtotal{opacity:1;transform:none;transition-delay:.54s}
@media(prefers-reduced-motion:reduce){.js #page-fmc .mathpanel .mrow,.js #page-fmc .mathpanel .mtotal{opacity:1;transform:none;transition:none}}

/* 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}}