/* Supreme Pro — final polish layer (loaded last). TinyWow-style: image icons, visible content, clean steps. */
html body .sp-reveal,html body [class*="sp-reveal"]{opacity:1!important;transform:none!important;transition:none!important}

/* ---- tool icon images everywhere ---- */
.ti-i{display:block;width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none}
html body .tile>i.ti,html body .mg-l a>i.ti,html body .fc>i.ti{background:none!important;padding:0!important;border:0!important;box-shadow:none!important;display:block;width:48px;height:48px;flex:none;font-size:0}
html body .tile>i.ti .ti-i,html body .mg-l a>i.ti .ti-i{width:48px;height:48px;border-radius:13px;box-shadow:0 4px 12px rgba(20,40,90,.14)}
html body .mg-l a>i.ti,html body .mg-l a>i.ti .ti-i{width:42px;height:42px}
html body .fc>i.ti,html body .fc>i.ti .ti-i{width:60px;height:60px;border-radius:16px;margin-bottom:10px;box-shadow:0 6px 16px rgba(20,40,90,.16)}
html body .tile{transition:transform .18s,box-shadow .18s}
html body .tile:hover,html body .fc:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,40,90,.12)}
#sr a>span:first-child .ti-i,.sr a>span:first-child .ti-i{width:38px;height:38px;border-radius:10px}
#sr a>span:first-child{display:block;width:38px;height:38px;flex:none;background:none;font-size:0}

/* ---- tool page header: big logo, centered ---- */
html body .th-tool{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:14px!important;margin:10px auto 22px!important}
html body .th-tool .th-ic{display:block!important;width:84px!important;height:84px!important;border-radius:22px!important;background:none!important;padding:0!important;box-shadow:0 12px 28px rgba(20,40,90,.2)!important;overflow:hidden}
html body .th-tool .th-ic img{width:84px!important;height:84px!important;display:block;border-radius:22px}
html body .th-tool h1{margin:0 0 6px!important}
html body .th-tool .pills{justify-content:center}

/* ---- category cards on home: image icon ---- */
.tc-ic .ti-i{width:100%;height:100%;border-radius:inherit}
html body .tc-ic{overflow:hidden;font-size:0}

/* ---- steps (How it works / How to use) ---- */
html body .steps3{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:16px!important;padding:0!important;max-width:1100px;margin:0 auto!important}
html body .steps3:before{display:none!important}
html body .st3{background:#fff!important;border:1px solid #e5eaf3!important;border-radius:18px!important;padding:24px 20px!important;text-align:center;position:relative;box-shadow:0 6px 18px rgba(20,40,90,.05)!important;display:block}
html body .st3:before{display:none!important}
html body .st3 span{position:static!important;transform:none!important;width:46px!important;height:46px!important;margin:0 auto 12px!important;border-radius:50%!important;background:linear-gradient(135deg,#2b9bff,#1a5fd8)!important;color:#fff!important;font-size:20px!important;font-weight:800!important;display:grid!important;place-items:center;line-height:1}
html body .st3 span:before{display:none!important}
html body .st3 p{margin:0!important;font-size:15px!important;color:#2a3140!important}
@media(max-width:720px){html body .steps3{grid-template-columns:1fr!important}}

/* ---- footer: one logo only ---- */
html body .ft2 .fbar .fl .logo{display:none!important}
html body .ft2 .fbi{justify-content:center;text-align:center;gap:10px 24px;flex-wrap:wrap}

/* ---- spacing: no big blank gaps ---- */
html body main.narrow>.s,html body main>.s{padding:26px 0!important}
html body .sh{margin-bottom:18px}
html body .seo-wrap{margin:26px auto!important}
html body .stats .st b,html body .tw-stats .st b{min-width:1ch}

/* ---- buttons: consistent, tappable ---- */
html body button,html body .btn,html body a.btn{cursor:pointer;-webkit-tap-highlight-color:transparent}
html body .read-all,html body .sh+.btn{margin-left:auto;margin-right:auto}
html body .home-guides-cta{text-align:center}
@media(max-width:560px){html body .th-tool .th-ic,html body .th-tool .th-ic img{width:72px!important;height:72px!important}}
html body .th-tool .th-ic{margin:0 auto!important;align-self:center!important;flex:none!important}
html body .th-tool .th-ic img{width:100%!important;height:100%!important;object-fit:cover}
html body .th-tool>div:not(.th-ic){width:100%}

/* ---- photo / illustration sections ---- */
html body .pic-row{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;max-width:1000px;margin:0 auto;background:#fff;border:1px solid #e5eaf3;border-radius:26px;padding:22px;box-shadow:0 10px 30px rgba(20,40,90,.07)}
html body .pic-row.rev .pic{order:2}
html body .pic{width:100%;height:auto;border-radius:20px;display:block}
html body .pic-tx h2{font-size:26px;margin:0 0 14px;text-align:left;line-height:1.2}
html body .pic-ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
html body .pic-ul li{position:relative;padding-left:30px;color:#2a3140;font-size:15.5px;line-height:1.4}
html body .pic-ul li:before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#2b9bff,#1a5fd8);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center}
html body .pic-btn{display:inline-block;padding:12px 22px;border-radius:12px;background:linear-gradient(135deg,#2b9bff,#1a5fd8);color:#fff!important;font-weight:700;text-decoration:none;box-shadow:0 8px 18px rgba(30,100,220,.25)}
html body .pic-btn:hover{transform:translateY(-2px)}
html body .pic-gallery .pg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1200px;margin:0 auto}
html body .pg-card{display:block;background:#fff;border:1px solid #e5eaf3;border-radius:22px;padding:12px 12px 18px;text-decoration:none;color:inherit;text-align:center;box-shadow:0 8px 22px rgba(20,40,90,.06);transition:transform .18s,box-shadow .18s}
html body .pg-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(20,40,90,.14)}
html body .pg-card img{width:100%;height:auto;border-radius:16px;display:block;margin-bottom:12px}
html body .pg-card b{display:block;font-size:18px;color:#111827}
html body .pg-card span{color:#667085;font-size:14px}
@media(max-width:860px){html body .pic-row{grid-template-columns:1fr;gap:18px;padding:16px}html body .pic-row.rev .pic{order:0}html body .pic-gallery .pg-grid{grid-template-columns:1fr 1fr;gap:12px}html body .pic-tx h2{font-size:22px}}

/* footer: text brand only (logo icon stays in header/favicon only) */
html body .ft2 .fabout .logo{gap:0}
html body .ft2 .fabout .logo .lt b{font-size:22px}

/* ===== blog images (hero + figures) and logo-only tool pages ===== */
.blogpost .bhero{margin:0 0 26px;border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(16,24,40,.14);background:#eef2f9}
.blogpost .bhero img{display:block;width:100%;height:auto;aspect-ratio:1200/630}
.blogpost .bfig{margin:2em 0;border-radius:16px;overflow:hidden;border:1px solid #e3eaf6;background:#fff;box-shadow:0 6px 22px rgba(16,24,40,.07)}
.blogpost .bfig img{display:block;width:100%;height:auto;aspect-ratio:900/420}
.blogpost .bfig figcaption{padding:12px 18px;font-size:14.5px;line-height:1.55;color:#5a6577;border-top:1px solid #edf1f8}
.bcov{padding:0!important;display:block!important;min-height:0}
.bcov img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1200/630}
.bcov::before{display:none!important}
.bcard.big .bcov{min-height:250px}
.bcard.big .bcov img{height:100%;min-height:250px}
@media(max-width:640px){.blogpost .bhero{border-radius:14px}.blogpost .bfig figcaption{font-size:13.5px}}
.pic-sec{display:none!important}

/* ===== TinyWow-style motion + cleaner layout (v2) ===== */
:root{--ease:cubic-bezier(.22,.8,.3,1)}
html{scroll-behavior:smooth}
@keyframes spUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes spFade{from{opacity:0}to{opacity:1}}
@keyframes spPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes spFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spPulse{0%{box-shadow:0 0 0 0 rgba(45,91,255,.35)}100%{box-shadow:0 0 0 16px rgba(45,91,255,0)}}
body{animation:spFade .45s ease both}
/* hero entrance (home) and tool header entrance */
.tw-hero h1{animation:spUp .7s var(--ease) both}
.tw-hero p,.tw-hero .sub{animation:spUp .7s .08s var(--ease) both}
.tw-search{animation:spUp .7s .16s var(--ease) both}
.th-tool .th-ic{animation:spPop .6s var(--ease) both}
.th-tool h1{animation:spUp .6s .06s var(--ease) both}
.th-tool p,.th-tool .pills{animation:spUp .6s .12s var(--ease) both}
.card.tw{animation:spUp .6s .18s var(--ease) both}
/* scroll reveal (only active when JS adds html.rv-on) */
html.rv-on .rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
html.rv-on .rv.in{opacity:1;transform:none}
/* hover lifts */
html body .tile,html body .tc,html body .bcard,html body .rel-card,html body .st3,html body .st{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
html body .tile:hover,html body .tc:hover,html body .bcard:hover,html body .rel-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(30,50,110,.14)}
html body .st3:hover,html body .st:hover{transform:translateY(-3px)}
html body .tile .ti-i,html body .tc .tc-ic,html body .tc .ti-i,html body .mega .ti-i{transition:transform .35s var(--ease)}
html body .tile:hover .ti-i,html body .tc:hover .tc-ic,html body .tc:hover .ti-i,html body .mega a:hover .ti-i{transform:scale(1.12) rotate(-4deg)}
html body .bcard .bcov img{transition:transform .6s var(--ease)}
html body .bcard:hover .bcov img{transform:scale(1.06)}
html body .bcard .bcov{overflow:hidden}
.th-tool .th-ic{animation:spPop .6s var(--ease) both,spFloat 4.5s 1s ease-in-out infinite}
/* buttons + links */
html body .btn,html body .pic-btn,html body .sb2,html body .signin,html body button.primary{transition:transform .2s var(--ease),box-shadow .2s,background-color .2s}
html body .btn:hover,html body .pic-btn:hover,html body .sb2:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(45,91,255,.22)}
html body .btn:active,html body .sb2:active,html body button:active{transform:scale(.97)}
/* upload box */
html body .twdz{transition:transform .25s var(--ease),border-color .25s,background-color .25s,box-shadow .25s}
html body .twdz:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(45,91,255,.14)}
html body .twdz.on{animation:spPulse 1s infinite;border-color:#2d5bff}
html body .twdz .twi{animation:spFloat 3s ease-in-out infinite}
/* FAQ + header */
.faq details.q{transition:background-color .2s,box-shadow .2s}
.faq details.q[open]{box-shadow:0 8px 20px rgba(30,50,110,.08)}
.faq details.q[open] p{animation:spUp .35s var(--ease)}
.hd{transition:box-shadow .25s,background-color .25s}
.hd.sc{box-shadow:0 6px 24px rgba(16,24,40,.09)}
#top{transition:opacity .25s,transform .25s var(--ease)}
#top:hover{transform:translateY(-3px)}
/* cleaner tool page */
.th-tool .pills{gap:8px}
.th-tool .pill{font-size:13px;padding:5px 12px;background:#f3f6fd;color:#3b4a66;border:1px solid #e3eaf6;box-shadow:none}
.tnote{text-align:center;font-size:13.5px;color:#6b7686;margin:14px 0 6px}
.sp-sponsor{margin:18px 0}
.rate,.share{margin-top:18px}
.seo-content h2{margin-top:2em}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html.rv-on .rv{opacity:1;transform:none}}
/* tool header without logo: text only, centered */
html body .th-tool{display:block!important;text-align:center}
html body .th-tool .pills{justify-content:center}