/* ============================================================
   ePDFConverter — shared UI (nav, footer, tool pages, content pages).
   Homepage also loads css/home-v2.css. Tool pages also load css/styles.css.
   ============================================================ */

:root{
  --primary:#4f46e5;
  --primary2:#7c3aed;
  --primary-dark:#4338ca;
  --primary-soft:#eef2ff;
  --text:#12211f;
  --muted:#5b6b68;
  --border:#e4ebe8;
  --bg:#fff;
  --soft:#fff;
  --card:#fff;
  --bg-soft:#fff;
  --radius:18px;
  --shadow:0 10px 28px rgba(18,33,31,.08);
  --success:#2563eb;
  --danger:#dc2626;
  --ink:#0b1f1c;
  --cream:#fff;
  --sand:#fff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html{scrollbar-gutter:stable}
body{font-family:"Plus Jakarta Sans",Inter,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.55;overflow-x:clip}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:1440px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.skip-link{position:absolute;left:16px;top:-48px;z-index:1000;padding:10px 16px;border-radius:10px;background:#4f46e5;color:#fff;font-weight:700;font-size:14px}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* NAV */
.nav{height:72px;border-bottom:1px solid #eef2ff;background:#fff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(79,70,229,.04)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.nav-inner.container{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding:0 28px;box-sizing:border-box}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;white-space:nowrap;flex:0 0 auto;color:var(--ink)}
.logo-mark{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:12px;overflow:hidden;box-shadow:0 6px 14px rgba(79,70,229,.22);color:#4f46e5}
.logo-mark img{width:40px;height:40px;display:block;object-fit:cover}
.logo-mark svg{width:40px;height:40px;display:block}
.brand-wordmark{font-size:20px;line-height:1;font-weight:800;letter-spacing:-.5px;white-space:nowrap}
.brand-wordmark small{display:block;margin-top:3px;font-size:10px;line-height:1;font-weight:500;color:#6b7280;letter-spacing:-.1px}
.links{display:flex;align-items:center;justify-content:flex-start;gap:6px;flex:1 1 auto;margin-left:4px;font-size:14.5px}
@media(min-width:901px){
  .links{position:static !important;top:auto !important;height:auto !important;max-height:none !important;overflow:visible;pointer-events:auto}
}
.links>a,.links .drop-toggle{white-space:nowrap;color:#333;background:none;border:0;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:10px;transition:background .15s,color .15s}
.links > .drop:nth-child(1) > .drop-toggle:hover,
.links > .drop:nth-child(1) > .drop-toggle:focus-visible,
.links > .drop:nth-child(1).open > .drop-toggle{background:#fee2e2;color:#dc2626}
.links > .drop:nth-child(2) > .drop-toggle:hover,
.links > .drop:nth-child(2) > .drop-toggle:focus-visible,
.links > .drop:nth-child(2).open > .drop-toggle{background:#dcfce7;color:#16a34a}
.links > .drop:nth-child(3) > .drop-toggle:hover,
.links > .drop:nth-child(3) > .drop-toggle:focus-visible,
.links > .drop:nth-child(3).open > .drop-toggle{background:#dbeafe;color:#2563eb}
.links > a:nth-child(4):hover,
.links > a:nth-child(4):focus-visible{background:#ede9fe;color:#6d28d9}
.links > a:nth-child(5):hover,
.links > a:nth-child(5):focus-visible{background:#fce7f3;color:#db2777}
.links > a:nth-child(6):hover,
.links > a:nth-child(6):focus-visible{background:#e0e7ff;color:#4f46e5}
.links .caret{display:inline-flex;align-items:center;justify-content:center;margin-left:2px;transition:transform .15s}
.links .caret svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.drop.open .caret{transform:rotate(180deg)}
.drop{position:relative}
.drop-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:230px;background:#fff;border:1px solid var(--border);border-radius:16px;
  box-shadow:0 18px 40px rgba(18,33,31,.12);padding:9px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none;z-index:40;
}
.drop.open .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.drop-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
.drop-menu a{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;font-size:13px;font-weight:600;color:#15203a;white-space:nowrap}
.drop-menu a:hover,.drop-menu a.active{background:#eef2ff;color:var(--primary)}
.drop-menu .mini{width:16px;height:16px;min-width:16px;border-radius:4px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800}
.nav-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}

.lang-drop .drop-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;color:#15203a;cursor:pointer;padding:6px 10px;white-space:nowrap;border-radius:10px;transition:background .15s,color .15s}
.lang-drop .drop-toggle:hover,.lang-drop.open > .drop-toggle{background:#eef2ff;color:var(--primary)}
.lang-drop .lang-icon{width:16px;height:16px;flex:none}
.lang-drop .lang-icon circle,.lang-drop .lang-icon path{fill:none;stroke:currentColor;stroke-width:2}
.lang-drop .caret svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lang-drop .drop-menu{left:auto;right:0;transform:translateY(6px);min-width:180px}
.lang-drop.open .drop-menu{transform:translateY(0)}
.lang-option{display:flex;align-items:center;gap:8px;cursor:pointer}
.lang-option.active{background:#eef2ff;color:var(--primary)}
.lang-option.active::after{content:"\2713";margin-left:auto;font-size:12px;font-weight:800}
html[data-theme="dark"] .lang-drop .drop-toggle{color:#dfe4ee}
html[data-theme="dark"] .lang-drop .drop-toggle:hover,html[data-theme="dark"] .lang-drop.open > .drop-toggle{background:#221d3f;color:var(--primary)}
html[data-theme="dark"] .lang-option{color:#dfe4ee}
html[data-theme="dark"] .lang-option.active{background:#221d3f;color:var(--primary)}

/* Hide Google Translate widget chrome */
.skiptranslate,.goog-te-banner-frame,iframe.skiptranslate,#goog-gt-tt,.goog-te-balloon-frame,.goog-tooltip,.goog-text-highlight{display:none!important;visibility:hidden!important;pointer-events:none!important}
body{top:0px!important;position:static!important}

.btn{border:0;border-radius:999px;padding:12px 19px;font-weight:700;cursor:pointer;font-size:14px}
.btn-primary{background:linear-gradient(180deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 10px 24px rgba(79,70,229,.22)}
.btn-primary:hover{background:linear-gradient(180deg,#4f46e5,#4338ca)}

.nav-actions .btn{min-width:0;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:14px;font-weight:700;padding:0 18px;box-shadow:none}
.menu{display:none}

h1,h2,h3,.section-title{
  user-select:text;-webkit-user-select:text;-moz-user-select:text;
  cursor:text;
}
h1{font-size:clamp(26px,3.3vw,40px);line-height:1.08;letter-spacing:-1.4px;margin-bottom:14px;overflow-wrap:break-word}

h1 strong{color:var(--primary);-webkit-text-fill-color:var(--primary)}

/* Hero left column: even vertical rhythm between text blocks */

/* HERO MOCKUP */

.dot{width:8px;height:8px;border-radius:50%;background:#ddd}

.c-red{background:#ef3340}.c-orange{background:#ff9f1c}.c-blue{background:#2879f0}
.c-green{background:#18b868}.c-purple{background:#7250e9}.c-cyan{background:#19b9d0}

@keyframes cloudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* SECTIONS */
.section{padding:38px 0}
.section-title{font-size:24px;line-height:1.2;margin-bottom:20px}
.section-title:before{content:"↗";color:var(--primary);margin-right:8px;font-size:24px}

.blue{background:#2876ed}.green{background:#6366f1}

.red-mini{background:#ee3b42}.orange-mini{background:#8b5cf6}.purple-mini{background:#7250e9}
.green-mini{background:#6366f1}.blue-mini{background:#2e73ef}

/* ===== INLINE SVG ICONS ===== */
.drop-menu .mini svg,.step-icon svg,.nav-actions .btn svg{
  width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block;
}

.drop-menu .mini{padding:2px}

.home-section .step-icon{padding:0}
.home-section .step-icon svg{width:24px;height:24px}

.nav-actions .btn{gap:8px}
.nav-actions .btn svg{width:18px;height:18px;flex:none}

/* HERO TRUST ICONS: colorful chips */

/* PRIVACY */

/* STEPS (homepage #how horizontal layout only) */

#toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:220;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#0f172a;color:#fff;padding:11px 18px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 12px 28px rgba(15,23,42,.22);max-width:90vw;pointer-events:auto}
.toast.err{background:#dc2626}

/* FAQ */
.faq{border:1px solid var(--border);border-radius:9px;overflow:hidden;position:relative;z-index:5}
.faq .faq-item{cursor:pointer;position:relative;z-index:5}
.faq button.faq-q{
  width:100%;padding:15px 17px;background:#fff;border:0;border-bottom:1px solid #edf0f5;text-align:left;font-size:15px;font-weight:600;cursor:pointer;color:#17213b;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;line-height:1.45;overflow-wrap:anywhere;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(81,52,244,.12);position:relative;z-index:5;appearance:none;-webkit-appearance:none;pointer-events:auto
}
.faq summary.faq-q{
  display:block;width:100%;padding:0;background:#fff;border:0;border-bottom:1px solid #edf0f5;text-align:left;font-size:15px;font-weight:600;cursor:pointer;color:#17213b;list-style:none;position:relative;z-index:5;pointer-events:auto;appearance:none;-webkit-appearance:none;touch-action:manipulation
}
.faq summary.faq-q::-webkit-details-marker{display:none}
.faq summary.faq-q::marker{content:""}
.faq .faq-q-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 17px;min-height:48px;line-height:1.45;overflow-wrap:anywhere;pointer-events:none}
.faq .faq-item:last-child > button,.faq .faq-item:last-child > .faq-q{border-bottom:0}
.faq .faq-chev{float:none;color:#687188;transition:transform .2s;flex:0 0 auto;pointer-events:none;user-select:none}
.faq button.open span,.faq .faq-item.open .faq-chev,.faq button.open .faq-chev,.faq .faq-item[open] .faq-chev{transform:rotate(180deg);color:var(--primary)}
.faq-item:not(details) > .faq-answer,.faq-item:not(details) > .faq-a{background:#fcfbff;border-bottom:1px solid #f0f1f6;max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item.open:not(details) > .faq-answer,.faq-item.open:not(details) > .faq-a{max-height:640px}
details.faq-item > .faq-answer,
details.faq-item > .faq-a{background:#fcfbff;border-bottom:1px solid #f0f1f6;max-height:none;overflow:visible}
.faq-answer p,.faq .faq-a p{padding:12px 17px;font-size:14px;color:#55627a;line-height:1.6;overflow-wrap:break-word;user-select:text;-webkit-user-select:text}
.faq .faq-item:last-child .faq-answer,.faq .faq-item:last-child .faq-a{border-bottom:0}

.page-meta{margin:34px 0 8px;padding:18px 22px;background:var(--soft,#f7f8ff);border:1px solid var(--border,#e7eaf3);border-radius:12px;font-size:13.5px;color:var(--muted,#647089)}
.page-meta p{margin:0}
.page-meta p + p{margin-top:6px}
.page-meta strong{color:var(--text,#17213b)}
.page-meta a{color:var(--primary);font-weight:600}

/* FOOTER */
footer{border-top:1px solid #ece8dc;padding:64px 0 0;margin-top:40px;background:#12211f}
.footer-grid{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(0,.9fr));gap:48px 40px;align-items:start}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;color:#f6f3ec;min-width:0}
.footer-brand .brand-wordmark{font-size:22px;letter-spacing:-.6px}
.footer-brand .logo{flex:0 0 auto;margin:0}
.footer-brand p{font-size:14.5px;line-height:1.65;color:#c7d2fe;max-width:280px;margin:16px 0 0;overflow-wrap:break-word}
footer h4{font-size:12.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;margin:8px 0 18px;color:#f6f3ec;overflow-wrap:break-word}
footer ul{list-style:none;margin:0;padding:0}
footer li{list-style:none;font-size:14.5px;line-height:1.2;color:#c7d2fe;margin:0}
footer li + li{margin-top:12px}
footer li a{color:#c7d2fe;display:inline-block;font-weight:500;transition:color .15s ease;overflow-wrap:break-word}
footer li a:hover{color:#fff}
.copyright{text-align:center;border-top:1px solid #2a3b38;margin-top:48px;padding:20px 0;font-size:13px;color:#a5b4fc;letter-spacing:.2px}

/* ===== TOOL PAGES: re-theme shared components ===== */
.home-hero.tool-hero{
  position:relative;overflow:hidden;
  text-align:left;padding:46px 0 30px;
  background:radial-gradient(circle at 85% 20%,rgba(124,58,237,.12),transparent 42%),linear-gradient(180deg,#fff,#f7f3ea);
  border-bottom:1px solid #efe8d8;
  isolation:isolate;
  z-index:1;
}
.home-hero.tool-hero::before,.home-hero.tool-hero::after{pointer-events:none}
.home-hero.tool-hero .hero-badge{margin-bottom:16px;position:relative;z-index:2}
.home-hero.tool-hero h1{font-size:40px;line-height:1.15;letter-spacing:-1px;margin:0 0 12px;max-width:none;position:relative;z-index:10;overflow-wrap:break-word}
.home-hero.tool-hero .hero-sub{max-width:740px;font-size:16px;color:var(--muted);margin:0 0 6px;position:relative;z-index:10}

.dropzone{border:2px dashed #c4b5fd;border-radius:22px;background:linear-gradient(180deg,#fff,#f5f3ff);color:#5b6b68}
.dropzone svg{color:#4f46e5}
.dz-btn{background:linear-gradient(180deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.22)}
.dz-btn:hover{background:linear-gradient(180deg,#4f46e5,#4338ca);box-shadow:0 10px 24px rgba(79,70,229,.28)}

.options-card{border-radius:14px;box-shadow:0 6px 22px rgba(28,38,72,.06)}

/* CTA banner */
.cta-banner{background:linear-gradient(90deg,#eef2ff,#f7f3ea);border:1px solid #ddd6fe}
.cta-banner h2{color:#17213b}

@media(max-width:1100px){
  .container{width:100%;max-width:1440px;padding:0 16px}
  .nav{height:72px}
  .nav-inner{min-height:68px;gap:12px}
  .nav-inner.container{padding:0 16px}
  .links{gap:6px;margin-left:4px;font-size:13px}
  .nav-actions{gap:6px}
  .nav-actions .lang-drop{display:none}
  .nav-actions .btn{min-width:0;padding:0 14px}
  .brand-wordmark{font-size:20px}
  .brand-wordmark small{font-size:10px}
   .logo-mark,.logo-mark svg,.logo-mark img{width:40px;height:40px}
   .logo-mark{border-radius:12px}
   .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
   .footer-brand{grid-column:1/-1;margin-bottom:8px}
   .footer-brand p{max-width:420px}
}

@media(max-width:960px){
  .nav-actions .btn{display:none}
}

@media(max-width:900px){
  .steps{grid-template-columns:1fr;gap:18px}

}

@media(max-width:820px){
  .container{width:100%;max-width:1440px;padding:0 14px}
  h1{font-size:42px}
  .section{padding:30px 0}
   .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
   .footer-brand{grid-column:1/-1}
}

@media(max-width:768px){
  .container{width:100%;max-width:1440px;padding:0 20px}

}

@media(max-width:560px){
  .container{width:100%;max-width:1440px;padding:0 20px}
  h1{font-size:clamp(23px,7.6vw,34px);letter-spacing:-1px;line-height:1.12}
  .btn{width:100%;text-align:center;padding:12px 15px}
  .section{padding:25px 0}
  .section-title{font-size:20px;margin-bottom:14px}
  .faq button,.faq .faq-q{padding:14px 14px;font-size:15px;min-height:48px}
   footer{padding:40px 0 0}
   .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 20px}
   footer h4{font-size:12px;margin-bottom:14px}
   footer li{font-size:14px}
   footer li + li{margin-top:10px}
   .footer-brand{grid-column:1/-1}
   .footer-brand p{font-size:14px;max-width:none}
   .copyright{font-size:12.5px;margin-top:28px;padding:16px 0}
  .home-hero.tool-hero{padding:32px 0 22px}
  .home-hero.tool-hero h1{font-size:clamp(26px,8vw,40px);letter-spacing:-.6px;overflow-wrap:break-word}
  .home-hero.tool-hero .hero-sub{font-size:13.5px}
}

@media(max-width:370px){
  h1{font-size:clamp(23px,7.6vw,34px)}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
}

/* MOBILE NAV PANEL */
html.nav-open,body.nav-open{overflow:hidden;height:100%;overscroll-behavior:none}
body.nav-open{padding-right:var(--nav-scrollbar,0px)}
@media(max-width:900px){
  .nav{height:66px;overflow:visible;transform:none;filter:none;contain:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-inner{min-height:66px;overflow:visible}
  .brand-wordmark{font-size:20px}
  .brand-wordmark small{font-size:10px;margin-top:5px}
   .logo-mark,.logo-mark svg,.logo-mark img{width:40px;height:40px}
   .logo-mark{border-radius:10px}
  .links{
    display:none;
    position:fixed;
    left:0;right:0;
    top:var(--epdf-nav-h,66px);
    width:100%;
    height:calc(100dvh - var(--epdf-nav-h,66px));
    max-height:calc(100dvh - var(--epdf-nav-h,66px));
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start !important;
    gap:0;
    margin:0;
    padding:8px 20px 32px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    z-index:200;
    border-top:1px solid var(--border);
    box-sizing:border-box;
  }
  .links:not(.open){display:none;pointer-events:none;height:0;max-height:0}
  .links.open{display:flex;pointer-events:auto}
  .links>a,.links .drop-toggle{font-size:16px;padding:13px 4px;border-bottom:1px solid #f0f1f6;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box}
  .drop{display:flex;flex-direction:column;width:100%;flex:0 0 auto}
  .drop-menu{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    box-shadow:none;
    border:0;
    border-left:2px solid #efeaff;
    border-radius:0;
    margin:4px 0 8px 10px;
    padding:2px 6px;
    min-width:0;
    display:none;
  }
  .drop.open .drop-menu{display:flex;flex-direction:column;transform:none !important;opacity:1;visibility:visible}
  .drop-menu a{padding:10px 10px;font-size:14px;white-space:normal}
  .nav-actions .lang-drop,.nav-actions .btn{display:none}
  .menu{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);font-size:22px;line-height:1;text-align:center;cursor:pointer;user-select:none;position:relative;z-index:210;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .menu.open{background:#f5f3ff;color:var(--primary);border-color:var(--primary)}
  .menu:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
}

@media(max-width:560px){
  .nav{height:64px}
  .nav-inner{min-height:64px}
  .logo{gap:8px}
   .logo-mark,.logo-mark svg,.logo-mark img{width:36px;height:36px}
   .logo-mark{border-radius:9px}
  .brand-wordmark{font-size:17px;letter-spacing:-.4px}
  .brand-wordmark small{font-size:8px;margin-top:4px}
  .links{
    top:var(--epdf-nav-h,64px);
    height:calc(100dvh - var(--epdf-nav-h,64px));
    max-height:calc(100dvh - var(--epdf-nav-h,64px));
  }
}

/* ============================================================
   DARK MODE
   ============================================================ */
.theme-btn{
  width:40px;height:40px;flex:0 0 40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:10px;background:#fff;color:#15203a;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.theme-btn svg{width:18px;height:18px}
.theme-btn:hover{color:var(--primary);border-color:var(--primary2)}
.theme-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.theme-icon-sun{display:none}
html[data-theme="dark"] .theme-icon-moon{display:none}
html[data-theme="dark"] .theme-icon-sun{display:block}

html[data-theme="dark"]{
  --primary:#a78bfa;
  --primary2:#c4b5fd;
  --primary-dark:#7c3aed;
  --primary-soft:#12312e;
  --text:#e7f4f1;
  --muted:#9bb5b0;
  --border:#24403c;
  --bg:#071412;
  --soft:#0e1f1c;
  --success:#818cf8;
  --danger:#f87171;
  --bg-soft:#0c1c1a;
  --card:#102422;
  --cream:#0e1f1c;
  --sand:#12312e;
  color-scheme:dark;
}
html[data-theme="dark"] body{background:#0b1220;color:var(--text)}
html[data-theme="dark"] .nav{background:#0e1626;border-bottom-color:#1f2940}
html[data-theme="dark"] .logo,html[data-theme="dark"] .brand-wordmark,html[data-theme="dark"] .footer-brand{color:#e7ebf4}
html[data-theme="dark"] .brand-wordmark small{color:#97a2b9}
html[data-theme="dark"] .links>a,html[data-theme="dark"] .links .drop-toggle,html[data-theme="dark"] .theme-btn{color:#dfe4ee}
html[data-theme="dark"] .theme-btn{background:#131b2f;border-color:#27314a}
html[data-theme="dark"] .links > .drop:nth-child(1) > .drop-toggle:hover,
html[data-theme="dark"] .links > .drop:nth-child(1) > .drop-toggle:focus-visible,
html[data-theme="dark"] .links > .drop:nth-child(1).open > .drop-toggle{background:#3f1d1d;color:#fca5a5}
html[data-theme="dark"] .links > .drop:nth-child(2) > .drop-toggle:hover,
html[data-theme="dark"] .links > .drop:nth-child(2) > .drop-toggle:focus-visible,
html[data-theme="dark"] .links > .drop:nth-child(2).open > .drop-toggle{background:#16321f;color:#86efac}
html[data-theme="dark"] .links > .drop:nth-child(3) > .drop-toggle:hover,
html[data-theme="dark"] .links > .drop:nth-child(3) > .drop-toggle:focus-visible,
html[data-theme="dark"] .links > .drop:nth-child(3).open > .drop-toggle{background:#1e3a5f;color:#93c5fd}
html[data-theme="dark"] .links > a:nth-child(4):hover,
html[data-theme="dark"] .links > a:nth-child(4):focus-visible{background:#2e1f4d;color:#c4b5fd}
html[data-theme="dark"] .links > a:nth-child(5):hover,
html[data-theme="dark"] .links > a:nth-child(5):focus-visible{background:#3f1d32;color:#f9a8d4}
html[data-theme="dark"] .links > a:nth-child(6):hover,
html[data-theme="dark"] .links > a:nth-child(6):focus-visible{background:#1e1b4b;color:#a5b4fc}
html[data-theme="dark"] .drop-menu{background:#141d33;border-color:#27314a;box-shadow:0 18px 40px rgba(0,0,0,.5)}
html[data-theme="dark"] .drop-menu a{color:#dfe4ee}
html[data-theme="dark"] .drop-menu a:hover,html[data-theme="dark"] .drop-menu a.active{background:#221d3f;color:var(--primary)}

html[data-theme="dark"] .faq button,
html[data-theme="dark"] .faq summary.faq-q,
html[data-theme="dark"] .faq .faq-q-inner{background:#131b2f;color:#e7ebf4;border-bottom-color:#1f2940}
html[data-theme="dark"] .faq button span,
html[data-theme="dark"] .faq .faq-chev{color:#97a2b9}
html[data-theme="dark"] .faq-answer{background:#10182b;border-bottom-color:#1f2940}
html[data-theme="dark"] .faq-answer p{color:#97a2b9}
html[data-theme="dark"] .page-meta{background:#10182b;border-color:#1f2940;color:#97a2b9}
html[data-theme="dark"] .page-meta strong{color:#e7ebf4}
html[data-theme="dark"] footer{border-top-color:#1f2940;background:linear-gradient(180deg,#0d1526,#0b1220)}
html[data-theme="dark"] footer h4{color:#e7ebf4}
html[data-theme="dark"] footer li a{color:#97a2b9}
html[data-theme="dark"] .copyright{color:#7b8394;border-top-color:#1f2940}
html[data-theme="dark"] .menu{background:#131b2f;color:var(--text);border-color:#27314a}
html[data-theme="dark"] .menu.open{background:#221d3f;color:var(--primary);border-color:var(--primary)}
html[data-theme="dark"] .home-hero.tool-hero{background:radial-gradient(circle at 85% 20%,rgba(117,88,255,.14),transparent 40%),linear-gradient(180deg,#0b1220,#0e1524)}
html[data-theme="dark"] .dropzone{border-color:#3a315f;background:linear-gradient(180deg,#10182b,#0e1524);color:#97a2b9}
html[data-theme="dark"] .dropzone:hover,html[data-theme="dark"] .dropzone.dragover{background:#121b33}
html[data-theme="dark"] .cta-banner{background:linear-gradient(90deg,#181433,#151233);border-color:#3a315f}
html[data-theme="dark"] .hero-badge{border-color:#3a315f}

html[data-theme="dark"] .faq-item.open{border-color:#4a3f7a}

html[data-theme="dark"] .step-icon.blue{background:#15224a;color:#7aa2ff}
html[data-theme="dark"] .step-icon.indigo{background:#1c1b4a;color:#a5a0ff}
html[data-theme="dark"] .step-icon.green{background:#0f2b1e;color:#818cf8}
html[data-theme="dark"] .step-icon.amber{background:#2c2410;color:#fbbf24}

html[data-theme="dark"] .input,html[data-theme="dark"] .select,html[data-theme="dark"] input[type="text"],html[data-theme="dark"] input[type="number"],html[data-theme="dark"] input[type="email"],html[data-theme="dark"] input[type="password"],html[data-theme="dark"] textarea,html[data-theme="dark"] select{background:#10182b;border-color:#27314a;color:var(--text)}
html[data-theme="dark"] .seg-btn.active{background:#221d3f;color:var(--primary)}
html[data-theme="dark"] .chip{background:#131b2f;border-color:#27314a}
html[data-theme="dark"] .chip .chip-thumb{background:#131b2f;border-color:#27314a}
html[data-theme="dark"] .chip .chip-x:hover{background:#33151a;color:var(--danger)}
html[data-theme="dark"] .sw-draw-wrap #sg-draw,html[data-theme="dark"] #sg-type-preview,html[data-theme="dark"] .sig-upload-preview,html[data-theme="dark"] .sw-thumb,html[data-theme="dark"] .ve-toolbar,html[data-theme="dark"] .ve-tool{
  background:#131b2f;border-color:#27314a;color:var(--text);
}
html[data-theme="dark"] .ve-tool:hover{border-color:#4a3f7a}
html[data-theme="dark"] .ve-tool.active{background:#221d3f;color:var(--primary);border-color:var(--primary)}

html[data-theme="dark"] .sw-thumb.active{background:#221d3f;color:var(--primary)}
html[data-theme="dark"] .options-card{background:#131b2f;border-color:#27314a}

@media(max-width:900px){
  html[data-theme="dark"] .links{background:#0e1626;border-top-color:#1f2940}
  html[data-theme="dark"] .links>a,html[data-theme="dark"] .links .drop-toggle{border-bottom-color:#1f2940}
}

/* ============================================================
   HERO DROP ZONE INTERACTION + CONTEXT-AWARE TOOL PICKER
   ============================================================ */

.hero-modal-open{overflow:hidden}
.hero-modal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;
  visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s ease,visibility .2s ease;
}
.hero-modal.open{visibility:visible;opacity:1;pointer-events:auto}
.hero-modal-backdrop{position:absolute;inset:0;background:rgba(15,20,38,.5);backdrop-filter:blur(3px)}
.hero-modal-card{
  position:relative;width:min(460px,100%);background:#fff;border:1px solid var(--border);
  border-radius:18px;box-shadow:0 24px 60px rgba(15,20,45,.28);padding:22px;
  transform:translateY(10px) scale(.98);transition:transform .22s ease;
  max-height:calc(100vh - 40px);overflow:auto;
}
.hero-modal.open .hero-modal-card{transform:none}
.hero-modal-close{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);background:#fff;color:var(--muted);font-size:18px;
  line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s;
}
.hero-modal-close:hover{color:var(--primary);border-color:var(--primary2)}
.hero-modal-file{
  display:flex;align-items:center;gap:12px;background:var(--soft);
  border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:16px;
}
.hm-file-icon{
  width:40px;height:40px;min-width:40px;border-radius:9px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:11px;
}
.hm-icon-pdf{background:#ef3340}
.hm-icon-image{background:#20b866}
.hm-icon-image svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hm-file-txt{min-width:0}
.hm-file-name{display:block;font-weight:700;font-size:13px;color:var(--text);word-break:break-all}
.hm-file-meta{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.hero-modal-card h3{font-size:18px;line-height:1.25;margin-bottom:6px;color:var(--text)}
.hero-modal-sub{font-size:12px;color:var(--muted);margin-bottom:16px}
.hero-modal-options{display:grid;gap:10px}
.hm-option{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid var(--border);background:#fff;border-radius:13px;padding:12px;
  cursor:pointer;transition:border-color .15s,background .15s,transform .15s;font-family:inherit;
}
.hm-option:hover{border-color:#b9aaff;background:var(--primary-soft);transform:translateY(-1px)}
.hm-primary{border-color:#b9aaff;box-shadow:0 6px 16px rgba(81,52,244,.10)}
.hm-opt-icon{width:38px;height:38px;min-width:38px;border-radius:10px;display:grid;place-items:center;color:#fff}
.hm-opt-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hm-opt-txt{flex:1;min-width:0}
.hm-opt-txt b{display:block;font-size:13.5px;color:var(--text)}
.hm-opt-txt small{font-size:11px;color:var(--muted)}
.hm-opt-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.hm-rec{
  font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  color:var(--primary);background:var(--primary-soft);border:1px solid #ddd5ff;
  padding:2px 7px;border-radius:20px;white-space:nowrap;
}
.hm-opt-arrow{color:var(--primary);font-size:18px;font-weight:800;line-height:1}
.hero-modal-cancel{
  display:block;width:100%;margin-top:16px;padding:11px;border:1px solid var(--border);
  border-radius:11px;background:#fff;color:var(--muted);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:.15s;
}
.hero-modal-cancel:hover{color:var(--text);border-color:var(--primary2)}

html[data-theme="dark"] .hero-modal-card{background:#141d33;border-color:#27314a}
html[data-theme="dark"] .hero-modal-close{background:#131b2f;border-color:#27314a;color:#97a2b9}
html[data-theme="dark"] .hero-modal-file{background:#10182b;border-color:#27314a}
html[data-theme="dark"] .hero-modal-card h3,html[data-theme="dark"] .hm-file-name,html[data-theme="dark"] .hm-opt-txt b{color:#e7ebf4}
html[data-theme="dark"] .hero-modal-sub,html[data-theme="dark"] .hm-file-meta,html[data-theme="dark"] .hm-opt-txt small{color:#97a2b9}
html[data-theme="dark"] .hm-rec{background:#221d3f;border-color:#3a315f}
html[data-theme="dark"] .hm-option{background:#131b2f;border-color:#27314a}
html[data-theme="dark"] .hm-option:hover{background:#221d3f;border-color:#4a3f7a}
html[data-theme="dark"] .hm-primary{border-color:#3a315f;box-shadow:0 6px 16px rgba(0,0,0,.35)}
html[data-theme="dark"] .hero-modal-cancel{background:#131b2f;border-color:#27314a;color:#97a2b9}

/* ============================================================
   PROFESSIONAL UI POLISH — global refinement pass.
   Loaded last so these overrides win across every page.
   ============================================================ */

/* Smooth text rendering */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Selection color */
::selection{background:rgba(81,52,244,.16);color:#24178a}
html[data-theme="dark"] ::selection{background:rgba(143,123,255,.32);color:#f1eeff}

/* Custom scrollbars */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d8dce8;border:3px solid #fff;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#bcc2d6}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#39415a;border-color:#0b1220}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#4b5472}
*{scrollbar-width:thin;scrollbar-color:#d8dce8 transparent}
html[data-theme="dark"]{scrollbar-color:#39415a transparent}

/* Headings: balanced wrapping + refined tracking */
h1,h2,h3,h4{text-wrap:balance}
.home-hero h1{letter-spacing:-.03em}
.home-section-head h2{letter-spacing:-.02em}

/* Sticky glass nav.
   The blur lives on .nav::before — putting backdrop-filter on .nav itself
   would turn it into the containing block for the mobile .links panel
   (position:fixed) and break the mobile toggle menu. */
.nav{
  position:sticky;top:0;z-index:80;
  background:transparent;
  transition:box-shadow .25s,border-color .25s;
}
.nav::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
}
.nav.scrolled{border-bottom-color:#e2e3ee;box-shadow:0 10px 32px rgba(23,33,59,.09)}
html[data-theme="dark"] .nav{background:transparent}
html[data-theme="dark"] .nav::before{background:rgba(14,22,38,.85)}
html[data-theme="dark"] .nav.scrolled{box-shadow:0 10px 32px rgba(0,0,0,.45)}

/* Accessible focus rings */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* Buttons: refined motion + depth */
.btn,.dz-btn,.theme-btn,.drop-toggle{
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{
  background:linear-gradient(180deg,#6366f1,#4f46e5);
  box-shadow:0 10px 24px rgba(79,70,229,.2),0 2px 6px rgba(79,70,229,.12);
}
.btn-primary:hover{box-shadow:0 14px 30px rgba(79,70,229,.28)}

.btn.primary{background:linear-gradient(180deg,#6366f1,#4f46e5);box-shadow:0 6px 16px rgba(79,70,229,.22)}
.btn.primary:hover{background:linear-gradient(180deg,#4f46e5,#4338ca);box-shadow:0 10px 24px rgba(79,70,229,.3)}
.hero-btn{box-shadow:0 10px 24px rgba(79,70,229,.22)}

/* Cards + surfaces: refined hover */
.feature,.step,.options-card,.page-card,.cr-item{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.feature:hover,.step:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(18,33,31,.08);border-color:#ddd6fe}
.options-card{box-shadow:0 8px 26px rgba(28,38,72,.07)}

html[data-theme="dark"] .feature:hover,html[data-theme="dark"] .step:hover{border-color:#4a3f7a}

/* Hero: highlighted keyword stays real selectable text */
h1 strong{
  color:var(--primary);
  -webkit-text-fill-color:var(--primary);
}

/* Dropzone: alive + responsive */
.dropzone{transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease}
.dropzone:hover,.dropzone.dragover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(81,52,244,.12)}
.dropzone svg{transition:transform .2s ease}
.dropzone:hover svg,.dropzone.dragover svg{transform:translateY(-3px)}

/* Anchor offset so the sticky nav never covers headings */
[id]{scroll-margin-top:100px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Keep hero layout intact when Google Translate makes text longer */

/* Header: keep everything on ONE row even when translated labels are longer */
html.translated-ltr .nav-inner,html.translated-rtl .nav-inner{flex-wrap:nowrap;gap:12px;padding:0}
html.translated-ltr .brand-wordmark,html.translated-rtl .brand-wordmark{font-size:19px;letter-spacing:-.6px}
html.translated-ltr .brand-wordmark small,html.translated-rtl .brand-wordmark small{display:none}
html.translated-ltr .links,html.translated-rtl .links{gap:12px;margin-left:6px;font-size:12px}
html.translated-ltr .links>a,html.translated-ltr .links .drop-toggle,html.translated-rtl .links>a,html.translated-rtl .links .drop-toggle{white-space:nowrap;font-size:12px;padding:6px 2px}
html.translated-ltr .nav-actions,html.translated-rtl .nav-actions{gap:10px}
html.translated-ltr .lang-toggle,html.translated-rtl .lang-toggle{font-size:12px;gap:4px}
html.translated-ltr .nav-actions .btn,html.translated-rtl .nav-actions .btn{min-width:0;padding:0 12px;font-size:12px;height:40px;gap:6px}
html.translated-ltr .nav-actions .btn svg,html.translated-rtl .nav-actions .btn svg{display:none}

/* Decorative SVGs must never intercept title/subtitle clicks */
.ir-deco,.ic-deco,.og-deco,.rz-deco,.p2j-deco,.sc-deco,.mg-deco,.j2p-deco,.ed-deco,[class*="-deco"],[class*="-leaf"],.ir-illu,.ic-illu,.og-illu,.rz-illu,.p2j-illu,.sc-illu,.mg-illu,.j2p-illu,.ed-illu,.cp-illu,.cp-title-ico{
  pointer-events:none;
}

/* ============================================================
   iLovePDF-style upload box + workspace (shared across tool pages)
   Layout only — no behaviour changes.
   ============================================================ */

/* Center the tool hero and give it a calm rhythm */
body[class*="-page"] .home-hero.tool-hero{
  text-align:center !important;
  padding:34px 0 14px !important;
  background:transparent !important;
  border-bottom:0 !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
}
body[class*="-page"] .home-hero.tool-hero h1{
  font-size:clamp(28px,4vw,40px) !important;
  line-height:1.16 !important;
  letter-spacing:-1.2px !important;
  margin:0 auto 10px !important;
  white-space:normal !important;
  text-wrap:balance !important;
  text-align:center !important;
  color:#16122c !important;
}
body[class*="-page"] .home-hero.tool-hero .hero-sub{
  margin:0 auto 8px !important;
  max-width:640px !important;
  text-align:center !important;
  font-size:16px !important;
  color:#6b7280 !important;
}
body[class*="-page"] .home-hero.tool-hero .hero-badge{
  display:inline-flex !important;
  margin:0 0 14px !important;
}
body[class*="-page"] [class*="-pills"]{
  justify-content:center !important;
}

/* One consistent upload stage: centered, full width, capped */
body[class*="-page"] [class$="-upload-stage"],
body[class*="-page"] .cp-upload-card,
body[class*="-page"] .cp-screen{
  width:100% !important;
  max-width:920px !important;
  margin:0 auto 10px !important;
  padding:0 !important;
}
body[class*="-page"] .cp-upload-card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* The card itself — clean white panel with soft border */
body[class*="-page"] .dropzone,
body[class*="-page"] .upload-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:none !important;
  min-height:280px !important;
  padding:44px 28px 40px !important;
  border:1.5px dashed #d4d4dc !important;
  border-radius:18px !important;
  background:#fafafb !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
  color:#4b5563 !important;
  transform:none !important;
  text-align:center !important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease !important;
}
body[class*="-page"] .dropzone:hover,
body[class*="-page"] .upload-card:hover,
body[class*="-page"] .dropzone.dragover,
body[class*="-page"] .upload-card.dragover{
  border-color:var(--primary,#4f46e5) !important;
  background:#eef2ff !important;
  box-shadow:0 6px 22px rgba(79,70,229,.10) !important;
  transform:none !important;
}
body[class*="-page"] .dropzone svg,
body[class*="-page"] .upload-card svg{
  transform:none !important;
}
body[class*="-page"] .dropzone:hover svg,
body[class*="-page"] .upload-card:hover svg,
body[class*="-page"] .dropzone.dragover svg,
body[class*="-page"] .upload-card.dragover svg{
  transform:none !important;
}
body[class*="-page"] .dz-title,
body[class*="-page"] .upload-card h2{
  font-size:21px !important;
  font-weight:800 !important;
  letter-spacing:-.4px !important;
  color:#16122c !important;
  margin:14px 0 6px !important;
  text-align:center !important;
}
body[class*="-page"] .dz-sub,
body[class*="-page"] .upload-card p,
body[class*="-page"] .mg-or,
body[class*="-page"] [class*="-or"]{
  font-size:13.5px !important;
  color:#8b91a1 !important;
  margin:6px 0 0 !important;
  text-align:center !important;
}
body[class*="-page"] .dz-title .dz-browse,
body[class*="-page"] .dz-browse{
  color:var(--primary,#4f46e5) !important;
  text-decoration:underline !important;
}

/* Upload button — iLovePDF style solid pill */
body[class*="-page"] .dz-btn,
body[class*="-page"] .btn-select{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  margin:18px 0 0 !important;
  padding:14px 30px !important;
  border:0 !important;
  border-radius:12px !important;
  background:var(--primary,#4f46e5) !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:pointer !important;
  box-shadow:0 8px 20px rgba(81,52,244,.22) !important;
  transition:background .15s ease,box-shadow .15s ease,transform .1s ease !important;
}
body[class*="-page"] .dz-btn:hover,
body[class*="-page"] .btn-select:hover,
body[class*="-page"] .dz-btn.dragover,
body[class*="-page"] .btn-select.dragover{
  background:var(--primary-dark,#4230e8) !important;
  box-shadow:0 12px 26px rgba(81,52,244,.30) !important;
  transform:translateY(-1px) !important;
}
body[class*="-page"] .dz-btn:active,
body[class*="-page"] .btn-select:active{transform:translateY(0) !important}
body[class*="-page"] .dz-btn svg,
body[class*="-page"] .btn-select svg{
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  color:#fff !important;
  transform:none !important;
}

/* Workspace: file chips become tidy iLovePDF-like cards */
body[class*="-page"] .file-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:12px !important;
  margin:22px auto 0 !important;
  max-width:920px !important;
  justify-content:flex-start !important;
}
body[class*="-page"] .file-list .chip{
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  border:1px solid #e7e9f0 !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
}
body[class*="-page"] .chip .chip-name{
  flex:1 1 auto !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#17213b !important;
}
body[class*="-page"] .chip .chip-size{
  font-size:12px !important;
  color:#8b91a1 !important;
}
body[class*="-page"] .chip .chip-num{
  background:var(--primary,#4f46e5) !important;
}

/* Action bar */
body[class*="-page"] .options-card{
  max-width:920px !important;
  margin:16px auto 0 !important;
  padding:16px 18px !important;
  border:1px solid #e7e9f0 !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 6px 22px rgba(23,33,59,.06) !important;
}
body[class*="-page"] .options-card .opt-row{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}
body[class*="-page"] .options-card .btn.primary{
  padding:13px 28px !important;
  border-radius:12px !important;
  font-size:15px !important;
  font-weight:800 !important;
}

/* Dark mode */
html[data-theme="dark"] body[class*="-page"] .dropzone,
html[data-theme="dark"] body[class*="-page"] .upload-card{
  background:#0f1729 !important;
  border-color:#2b3550 !important;
  color:#97a2b9 !important;
}
html[data-theme="dark"] body[class*="-page"] .dropzone:hover,
html[data-theme="dark"] body[class*="-page"] .upload-card:hover,
html[data-theme="dark"] body[class*="-page"] .dropzone.dragover,
html[data-theme="dark"] body[class*="-page"] .upload-card.dragover{
  background:#121b33 !important;
  border-color:var(--primary,#8f7bff) !important;
}
html[data-theme="dark"] body[class*="-page"] .dz-title,
html[data-theme="dark"] body[class*="-page"] .upload-card h2,
html[data-theme="dark"] body[class*="-page"] .chip .chip-name{
  color:#eef1ff !important;
}
html[data-theme="dark"] body[class*="-page"] .file-list .chip,
html[data-theme="dark"] body[class*="-page"] .options-card{
  background:#131b2f !important;
  border-color:#27314a !important;
}

@media(max-width:640px){
  body[class*="-page"] .dropzone,
  body[class*="-page"] .upload-card{
    min-height:0 !important;
    padding:30px 16px 26px !important;
    border-radius:16px !important;
  }
  body[class*="-page"] .dz-title,
  body[class*="-page"] .upload-card h2{font-size:18px !important}
  body[class*="-page"] .file-list{grid-template-columns:1fr !important}
}

/* ============================================================
   iLovePDF-style layout for content pages
   (about, contact, blog list, blog posts, legal)
   ============================================================ */

body:not([class]){
  background:#f5f5f7;
  color:#1a1a1a;
}

/* Heroes: centered, clean */
.home-hero:not(.tool-hero){
  text-align:center !important;
  padding:56px 0 22px !important;
  background:transparent !important;
  border-bottom:0 !important;
}
.home-hero:not(.tool-hero) h1{
  font-size:clamp(28px,4vw,42px) !important;
  line-height:1.16 !important;
  letter-spacing:-1.2px !important;
  margin:0 auto 12px !important;
  max-width:820px !important;
  text-wrap:balance !important;
  color:#16122c !important;
}
.home-hero:not(.tool-hero) .hero-sub{
  margin:0 auto !important;
  max-width:680px !important;
  font-size:16.5px !important;
  color:#5c5c5c !important;
}
.home-hero:not(.tool-hero) .hero-badge{margin:0 0 16px !important}

/* Section headings: no arrow prefix, tighter */
.section-title:before{content:none !important}
.section-title{
  font-size:26px !important;
  letter-spacing:-.5px !important;
  color:#1a1a1a !important;
}

/* Blog cards */
.blog-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}
.blog-card{
  background:#fff !important;
  border:1px solid #ececec !important;
  border-radius:14px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
  padding:26px 24px 22px !important;
}
.blog-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 12px 30px rgba(16,24,40,.10) !important;
  border-color:#ddd !important;
}
.blog-card h2{font-size:18px !important;color:#1a1a1a !important}
.blog-card p{color:#6b6b6b !important}
.blog-card-meta{border-top-color:#eee !important;color:#8b8b8b !important}

/* About / contact cards */
.about-card,.about-value,.contact-form-card{
  background:#fff !important;
  border:1px solid #ececec !important;
  border-radius:14px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
}
.about-value:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 12px 30px rgba(16,24,40,.10) !important;
}

/* Legal / blog prose */
.legal-prose,.blog-article{color:#3d3d3d !important}
.legal-prose h2,.blog-article h2{
  color:#1a1a1a !important;
  letter-spacing:-.4px !important;
}
.legal-prose p,.blog-article p{color:#4b4b4b !important}

/* TOC + inline CTA */
.blog-toc{
  background:#f5f5f7 !important;
  border:1px solid #ececec !important;
  border-radius:14px !important;
}
.blog-cta .btn,.blog-cta a{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:12px;
  background:var(--primary,#4f46e5) !important;color:#fff !important;
  font-weight:700 !important;box-shadow:0 8px 20px rgba(81,52,244,.22);
}

/* CTA banner */
.cta-banner{
  background:#fff !important;
  border:1px solid #ececec !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
}

/* Footer: dark, iLovePDF-like, on every page */
footer{
  background:#1a1a2e !important;
  border-top:0 !important;
  color:#c5c5d0 !important;
}
footer .brand-wordmark,
footer .logo,
footer h4{color:#fff !important}
footer .brand-wordmark small,
footer .footer-brand p{color:#9ca3af !important}
footer li,
footer li a{color:#b4b4c0 !important}
footer li a:hover{color:#fff !important}
footer .copyright{border-top:1px solid #2e2e44 !important;color:#8a8a9a !important}

/* Dark mode */
html[data-theme="dark"] body:not([class]){background:#0b1220;color:#e7ebf4}
html[data-theme="dark"] .home-hero:not(.tool-hero) h1,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .blog-card h2,
html[data-theme="dark"] .legal-prose h2,
html[data-theme="dark"] .blog-article h2{color:#eef1ff !important}
html[data-theme="dark"] .home-hero:not(.tool-hero) .hero-sub,
html[data-theme="dark"] .blog-card p,
html[data-theme="dark"] .legal-prose p,
html[data-theme="dark"] .blog-article p{color:#97a2b9 !important}
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .about-value,
html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .cta-banner{background:#131b2f !important;border-color:#27314a !important}
html[data-theme="dark"] .blog-toc{background:#10182b !important;border-color:#27314a !important}
html[data-theme="dark"] footer{background:#080d18 !important}

@media(max-width:980px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr !important}
  .home-hero:not(.tool-hero){padding:34px 0 16px !important}
}

/* ============================================================
   TOOL PAGES — full iLovePDF-style redesign (v2)
   Layout only. Loaded last so it wins. No JS/behaviour changes.
   ============================================================ */

/* Per-tool accent colours (used by hero + buttons) */
body.mg-page{--tool:#e5322d;--tool-dark:#c4271f;--tool-soft:#fff1f0}
body.cp-page{--tool:#2563eb;--tool-dark:#1d4ed8;--tool-soft:#eef2ff}
body.ed-page{--tool:#7c3aed;--tool-dark:#6527d0;--tool-soft:#f5f3ff}
body.og-page{--tool:#db2777;--tool-dark:#be185d;--tool-soft:#fdf2f8}
body.sg-page{--tool:#db2777;--tool-dark:#be185d;--tool-soft:#fdf2f8}
body.sc-page{--tool:#7c3aed;--tool-dark:#4f46e5;--tool-soft:#f5f3ff}
body.p2j-page{--tool:#0284c7;--tool-dark:#0369a1;--tool-soft:#f0f9ff}
body.j2p-page{--tool:#2563eb;--tool-dark:#1d4ed8;--tool-soft:#eef2ff}
body.rz-page{--tool:#2563eb;--tool-dark:#1d4ed8;--tool-soft:#eef2ff}
body.ir-page{--tool:#2563eb;--tool-dark:#1d4ed8;--tool-soft:#eff6ff}
body.ic-page{--tool:#7c3aed;--tool-dark:#6d28d9;--tool-soft:#f5f3ff}

body[class*="-page"]{background:#fff !important}

/* ---------- Hero band ---------- */
body[class*="-page"] .home-hero.tool-hero{
  text-align:center !important;
  padding:54px 24px 30px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  background:linear-gradient(180deg,var(--tool-soft,#f6f6f8) 0%,#ffffff 100%) !important;
  border-bottom:1px solid #f0f0f4 !important;
  overflow:visible !important;
  isolation:auto !important;
}
body[class*="-page"] .home-hero.tool-hero::before,
body[class*="-page"] .home-hero.tool-hero::after{display:none !important}
body[class*="-page"] .home-hero.tool-hero .hero-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 16px !important;
  padding:7px 14px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  color:#5c5c6b !important;
}
body[class*="-page"] .home-hero.tool-hero h1{
  font-size:clamp(30px,4.2vw,44px) !important;
  line-height:1.14 !important;
  letter-spacing:-1.4px !important;
  font-weight:800 !important;
  color:#15151f !important;
  margin:0 auto 12px !important;
  max-width:820px !important;
  white-space:normal !important;
  text-wrap:balance !important;
  text-align:center !important;
}
body[class*="-page"] .home-hero.tool-hero .hero-sub{
  margin:0 auto !important;
  max-width:620px !important;
  font-size:16.5px !important;
  line-height:1.6 !important;
  color:#64647a !important;
  text-align:center !important;
}
body[class*="-page"] [class*="-pills"]{
  justify-content:center !important;
  margin:18px 0 0 !important;
}
body[class*="-page"] [class*="-pill"]{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
  color:var(--tool,#4f46e5) !important;
}

/* ---------- Upload stage ---------- */
body[class*="-page"] [class$="-upload-stage"],
body[class*="-page"] .cp-upload-card,
body[class*="-page"] .cp-screen{
  width:100% !important;
  max-width:880px !important;
  margin:0 auto !important;
  padding:26px 24px 0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
/* hide busy floating decorations for a cleaner layout */
body[class*="-page"] [class*="-deco"],
body[class*="-page"] [class*="-leaf"]{display:none !important}

/* ---------- The upload card ---------- */
body[class*="-page"] .dropzone,
body[class*="-page"] .upload-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:none !important;
  min-height:320px !important;
  padding:52px 28px 46px !important;
  border:2px dashed #dcdce4 !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
  color:#4b4b5a !important;
  transform:none !important;
  text-align:center !important;
  cursor:pointer !important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease !important;
}
body[class*="-page"] .dropzone:hover,
body[class*="-page"] .upload-card:hover,
body[class*="-page"] .dropzone.dragover,
body[class*="-page"] .upload-card.dragover{
  border-color:var(--tool,#4f46e5) !important;
  border-style:solid !important;
  background:#fff !important;
  box-shadow:0 18px 44px rgba(16,24,40,.10) !important;
  transform:translateY(-2px) !important;
}
body[class*="-page"] .dropzone svg,
body[class*="-page"] .upload-card svg{transform:none !important}
body[class*="-page"] .dropzone:hover svg,
body[class*="-page"] .upload-card:hover svg,
body[class*="-page"] .dropzone.dragover svg,
body[class*="-page"] .upload-card.dragover svg{transform:none !important}
body[class*="-page"] [class*="-illu"]{opacity:.95 !important;margin-bottom:6px !important}
body[class*="-page"] .dz-title,
body[class*="-page"] .upload-card h2{
  font-size:22px !important;
  font-weight:800 !important;
  letter-spacing:-.4px !important;
  color:#15151f !important;
  margin:12px 0 0 !important;
  text-align:center !important;
}
body[class*="-page"] .dz-sub,
body[class*="-page"] .upload-card p,
body[class*="-page"] .mg-or,
body[class*="-page"] [class*="-or"]{
  font-size:14px !important;
  color:#8b8b9c !important;
  margin:8px 0 0 !important;
  text-align:center !important;
}
body[class*="-page"] .dz-browse{
  color:var(--tool,#4f46e5) !important;
  text-decoration:underline !important;
  font-weight:700 !important;
}
body[class*="-page"] .dz-btn,
body[class*="-page"] .btn-select{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  margin:22px 0 0 !important;
  padding:16px 36px !important;
  border:0 !important;
  border-radius:12px !important;
  background:var(--tool,#4f46e5) !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-.1px !important;
  cursor:pointer !important;
  box-shadow:0 10px 24px rgba(16,24,40,.16) !important;
  transition:background .15s ease,box-shadow .15s ease,transform .1s ease !important;
}
body[class*="-page"] .dz-btn:hover,
body[class*="-page"] .btn-select:hover{
  background:var(--tool-dark,#4230e8) !important;
  box-shadow:0 14px 30px rgba(16,24,40,.22) !important;
  transform:translateY(-1px) !important;
}
body[class*="-page"] .dz-btn:active,
body[class*="-page"] .btn-select:active{transform:translateY(0) !important}
body[class*="-page"] .dz-btn svg,
body[class*="-page"] .btn-select svg{
  width:18px !important;height:18px !important;margin:0 !important;color:#fff !important;transform:none !important;
}

/* ---------- Workspace: file cards ---------- */
body[class*="-page"] .file-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;
  gap:12px !important;
  justify-content:stretch !important;
  width:100% !important;
  max-width:880px !important;
  margin:22px auto 0 !important;
}
body[class*="-page"] .file-list .chip{
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:13px 14px !important;
  border:1px solid #ececf2 !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
}
body[class*="-page"] .chip .chip-name{flex:1 1 auto !important;font-size:13px !important;font-weight:600 !important;color:#1c1c28 !important}
body[class*="-page"] .chip .chip-size{font-size:12px !important;color:#8b8b9c !important}
body[class*="-page"] .chip .chip-num{background:var(--tool,#4f46e5) !important}
body[class*="-page"] .chip .chip-thumb{border-radius:8px !important}

/* ---------- Sticky action bar ---------- */
body[class*="-page"] .options-card{
  position:sticky !important;
  bottom:14px !important;
  z-index:30 !important;
  width:100% !important;
  max-width:880px !important;
  margin:20px auto 0 !important;
  padding:14px 18px !important;
  border:1px solid #ececf2 !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  backdrop-filter:blur(10px) !important;
  box-shadow:0 14px 38px rgba(16,24,40,.14) !important;
}
body[class*="-page"] .options-card .opt-row{
  display:flex !important;align-items:center !important;gap:14px !important;flex-wrap:wrap !important;
}
body[class*="-page"] .options-card .btn.primary{
  background:var(--tool,#4f46e5) !important;
  padding:14px 32px !important;
  border-radius:12px !important;
  font-size:15.5px !important;
  font-weight:800 !important;
  box-shadow:0 10px 24px rgba(16,24,40,.18) !important;
}
body[class*="-page"] .options-card .btn.primary:hover{background:var(--tool-dark,#4230e8) !important}
body[class*="-page"] .options-card .opt-hint{font-size:12.5px !important;color:#8b8b9c !important}

/* ---------- Feature strip + sections ---------- */
body[class*="-page"] [class$="-features"]{
  max-width:880px !important;
  margin:20px auto 0 !important;
  gap:10px !important;
  border:1px solid #f0f0f4 !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
}
body[class*="-page"] [class$="-feat"]{
  border-color:#f2f2f6 !important;
  background:#fff !important;
}
body[class*="-page"] [class$="-feat"] b{color:#1c1c28 !important}
body[class*="-page"] [class$="-feat"] span{color:#8b8b9c !important}
body[class*="-page"] .home-section{padding:44px 0 !important}
body[class*="-page"] .home-section-head{text-align:center !important;margin:0 auto 26px !important;max-width:720px !important}
body[class*="-page"] .home-section-head h2{
  font-size:clamp(22px,3vw,28px) !important;letter-spacing:-.6px !important;color:#15151f !important;
}
body[class*="-page"] .home-section-head p{color:#7a7a8c !important}
body[class*="-page"] .step,
body[class*="-page"] .feature{
  border-radius:16px !important;
  border:1px solid #f0f0f4 !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
}
body[class*="-page"] .seo-keyword-box{
  max-width:880px !important;border-radius:16px !important;
  border-color:#f0f0f4 !important;background:#fafafb !important;
}
/* Bottom sections (How to / Why use) must not stretch past the tool width */
@media (min-width:1024px){
  body[class*="-page"] .steps,
  body[class*="-page"] .feature-grid{
    max-width:880px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ---------- Dark mode ---------- */
html[data-theme="dark"] body[class*="-page"]{background:#0b1220 !important}
html[data-theme="dark"] body[class*="-page"] .home-hero.tool-hero{
  background:linear-gradient(180deg,#10182b 0%,#0b1220 100%) !important;
  border-bottom-color:#1f2940 !important;
}
html[data-theme="dark"] body[class*="-page"] .home-hero.tool-hero h1{color:#f2f4ff !important}
html[data-theme="dark"] body[class*="-page"] .home-hero.tool-hero .hero-sub{color:#97a2b9 !important}
html[data-theme="dark"] body[class*="-page"] .home-hero.tool-hero .hero-badge,
html[data-theme="dark"] body[class*="-page"] [class*="-pill"]{
  background:#131b2f !important;border-color:#27314a !important;color:#c9c9d8 !important;
}
html[data-theme="dark"] body[class*="-page"] .dropzone,
html[data-theme="dark"] body[class*="-page"] .upload-card{
  background:#0f1729 !important;border-color:#2b3550 !important;color:#97a2b9 !important;
}
html[data-theme="dark"] body[class*="-page"] .dropzone:hover,
html[data-theme="dark"] body[class*="-page"] .upload-card:hover,
html[data-theme="dark"] body[class*="-page"] .dropzone.dragover,
html[data-theme="dark"] body[class*="-page"] .upload-card.dragover{
  background:#121b33 !important;border-color:var(--tool,#8f7bff) !important;
}
html[data-theme="dark"] body[class*="-page"] .dz-title,
html[data-theme="dark"] body[class*="-page"] .upload-card h2,
html[data-theme="dark"] body[class*="-page"] .chip .chip-name,
html[data-theme="dark"] body[class*="-page"] .home-section-head h2{color:#eef1ff !important}
html[data-theme="dark"] body[class*="-page"] .file-list .chip,
html[data-theme="dark"] body[class*="-page"] .options-card,
html[data-theme="dark"] body[class*="-page"] .step,
html[data-theme="dark"] body[class*="-page"] .feature,
html[data-theme="dark"] body[class*="-page"] [class$="-feat"]{
  background:#131b2f !important;border-color:#27314a !important;
}
html[data-theme="dark"] body[class*="-page"] .options-card{background:rgba(19,27,47,.94) !important}
html[data-theme="dark"] body[class*="-page"] .seo-keyword-box{background:#10182b !important;border-color:#27314a !important}

/* ---------- Mobile ---------- */
@media(max-width:768px){
  body[class*="-page"] .home-hero.tool-hero{padding:34px 18px 20px !important}
  body[class*="-page"] [class$="-upload-stage"],
  body[class*="-page"] .cp-upload-card,
  body[class*="-page"] .cp-screen{padding:18px 14px 0 !important}
  body[class*="-page"] .dropzone,
  body[class*="-page"] .upload-card{
    min-height:0 !important;padding:34px 18px 30px !important;border-radius:18px !important;
  }
  body[class*="-page"] .dz-title,
  body[class*="-page"] .upload-card h2{font-size:19px !important}
  body[class*="-page"] .dz-btn,
  body[class*="-page"] .btn-select{padding:14px 26px !important;font-size:15px !important}
  body[class*="-page"] .file-list{grid-template-columns:1fr !important}
  body[class*="-page"] .options-card{position:static !important;bottom:auto !important}
}

/* ============================================================
   TOOL PAGES — keep the upload box above the fold (v3)
   ============================================================ */
body[class*="-page"] .home-hero.tool-hero{
  padding:22px 24px 12px !important;
}
body[class*="-page"] .home-hero.tool-hero .hero-badge{display:none !important}
body[class*="-page"] .home-hero.tool-hero h1{
  font-size:clamp(26px,3.2vw,36px) !important;
  margin:0 auto 8px !important;
  letter-spacing:-1px !important;
}
body[class*="-page"] .home-hero.tool-hero .hero-sub{
  font-size:15.5px !important;
}
body[class*="-page"] [class*="-pills"]{margin:10px 0 0 !important}
body[class*="-page"] [class*="-pill"]{padding:5px 12px !important;font-size:12px !important}
body[class*="-page"] [class$="-upload-stage"],
body[class*="-page"] .cp-upload-card,
body[class*="-page"] .cp-screen{
  padding:10px 24px 0 !important;
}
body[class*="-page"] .dropzone,
body[class*="-page"] .upload-card{
  min-height:230px !important;
  padding:32px 28px 28px !important;
}
body[class*="-page"] .dz-btn,
body[class*="-page"] .btn-select{margin:16px 0 0 !important}

/* Compress-style pages have a tall title row: keep it tight too */
body.cp-page .cp-title-wrap{margin:0 0 8px !important}
body.cp-page .home-hero.tool-hero h1{font-size:clamp(24px,2.8vw,32px) !important}

@media(max-width:768px){
  body[class*="-page"] .home-hero.tool-hero{padding:16px 16px 8px !important}
  body[class*="-page"] [class*="-pills"]{display:none !important}
  body[class*="-page"] [class$="-upload-stage"],
  body[class*="-page"] .cp-upload-card,
  body[class*="-page"] .cp-screen{padding:8px 14px 0 !important}
  body[class*="-page"] .dropzone,
  body[class*="-page"] .upload-card{min-height:0 !important;padding:26px 16px 24px !important}
}

/* ============================================================
   COMPRESS PDF — make the upload screen match the Merge PDF UI
   (UI only; markup/text/behaviour unchanged)
   ============================================================ */
body.cp-page .tool-area{max-width:100% !important}

/* Hero: centered like Merge (hide the side title icon) */
body.cp-page .cp-title-wrap{
  display:block !important;
  text-align:center !important;
  margin:0 auto 10px !important;
  max-width:820px !important;
}
body.cp-page .cp-title-ico{display:none !important}
body.cp-page .cp-h1-wrap{text-align:center !important;flex:none !important}
body.cp-page .home-hero.tool-hero h1{
  text-align:center !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
}
body.cp-page .cp-sub-wrap{
  text-align:center !important;
  margin:0 auto !important;
  max-width:640px !important;
}
body.cp-page .home-hero.tool-hero .hero-sub{
  text-align:center !important;
  margin:0 auto !important;
}

/* Upload card: drop the outer white wrapper, keep just the dropzone */
body.cp-page .cp-upload-card,
body.cp-page .cp-screen{
  width:100% !important;
  max-width:880px !important;
  margin:0 auto !important;
  padding:10px 24px 0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.cp-page #cp-dropzone{
  min-height:230px !important;
  padding:32px 28px 28px !important;
  border:2px dashed #dcdce4 !important;
  border-radius:22px !important;
  background:#fff !important;
}
body.cp-page #cp-dropzone:hover,
body.cp-page #cp-dropzone.dragover{
  border-color:var(--tool,#2563eb) !important;
  border-style:solid !important;
  background:#fff !important;
  box-shadow:0 18px 44px rgba(16,24,40,.10) !important;
}

@media(max-width:768px){
  body.cp-page .cp-upload-card,
  body.cp-page .cp-screen{
    width:100% !important;max-width:100% !important;padding:8px 14px 0 !important;
  }
  body.cp-page #cp-dropzone{min-height:0 !important;padding:26px 16px 24px !important}
}
html[data-theme="dark"] body.cp-page .cp-upload-card{background:transparent !important;border:0 !important}
html[data-theme="dark"] body.cp-page #cp-dropzone{background:#0f1729 !important;border-color:#2b3550 !important}

/* ============================================================
   MERGE PDF — workspace split layout (DESKTOP ONLY)
   Left: file list   |   Right: full-height action panel
   Mobile / tablet keep the original layout.
   Layout only, no behaviour changes.
   ============================================================ */
@media (min-width:1024px){

  body.mg-page.mg-work-on .tool-area{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 380px !important;
    grid-template-rows:auto 1fr !important;
    align-items:stretch !important;
    gap:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    min-height:calc(100vh - 88px) !important;
  }

  /* remove the upload-zone box inside the workspace */
  body.mg-page.mg-work-on .tool-area > .mg-upload-stage{display:none !important}

   /* left column: PDF document cards */
   body.mg-page.mg-work-on .tool-area > .file-list{
     grid-column:1 !important;
     grid-row:2 !important;
     width:auto !important;
     max-width:none !important;
     margin:0 !important;
     padding:22px 24px 40px !important;
     grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
     align-content:start !important;
     gap:16px !important;
   }

  /* right column: full-height action panel */
  body.mg-page.mg-work-on .tool-area > .options-card{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    position:sticky !important;
    top:88px !important;
    bottom:auto !important;
    align-self:start !important;
    height:calc(100vh - 88px) !important;
    max-height:calc(100vh - 88px) !important;
    overflow:auto !important;
    display:flex !important;
    flex-direction:column !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:32px 26px 30px !important;
    border:0 !important;
    border-left:1px solid #e8eaf0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  /* panel heading */
  body.mg-page.mg-work-on .tool-area > .options-card::before{
    content:"Merge PDF";
    display:block;
    text-align:center;
    font-size:30px;
    font-weight:700;
    letter-spacing:-.6px;
    color:#16122c;
    margin:8px 0 26px;
    line-height:1.2;
  }
  /* hint becomes the info box, sits above the button */
  body.mg-page.mg-work-on .options-card .opt-row{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  body.mg-page.mg-work-on .options-card .opt-hint{
    order:1 !important;
    display:block !important;
    background:#e8f1fe !important;
    color:#2f6fed !important;
    font-size:13.5px !important;
    line-height:1.5 !important;
    padding:13px 15px 13px 38px !important;
    border-radius:10px !important;
    position:relative !important;
    text-align:left !important;
  }
  body.mg-page.mg-work-on .options-card .opt-hint::before{
    content:"i";
    position:absolute;
    left:13px;
    top:12px;
    width:17px;
    height:17px;
    border:1.6px solid #2f6fed;
    border-radius:50%;
    font-size:11px;
    font-weight:700;
    line-height:15px;
    text-align:center;
    font-style:normal;
  }
  /* action button pinned to the bottom of the panel */
  body.mg-page.mg-work-on .options-card .btn.primary{
    order:2 !important;
    width:100% !important;
    margin-top:auto !important;
    padding:20px 24px !important;
    font-size:18px !important;
    border-radius:12px !important;
  }

  html[data-theme="dark"] body.mg-page.mg-work-on .tool-area > .options-card{
    background:#0f1729 !important;
    border-left-color:#222c44 !important;
  }
  html[data-theme="dark"] body.mg-page.mg-work-on .tool-area > .options-card::before{color:#f2f4ff}
  html[data-theme="dark"] body.mg-page.mg-work-on .options-card .opt-hint{
    background:#13203a !important;
    color:#8fb4ff !important;
  }
  html[data-theme="dark"] body.mg-page.mg-work-on .options-card .opt-hint::before{border-color:#8fb4ff}
}

/* Merge PDF workspace — PDF document cards (all breakpoints) */
body.mg-page.mg-work-on .file-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
  gap:14px !important;
  justify-content:stretch !important;
  width:100% !important;
}
body.mg-page.mg-work-on .file-list .chip{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:10px !important;
  min-height:0 !important;
  max-width:none !important;
  border:2px dashed #cbd5e1 !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:none !important;
  text-align:center !important;
}
body.mg-page.mg-work-on .file-list .chip::before{display:none !important;content:none !important}
body.mg-page.mg-work-on .file-list .chip .page-preview{
  width:100% !important;
  height:110px !important;
  min-height:0 !important;
  object-fit:contain !important;
  border-radius:6px !important;
  background:#fff !important;
  display:block !important;
  box-shadow:0 1px 4px rgba(16,24,40,.08) !important;
}
body.mg-page.mg-work-on .file-list .chip-name{
  display:block !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--muted,#64748b) !important;
  margin-top:8px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
}
body.mg-page.mg-work-on .file-list .chip-size,
body.mg-page.mg-work-on .file-list .page-num{display:none !important}
body.mg-page.mg-work-on .file-list .chip-num{display:none !important}
body.mg-page.mg-work-on .file-list .chip-x{
  position:absolute !important;
  top:6px !important;
  right:6px !important;
  flex:none !important;
  width:26px !important;
  height:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:none !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#dc2626 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.15) !important;
  font-size:14px !important;
  line-height:1 !important;
  z-index:2 !important;
}
body.mg-page.mg-work-on .file-list .chip-x:hover{background:#fee2e2 !important;color:#dc2626 !important}
body.mg-page.mg-work-on .file-list .chip.mg-chip{cursor:grab !important}
body.mg-page.mg-work-on .file-list .chip.mg-chip.dragging{opacity:.5 !important;cursor:grabbing !important}
body.mg-page.mg-work-on .file-list .chip.mg-chip.drop-before{box-shadow:inset 3px 0 0 0 var(--primary,#4f46e5) !important}
body.mg-page.mg-work-on .file-list .chip.mg-chip.drop-after{box-shadow:inset -3px 0 0 0 var(--primary,#4f46e5) !important}
html[data-theme="dark"] body.mg-page.mg-work-on .file-list .chip{
  background:#131b2f !important;
  border-color:#27314a !important;
}
html[data-theme="dark"] body.mg-page.mg-work-on .file-list .chip .page-preview{background:#10182b !important}
html[data-theme="dark"] body.mg-page.mg-work-on .file-list .chip-name{color:#97a2b9 !important}
html[data-theme="dark"] body.mg-page.mg-work-on .file-list .chip-x{
  background:#131b2f !important;
  color:#f87171 !important;
}
@media(max-width:768px){
  body.mg-page.mg-work-on .file-list{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important;
  }
}
@media(max-width:400px){
  body.mg-page.mg-work-on .file-list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ============================================================
   COMPRESS PDF — workspace split layout (DESKTOP ONLY)
   Left: file list   |   Right: full-height action panel
   Mobile / tablet keep the original layout.
   Layout only, no behaviour changes.
   ============================================================ */
@media (min-width:1024px){

  body.cp-page.cp-work-on .tool-area{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 380px !important;
    grid-template-rows:auto 1fr auto !important;
    align-items:stretch !important;
    gap:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    min-height:calc(100vh - 88px) !important;
  }

  body.cp-page.cp-work-on .tool-area > .cp-screen{display:none !important}

  body.cp-page.cp-work-on .tool-area > .file-list{
    grid-column:1 !important;
    grid-row:2 !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:8px 24px 24px !important;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
    align-content:start !important;
    gap:14px !important;
  }
  body.cp-page.cp-work-on .file-list .chip{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    padding:16px !important;
    min-height:86px !important;
    border:1px solid #ececf2 !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
  }
  body.cp-page.cp-work-on .file-list .chip::before{
    content:"" !important;
    flex:0 0 auto !important;
    width:42px !important;
    height:52px !important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 60'%3E%3Cpath d='M6 4h22l14 14v38a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z' fill='%23ffffff' stroke='%23e2e2ea' stroke-width='2'/%3E%3Cpath d='M28 4l14 14H30a2 2 0 0 1-2-2V4z' fill='%23f3f4f8' stroke='%23e2e2ea' stroke-width='2'/%3E%3Crect x='8' y='34' width='32' height='16' rx='4' fill='%2316a34a'/%3E%3Ctext x='24' y='46' font-family='Arial' font-size='11' font-weight='700' fill='%23ffffff' text-anchor='middle'%3EPDF%3C/text%3E%3C/svg%3E") center/contain no-repeat !important;
  }
  body.cp-page.cp-work-on .file-list .chip-name{
    flex:1 1 auto !important;
    min-width:0 !important;
    font-size:13.5px !important;
    font-weight:600 !important;
    color:#1c1c28 !important;
    word-break:break-word !important;
  }
  body.cp-page.cp-work-on .file-list .chip-size{font-size:12px !important;white-space:nowrap !important}
  body.cp-page.cp-work-on .file-list .chip-x{
    flex:0 0 auto !important;
    width:30px !important;
    height:30px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:8px !important;
  }

  body.cp-page.cp-work-on .tool-area > .compress-results{
    grid-column:1 !important;
    grid-row:3 !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 24px 40px !important;
  }

  body.cp-page.cp-work-on .tool-area > .options-card{
    grid-column:2 !important;
    grid-row:1 / span 3 !important;
    position:sticky !important;
    top:88px !important;
    bottom:auto !important;
    align-self:start !important;
    height:calc(100vh - 88px) !important;
    max-height:calc(100vh - 88px) !important;
    overflow:auto !important;
    display:flex !important;
    flex-direction:column !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:32px 26px 30px !important;
    border:0 !important;
    border-left:1px solid #e8eaf0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  body.cp-page.cp-work-on .tool-area > .options-card::before{
    content:"Compress PDF";
    display:block;
    text-align:center;
    font-size:30px;
    font-weight:700;
    letter-spacing:-.6px;
    color:#16122c;
    margin:8px 0 26px;
    line-height:1.2;
  }
  body.cp-page.cp-work-on .options-card .opt-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }
  body.cp-page.cp-work-on .options-card .opt-row:first-child{
    flex:0 0 auto !important;
  }
  body.cp-page.cp-work-on .options-card .opt-row:last-child{
    flex:1 1 auto !important;
  }
  body.cp-page.cp-work-on .options-card .opt-label{
    min-width:0 !important;
    font-size:13.5px !important;
    font-weight:700 !important;
    color:#16122c !important;
  }
  body.cp-page.cp-work-on .options-card .seg{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:6px !important;
    padding:6px !important;
    background:#f5f6fb !important;
    border:1px solid #ececf2 !important;
    border-radius:12px !important;
  }
  body.cp-page.cp-work-on .options-card .seg-btn{
    width:100% !important;
    text-align:left !important;
    padding:11px 14px !important;
    min-height:42px !important;
    border-radius:9px !important;
    font-size:13.5px !important;
  }
  body.cp-page.cp-work-on .options-card .seg-btn.active{
    background:#fff !important;
    color:#2563eb !important;
    box-shadow:0 1px 3px rgba(16,24,40,.08) !important;
  }
  body.cp-page.cp-work-on .options-card .opt-hint{
    order:1 !important;
    display:block !important;
    background:#e8f1fe !important;
    color:#2f6fed !important;
    font-size:13.5px !important;
    line-height:1.5 !important;
    padding:13px 15px 13px 38px !important;
    border-radius:10px !important;
    position:relative !important;
    text-align:left !important;
  }
  body.cp-page.cp-work-on .options-card .opt-hint::before{
    content:"i";
    position:absolute;
    left:13px;
    top:12px;
    width:17px;
    height:17px;
    border:1.6px solid #2f6fed;
    border-radius:50%;
    font-size:11px;
    font-weight:700;
    line-height:15px;
    text-align:center;
    font-style:normal;
  }
  body.cp-page.cp-work-on .options-card .btn.primary{
    order:2 !important;
    width:100% !important;
    margin-top:auto !important;
    padding:20px 24px !important;
    font-size:18px !important;
    border-radius:12px !important;
  }

  html[data-theme="dark"] body.cp-page.cp-work-on .tool-area > .options-card{
    background:#0f1729 !important;
    border-left-color:#222c44 !important;
  }
  html[data-theme="dark"] body.cp-page.cp-work-on .tool-area > .options-card::before{color:#f2f4ff}
  html[data-theme="dark"] body.cp-page.cp-work-on .options-card .opt-label{color:#f2f4ff !important}
  html[data-theme="dark"] body.cp-page.cp-work-on .options-card .seg{
    background:#131b2f !important;
    border-color:#27314a !important;
  }
  html[data-theme="dark"] body.cp-page.cp-work-on .options-card .seg-btn.active{
    background:#1a2744 !important;
    color:#4ade80 !important;
  }
  html[data-theme="dark"] body.cp-page.cp-work-on .options-card .opt-hint{
    background:#13203a !important;
    color:#8fb4ff !important;
  }
  html[data-theme="dark"] body.cp-page.cp-work-on .options-card .opt-hint::before{border-color:#8fb4ff}
  html[data-theme="dark"] body.cp-page.cp-work-on .file-list .chip{
    background:#131b2f !important;
    border-color:#27314a !important;
  }
  html[data-theme="dark"] body.cp-page.cp-work-on .file-list .chip-name{color:#eef1ff !important}
}

/* ============================================================
   ORGANISE PDF — workspace split layout (DESKTOP ONLY)
   Left: page cards   |   Right: full-height action panel
   Mobile / tablet keep the original layout.
   Layout only, no behaviour changes.
   ============================================================ */
@media (min-width:1024px){

  /* remove the upload-zone box inside the workspace */
  body.og-page.og-work-on .og-upload-stage{display:none !important}

  /* two-column workspace shell */
  body.og-page.og-work-on .file-list-section.show{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 380px !important;
    grid-template-rows:auto 1fr !important;
    align-items:stretch !important;
    gap:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    height:calc(100vh - 88px) !important;
    min-height:calc(100vh - 88px) !important;
    max-height:calc(100vh - 88px) !important;
    overflow:hidden !important;
    background:linear-gradient(to right,
      transparent calc(100% - 380px),
      #e8eaf0 calc(100% - 380px), #e8eaf0 calc(100% - 379px),
      #ffffff calc(100% - 379px)) !important;
  }

  html:has(body.og-page.og-work-on),
  body.og-page.og-work-on{
    overflow:hidden !important;
    height:100% !important;
  }
  body.og-page.og-work-on main.container{
    max-width:none !important;
    padding:0 !important;
    height:calc(100vh - 88px) !important;
    overflow:hidden !important;
  }
  body.og-page.og-work-on .tool-area{
    margin:0 !important;
    padding:0 !important;
    height:100% !important;
  }

  /* left column: page thumbnails */
  body.og-page.og-work-on .thumbnails-container{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    align-self:stretch !important;
    align-content:start !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding:18px 20px 24px !important;
    gap:10px !important;
    grid-template-columns:repeat(auto-fill,minmax(118px,1fr)) !important;
  }
  body.og-page.og-work-on .thumbnail-card{
    padding:7px !important;
  }
  body.og-page.og-work-on .thumbnail-card canvas,
  body.og-page.og-work-on .thumbnail-card .page-preview{
    min-height:0 !important;
    max-height:138px !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* right column header: title + tools + hint */
  body.og-page.og-work-on .section-title{
    grid-column:2 !important;
    grid-row:1 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
    margin:0 !important;
    padding:30px 26px 16px !important;
    font-size:inherit !important;
    color:inherit !important;
  }
  body.og-page.og-work-on .section-title > span{display:none !important}
  body.og-page.og-work-on .section-title::before{
    content:"Organise PDF";
    display:block;
    text-align:center;
    font-size:30px;
    font-weight:700;
    letter-spacing:-.6px;
    color:#16122c;
    line-height:1.2;
    margin:6px 0 2px;
  }
  body.og-page.og-work-on .section-title::after{
    content:"Drag pages to reorder. Click a page to select it, then rotate or delete it.";
    display:block;
    background:#e8f1fe;
    color:#2f6fed;
    font-size:13.5px;
    font-weight:500;
    line-height:1.5;
    padding:13px 15px;
    border-radius:10px;
  }

  /* rotate / reverse buttons */
  body.og-page.og-work-on .og-workspace-actions{
    display:flex !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }
  body.og-page.og-work-on .og-workspace-actions .action-btn{
    flex:1 1 0 !important;
    justify-content:center !important;
    padding:12px 8px !important;
  }

  /* right column bottom: clear + save — pinned in first viewport */
  body.og-page.og-work-on .bottom-actions{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:stretch !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-end !important;
    gap:12px !important;
    margin:0 !important;
    padding:18px 26px 24px !important;
    min-height:0 !important;
  }
  body.og-page.og-work-on .bottom-actions .action-btn,
  body.og-page.og-work-on .bottom-actions .btn-merge{
    width:100% !important;
    justify-content:center !important;
  }
  body.og-page.og-work-on .btn-merge{
    padding:18px 24px !important;
    font-size:17px !important;
    border-radius:12px !important;
  }

  /* dark mode */
  html[data-theme="dark"] body.og-page.og-work-on .file-list-section.show{
    background:linear-gradient(to right,
      transparent calc(100% - 380px),
      #222c44 calc(100% - 380px), #222c44 calc(100% - 379px),
      #0f1729 calc(100% - 379px)) !important;
  }
  html[data-theme="dark"] body.og-page.og-work-on .section-title::before{color:#f2f4ff}
  html[data-theme="dark"] body.og-page.og-work-on .section-title::after{background:#13203a;color:#8fb4ff}
}

/* ============================================================
   MOBILE RESPONSIVE PASS
   ============================================================ */
img,video{max-width:100%;height:auto}

@media(max-width:900px){
  .nav{overflow:visible}
  input,select,textarea{font-size:16px}
  .menu,.theme-btn{min-width:44px;min-height:44px}
  .links>a,.links .drop-toggle{min-height:44px}
}

@media(max-width:768px){
  body[class*="-page"] .options-card .opt-row{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  body[class*="-page"] .options-card .opt-label{min-width:0 !important}
  body[class*="-page"] .options-card .btn,
  body[class*="-page"] .options-card .btn.primary{
    width:100% !important;
    justify-content:center !important;
    min-height:48px !important;
  }
  body[class*="-page"] .dz-btn,
  body[class*="-page"] .btn-select{
    width:min(100%,320px) !important;
    justify-content:center !important;
    min-height:48px !important;
  }
  body[class*="-page"] .file-list{width:100% !important}
  body[class*="-page"] .file-list .chip{max-width:100% !important}
  .bottom-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .bottom-actions .btn-merge,
  .bottom-actions .action-btn,
  .bottom-actions .btn{
    width:100%;
    justify-content:center;
  }
  .og-workspace-actions{width:100%}
  .og-workspace-actions .action-btn{flex:1 1 auto;justify-content:center;min-height:44px}
  .thumbnails-container{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important}
  .hero-modal{padding:12px;align-items:end}
  .hero-modal-card{width:100%;max-height:min(86dvh,640px);border-radius:18px 18px 12px 12px}
  .cta-banner{padding:22px 16px;text-align:center}
  .cta-banner .btn{width:100%;justify-content:center}
  footer{padding-bottom:env(safe-area-inset-bottom)}
}

@media(max-width:560px){
  .container{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
  .brand-wordmark small{display:none}
  h1,h2,h3,p,li{overflow-wrap:break-word}
  .home-hero.tool-hero h1,
  body[class*="-page"] .home-hero.tool-hero h1{
    font-size:clamp(24px,7.4vw,34px) !important;
    letter-spacing:-.7px !important;
  }
  body[class*="-page"] .home-hero.tool-hero .hero-sub{font-size:14px !important}
  .seg{width:100%}
  .seg-btn{flex:1 1 auto;text-align:center;min-height:40px}
  .faq button,.faq .faq-q{min-height:48px}
  .links{
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
}

@media(max-width:400px){
  .logo{gap:6px}
  .brand-wordmark{font-size:16px}
  .thumbnails-container{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .page-grid,.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   Merged from home.css / styles.css — drop extra stylesheet requests
   ============================================================ */
.home-hero{
  position:relative;text-align:center;padding:20px 0 40px;overflow:hidden;isolation:isolate;z-index:1
}
.home-hero::before,.home-hero::after{pointer-events:none}
.home-hero::before{
  content:"";position:absolute;left:50%;top:-260px;width:900px;height:620px;transform:translateX(-50%);
  background:
    radial-gradient(600px 320px at 20% 30%,rgba(81,52,244,.10),transparent 60%),
    radial-gradient(520px 300px at 80% 25%,rgba(14,165,233,.08),transparent 60%),
    radial-gradient(400px 240px at 50% 0%,rgba(81,52,244,.07),transparent 60%);
  z-index:-1
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--primary-soft);border:1px solid #dbeafe;
  border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--primary);margin:0 0 24px
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0}
.home-hero h1{
  font-size:clamp(32px,5vw,52px);line-height:1.12;letter-spacing:-.03em;margin:0 auto 18px;max-width:820px
}
.hero-sub{color:var(--muted);font-size:17.5px;max-width:640px;margin:0 auto 32px}
.hero-btn{padding:11px 22px;font-size:14.5px;border-radius:10px}
.home-section{padding:56px 0 8px}
.home-section-head{text-align:center;max-width:620px;margin:0 auto 30px}
.home-section-head h2{font-size:clamp(24px,3.2vw,32px);letter-spacing:-.02em;margin-bottom:8px}
.home-section-head p{color:var(--muted);font-size:15.5px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{
  position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 24px;text-align:center
}
.step-num{
  width:32px;height:32px;border-radius:50%;margin:0 auto 14px;background:var(--primary);color:#fff;
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center
}
.step-icon{
  width:48px;height:48px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px
}
.step-icon svg{width:24px;height:24px}
.step-icon.blue{background:#eff6ff;color:#2563eb}
.step-icon.indigo{background:#eef2ff;color:#4f46e5}
.step-icon.green{background:#ecfdf5;color:#059669}
.step-icon.amber{background:#fffbeb;color:#d97706}
.step h3{font-size:16.5px;margin-bottom:6px}
.step p{color:var(--muted);font-size:13.5px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px}
.feature-icon{
  width:42px;height:42px;border-radius:10px;background:var(--primary-soft);color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px
}
.feature-icon svg{width:21px;height:21px}
.feature h3{font-size:15.5px;margin-bottom:5px}
.feature p{color:var(--muted);font-size:13.5px}
.faq-list{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden
}
.faq-item.open,.faq-item[open]{border-color:#bfdbfe}
.faq-item.reveal{opacity:1;transform:none}
.faq-q{
  width:100%;border:none;background:transparent;padding:16px 20px;font-size:15px;font-weight:600;
  color:var(--text);cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px
}
summary.faq-q{display:block;padding:0;list-style:none}
summary.faq-q::-webkit-details-marker{display:none}
summary.faq-q::marker{content:""}
.faq-q-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;pointer-events:none}
.faq-chev{color:var(--muted);font-size:12px;transition:transform .2s;flex-shrink:0;pointer-events:none}
.faq-item.open .faq-chev,.faq-item[open] .faq-chev{transform:rotate(180deg);color:var(--primary)}
details.faq-item > .faq-a{max-height:none;overflow:visible}
details.faq-item:not([open]) > .faq-a{display:none}
.faq-a p{padding:0 20px 16px;color:var(--muted);font-size:14.5px}
.cta-banner h2{font-size:clamp(22px,3.2vw,30px);letter-spacing:-.02em;margin-bottom:8px}
.cta-banner p{color:var(--muted);font-size:15.5px;margin-bottom:22px}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.input,.select{
  border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-size:14px;background:#fff;color:var(--text);outline:none
}
.input:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(81,52,244,.15)}
.busy-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;color:#fff;font-weight:600
}
.busy-overlay[hidden]{display:none}
.spinner{
  width:46px;height:46px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;
  animation:spin .8s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.busy-progress{width:300px;max-width:80vw;height:8px;background:rgba(255,255,255,.25);border-radius:99px;overflow:hidden}
.busy-bar{height:100%;width:0;background:#fff;border-radius:99px;transition:width .2s ease}
@media (max-width:960px){
  .steps{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .home-hero{padding:52px 0 24px}
  .feature-grid{grid-template-columns:1fr}
}