:root {
  --m-a1: #E4572E; /* accent 1 */
  --m-a2: #2F55D4; /* accent 2 */
}

html, body { margin: 0; padding: 0; background: #FAF6EE; }
body { font-family: "Instrument Sans", sans-serif; color: #211B12; }
.page { background: #FAF6EE; color: #211B12; min-height: 100vh; overflow-x: hidden; }

a { color: #211B12; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--m-a1); }
::selection { background: var(--m-a2); color: #FAF6EE; }
input::placeholder { color: #9A9184; }

@keyframes m-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes m-float { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-8px); } }

/* Interactive states — recreated from the prototype's style-hover/focus/active attrs */
.nav-cta:hover { background: var(--m-a1); color: #FAF6EE; }

.signup-input:focus { border-color: var(--m-a2); box-shadow: 3px 3px 0 var(--m-a2); }

.signup-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #211B12; }
.signup-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #211B12; }

.glide-cta:hover { background: var(--m-a1); color: #FAF6EE; }

.footer-input:focus { border-color: var(--m-a1); }
.footer-btn:hover { background: #FAF6EE; color: #211B12; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  [style*="m-marquee"], [style*="m-float"] { animation: none !important; }
}