/* The production front: the launching-soon page and its disclosure pages.
   Same palette as /privacy/ and /terms/, so every public page reads as one site.
   Served to production only — see tools/cloudbuild/landing-production.sh. */
:root {
  --bg: #FDFCFF;
  --accent: #6F4BFF;
  --ink: #111116;
  --muted: #666572;
  --line: #E8E5EF;
  --panel: #F5F2FF;
  color-scheme: light;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* The site's handwritten face, served from here (Apache-2.0; the same file as
   packages/arcade-look) — no request leaves oodesy.com. */
@font-face {
  font-family: "Permanent Marker";
  src: url("/fonts/permanent-marker-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── The front page: black, the logo, and "Launching soon" in marker ── */
body.front { background: #000000; color: #FFFFFF; color-scheme: dark; }
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 64px 16px;
  text-align: center;
}
.hero-logo { width: min(440px, 82vw); height: auto; }
.hero h1 {
  color: #FFFFFF;
  font: 400 clamp(44px, 10vw, 96px)/1.1 "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  letter-spacing: 0.02em;
  transform: rotate(-2deg);
}

/* ── The disclosure pages ── */
.page-header { padding: 24px 16px; border-bottom: 1px solid var(--line); }
.page-header a { display: inline-block; }
.page-header img { width: 126px; height: auto; display: block; }
.page { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 16px 72px; }
.page h1 { font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
.page .lede { color: var(--muted); margin-bottom: 32px; }
.page h2 { font-size: 20px; font-weight: 800; margin: 36px 0 10px; }
.page h3 { font-size: 17px; font-weight: 700; margin: 22px 0 6px; }
.page p, .page li { margin-bottom: 12px; }
.page ul { padding-left: 22px; }
.note { background: var(--panel); border-radius: 12px; padding: 14px 16px; }

/* ── The footer every page carries: the disclosures ── */
.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  padding: 24px 16px 32px;
  text-align: center;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 12px;
}
.site-footer nav a { color: var(--ink); font-weight: 600; text-decoration: none; }
.site-footer nav a:hover, .site-footer nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
.site-footer p { margin-top: 6px; }
.site-footer p a { color: var(--muted); }
/* The footer on the black front page */
.front .site-footer { border-top-color: #2A2833; color: #B9B6C8; }
.front .site-footer nav a { color: #FFFFFF; }
.front .site-footer nav a:hover { color: #A8F0D2; }
.front .site-footer p a { color: #B9B6C8; }
.front a:focus-visible { outline-color: #A8F0D2; }