/* © 2026 Typing Adventure. All rights reserved. See LICENSE.txt. */
/* Styles for the content/landing pages (separate from the app itself, which
   is a fixed-viewport experience and deliberately does not scroll). */
:root {
  --bg: #eaf4ff;
  --card: #ffffff;
  --blue: #4f9dff;
  --yellow: #ffd166;
  --pink: #ff6b9d;
  --green: #3ddc97;
  --purple: #9b7bff;
  --text: #2b2d42;
  --muted: #6b7899;
  --shadow: rgba(43,45,66,0.15);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12172a; --card: #222a44; --text: #eaf0ff; --muted: #97a3c0; --shadow: rgba(0,0,0,.45); }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  line-height: 1.65;
}
.container { max-width: 780px; margin: 0 auto; padding: 32px 20px 60px; }
header.site { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
header.site .logo { font-size: 30px; }
header.site .brand { font-weight: bold; font-size: 20px; color: var(--blue); text-decoration: none; }
header.site nav { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
header.site nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
header.site nav a:hover { color: var(--pink); text-decoration: underline; }

h1 { font-size: clamp(28px, 5vw, 40px); color: var(--blue); line-height: 1.2; margin: 0 0 10px; }
h2 { font-size: clamp(20px, 3.4vw, 26px); color: var(--pink); margin: 34px 0 10px; }
h3 { font-size: 18px; color: var(--purple); margin: 22px 0 6px; }
p.lead { font-size: 19px; color: var(--text); opacity: .85; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }

.cta {
  display: inline-block; margin: 22px 0;
  background: var(--blue); color: #fff; text-decoration: none;
  font-weight: bold; font-size: 19px; padding: 15px 34px; border-radius: 50px;
  box-shadow: 0 5px 0 #2f7fe0, 0 8px 16px var(--shadow);
}
.cta:hover { filter: brightness(1.06); }
.cta.alt { background: var(--pink); box-shadow: 0 5px 0 #d94e7d, 0 8px 16px var(--shadow); }

.card {
  background: var(--card); border-radius: 16px; padding: 18px 22px;
  box-shadow: 0 6px 18px var(--shadow); margin: 16px 0;
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(128,128,128,.25); }
th { color: var(--purple); }

footer.site { margin-top: 46px; padding-top: 18px; border-top: 1px solid rgba(128,128,128,.25); font-size: 13px; color: var(--muted); }
footer.site a { color: var(--muted); }
.faq-q { font-weight: bold; color: var(--text); margin-top: 16px; }

/* Current page in the header nav. Marked with aria-current="page" too, so it
   is announced, not only shown. */
header.site nav a.active {
  color: var(--text);
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px solid var(--pink);
  padding-bottom: 2px;
}
header.site nav a.active:hover { color: var(--text); text-decoration: none; }