@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/fraunces-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/fraunces-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }

.mark {
  width: min(80vw, 640px);
  height: auto;
  overflow: visible;
}

.mark .static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mark .animated { display: none; }
  .mark .static { display: block; }
}

.lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}

.mark-icon {
  width: 80px;
  height: auto;
  overflow: visible;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: -0.01em;
  color: var(--accent);
}

/* Theme tokens, from docs/brand/identity-concepts.html */
:root {
  --bg: #EAEBE6;
  --surface: #F5F6F1;
  --surface-2: #FFFFFF;
  --ink: #171D1B;
  --ink-muted: #55605A;
  --accent: #3E7A6E;
  --teal: #1E8577;
  --lavender: #9B7FC4;
  --danger: #B3261E;
  --warning: #B3651E;
  --rule: #D3D6CD;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Avenir Next', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--ink);
  --bs-border-color: var(--rule);
}

/* :root[data-theme="dark"] is for whole-document dark pages (e.g. splash.html). */
:root[data-theme="dark"] {
  --bg: #121513;
  --surface: #181D1A;
  --surface-2: #1E2320;
  --ink: #E8E6DE;
  --ink-muted: #A9AFA8;
  --accent: #75C4B3;
  --rule: #2A2F2B;
}

body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  color: var(--teal);
  margin-bottom: 1.25rem;
}

.signup-form {
  background-color: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 1rem;
  overflow: hidden;
  max-width: 28rem;
  margin-top: 2.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* h1/h2/h3 element selector above already covers font-family, weight,
   line-height, and letter-spacing for this <h2>. */
.signup-form-title {
  font-size: 1.25rem;
  background-color: var(--teal);
  color: var(--surface-2);
  margin: 0;
  padding: 0.75rem 1.5rem;
}

.signup-form-body {
  padding: 1.5rem;
}

.form-control {
  background-color: var(--surface-2);
  max-width: 24rem;
}

.form-check-label {
  font-size: 0.875rem;
}

.lead {
  color: var(--ink-muted);
  max-width: 42rem;
  font-size: 1.15rem;
  line-height: 1.65;
  margin-bottom: 2rem;
}

/* The header is always dark regardless of the surrounding page's theme,
   so it re-declares the same token names locally rather than using
   :root[data-theme="dark"] (which only matches the document root). */
header.site-header {
  --bg: #121513;
  --surface: #181D1A;
  --surface-2: #1E2320;
  --ink: #E8E6DE;
  --ink-muted: #A9AFA8;
  --accent: #75C4B3;
  --rule: #2A2F2B;

  background-color: var(--surface);
  padding: 2rem 0;
}

body.splash-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background-color: var(--bg);
}

.splash-link {
  display: block;
  text-decoration: none;
}

.benefits {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--lavender);
}

.benefit-icon {
  color: var(--lavender);
  margin-right: 0.5rem;
  font-size: 1.25em;
  vertical-align: -0.1em;
}

/* The footer is always dark for the same reason as the header - see the
   comment above header.site-header. */
footer.site-footer {
  --bg: #121513;
  --surface: #181D1A;
  --surface-2: #1E2320;
  --ink: #E8E6DE;
  --ink-muted: #A9AFA8;
  --accent: #75C4B3;
  --rule: #2A2F2B;

  background-color: var(--surface);
  color: var(--ink-muted);
}

footer.site-footer a {
  color: var(--ink);
  font-size: 0.9rem;
  text-decoration: none;
}

footer.site-footer a:hover {
  text-decoration: underline;
}

.btn-brand {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

.btn-brand:hover {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.honeypot-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  color: var(--danger);
  font-weight: 600;
}

.thank-you {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.thank-you-icon {
  display: block;
  font-size: 3rem;
  color: var(--teal);
  margin-bottom: 1rem;
}

.thank-you-icon-warning {
  color: var(--warning);
}