/* The plain pages (D-343): what ion is, use cases, the comparison, questions, and the English home and pricing.
   Text first, no script, system fonts; the site's CSP allows this file ('self') and no inline style. */
:root { color-scheme: light dark; --ink: #14161a; --muted: #5a6068; --line: #dfe2e6; --bg: #fff; --accent: #1b4dff; --soft: #f5f6f8; }
@media (prefers-color-scheme: dark) { :root { --ink: #eceef1; --muted: #a3a9b1; --line: #2b2f36; --bg: #101216; --accent: #8ca6ff; --soft: #181b20; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Heebo", "Arial Hebrew", Arial, sans-serif; }
a { color: var(--accent); }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px max(16px, calc((100% - 860px) / 2)); border-block-end: 1px solid var(--line); }
.brand { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 15px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--ink); }
nav .cta { background: var(--ink); color: var(--bg); padding: 6px 14px; border-radius: 999px; }
main { max-width: 860px; margin: 0 auto; padding: 28px 16px 56px; }
h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 16px; }
h2 { font-size: 24px; line-height: 1.3; margin: 40px 0 8px; }
h3 { font-size: 18px; margin: 28px 0 6px; }
ul, ol { padding-inline-start: 24px; }
li { margin: 6px 0; }
dt { font-weight: 700; margin-top: 18px; }
dd { margin: 4px 0 0; margin-inline-start: 0; }
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; vertical-align: top; }
thead th { background: var(--soft); }
tbody th { font-weight: 600; background: var(--soft); }
time { color: var(--muted); }
footer { border-block-start: 1px solid var(--line); padding: 20px max(16px, calc((100% - 860px) / 2)); font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }