/* guide and comparison pages: plain, fast, readable */
body.doc { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.65; }
.doc-top { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.doc-brand { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; margin-right: auto; }
.doc-top nav { display: flex; gap: 16px; flex-wrap: wrap; }
.doc-top nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; }
.doc-top nav a:hover { color: var(--accent); }
.doc-main { max-width: 760px; margin: 0 auto; padding: 24px 20px 64px; }
.doc-main h1 { font-family: var(--display); font-size: clamp(28px, 4vw, 38px); line-height: 1.2; margin: 8px 0 12px; letter-spacing: -.02em; }
.doc-main h2 { font-size: 21px; margin: 32px 0 8px; }
.doc-main a { color: var(--accent); }
.lead { font-size: 18px; color: var(--text); }
.crumbs { font-size: 13px; color: var(--muted); margin: 0; } .crumbs a { color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: 13px; }
table.t { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14.5px; display: block; overflow-x: auto; }
table.t th, table.t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { color: var(--muted); font-size: 13px; }
kbd { font-family: var(--mono); font-size: 13px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }
.cards { list-style: none; padding: 0; display: grid; gap: 12px; }
.cards a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg, 10px); background: var(--surface); text-decoration: none; color: var(--text); }
.cards a:hover { border-color: var(--accent); }
.cards b { display: block; font-size: 16.5px; } .cards span { color: var(--muted); font-size: 14px; }
.faq details { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 8px 0; background: var(--surface); }
.faq summary { cursor: pointer; font-weight: 600; }
.cta { margin-top: 36px; }
.btn.primary { display: inline-block; padding: 12px 20px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #fff) !important; text-decoration: none; font-weight: 700; }
.doc-foot { border-top: 1px solid var(--line); padding: 18px 24px; text-align: center; font-size: 13px; color: var(--muted); }
.doc-foot a { color: var(--muted); }