/* Nunito, SELF-HOSTED — deliberately not the Google Fonts @import that used
   to sit here.
   
   A third-party font import makes every visitor's browser send their IP
   address to Google before they have agreed to anything. A Munich court found
   in 2022 that doing so without consent breaches the GDPR, and it is the
   single most-pursued cookie-adjacent complaint in the EU. Serving the file
   ourselves removes the transfer entirely, so this site can honestly say it
   makes no third-party requests — and it loads faster, because there is no
   second DNS lookup and TLS handshake before any text can be painted.

   These are the same v32 files Google serves, latin subsets only (the site is
   English). Variable weight 200-1000 covers every weight the page uses. */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/nunito-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;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/nunito-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;
}

:root {
  --cream: #FFF8F0;
  --ink: #2B2420;
  --sunrise: #FF6B2C;
  --sunrise-dark: #C93E14;
  --fresh: #219053;
  --trust: #2E62DD;
  --border: rgba(43, 36, 32, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Nunito', -apple-system, sans-serif;
  line-height: 1.65;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

header {
  padding: 28px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.logo {
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
}

.logo span { color: var(--sunrise); }

nav a {
  color: var(--ink);
  opacity: 0.6;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  margin-left: 20px;
}

nav a:hover { opacity: 1; }

h1 {
  font-weight: 800;
  font-size: 32px;
  margin: 24px 0 4px;
}

h2 {
  font-weight: 800;
  font-size: 22px;
  margin: 40px 0 12px;
  color: var(--sunrise-dark);
}

h3 {
  font-weight: 700;
  font-size: 17px;
  margin: 24px 0 8px;
}

p, li { font-size: 15px; }

a { color: var(--trust); }

strong { font-weight: 700; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 14px;
}

th, td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}

th {
  background: rgba(255, 107, 44, 0.06);
  font-weight: 700;
}

blockquote {
  margin: 16px 0;
  padding: 4px 16px;
  border-left: 3px solid var(--sunrise);
  background: rgba(255, 107, 44, 0.05);
  border-radius: 0 8px 8px 0;
}

code {
  background: rgba(43, 36, 32, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

.home-hero {
  text-align: center;
  padding: 60px 0 20px;
}

.home-hero h1 { font-size: 40px; }

.home-hero p {
  color: var(--ink);
  opacity: 0.6;
  font-size: 17px;
}

.link-cards {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.link-card {
  display: block;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 28px;
  text-decoration: none;
  color: var(--ink);
  min-width: 200px;
  box-shadow: 0 2px 10px rgba(43, 36, 32, 0.05);
}

.link-card strong {
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}

.link-card span {
  font-size: 13px;
  opacity: 0.55;
}

footer {
  text-align: center;
  padding: 40px 24px;
  font-size: 13px;
  opacity: 0.4;
}

/* ---- Waitlist landing ------------------------------------------------- */

.home-hero h1 {
  font-size: clamp(2rem, 7vw, 3.25rem);
  line-height: 1.1;
  margin: 24px 0 12px;
}

.lede {
  font-size: 1.125rem;
  color: rgba(43, 36, 32, 0.75);
  max-width: 34em;
  margin: 0 auto 28px;
}

.waitlist {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 30rem;
  margin: 0 auto;
}

.waitlist input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 15px 18px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.waitlist input:focus {
  outline: none;
  border-color: var(--sunrise);
  box-shadow: 0 0 0 3px rgba(255, 107, 44, 0.18);
}

.waitlist button {
  flex: 0 0 auto;
  padding: 15px 24px;
  font: inherit;
  font-weight: 800;
  color: #fff;
  /* White on --sunrise measures 2.84:1, well under the 4.5:1 WCAG AA needs
     for text this size — on the page's PRIMARY call to action. The darker
     brand orange measures 5.02:1 and is still unmistakably the same colour. */
  background: var(--sunrise-dark);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}

.waitlist button:hover { background: #A33110; }

/* The button had a hover state and no focus state at all, so anyone driving
   the page from a keyboard could not see where they were. */
.waitlist button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.waitlist button:disabled { opacity: 0.6; cursor: default; }

/* This element carries every success and error message, so it is the last
   place on the page that should be hard to read. At 0.55 alpha it measured
   3.53:1; 0.75 measures 6.53:1 and looks near-identical. */
.note {
  margin: 14px auto 0;
  font-size: 0.9rem;
  color: rgba(43, 36, 32, 0.75);
}

/* Calm, never alarming — the same rule the app follows for errors. */
.note.warn { color: var(--sunrise-dark); }        /* 4.77:1 */
/* --fresh is 3.85:1 on cream, which fails at this size even bold. */
.note.ok   { color: #15703E; font-weight: 700; }  /* 5.83:1 */

/* The consent line under the form: small print, but small print people are
   expected to have READ has to stay legible. */
.consent {
  max-width: 30rem;
  margin: 10px auto 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(43, 36, 32, 0.75);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 16px;
  margin: 56px 0 8px;
}

.feature {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
}

.feature strong { display: block; margin-bottom: 6px; }
.feature span { color: rgba(43, 36, 32, 0.7); font-size: 0.95rem; }

.site-details {
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(43, 36, 32, 0.75);
}

/* Visually hidden, still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}