/* freetoolzhub — shared article/blog-post styles */
.crumbs { padding: 26px 0 14px; font-size: 14px; color: var(--ink-mute); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--ink-soft); font-weight: 600; }
.crumbs a:hover { color: var(--blue); }
.crumbs b { color: var(--ink); }
.post-cat { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
[data-theme="dark"] .post-cat { color: var(--sky); }

.article { max-width: 760px; margin: 0 auto; }
.article-head h1 { font-size: clamp(32px,5vw,50px); font-weight: 800; margin: 12px 0 22px; }
.article-meta { display: flex; align-items: center; gap: 12px; }
.article-meta .av { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; }
.article-meta strong { font-family: var(--display); display: block; font-size: 15px; }
.article-meta span { font-size: 13px; color: var(--ink-mute); }
.share-row { margin-left: auto; display: flex; gap: 8px; }
.share-row .icon-btn { width: 40px; height: 40px; }
.share-row .icon-btn svg { width: 17px; height: 17px; }

.article-hero { height: 300px; border-radius: var(--r-lg); display: grid; place-items: center; margin: 28px 0; }
.article-hero svg { width: 88px; height: 88px; opacity: .8; }

.article-body { font-size: 17.5px; line-height: 1.75; color: var(--ink-soft); }
.article-body .lead { font-size: 20px; color: var(--ink); font-weight: 500; }
.article-body h2 { font-size: 27px; color: var(--ink); margin: 38px 0 14px; }
.article-body h3 { font-size: 20px; color: var(--ink); margin: 28px 0 10px; font-family: var(--display); }
.article-body p { margin: 0 0 18px; }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(37,99,235,.3); text-underline-offset: 3px; }
[data-theme="dark"] .article-body a { color: var(--sky); }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 24px; }
.article-body li { margin-bottom: 10px; }
.article-body blockquote { margin: 24px 0; padding: 4px 22px; border-left: 3px solid var(--blue); color: var(--ink); font-style: italic; }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15.5px; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.article-body th { background: var(--glass); font-family: var(--display); color: var(--ink); }

.callout { display: flex; gap: 18px; padding: 26px; margin: 30px 0; align-items: center; }
.callout .ic { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; flex: none; }
.callout .ic svg { width: 27px; height: 27px; }
.callout strong { font-family: var(--display); font-size: 18px; color: var(--ink); display: block; }
.callout p { font-size: 15px; margin: 4px 0 14px; }

.article-body .toc { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; margin: 24px 0 30px; }
.article-body .toc strong { font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.article-body .toc ol { margin: 12px 0 0; }
.article-body .toc li { margin-bottom: 6px; }

.author { display: flex; gap: 18px; padding: 26px; margin: 40px 0 0; align-items: center; }
.author .av-lg { width: 60px; height: 60px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 24px; flex: none; }
.author strong { font-family: var(--display); font-size: 18px; color: var(--ink); }
.author p { font-size: 14.5px; color: var(--ink-soft); margin: 4px 0 0; }

.tool-section { margin-top: 50px; }
.ts-title { font-size: 26px; margin-bottom: 20px; }
.rel-posts { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.post { overflow: hidden; transition: transform .2s, box-shadow .25s; display: block; }
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post-img { height: 130px; display: grid; place-items: center; }
.post-img svg { width: 44px; height: 44px; opacity: .8; }
.post-body { padding: 18px; }
.post-body h3 { font-family: var(--display); font-size: 17px; margin: 8px 0 0; line-height: 1.25; }

.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 14.5px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: .25s; z-index: 120; }
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px){ .rel-posts { grid-template-columns: 1fr; } }

/* ===== tool landing pages ===== */
.tool-lp-head{display:flex;gap:20px;align-items:flex-start;max-width:760px;margin:0 auto 10px}
.tool-lp-head h1{font-size:clamp(28px,4.2vw,44px);font-weight:800;margin:6px 0 10px;line-height:1.1}
.tool-lp-desc{color:var(--ink-soft);font-size:17px;line-height:1.6;margin:0 0 18px;max-width:560px}
.tool-lp-cta{text-decoration:none}
@media(max-width:560px){.tool-lp-head{flex-direction:column;gap:14px}}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 30px}
.lp-step{position:relative;padding:22px 20px;border-radius:var(--r,16px);background:var(--card);border:1px solid var(--glass-brd);box-shadow:var(--shadow-sm)}
.lp-step .lp-n{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;font-family:var(--display);font-weight:800;margin-bottom:12px}
.lp-step strong{display:block;font-family:var(--display);font-size:16px;margin-bottom:6px}
.lp-step p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.55}
.lp-benefits{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 30px}
.lp-benefit{display:flex;gap:14px;padding:20px;border-radius:var(--r,16px);background:var(--card);border:1px solid var(--glass-brd);box-shadow:var(--shadow-sm)}
.lp-benefit .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}
.lp-benefit .ic svg{width:23px;height:23px}
.lp-benefit strong{display:block;font-family:var(--display);font-size:15.5px;margin-bottom:4px}
.lp-benefit p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.5}
.lp-faq{display:flex;flex-direction:column;gap:12px;max-width:760px}
.lp-faq-item{padding:18px 20px;border-radius:var(--r,16px);background:var(--card);border:1px solid var(--glass-brd)}
.lp-faq-item h3{font-family:var(--display);font-size:16px;margin:0 0 6px}
.lp-faq-item p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
@media(max-width:640px){.lp-steps,.lp-benefits{grid-template-columns:1fr}}
/* social share bar */
.share-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:760px;margin:0 auto 8px;padding:14px 0}
.share-bar .share-label{font-weight:600;font-size:14px;color:var(--ink-soft,#41526b);margin-right:2px}
.share-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--card,#fff);border:1px solid var(--glass-brd,rgba(15,27,45,.09));color:var(--ink,#0f1b2d);cursor:pointer;transition:transform .18s,background .2s,color .2s,box-shadow .2s}
.share-btn svg{width:19px;height:19px}
.share-btn:hover{transform:translateY(-3px);color:#fff;border-color:transparent;background:linear-gradient(135deg,#2563EB,#0EA5E9);box-shadow:0 8px 18px -6px rgba(37,99,235,.5)}
[data-theme="dark"] .share-btn{background:var(--card,#141d33)}