/* simiq's look over listmonk's style.css, which loads first (templates/index.html): the font,
   the colours and the pill button of simiq.co. Colours are copied from simiq.co's
   src/styles/tokens.css; change them there first. Sizes are px (simiq.co's 1rem is 10 px). */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(dm-sans.woff2) format('woff2-variations');
}

:root {
  --ink: #161616;
  --muted: #6e6c68;
  --line: #dad8d3;
  --surface: #f3f2ef;
  --paper: #ffffff;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--muted); }
label { color: var(--muted); }

.container { max-width: 640px; margin: 0 auto; padding: 0 20px; }
.wrap { background: none; border: 0; box-shadow: none; padding: 0 20px; color: var(--muted); }
.header { border: 0; padding: 32px 0 0; margin-bottom: 96px; }
.header .logo { display: inline-block; }
.header .logo svg { display: block; width: 62px; height: 26.229px; fill: var(--ink); }

h2, h3 { color: var(--ink); }
h2 { margin: 0 0 24px; font-size: 56px; font-weight: 300; line-height: 1.04; letter-spacing: -0.03em; }
.wrap p, .wrap li, .wrap > div { font-size: 16px; line-height: 1.5; }

.button {
  min-width: 0; padding: 16px 32px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 22px; text-decoration: none;
  transition: transform 0.6s var(--ease-out), background-color 0.4s var(--ease-out);
}
.button:hover { background: var(--muted); color: var(--paper); }
.button:active { transform: scale(0.97); }
.button.button-outline { border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.button.button-outline:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }

input[type="text"], input[type="email"], input[type="password"], select {
  padding: 14px 20px; border: 1px solid var(--line); border-radius: 999px; box-shadow: none;
  font-family: inherit; color: var(--ink);
}
input:focus { border-color: var(--ink); outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
.unsub-all { border-top-color: var(--line); }
/* The opt-in page names the list in its sentence (i18n/simiq.json); the hidden inputs inside the list still post. */
.optin-form ul { display: none; }

footer.container { margin: 96px auto 32px; padding: 0 20px; text-align: left; font-size: 12px; color: var(--muted); }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 650px) {
  .wrap { padding: 0 20px; }
  .header { margin-bottom: 64px; }
  h2 { font-size: 40px; }
  footer.container { margin-top: 64px; }
}