/* WizBrand Tools — "Our Tools" landing page styles */
.tp { --tp-navy:#0b1f44; --tp-navy-2:#0d2552; --tp-blue:#2563eb; --tp-accent:#3b82f6; --tp-ink:#0f1b34; --tp-muted:#5d6b85; --tp-line:#e6ecf5; --tp-bg:#f5f8fd;
    font-family:'Inter','Segoe UI',Arial,sans-serif; color:var(--tp-ink); background:var(--tp-bg); }

/* Hero */
/* NOTE: no overflow:hidden here — it would clip the instant-search dropdown.
   Decorative layers below clip themselves instead. */
.tp-hero { position:relative; text-align:center; color:#fff; padding:70px 16px 98px;
    background:linear-gradient(180deg,#0e2a5e 0,var(--tp-navy) 72%); }
.tp-hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:54px; background:var(--tp-bg); clip-path:ellipse(82% 100% at 50% 100%); z-index:3; }
/* z-index:50 keeps the hero content + dropdown above the sticky filter bar (z-index:30) */
.tp-hero-inner { position:relative; z-index:50; max-width:780px; margin:0 auto; }

.tp-hero-blobs { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.tp-hero-blobs span { position:absolute; border-radius:50%; filter:blur(72px); }
.tp-blob1 { width:340px; height:340px; background:#2563eb; opacity:.55; top:-90px; left:-70px; }
.tp-blob2 { width:300px; height:300px; background:#7c3aed; opacity:.42; top:-50px; right:-60px; }
.tp-blob3 { width:260px; height:260px; background:#0ea5e9; opacity:.3; bottom:-40px; left:34%; }

.tp-hero-float { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.tp-fi { position:absolute; width:50px; height:50px; border-radius:15px; display:grid; place-items:center; color:#fff; font-size:1.15rem; border:1px solid rgba(255,255,255,.18); box-shadow:0 14px 34px rgba(0,0,0,.3); animation:tpFloat 6s ease-in-out infinite; }
@keyframes tpFloat { 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-16px) rotate(3deg); } }

.tp-crumb { display:inline-flex; gap:.5rem; align-items:center; font-size:.8rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:.32rem .9rem; border-radius:999px; margin-bottom:1rem; }
.tp-crumb a { color:#cfe0ff; text-decoration:none; } .tp-crumb a:hover { color:#fff; } .tp-crumb .sep { opacity:.5; } .tp-crumb .here { color:#fff; font-weight:600; }
.tp-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#cfe0ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:.42rem .95rem; border-radius:999px; margin-bottom:1.1rem; }
.tp-eyebrow i { color:#7eb0ff; }
.tp-hero h1 { font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:clamp(2.2rem,5vw,3.6rem); margin:0 0 .6rem; letter-spacing:-.025em; line-height:1.05; color:#fff; }
.tp-hero h1 .grad { background:linear-gradient(110deg,#7eb0ff,#60a5fa 40%,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tp-hero .lede { color:#bccbe8; font-size:1.1rem; margin:0 auto 1.9rem; max-width:600px; }

.tp-searchbox { position:relative; max-width:640px; margin:0 auto; }
.tp-search { display:flex; align-items:center; gap:.5rem; width:100%; background:#fff; border-radius:16px; padding:.45rem .45rem .45rem 1.15rem; box-shadow:0 26px 54px rgba(4,12,32,.5); }

/* Instant results dropdown */
.tp-results { position:absolute; left:0; right:0; top:calc(100% + 10px); background:#fff; border-radius:16px; box-shadow:0 28px 60px rgba(4,12,32,.45); padding:8px; z-index:40; text-align:left; max-height:56vh; overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:#cdd9ec transparent; }
.tp-results::-webkit-scrollbar { width:10px; }
.tp-results::-webkit-scrollbar-track { background:transparent; }
.tp-results::-webkit-scrollbar-thumb { background:#cdd9ec; border-radius:999px; border:3px solid #fff; background-clip:padding-box; }
.tp-results::-webkit-scrollbar-thumb:hover { background:#b3c4e0; border:3px solid #fff; background-clip:padding-box; }
.tp-results[hidden] { display:none; }
.tp-res-head { font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; padding:.5rem .7rem .35rem; }
.tp-res { display:flex; align-items:center; gap:.8rem; padding:.6rem .7rem; border-radius:12px; text-decoration:none; color:var(--tp-ink); }
.tp-res:hover, .tp-res.active { background:#eef4ff; color:var(--tp-ink); text-decoration:none; }
.tp-res-ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:.92rem; flex:0 0 auto; box-shadow:0 6px 14px rgba(11,31,68,.18); }
.tp-res-meta { min-width:0; flex:1; }
.tp-res-meta b { display:block; font-size:.92rem; color:var(--tp-navy); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-res-meta span { font-size:.76rem; color:var(--tp-muted); }
.tp-res mark { background:#fde68a; }
.tp-res .go { margin-left:auto; color:#c0cce0; font-size:.85rem; flex:0 0 auto; }
.tp-res-empty { padding:1.3rem; text-align:center; color:var(--tp-muted); font-size:.9rem; }
.tp-res-more { display:block; text-align:center; font-size:.8rem; font-weight:700; color:var(--tp-blue); padding:.6rem; text-decoration:none; border-top:1px solid var(--tp-line); margin-top:4px; }
.tp-res-more:hover { color:var(--tp-blue); text-decoration:underline; }
.tp-search .s { color:#8aa0c4; font-size:1.05rem; flex:0 0 auto; }
.tp-search input { flex:1; min-width:0; border:0; outline:none; background:transparent; padding:.9rem .5rem; font-size:1rem; color:var(--tp-ink); }
.tp-search .clear { border:none; background:#eef2f8; color:#64748b; width:32px; height:32px; border-radius:50%; cursor:pointer; display:none; flex:0 0 auto; font-size:1.1rem; line-height:1; }
.tp-search .clear.show { display:block; }
.tp-search-btn { flex:0 0 auto; border:none; cursor:pointer; font:inherit; font-weight:700; color:#fff; border-radius:12px; padding:.85rem 1.6rem; background:linear-gradient(120deg,var(--tp-accent),var(--tp-blue)); box-shadow:0 10px 22px rgba(37,99,235,.5); transition:.15s; }
.tp-search-btn:hover { filter:brightness(1.08); } .tp-search-btn .d { display:none; }

.tp-suggest { margin-top:1.3rem; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem; color:#9fb3d6; font-size:.85rem; }
.tp-sugg { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#dce8fb; border-radius:999px; padding:.34rem .85rem; font:inherit; font-size:.82rem; cursor:pointer; transition:.15s; }
.tp-sugg:hover { background:rgba(255,255,255,.16); color:#fff; }

@media (max-width:991px){ .tp-hero-float{ display:none; } }
@media (max-width:480px){ .tp-search-btn{ padding:.85rem 1rem; } .tp-search-btn .t{ display:none; } .tp-search-btn .d{ display:inline; } }

/* Sticky filter bar */
.tp-filterbar { position:sticky; top:0; z-index:30; background:rgba(245,248,253,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--tp-line); }
.tp-filters { max-width:1240px; margin:0 auto; padding:12px 16px; display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tp-filters::-webkit-scrollbar { display:none; }
.tp-chip { flex:0 0 auto; border:1px solid var(--tp-line); background:#fff; color:var(--tp-ink); border-radius:999px; padding:.5rem 1rem; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; transition:.16s; white-space:nowrap; }
.tp-chip:hover { border-color:#bcd0f2; color:var(--tp-blue); }
.tp-chip.active { background:linear-gradient(120deg,var(--tp-accent),var(--tp-blue)); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(37,99,235,.35); }
.tp-chip .badge { font-size:.72rem; background:rgba(0,0,0,.08); border-radius:999px; padding:.05rem .45rem; }
.tp-chip.active .badge { background:rgba(255,255,255,.25); }

/* Sections + grid */
.tp-wrap { max-width:1240px; margin:0 auto; padding:16px 16px 72px; }
.tp-section { margin-top:36px; scroll-margin-top:74px; }
.tp-section-head { display:flex; align-items:center; gap:.7rem; margin-bottom:20px; }
.tp-section-head::after { content:""; flex:1; height:2px; border-radius:2px; margin-left:.5rem;
    background:linear-gradient(90deg, color-mix(in srgb, var(--cat,#2563eb) 40%, #e6ecf5), transparent 85%); }
.tp-section-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:1.05rem; flex:0 0 auto;
    background:linear-gradient(135deg, var(--cat,#3b82f6), color-mix(in srgb, var(--cat,#2563eb) 58%, #0b1f44));
    box-shadow:0 10px 22px color-mix(in srgb, var(--cat,#2563eb) 42%, transparent); }
.tp-section-head h2 { font-family:'Plus Jakarta Sans','Inter',sans-serif; font-weight:800; font-size:1.4rem; margin:0; color:var(--tp-navy); }
.tp-section-head .count { font-size:.78rem; font-weight:700; color:var(--cat,var(--tp-blue)); background:color-mix(in srgb, var(--cat,#2563eb) 12%, #fff); border-radius:999px; padding:.15rem .6rem; }

.tp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr)); gap:18px; }
.tp-card { position:relative; display:flex; flex-direction:column; gap:.55rem; background:#fff; border:1px solid var(--tp-line); border-radius:18px; padding:20px 18px 18px; text-decoration:none; color:inherit; overflow:hidden; isolation:isolate;
    transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s, border-color .22s; }
.tp-card::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:18px 18px 0 0; opacity:0; transition:opacity .22s;
    background:linear-gradient(90deg, var(--cat,#3b82f6), color-mix(in srgb, var(--cat,#2563eb) 55%, #0b1f44)); }
.tp-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb, var(--cat,#2563eb) 38%, #fff);
    box-shadow:0 22px 46px color-mix(in srgb, var(--cat,#2563eb) 24%, transparent); color:inherit; text-decoration:none; }
.tp-card:hover::before { opacity:1; }
.tp-card-wm { position:absolute; right:-10px; bottom:-16px; font-size:5rem; color:var(--cat,#2563eb); opacity:.06; z-index:0; pointer-events:none; transition:.25s; }
.tp-card:hover .tp-card-wm { opacity:.12; transform:rotate(-8deg) scale(1.06); }
.tp-card-top { display:flex; align-items:center; gap:.65rem; position:relative; z-index:1; }
.tp-card-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:1.05rem; color:#fff; flex:0 0 auto; transition:transform .22s;
    background:linear-gradient(135deg, var(--cat,#3b82f6), color-mix(in srgb, var(--cat,#2563eb) 58%, #0b1f44));
    box-shadow:0 8px 18px color-mix(in srgb, var(--cat,#2563eb) 40%, transparent); }
.tp-card:hover .tp-card-ic { transform:scale(1.08) rotate(-5deg); }
.tp-card h3 { font-size:1.02rem; font-weight:700; margin:0; color:var(--tp-navy); line-height:1.25; position:relative; z-index:1; }
.tp-card p { font-size:.85rem; color:var(--tp-muted); margin:0; line-height:1.45; flex:1; position:relative; z-index:1; }
.tp-card .tp-open { align-self:flex-start; margin-top:.15rem; font-size:.74rem; font-weight:700; color:var(--cat,#2563eb);
    background:color-mix(in srgb, var(--cat,#2563eb) 12%, #fff); border-radius:999px; padding:.32rem .75rem; display:inline-flex; align-items:center; gap:.4rem;
    opacity:0; transform:translateY(5px); transition:.2s; position:relative; z-index:1; }
.tp-card:hover .tp-open { opacity:1; transform:none; }
.tp-open i { transition:transform .2s; } .tp-card:hover .tp-open i { transform:translateX(3px); }
.tp-card .ext { position:absolute; top:14px; right:14px; font-size:.72rem; color:#aab8d2; z-index:1; }
.tp-card .ext-app { top:12px; padding:2px 8px; border-radius:999px; background:#eef2ff; color:#4338ca; font-weight:600; }
mark { background:#fde68a; color:inherit; padding:0 .1em; border-radius:3px; }

.tp-empty { display:none; text-align:center; padding:64px 16px; color:var(--tp-muted); }
.tp-empty i { font-size:2.6rem; color:#c2cfe6; margin-bottom:.6rem; }
.tp-empty.show { display:block; }

@media (max-width:575px){
    .tp-grid { grid-template-columns:1fr; }
    .tp-hero { padding:46px 16px 80px; }
    .tp-search input { padding:1rem 2.8rem; }
}