:root { --accent: #0E9F6E; }
@media (prefers-color-scheme: dark) { :root { --accent: #3ccf9a; --on-accent: #06281c; } }
/* Tool pages: extends lp.css (same tokens and classes). No script, no external assets. */
.tool-tag { margin-left: auto; font-size: var(--fs-small); color: var(--text-3); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.tool-page { display: grid; gap: var(--s-6); max-width: 42rem; padding: var(--s-2) 0 var(--s-8); }
.tool-page h1 { margin: 0; max-width: none; font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }
.tool-page h2 { margin: 0 0 var(--s-3); font-size: 1.375rem; }
.tool-page section { margin: 0; }
.tool-lead { margin: 0; font-size: 1.125rem; color: var(--text-2); max-width: 46ch; }
.reason-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.reason-list .funnel-opt { min-height: 64px; }
.opt { display: grid; gap: 2px; }
.opt strong { font-weight: 650; }
.opt small { font-size: var(--fs-small); font-weight: 400; color: var(--text-3); }
.fact-list { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-3); }
.fact-list li::marker { color: var(--accent); }
.src { display: inline-block; margin-left: 0.35em; padding: 0 8px; font-size: 0.75rem; line-height: 1.6; color: var(--text-2); border: 1px solid var(--line); border-radius: 99px; text-decoration: none; overflow-wrap: anywhere; vertical-align: 1px; }
.src:hover { color: var(--accent); border-color: var(--accent); }
.steps p { overflow-wrap: anywhere; }
.ui { font-weight: 600; background: var(--surface-2); border-radius: 4px; padding: 0 5px; }
.callout { background: var(--note-bg); color: var(--note-text); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); font-size: var(--fs-small); }
.callout p { margin: 0; }
.callout a { color: inherit; }
.product-line { margin: var(--s-6) 0 var(--s-8); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-sm); }
.product-line a { font-weight: 650; }
.tool-sources ul { margin: 0 0 var(--s-3); padding-left: 1.1em; display: grid; gap: var(--s-2); font-size: var(--fs-small); }
.tool-sources a { overflow-wrap: anywhere; }
.tool .table-scroll { max-width: 100%; }
.card-table { width: 100%; }
@media print { .test-note, .brand-bar, footer, .product-line, .funnel-nav, .noprint { display: none; } body { background: #fff; color: #000; } }