@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #e9eef4;
  --text: #172033;
  --text-dim: #46546a;
  --muted: #65738a;
  --border: rgba(30, 45, 66, .16);
  --brand: #49dcb1;
  --brand-2: #82f2d1;
  --brand-ink: #146a54;
  --on-brand: #06271f;
  --danger: #b83245;
  --warning: #8a5a08;
  --radius: 18px;
  --sans: 'DM Sans', sans-serif;
  --display: 'Manrope', sans-serif;
}

/* Visually hide Hatchable's injected attribution badge without removing platform code. */
#hatchable-badge, #hatchable-branding, .hatchable-badge, .hatchable-branding, [data-hatchable-badge], [data-hatchable-branding], [id*="hatchable-badge" i], [class*="hatchable-badge" i], [id*="built-with-hatchable" i], [class*="built-with-hatchable" i], a[aria-label*="built with hatchable" i], a[title*="built with hatchable" i], iframe[title*="built with hatchable" i] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--sans); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--text-dim); }
.small { font-size: 13px; }
.eyebrow { color: var(--brand-ink); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.wordmark { font: 800 20px var(--display); letter-spacing: -.06em; }
.wordmark span { color: var(--brand-ink); }

/* Keep the existing button palette while switching surrounding surfaces to white. */
.btn { border: 1px solid #18233b; padding: 12px 17px; border-radius: 12px; color: #ffffff; background: #18233b; font-weight: 700; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); border-color: rgba(73,220,177,.65); }
.btn.primary { background: #49dcb1; border-color: #49dcb1; color: #06271f; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.danger { color: #fff; background: #a83f50; border-color: #a83f50; }
.field { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border); background: #ffffff; color: var(--text); outline: none; }
.field::placeholder { color: #7a8799; opacity: 1; }
.field:focus { border-color: var(--brand-ink); box-shadow: 0 0 0 3px rgba(73,220,177,.18); }
.panel { background: #ffffff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 8px 28px rgba(20,35,55,.045); }
.pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 100px; padding: 6px 10px; color: var(--text-dim); font-size: 12px; background:#fff; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-ink); display: inline-block; }
.notice { color: #704d0b !important; background: #fff8e8 !important; border-color: #ead7a9 !important; }