/* landing.css — the P8 landing screen. What the app does, then a way in: start writing,
   try the demo, or sign in and join a class above (the account bar). No new palette
   value: reuses --panel/--ink/--calm-text, so contrast-check.mjs stays at 16/16. */

.landing {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  background: var(--panel);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
}
.landing[hidden] { display: none; }

.landing-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
}
.landing-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
}

.landing-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.landing-btn {
  min-height: var(--control-min);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
}
.landing-start {
  background: var(--ink);
  color: var(--panel);
}
.landing-demo {
  background: var(--panel);
}

.landing-note {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  color: var(--calm-text);
}

@media (min-width: 600px) {
  .landing { padding: 32px 28px; }
}