/* Editorial pages use the same paper, graphite and typography as the landing. */
:root { --voltage-deep: #526900; --muted: #62625D; --line: #DEDBD2; }
body { font-family: var(--ui-font); background: var(--paper); color: var(--ink); line-height: 1.8; }
.top { background: var(--graphite); }
.top .wrap { padding-top: 22px; padding-bottom: 22px; }
.top svg { width: 34px; height: 34px; }
.top a { font-size: 15px; }
main { padding-top: 64px; padding-bottom: 80px; }
h1 { font-size: clamp(32px, 5vw, 46px); line-height: 1.15; letter-spacing: -.04em; margin-bottom: 24px; }
h2 { font-size: 26px; line-height: 1.3; letter-spacing: -.03em; margin-top: 44px; margin-bottom: 17px; }
p { line-height: 1.85; }
a { color: #526900; }
.top a { color: var(--paper); }
.card, .callout { border-radius: 13px; padding: 23px; }
.card h3 { font-size: 19px; letter-spacing: -.02em; }
.card p { font-size: 14px; }
.mode-comparison{margin:28px 0;overflow-x:auto}
.mode-comparison table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.mode-comparison th,.mode-comparison td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:break-word}
.mode-comparison thead th{color:var(--ink);font-weight:800}
.mode-comparison th:first-child{width:24%}
.mode-comparison td{color:var(--muted)}
@media(max-width:540px){.mode-comparison th,.mode-comparison td{padding:12px 6px;font-size:12px}.mode-comparison th:first-child{width:25%}}
.sect { font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 700; color: #62625D; }
pre { border-radius: 12px; line-height: 1.85; overflow-x: auto; }
input, textarea { font-size: 16px; }
@media (max-width: 540px) { main { padding-top: 38px; padding-bottom: 50px; } h2 { font-size: 24px; } }