/* ============================================================
   blog-help.css  v20260907.9
   Blog post layout that follows the /help/ guide pages:
   one 900px reading column, red numbered steps, grey mockup
   containers, coloured info boxes, divider-list FAQ, numbered
   troubleshooting cards, blue CTA card, About card.
   Loads after bootstrap.min.css and style.css. Header/footer
   come from assets/inc. The .mock kit (CSS app screens)
   is included at the end so screens render without images.
   ============================================================ */

:root{--blog-ink:#1e293b;--blog-body:#334155;--blog-muted:#64748b;--blog-line:#e2e8f0;--blog-green:#2da876;--blog-green-d:#065f46;--blog-green-l:#ecfdf5;--blog-green-b:#a7f3d0;--blog-amber-d:#92400e;--blog-amber-l:#fffbeb}
/* ---- Type (same as help pages) ---- */
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:450;font-size:1rem;line-height:1.7;color:#212529;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.help-container p,.help-container li,.help-container td,.help-container th{font-weight:450}
strong,b{font-weight:700}

/* ---- Hero (inside header.bg_binary from style.css) ---- */
.bh-hero .bh-kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid #dc3545;color:#dc3545;border-radius:999px;padding:4px 14px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;background:#fff}
.bh-hero h1{font-weight:900;line-height:1.15}
.bh-hero h1 .text-danger{color:#dc3545}
.bh-hero .lead{font-size:1.15rem;font-weight:500;color:#333;max-width:820px}
.bh-hero .bh-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bh-hero .bh-meta .badge{font-weight:600;font-size:.8rem;padding:7px 10px;border:1px solid #dee2e6}
.bh-hero .bh-author{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:#212529}
.bh-hero .bh-author img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid #dee2e6}

/* ---- Column ---- */
.help-container{max-width:900px;margin:0 auto}
.help-container h2,.help-container h3,.help-container h4,.help-container h5,.help-container h6{font-weight:700;color:#212529;margin-bottom:20px}
.help-container h2.bh-h2{font-size:1.7rem;margin-top:8px;padding-top:8px}
.help-container h4{font-size:1.5rem}
.help-container h5{font-size:1.4rem}
.help-container h6{font-size:1.3rem}
.section-content p,.step-section>p,.bh-prose p{color:#333;line-height:1.8;margin-bottom:16px;font-size:1.05rem;font-weight:450}
.bh-prose ul,.bh-prose ol{color:#333;font-size:1.05rem;line-height:1.8;padding-left:1.4rem;margin-bottom:16px}
.bh-prose li{margin-bottom:6px}
.help-container code{background:#f1f3f5;border:1px solid #e9ecef;border-radius:4px;padding:1px 6px;font-size:.92em;color:#b02a37}
.help-container pre{background:#0f172a;color:#e2e8f0;border:1px solid #1e293b;border-radius:8px;padding:14px 18px;margin:0 0 20px;overflow-x:auto;font-size:.9rem;line-height:1.6}
.help-container pre code{background:transparent;border:0;color:inherit;padding:0;font-size:inherit;white-space:pre-wrap;word-break:break-all}

/* ---- Quick answer ---- */
/* ---- Quick Answer: label and icon drawn by CSS so the words never sit in the HTML.
   Tint follows page intent: default blue = how-to, .qa-warm = deadline or risk, .qa-green = checklist or plan ---- */
.quick-answer{background:#eef4ff;border:2px solid #b9cffb;border-radius:10px;padding:22px 24px 22px;margin-bottom:32px}
.quick-answer::before{content:"Quick Answer";display:inline-flex;align-items:center;min-height:30px;padding-left:40px;margin-bottom:12px;font-size:1.15rem;font-weight:800;letter-spacing:.02em;color:#0b5ed7;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5ed7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.6 2.5L16 9.5'/%3E%3C/svg%3E") no-repeat left center/30px 30px}
.quick-answer p{margin:0;color:#14213d;font-size:1.18rem;line-height:1.7;font-weight:500}
.quick-answer p strong,.quick-answer p b{color:#0b2a6f;font-weight:700}
.quick-answer a{color:#0b5ed7;font-weight:700;text-decoration:underline}
.bh-prose mark,.help-container mark{background:#ffd60a;color:#111;padding:.04em .18em;margin:0;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-weight:inherit}
.bh-prose mark code,.help-container mark code{background:rgba(255,255,255,.65);color:#8a1c25}
.bh-prose mark strong,.help-container mark strong{color:#111}
.quick-answer mark{background:transparent;color:inherit;padding:0;margin:0;box-shadow:none;font-weight:inherit}
.quick-answer.qa-warm{background:#fff8e6;border-color:#f3d17a}
.quick-answer.qa-warm::before{color:#9a4a00;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a4a00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E")}
.quick-answer.qa-warm p{color:#2b1d0e}
.quick-answer.qa-warm p strong,.quick-answer.qa-warm p b{color:#7a3a00}
.quick-answer.qa-warm a{color:#9a4a00}
.quick-answer.qa-green{background:#edf9f1;border-color:#a9dfbb}
.quick-answer.qa-green::before{color:#0f6b3a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8.5 12l2.2 2.2L15.5 9.5M8 17h8'/%3E%3C/svg%3E")}
.quick-answer.qa-green p{color:#10281a}
.quick-answer.qa-green p strong,.quick-answer.qa-green p b{color:#0b4f2a}
.quick-answer.qa-green a{color:#0f6b3a}

/* ---- Info boxes ---- */
.info-box{border-radius:8px;padding:18px 22px;margin:20px 0;display:flex;gap:14px}
.info-box.warning{background:#fff3cd;border:1px solid #ffecb5}
.info-box.warning .info-icon{color:#997404}
.info-box.warning .info-text{color:#664d03;font-weight:500}
.info-box.tip{background:#cfe2ff;border:1px solid #b6d4fe}
.info-box.tip .info-icon{color:#084298}
.info-box.tip .info-text{color:#084298;font-weight:500}
.info-box.note{background:#e2e3e5;border:1px solid #d3d6d8}
.info-box.note .info-icon{color:#41464b}
.info-box.note .info-text{color:#41464b;font-weight:500}
.info-box.danger{background:#f8d7da;border:1px solid #f5c2c7}
.info-box.danger .info-icon{color:#842029}
.info-box.danger .info-text{color:#842029;font-weight:500}
.info-box.success{background:#d1e7dd;border:1px solid #a3cfbb}
.info-box.success .info-icon{color:#0f5132}
.info-box.success .info-text{color:#0f5132;font-weight:500}
.info-icon{flex-shrink:0;width:22px;height:22px;margin-top:2px}
.info-text{font-size:1.05rem;line-height:1.7;font-weight:500}
.info-text a{color:inherit;font-weight:700}

/* ---- Who is this for (3 cards) ---- */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 32px}
.who-card{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:18px 18px 16px;text-decoration:none;color:#212529;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s}
.who-card:hover{border-color:#dc3545;box-shadow:0 6px 18px rgba(0,0,0,.08);color:#212529}
.who-card .who-ic{width:38px;height:38px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #dee2e6;color:#dc3545}
.who-card .who-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.who-card .who-h{font-weight:700;font-size:1.02rem;line-height:1.35}
.who-card .who-p{font-size:.95rem;color:#495057;line-height:1.6}
.who-card .who-go{margin-top:auto;font-size:.88rem;font-weight:700;color:#0d6efd}

/* ---- At a glance strip ---- */
.glance-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 28px}
.glance-strip div{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:12px 14px}
.glance-strip span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6c757d}
.glance-strip b{font-size:1rem;font-weight:700;color:#212529}

/* ---- TOC ---- */
.toc-box{background:#f8f9fa;border:2px solid #dee2e6;border-radius:8px;padding:24px;margin-bottom:32px}
.toc-box h2,.toc-box .toc-title{font-size:1.1rem;font-weight:700;margin-bottom:16px;color:#212529}
.toc-list{list-style:none;padding:0;margin:0;columns:2}
.toc-list li{margin-bottom:10px;font-weight:500;break-inside:avoid}
.toc-list a{color:#0d6efd;text-decoration:none;font-size:1rem;font-weight:500}
.toc-list a:hover{text-decoration:underline}

/* ---- Before you start (checklist card) ---- */
.ready-card{background:#fff;border:2px solid #dee2e6;border-radius:8px;padding:22px 24px;margin:0 0 36px}
.ready-card h2,.ready-card .card-h{font-size:1.1rem;font-weight:700;margin-bottom:14px}
.ready-card ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.ready-card li{display:flex;gap:10px;font-size:.98rem;line-height:1.55;color:#333}
.ready-card li::before{content:"\2713";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#198754;color:#fff;font-weight:700;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.ready-card li b{display:block;color:#212529}

/* ---- Steps (help style) ---- */
.step-section{margin-bottom:48px}
.step-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.step-number{width:48px;height:48px;background:#dc3545;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800;flex-shrink:0}
.step-title{font-size:1.35rem;font-weight:700;color:#212529;margin:0}
.step-subtitle{color:#495057;font-size:1rem;margin-top:4px;font-weight:500}
.step-content{padding-left:64px}
.step-content p{color:#333;line-height:1.8;margin-bottom:16px;font-size:1.05rem;font-weight:450}
.step-content ul,.step-content ol{color:#333;font-size:1.05rem;line-height:1.8}

/* ---- Mockup / screenshot container ---- */
.mockup-container{background:#e9ecef;border-radius:8px;padding:20px;margin:24px 0}
.mockup-label{font-size:.85rem;color:#495057;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
.mockup-label span{text-transform:none;letter-spacing:0;font-weight:500;color:#6c757d}
.mockup-container img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,.12);background:#fff}
.mockup-container .shot-link{display:block;cursor:zoom-in}
.mockup-caption .shot-open{color:#6c757d;font-size:.88rem}
.mockup-container .mock{border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.mockup-caption{font-size:.92rem;color:#495057;margin-top:12px;font-weight:500}
.mockup-caption b{color:#212529}

/* ---- Tables ---- */
.help-container .table{font-size:.98rem}
.help-container .table th{background:#f8f9fa;font-weight:700}
.help-container .table td,.help-container .table th{vertical-align:top;padding:12px 14px}
.bh-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap}
.bh-pill.ok{background:#d1e7dd;color:#0f5132}
.bh-pill.warn{background:#fff3cd;color:#664d03}
.bh-pill.no{background:#f8d7da;color:#842029}

/* ---- Numbered option / feature cards (bulk route etc.) ---- */
.opt-list{list-style:none;padding:0;margin:0 0 20px;counter-reset:opt}
.opt-list li{position:relative;padding:14px 16px 14px 56px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;margin-bottom:10px;font-size:1.02rem;line-height:1.7;color:#333}
.opt-list li::before{counter-increment:opt;content:counter(opt);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:#dc3545;color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.opt-list li b{display:block;color:#212529;margin-bottom:2px}

/* ---- Verify checklist ---- */
.verify-card{background:#d1e7dd;border:2px solid #a3cfbb;border-radius:8px;padding:22px 24px;margin:0 0 24px}
.verify-card h3,.verify-card .verify-h{font-size:1.1rem;font-weight:700;color:#0f5132;margin-bottom:12px}
.verify-card ul{list-style:none;margin:0;padding:0}
.verify-card li{display:flex;gap:10px;color:#0f5132;font-size:1.02rem;line-height:1.6;margin-bottom:8px;font-weight:500}
.verify-card li::before{content:"\2713";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#198754;color:#fff;font-weight:700;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;margin-top:3px}

/* ---- Troubleshooting cards ---- */
.fix-card{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:18px 20px;margin-bottom:14px}
.fix-card .fix-h{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:700;color:#212529;margin-bottom:8px}
.fix-card .fix-h .badge{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
.fix-card p{margin:0;color:#333;font-size:1.05rem;line-height:1.8}

/* ---- FAQ (divider list, all visible) ---- */
.faq-item{border-bottom:1px solid #dee2e6;padding:24px 0}
.faq-item:first-of-type{padding-top:8px}
.faq-item:last-child{border-bottom:none}
.faq-question{font-weight:700;color:#212529;margin-bottom:10px;font-size:1.15rem}
.faq-answer{color:#333;font-size:1.05rem;line-height:1.8;font-weight:450}

/* ---- CTA card ---- */
.cta-card{background:linear-gradient(135deg,#0066cc 0%,#0050a0 100%);border:none;border-radius:10px;padding:34px 28px;text-align:center;margin:40px 0}
.cta-card .cta-title{color:#fff;font-size:1.5rem;font-weight:700;margin-bottom:10px}
.cta-card p{color:rgba(255,255,255,.9);font-size:1.1rem;font-weight:500;margin:0 auto 22px;max-width:720px}
.cta-card .btn-light{font-weight:700}
.cta-card .btn-outline-light{font-weight:600}
.cta-card .cta-fine{color:rgba(255,255,255,.75);font-size:.85rem;margin:14px 0 0;font-weight:500}

/* ---- About / sources card ---- */
.about-card{background:#f8f9fa;border:2px solid #dee2e6;border-radius:8px;padding:22px 24px;margin:0 0 32px}
.about-card p{color:#333;font-size:1.02rem;line-height:1.75;margin-bottom:10px}
.about-card p:last-child{margin-bottom:0}
.about-card .about-h{font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.about-card a{color:#dc3545;font-weight:600}

/* ---- Related posts ---- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 20px}
.related-grid a{display:block;background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:16px 18px;text-decoration:none;color:#212529;transition:border-color .15s,box-shadow .15s}
.related-grid a:hover{border-color:#dc3545;box-shadow:0 6px 18px rgba(0,0,0,.08);color:#212529}
.related-grid .rp-cat{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#dc3545;margin-bottom:6px}
.related-grid .rp-title{font-weight:700;font-size:1rem;line-height:1.4}
.related-grid .rp-meta{display:block;font-size:.85rem;color:#6c757d;margin-top:8px}

/* ---- Responsive ---- */
@media(max-width:991.98px){.who-grid,.related-grid{grid-template-columns:1fr 1fr}.glance-strip{grid-template-columns:1fr 1fr}}
@media(max-width:767.98px){.toc-list{columns:1}.step-content{padding-left:0;margin-top:16px}.who-grid,.related-grid{grid-template-columns:1fr}.ready-card ul{grid-template-columns:1fr}.mockup-container{padding:12px}}
@media(max-width:575.98px){.glance-strip{grid-template-columns:1fr 1fr}.cta-card{padding:26px 18px}}


/* ---- Content blocks shared with the guide posts (so post scripts port 1:1) ---- */
.help-container .table-scroll{overflow-x:auto;margin:0 0 24px}
.help-container .blog-table{width:100%;border-collapse:collapse;font-size:.98rem;background:#fff}
.help-container .blog-table th,.help-container .blog-table td{border:1px solid #dee2e6;padding:12px 14px;vertical-align:top;text-align:left}
.help-container .blog-table th{background:#f8f9fa;font-weight:700}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap}
.pill-ok{background:#d1e7dd;color:#0f5132}
.pill-warn{background:#fff3cd;color:#664d03}
.pill-no{background:#f8d7da;color:#842029}
.callout{border-radius:8px;padding:18px 22px;margin:20px 0;border:1px solid #d3d6d8;background:#e2e3e5}
.callout .callout-title{font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;color:#41464b}
.callout p{margin:0;font-size:1.02rem;line-height:1.7;color:#41464b;font-weight:500}
.callout.callout-tip{background:#cfe2ff;border-color:#b6d4fe}
.callout.callout-tip .callout-title,.callout.callout-tip p{color:#084298}
.callout.callout-info{background:#fff3cd;border-color:#ffecb5}
.callout.callout-info .callout-title,.callout.callout-info p{color:#664d03}
.callout.callout-warn{background:#f8d7da;border-color:#f5c2c7}
.callout.callout-warn .callout-title,.callout.callout-warn p{color:#842029}
p.expect{display:flex;gap:12px;background:#cfe2ff;border:1px solid #b6d4fe;border-radius:8px;padding:14px 18px;margin:16px 0;color:#084298;font-size:1rem;line-height:1.65;font-weight:500}
p.expect .expect-k{flex-shrink:0;font-weight:800;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.blog-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 24px}
.bcard{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:16px 18px;font-size:.98rem;line-height:1.65;color:#333}
.bcard .bcard-title{font-weight:700;color:#212529;margin-bottom:6px;font-size:1.02rem}
.bcard.is-blue{background:#cfe2ff;border-color:#b6d4fe}
.bcard.is-green{background:#d1e7dd;border-color:#a3cfbb}
.bcard.is-amber{background:#fff3cd;border-color:#ffecb5}
.step-list{list-style:none;padding:0;margin:0 0 20px;counter-reset:opt}
.step-list li{position:relative;padding:14px 16px 14px 56px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;margin-bottom:10px;font-size:1.02rem;line-height:1.7;color:#333}
.step-list li::before{counter-increment:opt;content:counter(opt);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:#dc3545;color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.step-list li .step-title{display:block;font-size:1.02rem;color:#212529;margin-bottom:2px}
.terms-card{background:#fff;border:2px solid #dee2e6;border-radius:8px;padding:22px 24px;margin:0 0 36px}
.terms-card h2,.terms-card .card-h{font-size:1.1rem;font-weight:700;margin-bottom:14px}
.terms-card dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:0}
.terms-card dt{font-weight:700;color:#212529;font-size:.98rem}
.terms-card dd{margin:0;color:#495057;font-size:.95rem;line-height:1.6}
.help-container .lead-q{font-size:1.05rem;font-weight:600;color:#212529;margin:0 0 14px}
p.escalate{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:14px 18px;font-size:1rem;color:#333;margin:18px 0 0}
@media(max-width:767.98px){.blog-cards,.terms-card dl{grid-template-columns:1fr}}


/* ---- Fixes after first render ---- */
.help-container h2.bh-h2{margin-top:44px}
.mockup-caption b{margin-right:8px}
.bh-prose .mock p,.help-container .mock p{font-size:inherit;line-height:1.35;margin:0;color:inherit}
.bh-prose .mock p.mk-note,.help-container .mock p.mk-note{font-size:1.05cqw;color:#6b7280;margin:.8cqw 0 0;line-height:1.45}
.bh-prose .mock ul,.bh-prose .mock ol{font-size:inherit;line-height:inherit;padding:0;margin:0}

/* ============================================================
   CSS app screens (.mock kit), same as blog-guide.css
   ============================================================ */
.mock{container-type:inline-size;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#f3f4f6;color:#1f2937;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:1.25cqw;line-height:1.35;text-align:left}
.mock>*{font-size:1.25cqw}
.mock *{box-sizing:border-box}
.mock p{margin:0}
/* top bar (dark app header) */
.mk-top{position:absolute;left:0;right:0;top:0;height:4cqw;background:#0f172a;color:#fff;display:flex;align-items:center;gap:1.4cqw;padding:0 1.6cqw;font-size:1.2cqw}
.mk-top .mk-brand{font-weight:700;font-size:1.3cqw;letter-spacing:.01em}
.mk-top .mk-search{margin-left:2cqw;flex:1;max-width:36cqw;height:2.6cqw;border-radius:.4cqw;background:rgba(255,255,255,.12);color:#cbd5e1;display:flex;align-items:center;padding:0 1cqw;font-size:1.1cqw}
.mk-top .mk-user{margin-left:auto;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#2563eb;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05cqw}
/* left nav */
.mk-side{position:absolute;left:0;top:4cqw;bottom:0;width:19cqw;background:#fff;border-right:1px solid #e5e7eb;padding:1.2cqw 0}
.mk-side div{padding:.8cqw 1.6cqw;font-size:1.15cqw;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-side .mk-group{font-size:.95cqw;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9ca3af;padding-top:1.4cqw}
.mk-side .on{background:#eff6ff;color:#1d4ed8;font-weight:600}
.mk-side .sub{padding-left:3cqw}
/* main pane */
.mk-main{position:absolute;left:19cqw;right:0;top:4cqw;bottom:0;padding:2.2cqw 2.6cqw;overflow:hidden}
.mk-main.full{left:0}
.mk-crumb{font-size:1.05cqw;color:#6b7280;margin-bottom:1cqw}
.mk-h1{font-size:2.1cqw;font-weight:700;margin:0 0 .5cqw;color:#111827}
.mk-sub{color:#6b7280;font-size:1.15cqw;margin-bottom:1.8cqw}
.mk-h2{font-size:1.45cqw;font-weight:700;margin:0 0 .8cqw;color:#111827}
.mk-row{display:flex;align-items:center;gap:1cqw;flex-wrap:wrap}
.mk-btn{display:inline-flex;align-items:center;gap:.6cqw;padding:.75cqw 1.5cqw;border-radius:.4cqw;background:#2563eb;color:#fff;font-weight:600;font-size:1.15cqw;white-space:nowrap}
.mk-btn.ghost{background:#fff;color:#1f2937;border:1px solid #d1d5db}
.mk-btn.link{background:transparent;color:#1d4ed8;padding-left:0;padding-right:0}
.mk-card{background:#fff;border:1px solid #e5e7eb;border-radius:.7cqw;padding:1.8cqw 2cqw}
.mk-card+.mk-card{margin-top:1.2cqw}
.mk-table{width:100%;border-collapse:collapse;background:#fff;font-size:1.1cqw;border:1px solid #e5e7eb}
.mk-table th{background:#f9fafb;text-align:left;font-weight:600;color:#374151;padding:.9cqw 1.2cqw;border-bottom:1px solid #e5e7eb;white-space:nowrap}
.mk-table td{padding:.9cqw 1.2cqw;border-bottom:1px solid #f3f4f6;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-table tr.sel td{background:#eff6ff}
.mk-a{color:#1d4ed8}
.mk-pill{display:inline-flex;align-items:center;gap:.5cqw;padding:.25cqw .9cqw;border-radius:99cqw;font-size:1cqw;font-weight:600;background:#f3f4f6;color:#374151}
.mk-pill i{width:.8cqw;height:.8cqw;border-radius:50%;background:#9ca3af;display:inline-block}
.mk-pill.ok{background:#ecfdf5;color:#065f46}.mk-pill.ok i{background:#10b981}
.mk-pill.run{background:#eff6ff;color:#1e40af}.mk-pill.run i{background:#3b82f6}
.mk-pill.warn{background:#fffbeb;color:#92400e}.mk-pill.warn i{background:#f59e0b}
.mk-pill.bad{background:#fef2f2;color:#b91c1c}.mk-pill.bad i{background:#ef4444}
.mk-radio,.mk-check{display:inline-block;width:1.5cqw;height:1.5cqw;border:.15cqw solid #9ca3af;background:#fff;vertical-align:middle;margin-right:.9cqw;flex-shrink:0}
.mk-radio{border-radius:50%}.mk-check{border-radius:.3cqw}
.mk-radio.on{border-color:#2563eb;box-shadow:inset 0 0 0 .32cqw #fff,inset 0 0 0 1cqw #2563eb}
.mk-check.on{background:#2563eb;border-color:#2563eb;position:relative}
.mk-check.on::after{content:"";position:absolute;left:.42cqw;top:.12cqw;width:.45cqw;height:.85cqw;border:solid #fff;border-width:0 .2cqw .2cqw 0;transform:rotate(45deg)}
.mk-opt{display:flex;align-items:flex-start;gap:.4cqw;padding:1.2cqw 1.4cqw;border:1px solid #e5e7eb;border-radius:.6cqw;background:#fff;margin-bottom:1cqw}
.mk-opt.on{border-color:#2563eb;background:#eff6ff}
.mk-opt b{display:block;font-size:1.2cqw;color:#111827}
.mk-opt span{font-size:1.05cqw;color:#6b7280}
.mk-label{font-size:1.05cqw;color:#374151;font-weight:600;margin:1cqw 0 .4cqw}
.mk-input{height:3cqw;border:1px solid #d1d5db;border-radius:.4cqw;background:#fff;padding:0 1cqw;display:flex;align-items:center;font-size:1.1cqw;color:#1f2937;overflow:hidden;white-space:nowrap}
.mk-input.ph{color:#9ca3af}
.mk-code{font-family:Consolas,"Courier New",monospace;font-size:1.02cqw;background:#0f172a;color:#e2e8f0;border-radius:.5cqw;padding:1.2cqw 1.4cqw;white-space:pre-wrap;word-break:break-all;line-height:1.5}
.mk-steps{position:absolute;left:0;top:0;bottom:0;width:22cqw;background:#fff;border-right:1px solid #e5e7eb;padding:2.4cqw 1.8cqw}
.mk-steps div{display:flex;align-items:center;gap:1cqw;padding:.9cqw 0;font-size:1.15cqw;color:#6b7280}
.mk-steps div b{width:2.2cqw;height:2.2cqw;border-radius:50%;border:.15cqw solid #d1d5db;display:inline-flex;align-items:center;justify-content:center;font-size:1cqw;color:#6b7280;flex-shrink:0}
.mk-steps div.done b{background:#10b981;border-color:#10b981;color:#fff}
.mk-steps div.on{color:#111827;font-weight:600}.mk-steps div.on b{border-color:#2563eb;color:#2563eb}
.mk-wiz{position:absolute;left:22cqw;right:0;top:0;bottom:0;padding:2.6cqw 3cqw}
.mk-foot{position:absolute;left:22cqw;right:0;bottom:0;height:5.2cqw;border-top:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;gap:1cqw;padding:0 3cqw}
.mk-overlay{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.mk-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56cqw;background:#fff;border-radius:.8cqw;box-shadow:0 2cqw 6cqw rgba(0,0,0,.35);padding:2.4cqw 2.6cqw}
.mk-dialog .mk-h2{font-size:1.7cqw}
.mk-hl{outline:.35cqw solid #e11f26;outline-offset:.35cqw;border-radius:.4cqw}
.mk-note{font-size:1.05cqw;color:#6b7280;margin-top:1cqw}
/* Windows explorer style window */
.mk-win{position:absolute;inset:0;background:#fff}
.mk-win .mk-title{height:3.4cqw;display:flex;align-items:center;gap:1cqw;padding:0 1.4cqw;border-bottom:1px solid #e5e7eb;font-size:1.15cqw;font-weight:600}
.mk-win .mk-addr{height:3.6cqw;display:flex;align-items:center;gap:1cqw;padding:0 1.4cqw;border-bottom:1px solid #e5e7eb;font-size:1.1cqw;color:#374151}
.mk-win .mk-addr span{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:.3cqw;padding:.5cqw 1cqw;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-win .mk-tree{position:absolute;left:0;top:7cqw;bottom:0;width:22cqw;border-right:1px solid #e5e7eb;padding:1cqw 0}
.mk-win .mk-tree div{padding:.6cqw 1.6cqw;font-size:1.1cqw;color:#374151;white-space:nowrap}
.mk-win .mk-tree .on{background:#e5efff;color:#1d4ed8}
.mk-files{position:absolute;left:22cqw;right:0;top:7cqw;bottom:0;padding:1cqw 1.6cqw;overflow:hidden}
.mk-files table{width:100%;border-collapse:collapse;font-size:1.1cqw}
.mk-files th{text-align:left;font-weight:400;color:#6b7280;padding:.6cqw .8cqw;border-bottom:1px solid #e5e7eb}
.mk-files td{padding:.7cqw .8cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1f2937}
.mk-files tr.sel td{background:#e5efff}
.mk-ico{display:inline-block;width:1.6cqw;height:1.3cqw;border-radius:.2cqw;background:#fcd34d;vertical-align:-.2cqw;margin-right:.9cqw}
.mk-ico.pst{background:#1d4ed8}.mk-ico.xml{background:#f97316}.mk-ico.zip{background:#a16207}.mk-ico.eml{background:#94a3b8}.mk-ico.csv{background:#16a34a}.mk-ico.html{background:#dc2626}
.mk-status{position:absolute;left:22cqw;right:0;bottom:0;height:2.8cqw;border-top:1px solid #e5e7eb;background:#fafafa;font-size:1cqw;color:#6b7280;display:flex;align-items:center;padding:0 1.6cqw}
/* ---- Flow map diagram (sources -> exports -> converter -> destinations) ---- */
.flowmap{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch;margin:0 0 10px}
@media(max-width:767.98px){.flowmap{grid-template-columns:1fr}.flowmap .fm-arrow{transform:rotate(90deg);justify-self:center}}
.flowmap .fm-col{background:#fff;border:1px solid var(--blog-line);border-radius:14px;padding:16px 16px 10px}
.flowmap .fm-h{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blog-green-d);margin-bottom:10px}
.flowmap .fm-col.is-mid{background:var(--blog-green-l);border-color:var(--blog-green-b)}
.flowmap .fm-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.93rem;color:var(--blog-ink);border-top:1px solid #f1f5f9}
.flowmap .fm-item:first-of-type{border-top:0}
.flowmap .fm-item i{width:8px;height:8px;border-radius:50%;background:var(--blog-green);display:inline-block;flex-shrink:0}
.flowmap .fm-item.dim{color:var(--blog-muted)}.flowmap .fm-item.dim i{background:#cbd5e1}
.flowmap .fm-arrow{align-self:center;color:#94a3b8;font-size:1.6rem;line-height:1}
.flowmap .fm-tag{display:inline-block;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:999px;background:#f1f5f9;color:var(--blog-body);margin-left:auto}
.flowmap .fm-tag.ok{background:var(--blog-green-l);color:var(--blog-green-d)}
.flowmap .fm-tag.warn{background:var(--blog-amber-l);color:var(--blog-amber-d)}
/* spreadsheet-style mock */
.mk-sheet{position:absolute;inset:0;background:#fff}
.mk-sheet .mk-ribbon{height:4cqw;background:#217346;color:#fff;display:flex;align-items:center;gap:1.4cqw;padding:0 1.6cqw;font-size:1.15cqw;font-weight:600}
.mk-sheet .mk-fx{height:2.8cqw;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:1cqw;padding:0 1.2cqw;font-size:1.05cqw;color:#374151}
.mk-sheet .mk-fx span{border:1px solid #d1d5db;padding:.3cqw .8cqw;border-radius:.2cqw;min-width:5cqw;text-align:center}
.mk-sheet table{border-collapse:collapse;width:100%;font-size:1.05cqw;table-layout:fixed}
.mk-sheet th{background:#f3f4f6;color:#6b7280;font-weight:400;border:1px solid #e5e7eb;padding:.5cqw;text-align:center;width:2.6cqw}
.mk-sheet thead th.h{width:auto;text-align:left;font-weight:600;color:#111827;background:#e8f5ee}
.mk-sheet td{border:1px solid #e5e7eb;padding:.55cqw .8cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1f2937}
.mk-sheet td.c{text-align:center}
.mk-sheet td.ok{background:#ecfdf5;color:#065f46;font-weight:600}.mk-sheet td.run{background:#eff6ff;color:#1e40af;font-weight:600}.mk-sheet td.todo{background:#fffbeb;color:#92400e;font-weight:600}.mk-sheet td.bad{background:#fef2f2;color:#b91c1c;font-weight:600}
.mock.short{aspect-ratio:16/9}
.cta-card .cta-fine a{color:#fff;text-decoration:underline}
.help-container .flowmap .fm-tag{white-space:nowrap}
.help-container .flowmap .fm-item{font-size:.88rem}
p.expect>span:last-child{min-width:0;overflow-wrap:anywhere}

/* ---- Mobile UX pass (2026-09-07) ---- */
@media(max-width:767.98px){
.bh-meta .badge{white-space:normal;text-align:left;line-height:1.35}
.bh-hero .container.pt-2{padding-bottom:28px!important}
.bh-hero h1.display-5{font-size:1.75rem;line-height:1.25}
.bh-hero .lead{font-size:1.02rem}
.step-header{flex-direction:row;align-items:center;gap:12px;margin-bottom:14px}
.step-number{width:36px;height:36px;font-size:1rem}
.step-title{font-size:1.2rem;line-height:1.3}
.step-content{margin-top:0}
p.expect{flex-direction:column;gap:4px;padding:12px 14px}
p.expect .expect-k{margin-top:0}
.fix-card .fix-h{align-items:flex-start}
.fix-card .fix-h .badge{margin-top:2px}
.mockup-label{flex-wrap:wrap;gap:4px 12px;font-size:.78rem}
.mockup-label span{white-space:nowrap}
.mock-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:6px;scrollbar-width:thin}
.mock-scroll .mock{min-width:760px}
.mock-scroll img{min-width:760px}
.swipe-hint{display:block;font-size:.78rem;color:#6c757d;margin:0 0 8px;font-weight:500}
.swipe-hint::before{content:"\2194\00a0"}
.help-container .table-scroll{scrollbar-width:thin}
.help-container .table-scroll .blog-table{min-width:640px}
.help-container .table-scroll::before{content:"\2194\00a0Swipe sideways to see the whole table";display:block;font-size:.78rem;color:#6c757d;margin-bottom:6px;font-weight:500}
.quick-answer{padding:16px 16px 16px}.quick-answer p{font-size:1.08rem}.quick-answer::before{font-size:1.05rem;min-height:26px;padding-left:34px;background-size:26px 26px}
.toc-box,.ready-card,.terms-card,.verify-card,.about-card{padding:18px 16px}
.fix-card{padding:16px 16px}
.cta-card .btn-lg{width:100%;max-width:320px}
.faq-question{font-size:1.05rem}
.help-container h2.bh-h2{font-size:1.45rem;margin-top:36px}
.mk-step-hd,.callout{padding:14px 16px}
}
@media(min-width:768px){.swipe-hint{display:none}}
/* ---- Two-line H1: keyword headline + subheading inside the same h1 ---- */
.bh-hero h1.display-5{font-size:clamp(1.8rem,.9rem + 1.6vw,2.35rem);letter-spacing:-.01em;line-height:1.12}
.bh-hero .row>.col-lg-10{flex:0 0 100%;max-width:100%}
.bh-hero h1 .bh-h1sub{display:block;font-size:.62em;font-weight:600;color:#343a40;line-height:1.3;margin-top:6px;letter-spacing:0;max-width:820px}
.bh-hero h1.display-5.mb-3{margin-bottom:1.35rem!important}
.bh-hero .lead{margin-top:0}
@media(max-width:767.98px){.bh-hero h1.display-5{font-size:1.7rem}.bh-hero h1 .bh-h1sub{font-size:.7em;margin-top:5px}}
.cta-card.cta-service{background:linear-gradient(135deg,#146c43 0%,#0f5132 100%)}
.cta-card .cta-fine b{color:#fff}