/* Piets — Payments / Ghost Kitchen / Fleet / Financing / Software pages.
   Navy · Cyan · Purple (palette B, Oct 9 2026). Loads after theme-ncp.css.
   Piets Technology Solutions Inc · 631-871-5957 · pietstechsolutions.com
   Much of this was prepared with AI. Tell the owner about any mistake so it gets fixed. */

/* ---------- FONT_STANDARD.md rule 1 (Oct 11 2026) ----------
   Every rule in this file that sets font-family now also sets font-weight. A family
   with no weight inherits whatever the element defaults to — 400 on a div or span, and
   the keyword `bolder` on a <b>, whose computed value is decided by its PARENT: 700
   under a 400 parent, 900 under a 700 one, and no family here has a 900 (rule 2, and
   Bricolage Grotesque stops at 800). 44 rules carried a family and no weight; all 44
   are now pinned, and EVERY weight below is the value the page ALREADY computed,
   measured on the live DOM of all 10 pages that load this file (coverage,
   design-studio, financing, fleet, ghost-kitchen, lighting, payments, products,
   remote-support, software) at 1440 and 360, before and after the demos were driven —
   so nothing moves. House values were not needed: every one of the 44 had a real
   element to measure.

     Bricolage Grotesque 700 — h4/h5/h6 and <b> resolving `bolder` against a 400 parent
       .mcon__bar b · .mcon h4 · .mk b · .pos__thead b · .rcpt h5 · .dmap__eta b
       .chan h6 · .partners h6 · .tsplit__h h6
     JetBrains Mono 700 — <b> resolving `bolder` against a 400 parent (the live trap)
       .pos__line .qty b · .kds h5 · .calcout .l b · .chan .ln b
     JetBrains Mono 400 — the mono labels, all inheriting 400 today
       the remaining 31 rules

   The 700s are where the bug was armed, not the 400s: each is a <b> whose weight came
   from the UA keyword `bolder` against a 400 parent. Any later rule that set one of
   those parents to 700 would have sent the child to 900 — a face no page here loads —
   silently. They are pinned to 700, which is what they render today.

   DELIBERATELY NOT CHANGED: nothing is raised to the house 800 for display numbers or
   500 for mono labels. These rules render on 10 live pages, so a house value would be
   a visible change to every money-page demo, and this item is rule 1, not a redesign.
   `.dstep .dot` takes 400 because `.dstep.on .dot` already sets 700 and still wins on
   specificity, so the active delivery step is unchanged. No bolder/lighter anywhere in
   this file, before or after. */

:root{
  --mg:linear-gradient(100deg,#02D7F5 0%,#016FD6 55%,#7A3DFF 100%);
  --m-ink:#050A1F; --m-panel:#0A1430; --m-panel-2:#0E1A3A;
  --m-line:rgba(255,255,255,.12); --m-line-2:rgba(255,255,255,.08);
  --m-dim:#8EA3C9; --m-txt:#E7EFFC;
}

/* ---------------- console shell (shared by every live demo) ---------------- */
.mcon{
  border-radius:26px;overflow:hidden;border:1px solid var(--m-line);
  background:linear-gradient(180deg,var(--m-panel),var(--m-panel-2));
  box-shadow:0 30px 80px rgba(3,6,20,.5);color:var(--m-txt)}
.mcon__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--m-line);background:rgba(255,255,255,.03)}
.mcon__lg{width:28px;height:28px;border-radius:9px;background:#011F5D;display:grid;place-items:center;flex:0 0 auto}
.mcon__lg i{display:block;width:13px;height:3px;border-radius:2px;background:var(--mg);
  box-shadow:0 5px 0 0 #02D7F5,0 10px 0 0 #7A3DFF}
.mcon__bar b{font-family:var(--font-display);font-size:1rem;font-weight:700}
.mcon__demo{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:#FFB020;border:1px solid rgba(255,176,32,.45);padding:3px 9px;border-radius:999px;font-weight:400}
.mcon__live{margin-left:auto;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:#2EE59D;display:inline-flex;align-items:center;gap:6px;font-weight:400}
.mcon__live::before{content:"";width:6px;height:6px;border-radius:50%;background:#2EE59D;animation:mping 2s infinite}
@keyframes mping{0%{box-shadow:0 0 0 0 rgba(46,229,157,.6)}70%{box-shadow:0 0 0 8px rgba(46,229,157,0)}100%{box-shadow:0 0 0 0 rgba(46,229,157,0)}}
.mcon__tabs{display:flex;gap:4px;padding:12px 14px 0;overflow-x:auto;scrollbar-width:thin}
.mcon__tabs button{cursor:pointer;font:inherit;font-size:.86rem;white-space:nowrap;padding:8px 14px;
  border-radius:12px 12px 0 0;background:transparent;border:1px solid transparent;border-bottom:0;color:#9FB1D0}
.mcon__tabs button:hover{color:#fff}
.mcon__tabs button[aria-selected="true"]{background:rgba(122,61,255,.18);border-color:rgba(167,139,250,.5);color:#fff;font-weight:600}
.mcon__body{padding:18px}
.mcon h4{font-family:var(--font-display);font-size:1.25rem;color:#fff;margin:0 0 2px;font-weight:700}
.mcon .sub{color:#93A6C6;font-size:.86rem;margin-bottom:14px}
.mcon .note{margin-top:14px;font-size:.79rem;color:#7F91B0}
.mcon .flash{margin-top:12px;padding:10px 14px;border-radius:12px;background:rgba(46,229,157,.12);
  border:1px solid rgba(46,229,157,.4);color:#9FF3CE;font-size:.86rem}
.mcon .flash.warn{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.4);color:#FFD88A}

/* KPI tiles */
.mk{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:720px){.mk{grid-template-columns:repeat(2,1fr)}}
.mk>div{padding:13px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.mk b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1.05;color:#fff;font-weight:700}
.mk span{font-family:var(--font-mono);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;color:var(--m-dim);font-weight:400}
.mk .good b{color:#2EE59D}.mk .warn b{color:#FFB020}.mk .bad b{color:#FF5D5D}.mk .pur b{color:#CDB4FF}

/* rows */
.mrows{margin-top:14px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.mrows .r{display:flex;gap:12px;align-items:center;padding:11px 14px;font-size:.9rem;
  border-bottom:1px solid var(--m-line-2)}
.mrows .r:last-child{border-bottom:0}
.mrows .r:nth-child(odd){background:rgba(255,255,255,.025)}
.mrows .r b{color:#fff;font-weight:600}
.mrows .r .m{color:var(--m-dim);font-size:.8rem}
.mrows .r .tail{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* tags */
.mtag{display:inline-block;font-family:var(--font-mono);font-size:.63rem;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  color:#C8D6EE;white-space:nowrap;font-weight:400}
.mtag.ok{color:#2EE59D;border-color:rgba(46,229,157,.45)}
.mtag.warn{color:#FFB020;border-color:rgba(255,176,32,.45)}
.mtag.bad{color:#FF5D5D;border-color:rgba(255,93,93,.45)}
.mtag.pur{color:#CDB4FF;border-color:rgba(167,139,250,.6);background:rgba(122,61,255,.16)}
.mtag.cy{color:#8FE9FB;border-color:rgba(2,215,245,.5)}

/* buttons inside consoles */
.mbtn{cursor:pointer;font:inherit;font-size:.83rem;font-weight:600;padding:8px 16px;border-radius:999px;
  border:0;background:var(--mg);color:#061024}
.mbtn:hover{filter:brightness(1.08)}
.mbtn.g{background:transparent;border:1px solid rgba(255,255,255,.22);color:#DCE6F7}
.mbtn.g:hover{background:rgba(122,61,255,.2);border-color:rgba(167,139,250,.7);color:#fff}
.mbtn:disabled{opacity:.35;cursor:not-allowed;filter:none}
.macts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------------- POS register ---------------- */
.pos{display:grid;grid-template-columns:1fr 330px;gap:16px}
@media(max-width:900px){.pos{grid-template-columns:1fr}}
.pos__cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pos__cats button{cursor:pointer;font:inherit;font-size:.82rem;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#B9C8E2}
.pos__cats button[aria-selected="true"]{background:var(--mg);color:#061024;font-weight:700;border-color:transparent}
.pos__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media(max-width:1100px){.pos__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.pos__grid{grid-template-columns:repeat(2,1fr)}}
.pos__tile{cursor:pointer;font:inherit;text-align:left;padding:13px 12px;border-radius:15px;min-height:86px;
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;transition:.15s}
.pos__tile:hover{background:rgba(122,61,255,.2);border-color:rgba(167,139,250,.7);transform:translateY(-2px)}
.pos__tile:active{transform:translateY(0) scale(.98)}
.pos__tile strong{font-size:.92rem;font-weight:600;line-height:1.25}
.pos__tile span{font-family:var(--font-mono);font-size:.8rem;color:#8FE9FB;font-weight:400}
.pos__tile em{font-style:normal;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--m-dim);font-weight:400}

.pos__ticket{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;
  padding:14px;display:flex;flex-direction:column;min-height:420px}
.pos__thead{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:10px;border-bottom:1px solid var(--m-line);margin-bottom:8px}
.pos__thead b{font-family:var(--font-display);font-size:1rem;font-weight:700}
.pos__lines{flex:1;overflow-y:auto;max-height:290px;margin:0;padding:0;list-style:none}
.pos__line{display:grid;grid-template-columns:auto 1fr auto auto;gap:9px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--m-line-2);font-size:.88rem}
.pos__line .qty{display:flex;align-items:center;gap:4px}
.pos__line .qty button{cursor:pointer;width:24px;height:24px;border-radius:7px;font:inherit;line-height:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#DCE6F7}
.pos__line .qty button:hover{background:rgba(122,61,255,.3);color:#fff}
.pos__line .qty b{min-width:18px;text-align:center;font-family:var(--font-mono);font-size:.85rem;font-weight:700}
.pos__line .nm{line-height:1.25}
.pos__line .nm em{display:block;font-style:normal;font-size:.72rem;color:var(--m-dim)}
.pos__line .amt{font-family:var(--font-mono);font-size:.86rem;white-space:nowrap;font-weight:400}
.pos__line .rm{cursor:pointer;background:transparent;border:0;color:#FF8080;font:inherit;font-size:1.05rem;padding:2px 4px;line-height:1}
.pos__empty{color:var(--m-dim);font-size:.86rem;padding:26px 4px;text-align:center}
.pos__tot{border-top:1px solid var(--m-line);margin-top:8px;padding-top:10px}
.pos__tot .l{display:flex;justify-content:space-between;padding:4px 0;font-size:.87rem;color:#C2D0E8}
.pos__tot .l b{font-family:var(--font-mono);font-weight:700}
.pos__tot .l.big{border-top:1px solid rgba(255,255,255,.14);margin-top:7px;padding-top:9px;
  font-size:1.12rem;color:#fff;font-weight:700}
.pos__tot .l.sur b{color:#CDB4FF}
.pos__sw{display:flex;align-items:center;gap:9px;margin:10px 0 2px;font-size:.8rem;color:#B9C8E2}
.pos__sw input[type=checkbox]{width:0;height:0;opacity:0;position:absolute}
.pos__sw .tr{width:38px;height:21px;border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);position:relative;transition:.2s;flex:0 0 auto}
.pos__sw .tr::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;transition:.2s}
.pos__sw input[type=checkbox]:checked+.tr{background:var(--mg);border-color:transparent}
.pos__sw input[type=checkbox]:checked+.tr::after{left:20px}
.pos__sw input[type=checkbox]:focus-visible+.tr{outline:3px solid var(--cyan);outline-offset:2px}

/* tender pad */
.pos__pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.pos__pay button{cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;padding:11px 6px;border-radius:13px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#DCE6F7;display:grid;gap:5px;justify-items:center}
.pos__pay button:hover{background:rgba(2,215,245,.16);border-color:rgba(2,215,245,.5);color:#fff}
.pos__pay button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}

/* receipt + kitchen ticket */
.pos__out{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media(max-width:760px){.pos__out{grid-template-columns:1fr}}
.rcpt{background:#fff;color:#26354D;border-radius:14px;padding:18px 20px;font-size:.82rem;
  animation:slipIn .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes slipIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rcpt{animation:none}}
.rcpt .stripe{height:5px;border-radius:3px;background:var(--mg);margin-bottom:12px}
.rcpt h5{font-family:var(--font-display);font-size:1.05rem;color:#011F5D;margin:0 0 2px;font-weight:700}
.rcpt .meta{font-family:var(--font-mono);font-size:.68rem;color:#4B5B74;margin-bottom:10px;line-height:1.6;font-weight:400}
.rcpt table{width:100%;border-collapse:collapse}
.rcpt td{padding:4px 0;border-bottom:1px solid #EDF2F8}
.rcpt td.n{text-align:right;white-space:nowrap;font-family:var(--font-mono);font-weight:400}
.rcpt .tt{margin-top:9px}
.rcpt .tt .l{display:flex;justify-content:space-between;padding:3px 0}
.rcpt .tt .l.big{border-top:2px solid #011F5D;margin-top:5px;padding-top:7px;font-weight:800;color:#011F5D;font-size:1rem}
.rcpt .ft{margin-top:12px;border-top:1px solid #D3DFEE;padding-top:9px;font-size:.68rem;color:#4B5B74;line-height:1.55}

.kds{background:#07101F;border:1px solid rgba(46,229,157,.35);border-radius:14px;padding:16px 18px;
  font-family:var(--font-mono);font-size:.8rem;color:#9FF3CE;animation:slipIn .45s .12s backwards cubic-bezier(.2,.9,.3,1.2);font-weight:400}
@media (prefers-reduced-motion:reduce){.kds{animation:none}}
.kds h5{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#2EE59D;margin:0 0 10px;display:flex;justify-content:space-between;font-weight:700}
.kds ul{list-style:none;margin:0;padding:0}
.kds li{padding:6px 0;border-bottom:1px dashed rgba(46,229,157,.2);color:#DFF6EC}
.kds li:last-child{border-bottom:0}
.kds li span{color:#2EE59D;margin-right:8px}
.kds li em{display:block;font-style:normal;color:#6FBF9C;font-size:.74rem;padding-left:22px}

/* ---------------- calculators ---------------- */
.calc{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
@media(max-width:820px){.calc{grid-template-columns:1fr}}
.calcf{display:grid;gap:13px}
.calcf .f{display:grid;gap:6px}
.calcf label{font-size:.85rem;color:#C2D0E8;font-weight:500}
.calcf .hint{font-size:.74rem;color:#7F91B0}
.calcf .inp{display:flex;align-items:center;gap:0;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.calcf .inp:focus-within{border-color:rgba(2,215,245,.7);box-shadow:0 0 0 3px rgba(2,215,245,.18)}
.calcf .inp span{padding:0 11px;font-family:var(--font-mono);font-size:.85rem;color:var(--m-dim);flex:0 0 auto;font-weight:400}
.calcf input[type=number],.calcf input[type=text]{flex:1;min-width:0;height:44px;padding:0 12px;border:0;
  background:transparent;color:#fff;font:inherit;font-family:var(--font-mono);font-weight:400}
.calcf input[type=range]{width:100%;accent-color:#7A3DFF}
.calcf .mseg{display:flex;gap:6px;flex-wrap:wrap}
.calcf .mseg button{cursor:pointer;font:inherit;font-size:.82rem;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#B9C8E2}
.calcf .mseg button[aria-pressed="true"]{background:var(--mg);color:#061024;font-weight:700;border-color:transparent}

.calcout{background:rgba(122,61,255,.12);border:1px solid rgba(167,139,250,.45);border-radius:18px;padding:18px}
.calcout .big{font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:1.05;color:#fff;margin:2px 0 4px}
.calcout .cap{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:#CDB4FF;font-weight:400}
.calcout .l{display:flex;justify-content:space-between;padding:6px 0;font-size:.87rem;color:#C2D0E8;
  border-top:1px solid rgba(255,255,255,.1);margin-top:6px;padding-top:9px}
.calcout .l b{font-family:var(--font-mono);color:#fff;font-weight:700}
.calcout .dis{margin-top:13px;font-size:.73rem;color:#A292C9;line-height:1.55}

/* ---------------- delivery / dispatch map ---------------- */
.drive{display:grid;grid-template-columns:1fr 300px;gap:16px}
@media(max-width:900px){.drive{grid-template-columns:1fr}}
.dmap{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  background:#071024;min-height:330px}
.dmap svg{display:block;width:100%;height:100%}
.dmap__hud{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.dmap__hud span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:rgba(5,10,31,.8);border:1px solid rgba(2,215,245,.4);
  color:#CFE8FF;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-weight:400}
.dmap__eta{position:absolute;right:12px;top:12px;z-index:2;background:rgba(5,10,31,.84);
  border:1px solid rgba(167,139,250,.5);border-radius:14px;padding:10px 14px;text-align:right;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dmap__eta b{display:block;font-family:var(--font-display);font-size:1.5rem;color:#fff;line-height:1;font-weight:700}
.dmap__eta span{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#CDB4FF;font-weight:400}
.dstep{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--m-line-2)}
.dstep:last-child{border-bottom:0}
.dstep .dot{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-family:var(--font-mono);
  font-size:.66rem;color:var(--m-dim);font-weight:400}
.dstep.on .dot{background:var(--mg);border-color:transparent;color:#061024;font-weight:700}
.dstep.done .dot{background:rgba(46,229,157,.2);border-color:rgba(46,229,157,.5);color:#2EE59D}
.dstep b{display:block;font-size:.9rem;color:#fff;font-weight:600}
.dstep em{font-style:normal;font-size:.78rem;color:var(--m-dim)}
.dstep.on b{color:#CDB4FF}

/* channel grid */
.chan{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
@media(max-width:860px){.chan{grid-template-columns:repeat(2,1fr)}}
.chan>div{padding:13px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11)}
.chan h6{font-family:var(--font-display);font-size:.95rem;color:#fff;margin:0 0 7px;font-weight:700}
.chan .ln{display:flex;justify-content:space-between;font-size:.78rem;color:var(--m-dim);padding:3px 0}
.chan .ln b{font-family:var(--font-mono);color:#DCE6F7;font-weight:700}

/* dispute desk */
.disp{display:grid;gap:10px;margin-top:6px}
.dcase{border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);overflow:hidden}
.dcase__h{display:flex;gap:11px;align-items:center;padding:12px 14px;flex-wrap:wrap}
.dcase__h b{font-size:.93rem;color:#fff}
.dcase__h .m{font-size:.78rem;color:var(--m-dim)}
.dcase__h .tail{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.dcase__b{padding:0 14px 14px;display:grid;gap:9px}
.evid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
.evid span{display:flex;gap:7px;align-items:center;font-size:.77rem;color:#C2D0E8;padding:8px 10px;
  border-radius:11px;background:rgba(2,215,245,.08);border:1px solid rgba(2,215,245,.24)}
.evid span svg{width:15px;height:15px;stroke:#02D7F5;fill:none;stroke-width:2;flex:0 0 auto}
.evid span.off{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#7F91B0}
.evid span.off svg{stroke:#7F91B0}

/* ---------------- fleet ---------------- */
.flt{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media(max-width:980px){.flt{grid-template-columns:1fr}}
.fveh{display:flex;flex-direction:column;gap:8px}
@media(max-width:980px){.fveh{flex-direction:row;overflow-x:auto;padding-bottom:6px}}
.fveh button{cursor:pointer;font:inherit;text-align:left;width:100%;display:grid;gap:3px;padding:12px 14px;
  border-radius:15px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#CFDCF2;transition:.16s}
@media(max-width:980px){.fveh button{width:auto;min-width:184px}}
.fveh button:hover{background:rgba(255,255,255,.08);color:#fff}
.fveh button[aria-selected="true"]{background:rgba(122,61,255,.22);border-color:rgba(167,139,250,.8);color:#fff}
.fveh strong{font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:8px}
.fveh small{font-size:.75rem;color:var(--m-dim)}
.fveh .st{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.fveh .st.mv{background:#2EE59D;animation:mping 2s infinite}
.fveh .st.idle{background:#FFB020}
.fveh .st.off{background:#55637C}

.fgauge{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
@media(max-width:620px){.fgauge{grid-template-columns:1fr}}
.fgauge>div{padding:13px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.fgauge .cap{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--m-dim);font-weight:400}
.fgauge .val{font-family:var(--font-display);font-weight:800;font-size:1.45rem;color:#fff;line-height:1.1;margin:3px 0 7px}
.bar{height:7px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--mg);transition:width .6s cubic-bezier(.3,.9,.3,1)}
.bar.low i{background:linear-gradient(90deg,#FFB020,#FF5D5D)}
.bar.good i{background:linear-gradient(90deg,#02D7F5,#2EE59D)}

.fcam{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:#060D1C;aspect-ratio:16/9}
.fcam svg{display:block;width:100%;height:100%}
.fcam .rec{position:absolute;left:10px;top:9px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  color:#FF5D5D;display:flex;align-items:center;gap:6px;font-weight:400}
.fcam .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF5D5D;animation:mping 1.6s infinite}
.fcam .ts{position:absolute;right:10px;top:9px;font-family:var(--font-mono);font-size:.62rem;color:#CFE8FF;font-weight:400}
.fcam .lbl{position:absolute;left:10px;bottom:9px;font-family:var(--font-mono);font-size:.62rem;color:#9FB1D0;font-weight:400}

.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
@media(max-width:900px){.partners{grid-template-columns:repeat(2,1fr)}}
.partners>div{padding:14px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11)}
.partners .ic{width:36px;height:36px;border-radius:11px;background:var(--mg);display:grid;place-items:center;margin-bottom:9px}
.partners .ic svg{width:18px;height:18px;stroke:#071024;fill:none;stroke-width:2}
.partners h6{font-family:var(--font-display);font-size:.96rem;color:#fff;margin:0 0 4px;font-weight:700}
.partners p{font-size:.8rem;color:var(--m-dim);margin:0}

/* backhaul legs */
.legs{display:grid;gap:8px;margin-top:6px}
.leg{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);font-size:.87rem}
.leg .rt{font-family:var(--font-mono);font-size:.8rem;color:#8FE9FB;white-space:nowrap;font-weight:400}
.leg b{color:#fff}
.leg .tail{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.leg.empty{border-style:dashed;border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.07)}

/* ---------------- SaaS tier matrix ---------------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.tier.pop{border-color:rgba(122,61,255,.5);box-shadow:0 18px 50px rgba(122,61,255,.18)}
.tier .nm{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--navy);margin-bottom:4px}
.tier .who{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.tier .badge{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:var(--purple-wash);color:var(--purple-deep);margin-bottom:12px;font-weight:400}
.tier ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.tier li{display:flex;gap:9px;font-size:.92rem;color:var(--text);line-height:1.45}
.tier li svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;stroke:#16A765;fill:none;stroke-width:2.4}
.tier li.no{color:var(--muted-dark)}
.tier li.no svg{stroke:#C3CEDE}
.tier .foot{margin-top:auto}
.tier .quoted{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;font-weight:400}

/* software stack cards */
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:980px){.stack{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.stack{grid-template-columns:1fr}}
.scard{display:flex;flex-direction:column;gap:9px;padding:20px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;transition:.2s}
a.scard:hover{background:rgba(122,61,255,.17);border-color:rgba(167,139,250,.7);transform:translateY(-3px);text-decoration:none}
.scard .ic{width:42px;height:42px;border-radius:13px;background:var(--mg);display:grid;place-items:center}
.scard .ic svg{width:21px;height:21px;stroke:#071024;fill:none;stroke-width:2}
.scard h3{font-size:1.1rem;margin:0;color:#fff}
.scard p{font-size:.88rem;color:#A9B8D4;margin:0;flex:1}
.scard .go{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#8FE9FB;font-weight:400}
.scard .st{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;align-self:flex-start;
  background:rgba(122,61,255,.2);border:1px solid rgba(167,139,250,.5);color:#DCC9FF;font-weight:400}
.scard .st.live{background:rgba(46,229,157,.14);border-color:rgba(46,229,157,.45);color:#9FF3CE}

/* ---------------- steps rail ---------------- */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px;position:relative}
@media(max-width:900px){.rail{grid-template-columns:1fr}}
.rail>div{position:relative;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.rail .n{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;color:#fff;
  width:30px;height:30px;border-radius:10px;background:var(--mg);display:grid;place-items:center;margin-bottom:11px;font-weight:400}
.rail h3{font-size:1.08rem;margin-bottom:5px}
.rail p{color:var(--muted);font-size:.92rem;margin:0}

/* ---------------- lead form ---------------- */
.lead{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow-lg);
  max-width:640px;margin:0 auto}
.lead h3{font-size:1.4rem;margin-bottom:6px}
.lead>p{color:var(--muted);font-size:.95rem;margin-bottom:20px}
.lead .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.lead .two{grid-template-columns:1fr}}
.lead .f{display:grid;gap:6px;margin-bottom:14px}
.lead label{font-size:.88rem;font-weight:500}
.lead input,.lead select,.lead textarea{padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--mist);font:inherit;width:100%}
.lead input:focus,.lead select:focus,.lead textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(2,215,245,.2)}
.lead textarea{min-height:92px;resize:vertical}
.lead .cons{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted);margin-bottom:16px}
.lead .cons input{width:auto;flex:0 0 auto;margin-top:3px}
.lead .fine{font-size:.76rem;color:var(--muted);margin-top:14px;line-height:1.55}

/* ---------------- misc ---------------- */
.wband{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:26px}
.flow>div{padding:18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.flow h4{font-size:1rem;color:#fff;margin:0 0 6px}
.flow p{font-size:.86rem;color:#A9B8D4;margin:0}
.callout{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:18px;
  background:rgba(122,61,255,.12);border:1px solid rgba(167,139,250,.45);margin-top:24px}
.callout svg{width:22px;height:22px;flex:0 0 auto;stroke:#CDB4FF;fill:none;stroke-width:2;margin-top:2px}
.callout p{margin:0;font-size:.92rem;color:#D8CCF3}
.callout b{color:#fff}
.lightout{background:var(--purple-wash);border-color:rgba(122,61,255,.3)}
.lightout svg{stroke:var(--purple-deep)}
.lightout p{color:#3A2B66}
.lightout b{color:#2A1A52}

/* a faq that matches the dark bands */
.dfaq{display:grid;gap:10px;margin-top:26px}
.dfaq details{border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  padding:0 16px}
.dfaq summary{cursor:pointer;list-style:none;padding:15px 0;font-weight:600;color:#fff;font-size:.98rem;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.dfaq summary::-webkit-details-marker{display:none}
.dfaq summary::after{content:"+";font-size:1.4rem;color:#02D7F5;line-height:1;transition:transform .2s}
.dfaq details[open] summary::after{transform:rotate(45deg)}
.dfaq p{padding:0 0 16px;margin:0;color:#A9B8D4;font-size:.92rem;max-width:72ch}

/* ---------------- design studio ---------------- */
.studio{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media(max-width:1000px){.studio{grid-template-columns:1fr}}
.studio__cv{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#070D1C;
  line-height:0}
.studio__cv canvas{display:block;width:100%;touch-action:none;cursor:crosshair}
.studio__tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.studio__side{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:16px}
.studio__side h4{margin-bottom:2px}
.studio__side .calcf{gap:11px}
.studio__side .mseg button{font-size:.78rem;padding:7px 11px}

/* ---------- lighting hero show (lighting.html) — added Oct 9 2026 ----------
   Scoped to new class names only; nothing above is changed. */
.lhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:34px;align-items:center}
.lhero__copy{min-width:0}
@media(max-width:1000px){.lhero{grid-template-columns:minmax(0,1fr);gap:26px}}
.lshow{margin:0;min-width:0;padding:12px;border-radius:24px;background:rgba(255,255,255,.05);
  border:1px solid rgba(167,139,250,.4);box-shadow:0 30px 80px rgba(3,6,20,.5)}
.lshow__cv{position:relative;border-radius:16px;overflow:hidden;background:#0A1A3C;line-height:0}
.lshow__cv canvas{display:block;width:100%;height:auto}
.lshow__badge{position:absolute;left:10px;top:10px;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:rgba(5,10,31,.74);border:1px solid rgba(167,139,250,.55);color:#E9DDFF;font-weight:400}
.lshow__sets{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.lshow__sets button{cursor:pointer;font:inherit;font-size:.78rem;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.17);color:#C8D6EE}
.lshow__sets button:hover{background:rgba(122,61,255,.2);border-color:rgba(167,139,250,.7);color:#fff}
.lshow__sets button[aria-pressed="true"]{background:linear-gradient(100deg,#02D7F5 0%,#016FD6 55%,#7A3DFF 100%);
  border-color:transparent;color:#061024;font-weight:700}
.lshow__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.lshow figcaption{font-size:.76rem;color:#8EA3C9;margin:0;flex:1;min-width:140px}
/* money.css defines .lead as the white lead-capture card; the hero intro paragraph is
   also p.lead and was inheriting that white box. Scoped reset — form cards untouched. */
.phero p.lead{background:none;border:0;box-shadow:none;padding:0;border-radius:0}

/* sample property picker in the Design Studio toolbar — the pair reads as one control */
.studio__samples{display:inline-flex;gap:0;border-radius:999px;padding:3px;
  background:rgba(122,61,255,.12);border:1px solid rgba(167,139,250,.32)}
.studio__samples .mbtn.g{border:0;background:transparent;padding:6px 14px;font-size:.8rem}
.studio__samples .mbtn.g[aria-pressed="true"]{background:var(--mg,linear-gradient(100deg,#02D7F5 0%,#016FD6 55%,#7A3DFF 100%));
  color:#061024;font-weight:700}
.studio__samples .mbtn.g[aria-pressed="true"]:hover{filter:brightness(1.05);color:#061024}
@media(max-width:420px){.studio__samples{width:100%;justify-content:stretch}
  .studio__samples .mbtn.g{flex:1 1 0;min-width:0;padding:6px 8px;font-size:.74rem}}

/* "Where one ticket goes" — the ghost-kitchen ticket split. Every figure in it is
   computed from the two numbers the visitor types; nothing here is an average. */
.tsplit{margin-top:22px;padding:16px;border-radius:18px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11)}
.tsplit__h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tsplit__h h6{font-family:var(--font-display);font-size:1.02rem;color:#fff;margin:0;font-weight:700}
.tsplit__h .sub2{width:100%;margin:8px 0 13px;font-size:.79rem;color:var(--m-dim);line-height:1.6}
.tsplit__h .sub2 b{color:#CDB4FF}
.tsplit__bar{display:flex;height:34px;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.tsplit__bar i{display:block;height:100%;min-width:0;transition:width .45s cubic-bezier(.3,.9,.3,1)}
.tsplit__bar i.food{background:linear-gradient(180deg,#0A86E4,#016FD6)}
.tsplit__bar i.comm{background:linear-gradient(180deg,#9361FF,#7A3DFF)}
.tsplit__bar i.keep{background:linear-gradient(180deg,#30E3FA,#02B6D8)}
.tsplit__bar i.idle{background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 9px,rgba(255,255,255,.02) 9px 18px)}
.tsplit__legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tsplit__legend:not(:empty){margin-top:12px}
@media(max-width:760px){.tsplit__legend{grid-template-columns:1fr}}
.tsplit__legend>div{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:center;
  padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.tsplit__legend .sw{width:11px;height:11px;border-radius:4px}
.tsplit__legend .sw.food{background:#016FD6}
.tsplit__legend .sw.comm{background:#7A3DFF}
.tsplit__legend .sw.keep{background:#02D7F5}
.tsplit__legend b{font-size:.81rem;color:#DCE6F7;font-weight:600}
.tsplit__legend .amt{grid-column:1/-1;font-family:var(--font-mono);font-size:1.32rem;color:#fff;
  line-height:1.15;margin-top:4px;font-weight:400}
.tsplit__legend .pcf{grid-column:1/-1;font-family:var(--font-mono);font-size:.68rem;color:#8FE9FB;font-weight:400}
.tsplit__legend em{grid-column:1/-1;font-style:normal;font-size:.72rem;color:#7F91B0;
  line-height:1.5;margin-top:5px}
.tsplit__legend>div.neg{border-color:rgba(255,120,120,.45);background:rgba(255,93,93,.09)}
.tsplit__legend>div.neg .amt{color:#FFC2C2}
.tsplit__legend>div.neg .pcf{color:#FFA8A8}
.tsplit .ask{margin:12px 0 0;font-size:.81rem;color:#CDB4FF}
.tsplit .note{margin-top:12px}

/* ---------- payments: "switching is not free" steps (v3, Oct 9 2026) ---------- */
.swsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
@media(max-width:1000px){.swsteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.swsteps{grid-template-columns:1fr}}
.swstep{position:relative;padding:20px 20px 18px;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.swstep::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mg)}
.swstep .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:9px;margin-bottom:11px;font-family:var(--font-mono,monospace);font-size:.8rem;color:#fff;
  background:linear-gradient(140deg,#5B2EE6,#7A3DFF);border:1px solid rgba(167,139,250,.55);
  box-shadow:0 6px 18px rgba(122,61,255,.35);font-weight:400}
.swstep h4{font-size:1rem;color:#fff;margin:0 0 7px;line-height:1.3}
.swstep p{font-size:.88rem;color:#A9B8D4;margin:0}
.swstep p em{color:#CDB4FF;font-style:normal;font-weight:600}
.swstep:nth-child(2n)::before{background:linear-gradient(180deg,#02D7F5,#016FD6)}
#switching .check-list{grid-template-columns:1fr;max-width:46ch}
#switching .bigq{font-size:clamp(1.25rem,1.9vw,1.6rem);margin-bottom:16px}
#switching .callout{margin-top:0}

/* ===== Accessibility pass — roadmap item 10, Oct 10 2026 =====================
   Every control on the money pages gets a focus ring you can actually see, the
   Design Studio canvas becomes a focusable control, and the file input stops
   being unreachable from the keyboard. Nothing here changes a layout or a
   colour that was already on screen. Palette B only: cyan #02D7F5 on the dark
   panels, blue #016FD6 on the white cards, purple #7A3DFF as the accent. */

/* --- dark demo panels: one consistent cyan ring --- */
.mcon :focus-visible,
.mbtn:focus-visible,
.mcon__tabs button:focus-visible,
.calcf .mseg button:focus-visible,
.fveh button:focus-visible,
.pos__cats button:focus-visible,
.pos__tile:focus-visible,
.pos__pay button:focus-visible,
.studio__samples .mbtn:focus-visible,
.calcf input:focus-visible,
.calcf select:focus-visible,
.calcf input[type=range]:focus-visible,
.legs button:focus-visible,
.mrows button:focus-visible{
  outline:3px solid #02D7F5;outline-offset:2px}
/* pressed pills sit on the cyan→purple gradient, so the ring needs a dark edge */
.calcf .mseg button[aria-pressed="true"]:focus-visible,
.studio__samples .mbtn[aria-pressed="true"]:focus-visible{
  outline-color:#061024;box-shadow:0 0 0 6px rgba(2,215,245,.85)}

/* --- white lead card: the cyan ring is too pale, use the brand blue --- */
.lead input:focus-visible,.lead select:focus-visible,.lead textarea:focus-visible{
  outline:3px solid #016FD6;outline-offset:2px;border-color:#016FD6}
.lead .cons:has(input:focus-visible){outline:3px solid #016FD6;outline-offset:3px;border-radius:10px}

/* --- the Design Studio canvas is now a control --- */
.studio__cv:focus-within{border-color:rgba(2,215,245,.85);
  box-shadow:0 0 0 3px rgba(2,215,245,.4),0 18px 44px rgba(5,10,31,.5)}
.studio__cv canvas:focus{outline:none}
.studio__cv canvas:focus-visible{outline:3px solid #02D7F5;outline-offset:-3px}

/* the key list under the picture */
.studio__keys{margin:10px 0 0;font-size:.78rem;line-height:1.6;color:#A9BBD8}
.studio__keys b{color:#E2EEFF}
.studio__keys kbd{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:.72rem;
  padding:1px 6px;border-radius:6px;background:rgba(122,61,255,.22);
  border:1px solid rgba(167,139,250,.5);color:#E9DDFF;font-weight:400}

/* "Upload a photo" wraps a file input. It used to be hidden, which took it off
   the tab order entirely — now it is off-screen but still focusable, and the
   label shows the ring on its behalf. */
.studio__tools label.mbtn{position:relative}
.studio__tools label.mbtn:focus-within{outline:3px solid #02D7F5;outline-offset:2px}
.studio__file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;inset:auto auto 0 0}