/* Device showcase: interactive back office on a MacBook, customer app on an iPhone,
   cost estimator, lead dialog and floating launcher. Uses the site tokens
   (--bg --surface --s2 --text --muted --border --lime) so it follows light/dark mode. */
.try,.app-drawer,.app-toasts,.lead-dlg{--a:var(--lime,oklch(70% .14 180));--a-fg:var(--lime-fg,oklch(52% .11 185));--on-a:var(--on-lime,oklch(20% .03 200));
  --ok:oklch(58% .13 155);--warn:oklch(62% .15 55);--info:oklch(58% .12 245);
  --pill-p:oklch(45% .12 55);--pill-o:oklch(45% .13 250);--pill-d:oklch(42% .12 155);--up:oklch(42% .12 155);
  --ease:cubic-bezier(.16,1,.3,1)}
[data-theme="dark"] .try,[data-theme="dark"] .app-drawer{--pill-p:oklch(84% .12 75);--pill-o:oklch(82% .1 245);--pill-d:oklch(82% .12 155);--up:oklch(80% .13 155)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .try,:root:not([data-theme="light"]) .app-drawer{--pill-p:oklch(84% .12 75);--pill-o:oklch(82% .1 245);--pill-d:oklch(82% .12 155);--up:oklch(80% .13 155)}}
.try{max-width:1180px;margin:0 auto;position:relative;z-index:1;font-family:var(--ff-b,system-ui,sans-serif);text-align:left;color:var(--text)}
.try *,.lead-dlg *,.app-drawer *,.app-toasts *{box-sizing:border-box}
.try svg,.lead-dlg svg,.app-drawer svg,.app-toasts svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.app-mono{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---- tabs + footer ---- */
.try-tabwrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem}
.try-tabs{display:inline-flex;gap:.25rem;padding:.25rem;background:var(--s2);border:1px solid var(--border);border-radius:12px}
.try-tab{font:inherit;font-size:.86rem;font-weight:600;color:var(--muted);background:none;border:0;border-radius:9px;padding:.55rem 1.1rem;min-height:40px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.try-tab:hover{color:var(--text)}
.try-tab[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px oklch(20% .02 250/.08),0 0 0 1px var(--border)}
.try-live{font-size:.8rem;color:var(--muted)}
.try-foot{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:3rem}
.try-foot p{font-size:.92rem;color:var(--muted);max-width:640px;line-height:1.65;margin:0}
.try-cta{font:inherit;font-weight:600;font-size:.92rem;border:0;border-radius:100px;padding:.8rem 1.5rem;min-height:46px;cursor:pointer;background:var(--a);color:var(--on-a);transition:background .2s var(--ease),transform .2s var(--ease)}
.try-cta:hover{background:var(--lime-dim,var(--a))}.try-cta:active{transform:scale(.98)}

/* ---- stage ---- */
.dev-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto;align-items:end}
.dev-stage .mbp{grid-column:1/3;grid-row:1;width:calc(100% - 288px);margin:0;transition:width .6s var(--ease)}
.dev-stage .iph{grid-column:2;grid-row:1;justify-self:end;align-self:end;margin:0 0 -2.5rem;z-index:2;transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.dev-stage.pre .iph{transform:translateY(60px) rotate(2deg);opacity:0}
.dev-stage.est .iph{transform:translateX(40px);opacity:0;pointer-events:none;visibility:hidden;transition:transform .5s var(--ease),opacity .4s var(--ease),visibility 0s .5s}
.dev-stage.est .mbp{width:100%}
.dev-cue{grid-column:1;grid-row:2;margin:3.75rem 0 0;font-size:.9rem;color:var(--muted);line-height:1.6;max-width:560px}
.dev-cue b{color:var(--text);font-weight:600}
.dev-stage.est .dev-cue{visibility:hidden}

/* ---- MacBook ---- */
.mbp{position:relative}
.mbp-lid{position:relative;background:#0b0b0d;border-radius:22px 22px 8px 8px;padding:2.1% 2.1% 2.6%;
  box-shadow:0 0 0 1.5px #c9ccd1,0 0 0 3px #9a9ea4,0 2px 0 3px #7c8086}
.mbp-cam{position:absolute;top:.75%;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#1d2126;box-shadow:inset 0 0 0 1.5px #2b3138}
.mbp-screen{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.mbp-bar{display:grid;grid-template-columns:70px 1fr 70px;align-items:center;gap:.5rem;height:34px;padding:0 .8rem;background:var(--s2);border-bottom:1px solid var(--border);flex-shrink:0}
.mbp-dots{display:flex;gap:6px}.mbp-dots i{width:10px;height:10px;border-radius:50%}
.mbp-dots i:nth-child(1){background:#ff5f57}.mbp-dots i:nth-child(2){background:#febc2e}.mbp-dots i:nth-child(3){background:#28c840}
.mbp-url{justify-self:center;width:min(320px,100%);background:var(--surface);border-radius:7px;padding:.2rem .7rem;font-size:.72rem;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbp-base{position:relative;height:16px;margin:0 -7.5%;border-radius:2px 2px 16px 16px/2px 2px 12px 12px;
  background:linear-gradient(180deg,#e9ebee 0%,#d5d8dc 35%,#a9adb3 80%,#8a8e94 100%);
  box-shadow:0 26px 40px -18px oklch(20% .02 250/.5),0 10px 18px -12px oklch(20% .02 250/.35)}
.mbp-base::before{content:'';position:absolute;top:0;left:50%;width:15%;height:6px;transform:translateX(-50%);border-radius:0 0 9px 9px;background:linear-gradient(180deg,#b9bdc2,#d9dce0)}
.app-host{flex:1;min-height:0;container-type:inline-size;display:flex;flex-direction:column}
.app-host[hidden]{display:none}

/* ---- iPhone ---- */
.iph{position:relative;width:300px;aspect-ratio:300/620;border-radius:52px;padding:11px;background:#121214;
  box-shadow:0 0 0 1.5px #4a4d52,0 0 0 3.5px #8d9095,0 0 0 4.5px #5d6066,0 50px 80px -30px oklch(15% .02 250/.55),0 20px 30px -20px oklch(15% .02 250/.4)}
.iph-btn{position:absolute;width:4px;border-radius:2px;background:#8d9095}
.iph-btn.a{left:-7px;top:110px;height:28px}.iph-btn.b{left:-7px;top:160px;height:52px}.iph-btn.c{right:-7px;top:180px;height:80px}
.iph-screen{position:relative;height:100%;border-radius:42px;overflow:hidden;background:var(--bg)}
.iph-island{position:absolute;top:10px;left:50%;width:92px;height:27px;margin-left:-46px;border-radius:20px;background:#000;z-index:5}
.iph-app{height:100%}
.iph.ping{animation:iphPing .9s var(--ease)}
@keyframes iphPing{0%{transform:translateY(0)}30%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* ---- customer app (inside the phone) ---- */
.ph{height:100%;display:flex;flex-direction:column;font-size:13px;line-height:1.35;color:var(--text);background:var(--bg)}
.ph-status{display:flex;justify-content:space-between;align-items:center;height:46px;padding:12px 26px 0 30px;font-size:13px;font-weight:600;flex-shrink:0}
.ph-sys{display:flex;gap:5px;align-items:center}
.ph .ph-sys svg{height:11px;width:auto;fill:currentColor;stroke:none}
.ph-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ph-scroll{flex:1;overflow:auto;padding:6px 16px 16px;scrollbar-width:none;overscroll-behavior-y:contain}
.ph-scroll::-webkit-scrollbar{display:none}
.ph-to{font-size:11.5px;color:var(--muted)}
.ph-to b{color:var(--text);font-weight:600}
.ph-title{font:700 26px/1.1 var(--ff-b,system-ui,sans-serif);letter-spacing:-.02em;margin:2px 0 12px}
.ph-list{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.ph-item{display:flex;align-items:center;gap:10px;padding:11px 12px}
.ph-item+.ph-item{border-top:1px solid var(--border)}
.ph-item-t{flex:1;min-width:0}
.ph-item-t b{display:block;font-size:13.5px;font-weight:600}
.ph-item-t small{display:block;font-size:11.5px;color:var(--muted)}
.ph-item-t small.ph-stock{color:var(--pill-d)}
.ph-item-t small.ph-stock.low{color:var(--pill-p)}
.ph-step{display:flex;align-items:center;gap:4px;background:var(--s2);border-radius:999px;padding:2px}
.ph-step button{width:44px;height:44px;min-width:44px;min-height:44px;border:0;border-radius:50%;background:var(--surface);color:var(--text);font:600 18px/1 var(--ff-b,system-ui,sans-serif);cursor:pointer;box-shadow:0 1px 2px oklch(20% .02 250/.12);transition:transform .15s var(--ease);display:grid;place-items:center}
.ph-step button:active{transform:scale(.92)}
.ph-step button:disabled{opacity:.4;cursor:default;box-shadow:none}
.ph-step output{min-width:22px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.ph-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--s2);border-radius:10px;padding:3px;margin:14px 0 12px}
.ph-seg button{font:inherit;font-weight:600;font-size:12.5px;border:0;background:none;color:var(--muted);border-radius:8px;height:44px;min-height:44px;cursor:pointer}
.ph-seg button[aria-checked="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px oklch(20% .02 250/.14)}
.ph-label{font-size:11.5px;color:var(--muted);margin-bottom:6px}
.ph-chips{display:flex;gap:6px;flex-wrap:wrap}
.ph-chips button{font:inherit;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;height:44px;min-height:44px;padding:0 14px;cursor:pointer}
.ph-chips button[aria-pressed="true"]{border-color:var(--a);background:oklch(82% .155 180/.14)}
.ph-err{margin:12px 0 0;font-size:12px;color:oklch(55% .19 25)}
.ph-cta{padding:10px 16px 6px;flex-shrink:0}
.ph-place{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;height:48px;padding:0 18px;border:0;border-radius:14px;background:var(--a);color:var(--on-a);font:600 14px/1 var(--ff-b,system-ui,sans-serif);cursor:pointer;transition:transform .15s var(--ease),opacity .2s}
.ph-place:active{transform:scale(.98)}
.ph-place:disabled{background:var(--s2);color:var(--muted);cursor:default;justify-content:center}
.ph-again{justify-content:center;margin-top:14px}
.ph-tabs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);background:var(--surface);padding:6px 0 0;flex-shrink:0}
.ph-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;font-size:10.5px;font-weight:600;border:0;background:none;color:var(--muted);cursor:pointer;min-height:44px}
.ph-tabs button[aria-current="page"]{color:var(--a-fg)}
.ph .ph-tabs svg{width:20px;height:20px}
.ph-tabs em{position:absolute;top:2px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--warn)}
.ph-home{height:20px;flex-shrink:0;background:var(--surface);position:relative}
.ph-home::after{content:'';position:absolute;left:50%;bottom:7px;width:110px;height:4px;margin-left:-55px;border-radius:3px;background:var(--text);opacity:.85}
.ph-steps{list-style:none;margin:6px 0 14px;padding:0}
.ph-steps li{display:flex;gap:10px;position:relative;padding-bottom:16px;color:var(--muted)}
.ph-steps li:not(:last-child)::before{content:'';position:absolute;left:11px;top:24px;bottom:2px;width:2px;background:var(--border)}
.ph-steps li.done:not(:last-child)::before{background:var(--a)}
.ph-steps i{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;flex-shrink:0;background:var(--bg)}
.ph-steps li.done i,.ph-steps li.now i{border-color:var(--a);background:var(--a);color:var(--on-a)}
.ph-steps li.now i{box-shadow:0 0 0 4px oklch(82% .155 180/.25)}
.ph .ph-steps i svg{width:13px;height:13px;stroke-width:2.4}
.ph-steps b{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.ph-steps li:not(.done):not(.now) b{color:var(--muted);font-weight:500}
.ph-steps small{font-size:11.5px;color:var(--muted)}
.ph-hint{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;padding:11px 12px;border-radius:12px;background:oklch(82% .155 180/.12);border:1px solid oklch(82% .155 180/.35);margin-bottom:14px;align-items:start}
.ph-hint>svg{color:var(--a-fg);margin-top:2px}
.ph-hint p{margin:0;font-size:12px;line-height:1.45}
.ph-jump{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;padding:8px 12px;background:var(--a);color:var(--on-a);font-family:inherit;font-size:12px;font-weight:700;border:0;border-radius:8px;cursor:pointer;transition:transform .15s ease,opacity .15s ease;margin-top:2px}
.ph-jump:hover{opacity:.92;transform:translateY(-1px)}
.ph-jump:active{transform:scale(.98)}
.ph-receipt{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:4px 12px}
.ph-receipt div{display:flex;justify-content:space-between;padding:8px 0;font-size:12.5px}
.ph-receipt div+div{border-top:1px solid var(--border)}
.ph-receipt-t b{font-size:14px}
.ph-empty p{color:var(--muted);font-size:12.5px;line-height:1.5}
.ph-link{font:inherit;font-weight:600;color:var(--a-fg);background:none;border:0;padding:8px 0;cursor:pointer;min-height:44px}

/* ---- back office (inside the laptop) ---- */
.app{flex:1;min-height:0;display:grid;grid-template-columns:190px 1fr;font-size:.82rem;line-height:1.4}
.app-side{background:var(--bg);border-right:1px solid var(--border);padding:1rem .7rem;display:flex;flex-direction:column;gap:1rem}
.app-brand,.app-user{display:flex;align-items:center;gap:.6rem;padding:0 .4rem}
.app-brand b,.app-user b{display:block;font-size:.8rem;font-weight:600}
.app-brand small,.app-user small{display:block;font-size:.7rem;color:var(--muted)}
.app-logo,.app-av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:.68rem;font-weight:700;flex-shrink:0}
.app-logo{background:var(--a);color:var(--on-a)}
.app-av{border-radius:50%;background:var(--s2);color:var(--text);border:1px solid var(--border)}
.app-nav{display:grid;gap:2px;flex:1;align-content:start}
.app-nav button{display:flex;align-items:center;gap:.6rem;width:100%;font:inherit;font-size:.82rem;color:var(--muted);background:none;border:0;border-radius:8px;padding:.5rem .6rem;min-height:36px;cursor:pointer;text-align:left;transition:background .15s var(--ease),color .15s var(--ease)}
.app-nav button:hover{background:var(--s2);color:var(--text)}
.app-nav button.on{background:var(--s2);color:var(--text);font-weight:600}
.app-nav button.on svg{color:var(--a-fg)}
.app-nav em{margin-left:auto;font-style:normal;font-size:.68rem;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--a);color:var(--on-a);display:grid;place-items:center}
.app-nav em.warn{background:var(--warn);color:oklch(18% .03 60)}
.app-nav em:empty{display:none}
.app-main{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface)}
.app-top{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}
.app-top>div{margin-right:auto;min-width:0}
.app-top h3{font:600 1.02rem/1.2 var(--ff-b,system-ui,sans-serif);margin:0;letter-spacing:-.01em}
.app-top small{font-size:.72rem;color:var(--muted)}
.app-search{display:flex;align-items:center;gap:.4rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0 .6rem;height:34px;color:var(--muted);width:190px}
.app-search input{border:0;background:none;font:inherit;font-size:.8rem;color:var(--text);width:100%;outline:none;min-width:0}
.app-search:focus-within{border-color:var(--a);box-shadow:0 0 0 3px oklch(82% .155 180/.2)}
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-size:.82rem;font-weight:600;border:0;border-radius:8px;padding:0 .9rem;height:34px;cursor:pointer;background:var(--text);color:var(--bg);text-decoration:none;transition:opacity .15s,transform .15s var(--ease)}
.app-btn:hover{opacity:.88}.app-btn:active{transform:scale(.98)}
.app-btn.wide{width:100%;height:42px}
.app-btn.ghost{background:var(--s2);color:var(--text)}
.app-view{padding:1rem;display:grid;gap:.9rem;align-content:start;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.app-alert{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border:1px solid oklch(62% .15 55/.35);background:oklch(62% .15 55/.08);border-radius:10px}
.app-alert svg{color:var(--warn)}
.app-alert span{flex:1}
.app-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.app-kpi{position:relative;border:1px solid var(--border);border-radius:10px;padding:.7rem .8rem;background:var(--surface);overflow:hidden}
.app-kpi small{display:block;font-size:.7rem;color:var(--muted);margin-bottom:.2rem}
.app-kpi b{display:block;font-size:1.3rem;font-weight:650;line-height:1.15}
.app-kpi span{font-size:.68rem;color:var(--muted)}
.app-kpi span.up{color:var(--up)}.app-kpi span.down{color:var(--pill-p)}
.try .app-spark{position:absolute;right:.6rem;top:.7rem;width:64px;height:24px;overflow:visible}
.app-spark polyline{fill:none;stroke:var(--a);stroke-width:1.6;vector-effect:non-scaling-stroke}
.app-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:.9rem;align-items:start}
.app-stack{display:grid;gap:.9rem}
.app-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.app-card{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:.8rem;min-width:0}
.app-card-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem}
.app-card-h b{font-size:.82rem;font-weight:600}
.app-muted{color:var(--muted);font-size:.72rem}
.app-link{font:inherit;font-size:.75rem;font-weight:600;color:var(--a-fg);background:none;border:0;cursor:pointer;padding:0 .25rem;min-height:32px;margin:-.4rem -.25rem}
.app-link:hover{text-decoration:underline}
.app-table{display:grid;font-size:.78rem}
.app-tr{display:grid;grid-template-columns:66px minmax(0,1.3fr) minmax(0,1.1fr) 72px 118px 112px;gap:.6rem;align-items:center;padding:.5rem .25rem;border-top:1px solid var(--border);transition:background 1.2s var(--ease)}
.app-table.compact .app-tr{grid-template-columns:58px minmax(0,1fr) 66px 110px 100px}
.app-tr.fresh{background:oklch(82% .155 180/.16)}
.app-th{border-top:0;padding-top:0;font-size:.66rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.app-tr small{display:block;font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-tr>span{min-width:0}
.app-tr .r{text-align:right;justify-self:end}
.app-src{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.05rem .35rem;border-radius:4px;background:oklch(82% .155 180/.18);color:var(--a-fg);vertical-align:1px}
.app-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:600;padding:.18rem .5rem;border-radius:6px;white-space:nowrap}
.app-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.app-pill.p{background:oklch(62% .15 55/.12);color:var(--pill-p)}
.app-pill.o{background:oklch(58% .12 245/.12);color:var(--pill-o)}
.app-pill.d,.app-pill.u{background:oklch(58% .13 155/.12);color:var(--pill-d)}
.app-act{font:inherit;font-size:.74rem;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0 .85rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.app-act:hover{border-color:var(--muted);background:var(--s2)}
.app-route{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-top:1px solid var(--border)}
.app-route:first-of-type{border-top:0}
.app-route svg{color:var(--info)}
.app-route div{flex:1;min-width:0}
.app-route b{display:block;font-weight:600;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-route small{font-size:.68rem;color:var(--muted)}
.app-stock{display:grid;gap:.35rem;padding:.4rem 0}
.app-stock+.app-stock{border-top:1px solid var(--border);padding-top:.55rem}
.app-stock-h,.app-stock-f{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.app-stock-h b{font-weight:600;font-size:.78rem}
.app-stock-h span{font-size:.72rem;color:var(--muted)}
.app-stock-f small{font-size:.68rem;color:var(--muted)}
.app-stock.low .app-stock-f small{color:var(--pill-p);font-weight:600}
.app-meter{height:6px;border-radius:3px;background:var(--s2);overflow:hidden}
.app-meter i{display:block;height:100%;background:var(--a);border-radius:3px;transition:width .6s var(--ease)}
.app-stock.low .app-meter i{background:var(--warn)}
.app-bar{display:grid;grid-template-columns:86px 1fr 66px;gap:.6rem;align-items:center;padding:.4rem 0}
.app-bar div{height:10px;background:var(--s2);border-radius:5px;overflow:hidden}
.app-bar i{display:block;height:100%;background:var(--a);border-radius:5px;transition:width .6s var(--ease)}
.app-bar b{text-align:right;font-weight:600}
.app-big{font-size:1.9rem;font-weight:650;line-height:1.1;margin-bottom:.15rem}
.app-li{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem 0;border-top:1px solid var(--border)}
.app-li:first-of-type{border-top:0}
.app-li b{font-weight:600}
.app-empty{padding:1rem .25rem;color:var(--muted);font-size:.78rem}
.app-note{font-size:.74rem;color:var(--muted);margin:0}
/* new-order drawer (lives under <body>) */
.app-drawer{position:fixed;inset:0;background:oklch(15% .02 250/.4);display:flex;justify-content:flex-end;z-index:1000;animation:appFade .2s var(--ease)}
.app-drawer[hidden]{display:none}
.app-form{width:min(380px,100%);height:100dvh;background:var(--surface);border-left:1px solid var(--border);padding:1.1rem;display:flex;flex-direction:column;gap:.85rem;overflow:auto;font-family:var(--ff-b,system-ui,sans-serif);font-size:.86rem;color:var(--text);box-shadow:-20px 0 60px oklch(15% .02 250/.2);animation:appSlide .35s var(--ease)}
.app-form-h{display:flex;justify-content:space-between;align-items:center}
.app-form-h b{font-size:.98rem}
.app-icon{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:8px;border:0;background:var(--s2);color:var(--muted);cursor:pointer}
.app-form label{display:grid;gap:.3rem;font-size:.76rem;font-weight:600}
.app-form select,.app-form input[type=number]{font:inherit;font-size:.88rem;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0 .6rem;height:44px;min-height:44px;width:100%}
.app-form select:focus,.app-form input:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px oklch(82% .155 180/.2)}
.app-qty{display:grid;grid-template-columns:44px 1fr 44px;gap:.4rem}
.app-qty input{text-align:center;height:44px;min-height:44px}
.app-qty button{font:inherit;font-size:1.1rem;min-height:44px;min-width:44px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;cursor:pointer;display:grid;place-items:center}
.app-form fieldset{border:0;padding:0;margin:0;display:flex;gap:.5rem;flex-wrap:wrap}
.app-form legend{font-size:.76rem;font-weight:600;margin-bottom:.3rem;width:100%}
.app-radio{display:flex!important;align-items:center;gap:.5rem!important;font-weight:500!important;border:1px solid var(--border);border-radius:8px;padding:0 .8rem;height:44px;min-height:44px;cursor:pointer;flex:1}
.app-radio:has(input:checked){border-color:var(--a);background:oklch(82% .155 180/.1)}
.app-radio input{accent-color:var(--a-fg)}
.app-form-total{display:flex;justify-content:space-between;align-items:baseline;padding:.75rem 0;border-top:1px solid var(--border);margin-top:auto}
.app-form-total span{color:var(--muted);font-size:.8rem}
.app-form-total b{font-size:1.2rem;font-variant-numeric:tabular-nums}
.app-form-err{color:oklch(55% .19 25);font-size:.8rem;margin:0}
.app-toasts{position:fixed;right:1rem;bottom:1rem;display:grid;gap:.5rem;z-index:1001;pointer-events:none;font-family:var(--ff-b,system-ui,sans-serif)}
.app-toast{display:flex;align-items:center;gap:.5rem;background:var(--text);color:var(--bg);font-size:.82rem;padding:.65rem .9rem;border-radius:10px;box-shadow:0 12px 30px -6px oklch(15% .02 250/.35);animation:appToast .35s var(--ease);transition:opacity .3s,transform .3s var(--ease);max-width:340px}
.app-toast svg{color:var(--a)}
.app-toast.out{opacity:0;transform:translateY(6px)}
@keyframes appFade{from{opacity:0}}
@keyframes appSlide{from{transform:translateX(28px);opacity:.4}}
@keyframes appToast{from{transform:translateY(10px);opacity:0}}

/* ---- estimator (inside the laptop) ---- */
.est{flex:1;min-height:0;display:grid;grid-template-columns:1fr 320px}
.est-steps{padding:1.3rem;display:grid;gap:1.3rem;align-content:start;overflow:auto}
.est-q{border:0;padding:0;margin:0;min-width:0}
.est-q legend{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;margin-bottom:.7rem;padding:0}
.est-q legend i{font-style:normal;width:24px;height:24px;border-radius:50%;background:var(--s2);border:1px solid var(--border);display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--muted)}
.est-opts{display:flex;flex-wrap:wrap;gap:.45rem}
.est-opt{position:relative}
.est-opt input{position:absolute;opacity:0;pointer-events:none}
.est-opt span{display:inline-flex;align-items:center;min-height:36px;padding:.4rem .8rem;border:1px solid var(--border);border-radius:9px;font-size:.82rem;color:var(--text);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.est-opt span:hover{border-color:var(--muted)}
.est-opt input:checked+span{border-color:var(--a);background:oklch(82% .155 180/.12);box-shadow:inset 0 0 0 1px var(--a)}
.est-opt input:focus-visible+span{outline:2px solid var(--a);outline-offset:2px}
.est-out{background:var(--bg);border-left:1px solid var(--border);padding:1.3rem;display:flex;flex-direction:column;gap:.85rem;overflow:auto}
.est-k{font-size:.74rem;color:var(--muted);font-weight:600}
.est-price{font-size:1.9rem;font-weight:650;line-height:1.1;margin-top:-.45rem}
.est-plan{display:flex;gap:.4rem;flex-wrap:wrap}
.est-plan span{font-size:.72rem;font-weight:600;padding:.2rem .55rem;border-radius:6px;background:var(--s2);border:1px solid var(--border)}
.est-plan span:first-child{background:oklch(82% .155 180/.14);border-color:oklch(82% .155 180/.4);color:var(--a-fg)}
.est-dl{margin:0;display:grid;border-top:1px solid var(--border)}
.est-dl div{display:grid;grid-template-columns:86px 1fr;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.78rem}
.est-dl dt{color:var(--muted)}
.est-dl dd{margin:0;line-height:1.45}
.est-note{font-size:.72rem;color:var(--muted);line-height:1.5;margin:0}

/* ---- responsive: the apps respond to the screen they sit in ---- */
@container (max-width:820px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .app-side{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--border);padding:.5rem .6rem;overflow-x:auto}
  .app-brand small,.app-user{display:none}
  .app-nav{display:flex;flex:1}
  .app-nav button{width:auto;white-space:nowrap}
  .app-kpis{grid-template-columns:repeat(2,1fr)}
  .app-cols,.app-grid3{grid-template-columns:1fr}
  .est{grid-template-columns:1fr}
  .est-out{border-left:0;border-top:1px solid var(--border)}
}
@container (max-width:560px){
  .app-brand div{display:none}
  .app-nav button span{display:none}
  .app-nav button.on span{display:inline}
  .app-top{flex-wrap:wrap}
  .app-search{order:3;width:100%}
  .app-tr,.app-table.compact .app-tr{grid-template-columns:minmax(0,1fr) auto;row-gap:.3rem}
  .app-th{display:none}
  .app-tr>span:nth-child(1){display:none}
  .app-tr>span.r.app-mono{grid-column:2;grid-row:1}
  .app-tr>span:has(.app-pill){grid-column:1}
  .app-tr>span:last-child{grid-column:2;grid-row:2}
  .app-table:not(.compact) .app-tr>span:nth-child(3){display:none}
  .app-kpi b{font-size:1.1rem}
  .try .app-spark{display:none}
}

/* ---- responsive: the stage ---- */
@media (max-width:1100px){
  .dev-stage{grid-template-columns:1fr;justify-items:center}
  .dev-stage .mbp,.dev-stage.est .mbp{grid-column:1;grid-row:2;width:88%}
  .mbp-base{margin:0 -6%}
  .dev-stage .iph{grid-column:1;grid-row:1;justify-self:center;margin:0 0 3rem}
  .dev-cue{grid-row:3;margin-top:3rem;justify-self:start}
  .dev-stage.est .iph{display:none}
}
@media (max-width:760px){
  /* On phones the laptop becomes a plain browser window so the app gets real room to work in. */
  .mbp-lid{background:none;padding:0;box-shadow:none;border-radius:14px}
  .mbp-cam,.mbp-base{display:none}
  .mbp-screen{aspect-ratio:auto;height:auto;min-height:640px;border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 45px -18px oklch(20% .03 250/.2)}
  .app-view{overflow:visible}
  .iph{width:min(320px,88vw);box-shadow:0 18px 45px -18px oklch(15% .02 250/.2)}
  .iph-btn{display:none}
  .try-tabwrap{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .dev-stage.pre .iph{transform:none;opacity:1}
  .iph.ping,.app-drawer,.app-form,.app-toast{animation:none}
  .app-meter i,.app-bar i,.app-tr{transition:none}
}

/* ---- lead dialog ---- */
.lead-dlg{margin:auto;border:0;padding:0;background:transparent;max-width:min(600px,calc(100vw - 2rem));width:100%;color:var(--text)}
.lead-dlg::backdrop{background:oklch(15% .02 250/.5);backdrop-filter:blur(3px)}
.lead-box{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.75rem;box-shadow:0 24px 60px -15px oklch(10% .02 250/.25);font-family:var(--ff-b,system-ui,sans-serif);max-height:calc(100dvh - 2rem);overflow:auto}
.lead-x{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;background:var(--s2);color:var(--muted);border:0;border-radius:10px;width:44px;height:44px;cursor:pointer}
.lead-x:hover{color:var(--text)}
.lead-box h3{font-family:var(--ff-d,inherit);font-weight:400;font-size:1.75rem;line-height:1.15;margin:0 0 .45rem;padding-right:3rem}
.lead-box h3:focus{outline:none}
.lead-intro{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0 0 1.2rem}
.lead-f{display:grid;gap:.85rem}
.lead-r{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.lead-f label{display:grid;gap:.35rem;font-size:.78rem;font-weight:600}
.lead-f input,.lead-f select,.lead-f textarea{font:inherit;font-weight:400;font-size:.92rem;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:.65rem .8rem;min-height:44px;width:100%}
.lead-f textarea{min-height:92px;resize:vertical;line-height:1.5}
.lead-f input:focus,.lead-f select:focus,.lead-f textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px oklch(82% .155 180/.2)}
.lead-f [aria-invalid="true"]{border-color:oklch(58% .19 25)}
.lead-sum{font-size:.8rem;color:var(--muted);background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:.6rem .8rem;line-height:1.5}
.lead-sum:empty{display:none}
.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-err{color:oklch(55% .19 25);font-size:.84rem;margin:0}
.lead-act{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.2rem}
.lead-act .app-btn{height:46px;padding:0 1.6rem;font-size:.92rem}
.lead-small{font-size:.76rem;color:var(--muted)}
.lead-done{text-align:center;padding:1.25rem .5rem .5rem;display:grid;justify-items:center;gap:.6rem}
.lead-done[hidden],[data-step][hidden]{display:none}
.lead-done h3{padding:0;margin:0}
.lead-done p{color:var(--muted);font-size:.92rem;line-height:1.6;max-width:420px;margin:0 0 .5rem}
.lead-done a:not(.app-btn){color:var(--lime-fg);text-decoration:underline;text-underline-offset:3px}
.lead-done .app-btn{height:44px;padding:0 1.4rem}
.lead-ok{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:oklch(58% .13 155/.14);color:oklch(48% .13 155)}
.lead-ok svg{width:22px;height:22px}
@media(max-width:600px){.lead-r{grid-template-columns:1fr}.lead-box{padding:1.3rem}}

/* ---- inline lead banner ---- */
.try-banner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;background:var(--surface);border:1px solid var(--lime);border-radius:14px;padding:.85rem 1.2rem;margin-bottom:1.2rem;box-shadow:0 12px 32px oklch(15% .02 250/.08);animation:appFade .3s var(--ease)}
.try-banner[hidden]{display:none}
.try-banner-msg{display:flex;flex-direction:column;gap:.2rem;font-size:.88rem;color:var(--text);line-height:1.4}
.try-banner-msg b{font-size:.95rem;color:var(--text)}
.try-banner-msg span{color:var(--muted)}
.try-banner-act{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.try-banner-act .app-btn{height:44px;min-height:44px;padding:0 1.2rem;font-size:.88rem}
.try-banner-x{background:transparent;border:0;color:var(--muted);font-size:1.4rem;line-height:1;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:8px}
.try-banner-x:hover{color:var(--text);background:var(--s2)}

/* ---- floating launcher ---- */
.try-fab{position:fixed;left:1rem;bottom:1rem;z-index:80;display:flex;align-items:center;background:var(--text);color:var(--bg);border-radius:100px;box-shadow:0 12px 32px oklch(15% .02 250/.28);font:600 .84rem/1 var(--ff-b,system-ui,sans-serif)}
.try-fab a{display:flex;align-items:center;gap:.55rem;padding:.45rem .6rem .45rem .45rem;color:inherit;text-decoration:none;min-height:44px}
.try-fab i{width:30px;height:30px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.try-fab i svg{width:14px;height:14px;margin-left:2px;fill:var(--on-lime,oklch(20% .03 200));stroke:none}
.try-fab-x{display:grid;place-items:center;width:36px;height:44px;background:none;border:0;border-left:1px solid oklch(100% 0 0/.15);color:inherit;opacity:.7;cursor:pointer;border-radius:0 100px 100px 0}
.try-fab-x:hover{opacity:1}
.try-fab-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
@media(max-width:768px){
  .try-fab{bottom:5.75rem}.try-fab span{font-size:.8rem}
  .try-banner{flex-direction:column;align-items:flex-start;gap:.8rem}
  .try-banner-act{width:100%;justify-content:space-between}
  .try-banner-act .app-btn{flex:1}
  .lead-f input, .lead-f select, .lead-f textarea,
  .app-form input, .app-form select, .app-form textarea {
    font-size: 16px !important;
  }
}
@media print{.try-fab{display:none}}