/* hyper-visuals.com colours for HyperForm's website pages (homepage, waitlist). Load after /hf.css.
   Black, white and one red; light-grey bands; square-ish corners; grey pixel strip over a black footer.
   Source: docs/beehiiv/BRAND.md. The desktop app keeps its own colours. */
:root {
  --bg: #fff; --card: #fff; --ink: #000; --ink-2: #000; --muted: #6a6a6a; --faint: #a8a8a8;
  --line: #e4e4e4; --line-2: #d4d4d4; --soft: #f4f4f4;
  --accent: #d90000;      /* buttons, the one highlighted shape */
  --label: #cc0000;       /* small red labels on white */
  --label-dark: #ff4b58;  /* small red labels on black */
  --r: 4px; --r-lg: 4px;
}

.nav { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); }
.logo-mark { background: #000; }
.eyebrow { color: var(--label); }
.band { background: var(--soft); }  /* the site's grey sections */

.btn { background: var(--accent); }
.btn:hover { background: #b80000; opacity: 1; }
.btn.ghost { background: transparent; color: #000; box-shadow: inset 0 0 0 1.6px #000; }
.btn.ghost:hover { background: #000; color: #fff; }

.wl input[type=email] { box-shadow: inset 0 0 0 1.6px #000; }
.wl input[type=email]:focus { box-shadow: inset 0 0 0 2.5px var(--accent); }
.wl .wl-msg.err { color: var(--accent); } .wl .wl-msg.ok { color: #000; font-weight: 600; }
.vis { border-radius: 4px; }

/* the site's closing look: grey pixel strip, then a black footer */
.strip { height: 40px; background: repeating-conic-gradient(#2c2c2c 0 25%, #000 0 50%) 0 0 / 12px 12px; }
.foot { background: #000; color: rgba(255,255,255,.6); border-top: 0; }
.foot .link { color: #fff; text-decoration-color: #555; }