:root { --ink:#10233d; --muted:#596778; --line:#d8dde3; --paper:#f6f7f8; --white:#fff; --coral:#d5674d; --teal:#087d7a; --yellow:#f4c95d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
header { min-height:70px; padding:0 max(24px,calc((100vw - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:var(--white); }
.brand { color:var(--ink); font-size:21px; font-weight:900; text-decoration:none; }.brand span { color:var(--coral); }
header nav { display:flex; align-items:center; gap:18px; } header nav a { color:var(--ink); font-size:13px; font-weight:750; text-decoration:none; }.community { padding:9px 12px; border:1px solid var(--ink); }
main { overflow:hidden; }.hero { max-width:980px; margin:auto; padding:78px 24px 42px; text-align:center; }.eyebrow { margin:0 0 12px; color:var(--teal); font-size:12px; font-weight:900; text-transform:uppercase; }.hero h1 { max-width:880px; margin:0 auto; font-size:clamp(42px,7vw,76px); line-height:1.02; letter-spacing:0; }.hero>p:last-child { max-width:740px; margin:22px auto 0; color:var(--muted); font-size:18px; line-height:1.65; }
.task-links { max-width:1160px; margin:0 auto 34px; padding:0 24px; display:flex; gap:8px; overflow-x:auto; }.task-links a { flex:0 0 auto; padding:9px 12px; border:1px solid var(--line); background:var(--white); color:var(--ink); font-size:12px; font-weight:800; text-decoration:none; }.task-links a[aria-current="page"] { border-color:var(--coral); color:var(--coral); }
.tool { max-width:1160px; margin:0 auto 70px; display:grid; grid-template-columns:.85fr 1.15fr; border:1px solid var(--line); background:var(--white); }.tool-copy { padding:44px; border-right:1px solid var(--line); }.tool h2,.details h2,.app-callout h2 { margin:0 0 14px; font-size:30px; line-height:1.15; }.tool-copy>p:not(.eyebrow),.tool-copy li,.details p,.details li,.app-callout p { color:var(--muted); line-height:1.65; }.tool-copy ul { padding-left:20px; }
.converter { padding:44px; display:flex; flex-direction:column; gap:16px; }.drop { min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed #aab5c0; background:#fafbfc; cursor:pointer; }.drop strong { font-size:20px; }.drop span,.converter>label { color:var(--muted); font-size:13px; }.converter>label { display:flex; justify-content:space-between; align-items:center; gap:12px; }.converter select { min-width:170px; padding:10px; border:1px solid var(--line); background:#fff; }.file-info { padding:11px 13px; background:#edf7f5; color:var(--teal); font-size:13px; font-weight:750; overflow-wrap:anywhere; }.converter button,.download,.app-callout>a { min-height:48px; padding:13px 18px; border:0; background:var(--coral); color:#fff; font:inherit; font-weight:850; text-align:center; text-decoration:none; cursor:pointer; }.converter button:disabled { opacity:.45; cursor:not-allowed; }.converter progress { width:100%; accent-color:var(--teal); }.converter #status { min-height:22px; margin:0; color:var(--muted); font-size:13px; }
.app-callout { max-width:1160px; margin:0 auto 70px; padding:34px 40px; display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--ink); color:#fff; }.app-callout p { margin-bottom:0; color:#dfe7ef; }.app-callout>a { flex:0 0 auto; background:var(--yellow); color:var(--ink); }
.details { max-width:1160px; margin:0 auto 90px; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:70px; }.details ol { padding-left:21px; }
footer { padding:28px max(24px,calc((100vw - 1160px)/2)); display:flex; justify-content:space-between; border-top:1px solid var(--line); background:#fff; font-size:13px; } footer a { color:var(--teal); }
@media(max-width:760px){header{padding:0 16px}header nav>a:first-child{display:none}.hero{padding-top:54px}.hero h1{font-size:42px}.tool{margin-inline:16px;grid-template-columns:1fr}.tool-copy{padding:28px;border-right:0;border-bottom:1px solid var(--line)}.converter{padding:24px}.app-callout{margin-inline:16px;padding:28px;align-items:flex-start;flex-direction:column}.details{grid-template-columns:1fr;gap:30px}.converter>label{align-items:flex-start;flex-direction:column}.converter select{width:100%}footer{gap:16px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}