/* Upheld — coming soon. Light only: the app's lilac + chartreuse glow with plum ink. */
:root {
  color-scheme: light;
  --ground: #FBF7EE;
  --ink: #221D33;
  --muted: #5C566E;
  --lime: #E4F070;
  --lime-glow: #EDF59A;
  --peach-glow: #FFD9C4;
  --lilac-glow: #DCCBFA;
  --field: rgba(255, 255, 255, 0.78);
  --field-border: rgba(255, 255, 255, 0.95);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* background glow — the same flowing shapes as the app */
.glow { position: fixed; inset: 0; pointer-events: none; opacity: 0.9; transition: opacity 1.2s ease; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.blob-lime     { width: 70vmax; height: 42vmax; left: -22vmax; top: -18vmax; background: var(--lime-glow); transform: rotate(-24deg); }
.blob-peach    { width: 40vmax; height: 34vmax; right: -12vmax; top: -10vmax; background: var(--peach-glow); opacity: 0.85; }
.blob-lilac    { width: 52vmax; height: 70vmax; right: -14vmax; bottom: -30vmax; background: var(--lilac-glow); transform: rotate(28deg); }
.blob-lime-low { width: 48vmax; height: 30vmax; left: -16vmax; bottom: -14vmax; background: var(--lime-glow); opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
  .blob-lime  { animation: drift 18s ease-in-out infinite alternate; }
  .blob-lilac { animation: drift 22s ease-in-out infinite alternate-reverse; }
}
@keyframes drift { to { translate: 3vmax 2vmax; } }
/* after signing up, the page brightens — a promise kept */
body.kept .glow { opacity: 1; }
body.kept .blob-lime, body.kept .blob-lime-low { opacity: 1; }

.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.12; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* layout — everything on one centred axis */
.page {
  position: relative;
  min-height: 100svh;
  max-width: 760px;
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.top { display: flex; justify-content: center; }
.wordmark { font-family: var(--serif); font-size: 34px; line-height: 1; letter-spacing: -0.01em; }
.wordmark em, h1 em { font-style: italic; }

.hero { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; }
h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 16vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.lede { margin: 20px 0 0; max-width: 32ch; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.55; color: var(--muted); }

.label {
  margin: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.hero .label { margin-top: 44px; }

/* signup: one pill, field and button together */
.signup {
  margin-top: 14px;
  width: 100%; max-width: 460px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--field);
  border: 1px solid var(--field-border);
  box-shadow: 0 14px 34px rgba(110, 82, 224, 0.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.signup:focus-within { outline: 2px solid #6E52E0; outline-offset: 3px; }
.signup input {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px;
  border: 0; background: transparent; outline: none;
  font: 500 16px var(--sans); color: var(--ink);
}
.signup input::placeholder { color: var(--muted); }
.signup button {
  flex-shrink: 0; height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--lime); color: var(--ink);
  font: 700 13px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: transform 0.15s ease;
}
.signup button:hover { transform: translateY(-1px); }
.signup button:focus-visible { outline: 2px solid #6E52E0; outline-offset: 2px; }
.signup button[disabled] { opacity: 0.6; cursor: default; }
.status { margin: 12px 0 0; min-height: 1.4em; font-size: 14px; color: var(--muted); }
.status.ok { color: var(--ink); font-weight: 600; }
.status.err { color: #B8462A; font-weight: 600; }

/* social: big, easy-to-tap chips */
.foot { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.social a {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 18px;
  border-radius: 999px;
  background: var(--field); border: 1px solid var(--field-border);
  box-shadow: 0 6px 18px rgba(110, 82, 224, 0.08);
  color: var(--ink); text-decoration: none;
  font: 600 15px var(--sans);
  transition: transform 0.15s ease, background 0.15s ease;
}
.social a:hover { transform: translateY(-1px); background: #FFFFFF; }
.social a:focus-visible { outline: 2px solid #6E52E0; outline-offset: 2px; }
.social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social svg .fill { fill: currentColor; stroke: none; }
.copy { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 420px) {
  .signup button { padding: 0 16px; }
  .social a { padding: 0 14px; }
}