.q4-guide { --q4-accent:#8a5a00; --q4-surface:#f6f1e6; --q4-border:#dccfb0; --q4-ink:#2e2614; --q4-base:#cfc2a3; --q4-gain:#8a5a00; }
html.theme-dark .q4-guide { --q4-accent:#f3c86b; --q4-surface:#2c2616; --q4-border:#6a5a38; --q4-ink:#f7f0de; --q4-base:#6f6446; --q4-gain:#f3c86b; }
html.reading-mode:not(.theme-dark) .q4-guide { --q4-accent:#7a4a10; --q4-surface:#ece3d1; --q4-border:#bcb09a; --q4-ink:#332d24; --q4-base:#c2b49b; --q4-gain:#7a4a10; }
html.reading-mode.theme-dark .q4-guide { --q4-accent:#f5c85b; --q4-surface:#2a1a13; --q4-border:#493127; --q4-ink:#f7ead3; --q4-base:#6e5646; --q4-gain:#f5c85b; }
.q4-guide .q4-deck { max-width:640px; margin:18px auto; font-size:1.2rem; }
.q4-guide .blog-post-content { min-width:0; }
.q4-guide .blog-featured-image img { display:block; width:100%; height:auto; }
.q4-guide .blog-post-content figcaption { padding:12px 2px; font-size:.875rem; line-height:1.6; }
.q4-guide .q4-toc { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; padding:24px; margin:30px 0; border:1px solid var(--q4-border); border-radius:16px; }
.q4-guide .q4-toc strong { grid-column:1/-1; }
.q4-guide :is(h2,h3,section[id]) { scroll-margin-top:110px; }
.q4-guide .q4-visual { margin:30px 0; padding:24px; border:1px solid var(--q4-border); border-radius:18px; background:var(--q4-surface); color:var(--q4-ink); }
html body.q4-guide .blog-post-content .q4-visual figcaption { padding:0 0 10px; }
.q4-guide .q4-visual figcaption strong,.q4-guide .q4-visual figcaption span { display:block; }
html body.q4-guide .blog-post-content .q4-visual figcaption strong { color:var(--q4-ink) !important; font-size:1.3rem; }
.q4-guide .q4-row { display:grid; grid-template-columns:170px minmax(0,1fr) 56px; align-items:center; gap:14px; padding:12px 0; color:var(--q4-ink); }
.q4-guide .q4-row > span { font-size:.95rem; font-weight:800; }
.q4-guide .q4-row small { display:block; margin-top:2px; font-size:.78rem; font-weight:500; line-height:1.4; opacity:.85; }
.q4-guide .q4-track { display:flex; height:30px; overflow:hidden; border-radius:6px; background:color-mix(in srgb,var(--q4-ink) 8%,transparent); }
.q4-guide .q4-track i { display:block; height:100%; }
.q4-guide .q4-track .is-base { background:var(--q4-base); }
.q4-guide .q4-track .is-gain { background:var(--q4-gain); }
.q4-guide .q4-row b { text-align:right; font-size:1.05rem; }
.q4-guide .q4-legend { display:flex; flex-wrap:wrap; gap:8px 22px; margin:10px 0 4px; color:var(--q4-ink); font-size:.875rem; font-weight:600; }
.q4-guide .q4-legend span::before { content:""; display:inline-block; width:12px; height:12px; margin-right:8px; border-radius:3px; vertical-align:-1px; background:var(--swatch); }
html body.q4-guide .blog-post-content .q4-visual p { max-width:none; margin:14px 0 0 !important; font-size:.95rem !important; }
html body.q4-guide .blog-post-content code { padding:1px 6px; border-radius:5px; background:var(--q4-surface); color:var(--q4-ink); font-size:.9em; }
.q4-guide .q4-card,.q4-guide .q4-calculator { margin:32px 0; padding:26px; border:1px solid var(--q4-border); border-radius:18px; background:var(--q4-surface); }
.q4-guide .q4-eyebrow { display:block; color:var(--q4-accent); font-size:.8rem; font-weight:800; letter-spacing:.1em; }
.q4-guide .q4-card dl { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px 18px; margin:18px 0 0; }
.q4-guide .q4-card dt { color:var(--q4-accent); font-size:.9rem; font-weight:800; }
.q4-guide .q4-card dd { margin:0; color:var(--q4-ink); font-size:.95rem; line-height:1.6; }
.q4-guide .q4-table-wrap { max-width:100%; overflow-x:auto; margin:26px 0; }
html body.q4-guide .blog-post-content .q4-table-wrap table { display:table !important; width:100% !important; max-width:none !important; margin:0 !important; table-layout:fixed; }
.q4-guide .q4-table-wrap--ledger th:first-child { width:44%; }
.q4-guide .q4-table-wrap--campaigns th:first-child { width:26%; }
.q4-guide .q4-table-wrap :is(th,td) { overflow-wrap:anywhere; }
.q4-guide .q4-table-wrap caption { padding:0 0 12px; text-align:left; font-size:.9rem; line-height:1.6; }
.q4-guide .q4-input-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0; }
.q4-guide .q4-input-grid label { display:flex; flex-direction:column; gap:8px; color:var(--q4-ink); font-size:.95rem; font-weight:600; }
.q4-guide .q4-input-grid input { width:100%; min-width:0; box-sizing:border-box; padding:12px; border:1px solid var(--q4-border); border-radius:8px; background:var(--q4-surface); color:var(--q4-ink); font:inherit; font-size:1.125rem; }
.q4-guide :is(input,button,a,summary,[tabindex]):focus-visible { outline:3px solid var(--q4-accent); outline-offset:4px; }
.q4-guide .q4-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:25px; padding-top:24px; border-top:1px solid var(--q4-border); }
.q4-guide .q4-result-grid span { display:block; margin-bottom:6px; color:var(--q4-ink); font-size:.9rem; }
.q4-guide .q4-result-grid strong { color:var(--q4-accent); font-size:clamp(1.25rem,2.5vw,1.8rem); overflow-wrap:anywhere; }
html body.q4-guide .blog-post-content .q4-result-grid strong { color:var(--q4-accent) !important; }
html body.q4-guide .blog-post-content .q4-small { font-size:.875rem !important; line-height:1.6 !important; }
.q4-guide #q4-calc-error { color:var(--q4-accent); font-weight:700; }
.q4-guide .q4-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0; }
.q4-guide .q4-grid article { padding:20px; border:1px solid var(--q4-border); border-radius:14px; background:var(--q4-surface); }
.q4-guide .q4-grid span { color:var(--q4-accent); font-weight:800; }
html body.q4-guide .blog-post-content .q4-grid h3 { margin:10px 0 8px !important; color:var(--q4-ink) !important; font-size:1.45rem !important; }
html body.q4-guide .blog-post-content .q4-grid p { margin:0 !important; font-size:.92rem !important; line-height:1.7 !important; }
.q4-guide .lead-faq details { padding:18px 0; border-bottom:1px solid var(--q4-border); }
.q4-guide .lead-faq summary { color:var(--q4-ink); font-size:1.05rem; font-weight:700; cursor:pointer; }
.q4-guide .q4-sources { padding:24px; margin-top:32px; border:1px solid var(--q4-border); border-radius:16px; background:var(--q4-surface); font-size:.95rem; }
.q4-guide .blog-post-content .q4-sources :is(h2,p,li) { color:var(--q4-ink); }
.q4-guide .q4-sources li { margin-bottom:14px; overflow-wrap:anywhere; }
@media(max-width:600px) { .q4-guide .q4-toc,.q4-guide .q4-input-grid,.q4-guide .q4-result-grid,.q4-guide .q4-grid { grid-template-columns:1fr; } .q4-guide .q4-card,.q4-guide .q4-calculator,.q4-guide .q4-visual { padding:18px; } .q4-guide .q4-row { grid-template-columns:1fr 48px; gap:6px 10px; } .q4-guide .q4-row > span { grid-column:1/-1; } .q4-guide .q4-card dl { grid-template-columns:1fr; gap:4px; } .q4-guide .q4-card dd { margin-bottom:10px; } .q4-guide .q4-result-grid { gap:16px; } html body.q4-guide .blog-post-content .q4-table-wrap table { min-width:560px; table-layout:auto; } }