/* Small visual guides with real explanations, no decorative stock imagery. */
body[data-variant] .drawer[data-mode='help'].reading-article .drawer-content { padding-top:19px; padding-bottom:22px; }
body[data-variant] .drawer[data-mode='help'].reading-article .help-back { margin-top:0; }
.guide-category { display:block; margin:23px 0 8px; font-size:10px; font-weight:500; color:#aa704e; }
body[data-variant] .drawer[data-mode='help'] .article h3 { margin:0 0 20px; font-size:23px; line-height:1.35; letter-spacing:-.6px; }
.guide-visual { margin:0 0 20px; overflow:hidden; border-radius:17px; background:#f8f1e7; border:1px solid #f0e4d4; color:#59432d; }
.guide-visual svg { width:20px; height:20px; display:block; flex:0 0 auto; }
.mini-eyebrow { display:block; font-size:8px; font-weight:500; letter-spacing:.07em; }
.visual-caption { display:block; text-align:center; font-size:10px; line-height:1.5; color:#96785d; margin-top:14px; }
.guide-business { padding:22px 16px 18px; background:#fff0df; }
.business-orbit { display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:22px; }
.business-orbit > svg { width:47px; height:47px; color:#e45b2b; }
.business-orbit strong { font:600 21px/1.15 'DM Sans',sans-serif; letter-spacing:-.6px; color:#9d4828; }
.business-paths { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:7px; }
.business-paths span { display:flex; align-items:center; flex-direction:column; gap:8px; padding:11px 4px; text-align:center; font-size:10px; line-height:1.35; background:#fffcf6; border:1px solid #f0deca; border-radius:12px; color:#8a674c; }
.business-paths svg { width:19px; height:19px; color:#d66d38; }
.guide-website { padding:17px 18px 14px; background:#f2eee6; }
.mini-browser { background:#fffdfa; border:1px solid #ded5c7; border-radius:11px; box-shadow:0 7px 14px #6752320a; }
.browser-bar { display:flex; align-items:center; gap:4px; border-bottom:1px solid #ede5d9; padding:9px 11px; }
.browser-bar i { width:4px; height:4px; background:#d5c9ba; border-radius:50%; }
.browser-bar span { font-size:8px; color:#a09486; margin-left:7px; }
.browser-body { padding:17px; }
.browser-body .mini-eyebrow { color:#b39172; font-size:7px; }
.browser-body > strong { display:block; font:600 22px/1.15 'DM Sans',sans-serif; letter-spacing:-.6px; margin:9px 0 13px; color:#544637; }
.proof-line { display:flex; align-items:center; gap:5px; color:#8f8879; font-size:9px; }
.proof-line svg { width:12px; height:12px; color:#7b8e65; }
.mock-cta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; padding:9px 11px; border-radius:7px; background:#e86536; color:white; font-size:10px; }
.mock-cta svg { width:13px; height:13px; }
.guide-automation { padding:18px; }
.guide-automation > .mini-eyebrow { margin-bottom:13px; color:#a17e5c; }
.workflow-step { position:relative; display:flex; align-items:center; gap:12px; padding:9px 11px; background:#fffcf7; border:1px solid #eee3d4; border-radius:10px; }
.workflow-step + .workflow-step { margin-top:11px; }
.workflow-step + .workflow-step:before { position:absolute; content:''; height:11px; width:1px; background:#d6b28b; left:27px; top:-12px; }
.flow-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#f4ecdf; color:#a48563; }
.workflow-step.featured { background:#ffebd8; border-color:#efcbab; }
.workflow-step.featured .flow-icon { background:#f8d7b8; color:#c7672f; }
.workflow-step strong,.process-step strong { display:block; font-size:12px; font-weight:500; }
.workflow-step small,.process-step small { display:block; font-size:9px; line-height:1.5; color:#9b8871; margin-top:2px; }
.flow-icon svg { width:17px; height:17px; }
.guide-search { padding:20px 18px 17px; background:#eef1eb; }
.search-query { display:flex; align-items:center; gap:8px; padding:11px; border-radius:9px; background:#fffefa; border:1px solid #dde1d5; font-size:10px; color:#919b87; }
.search-query svg { width:14px; height:14px; }
.search-result-example { margin:12px 5px 0; padding:14px; border:1px solid #dde2d5; border-radius:11px; background:#fafbf6; }
.result-site { display:flex; align-items:center; gap:5px; font-size:8px; color:#9a9e8b; }
.result-site i { width:9px; height:9px; background:#d9dfce; border-radius:50%; }
.search-result-example > strong { display:block; font-size:14px; font-weight:500; line-height:1.4; color:#657750; margin:10px 0; }
.result-bars i { display:block; height:4px; border-radius:3px; background:#e5e8dc; margin-top:5px; }
.result-bars i:last-child { width:65%; }
.result-note { display:block; font-size:8px; color:#939d87; margin-top:12px; }
.guide-search .visual-caption { color:#879479; }
.guide-growth { padding:20px 14px 16px; background:#ffefe0; }
.guide-growth > .mini-eyebrow { text-align:center; color:#b17b55; margin-bottom:16px; }
.funnel-row { display:flex; align-items:center; gap:8px; padding:12px 11px; margin:6px auto; border-radius:9px; background:#fffaf3; border:1px solid #f0ddc6; }
.funnel-row strong { flex:1; font-size:10px; font-weight:500; }
.funnel-row > span { font-size:8px; color:#b69372; }
.funnel-row svg { width:15px; height:15px; color:#d5915f; }
.funnel-row.second { width:94%; background:#f9dfc3; }
.funnel-row.third { width:88%; background:#edbf93; border-color:#e6b785; }
.funnel-row.third > span { color:#9b683e; }
.funnel-row.third svg { color:#a76532; }
.guide-budget { padding:20px 17px 17px; background:#f3eee5; }
.guide-budget > .mini-eyebrow { text-align:center; color:#a08b73; }
.budget-flow { display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0; }
.budget-flow > div { display:flex; align-items:center; flex-direction:column; min-width:82px; padding:14px 10px; border:1px solid #e6ddce; background:#fffaf3; border-radius:11px; }
.budget-flow > div > svg { color:#b4865b; margin-bottom:9px; }
.budget-flow strong { font-size:12px; font-weight:500; }
.budget-flow small { font-size:9px; color:#a5927d; margin-top:2px; }
.budget-flow > span { color:#bdaa92; }
.budget-flow > span > svg { width:15px; height:15px; }
.quote-output { padding:12px; border-radius:10px; background:#e8dfcf; text-align:center; }
.quote-output > span { display:flex; justify-content:center; align-items:center; gap:7px; font-size:12px; font-weight:500; }
.quote-output svg { width:16px; height:16px; }
.quote-output small { display:block; font-size:9px; color:#9a8872; margin-top:5px; }
.guide-process { padding:22px; background:#f2f0e9; }
.process-step { position:relative; display:flex; align-items:center; gap:13px; }
.process-step + .process-step { margin-top:23px; }
.process-step + .process-step:before { content:''; position:absolute; top:-23px; left:17px; width:1px; height:23px; background:#d9ccb9; }
.process-step b { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#fffaf1; border:1px solid #e3d6c2; color:#b0885e; font-size:11px; font-weight:500; flex:0 0 auto; }
.process-step:last-child b { background:#ebd8bb; border-color:#d8c09a; color:#92653f; }
.guide-human { padding:22px 17px 16px; background:#fff0e1; }
.support-journey { display:flex; justify-content:space-around; align-items:center; gap:8px; }
.support-journey > span { display:flex; flex-direction:column; align-items:center; gap:8px; }
.support-journey img { width:45px; height:52px; object-fit:contain; }
.support-journey i { width:49px; height:49px; display:grid; place-items:center; border-radius:50%; background:#fffaf2; border:1px solid #ead7be; color:#b9875c; }
.support-journey strong { font-size:11px; font-weight:500; }
.transfer-line { text-align:center; color:#bc9875; }
.transfer-line svg { width:30px; height:23px; margin:auto; }
.transfer-line small { display:block; font-size:8px; line-height:1.5; margin-top:5px; }
.context-note { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:20px; padding:9px; border-radius:8px; background:#fff9ee; font-size:9px; color:#9d7957; }
.context-note svg { width:13px; height:13px; }
.guide-newsletter { padding:20px 16px; background:#eef0e9; }
.preference-row { display:flex; align-items:center; gap:9px; padding:13px 10px; border:1px solid #dce1d3; border-radius:10px; background:#fcfcf7; }
.preference-icon { color:#899775; }
.preference-icon svg { width:20px; height:20px; }
.preference-row > span:nth-child(2) { flex:1; }
.preference-row strong { display:block; font-size:11px; font-weight:500; color:#697451; }
.preference-row small { display:block; font-size:8px; color:#9a9f8a; line-height:1.5; margin-top:3px; }
.preference-row b { color:#98a981; }
.preference-row b svg { width:17px; height:17px; }
.preference-row em { border:1px solid #e0e5d7; padding:3px 5px; border-radius:5px; font-size:8px; font-style:normal; color:#9aa187; }
.separate-label { display:block; text-align:center; font-size:8px; color:#9ea88f; margin:13px 0; }
body[data-variant] .drawer[data-mode='help'] .article > p { font-size:13px; line-height:1.8; color:#71675d; }
.guide-prompt { padding:14px 15px; margin-top:19px; border-left:2px solid #e8bb93; background:#faf6f0; border-radius:0 9px 9px 0; }
.guide-prompt > strong { font-size:10px; font-weight:600; color:#b0784c; }
body[data-variant] .drawer[data-mode='help'] .article .guide-prompt p { font-size:12px; line-height:1.6; color:#85705f; margin:5px 0 0; }
.article-cta-slot { flex:0 0 auto; padding:12px 22px 16px; border-top:1px solid #efe8df; background:#fffdfa; }
.article-chat { display:flex; align-items:center; gap:9px; width:100%; min-height:46px; border:0; border-radius:12px; padding:12px 15px; background:#eb572a; color:#fff; font:500 13px/1.4 'DM Sans',sans-serif; }
.article-chat > .ui-icon:last-child { margin-left:auto; width:15px; height:15px; }
.article-chat:hover { background:#d84720; }
.article-cta-slot > p { text-align:center; font-size:9px; color:#a29586; margin:7px 0 0; }
@media(max-width:340px) { .article-cta-slot { padding-left:17px; padding-right:17px; } .guide-website,.guide-automation,.guide-budget { padding-left:13px; padding-right:13px; } .business-paths span { font-size:9px; } .funnel-row { gap:5px; padding-left:8px; padding-right:8px; } .funnel-row strong { font-size:9px; } .funnel-row > span { font-size:7px; } .preference-row { padding-left:8px; padding-right:8px; gap:7px; } .preference-row em { font-size:7px; } }
/* Keep the explanations legible at phone width. */
.guide-visual .mini-eyebrow { font-size:9px; color:#967456; }
.guide-visual .visual-caption { color:#84684f; }
.browser-bar span,.proof-line,.result-site,.result-note,.workflow-step small,.process-step small,.budget-flow small,.quote-output small,.transfer-line small,.context-note,.preference-row small,.separate-label { font-size:10px; line-height:1.45; }
.browser-bar span,.proof-line,.workflow-step small,.process-step small,.budget-flow small,.quote-output small,.transfer-line small,.context-note { color:#88705a; }
.result-site,.result-note,.preference-row small,.separate-label { color:#7c896b; }
.funnel-row strong { font-size:11px; }
.funnel-row > span { font-size:9px; color:#99724f; }
.preference-row em { font-size:9px; color:#788963; }
.article-cta-slot > p { font-size:10px; color:#8f8172; }