/* MetaSeoTool - unified with the MetaCalculator design language (same brand family) */
:root {
  --blue: #1e56d8;            /* = MetaCalculator primary */
  --blue-dark: #153fa3;       /* = MetaCalculator primary-dark */
  --primary-light: #e8effc;   /* = MetaCalculator primary-light */
  --accent: #0ea5e9;          /* = MetaCalculator accent */
  --ink: #1e293b;             /* = MetaCalculator text */
  --muted: #64748b;           /* = MetaCalculator muted */
  --bg: #f4f6fb;              /* = MetaCalculator page background */
  --soft: #eef3fb;
  --border: #e2e8f0;          /* = MetaCalculator border */
  --card: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15,23,42,.08),0 4px 14px rgba(15,23,42,.06);
  --green: #188038;
  --red: #c5221f;
  --amber-bg: #fef7e0;
  --amber-border: #f0c75e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.6;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: flex-start; gap: 64px; height: 56px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 33px; height: 33px; display: inline-flex; flex: none; }
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-text { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
.logo-text em { font-style: normal; color: var(--blue); }
.logo-text { display: inline-flex; flex-direction: column; line-height: 1.15; }
.logo-sub { font-size: 11px; font-weight: 600; color: #6b7280; letter-spacing: .2px; }
.main-nav { display: flex; gap: 4px; }
.main-nav a { text-decoration: none; color: var(--ink); padding: 7px 12px; border-radius: 8px; font-weight: 600; font-size: 15px; }
.main-nav a:hover { background: var(--primary-light); text-decoration: none; }
.main-nav a.active { background: var(--blue); color: #fff; }
.nav-toggle { display: none; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 20px; padding: 6px 12px; cursor: pointer; color: var(--ink); }

/* ---------- hero (homepage) : bright blue theme ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  padding:16px 20px 12px;text-align:center;
  margin:20px auto;max-width:1200px;border-radius:20px;
  background:
    linear-gradient(180deg,rgba(6,40,28,.5),rgba(6,40,28,.25) 50%,rgba(6,40,28,.5)),
    url('../images/hero-bg-hd.png') center/cover no-repeat,
    linear-gradient(120deg,#0a1740 0%,#1e3fae 45%,#1e56d8 70%,#0e7490 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000 25%,transparent 85%);
  mask-image:linear-gradient(180deg,#000 25%,transparent 85%);
}
.hero-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;animation:orbDrift 14s ease-in-out infinite}
.hero-orb.o1{width:340px;height:340px;left:-90px;top:-70px;background:#7c3aed}
.hero-orb.o2{width:300px;height:300px;right:-70px;bottom:-90px;background:#0ea5e9;animation-delay:-7s}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}
.hero-inner{position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  padding:8px 18px;border-radius:999px;margin-bottom:18px;backdrop-filter:blur(6px)}
.hero h1{font-size:2.7rem;margin-bottom:14px;letter-spacing:-1px;font-weight:800;line-height:1.15;color:#fff}
.hero h1 .hl{background:linear-gradient(90deg,#ffd166,#ff9f6e,#f472b6,#a78bfa,#ffd166);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hlShine 6s linear infinite}
@keyframes hlShine{to{background-position:220% center}}
@media(prefers-reduced-motion:reduce){.hero h1 .hl{animation:none}}
.hero p{font-size:17px;opacity:.94;max-width:660px;margin:0 auto;color:#e6edff}
/* hero search */
.hero-search{position:relative;max-width:560px;margin:26px auto 0;
  box-shadow:0 0 0 6px rgba(255,255,255,.12),0 12px 34px rgba(2,8,30,.35);border-radius:999px}
.hero-search .s-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);
  font-size:1.15rem;opacity:.7;pointer-events:none}
#tool-search{width:100%;padding:17px 22px 17px 54px;font-size:1.02rem;border:0;
  border-radius:999px;box-shadow:0 12px 34px rgba(2,8,30,.35);color:var(--ink);background:#fff}
#tool-search:focus{outline:3px solid rgba(255,209,102,.75)}
#no-results { display: none; text-align: center; color: var(--muted); padding: 30px 0; }
/* sister-site promo */
.hero-promo{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:.92rem;
  background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.45);
  padding:10px 20px;border-radius:999px;color:#eaf1ff;flex-wrap:wrap;justify-content:center}
.hero-promo a{color:#ffd166;font-weight:800;text-decoration:none}
.hero-promo a:hover{text-decoration:underline}
/* hero stats */
.hero .stats{display:flex;gap:16px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.hero .stats div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  padding:12px 26px;border-radius:14px;font-weight:800;font-size:1.25rem;backdrop-filter:blur(6px)}
.hero .stats small{display:block;font-weight:400;opacity:.85;font-size:.78rem}
/* browse-by-category pills in the hero (like metacalculator.org) */
.hero .stats .cats{background:none;border:none;box-shadow:none;padding:0;backdrop-filter:none}
.hero .stats .cats small{margin-bottom:10px}
.hero .stats .cats .cat-names{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hero .stats .cats .cat-names a{display:inline-block;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  color:#fff;text-decoration:none;font-size:.85rem;font-weight:500;letter-spacing:.02em;
  transition:background .2s,transform .2s}
.hero .stats .cats .cat-names a:hover{background:rgba(255,255,255,.30);transform:translateY(-1px)}
/* anchor offset so category sections don't hide under the sticky header */
.section-head{scroll-margin-top:76px}
/* floating glyphs + wave divider */
.hero-deco{position:absolute;font-weight:800;color:rgba(255,255,255,.14);
  pointer-events:none;z-index:0;animation:decoFloat 9s ease-in-out infinite;line-height:1}
@keyframes decoFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-20px) rotate(8deg)}}
.hero-wave{display:block;width:100%;height:64px;position:absolute;left:0;bottom:-1px;z-index:0}
@media (prefers-reduced-motion:reduce){.hero-orb,.hero-deco{animation:none}}
@media(max-width:720px){
  .hero{padding:24px 0 20px}
  .hero h1{font-size:1.9rem}
  .hero-search{margin-left:6px;margin-right:6px}
  #tool-search{padding:14px 18px 14px 48px;font-size:.95rem}
  .hero-promo{font-size:.82rem;margin-left:6px;margin-right:6px}
  .hero .stats div{padding:10px 18px;font-size:1.05rem}
  .hero-deco{font-size:1.9rem !important;opacity:.7}
  .hero-deco.hide-m{display:none}
}

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; margin: 36px 0; align-items: start; }
.section-head { text-align: center; margin: 42px 0 6px; }
.section-head h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.3px; }
.section-head h2::after { content: ""; display: block; width: 76px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--accent)); margin: 10px auto 0; }
.section-head h2 .hl { background: linear-gradient(135deg, var(--blue), var(--accent)); color: #fff;
  padding: 3px 12px; border-radius: 8px; font-size: 21px; vertical-align: middle; }
.section-desc { text-align: center; color: var(--muted); max-width: 740px; margin: 0 auto 28px; }

/* ---------- tool cards ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; }
.tool-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 16px; text-align: center; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(30,86,216,.14); text-decoration: none; }
.tool-icon { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 14px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; color: var(--blue); }
.tool-icon svg { width: 28px; height: 28px; }
.tool-card h3 { font-size: 16px; margin-bottom: 6px; }
.tool-card p { font-size: 13px; color: var(--muted); }
.badge { display: inline-block; font-size: 11px; background: var(--amber-bg); color: #8a5a00; border: 1px solid var(--amber-border); border-radius: 20px; padding: 2px 10px; margin-top: 8px; font-weight: 700; }

/* ---------- sidebar ---------- */
.widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.widget h3 { font-size: 17px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--blue); }
.widget ul { list-style: none; }
.widget li { padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.widget li:last-child { border-bottom: none; }
.widget a { color: var(--ink); text-decoration: none; }
.widget a:hover { color: var(--blue); }
.widget p { font-size: 14px; color: var(--muted); }
.dot { color: var(--blue); margin-right: 8px; font-weight: 800; }

/* ---------- tool pages ---------- */
.breadcrumb { font-size: 14px; color: var(--muted); margin: 24px 0 6px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.main-col h1 { font-size: 30px; margin-bottom: 8px; letter-spacing: -0.4px; }
.main-col h1::after { content: ""; display: block; width: 76px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--accent)); margin-top: 10px; }
.tool-desc { color: var(--muted); margin-bottom: 20px; }
.tool-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px; margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
textarea, input[type="text"], input[type="url"], input[type="number"], select {
  width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff; color: var(--ink);
}
textarea:focus, input:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
textarea { resize: vertical; min-height: 160px; }
.btn { display: inline-block; border: none; border-radius: 999px; padding: 11px 30px; font-size: 15px; font-weight: 700; cursor: pointer; margin: 4px 8px 4px 0; text-decoration: none; font-family: inherit; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-secondary { background: #eef2f7; color: var(--ink); }
.btn-secondary:hover { background: #dde5f0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { margin: 14px 0 4px; }
.output { background: var(--soft); border: 1px solid var(--border); border-radius: 8px; padding: 16px; min-height: 90px; white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.output-html { background: var(--soft); border: 1px solid var(--border); border-radius: 8px; padding: 16px; min-height: 90px; font-size: 15px; overflow-wrap: anywhere; word-break: break-word; }
.counts { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.count { background: var(--soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px; font-size: 14px; color: var(--muted); }
.count b { color: var(--blue); font-size: 18px; margin-right: 6px; }
.how-to { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px; margin-bottom: 24px; }
.how-to h2 { font-size: 20px; margin-bottom: 12px; }
.how-to ol { margin-left: 22px; color: var(--muted); }
.how-to li { margin-bottom: 8px; }
.faq { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px; margin-bottom: 24px; }
.faq h2 { font-size: 20px; margin-bottom: 12px; }
.faq-item { margin-bottom: 14px; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item h3 { font-size: 16px; margin-bottom: 6px; color: #0f172a; }
.faq-item p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.note { background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: 8px; padding: 14px 16px; font-size: 14px; margin-bottom: 20px; color: #5c4a00; }
.error { background: #fce8e6; border: 1px solid #f5a9a4; color: var(--red); border-radius: 8px; padding: 14px 16px; font-size: 14px; margin: 12px 0; }
.success { background: #e6f4ea; border: 1px solid #a8dab5; color: var(--green); border-radius: 8px; padding: 14px 16px; font-size: 14px; margin: 12px 0; }
mark { background: #fff3b0; padding: 1px 2px; border-radius: 3px; }
.issue { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; font-size: 14px; background: #fff; }
.issue .wrong { color: var(--red); font-weight: 700; text-decoration: line-through; }
.issue .fix { color: var(--green); font-weight: 700; }
.issue .expl { color: var(--muted); font-size: 13px; margin-top: 4px; }
.issue .kind { display: inline-block; font-size: 11px; font-weight: 700; background: var(--soft); border: 1px solid var(--border); border-radius: 12px; padding: 1px 9px; margin-bottom: 6px; color: var(--blue); }
.result-item { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; background: #fff; transition: border-color .15s ease; }
.result-item:hover { border-color: var(--blue); background: var(--soft); }
.result-item .style-name { font-size: 12px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.result-item .style-text { font-size: 18px; word-break: break-word; }
.progress { height: 10px; background: #edf1f7; border-radius: 6px; overflow: hidden; margin: 12px 0; display: none; }
.progress div { height: 100%; background: var(--blue); width: 0%; transition: width .2s ease; }
.preview-img { max-width: 100%; border: 1px solid var(--border); border-radius: 8px; margin: 12px 0; display: none; }
canvas.preview-canvas { max-width: 100%; border: 1px solid var(--border); border-radius: 8px; }
.char-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; cursor: pointer; font-size: 15px; font-family: inherit; color: var(--ink); }
.char-btn:hover { border-color: var(--blue); background: var(--soft); }
.char-btn code { background: var(--soft); padding: 3px 9px; border-radius: 4px; font-size: 13px; border: 1px solid var(--border); }
.char-btn .copy-hint { margin-left: auto; font-size: 13px; color: var(--blue); font-weight: 700; }
.radio-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0 16px; font-size: 15px; }
.radio-row label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
input[type="range"] { width: 100%; accent-color: var(--blue); }
.range-val { font-weight: 700; color: var(--blue); }
.cite-out { margin-bottom: 18px; }
.cite-out h3 { font-size: 15px; margin-bottom: 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tab { border: 2px solid var(--border); background: #fff; border-radius: 8px; padding: 9px 22px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--ink); }
.tab.active { border-color: var(--blue); color: var(--blue); background: var(--soft); }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; margin-right: 8px; }
.status-dot.live { background: var(--green); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
select.lang-select { max-width: 320px; }

/* ---------- footer ---------- */
.site-footer { background: #0f172a; color: #cbd5e1; margin-top: 52px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; padding: 40px 0 34px; align-items: start; }
.footer-logo { color: #fff; font-size: 21px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.footer-mark { width: 30px; height: 30px; display: inline-flex; flex: none; }
.footer-mark svg { width: 100%; height: 100%; display: block; }
.site-footer h4 { color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.footer-brand h4 { margin-bottom: 6px; }
.footer-brand p { margin: 0; font-size: 14px; color: #94a3b8; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; font-size: 14px; }
.site-footer a { color: #cbd5e1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { text-align: center; padding: 15px 20px; border-top: 1px solid #1e293b; font-size: 13px; color: #94a3b8; }

/* ---------- toast ---------- */
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(90px); background: #202124; color: #fff; padding: 12px 26px; border-radius: 9px; font-size: 14px; opacity: 0; transition: all .3s ease; z-index: 999; pointer-events: none; max-width: 90%; text-align: center; }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .nav-toggle { display: block; }
  .main-nav { display: none; position: absolute; top: 56px; left: 0; right: 0; background: #fff; flex-direction: column; border-bottom: 1px solid var(--border); padding: 10px 20px 16px; box-shadow: 0 12px 24px rgba(0,0,0,.08); }
  .main-nav.open { display: flex; }
  .main-nav.open .nav-ext { margin: 10px 0 4px; text-align: center; }
  .hero h1 { font-size: 30px; }
  .main-col h1 { font-size: 25px; }
  /* result tables: scroll horizontally inside the page instead of breaking it */
  .res-table, .ts-table, .kw-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  body .res-table td:first-child { width: auto; min-width: 96px; }
  .pill-tabs, .tab-btns { flex-wrap: wrap; }
}

/* ---------- small phones ---------- */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .header-inner { gap: 8px; }
  .logo-mark { width: 30px; height: 30px; }
  .logo-text { font-size: 17px; }
  .nav-toggle { padding: 5px 10px; font-size: 18px; }
  
  .hero { padding: 20px 0; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 15px; }
  .main-col h1 { font-size: 23px; }
  .tool-box { padding: 16px; }
  .how-to { padding: 16px; }
  .section-head h2 { font-size: 23px; }
  .btn { padding: 10px 16px; }
}

/* ---------- cross-site promo ---------- */
/* sister-site link as plain text (like metacalculator.org) - solid, bold, properly visible */
.nav-ext { display: inline-block; color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
  border-radius: 8px; padding: 8px 14px !important; font-weight: 800;
  margin-left: 0; box-shadow: none; white-space: nowrap; }
.nav-ext:hover { transform: none; text-decoration: none; box-shadow: none;
  color: #5b21b6 !important; -webkit-text-fill-color: #5b21b6 !important; }
.nav-ext-logo { width: 18px; height: 18px; vertical-align: -4px; margin-right: 7px; }

/* ---------- language selector ---------- */
.lang-wrap { margin-left: 10px; flex: none; }



.lang-offline { font-size: 1.2rem; opacity: .4; cursor: not-allowed; }
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
.skiptranslate iframe { display: none !important; }

/* ---------- house ad slot (sister-site promo until AdSense approval) ---------- */
.ad-slot{margin:6px auto;max-width:900px;padding:0 20px}
.ad-label{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-bottom:2px}
.house-ad{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:12px;
  background:linear-gradient(115deg,#dbeafe 0%,#bfdbfe 100%);
  border:1px solid #93c5fd;box-shadow:0 2px 8px rgba(15,23,42,.06);
  transition:transform .2s ease, box-shadow .2s ease}
.house-ad:hover{text-decoration:none;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(15,23,42,.10)}
.house-ad-emoji{line-height:1;flex:none}
.house-ad-emoji svg{width:1.7rem;height:1.7rem;display:block}
.house-ad-txt{min-width:0}
.house-ad-txt b{display:block;color:var(--ink);font-size:.95rem;letter-spacing:-.01em}
.house-ad-txt small{color:var(--muted);font-size:.78rem;display:block;margin-top:1px}
.house-ad-btn{margin-left:auto;flex:none;color:#fff;font-weight:700;font-size:.82rem;
  background:#2563eb;
  padding:8px 16px;border-radius:999px;box-shadow:0 2px 8px rgba(37,99,235,.25);white-space:nowrap}
@media(max-width:560px){
  .house-ad{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .house-ad-emoji svg{width:1.5rem;height:1.5rem}
  .house-ad-btn{margin-left:0;width:100%;text-align:center}
}

/* ---------- trending strip (very top of every page, like MetaCalculator) ---------- */
.trend-strip{background:#101c33;color:#fff;font-size:.8rem}
.trend-inner{max-width:1180px;margin:0 auto;padding:7px 20px;display:flex;gap:10px;align-items:center}
.trend-label{font-weight:700;flex:0 0 auto;color:#ffd166}
.trend-viewport{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.trend-track{display:flex;width:max-content;animation:trend-scroll 32s linear infinite}
.trend-strip:hover .trend-track{animation-play-state:paused}
.trend-group{display:flex;gap:8px;padding-right:8px}
.trend-strip a{color:#dbe4ff;text-decoration:none;padding:3px 11px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;flex:0 0 auto}
.trend-strip a:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
@keyframes trend-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.trend-track{animation:none}}
/* nav language item (like MetaCalculator) */
.nav-lang{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;
  font-weight:600;font-size:.95rem;color:var(--ink)}
.nav-lang:hover{background:var(--primary-light)}
.nav-lang .lang-ic{font-size:1.05rem}
@media(max-width:720px){.trend-label{display:none}}

/* ---------- bonus strip effect: breathing gold glow + live dot (attention) ---------- */
.trend-strip a.trend-bonus{background:#ffd166;border-color:#ffd166;color:#3b2f00;font-weight:800;
  animation:bonus-colors 16s ease-in-out infinite}
.trend-strip a.trend-bonus:hover{background:#ffdf8a;color:#3b2f00}
.trend-strip a.trend-bonus b{background:#16a34a;color:#fff;font-size:.72em;padding:1px 8px;
  border-radius:999px;margin-left:6px;letter-spacing:.05em}
.trend-strip a.trend-bonus::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#dc2626;margin-right:7px;animation:bonus-dot 1.3s ease-in-out infinite}
@keyframes bonus-colors{
  0%,100%{background:#ffd166;border-color:#ffd166;box-shadow:0 0 8px rgba(255,209,102,.55)}
  25%{background:#fb923c;border-color:#fb923c;box-shadow:0 0 16px rgba(251,146,60,.9)}
  50%{background:#4ade80;border-color:#4ade80;box-shadow:0 0 16px rgba(74,222,128,.9)}
  75%{background:#38bdf8;border-color:#38bdf8;box-shadow:0 0 16px rgba(56,189,248,.9)}}
@media (prefers-reduced-motion:reduce){.trend-strip a.trend-bonus,.trend-strip a.trend-bonus::before{animation:none}}
@keyframes bonus-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- bonus banner: Background Remover spotlight (homepage) ---------- */
.bonus-banner{position:relative;overflow:hidden;margin:64px 0;padding:56px 48px;border-radius:26px;color:#fff;display:flex;align-items:center;gap:44px;
  background:linear-gradient(120deg,#6d28d9 0%,#2563eb 55%,#0891b2 100%);
  box-shadow:0 24px 60px rgba(37,99,235,.38)}
.bonus-content{position:relative;z-index:2;max-width:640px;flex:1 1 auto;min-width:0}
.bonus-kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  padding:8px 16px;border-radius:999px;margin-bottom:18px}
.bonus-banner h2{color:#fff;font-size:2.1rem;margin:0 0 14px;line-height:1.2}
.bonus-free{display:inline-block;vertical-align:middle;font-size:.55em;background:#16a34a;color:#fff;
  border-radius:999px;padding:.3em .9em;margin-left:.5em;letter-spacing:.06em;font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.bonus-banner p{color:#e8efff;font-size:1.05rem;line-height:1.65;margin:0 0 26px}
.bonus-banner p b{color:#fff}
.bonus-cta{display:inline-block;background:#fff;color:#1d4ed8;font-weight:800;font-size:1.05rem;
  padding:15px 34px;border-radius:999px;text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .15s}
.bonus-cta:hover{transform:translateY(-2px);text-decoration:none;color:#1d4ed8}
.bonus-demo{position:relative;z-index:2;flex:0 0 auto;
  display:flex;flex-direction:column;gap:10px}
.demo-label{text-align:center;font-weight:800;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.demo-frame{margin:0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
  border-radius:12px;padding:6px;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.demo-frame img{display:block;width:118px;height:82px;object-fit:cover;border-radius:8px}
.demo-after{background:repeating-conic-gradient(#cfd6e2 0 25%,#ffffff 0 50%) 0 0/14px 14px}
.demo-frame figcaption{text-align:center;font-weight:800;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin-top:6px;text-shadow:0 1px 4px rgba(0,0,0,.4)}
@media(max-width:1080px){
  .bonus-banner{flex-direction:column;align-items:flex-start}
  .bonus-demo{justify-content:center;margin-top:28px}
}
@media(max-width:720px){
  .bonus-banner{margin:52px 0;padding:40px 26px}
  .bonus-banner h2{font-size:1.55rem}
  .bonus-banner p{font-size:.95rem}
}

/* Complete-list toggle for long tool sections */
details.complete-list{margin:6px 0 8px}
details.complete-list summary{cursor:pointer;display:inline-block;padding:10px 24px;border-radius:999px;background:#eef4ff;color:#1a73e8;font-weight:700;list-style:none}
details.complete-list summary::-webkit-details-marker{display:none}
details.complete-list summary:hover{background:#dbe9ff}
details.complete-list .tool-grid{margin-top:14px}

/* Hostinger referral bar (top) */
.ref-bar{background:linear-gradient(90deg,#3b1f8f,#673de6 45%,#8b5cf6);color:#fff;
  font-size:.82rem;position:relative;z-index:60}
.ref-inner{max-width:1120px;margin:0 auto;padding:8px 44px 8px 20px;display:flex;
  gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.ref-bar .ref-txt{opacity:.95}
.ref-bar .ref-txt b{font-weight:800}
.ref-cta{background:#fff;color:#4c1d95;font-weight:800;text-decoration:none;
  padding:5px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .15s}
.ref-cta:hover{transform:translateY(-1px);color:#4c1d95;text-decoration:none}
.ref-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:rgba(255,255,255,.75);font-size:1rem;cursor:pointer;
  padding:4px 8px;line-height:1}
.ref-close:hover{color:#fff}
@media (max-width:640px){.ref-bar{font-size:.75rem}
  .ref-inner{padding:7px 36px 7px 12px;gap:8px}}

/* Founder card (matches metacalculator.org) */
.founder-card{display:flex;gap:28px;align-items:center;background:#fff;
  border:1px solid var(--border);border-radius:18px;padding:26px;margin:20px 0 10px;
  box-shadow:0 10px 30px rgba(15,40,90,.08)}
.founder-photo{width:230px;height:175px;object-fit:cover;object-position:top center;
  border-radius:14px;flex-shrink:0;box-shadow:0 8px 22px rgba(15,40,90,.18)}
.founder-info{min-width:0}
.founder-name{font-size:1.3rem;font-weight:800;margin:0 0 4px;color:var(--ink)}
.founder-title{font-size:.95rem;font-weight:600;color:var(--blue);margin:0 0 8px}
.founder-note{font-size:.95rem;color:#6b7280;margin:0;line-height:1.6}
@media(max-width:640px){.founder-card{flex-direction:column;text-align:center;padding:22px}
.founder-photo{width:100%;max-width:320px;height:210px}}

.nav-ext-txt{display:inline-flex;flex-direction:column;line-height:1.15}
.nav-ext-sub{font-size:.62rem;font-weight:600;color:#6b7280;white-space:nowrap}

#google_translate_element .goog-te-gadget{font-size:0 !important;line-height:0 !important}
#google_translate_element .goog-te-combo{font-size:.85rem !important;font-weight:600;
  color:var(--ink);border:none !important;border-radius:0;padding:5px 2px;
  background:transparent !important;cursor:pointer;max-width:80px !important;font-family:inherit;
  -webkit-appearance:none;appearance:none;box-shadow:none !important;outline:none}
#google_translate_element .goog-te-gadget-simple{border:none !important;background:transparent !important;
  padding:5px 2px !important;box-shadow:none !important;font-size:.85rem;max-width:80px}
.hero .hero-desc{font-size:.9rem;margin-bottom:12px}
.hero .stats{display:none}

/* ---------- mega menu ---------- */
.mega-item { position: relative; }
.mega-btn { background: none; border: 0; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink); padding: 8px 11px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.mega-btn:hover { background: var(--primary-light); }
.mega-caret { font-size: 11px; opacity: .7; }
.mega-panel { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 330px; max-width: 92vw; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 44px rgba(15,35,80,.16); padding: 8px; z-index: 300; }
.mega-panel-right { left: auto; right: 0; transform: none; }
.mega-item.open .mega-panel { display: block; }
@media (hover: hover) and (min-width: 921px) { .mega-item:hover .mega-panel { display: block; } }
.main-nav .mega-tool { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.mt-ico { font-size: 20px; line-height: 1.3; }
.mt-txt { display: flex; flex-direction: column; }
.mt-txt b { font-size: 14.5px; line-height: 1.3; }
.mt-txt small { font-size: 12.5px; font-weight: 400; color: #5b6472; line-height: 1.35; }
.mt-badge { margin-left: auto; align-self: center; background: #f5c518; color: #4a3500; font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.mega-all { display: block; text-align: center; margin-top: 6px; border-top: 1px solid var(--border); padding: 10px; font-size: 14px; }
.mega-home { display: none; }
@media (max-width: 1250px) and (min-width: 921px) { .mega-btn { padding: 8px 7px; font-size: 14px; } .header-inner { gap: 18px; } .main-nav > a { padding: 8px 8px; font-size: 14px; } }
@media (max-width: 920px) {
  .mega-home { display: block; }
  .mega-item { width: 100%; }
  .mega-btn { width: 100%; justify-content: space-between; padding: 10px 6px; }
  .mega-panel { position: static; transform: none; width: auto; max-width: none; box-shadow: none; border: 0; padding: 0 0 4px 10px; }
  .main-nav .mega-tool { padding: 7px 6px; }
}

/* header left-align (owner request 2026-10-20): logo + menu headings hug the left edge */
.site-header .container { max-width: none; padding: 0 24px; }
.header-inner { gap: 28px; }
@media (max-width: 920px) { .site-header .container { padding: 0 14px; } }

/* header compact spacing (owner request 2026-10-20): headings closer together so the language selector stays visible */
.header-inner { gap: 16px; }
.mega-btn { padding: 8px 6px; font-size: 14px; }
.main-nav > a { padding: 8px 9px; font-size: 14px; }
.nav-lang { padding: 8px 8px; }

/* decent fonts + light blue dropdown (owner request 2026-10-20, QuillBot-style) */
.mega-btn { font-weight: 500; }
.main-nav a { font-weight: 500; }
.mt-txt b { font-weight: 500; }
.mega-panel { background: linear-gradient(180deg, #F5F9FF 0%, #E9F1FE 100%); border-color: #C7DBFA; }
.main-nav .mega-tool .mt-ico { background: #D8E6FD; border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.main-nav .mega-tool:hover { background: #FFFFFF; }

/* header ends + Home link + visible dropdown blue (owner feedback 2026-10-20) */
@media (min-width: 921px) { .mega-home { display: inline-flex; align-items: center; } }
.main-nav { align-items: center; }
.nav-ext { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-ext-logo { width: 36px; height: 36px; margin-right: 0; vertical-align: middle; flex: none; }
.nav-ext-txt { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
.nav-ext-sub { font-size: 11px; }
.mega-panel { background: linear-gradient(180deg, #E4EEFE 0%, #D2E2FC 100%); border-color: #A9C6F5; }
.main-nav .mega-tool .mt-ico { background: #BCD4FB; }
@media (max-width: 920px) { .nav-ext-logo { width: 28px; height: 28px; } .nav-ext-txt { font-size: 14px; } .nav-ext { gap: 7px; } }

/* header no-shrink lock (owner feedback 2026-10-20): brand + language blocks never wrap or clip */
.logo { flex: none; }
.logo-text { flex: none; white-space: nowrap; }
.logo-sub { white-space: nowrap; }
.nav-ext { flex: none; }
.nav-ext-txt { flex: none; white-space: nowrap; }
.nav-ext-sub { white-space: nowrap; }
.nav-lang { flex: none; white-space: nowrap; }
#google_translate_element .goog-te-gadget-simple { max-width: 170px !important; }
#google_translate_element select { max-width: 170px !important; }
.mega-home { flex: none; white-space: nowrap; }
@media (max-width: 1480px) and (min-width: 921px) {
  .mega-btn { padding: 8px 5px; font-size: 13.5px; }
  .main-nav > a { padding: 8px 7px; font-size: 13.5px; }
  .header-inner { gap: 12px; }
  .site-header .container { padding: 0 16px; }
}

/* brand blocks identical (owner feedback 2026-10-20): MetaCalculator matches the SEO Tools logo exactly */
.nav-ext { color: var(--ink) !important; }
.nav-ext-txt { font-size: 21px; font-weight: 800; color: var(--ink) !important; letter-spacing: -0.3px; line-height: 1.15; }
.nav-ext-sub { font-size: 11px; font-weight: 600; color: #6b7280 !important; letter-spacing: .2px; }
@media (max-width: 920px) { .nav-ext-txt { font-size: 15px; } }

/* language/MetaCalculator separation (owner feedback 2026-10-20): no overlap, clear gap */
.nav-lang { padding: 8px 22px 8px 8px; margin-right: 4px; }
@media (max-width: 1480px) and (min-width: 921px) {
  .mega-btn { padding: 8px 4px; }
  .site-header .container { padding: 0 14px; }
}

/* Ad containment: creatives stay inside their slots */
.adx{overflow:hidden;max-width:100%}
.ad-slot{overflow:hidden}

/* Brand bar (SEO Tools by MetaCalculator) */
.brand-bar { display:flex; align-items:center; gap:10px; margin:14px 0 4px; }
.brand-mark svg { width:38px; height:38px; display:block; }
.brand-txt b { font-size:16px; color:#111827; display:block; line-height:1.2; }
.brand-txt small { font-size:12px; color:#6b7280; }
.brand-parent { margin-left:auto; font-weight:800; font-size:15px; color:#131C31; border:1.5px solid #C9A227; border-radius:999px; padding:5px 13px; white-space:nowrap; background:#fff; }

/* New tools ticker (site-wide) */
.newticker{display:flex;align-items:center;gap:12px;background:#101C33;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:2px 14px;overflow:hidden}
.nt-label{flex:0 0 auto;color:#FFC94D;font-weight:800;font-size:12px;letter-spacing:.3px;white-space:nowrap;text-shadow:0 0 9px rgba(255,201,77,.95),0 0 20px rgba(255,201,77,.55);animation:ntAttn 1.4s ease-in-out infinite}
.nt-viewport{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.nt-track{display:inline-flex;white-space:nowrap;animation:ntScroll 63s linear infinite}
.newticker:hover .nt-track{animation-play-state:paused}
.nt-group{display:inline-flex;align-items:center}
.nt-group a{color:#E8EEF9;text-decoration:none;font-size:12px;font-weight:600;margin:0 5px;display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:1px 9px}
.nt-group a:hover{color:#FFC94D;text-decoration:underline}
.nt-new{background:linear-gradient(90deg,#C9A227,#DDB84A);color:#131C31;font-size:9.5px;font-weight:800;letter-spacing:.5px;padding:1px 6px;border-radius:999px}
@keyframes ntScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.nt-track{animation:none}.nt-group a.nt-new-item{animation:none}.nt-label{animation:none;filter:none}}
@media (max-width:640px){.nt-label{display:none}}
.nt-group a.nt-new-item{color:#FFD97A;font-weight:800;text-shadow:0 0 9px rgba(255,201,77,.95),0 0 20px rgba(255,201,77,.55);animation:ntAttn 1.4s ease-in-out infinite}
@keyframes ntAttn{0%,100%{text-shadow:0 0 6px rgba(255,201,77,.6),0 0 14px rgba(255,201,77,.35);filter:brightness(1)}50%{text-shadow:0 0 14px rgba(255,220,120,1),0 0 34px rgba(255,201,77,.9),0 0 56px rgba(255,170,40,.55);filter:brightness(1.4)}}
@keyframes ntGlow{0%,100%{text-shadow:0 0 6px rgba(255,201,77,.65),0 0 13px rgba(255,201,77,.35)}50%{text-shadow:0 0 12px rgba(255,201,77,1),0 0 26px rgba(255,201,77,.7)}}

/* ---------- new/bonus tool cards: gold attention glow ---------- */
.tool-card.card-glow{border-color:#C9A227;animation:cardGlow 1.6s ease-in-out infinite}
@keyframes cardGlow{0%,100%{box-shadow:0 0 8px rgba(201,162,39,.35)}50%{box-shadow:0 0 24px rgba(201,162,39,.8),0 0 48px rgba(201,162,39,.35)}}

/* Hostinger promo bar (same as metatrendonline.com) */
.hostbar{background:#F0442E;color:#fff;overflow:hidden}
.hostbar a.hostbar-link{display:block;color:#fff;text-decoration:none;white-space:nowrap}
.hostbar-track{display:inline-flex;white-space:nowrap;animation:hostScroll 60s linear infinite;will-change:transform;padding:3px 0}
.hostbar:hover .hostbar-track{animation-play-state:paused}
.hostbar-set{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.3px}
.hb-item{padding:0 14px}
.hb-item b{font-weight:900}
.hb-sep{color:#FFD9D2;font-size:11px}
.claimfx{font-weight:800;background:linear-gradient(90deg,#FF5252,#FFB03B,#F9E04B,#4ADE80,#38BDF8,#A78BFA,#FF5252);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:claimflow 3.2s linear infinite,claimglow 1.6s ease-in-out infinite alternate}
@keyframes hostScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes claimflow{to{background-position:220% center}}
@keyframes claimglow{from{filter:drop-shadow(0 0 2px rgba(255,255,255,.55)) brightness(1)}to{filter:drop-shadow(0 0 7px rgba(255,236,170,.98)) brightness(1.22)}}
@media (prefers-reduced-motion:reduce){.hostbar-track{animation:none}}
/* ---------- Homepage colour format (Popular multicolour + each category ONE tone at 50% lighter — his order 1 Nov) ---------- */
.pop-grid .tool-card:nth-child(10n+1){background:#63b8dd}
.pop-grid .tool-card:nth-child(10n+2){background:#7cc47f}
.pop-grid .tool-card:nth-child(10n+3){background:#ecc21f}
.pop-grid .tool-card:nth-child(10n+4){background:#f59b60}
.pop-grid .tool-card:nth-child(10n+5){background:#e97e6d}
.pop-grid .tool-card:nth-child(10n+6){background:#b08fe0}
.pop-grid .tool-card:nth-child(10n+7){background:#4fbdb2}
.pop-grid .tool-card:nth-child(10n+8){background:#7aa5e8}
.pop-grid .tool-card:nth-child(10n+9){background:#ef8fb5}
.pop-grid .tool-card:nth-child(10n+10){background:#93a5e8}
.pop-grid .tool-card{padding:16px 14px;box-shadow:0 4px 14px rgba(15,23,42,.14)}
.pop-grid .tool-card h3{color:#fff;text-shadow:0 1px 3px rgba(15,23,42,.5),0 0 2px rgba(15,23,42,.35);font-size:14px;white-space:nowrap;overflow:hidden}
.pop-grid .tool-card p{color:#17171c;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pop-grid .tool-icon{background:rgba(255,255,255,.88);margin-bottom:8px}
#text-analysis-tools + .tool-grid .tool-card,#online-pdf-tools + .tool-grid .tool-card,#images-editing-tools + .tool-grid .tool-card,#keyword-tools + .tool-grid .tool-card,#website-management-tools + .tool-grid .tool-card,#website-tracking-tools + .tool-grid .tool-card,#domains-tools + .tool-grid .tool-card,#meta-tags-tools + .tool-grid .tool-card,#development-tools + .tool-grid .tool-card,#online-calculators + .tool-grid .tool-card,#link-building-tools + .tool-grid .tool-card,#other-tools + .tool-grid .tool-card{padding:16px 14px;box-shadow:0 4px 14px rgba(15,23,42,.10)}
#text-analysis-tools + .tool-grid .tool-card h3,#online-pdf-tools + .tool-grid .tool-card h3,#images-editing-tools + .tool-grid .tool-card h3,#keyword-tools + .tool-grid .tool-card h3,#website-management-tools + .tool-grid .tool-card h3,#website-tracking-tools + .tool-grid .tool-card h3,#domains-tools + .tool-grid .tool-card h3,#meta-tags-tools + .tool-grid .tool-card h3,#development-tools + .tool-grid .tool-card h3,#online-calculators + .tool-grid .tool-card h3,#link-building-tools + .tool-grid .tool-card h3,#other-tools + .tool-grid .tool-card h3{color:#17171c;text-shadow:none;font-size:13px;white-space:nowrap;overflow:hidden}
#text-analysis-tools + .tool-grid .tool-card p,#online-pdf-tools + .tool-grid .tool-card p,#images-editing-tools + .tool-grid .tool-card p,#keyword-tools + .tool-grid .tool-card p,#website-management-tools + .tool-grid .tool-card p,#website-tracking-tools + .tool-grid .tool-card p,#domains-tools + .tool-grid .tool-card p,#meta-tags-tools + .tool-grid .tool-card p,#development-tools + .tool-grid .tool-card p,#online-calculators + .tool-grid .tool-card p,#link-building-tools + .tool-grid .tool-card p,#other-tools + .tool-grid .tool-card p{color:#17171c;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#text-analysis-tools + .tool-grid .tool-icon,#online-pdf-tools + .tool-grid .tool-icon,#images-editing-tools + .tool-grid .tool-icon,#keyword-tools + .tool-grid .tool-icon,#website-management-tools + .tool-grid .tool-icon,#website-tracking-tools + .tool-grid .tool-icon,#domains-tools + .tool-grid .tool-icon,#meta-tags-tools + .tool-grid .tool-icon,#development-tools + .tool-grid .tool-icon,#online-calculators + .tool-grid .tool-icon,#link-building-tools + .tool-grid .tool-icon,#other-tools + .tool-grid .tool-icon{background:rgba(255,255,255,.75);margin-bottom:8px}
#text-analysis-tools + .tool-grid .tool-card{background:#a4c8ec}
#online-pdf-tools + .tool-grid .tool-card{background:#f0aba6}
#images-editing-tools + .tool-grid .tool-card{background:#f49ec6}
#keyword-tools + .tool-grid .tool-card{background:#cee397}
#website-management-tools + .tool-grid .tool-card{background:#9ad4a9}
#website-tracking-tools + .tool-grid .tool-card{background:#bcb7e8}
#domains-tools + .tool-grid .tool-card{background:#f8bf8e}
#meta-tags-tools + .tool-grid .tool-card{background:#87d6ce}
#development-tools + .tool-grid .tool-card{background:#cabad4}
#online-calculators + .tool-grid .tool-card{background:#95b6f0}
#link-building-tools + .tool-grid .tool-card{background:#ecd28a}
#other-tools + .tool-grid .tool-card{background:#c4a6f8}