/* Shared design system for the homepage, converters and information pages. */
:root{--bg:#fff;--ink:#18243b;--muted:#64748b;--line:#e4e8ef;--lime:#2563eb;--green:#2563eb;--home-blue:#2563eb;--home-ink:#18243b;--home-muted:#606c80}
body.site-page{background:#fff;color:var(--ink);font-size:14px;line-height:1.7}
body.site-page main{min-height:55vh}
:is(a,button,input,select,summary):focus-visible{outline:3px solid #2563eb;outline-offset:4px}
:is(input,select,button){font-family:inherit}
.home-header,.home-footer{color:var(--ink)}
.home-header{background:#fff}
.home-footer{flex-wrap:wrap;padding:28px 0 32px}
.home-footer nav{flex-wrap:wrap;gap:14px 22px}
.home-footer nav a{min-height:32px;display:inline-flex;align-items:center;color:#64748b}
.home-footer p,.home-footer>span{color:#64748b}
.home-footer .home-brand{line-height:1.2}
.breadcrumbs{max-width:1120px;margin:22px auto 0;padding:0 24px;color:#64748b;font-size:12px;gap:10px;flex-wrap:wrap}
.breadcrumbs a:hover{color:#2563eb}
.hero,.tool-hero{padding:38px 24px 36px}
.hero .eyebrow{border:0;background:#eff5ff;color:#3867ad;font-size:12px;padding:6px 12px;font-weight:500}
.hero h1{font-size:40px;line-height:1.3;letter-spacing:-1.8px;margin:15px 0 12px;color:#18243b}
.hero h1 span{color:#2563eb}
.hero p{font-size:14px;line-height:1.85;color:#64748b;max-width:660px;margin:0 auto;word-break:keep-all}
.converter{display:block;max-width:850px;margin:0 auto;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.tool-menu{display:block;padding:0;background:white;border:1px solid var(--line);border-radius:14px;margin:0 0 18px}
.image-format-menu>summary,.pdf-format-menu>summary{padding:17px 22px;cursor:pointer;font-size:14px;font-weight:650;line-height:1.7;color:#18243b}
.image-format-menu>summary span,.pdf-format-menu>summary span{display:inline;font-weight:400;font-size:13px;color:#64748b;margin-left:12px}
.tool-switcher-content{padding:0 20px 18px}
.tool-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tool-button{width:auto;min-width:0;min-height:68px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff;gap:10px}
.tool-button strong{font-size:13px;letter-spacing:-.2px;font-weight:600}
.tool-button small{font-size:11px;color:#64748b;white-space:normal;margin-top:3px}
.tool-button:hover{background:#f8fafc;border-color:#a4bff0}
.tool-button.active{background:#eff5ff;border-color:#8ab1f4;color:#1d4ed8;box-shadow:none}
.tool-button.active small{color:#526987}
.tool-icon,.active .tool-icon{width:32px;height:34px;background:#eff5ff;color:#2563eb;border-radius:8px}
.tool-chevron{display:none}
.all-formats-link{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;color:#2563eb;font-size:13px;margin-top:12px}
.workspace,.pdf-workspace{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 34px 24px;box-shadow:0 6px 26px #18243b05}
.workspace-heading,.pdf-workspace-top{gap:14px;align-items:flex-start}
.workspace h2,.pdf-workspace-top h2{font-size:23px;line-height:1.4;letter-spacing:-.7px;color:#18243b}
.workspace-heading p,.pdf-workspace-top p{font-size:13px;line-height:1.8;color:#64748b}
.workspace-heading p,.pdf-workspace-top p{display:none}
.step-kicker{font-size:11px;color:#64748b;letter-spacing:.4px}
.format-badge{font-size:10px;color:#526987;border:1px solid #e2e8f0;background:#f8fafc;padding:5px 9px;white-space:nowrap}
.steps{font-size:12px;color:#64748b;gap:14px;margin:24px 0 22px}
.steps b{width:23px;height:23px;font-size:11px;background:#f1f5f9;color:#64748b;border:0}
.steps .active{color:#2563eb;font-weight:600}
.steps .active b{background:#2563eb;color:#fff}
.steps [aria-current=step]{color:#2563eb;font-weight:600}
.steps [aria-current=step] b{background:#2563eb;color:#fff}
.steps i{background:#e2e8f0;width:35px}
.dropzone,.pdf-dropzone{border:1.5px dashed #bacbe6;background:#f8faff;border-radius:12px;min-height:260px;padding:30px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dropzone:hover,.dropzone.dragging,.pdf-dropzone.dragging{background:#eff5ff;border-color:#2563eb}
.file-art,.pdf-file-symbol{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 17px;border-radius:15px;background:#eaf1ff;color:#2563eb;transform:none}
.file-art svg{width:28px;height:28px}
.dropzone h3,.pdf-dropzone h3{font-size:17px;font-weight:650;letter-spacing:-.4px;color:#18243b;margin:0 0 7px}
.dropzone p,.pdf-dropzone p{font-size:13px;color:#64748b;margin:0 0 20px}
.primary,.pdf-workspace .primary{background:#2563eb;color:white;border:1px solid #2563eb;border-radius:9px;min-height:46px;padding:12px 24px;font-size:14px;font-weight:650;line-height:1.5;box-shadow:0 3px 6px #2563eb12;text-decoration:none}
.primary:hover,.pdf-workspace .primary:hover{background:#1d4ed8;border-color:#1d4ed8;transform:none}
.primary:disabled{background:#2563eb;color:#fff;opacity:.5;box-shadow:none}
.file-hint,.pdf-dropzone small{font-size:12px;color:#64748b;margin-top:12px}
.sample-row,.sample-row button{font-size:12px;color:#64748b}
.sample-row button,.text-button{color:#2563eb;min-height:44px;font-size:13px}
.workspace-footer{font-size:12px;color:#64748b;border-color:var(--line);padding-top:17px;line-height:1.7;text-align:center}
.workspace-footer svg{width:15px;height:15px;flex:0 0 15px}
.workspace :is(label,.option-note,.field-row,.field-row output,.advanced summary,.range-fields label,.background-options>label,.background-colors>span){font-size:13px;color:#52647d}
.workspace :is(select,input[type=number],input[type=text]),.pdf-workspace :is(select,input[type=number],input[type=text]){min-height:44px;font-size:14px;color:#18243b;border-color:#d8e0ec;background:#fff;border-radius:8px}
.format-picker{border-color:var(--line);background:#f8fafc}
.format-picker label{font-size:13px}
.workspace :is(.secondary,.segmented button,.background-colors button,.rotation-actions button,.continue-tools button){min-height:44px;font-size:12px}
.secondary{border-color:#d8e0ec;color:#52647d;background:#fff}
.secondary:hover{background:#f1f5f9}
.segmented{background:#f1f5f9}
.segmented button.selected,.background-colors .selected{border-color:#9bbcf4;background:#eff5ff;color:#1d4ed8;box-shadow:none}
input[type=range]{accent-color:#2563eb}
.option-panel,.target-options,.background-intro,.text-background-options{background:#f8fafc;border-color:var(--line);border-radius:10px}
.option-panel .option-note,.background-intro p{font-size:12px;color:#64748b}
.file-info{border-color:var(--line);padding:13px;border-radius:10px}
.file-info strong{font-size:13px;color:#18243b}
.file-info span{font-size:12px;color:#64748b}
.file-info-icon{background:#eff5ff;color:#2563eb}
.icon-button{width:40px;height:40px;border-radius:8px;background:#f1f5f9;flex:0 0 40px}
.preview-box,.retouch-viewport,.compare-viewport{background-color:#f5f7fb;border-color:var(--line)}
.progress-panel{background:#eff5ff;color:#1e40af}
.progress-panel p{font-size:12px;color:#526987}
progress::-webkit-progress-value{background:#2563eb}
progress::-moz-progress-bar{background:#2563eb}
.success-icon{background:#eaf1ff;color:#2563eb;width:48px;height:48px}
.result h3{font-size:25px;color:#18243b}
.result p{font-size:13px;color:#64748b}
.pdf-main{max-width:1120px;padding:0 24px;margin:auto}
.pdf-main .breadcrumbs{padding:0}
.pdf-workspace{max-width:850px;margin:auto}
.pdf-format-menu{border-color:var(--line);border-radius:14px;margin-bottom:18px;color:#18243b}
.pdf-format-groups h2{font-size:13px;color:#64748b}
.pdf-format-groups a{min-height:44px;font-size:13px;color:#52647d;background:#fff;border-color:var(--line)}
.pdf-format-groups a:hover,.pdf-format-groups a.selected{background:#eff5ff;border-color:#8ab1f4;color:#1d4ed8}
.pdf-file-list li{border-color:var(--line);background:#f8fafc}
.pdf-file-list strong{font-size:13px}
.pdf-file-actions button{min-width:40px;min-height:40px;color:#52647d;background:#fff;border-color:#d8e0ec}
.pdf-workspace label{font-size:13px;color:#52647d}
.pdf-result{background:#f5f9ff;border-color:#d5e2f9;color:#18243b}
.pdf-crop-preview{background:#f1f5f9;border-color:var(--line)}
#pdf-crop-selection,#crop-selection{border-color:#2563eb}
.benefits{max-width:850px;margin:28px auto;padding:0 12px}
.benefits>div>span{background:#eff5ff;color:#2563eb}
.benefits strong{font-size:12px;color:#52647d}
.benefits small{font-size:11px;color:#64748b}
.all-tools-section,.directory-wrap,.related-tools{max-width:1120px;margin:54px auto;padding:0 24px}
.section-heading h2{font-size:27px;letter-spacing:-1px;color:#18243b}
.section-heading p{font-size:13px;color:#64748b;line-height:1.8}
.small-label{font-size:11px;color:#64748b;letter-spacing:1px}
.tool-directory{gap:14px}
.directory-card{background:#fff;border-color:var(--line);border-radius:13px;padding:22px 20px;gap:14px}
.directory-card:hover{border-color:#8ab1f4;background:#fafcff;box-shadow:0 5px 18px #18243b06}
.directory-card h3{font-size:16px;color:#18243b;letter-spacing:-.4px}
.directory-card p{font-size:13px;color:#64748b;line-height:1.75}
.directory-mark{background:#eff5ff;color:#2563eb;border-radius:10px;width:38px;height:40px}
.directory-mark.pdf-mark{background:#fff1ed;color:#e87859}
.directory-mark.video-mark{background:#f3efff;color:#8b6aca}.directory-mark svg{width:21px;height:21px}.group-count{font-size:13px;color:#64748b;font-weight:500;margin-left:8px;vertical-align:middle}
.tool-search{margin:0 auto 36px;max-width:650px}
.tool-search label{font-size:14px;color:#18243b}
.tool-search input{height:54px;border-color:#d8e0ec;border-radius:11px;font-size:16px;background:#fff;color:#18243b}
.tool-search p{font-size:13px;color:#64748b}
.how-section{max-width:1000px;margin:65px auto 0;padding:0 24px}
.how-grid{gap:16px;margin-top:28px}
.how-grid article{background:#f8fafc;border-color:var(--line);border-radius:12px;padding:24px}
.how-grid h3{font-size:15px;color:#18243b}
.how-grid p{font-size:13px;color:#64748b;line-height:1.9}
.how-number{color:#2563eb;font-size:13px}
.usage-notes{max-width:850px;margin:30px auto;padding:22px 26px;border:1px solid var(--line);background:#f8fafc;border-radius:12px}
.usage-notes h2{font-size:16px;color:#18243b}
.usage-notes p{font-size:13px;color:#64748b;line-height:1.9}
.faq-section{max-width:850px;margin:56px auto;padding:0 24px}
.faq-list summary{font-size:14px;color:#18243b;padding:20px 0}
.faq-list p{font-size:13px;color:#64748b;line-height:1.9}
.faq-list details{border-color:var(--line)}
.prose{max-width:850px;margin:0 auto 64px;padding:30px 32px;border:1px solid var(--line);border-radius:16px;background:#fff;color:#52647d;overflow-wrap:anywhere}
.prose h2{font-size:21px;letter-spacing:-.6px;margin-top:32px;color:#18243b}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:14px;line-height:1.95}
.prose a{color:#2563eb;text-underline-offset:3px}
.table-scroll{border-color:var(--line)}
.prose th{background:#f8fafc;color:#18243b}
.prose td,.prose th{border-color:var(--line);font-size:13px}
.license-prose section{overflow-x:auto}.license-prose table{width:100%;border-collapse:collapse}.license-prose code{font-size:11px;overflow-wrap:anywhere}.license-prose td{border-bottom:1px solid var(--line)}
.error-actions{margin-bottom:72px}
@media(max-width:930px){.converter{margin:0 24px}.usage-notes{margin-left:24px;margin-right:24px}.pdf-main .usage-notes{margin-left:0;margin-right:0}.prose{margin-left:24px;margin-right:24px}}
@media(max-width:760px){
 .hero,.tool-hero{padding:30px 20px}.hero h1{font-size:32px;letter-spacing:-1.2px;margin:14px 0 12px}.hero p{font-size:14px}
 .workspace,.pdf-workspace{padding:25px 24px 20px}.workspace h2,.pdf-workspace-top h2{font-size:21px}
 .steps{gap:12px;font-size:12px;justify-content:center}.steps i{width:25px}.steps b{width:22px;height:22px;font-size:11px}
 .tool-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-button strong{font-size:13px}.tool-button small{font-size:11px}
 .how-grid article{padding:22px 22px 22px 65px}.how-number{top:24px;left:24px}
 .benefits strong{font-size:11px;white-space:normal}.benefits small{font-size:10px}
 .home-footer>span{width:100%;margin-top:0}
}
@media(max-width:520px){
 .home-header-inner{padding:0 18px}.home-header nav{gap:14px}.home-header nav a{font-size:13px}
 .breadcrumbs{padding:0 20px;font-size:11px;margin-top:18px}.hero,.tool-hero{padding:26px 20px 28px}.hero h1{font-size:29px}
 .converter{margin:0 16px}.pdf-main{padding:0 16px}.pdf-main .hero{padding-left:4px;padding-right:4px}
 .tool-menu,.pdf-format-menu{border-radius:12px;margin-bottom:14px}.image-format-menu>summary,.pdf-format-menu>summary{padding:15px 17px;font-size:13px}
 .image-format-menu>summary span,.pdf-format-menu>summary span{display:block;margin:4px 0 0 17px;font-size:12px}
 .tool-switcher-content{padding:0 12px 14px}.tool-button{padding:10px 9px;gap:8px}.tool-icon{display:none}
 .workspace,.pdf-workspace{padding:22px 18px 18px;border-radius:14px}.workspace-heading p,.pdf-workspace-top p{font-size:13px}
 .workspace-heading h2,.pdf-workspace-top h2{font-size:20px}.format-badge{display:none}
 .steps{gap:8px;margin:20px 0;font-size:11px}.steps i{width:14px}.steps span{gap:5px}
 .dropzone,.pdf-dropzone{min-height:250px;padding:25px 14px}.dropzone h3,.pdf-dropzone h3{font-size:16px;text-align:center}
 .dropzone p,.pdf-dropzone p{font-size:12px;text-align:center}.file-hint{font-size:11px}.workspace-footer{font-size:11px}
 .workspace :is(select,input[type=text],input[type=number]),.pdf-workspace :is(select,input[type=text],input[type=number]){font-size:16px}
 .pdf-format-groups{padding:0 14px 16px}.pdf-format-groups nav{grid-template-columns:repeat(2,minmax(0,1fr))}.pdf-format-groups a{font-size:12px;padding:10px}
 .pdf-file-list li{flex-wrap:wrap}.pdf-file-actions{margin-left:auto}.pdf-file-actions button{min-width:44px;min-height:44px}
 .all-tools-section,.directory-wrap,.related-tools{padding:0 20px;margin:38px auto}.directory-card{padding:20px 17px}.directory-card p{font-size:13px}
 .how-section{margin-top:45px;padding:0 20px}.section-heading h2{font-size:24px}.usage-notes{margin:24px 16px;padding:20px}.faq-section{margin:42px auto;padding:0 20px}
 .prose{padding:24px 20px;margin:0 16px 45px;border-radius:14px}.prose h2{font-size:19px}.prose ul{padding-left:20px}.prose td,.prose th{padding:12px;min-width:90px}
 .home-footer{margin:0 20px}.home-footer nav{gap:8px 20px}.home-footer nav a{font-size:12px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}