/* Landing pages: the SEO entry points (/wpm-test, /1-minute-typing-test,
   /typing-lessons-weak-keys, /typing-exercises, /typing-practice-no-time-limit,
   /aesthetic-typing-test, /about).

   Each of these carried its own inline stylesheet, so seven pages drifted into
   seven slightly different products and none of them followed the reader's
   chosen theme. This maps the class vocabulary they already use onto the shared
   tokens in page.css, so the markup is untouched but the typography, spacing
   and palette become the same system as the docs and the blog.

   Loaded after page.css and article.css, which supply the tokens and the
   editorial layer. Nothing here redefines a token — it only binds old names to
   the current design. */

/* ── Shell ────────────────────────────────────────────────────────────── */

.container {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

.breadcrumb,
.back-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--sub);
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
  display: block;
}
.breadcrumb a,
.back-link { color: var(--sub); }
.breadcrumb a:hover,
.back-link:hover { color: var(--main); }

.tagline,
.desc {
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: -0.005em;
  opacity: 0.72;
  max-width: 34rem;
  margin-bottom: 2rem;
}

/* ── Hero and calls to action ─────────────────────────────────────────── */

/* The hero is what someone arriving from a search sees first, so it leads with
   the way in rather than with a description of the way in. */
.cta-hero,
.cta-section {
  margin: 2rem 0 2.5rem;
  padding: 2rem 1.75rem;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(155deg, var(--surface) 0%, color-mix(in srgb, var(--main) 11%, var(--surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--main) 20%, transparent);
}
.cta-hero h2,
.cta-section h2 { margin: 0 0 0.5rem; font-size: 1.35rem; }
.cta-hero p,
.cta-section p { margin-bottom: 1.25rem; opacity: 0.8; }

.cta-btn {
  display: inline-block;
  background: var(--main);
  color: var(--bg);
  font-weight: 640;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  padding: 0.68rem 1.8rem;
  border-radius: 10px;
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), filter 0.18s;
}
.cta-btn:hover { transform: translateY(-1px); filter: brightness(1.08); text-decoration: none; }
.cta-btn:active { transform: translateY(0); }

/* ── Cards and grids ──────────────────────────────────────────────────── */

.feature-grid,
.mode-grid,
.wpm-grid,
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.8rem;
  margin: 1.5rem 0;
}

.feature-card,
.mode-card,
.wpm-card,
.drill,
.faq-item,
.note,
.formula-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.15rem 1.3rem;
}
.feature-card h3,
.mode-card h3,
.wpm-card h3,
.drill h3,
.faq-item h3 {
  color: var(--text);
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.feature-card p,
.mode-card p,
.wpm-card p,
.faq-item p { margin-bottom: 0; font-size: 0.92rem; opacity: 0.82; }

.faq-item { margin-bottom: 0.7rem; }

/* Accent strip marks the block as reference rather than prose. */
.note { border-left: 3px solid var(--accent); }

.formula,
.formula-box {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: var(--accent);
  overflow-x: auto;
}
.formula { display: block; margin: 1rem 0; }

/* ── Tables ───────────────────────────────────────────────────────────── */

.comparison-table,
.speed-table,
.keytable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 1.35rem 0;
}
.comparison-table th,
.speed-table th,
.keytable th {
  text-align: left;
  padding: 0.7rem 0.95rem;
  background: var(--surface-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sub);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.comparison-table td,
.speed-table td,
.keytable td {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
  opacity: 0.88;
  vertical-align: top;
}

/* Verdict colours never carry meaning alone — the cell text always states it. */
.yes { color: var(--accent); font-weight: 600; }
.no { color: var(--sub); }
.fast, .speed-table .fast { color: var(--accent); font-weight: 600; }
.avg { color: var(--text); }
.slow { color: var(--sub); }

/* ── Small parts ──────────────────────────────────────────────────────── */

.step-num,
.lvl,
.label,
.nm {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
}
.number,
.speed {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dots { color: var(--sub); letter-spacing: 0.3em; }
.sw {
  display: inline-block;
  width: 100%;
  height: 2.6rem;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.footer,
.footer-about {
  margin-top: 4rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--sub);
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
}
.footer a,
.footer-about a { color: var(--main); }

@media (max-width: 34rem) {
  .container { padding: 2.5rem 1.15rem 3.5rem; }
  .cta-hero, .cta-section { padding: 1.6rem 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-btn { transition: none; }
  .cta-btn:hover { transform: none; }
}