/* EZCompressor base styles: Tailwind handles layout; these cover what utilities can't. */
:root { color-scheme: light; }
html.dark { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { background: #ffffff; color: #1F2933; font-family: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
html.dark body { background: #0b1220; color: #e2e8f0; }
.label { display: block; font-size: 13px; font-weight: 500; color: #334155; margin-bottom: 6px; }
html.dark .label { color: #cbd5e1; }
.link { color: #00529E; text-decoration: underline; text-underline-offset: 2px; }
html.dark .link { color: #7cb8f0; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #f1f5f9; color: #0f172a; border-radius: 10px; padding: 12px 14px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
html.dark .code { background: #0f172a; color: #e2e8f0; border: 1px solid #1e293b; }
.bg-checker { background-color: #fff; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
html.dark .bg-checker { background-color: #1e293b; background-image: linear-gradient(45deg, #334155 25%, transparent 25%), linear-gradient(-45deg, #334155 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #334155 75%), linear-gradient(-45deg, transparent 75%, #334155 75%); }

/* Ant Design dragger polish */
.ez-drop .ant-upload.ant-upload-drag { border: 2px dashed #b9cde3; border-radius: 20px; background: linear-gradient(180deg, #f6f9fd, #fff); transition: all .2s; }
.ez-drop .ant-upload.ant-upload-drag:hover, .ez-drop .ant-upload-drag-hover { border-color: #00529E !important; background: #eef5fc; }
html.dark .ez-drop .ant-upload.ant-upload-drag { background: linear-gradient(180deg, #0f172a, #0b1220); border-color: #334155; }
html.dark .ez-drop .ant-upload.ant-upload-drag:hover { background: #111c33; }

/* Cropper */
.cropper-circle .cropper-view-box, .cropper-circle .cropper-face { border-radius: 50%; }
.cropper-view-box { outline: 2px solid #F9623E; }
.passport-crop .cropper-view-box::before { content: ""; position: absolute; left: 0; right: 0; top: 38%; border-top: 1px dashed rgba(249,98,62,.9); }
.passport-crop .cropper-view-box::after { content: ""; position: absolute; left: 20%; right: 20%; top: 12%; bottom: 18%; border: 1px dashed rgba(0,82,158,.8); border-radius: 50% 50% 45% 45%; }

/* Nav */
[data-nav] { display: none; }
[data-nav].open { display: flex; }
@media (min-width: 1024px) { [data-nav] { display: none !important; } }
html.embed header, html.embed footer, html.embed .no-embed { display: none !important; }
html.embed main { padding-top: 0 !important; }

/* FAQ */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; float: right; font-weight: 600; color: #00529E; }
details[open] > summary::after { content: "–"; }

/* Prose */
.prose p { margin: 0 0 1em; line-height: 1.7; }
.prose h2 { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 .75rem; }
.prose h3 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1em; line-height: 1.7; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin: .2em 0; } .prose li::marker { color: #64748b; }
.prose a { color: #00529E; text-decoration: underline; }
html.dark .prose a { color: #7cb8f0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1em 0; }
.prose th, .prose td { border: 1px solid #e2e8f0; padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: #f8fafc; }
html.dark .prose th, html.dark .prose td { border-color: #1e293b; }
html.dark .prose th { background: #0f172a; }

/* Tool cards */
.tool-card { transition: transform .15s, box-shadow .15s, border-color .15s; }
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(0,82,158,.35); border-color: #00529E; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tool-card { transition: none; } }

/* Mega menu */
[data-mega][hidden] { display: none; }
[data-mega] a { transition: color .12s; }

/* Before / after slider */
.ba { margin: 0; }
.ba-stage { position: relative; overflow: hidden; border-radius: 18px; background: #0f172a; aspect-ratio: 3 / 2; user-select: none; box-shadow: 0 20px 50px -20px rgba(0,82,158,.45); }
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-stage .ba-after { clip-path: inset(0 0 0 var(--ba, 55%)); background-color: #fff; background-image: linear-gradient(45deg, #e2e8f0 25%, transparent 25%), linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2e8f0 75%), linear-gradient(-45deg, transparent 75%, #e2e8f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
html.dark .ba-stage .ba-after { background-color: #1e293b; background-image: linear-gradient(45deg, #334155 25%, transparent 25%), linear-gradient(-45deg, #334155 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #334155 75%), linear-gradient(-45deg, transparent 75%, #334155 75%); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba, 55%); width: 0; pointer-events: none; }
.ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.3); display: grid; place-items: center; }
.ba-handle span::before { content: "◀ ▶"; font-size: 11px; color: #00529E; letter-spacing: -1px; font-weight: 700; }
.ba-stage { cursor: ew-resize; touch-action: none; }
.ba-stage.dragging { cursor: grabbing; }
.ba-range { position: absolute; left: 12px; right: 12px; bottom: 10px; width: calc(100% - 24px); height: 18px; opacity: 0; margin: 0; cursor: ew-resize; }
.ba-range:focus-visible { opacity: 1; accent-color: #00529E; }
.ba-tag { position: absolute; top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(15,23,42,.65); backdrop-filter: blur(4px); border-radius: 999px; padding: 4px 10px; pointer-events: none; }
.ba-tag-b { left: 12px; } .ba-tag-a { right: 12px; background: rgba(0,82,158,.85); }
.ba-saved { position: absolute; right: 12px; bottom: 12px; font-size: 13px; font-weight: 800; color: #fff; background: #10b981; border-radius: 999px; padding: 5px 12px; pointer-events: none; }
.ba-caption { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; font-size: 13px; color: #475569; }
.ba-caption b { color: #0f172a; margin-right: 4px; }
html.dark .ba-caption { color: #94a3b8; } html.dark .ba-caption b { color: #f1f5f9; }
.ba-caption span:last-child { text-align: right; }
@media (max-width: 640px) { .ba-caption { grid-template-columns: 1fr; } .ba-caption span:last-child { text-align: left; } }
.ba-hero .ba-stage { aspect-ratio: 4 / 3; }

/* page-wide drop highlight */
body.page-drop .ez-drop .ant-upload.ant-upload-drag { border-color: #00529E !important; background: #eef5fc; box-shadow: 0 0 0 6px rgba(0,82,158,.12); }
.ant-modal .ba-stage { box-shadow: none; }

/* Laptop widths: header search opens as a dropdown from the search icon */
@media (min-width:1024px) and (max-width:1535px){ .header-search.open{display:block;position:absolute;right:1rem;top:4.25rem;width:22rem;max-width:none;z-index:60} .header-search.open input{box-shadow:0 10px 30px rgba(15,23,42,.18)} }

/* Footer: dark band with glow, faint grid, animated link underlines */
.ft-glow{position:absolute;inset:-40% -10% auto;height:620px;background:radial-gradient(45% 55% at 20% 30%,rgba(26,111,189,.45),transparent 70%),radial-gradient(35% 45% at 85% 20%,rgba(249,98,62,.22),transparent 70%);pointer-events:none}
.ft-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 70%);-webkit-mask-image:linear-gradient(to bottom,black,transparent 70%);pointer-events:none}
.ft-link{color:#cbd5e1;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .2s,background-size .25s;padding-bottom:1px}
.ft-link:hover{color:#fff;background-size:100% 1px}
.ft-more{color:#ff9b78;font-weight:600;display:inline-flex;gap:4px}
.ft-more span{transition:transform .2s}.ft-more:hover span{transform:translateX(4px)}
.ft summary::-webkit-details-marker{display:none}
.ft-drop.dragging{border-color:#ff7d55;background:rgba(249,98,62,.12)}
@media (prefers-reduced-motion:reduce){.ft-link,.ft-more span{transition:none}}
.ft summary::after{content:none!important;display:none!important}
/* Mega menu: category list (left) */
.mm-cat{transition:background-color .15s}
.mm-cat:hover,.mm-cat:focus-visible{background:#f1f5f9;outline:none}
.mm-cat[aria-selected="true"]{background:#eef5fc;box-shadow:inset 3px 0 0 #00529E}
.mm-cat .mm-arrow{opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.mm-cat[aria-selected="true"] .mm-arrow{opacity:1;transform:none;color:#00529E}
html.dark .mm-cat:hover,html.dark .mm-cat:focus-visible{background:#0f172a}
html.dark .mm-cat[aria-selected="true"]{background:#0f1f36;box-shadow:inset 3px 0 0 #7cb8f0}
html.dark .mm-cat[aria-selected="true"] .mm-arrow{color:#7cb8f0}

/* Tool page long-form content */
.toc{margin:1.5rem 0;padding:1rem 1.25rem;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}
.toc-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin-bottom:.5rem}
.toc ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.25rem 1.5rem;list-style:decimal;padding-left:1.1rem;margin:0;font-size:14px}
.toc a{color:#00529E;text-decoration:none}.toc a:hover{text-decoration:underline}
html.dark .toc{background:#0f172a;border-color:#1e293b}html.dark .toc a{color:#7cb8f0}
.feat,.diff,.who{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.1rem;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
.who{display:block}
.feat-ic{flex:none;width:2.4rem;height:2.4rem;padding:.55rem;border-radius:12px;background:#eef5fc;color:#00529E}
.diff-n{flex:none;width:2rem;height:2rem;border-radius:999px;background:#F9623E;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.feat-t{font-size:15px;font-weight:700;color:#0f172a;margin:0 0 .2rem}
.feat-p{font-size:14px;line-height:1.55;color:#475569;margin:0}
html.dark .feat,html.dark .diff,html.dark .who{background:#0f172a;border-color:#1e293b}html.dark .feat-t{color:#fff}html.dark .feat-p{color:#cbd5e1}html.dark .feat-ic{background:#0f1f36;color:#7cb8f0}
.prose h2[id]{scroll-margin-top:90px}

/* Category: which tool do I need */
.pick{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem;border:1px solid #e2e8f0;border-radius:16px;background:#fff;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pick:hover{border-color:#7cb8f0;box-shadow:0 6px 20px rgba(0,82,158,.08)}
.pick-need{font-size:14px;color:#475569;line-height:1.5}
.pick-tool{display:flex;align-items:center;gap:.5rem;font-weight:700;color:#00529E;font-size:14px}
html.dark .pick{background:#0f172a;border-color:#1e293b}html.dark .pick-need{color:#cbd5e1}html.dark .pick-tool{color:#7cb8f0}

/* Contact form + blog posts */
.ezc-input { display: block; width: 100%; border-radius: .75rem; border: 1px solid #cbd5e1; background: #fff; padding: .65rem .85rem; font-size: .95rem; color: #0f172a; }
.ezc-input:focus { outline: none; border-color: #1a6fbd; box-shadow: 0 0 0 3px rgba(26,111,189,.2); }
html.dark .ezc-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.ezc-post img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.5em auto; }
.ezc-post blockquote { border-left: 4px solid #1a6fbd; padding: .25em 0 .25em 1em; margin: 1.5em 0; color: #475569; font-style: italic; }
html.dark .ezc-post blockquote { color: #cbd5e1; }
.ezc-post pre { background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 1em; overflow-x: auto; font-size: .9em; margin: 1.5em 0; }
.ezc-post code { font-size: .9em; }
.ezc-post iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 12px; margin: 1.5em 0; }
.ezc-post .ql-align-center { text-align: center; } .ezc-post .ql-align-right { text-align: right; } .ezc-post .ql-align-justify { text-align: justify; }
.ezc-post h2 { scroll-margin-top: 6rem; }