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

: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}
.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}
.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}
.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}
.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}
.mk span{font-family:var(--font-mono);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;color:var(--m-dim)}
.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}
.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}
.pos__tile em{font-style:normal;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--m-dim)}

.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}
.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}
.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}
.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}
.rcpt .meta{font-family:var(--font-mono);font-size:.68rem;color:#4B5B74;margin-bottom:10px;line-height:1.6}
.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)}
.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)}
@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}
.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}
.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)}
.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}
.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}
.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)}
.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}
.dmap__eta span{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#CDB4FF}
.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)}
.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}
.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}

/* 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)}
.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}
.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}
.fcam .lbl{position:absolute;left:10px;bottom:9px;font-family:var(--font-mono);font-size:.62rem;color:#9FB1D0}

.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}
.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}
.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}
.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}

/* 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}
.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}
.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}
.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}
.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}
.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}
.tsplit__legend .pcf{grid-column:1/-1;font-family:var(--font-mono);font-size:.68rem;color:#8FE9FB}
.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)}
.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}

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