:root { color-scheme: light dark; --fg: #16181d; --bg: #fff; --muted: #5a6472; --rule: #e3e6ea; }
@media (prefers-color-scheme: dark) {
  :root { --fg: #e8eaee; --bg: #14161a; --muted: #9aa3b2; --rule: #2a2e36; }
}
* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 2rem 1.25rem 4rem; max-width: 42rem;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--fg); background: var(--bg);
}
h1 { font-size: 2rem; margin: 0 0 .25rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 .5rem; letter-spacing: -.01em; }
.tagline { color: var(--muted); margin: 0 0 1rem; }
section { border-top: 1px solid var(--rule); padding-top: .5rem; }
ul { padding-left: 1.1rem; }
li { margin: .35rem 0; }
a { color: inherit; text-underline-offset: 2px; }
footer { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
footer nav { font-size: .95rem; }
.fine { color: var(--muted); font-size: .85rem; margin-top: .75rem; }

/* ---- Launch page ------------------------------------------------------------
   The brand palette, taken from the app's asset catalogue so the site and the
   product are recognisably the same thing: navy #1B3B57, teal #2A7F95.
   No webfonts and no JavaScript — the page is served from a static host and
   should render before a parked-domain visitor decides to leave. */
:root { --navy: #1b3b57; --teal: #2a7f95; --hero-bg: #f4f6f8; --btn-fg: #fff; }
@media (prefers-color-scheme: dark) {
  :root { --navy: #9fc4dc; --teal: #4aa6bd; --hero-bg: #1a1d23; --btn-fg: #0f1115; }
}

/* INSIDE THE CONTENT COLUMN, not bled to the window edge. A full-bleed hero needs negative margins
   or 100vw, and both can exceed the viewport on a narrow screen; a rounded card cannot, at any
   width. Measured: with the layout box forced to 320px — narrower than any iPhone — no element
   escapes it.

   A WARNING FOR ANYONE PREVIEWING THIS. Headless Chrome enforces a MINIMUM window width (485px on
   this machine) and then crops the screenshot to whatever --window-size asked for. Request 390 and
   you get a 485px layout cropped to 390, which looks exactly like a right-edge overflow and is not
   one. That artifact sent me looking for a bug that did not exist. To check narrow widths, force the
   box in CSS and measure getBoundingClientRect, rather than trusting a screenshot. */
.hero {
  text-align: center;
  background: var(--hero-bg);
  margin: 0 0 2rem;
  padding: 2rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--rule);
}
.hero .mark { width: 150px; height: auto; margin-bottom: .75rem; }
.hero h1 { font-size: 2.1rem; line-height: 1.15; text-wrap: balance; margin-bottom: .5rem; }
.hero .tagline { max-width: 30rem; margin: 0 auto 1.5rem; text-wrap: pretty; }
.hero .fine { margin-top: .9rem; }

/* The one action on the page. Sized for a thumb, because a good share of the
   traffic a parked domain gets is somebody's phone. */
.button {
  display: inline-block;
  background: var(--teal);
  color: var(--btn-fg);
  text-decoration: none;
  font-weight: 600;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  min-height: 44px;
}
.button:hover { background: var(--navy); }
.button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.does { list-style: none; padding-left: 0; }
.does li { margin: .9rem 0; }
.closing { text-align: center; }
.closing .button { margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Launch-list form -------------------------------------------------------
   A plain form post, no JavaScript: it works with scripts blocked and cannot
   silently lose a signup, which an XHR handler can. */
.signup { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0 0 .5rem; }
.signup input[type="email"] {
  flex: 1 1 16rem; max-width: 22rem; min-height: 44px;
  padding: .7rem .9rem; font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 999px;
}
.signup input[type="email"]:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.signup button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }

/* Off-screen but still announced — a placeholder is not a label. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* The honeypot. Bots commonly skip fields hidden the usual CSS way, so this is moved
   off-canvas instead. Naming that CSS property here in prose is enough to trip
   check-claims.sh, which greps raw bytes across every stylesheet — deliberately, because a
   reviewer once hid the FCC disclaimer with a class defined in this very file. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }