/* Pre-rendered SEO pages. One stylesheet for ~1,600 static documents, so it is
   fetched once and every page after that is HTML only. Deliberately small and
   dependency-free — these pages must render before, and without, the app. */
:root {
  --bg: #ffffff; --panel: #fafafa; --line: #e5e5e5; --line-2: #d4d4d4;
  --ink: #0a0a0a; --muted: #525252; --subtle: #737373;
  --brand: #6d4ade; --brand-ink: #ffffff; --brand-soft: #f3efff;
  --pass: #0f7a3d; --pass-soft: #eaf7ef; --fail: #b3261e; --fail-soft: #fdeeed;
  --radius: 12px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0d; --panel: #141416; --line: #26262a; --line-2: #34343a;
    --ink: #f4f4f5; --muted: #a1a1aa; --subtle: #8a8a93;
    --brand: #a78bfa; --brand-ink: #17111f; --brand-soft: #1c1729;
    --pass: #4ade80; --pass-soft: #10231a; --fail: #fca5a5; --fail-soft: #2a1414;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
main, header.site, footer.site, .crumbs { max-width: 860px; margin: 0 auto; padding: 0 20px; }
a { color: var(--brand); }

header.site {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 22px; padding-bottom: 22px;
}
header.site .brand { display: flex; }
header.site img { display: block; height: 20px; width: auto; }
@media (prefers-color-scheme: dark) { header.site img { filter: invert(1) hue-rotate(180deg); } }
header.site nav { margin-left: auto; display: flex; gap: 18px; font-size: 14.5px; }
header.site nav a { color: var(--muted); text-decoration: none; }
header.site nav a:hover { color: var(--ink); }

.crumbs { font-size: 13.5px; color: var(--subtle); padding-bottom: 10px; }
.crumbs a { color: var(--subtle); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 7px; opacity: .5; }

h1 { font-size: 34px; line-height: 1.2; letter-spacing: -.02em; margin: 14px 0 12px; }
h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.01em; margin: 40px 0 12px; }
h3 { font-size: 17px; margin: 26px 0 8px; }
.lede { font-size: 18px; color: var(--muted); margin: 0 0 8px; }

/* the answer, stated before anything else */
.answer {
  margin: 24px 0; padding: 22px 24px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel);
}
.answer .big { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.answer .big small { font-size: 20px; font-weight: 600; color: var(--muted); }
.answer .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.answer .demo {
  min-width: 190px; padding: 16px 18px; border-radius: 10px;
  border: 1px solid var(--line-2); font-size: 17px;
}

.v {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.v.pass { background: var(--pass-soft); color: var(--pass); }
.v.fail { background: var(--fail-soft); color: var(--fail); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--subtle); font-weight: 700; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--panel); }
.scroll { overflow-x: auto; }

code { font-family: var(--mono); font-size: .92em; }
.sw { display: inline-flex; align-items: center; gap: 7px; }
.sw i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(128,128,128,.32); display: block; }

/* the 11-stop ramp */
.ramp { display: flex; border-radius: 10px; overflow: hidden; margin: 16px 0 6px; border: 1px solid var(--line); }
.ramp a { flex: 1; min-width: 0; text-decoration: none; }
.ramp span { display: block; height: 62px; }
.ramp b { display: block; font: 600 10.5px/1.9 var(--mono); text-align: center; color: var(--subtle); background: var(--bg); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin: 16px 0; }
.card {
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px;
  text-decoration: none; color: inherit; display: block; background: var(--panel);
}
.card:hover { border-color: var(--line-2); }
.card .n { font-weight: 600; font-size: 15px; }
.card .m { font-size: 13px; color: var(--subtle); margin-top: 3px; }
.card .strip { display: flex; height: 22px; border-radius: 5px; overflow: hidden; margin-bottom: 10px; }
.card .strip i { flex: 1; }

.cta {
  margin: 46px 0 30px; padding: 26px 28px; border-radius: var(--radius);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.cta h2 { margin: 0 0 6px; font-size: 21px; }
.cta p { margin: 0 0 16px; color: var(--muted); }
.btn {
  display: inline-block; background: var(--brand); color: var(--brand-ink);
  padding: 11px 20px; border-radius: 9px; font-weight: 600; text-decoration: none;
}

footer.site { margin: 50px 0 60px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 14px; }
footer.site p { margin: 0 0 8px; }
footer.site .links a { color: var(--muted); text-decoration: none; }
footer.site .links a:hover { text-decoration: underline; }

.note { font-size: 13.5px; color: var(--subtle); }
ul.plain { padding-left: 20px; }
ul.plain li { margin: 6px 0; }