/* ─────────────────────────────────────────────────────────────
   UCDPA brand tokens (subset, from the design system)
   Shared by every page — load this first.
   ───────────────────────────────────────────────────────────── */
:root{
  --purple:#510C76; --purple-deep:#3D0959; --purple-soft:#EFE6F5;
  --white:#fff;
  --green:#81EEBE; --pink:#FFB4FF; --yellow:#FFE461; --cyan:#87EAF2;
  --red:#FF5C5C; --lilac:#9C6CDB; --orange:#FF913C; --teal:#00C4BC; --teal-deep:#00726D;
  --grey-50:#F5F8FA; --grey-100:#EAF1F6; --grey-200:#D9E2EC;
  --grey-300:#BCCCDC; --grey-500:#627D98; --grey-600:#42617B; --grey-900:#102A43;
  --fg:var(--grey-900); --fg-muted:var(--grey-600); --border:var(--grey-200);
  --radius-sm:4px; --radius-md:8px; --radius-pill:9999px;
  --shadow-sm:0 1px 2px rgba(16,42,67,.05); --shadow-md:0 2px 8px rgba(16,42,67,.08);
  --font:'Hanken Grotesk','Adelle Sans',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--grey-50);color:var(--fg);-webkit-font-smoothing:antialiased}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hidden{display:none}

/* Nav — identical markup on every page */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;background:#fff;
  border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:12px}
.logo{height:40px;width:auto;display:block;image-rendering:high-quality}
.wordmark{font:600 15px var(--font)}
.nav-sep{width:1px;height:18px;background:var(--border)}
.nav-client{font:400 14px var(--font);color:var(--fg-muted)}
.demo-badge{margin-left:auto;font:600 11px var(--font);color:var(--orange);
  border:1px solid var(--orange);padding:3px 10px;border-radius:var(--radius-pill)}
.nav-user{display:flex;align-items:center;gap:10px}
.nav-email{font:400 13px var(--font);color:var(--fg-muted)}
.link-btn{font:600 13px var(--font);color:var(--fg-muted)}
.link-btn:hover{color:var(--purple)}

.wrap{padding-top:60px;min-height:100vh}

/* Buttons shared across pages (welcome CTAs, finder Next, code-banner Save, etc.) */
.btn-primary{background:var(--purple);color:#fff;padding:13px 32px;border-radius:var(--radius-pill);
  font:700 15px var(--font)}
.btn-primary:hover{background:var(--purple-deep)}
.btn-primary-light{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--purple);
  padding:14px 28px;border-radius:var(--radius-pill);font:700 15px var(--font)}
.btn-ghost-light{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,.4);
  color:#fff;padding:14px 28px;border-radius:var(--radius-pill);font:600 15px var(--font)}
.back{font:600 15px var(--font);color:var(--fg-muted)}