/* Placeholder landing page at the site's root. Plain on purpose: it stands in
   until the real page is designed, and its one job is to get a parent or teacher
   to the app. The app's colours, a system font (the app's own fonts are bundled
   inside /app/ under hashed names), one button. */
:root {
  --primary: #1877c2;
  --primary-ink: #0e4f84;
  --ink: #12202c;
  --ink-2: #4a5866;
  --bg: #f3f7fb;
  --line: #d9e3ec;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
::selection { background: var(--primary); color: #fff; }

.page {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 16px 24px;
  padding-top: max(40px, env(safe-area-inset-top));
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { border-radius: 50%; }
.brand span { font-weight: 700; font-size: 18px; line-height: 1.25; }
.brand small { font-weight: 600; font-size: 14px; color: var(--ink-2); }

.hero { margin-top: 56px; }
.hero h1 { font-size: clamp(28px, 7vw, 40px); line-height: 1.15; margin: 0 0 14px; text-wrap: balance; }
.hero p { margin: 0 0 28px; color: var(--ink-2); max-width: 46ch; }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px -4px rgba(24, 119, 194, 0.55);
  transition: background 0.12s;
}
.cta:hover { background: var(--primary-ink); }
.cta:focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 3px; }
@media (max-width: 420px) { .cta { width: 100%; } }

.foot {
  padding: 18px 16px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }