/* TinyWow-style layer. Loaded last; only adds/overrides, nothing is deleted from the site. */

/* ---------- header icon buttons (dark mode, share) ---------- */
html body .tw-ib{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;cursor:pointer;color:#3a4352;transition:border-color .2s,color .2s,background .2s}
html body .tw-ib svg{width:20px;height:20px;display:block}
html body .tw-ib:hover{color:#1b86ea;border-color:#1b86ea!important}
html body .hd-r{gap:8px}

/* ---------- desktop mega menu with thumbnails ---------- */
@media(min-width:961px){
  html body .mega.tw-x{
    left:max(16px,calc(50% - 620px))!important;right:auto!important;
    width:1240px!important;max-width:calc(100vw - 32px)!important;
    display:flex!important;padding:0!important;gap:0;
    border-radius:0 0 18px 18px!important;
    transform:translateY(8px)!important;
  }
  html body .nv-i:hover>.mega.tw-x,html body .nv-i:focus-within>.mega.tw-x,html body .nv-i.open>.mega.tw-x{transform:none!important}
  .mega.tw-x h6{font:600 11px Poppins,system-ui,sans-serif;letter-spacing:.06em;color:#6b7686;text-transform:uppercase;margin:0 0 14px}
  .mega.tw-x .mx-ai{flex:0 0 300px;padding:22px 22px 24px 28px;border-right:1px solid #e8edf4}
  .mega.tw-x .mx-main{flex:1;min-width:0;padding:22px 30px 26px}
  .mega.tw-x .mx-ai-i{display:flex!important;align-items:center;gap:14px;padding:12px 10px;border-radius:12px;color:#1b2230}
  .mega.tw-x .mx-ai-i.first{padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid #e8edf4;border-radius:12px 12px 0 0}
  .mega.tw-x .mx-ai-i span{display:block}
  .mega.tw-x .mx-ai-i b{display:block;font-size:16px;font-weight:600;line-height:1.3}
  .mega.tw-x .mx-ai-i small{display:block;font-size:13px;color:#7a8596;line-height:1.5;margin-top:2px}
  .mega.tw-x .mx-ic{flex:none;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-style:normal;background:color-mix(in srgb,var(--c) 14%,#fff)}
  .mega.tw-x .mx-ic img{width:26px;height:26px}
  .mega.tw-x .mx-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  html body .mega.tw-x .mx-card{display:grid!important;grid-template-columns:1fr auto;column-gap:10px;padding:0!important;border-radius:14px;color:#1b2230;transform:none!important}
  html body .mega.tw-x .mx-card:hover{background:transparent!important}
  .mega.tw-x .mx-th{grid-column:1/-1;display:block;border-radius:12px;overflow:hidden;aspect-ratio:400/190;background:#eef2f9;transition:box-shadow .25s,transform .25s}
  .mega.tw-x .mx-th img{display:block;width:100%;height:100%;object-fit:cover}
  .mega.tw-x .mx-card:hover .mx-th{box-shadow:0 14px 28px -14px rgba(30,60,120,.45);transform:translateY(-2px)}
  .mega.tw-x .mx-ct{display:block;padding:14px 2px 6px}
  .mega.tw-x .mx-ct b{display:block;font-size:17px;font-weight:600;line-height:1.3}
  .mega.tw-x .mx-ct small{display:block;font-size:13.5px;color:#7a8596;margin-top:4px;line-height:1.45}
  .mega.tw-x .mx-ar{align-self:center;font-style:normal;font-size:20px;color:var(--c);transition:transform .2s;padding-right:4px}
  .mega.tw-x .mx-card:hover .mx-ar{transform:translateX(4px)}
  .mega.tw-x .mx-h2{margin-top:26px;padding-top:22px;border-top:1px solid #e8edf4}
  .mega.tw-x .mx-oth{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px}
  html body .mega.tw-x .mx-oth a{display:block;padding:10px 4px;font-size:16.5px;font-weight:500;color:#1b2230;border-radius:8px;transform:none!important}
  html body .mega.tw-x .mx-oth a:hover{color:#1b86ea;background:#f0f7ff!important}
  html body .mega.tw-x .mx-oth a.all{color:#1b86ea;font-weight:600}
}

/* mobile accordion: compact version of the same menu */
@media(max-width:960px){
  .mega.tw-x{flex-direction:column}
  .mega.tw-x h6{font:600 11px Poppins,system-ui,sans-serif;letter-spacing:.06em;color:#6b7686;text-transform:uppercase;margin:6px 8px 8px}
  .mega.tw-x .mx-ai,.mega.tw-x .mx-main{padding:8px 6px}
  .mega.tw-x .mx-ai-i{display:flex!important;align-items:center;gap:12px;padding:9px 8px;border-radius:10px;color:#1b2230}
  .mega.tw-x .mx-ai-i b{display:block;font-size:15px;font-weight:600}
  .mega.tw-x .mx-ai-i small{display:none}
  .mega.tw-x .mx-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff)}
  .mega.tw-x .mx-ic img{width:24px;height:24px}
  .mega.tw-x .mx-feat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mega.tw-x .mx-card{display:block!important;color:#1b2230;padding:0!important}
  .mega.tw-x .mx-th{display:block;border-radius:10px;overflow:hidden;aspect-ratio:400/190}
  .mega.tw-x .mx-th img{width:100%;height:100%;object-fit:cover;display:block}
  .mega.tw-x .mx-ct b{display:block;font-size:14px;font-weight:600;padding:8px 2px 0}
  .mega.tw-x .mx-ct small,.mega.tw-x .mx-ar{display:none}
  .mega.tw-x .mx-oth{display:grid;grid-template-columns:1fr 1fr}
  .mega.tw-x .mx-oth a{display:block;padding:9px 6px;font-size:14px;color:#1b2230}
  .mega.tw-x .mx-oth a.all{color:#1b86ea;font-weight:600}
}
@media(max-width:520px){.mega.tw-x .mx-oth{grid-template-columns:1fr}}
@media(max-width:600px){html body #twShare{display:none}html body .tw-ib{width:38px;height:38px}html body .hd-r{gap:6px}}

/* ---------- homepage carousel ---------- */
.tw-car-head{position:relative;text-align:left!important;max-width:1100px;margin:0 auto 26px!important;padding:0!important}
.tw-car-head h2{font-size:clamp(28px,4vw,46px)!important;line-height:1.15;margin:0 0 12px!important;text-align:left!important}
.tw-car-head p{text-align:left!important;margin:0!important;line-height:1.7;color:#5a6577}
.tw-car-nav{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:16px}
.tw-car-nav button{width:56px;height:56px;border-radius:50%;border:1px solid #dfe5ee;background:#fff;color:#2a3140;font-size:22px;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px -10px rgba(30,60,120,.4);transition:background .2s,color .2s,transform .2s,opacity .2s}
.tw-car-nav .next{background:#1b86ea;color:#fff;border-color:#1b86ea}
.tw-car-nav button:hover:not(:disabled){transform:translateY(-2px)}
.tw-car-nav button:disabled{opacity:.45;cursor:default}
.tw-car{display:flex;gap:20px;max-width:1100px;margin:0 auto;padding:6px 4px 26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tw-car::-webkit-scrollbar{display:none}
html body .tw-cc{flex:0 0 calc((100% - 40px)/3);min-width:250px;scroll-snap-align:start;background:#fff;border:1px solid #e9eef6;border-radius:16px;padding:14px 14px 20px;display:flex;flex-direction:column;gap:6px;color:#1b2230;text-decoration:none;box-shadow:0 10px 30px -22px rgba(25,60,120,.5);transition:transform .25s,box-shadow .25s}
html body .tw-cc:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(25,60,120,.55)}
.tw-cth{display:block;border-radius:12px;overflow:hidden;aspect-ratio:400/190;margin-bottom:12px;background:#eef2f9}
.tw-cth img{display:block;width:100%;height:100%;object-fit:cover}
.tw-cc b{font-size:20px;font-weight:600;padding:0 4px;line-height:1.3}
.tw-cd{font-size:15px;line-height:1.55;color:#5f6b7d;padding:0 4px;flex:1}
.tw-cc em{font-style:normal;font-weight:600;font-size:15px;color:#1b86ea;padding:10px 4px 0;display:inline-flex;gap:6px;align-items:center}
.tw-cc em i{font-style:normal;transition:transform .2s}
.tw-cc:hover em i{transform:translateX(4px)}
@media(max-width:1100px){html body .tw-cc{flex-basis:calc((100% - 20px)/2)}}
@media(max-width:760px){
  html body .tw-cc{flex-basis:78%}
  .tw-car-nav{position:static;transform:none;margin-top:16px}
  .tw-car-nav button{width:46px;height:46px;font-size:18px}
}

/* ---------- toast ---------- */
#twToast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#10131a;color:#fff;padding:10px 18px;border-radius:10px;font:500 14px Poppins,system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9999}
#twToast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- dark mode (colour inversion with media/brand surfaces restored) ---------- */
html.tw-dark{background:#fff!important;filter:invert(1) hue-rotate(180deg);color-scheme:dark}
html.tw-dark :is(img,video,canvas,iframe,picture,ins.adsbygoogle,.tc-top,.sh-d,.hlr,a.signin,#acct,.tw-search button,.tw-car-nav .next,.mx-th,.tw-cth,.bcov,.pg-card img,.ti,.mx-ic){filter:invert(1) hue-rotate(180deg)}
html.tw-dark :is(.tc-top,.mx-th,.tw-cth,.bcov,.ti,.mx-ic) :is(img,svg,canvas){filter:none}
html.tw-dark body{background:#f5f7fb}
@media (prefers-reduced-motion:reduce){.tw-cc,.tw-car-nav button,.mega.tw-x *{transition:none!important}.tw-car{scroll-behavior:auto}}

html body .feat.tw-feat-orig{display:none!important}

@media(max-width:480px){
  html body .hd-in{padding:0 10px;gap:6px}
  html body .logo svg{width:32px;height:32px}
  html body .logo .lt b{font-size:17px}
  html body .logo .lt small{display:none}
  html body .tw-ib,html body .hd-r .ib{width:36px;height:36px}
  html body a.signin,html body #acct.ib{padding:0 12px;height:36px;font-size:13px}
  html body .hd-r{gap:5px}
}

/* ================= Premium FAQ + content polish ================= */
html body .tw-faq{max-width:920px;margin:64px auto 12px;padding:0 4px}
html body .tw-faq-in{background:linear-gradient(180deg,#f4f8ff 0,#fff 140px);border:1px solid #e6edf8;border-radius:28px;padding:44px clamp(16px,4vw,44px) 38px;box-shadow:0 30px 60px -44px rgba(30,70,140,.45)}
html body .tw-faq h2{font:700 clamp(22px,3vw,31px)/1.2 Poppins,'Sora',system-ui,sans-serif;text-align:center;margin:0 0 10px;color:#10131a;letter-spacing:-.01em}
html body .tw-faq-sub{text-align:center;margin:0 auto 30px;color:#5f6b7d;font-size:16px;max-width:560px}
html body .tw-faq .faq{display:grid;gap:12px}
html body .tw-faq details.q{margin:0;padding:0;border:1px solid #e3eaf5!important;border-radius:16px!important;background:#fff!important;box-shadow:0 2px 0 rgba(30,60,120,.03);transition:border-color .2s,box-shadow .25s,transform .2s}
html body .tw-faq details.q:hover{border-color:#bcd7f7!important}
html body .tw-faq details.q[open]{border-color:#1b86ea!important;box-shadow:0 18px 36px -24px rgba(27,134,234,.55)}
html body .tw-faq details.q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font:600 17px/1.45 Poppins,system-ui,sans-serif;color:#141a26;cursor:pointer;list-style:none}
html body .tw-faq details.q summary::-webkit-details-marker{display:none}
html body .tw-faq details.q summary::after{content:'+';flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eaf3ff;color:#1b86ea;font:500 22px/1 Poppins,system-ui,sans-serif;transition:transform .25s,background .2s,color .2s}
html body .tw-faq details.q[open] summary::after{content:'+';transform:rotate(45deg);background:#1b86ea;color:#fff}
html body .tw-faq details.q summary:focus-visible{outline:3px solid rgba(27,134,234,.35);outline-offset:2px;border-radius:14px}
html body .tw-faq details.q p{margin:0;padding:0 22px 20px;color:#4d5a6d;font-size:16px;line-height:1.75;max-width:78ch}
html body .tw-faq details.q p a{color:#1b86ea;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(27,134,234,.3)}
html body .tw-faq details.q p a:hover{border-bottom-color:#1b86ea}

/* long-form "About this tool" block: calmer, more readable */
html body .seo-wrap{max-width:920px;margin:48px auto 0!important}
html body .seo-content{max-width:none;background:#fff;border:1px solid #e8eef7;border-radius:24px;padding:clamp(22px,4vw,44px);box-shadow:0 24px 50px -42px rgba(30,70,140,.4)}
html body .seo-content h2{font:700 clamp(20px,2.4vw,26px)/1.3 Poppins,system-ui,sans-serif;color:#10131a;margin:1.6em 0 .5em}
html body .seo-content h2:first-child{margin-top:0}
html body .seo-content p,html body .seo-content li{color:#4d5a6d;font-size:16.5px;line-height:1.8}
html body .seo-content ul{list-style:none;padding:0;margin:10px 0}
html body .seo-content ul li{position:relative;padding-left:28px;margin:8px 0}
html body .seo-content ul li::before{content:'';position:absolute;left:4px;top:.62em;width:12px;height:12px;border-radius:50%;background:#e3f0ff;box-shadow:inset 0 0 0 3px #1b86ea}
html body .seo-content a{color:#1b86ea}

/* related tools + step cards: consistent premium cards */
html body .tile{border-radius:16px;border:1px solid #e8eef7;transition:transform .25s,box-shadow .25s,border-color .2s}
html body .tile:hover{transform:translateY(-3px);border-color:#bcd7f7;box-shadow:0 20px 36px -26px rgba(30,70,140,.5)}
html body .th-tool h1{letter-spacing:-.01em}
html body .crumb{font-size:14px;color:#6b7686}
html body .crumb a{color:#1b86ea}

@media(max-width:600px){
  html body .tw-faq{margin-top:44px}
  html body .tw-faq-in{border-radius:20px;padding:30px 12px 24px}
  html body .tw-faq details.q summary{padding:15px 14px;font-size:15.5px}
  html body .tw-faq details.q p{padding:0 14px 16px;font-size:15px}
  html body .seo-content{border-radius:18px}
}