/* landing.html — the public front page.
   Content comes from README.md and COMPATIBILITY.md, so the styling has to
   cope with whatever those documents contain: nested lists, wide tables,
   inline code, links. */

body { padding: 0; }

/* -- hero ---------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: clamp(36px, 8vw, 76px) var(--pad-x) clamp(28px, 5vw, 48px);
  background:
    radial-gradient(120% 100% at 50% 0%,
      color-mix(in srgb, var(--accent) 10%, var(--bg)) 0%, var(--bg) 70%);
  border-bottom: 1px solid var(--line);
}
.hero-logo {
  width: clamp(120px, 26vw, 190px); height: auto; aspect-ratio: 1;
  object-fit: contain; border-radius: 22px;
}
@media (prefers-color-scheme: dark) {
  /* The artwork is line art on white; give it its ground back. */
  .hero-logo { background: #fff; padding: 4px; }
}
.hero h1 {
  font-size: clamp(30px, 7vw, 50px); letter-spacing: -.03em;
  margin: 14px 0 0; line-height: 1.1;
}
.tagline {
  max-width: 42ch; margin: 14px auto 0;
  font-size: clamp(16px, 2.4vw, 19px); color: var(--muted);
}
.micro { font-size: 13px; margin: 18px 0 0; }

.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.button {
  display: inline-block; text-decoration: none;
  font-size: 15px; font-weight: 600; padding: 12px 22px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.button:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* -- sections ------------------------------------------------------------ */

main { max-width: 900px; margin: 0 auto; padding: 0 var(--pad-x) 40px; }

section { padding: clamp(30px, 5vw, 48px) 0; border-bottom: 1px solid var(--line); }
section:last-child { border-bottom: 0; }

h2 {
  font-size: clamp(20px, 3.4vw, 26px); letter-spacing: -.02em; margin: 0 0 6px;
}
h3 {
  font-size: clamp(16px, 2.4vw, 18px); margin: 30px 0 8px; letter-spacing: -.01em;
}
h4 { font-size: 15px; margin: 22px 0 6px; color: var(--muted); }

section p { max-width: 72ch; }

/* Rendered from the docs: a flat list of features, one per line. */
section ul { padding-left: 20px; margin: 14px 0; max-width: 72ch; }
section li { margin-bottom: 8px; }
section ul ul { margin: 8px 0 0; }

.steps { padding-left: 22px; margin: 16px 0 0; max-width: 72ch; }
.steps li { margin-bottom: 12px; }

/* -- tables from COMPATIBILITY.md ---------------------------------------- */

/* The support matrix is wider than a phone; it scrolls inside its own box
   rather than stretching the page. */
.table-wrap {
  overflow-x: auto; margin: 14px 0 20px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
}
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
td code { font-size: 12px; }

/* -- footer -------------------------------------------------------------- */

footer {
  text-align: center; padding: 30px var(--pad-x) 48px;
  border-top: 1px solid var(--line); font-size: 14px;
}
footer p { margin: 4px 0; }

/* -- the grading flow diagram from GRADING.md ---------------------------- */

/* Wide ASCII art: it scrolls inside its own box rather than stretching the
   page, and keeps its own line breaks. */
pre {
  overflow-x: auto; margin: 16px 0 20px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
pre code { background: none; border: 0; padding: 0; font: inherit; white-space: pre; }