/* Keep the original SVG boxes and animation hooks while displaying SnapPad's mascot. */
svg.stack {
  background: url('/snappad-mascot-v1.png') center / contain no-repeat;
  overflow: visible;
}
svg.stack > * { visibility: hidden; }
.brand svg.stack, svg.logo-stack {
  background-image: url('/snappad-logo-500x500.png');
  border-radius: 50%;
}

/* SnapPad: purple brand, lime primary actions, quiet light surfaces. */
:root {
  --ink: #211B35;
  --green: #C5F567;
  --green-deep: #7C3AED;
  --lime: #C5F567;
  --mint: #F1EBFF;
  --yellow: #EDE4FF;
  --pink: #F0E5FF;
  --blue: #EAE7FF;
  --orange: #F2EAFF;
  --muted: #706A80;
  --soft: #706A80;
  --line: #E5DFF0;
}
body { background: #F8F7FF; color: var(--ink); }
.site-header, .panel, .coin-card, .feature, .hiw-step { background: #FFFFFF; }
.hero h1 em, .dot-accent, .coin-hero .ticker { color: #7C3AED; }
.hero h1 em:after { background: #E5D6FF; }
.hero p, .autopilot-hero p { color: #706A80; }
.pill, .pill.big, .launch { background: #C5F567; color: #211B35; }
.pill:hover, .launch:hover { background: #B6EB52; }
.pill.white, .pill.big.white { background: #FFFFFF; color: #211B35; }
.pill.white:hover { background: #F1EBFF; }
.pill.yellow, .pill.blue { background: #EDE4FF; color: #211B35; }
.tag { background: #EDE4FF; border-color: #D7C4F7; color: #5B21B6; }
.autopilot-hero { background: #F1EBFF; }
.panel-head { border-bottom-color: #E5DFF0; }
input[type=text], input[type=url], input[type=password],
input[type=number], input[type=search], textarea, select { border-color: #E5DFF0; }
input:focus, textarea:focus, select:focus { background: #FFFFFF; border-color: #7C3AED; }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger); }
a:focus-visible, button:focus-visible, [role=button]:focus-visible {
  outline: 3px solid #7C3AED;
  outline-offset: 4px;
}