.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:28px}
.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:.28s var(--ease);display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-2)}
.bc-cat{font-family:var(--fm);font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:16px 18px 0;color:var(--p1);display:block}
.blog-card h3{font-family:var(--fd);font-size:17px;font-weight:600;letter-spacing:-.3px;line-height:1.35;padding:8px 18px 0;color:var(--text);margin:0}
.blog-card p{font-size:13px;color:var(--text-dim);line-height:1.55;padding:8px 18px;flex:1}
.bc-meta{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--text-faint);font-family:var(--fm)}
.article-body{max-width:720px;margin:0 auto;padding:16px 0 80px}
.article-body h1{font-family:var(--fd);font-size:clamp(24px,4vw,38px);font-weight:700;letter-spacing:-1px;line-height:1.2;margin:0 0 12px}
.a-meta{display:flex;gap:14px;font-size:13px;color:var(--text-faint);font-family:var(--fm);margin-bottom:28px;flex-wrap:wrap}
.article-body h2{font-family:var(--fd);font-size:21px;font-weight:700;letter-spacing:-.4px;margin:36px 0 12px}
.article-body h3{font-family:var(--fd);font-size:16px;font-weight:600;margin:22px 0 8px}
.article-body p{font-size:15.5px;line-height:1.75;color:var(--text-dim);margin-bottom:14px}
.article-body ul,.article-body ol{padding-left:22px;margin-bottom:14px}
.article-body li{font-size:15.5px;line-height:1.75;color:var(--text-dim);margin-bottom:5px}
.article-body a{color:var(--p1);text-decoration:underline;text-underline-offset:3px}
.tool-cta-link{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:10px;background:var(--grad);color:#06121a;font-family:var(--fd);font-weight:600;font-size:13.5px;text-decoration:none;margin:6px 0 20px;cursor:pointer;transition:.2s}
.tool-cta-link:hover{transform:translateY(-1px)}
.art-callout{background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.2);border-radius:12px;padding:14px 18px;margin:18px 0}
.art-callout p{margin:0}
.art-faq{border:1px solid var(--border);border-radius:12px;margin:8px 0;overflow:hidden}
.art-faq summary{font-weight:600;font-size:14.5px;padding:14px 16px;cursor:pointer;color:var(--text);background:var(--surface)}
.art-faq p{padding:4px 16px 14px;margin:0;font-size:14.5px;background:var(--surface)}
.art-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px;margin:14px 0}
.art-tools a{display:block;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:13px;font-weight:500;color:var(--text);text-decoration:none;transition:.2s}
.art-tools a:hover{border-color:var(--p1);color:var(--p1);transform:translateY(-1px)}
.aff-section{margin-top:44px;padding-top:32px;border-top:1px solid var(--border)}
.aff-label{font-size:10.5px;font-family:var(--fm);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
.aff-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:9px;text-decoration:none;transition:.22s var(--ease)}
.aff-card:hover{border-color:var(--border-2);transform:translateX(2px)}
.aff-ico{font-size:24px;width:40px;text-align:center;flex-shrink:0}
.aff-info{flex:1}.aff-info strong{display:block;font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:1px}
.aff-info span{font-size:12px;color:var(--text-dim)}
.aff-cta{font-size:12px;font-weight:600;color:var(--p1);white-space:nowrap;flex-shrink:0}
/* ─── Cookie consent banner ───────────────────────── */
#cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:8000;padding:14px 24px;background:color-mix(in srgb,var(--bg-2) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;align-items:center;gap:16px;flex-wrap:wrap;transform:translateY(100%);transition:transform .4s var(--ease)}
#cookie-bar.show{transform:none}
#cookie-bar p{flex:1;font-size:13px;color:var(--text-dim);min-width:220px;line-height:1.5;margin:0}
#cookie-bar p a{color:var(--p1);text-decoration:underline;cursor:pointer}
#cookie-bar .cb-btns{display:flex;gap:9px;flex-shrink:0}
.cb-accept{background:var(--grad);color:#06121a;border:none;border-radius:9px;padding:8px 18px;font-size:13px;font-family:var(--fb);font-weight:600;cursor:pointer;transition:.2s var(--ease)}
.cb-accept:hover{transform:translateY(-1px)}
.cb-decline{background:transparent;color:var(--text-dim);border:1px solid var(--border);border-radius:9px;padding:8px 14px;font-size:13px;font-family:var(--fb);font-weight:500;cursor:pointer;transition:.2s}
.cb-decline:hover{border-color:var(--border-2);color:var(--text)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeUp .26s var(--ease) both}
.tool.cat-marketing .ico,.tool-head.marketing .badge{color:#ec4899}
.tab[data-cat="marketing"].active,.tab[data-cat="marketing"] .ct{color:#ec4899}
.mk-section{padding:60px 0;background:linear-gradient(135deg,rgba(236,72,153,.05),rgba(139,92,246,.04));border-top:1px solid rgba(236,72,153,.1);border-bottom:1px solid rgba(236,72,153,.1)}
.mk-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#ec4899;margin-bottom:14px}
.mk-title{font-family:var(--fd);font-size:clamp(22px,4vw,36px);font-weight:700;letter-spacing:-1px;margin-bottom:12px;line-height:1.15}
.mk-title span{background:linear-gradient(120deg,#ec4899,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-sub{font-size:15.5px;color:var(--text-dim);max-width:540px;line-height:1.65;margin-bottom:32px}
.mk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px;margin-bottom:28px}
.mk-card{display:flex;align-items:flex-start;gap:11px;padding:15px;border-radius:13px;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:.25s var(--ease)}
.mk-card:hover{border-color:rgba(236,72,153,.4);background:var(--surface-2);transform:translateY(-3px);box-shadow:0 8px 24px -8px rgba(236,72,153,.18)}
.mk-card .mico{width:36px;height:36px;border-radius:9px;background:rgba(236,72,153,.1);display:grid;place-items:center;flex-shrink:0;color:#ec4899}
.mk-card .mico svg{width:18px;height:18px}
.mk-card h4{font-family:var(--fd);font-weight:600;font-size:13px;margin-bottom:2px;line-height:1.3}
.mk-card p{font-size:11.5px;color:var(--text-dim);line-height:1.4}
.mk-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:11px;background:linear-gradient(120deg,#ec4899,#8b5cf6);color:#fff;font-family:var(--fd);font-weight:600;font-size:14px;cursor:pointer;border:none;transition:.25s var(--ease)}
.mk-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px -6px rgba(236,72,153,.4)}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:8px;margin-bottom:16px}
.pf-btn{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;text-align:left;cursor:pointer;transition:.2s var(--ease);font-family:inherit;width:100%}
.pf-btn:hover{border-color:#ec4899;background:rgba(236,72,153,.04)}
.pf-btn.active{border-color:#ec4899;border-width:2px;background:rgba(236,72,153,.06)}
.pf-btn strong{display:block;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:2px}
.pf-btn small{font-family:var(--fm);font-size:10px;color:var(--text-faint)}
.swatch-card{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--border);cursor:pointer;margin:6px 0;transition:.2s}
.swatch-card:hover{border-color:var(--p1);transform:translateX(2px)}
.swatch-card .sc-box{width:44px;height:44px;border-radius:8px;flex-shrink:0;border:1px solid rgba(0,0,0,.1)}
.swatch-card .sc-hex{font-family:var(--fm);font-size:13px;font-weight:600;color:var(--text)}
.swatch-card .sc-meta{font-size:11.5px;color:var(--text-faint);margin-top:1px}
.utm-out{background:var(--surface-2);border:1px solid var(--border-2);border-radius:10px;padding:14px;font-family:var(--fm);font-size:12.5px;word-break:break-all;line-height:1.7;margin:12px 0;min-height:48px}
.utm-param{color:#22d3ee}
.cta-pw{padding:36px 24px;background:var(--surface-2);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:16px 0;min-height:110px;border:1px solid var(--border)}
.palette-row{display:flex;gap:0;border-radius:12px;overflow:hidden;height:54px;margin:12px 0}
.palette-row span{flex:1;cursor:pointer;transition:.15s}
.palette-row span:hover{flex:2}
#og-canvas{max-width:100%;border-radius:12px;display:block;margin:0 auto;border:1px solid var(--border)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:28px}
.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:.28s var(--ease);display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-2)}
.bc-cat{font-family:var(--fm);font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:16px 18px 0;color:var(--p1);display:block}
.blog-card h3{font-family:var(--fd);font-size:17px;font-weight:600;letter-spacing:-.3px;line-height:1.35;padding:8px 18px 0;color:var(--text);margin:0}
.blog-card p{font-size:13px;color:var(--text-dim);line-height:1.55;padding:8px 18px;flex:1}
.bc-meta{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--text-faint);font-family:var(--fm)}
.article-body{max-width:720px;margin:0 auto;padding:16px 0 80px}
.article-body h1{font-family:var(--fd);font-size:clamp(24px,4vw,38px);font-weight:700;letter-spacing:-1px;line-height:1.2;margin:0 0 12px}
.a-meta{display:flex;gap:14px;font-size:13px;color:var(--text-faint);font-family:var(--fm);margin-bottom:28px;flex-wrap:wrap}
.article-body h2{font-family:var(--fd);font-size:21px;font-weight:700;letter-spacing:-.4px;margin:36px 0 12px}
.article-body h3{font-family:var(--fd);font-size:16px;font-weight:600;margin:22px 0 8px}
.article-body p{font-size:15.5px;line-height:1.75;color:var(--text-dim);margin-bottom:14px}
.article-body ul,.article-body ol{padding-left:22px;margin-bottom:14px}
.article-body li{font-size:15.5px;line-height:1.75;color:var(--text-dim);margin-bottom:5px}
.article-body a{color:var(--p1);text-decoration:underline;text-underline-offset:3px}
.tool-cta-link{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:10px;background:var(--grad);color:#06121a;font-family:var(--fd);font-weight:600;font-size:13.5px;text-decoration:none;margin:6px 0 20px;cursor:pointer;transition:.2s}
.tool-cta-link:hover{transform:translateY(-1px)}
.art-callout{background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.2);border-radius:12px;padding:14px 18px;margin:18px 0}
.art-callout p{margin:0}
.art-faq{border:1px solid var(--border);border-radius:12px;margin:8px 0;overflow:hidden}
.art-faq summary{font-weight:600;font-size:14.5px;padding:14px 16px;cursor:pointer;color:var(--text);background:var(--surface)}
.art-faq p{padding:4px 16px 14px;margin:0;font-size:14.5px;background:var(--surface)}
.art-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px;margin:14px 0}
.art-tools a{display:block;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:13px;font-weight:500;color:var(--text);text-decoration:none;transition:.2s}
.art-tools a:hover{border-color:var(--p1);color:var(--p1);transform:translateY(-1px)}
.aff-section{margin-top:44px;padding-top:32px;border-top:1px solid var(--border)}
.aff-label{font-size:10.5px;font-family:var(--fm);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
.aff-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:9px;text-decoration:none;transition:.22s var(--ease)}
.aff-card:hover{border-color:var(--border-2);transform:translateX(2px)}
.aff-ico{font-size:24px;width:40px;text-align:center;flex-shrink:0}
.aff-info{flex:1}.aff-info strong{display:block;font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:1px}
.aff-info span{font-size:12px;color:var(--text-dim)}
.aff-cta{font-size:12px;font-weight:600;color:var(--p1);white-space:nowrap;flex-shrink:0}
/* ─── Cookie consent banner ───────────────────────── */
#cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:8500;background:color-mix(in srgb,var(--bg-2) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;animation:tIn .4s var(--ease) both}
#cookie-bar p{flex:1;font-size:13.5px;color:var(--text-dim);margin:0;min-width:200px}
.cb-btns{display:flex;gap:10px;align-items:center;flex-shrink:0}
#cb-accept{height:36px;padding:0 20px;border-radius:10px;background:var(--grad);color:#06121a;font-family:var(--fb);font-weight:600;font-size:13px;border:none;cursor:pointer}
#cb-accept:hover{opacity:.88}