/* The top under the header: "Plugs into your ERP. Speaks to your team." */
.tp{padding:56px 0 24px}
.tp-h1{font-size:clamp(34px,4.4vw,56px);font-weight:500;letter-spacing:-.03em;line-height:1.03;margin:0 0 18px}
.tp-h1 em{font-style:normal;color:var(--mut)}
.tp-h1 .w{display:inline-block;opacity:0;transform:translateY(14px);animation:tpw .75s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tpw{to{opacity:1;transform:none}}
.tp-sub{color:var(--mut);font-size:17px;line-height:1.55;max-width:560px;margin:0 0 26px}
.tp .cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0}
.tp .cta .btn{height:44px;padding:0 20px;font-size:15px}
.tp .bub{white-space:nowrap}
/* T2 · plugs in (v2: reads everything, tells one person) */
.tp2{text-align:center;position:relative;overflow-x:clip}
.tp2 .tp-h1{text-wrap:balance;max-width:980px;margin-left:auto;margin-right:auto}
.tp2 .tp-sub{margin-left:auto;margin-right:auto;text-wrap:balance}
.tp2 .cta{justify-content:center}
.t2{position:relative;margin:44px auto 0;max-width:1080px}
.t2-heads{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 16px;padding:0 2px}
.t2-heads b{font-weight:500;color:var(--ink)}
.t2-dia{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);align-items:center}
.t2-col{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.t2-col.l{align-items:flex-start}.t2-col.r{align-items:flex-end}
.cx{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line2);background:var(--panel);border-radius:14px;padding:7px 15px 7px 7px;font-size:14px;color:var(--ink);white-space:nowrap;transition:border-color .35s,box-shadow .35s,transform .35s;box-shadow:0 12px 26px -20px color-mix(in srgb,var(--ink) 45%,transparent)}
.t2-col.r .cx{padding:7px 7px 7px 15px;flex-direction:row-reverse}
.cx .g{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);font-weight:600;font-size:13px;color:var(--ink);flex:none;transition:background .35s,color .35s,border-color .35s}
.cx .g svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cx>span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.t2-col.r .cx>span{text-align:right}
.cx small{font-size:11.5px;color:var(--mut);margin-top:3px}
.cx.read .g{background:color-mix(in srgb,var(--gold) 18%,var(--panel2));color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.cx.on{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 13%,transparent),0 16px 30px -18px color-mix(in srgb,var(--gold) 65%,transparent);transform:translateX(-4px)}
.cx.on .g{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.t2-mid{position:relative;z-index:2;height:330px}
.t2-mid .stage{height:300px}
.t2-glow{position:absolute;left:50%;top:46%;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 13%,transparent),transparent);pointer-events:none}
.t2-ring{position:absolute;left:50%;top:46%;width:210px;height:210px;margin:-105px 0 0 -105px;border-radius:50%;border:1px solid var(--gold);opacity:0;pointer-events:none}
.port{position:absolute;top:46%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line2);z-index:3;transition:border-color .3s,background .3s,box-shadow .3s}
.port.in{left:calc(50% - 140px)}.port.out{left:calc(50% + 140px)}
.port.hot{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 35%,var(--bg));box-shadow:0 0 10px color-mix(in srgb,var(--gold) 60%,transparent)}
.t2-stat{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font:12px/1 'JetBrains Mono',monospace;color:var(--mut);border:1px solid var(--line2);background:var(--panel);border-radius:999px;padding:8px 14px}
.t2-stat i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:t2blink 1.6s ease-in-out infinite;flex:none}
.t2-stat b{color:var(--ink);font-weight:500}
@keyframes t2blink{50%{opacity:.35}}
.t2-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.t2-svg .base{fill:none;stroke:var(--line2);stroke-width:1}
.t2-svg .t2f{fill:none;stroke:color-mix(in srgb,var(--gold) 60%,transparent);stroke-width:1.5;stroke-dasharray:2 13;stroke-linecap:round;animation:t2flow 1.1s linear infinite}
@keyframes t2flow{to{stroke-dashoffset:-30}}
.t2-svg .lit{fill:none;stroke:var(--gold);stroke-width:1.6}
.pk2{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);z-index:3;pointer-events:none;offset-rotate:0deg}
.pk2.t{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;box-shadow:none}
.t2-msg{position:absolute;left:0;top:0;z-index:4;border:1px solid var(--line2);background:var(--panel);border-radius:12px 12px 4px 12px;padding:8px 12px;font-size:12.5px;line-height:1.35;color:var(--ink);white-space:nowrap;text-align:left;box-shadow:0 18px 36px -22px color-mix(in srgb,var(--ink) 55%,transparent);opacity:0;pointer-events:none}
.t2-msg small{display:block;color:var(--mut);font-size:11px;margin-top:2px}
.t2-msg b{color:var(--gold);font-weight:500}
.tp2.paused .t2-svg .t2f,.tp2.paused .t2-stat i{animation-play-state:paused}
@media (max-width:900px){.t2{margin-top:30px}.t2-heads{display:none}.t2-dia{grid-template-columns:1fr;gap:4px}.t2-col{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}.t2-col::before{content:attr(data-h);width:100%;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:4px 0 2px}
 .t2-svg,.port,.t2-msg{display:none}.t2-mid{height:260px}.t2-mid .stage{height:220px}.t2-glow{width:280px;height:280px;margin:-140px 0 0 -140px;top:42%}.t2-ring{top:42%;width:160px;height:160px;margin:-80px 0 0 -80px}
 .cx{font-size:13px;padding:5px 11px 5px 5px;border-radius:12px;gap:8px}.t2-col.r .cx{padding:5px 5px 5px 11px}.cx .g{width:24px;height:24px;border-radius:7px;font-size:11px}.cx .g svg{width:13px;height:13px}.cx small{display:none}.cx.on{transform:none}.t2-stat{font-size:11px;padding:7px 12px}}
@media (prefers-reduced-motion:reduce){.t2-svg .t2f,.t2-stat i{animation:none}}
@media (max-width:900px){.tp{padding:28px 0 8px}}
@media (prefers-reduced-motion:reduce){.tp-h1 .w{animation:none;opacity:1;transform:none}}