/* VP Machine — brand system */
:root{
  --bg:#07070e; --bg2:#0b0b15; --panel:#0e0e1a; --panel2:#13132299; --line:#23233c; --line2:#2e2e4d;
  --orange:#ff7a1a; --pink:#ff2d78; --cyan:#22d3ee; --lime:#a3e635; --red:#ff4757; --amber:#ffb020;
  --tx:#ececf5; --tx2:#b9b9cc; --dim:#8a8aa3;
  --grad:linear-gradient(90deg,var(--orange),var(--pink));
  --display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--body);line-height:1.55;min-height:100vh;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}

/* logo */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:34px;height:34px}
.brand .wm{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.brand .wm b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.beta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--cyan);border:1px solid #22d3ee55;
  padding:2px 7px;border-radius:99px;text-transform:uppercase}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;
  padding:13px 22px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .12s,box-shadow .2s,background .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#0a0a12;box-shadow:0 8px 30px -10px #ff2d78aa}
.btn-primary:hover{box-shadow:0 10px 38px -8px #ff2d78cc}
.btn-ghost{background:transparent;color:var(--tx);border:1px solid var(--line2)}
.btn-ghost:hover{border-color:var(--dim)}
.btn-sm{padding:8px 14px;font-size:13.5px;border-radius:8px}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  padding:4px 10px;border-radius:99px;border:1px solid var(--line2);color:var(--tx2);text-transform:uppercase}
.chip.hi{color:var(--lime);border-color:#a3e63566;background:#a3e63512}
.chip.md{color:var(--amber);border-color:#ffb02066;background:#ffb02012}
.chip.lo{color:var(--red);border-color:#ff475766;background:#ff475712}
.chip.cy{color:var(--cyan);border-color:#22d3ee66;background:#22d3ee12}
.g{color:var(--lime)} .o{color:var(--amber)} .r{color:var(--red)} .c{color:var(--cyan)} .p{color:var(--pink)}

/* subtle scanline texture, brand signature */
.scan::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}

/* focus */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* "Pro" tag in the wordmark */
.brand .wm em.pro{font-style:normal;font-family:var(--mono);font-size:.62em;font-weight:600;letter-spacing:.12em;
  color:var(--cyan);border:1px solid #22d3ee66;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:3px}
.brand .wm{white-space:nowrap}
.btn{white-space:nowrap}
@media(max-width:520px){.brand .wm{font-size:17px}.brand img{width:30px;height:30px}.beta{display:none}}
@media(max-width:440px){#upBtn{display:none!important}#planPill{cursor:pointer}}