:root {
  --paper: #0b0b0a;
  --ink: #ecebe6;
  --muted: #8a8882;
  --line: #262522;
  --signal: #ff5a32;
  --field: 236, 235, 230;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overscroll-behavior: none; }
/* Dragging steers the field; a long press should not start a text selection. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input { -webkit-user-select: text; user-select: text; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 "Funnel Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  overflow-x: hidden;
}

.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.meta {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.muted { color: var(--muted); }

.bar {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px var(--gutter);
}

.hero {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: 0 var(--gutter) clamp(24px, 6vh, 72px);
  display: grid;
  gap: clamp(20px, 3vh, 32px);
}

.wordmark {
  font: 700 clamp(72px, 18vw, 320px)/0.82 "Funnel Display", system-ui, sans-serif;
  letter-spacing: -0.032em;
  margin-left: -0.04em;
}
.wordmark span {
  display: inline-block;
  animation: rise 1.1s cubic-bezier(.2, .7, 0, 1) both;
}

.tagline {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.tagline button {
  all: unset;
  cursor: pointer;
  font: 500 clamp(20px, 2.6vw, 32px)/1.1 "Funnel Display", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--muted);
  transition: color .5s ease;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.tagline button[aria-current="true"] { color: var(--ink); }
.tagline button:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.idx {
  font: 500 12px/1 "Funnel Sans", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transform: translateY(-0.85em);
}
.tagline button[aria-current="true"] .idx { color: var(--signal); }

.notify { display: grid; gap: 10px; max-width: 520px; }
.notify label { font-size: 14px; color: var(--ink); }
.row {
  display: flex;
  border-bottom: 1.5px solid var(--ink);
}
.row input[type="email"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  padding: 12px 0;
}
/* Browser autofill paints the field yellow; keep it on the page colours instead. */
.row input:-webkit-autofill,
.row input:-webkit-autofill:hover,
.row input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--paper) inset;
  box-shadow: 0 0 0 100px var(--paper) inset;
  transition: background-color 9999s ease-out 0s;
}
.row input:autofill { background: transparent; }
/* Browser autofill paints the field yellow; keep it on the page colours instead. */
.row input:-webkit-autofill,
.row input:-webkit-autofill:hover,
.row input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--paper) inset;
  box-shadow: 0 0 0 100px var(--paper) inset;
  transition: background-color 9999s ease-out 0s;
}
.row input:autofill { background: transparent; }
.row input::placeholder { color: var(--muted); opacity: .7; }
.row input:focus { outline: none; }
.row:focus-within { border-bottom-color: var(--signal); }
.row button {
  all: unset;
  cursor: pointer;
  font: 500 15px/1 "Funnel Sans", system-ui, sans-serif;
  padding: 12px 0 12px 16px;
}
.row button:hover { color: var(--signal); }
.row button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.row button[disabled] { opacity: .5; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.status { font-size: 14px; min-height: 1.5em; color: var(--muted); }
.status[data-tone="ok"] { color: var(--ink); }
.status[data-tone="err"] { color: var(--signal); }

.foot { border-top: 1px solid var(--line); flex-wrap: wrap; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--signal); }
.social { display: flex; gap: 20px; align-items: center; }
.social:empty { display: none; }
.icon { display: inline-flex; color: var(--ink); padding: 10px; margin: -10px; }
.icon svg { width: 20px; height: 20px; fill: currentColor; }
.icon.soon { color: var(--muted); cursor: default; }
a.icon:hover, a.icon:focus-visible { color: var(--signal); }

@keyframes rise {
  from { transform: translateY(18%); opacity: 0; clip-path: inset(0 0 100% 0); }
  to { transform: none; opacity: 1; clip-path: inset(0 0 0 0); }
}

@media (max-width: 560px) {
  .wordmark { font-size: 25vw; }
}

/* iOS Safari floats its toolbar over the bottom of the page and the page does not scroll.
   The page ends at the small viewport height, just under the toolbar's top edge, so a little
   padding keeps the footer low but clear of it. */
@media (pointer: coarse) {
  .foot { padding-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark span { animation: none; }
  .tagline button { transition: none; color: var(--ink); }
}