/* Proxypad theme: deep navy + periwinkle, Geist + Geist Mono. Tokens first, then the
   site header/footer (.pp-*) shared by the app pages and the static pages. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");
:root {
  --pad-bg: #0B091F;
  --pad-surface: #15113B;
  --pad-ink: #FFFFFF;
  --pad-ink-dim: #A29FBD;
  --pad-rule: #2E2960;
  --pad-accent: #6C76F6;
  --pad-accent-ink: #0B091F;
  --pad-good: #5BE0A3;
  --pad-bad: #FF7A90;
  --pad-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad-font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --pad-radius: 14px;
  --pad-max-width: 1210px;
  color-scheme: dark;
}
html, body { background: var(--pad-bg); }
body { margin: 0; color: var(--pad-ink); font-family: var(--pad-font); -webkit-font-smoothing: antialiased; }
body.pad-body h1, body.pad-body h2 { letter-spacing: -0.03em; font-weight: 600; } /* no text-transform here: innerText follows it and the e2e reads headings */

/* ---------- header */
.pp-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 24px clamp(16px, 8vw, 115px); background: linear-gradient(to bottom, rgba(11,9,31,.96), rgba(11,9,31,.78) 70%, rgba(11,9,31,0)); backdrop-filter: blur(6px); }
.pp-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.pp-nav a, .pp-foot-nav a { font-family: var(--pad-mono); font-size: 16px; letter-spacing: .02em; text-transform: uppercase; color: var(--pad-ink); text-decoration: none; opacity: .92; }
.pp-nav a:hover, .pp-foot-nav a:hover { opacity: 1; color: var(--pad-accent); }
.pp-nav a[aria-current="page"] { color: var(--pad-accent); }
.pp-logo { display: inline-flex; justify-self: center; }
.pp-logo img { height: 34px; width: auto; display: block; }
.pp-right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.pp-icon { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: var(--pad-ink); }
.pp-icon:hover { background: rgba(255,255,255,.16); }
.pp-icon svg { width: 18px; height: 18px; }
.pp-cta { font-family: var(--pad-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #0B091F; background: #fff; border-radius: 999px; padding: 15px 28px; white-space: nowrap; transition: background .2s, color .2s; }
.pp-cta:hover { background: var(--pad-accent); color: #fff; }
@media (max-width: 900px) {
  .pp-header { grid-template-columns: auto 1fr; padding: 16px; }
  .pp-logo { justify-self: start; grid-column: 1; grid-row: 1; }
  .pp-logo img { height: 28px; }
  .pp-right { grid-column: 2; grid-row: 1; }
  .pp-right .pp-icon { display: none; }
  .pp-cta { padding: 12px 18px; font-size: 11px; }
  .pp-nav { grid-column: 1 / -1; grid-row: 2; gap: 18px; }
  .pp-nav a { font-size: 13px; }
}

/* ---------- footer */
.pp-footer { margin-top: 96px; background: var(--pad-surface); border-top: 1px solid var(--pad-rule); padding: 56px clamp(16px, 8vw, 115px) 28px; }
.pp-foot-main { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pp-foot-brand img { height: 24px; width: auto; display: block; }
.pp-foot-brand p { margin: 14px 0 0; max-width: 300px; font-size: 13px; line-height: 1.5; color: var(--pad-ink-dim); }
.pp-foot-nav { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.pp-foot-nav a { font-family: var(--pad-font); text-transform: none; font-size: 13px; color: var(--pad-ink-dim); }
.pp-foot-bottom { margin-top: 56px; text-align: center; font-size: 11px; color: var(--pad-ink-dim); opacity: .8; }