/* FlipFree - CloudConvert-style layout: dark grey header and hero banner with a
   "convert [X] to [Y]" box and a red Select File button, light content and card grids below.
   Single light theme (no dark mode). */
/* Fonts are served from this site (no third-party requests); OFL licensed, see /site-fonts/. */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/site-fonts/source-sans-3-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/site-fonts/source-sans-3-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/site-fonts/source-sans-3-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/site-fonts/source-sans-3-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(/site-fonts/source-sans-3-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(/site-fonts/source-sans-3-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:800;font-display:swap;src:url(/site-fonts/source-sans-3-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:800;font-display:swap;src:url(/site-fonts/source-sans-3-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/site-fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/site-fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/site-fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/site-fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@view-transition{navigation:auto;}
html{scrollbar-gutter:stable;}
:root{
  --bg:#FFFFFF; --bg-soft:#F4F5F7; --panel:#FFFFFF; --ink:#23262D; --dim:#6B7079; --border:#E2E4E8;
  --brand:#E5322D; --brand-dark:#C42420; --brand-soft:rgba(229,50,45,.09);
  --ok:#1E9E5A; --ok-soft:rgba(30,158,90,.12); --down:#C24A3B;
  --soon:#8A6D1F; --soon-soft:rgba(232,163,61,.18);
  --menu-bg:#FFFFFF; --menu-side:#F5F6F8; --menu-hover:#ECEEF1; --btn-bg:#F1F2F4;
  --shadow:0 10px 30px rgba(20,24,32,.10); --shadow-lg:0 18px 48px rgba(20,24,32,.18);
  --radius:6px;
  /* dark grey band: header + hero */
  --band:#2B2D33; --band-line:rgba(255,255,255,.08); --band-hover:rgba(255,255,255,.09);
  --band-ink:#FFFFFF; --band-dim:#C3C6CD;
  color-scheme:light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; -webkit-font-smoothing:antialiased;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}
h1,h2,h3,h4{margin:0; font-weight:700;}
p{margin:0;}
a{color:inherit;}
.ico{width:18px; height:18px; flex-shrink:0;}

/* ---------------------------------------------------------------- buttons -- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:var(--radius); font-family:inherit; font-weight:700; cursor:pointer; text-decoration:none; transition:background .15s, transform .05s;}
.btn:active{transform:translateY(1px);}
.btn-brand{background:var(--brand); color:#fff;}
.btn-brand:hover{background:var(--brand-dark);}
.btn-dark{background:var(--ink); color:var(--bg); padding:10px 16px; font-size:.9rem;}
.btn-dark:disabled{opacity:.45; cursor:default;}
.btn-sm{padding:8px 14px; font-size:.9rem;}
.btn .ico{width:20px; height:20px;}

/* ----------------------------------------------------------------- header -- */
.top{position:sticky; top:0; z-index:40; background:var(--band); border-bottom:1px solid var(--band-line);}
.top-row{max-width:1180px; margin:0 auto; padding:0 20px; height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px;}
.top-row > .brand{justify-self:start;}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.3rem; color:var(--ink); text-decoration:none; letter-spacing:.03em;}
.top .brand{color:var(--band-ink);}
.brand-logo{display:block; height:38px; width:auto;}
.brand-mark{width:34px; height:34px; flex-shrink:0;}
.brand-name{font-size:1.35rem;}
.brand-free{color:var(--brand); font-weight:600;}
.top .brand-free{color:#FF5049;}
.top .logo-free{fill:#FF5049;}
.hero-free{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; list-style:none; margin:18px 0 0; padding:0; font-size:.92rem; color:var(--band-ink); opacity:.88;}
.hero-free li::before{content:"\2713"; color:#4ADE80; font-weight:800; margin-right:6px;}
.hero-free li:first-child{font-weight:800; opacity:1;}
.main-nav{display:flex; align-items:center; justify-content:center; gap:4px;}
.nav-item{display:flex; align-items:center; gap:6px; padding:9px 12px; border-radius:var(--radius); font-weight:600; font-size:1rem; color:var(--band-ink); text-decoration:none; cursor:pointer; list-style:none; user-select:none;}
.nav-item:hover, .nav-menu[open] > .nav-item{background:var(--band-hover);}
.nav-menu{position:relative;}
.nav-menu > summary::-webkit-details-marker{display:none;}
.nav-menu > summary:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.top-actions{display:flex; align-items:center; gap:10px; justify-self:end;}
.btn-edit-pdf{white-space:nowrap;}
/* #convert links stop below the sticky header instead of under it. */
#convert{scroll-margin-top:88px;}
.caret{display:inline-block; width:7px; height:7px; margin-left:2px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-2px); opacity:.7;}

/* simple dropdowns (Convert, Compress) */
.dropdown{position:absolute; top:calc(100% + 8px); left:0; z-index:50; min-width:240px; background:var(--menu-bg); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-lg); padding:6px;}
.dropdown ul{list-style:none; margin:0; padding:0;}
.dropdown a{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:5px; text-decoration:none; font-weight:600; font-size:.95rem; color:var(--ink);}
.dropdown a:hover{background:var(--menu-hover);}
.dropdown .ico{color:var(--brand);}

/* soon / live tags */
.soon-tag{display:inline-block; margin-left:4px; padding:1px 6px; border-radius:999px; background:var(--soon-soft); color:var(--soon); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle;}
.badge{display:inline-block; padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:700; font-style:normal; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.badge-live{background:var(--ok-soft); color:var(--ok);}
.badge-soon{background:var(--soon-soft); color:var(--soon);}

/* ------------------------------------------------------------------- hero -- */
.hero{background:var(--band); color:var(--band-ink); padding:56px 0 64px; text-align:center;}
.hero-short{padding:44px 0 40px;}
.hero-inner{max-width:900px; margin:0 auto; padding:0 20px;}
.hero h1{font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.1; font-weight:800; letter-spacing:-.02em; margin-bottom:16px;}
.hero-text{color:var(--band-dim); font-size:1.12rem; line-height:1.6; max-width:680px; margin:0 auto;}
.converter-box{display:flex; flex-direction:column; align-items:center; gap:22px; margin-top:34px;}
.convert-row{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; font-size:1.1rem;}
.convert-word{color:var(--band-dim); font-weight:600;}
.btn-select{padding:18px 44px; font-size:1.2rem; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.3);}

/* chips (the [PNG v] selectors) */
.chip-menu{position:relative; text-align:left;}
.chip-menu > summary{list-style:none; cursor:pointer; user-select:none;}
.chip-menu > summary::-webkit-details-marker{display:none;}
.chip{display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-width:132px; padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); color:var(--ink); font-weight:700; font-size:1.05rem; letter-spacing:.02em; box-shadow:0 1px 2px rgba(0,0,0,.04);}
.chip:hover{border-color:#B9BDC4;}
.hero .chip{border-color:transparent;}
.chip-menu[open] > .chip{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);}
.chip-empty .chip-label{color:var(--dim);}
.chip-menu > summary:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

/* two-pane format picker: search + categories (left) + format buttons (right) */
.fmt-panel{position:absolute; top:calc(100% + 8px); left:0; z-index:50; width:460px; max-width:calc(100vw - 32px); background:var(--menu-bg); color:var(--ink); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-lg); overflow:hidden; text-align:left;}
.fmt-panel.fmt-right{left:auto; right:0;}
.fmt-search{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); color:var(--dim); cursor:text;}
.fmt-q{flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:.98rem; color:var(--ink);}
.fmt-q::placeholder{color:var(--dim);}
.fmt-q::-webkit-search-cancel-button{display:none;}
.fmt-body{display:flex; height:300px;}
.fmt-cats{list-style:none; margin:0; padding:4px 0; width:170px; flex-shrink:0; overflow-y:auto; background:var(--menu-side); scrollbar-width:thin;}
.fmt-cat{display:flex; align-items:center; justify-content:space-between; width:100%; padding:10px 14px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:.95rem; text-align:left; cursor:pointer;}
.fmt-cat:hover{background:var(--menu-hover);}
.fmt-cat.is-active{background:var(--menu-bg); color:var(--brand); font-weight:700;}
.fmt-arrow{font-size:1.2rem; line-height:1; visibility:hidden;}
.fmt-cat.is-active .fmt-arrow{visibility:visible;}
.fmt-grids{flex:1; min-width:0; padding:12px; overflow-y:auto; border-left:1px solid var(--border); scrollbar-width:thin;}
.fmt-grid{display:none; flex-wrap:wrap; gap:8px; align-content:flex-start; margin-bottom:8px;}
.fmt-grid.is-active{display:flex;}
.fmt-btn{position:relative; padding:8px 12px; border:1px solid var(--border); border-radius:5px; background:var(--btn-bg); color:var(--ink); font-size:.82rem; font-weight:700; letter-spacing:.03em; text-decoration:none; opacity:.72;}
.fmt-btn.is-live{opacity:1;}
.fmt-btn.is-live::after{content:""; position:absolute; top:4px; right:4px; width:6px; height:6px; border-radius:50%; background:var(--ok);}
.fmt-btn:hover, .fmt-btn:focus-visible{background:var(--menu-bg); border-color:var(--brand); color:var(--brand); opacity:1; outline:none;}
.fmt-btn[aria-current]{border-color:var(--brand); color:var(--brand); opacity:1;}
.fmt-btn[hidden]{display:none;}
.fmt-none, .fmt-hint{display:none; color:var(--dim); font-size:.9rem; padding:6px 4px;}
.fmt-hint{display:block;}
.fmt-panel.searching .fmt-grid{display:flex;}
.fmt-panel.searching .fmt-cat.is-active{background:transparent; color:var(--ink); font-weight:400;}
.fmt-panel.searching .fmt-arrow{visibility:hidden;}
.fmt-panel.searching .mega-head{display:none;}
.fmt-panel.no-match .fmt-none{display:block;}

/* Tools mega menu (same picker, wider, anchored to the nav) */
.fmt-panel.mega{width:720px; top:calc(100% + 10px);}
.fmt-panel.mega .fmt-body{height:420px;}
.fmt-panel.mega .fmt-cats{width:220px;}
.mega-head{display:flex; align-items:center; gap:8px; width:100%; margin-bottom:6px; padding:2px 2px 10px; border-bottom:1px solid var(--border); font-weight:700; font-size:.98rem; color:var(--ink); text-decoration:none;}
a.mega-head:hover{color:var(--brand);}
.mega-head .ico{color:var(--brand);}

/* ----------------------------------------------------------------- layout -- */
.wrap{max-width:1080px; margin:0 auto; padding:0 20px 64px;}
.wrap-plain{padding-top:32px;}

/* -------------------------------------------------------------- tool card -- */
.tool-card{margin-top:-28px; position:relative; z-index:2; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:22px;}
.dropzone{border:2px dashed var(--border); border-radius:8px; background:var(--bg-soft); padding:30px 20px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;}
.dropzone:hover{border-color:#B9BDC4;}
.dropzone.drag{border-color:var(--brand); background:var(--brand-soft);}
.drop-ico{width:38px; height:38px; color:var(--brand); margin:0 auto 10px; display:block;}
.dropzone .cta{font-weight:700; font-size:1.1rem; margin-bottom:4px;}
.dropzone .sub{color:var(--dim); font-size:.92rem;}
input[type=file]{display:none;}

.controls{display:flex; gap:24px; flex-wrap:wrap; align-items:flex-end; margin-top:18px;}
.control{display:flex; flex-direction:column; gap:6px; min-width:180px;}
.control label{font-size:.82rem; color:var(--dim); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.control select{border:1px solid var(--border); border-radius:var(--radius); padding:9px 10px; background:var(--panel); color:var(--ink); font-family:inherit; font-size:.95rem;}
.slider-row{display:flex; align-items:center; gap:10px;}
input[type=range]{width:150px; accent-color:var(--brand);}
.quality-val{font-size:.88rem; min-width:34px;}

.results{margin-top:22px;}
.results-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
.results-head h2{font-size:1.05rem;}
.results-actions{display:flex; align-items:center; gap:14px;}
.savings-total{font-size:.92rem; color:var(--ok); font-weight:700;}
.file-row{display:grid; grid-template-columns:48px 1fr auto auto auto; gap:14px; align-items:center; padding:12px 6px; border-bottom:1px solid var(--border);}
.file-row:first-child{border-top:1px solid var(--border);}
.thumb{width:48px; height:48px; border-radius:5px; object-fit:cover; background:var(--bg-soft);}
.fname{font-size:.95rem; font-weight:700; word-break:break-all;}
.fsize{font-size:.8rem; color:var(--dim);}
.fsave{font-size:.85rem; color:var(--ok); font-weight:700; white-space:nowrap;}
.fsave.worse{color:var(--down);}
.fstatus{font-size:.82rem; color:var(--dim); white-space:nowrap;}
.dl-btn{background:var(--brand); color:#fff; border:0; border-radius:5px; padding:8px 14px; font-size:.85rem; font-weight:700; cursor:pointer; font-family:inherit;}
.dl-btn:hover{background:var(--brand-dark);}
@media (max-width:640px){
  .file-row{grid-template-columns:36px 1fr auto; grid-template-areas:"thumb name name" "meta meta actions";}
  .thumb{grid-area:thumb; width:36px; height:36px;} .fname{grid-area:name;}
}
.empty-note{color:var(--dim); font-size:.92rem; margin-top:12px;}

/* coming-soon box (planned conversions) */
.soon-box{margin-top:-28px; position:relative; z-index:2; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:28px; text-align:center;}
.soon-box h2{font-size:1.4rem; margin:12px 0 8px;}
.soon-box > p{color:var(--dim); line-height:1.6; max-width:640px; margin:0 auto;}
.soon-box h3{font-size:1rem; margin:22px 0 10px;}
.soon-box .chips{justify-content:center;}
.soon-more{margin-top:18px !important; font-size:.95rem;}
.soon-more a{color:var(--brand); font-weight:700;}

/* --------------------------------------------------------------- sections -- */
.section-title{font-size:1.7rem; font-weight:800; text-align:center; letter-spacing:-.01em;}
.section-sub{color:var(--dim); text-align:center; margin-top:8px;}

.features{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:56px;}
.feature{text-align:center; padding:8px 6px;}
.feature-ico{width:46px; height:46px; color:var(--brand); padding:10px; border-radius:50%; background:var(--brand-soft); margin-bottom:14px;}
.feature h3{font-size:1.12rem; margin-bottom:8px;}
.feature p{color:var(--dim); font-size:.95rem; line-height:1.6;}
@media (max-width:900px){ .features{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .features{grid-template-columns:1fr;} }

.pop-section, .cat-section{margin-top:64px;}
.pop-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-top:22px;}
.pop-card{display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); text-decoration:none; font-weight:700; transition:border-color .15s, box-shadow .15s;}
.pop-card:hover{border-color:var(--brand); box-shadow:var(--shadow);}
.pop-arrow{color:var(--dim);}
.pop-to{color:var(--brand);}
.section-note{color:var(--dim); margin-bottom:12px;}

.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:24px;}
.cat-card{display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--border); border-radius:8px; background:var(--panel); text-decoration:none; transition:border-color .15s, box-shadow .15s;}
.cat-card:hover{border-color:var(--brand); box-shadow:var(--shadow);}
.cat-ico{display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex-shrink:0; border-radius:10px; background:var(--brand-soft); color:var(--brand);}
.cat-ico .ico{width:24px; height:24px;}
.cat-body{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0;}
.cat-body strong{font-size:1.05rem;}
.cat-formats{font-size:.82rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.fcards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:40px;}
.fcards:has(.fcard:only-child){grid-template-columns:1fr;}
@media (max-width:760px){ .fcards{grid-template-columns:1fr;} }
.fcard{display:flex; gap:16px; padding:22px; border:1px solid var(--border); border-radius:8px; background:var(--panel);}
/* (format cards use .ficon-lg) */
.fcard h3{font-size:1.08rem; margin-bottom:8px;}
.fcard h3 span{font-weight:400; color:var(--dim); font-size:.92rem;}
.fcard p{font-size:.95rem; line-height:1.6; color:var(--dim); margin-bottom:10px;}
.fcard a{font-size:.92rem; font-weight:700; color:var(--brand); text-decoration:none;}
.fcard a:hover{text-decoration:underline;}

.notes, .faq, .related, .hub-section, .conv-section{margin-top:44px;}
.notes h2, .faq h2, .related h2, .hub-section h2, .conv-section h2{font-size:1.35rem; margin-bottom:14px;}
.hub-section h2{display:flex; align-items:center; gap:10px;}
.hub-section h2 .ico{width:24px; height:24px; color:var(--brand);}
.hub-section h2 a{text-decoration:none;}
.hub-section h2 a:hover{color:var(--brand);}
.conv-group{margin-top:18px;}
.conv-group h3{font-size:.85rem; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
.notes ul{margin:0; padding-left:20px; line-height:1.7; font-size:1rem; max-width:76ch;}
.faq details{border-bottom:1px solid var(--border); padding:14px 0;}
.faq summary{cursor:pointer; font-weight:700; font-size:1.02rem;}
.faq details p{margin-top:8px; font-size:.97rem; line-height:1.6; color:var(--dim); max-width:76ch;}
.chips{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px;}
.chips a{display:inline-block; padding:7px 13px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--ink); font-size:.88rem; font-weight:600; text-decoration:none;}
.chips a:hover{border-color:var(--brand); color:var(--brand);}
.chips small{font-weight:400; color:var(--dim); margin-left:4px;}
.more-link{margin-top:16px;} .more-link a{color:var(--brand); font-weight:700;}

.fmt-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px;}
.fmt-card{display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid var(--border); border-radius:8px; background:var(--panel); text-decoration:none;}
.fmt-card:hover{border-color:var(--brand);}
.fmt-card .ficon{margin-bottom:6px;}
.fmt-card strong{font-size:1.02rem;}
.fmt-card span{font-size:.84rem; color:var(--dim);}
.fmt-card .badge{align-self:flex-start; margin-top:4px;}

.jump{display:flex; flex-wrap:wrap; gap:6px; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-soft);}
.jump a{padding:6px 11px; border-radius:5px; font-weight:600; font-size:.9rem; text-decoration:none;}
.jump a:hover{background:var(--panel); color:var(--brand);}

.privacy-note{margin-top:36px; padding-top:20px; border-top:1px solid var(--border); font-size:.9rem; color:var(--dim); line-height:1.6; max-width:76ch;}
.privacy-note strong{color:var(--ink);}

/* --------------------------------------------------------------------- ads -- */
.ad-slot{margin:48px 0 30px; padding:10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-soft); min-height:90px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;}
.ad-slot .ad-label, .side-ad .ad-label{font-size:.7rem; color:var(--dim); align-self:flex-start;}
.side-ad{position:fixed; top:120px; width:160px; display:none; flex-direction:column; align-items:center; gap:6px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-soft); padding:10px; min-height:600px;}
.side-ad.left{left:24px;} .side-ad.right{right:24px;}
@media (min-width:1560px){ .side-ad{display:flex;} }

/* ----------------------------------------------------------------- footer -- */
.site-footer{margin-top:20px; background:var(--bg-soft); border-top:1px solid var(--border);}
.footer-inner{max-width:1180px; margin:0 auto; padding:44px 20px 28px; display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:28px;}
.footer-6{grid-template-columns:1.3fr repeat(5,1fr); gap:24px;}
.footer-brand p{color:var(--dim); font-size:.93rem; line-height:1.6; margin-top:12px; max-width:34ch;}
.site-footer h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin-bottom:12px;}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.site-footer ul a{text-decoration:none; font-size:.95rem;}
.site-footer ul a:hover{color:var(--brand);}
.footer-bottom{max-width:1180px; margin:0 auto; padding:18px 20px 26px; border-top:1px solid var(--border); color:var(--dim); font-size:.88rem;}
@media (max-width:980px){ .footer-inner,.footer-6{grid-template-columns:repeat(3,1fr);} .footer-brand{grid-column:1 / -1;} }
@media (max-width:640px){ .footer-inner,.footer-6{grid-template-columns:1fr 1fr;} }
@media (max-width:400px){ .footer-inner,.footer-6{grid-template-columns:1fr;} }

/* ----------------------------------------------------------------- mobile -- */
@media (max-width:860px){
  .top-row{gap:12px; grid-template-columns:auto 1fr auto;}
  .main-nav{justify-content:flex-start;}
  .nav-link{display:none;}
  .nav-link.nav-resume{display:inline-flex;}
  .top-actions .btn-edit-pdf{padding:7px 11px; font-size:.85rem;}
  .top-actions .btn-edit-pdf .ico{display:none;}
  .nav-simple{display:none;}
  .fmt-panel.mega{position:fixed; top:64px; left:8px; right:8px; width:auto; max-width:none;}
  .fmt-panel.mega .fmt-body{height:min(60vh,440px);}
  .fmt-panel.mega .fmt-cats{width:150px;}
}
@media (max-width:640px){
  .hero{padding:40px 0 52px;}
  .chip-menu{position:static;}
  .convert-row{position:relative;}
  .fmt-panel, .fmt-panel.fmt-right{left:50%; right:auto; transform:translateX(-50%); width:calc(100vw - 32px);}
  .fmt-panel.mega{transform:none;}
  .fmt-cats{width:130px;}
  .btn-select{width:100%; max-width:360px;}
  .tool-card, .soon-box{padding:16px;}
}

/* ------------------------------------------------------------ SEO content -- */
.skip-link{position:absolute; left:-9999px; top:8px; z-index:100; padding:10px 14px; border-radius:var(--radius); background:var(--brand); color:#fff; font-weight:700; text-decoration:none;}
.skip-link:focus{left:8px;}

.crumbs{margin-bottom:14px; font-size:.9rem; color:var(--band-dim);}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px;}
.crumbs li{display:flex; align-items:center; gap:6px;}
.crumbs li + li::before{content:"\203A"; color:var(--band-dim);}
.crumbs a{color:var(--band-dim); text-decoration:none;}
.crumbs a:hover{color:var(--band-ink); text-decoration:underline;}
.crumbs [aria-current]{color:var(--band-ink); font-weight:600;}

.howto{margin-top:44px;}
.howto h2, .compare h2{font-size:1.35rem; margin-bottom:16px;}
.steps{list-style:none; counter-reset:step; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.steps li{counter-increment:step; position:relative; padding:20px 18px 18px 64px; border:1px solid var(--border); border-radius:8px; background:var(--panel); line-height:1.55; font-size:.96rem; color:var(--dim);}
.steps li::before{content:counter(step); position:absolute; left:18px; top:18px; width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;}
.steps strong{display:block; color:var(--ink); margin-bottom:4px;}
@media (max-width:760px){ .steps{grid-template-columns:1fr;} }

.compare{margin-top:44px;}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:8px;}
.compare table, .article table{width:100%; border-collapse:collapse; font-size:.95rem; background:var(--panel);}
.compare th, .compare td, .article th, .article td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top;}
.compare tbody tr:last-child th, .compare tbody tr:last-child td, .article tbody tr:last-child th, .article tbody tr:last-child td{border-bottom:0;}
.compare thead th, .article thead th{background:var(--bg-soft); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--dim);}
.compare tbody th, .article tbody th{font-weight:600; color:var(--dim); width:28%;}

.prose{max-width:760px; line-height:1.7; font-size:1.02rem;}
.prose h2{font-size:1.25rem; margin:30px 0 8px;}
.prose p{margin:0 0 12px;}
.prose a{color:var(--brand); font-weight:600;}
.prose .muted{color:var(--dim); font-size:.92rem;}
.contact-mail{font-size:1.15rem; font-weight:600;}
.guide{margin:36px 0;}
.guide ul{margin:0 0 12px; padding-left:22px;}
.guide li{margin:4px 0;}
.guide .problems{margin:0;}
.guide .problems dt{font-weight:700; margin-top:12px;}
.guide .problems dd{margin:4px 0 0; color:var(--muted, #4b5059);}

/* ------------------------------------------------------ file-type icons -- */
/* A page with a folded corner, coloured by category, with the extension on it. */
.ficon{--c:#7A808B; position:relative; display:inline-flex; flex-shrink:0; align-items:flex-end; justify-content:center; background:var(--c); color:#fff; font-style:normal;
  clip-path:polygon(0 0, 68% 0, 100% 24%, 100% 100%, 0 100%); border-radius:3px;}
.ficon::after{content:""; position:absolute; top:0; right:0; width:32%; height:24%; background:rgba(255,255,255,.45); clip-path:polygon(0 0, 0 100%, 100% 100%);}
.ficon b{font-weight:800; letter-spacing:.02em; line-height:1; padding:0 2px; max-width:100%; overflow:hidden; white-space:nowrap;}
.ficon-xs{width:14px; height:18px; border-radius:2px;}
.ficon-sm{width:28px; height:36px; padding-bottom:5px;} .ficon-sm b{font-size:7px;}
.ficon-md{width:38px; height:48px; padding-bottom:7px;} .ficon-md b{font-size:9px;}
.ficon-lg{width:52px; height:66px; padding-bottom:9px;} .ficon-lg b{font-size:11px;}
.fi-archive{--c:#8D6E63;} .fi-audio{--c:#9B3FD4;} .fi-cad{--c:#00838F;} .fi-document{--c:#2B6CDE;}
.fi-ebook{--c:#C27C0E;} .fi-font{--c:#4A5568;} .fi-image{--c:#1F9D6B;} .fi-pdf{--c:#E5322D;}
.fi-presentation{--c:#E8590C;} .fi-spreadsheet{--c:#2F8A3E;} .fi-vector{--c:#C2185B;} .fi-video{--c:#6741D9;}
.fi-other, .fi-none{--c:#B8BDC6;}
.fmt-btn{display:inline-flex; align-items:center; gap:7px;}
.fmt-btn .fsvg{width:15px; height:18px;}
.fmt-btn.is-live::after{top:3px; right:3px;}
/* SVG category icons (sprite in the header): a coloured page with a white symbol */
.fsvg{display:inline-block; flex-shrink:0; width:18px; height:21px; color:#7A808B; vertical-align:middle;}
.chip .fsvg{width:22px; height:26px;}
.fsvg.fi-archive{color:#8D6E63;} .fsvg.fi-audio{color:#9B3FD4;} .fsvg.fi-cad{color:#00838F;} .fsvg.fi-document{color:#2B6CDE;}
.fsvg.fi-ebook{color:#C27C0E;} .fsvg.fi-font{color:#4A5568;} .fsvg.fi-image{color:#1F9D6B;} .fsvg.fi-pdf{color:#E5322D;}
.fsvg.fi-presentation{color:#E8590C;} .fsvg.fi-spreadsheet{color:#2F8A3E;} .fsvg.fi-vector{color:#C2185B;} .fsvg.fi-video{color:#6741D9;}
.fsvg.fi-none{color:#C9CDD4;}

/* hero rotator: the empty "convert [..] to [..]" chips cycle through popular conversions */
.chip-label{display:inline-block; transition:opacity .28s ease, transform .28s ease;}
.chip.is-rotating .chip-label{color:var(--ink);}
.chip.swap-out .chip-label, .chip.swap-out .fsvg{opacity:0; transform:translateY(-8px);}
.chip.swap-in .chip-label, .chip.swap-in .fsvg{opacity:0; transform:translateY(8px); transition:none;}
.chip .fsvg{transition:opacity .28s ease, transform .28s ease, color .3s;}
@media (prefers-reduced-motion: reduce){ .chip-label, .chip .fsvg{transition:none !important;} }

/* per-file target in the upload list (home/category pages) */
.row-target{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--dim);}
.row-target select{border:1px solid var(--border); border-radius:5px; padding:6px 8px; font:inherit; color:var(--ink); background:var(--panel);}
.convert-btn{background:var(--brand); color:#fff; border:0; border-radius:5px; padding:7px 12px; font:inherit; font-weight:700; cursor:pointer;}
.convert-btn:disabled{opacity:.5; cursor:default;}
.fstatus.err{color:var(--down); white-space:normal; max-width:280px;}
.file-row .ficon{justify-self:center;}

/* --------------------------------------------- file list (CloudConvert style) -- */
.dropzone[hidden]{display:none;}
.file-list{display:flex; flex-direction:column; gap:12px;}
.file-card{border:1px solid var(--border); border-radius:8px; background:var(--panel); padding:14px 18px; box-shadow:0 1px 2px rgba(20,24,32,.04);}
.file-main{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.file-icon{display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border:1px solid var(--border); border-radius:6px; background:var(--bg);}
.file-icon .fsvg{width:22px; height:26px;}
.file-info{flex:1; min-width:180px;}
.fname{font-weight:500; font-size:.98rem; word-break:break-word;}
.fmeta{font-size:.82rem; color:var(--dim); margin-top:2px;}
.file-convert{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.convert-label{display:inline-flex; align-items:center; gap:6px; color:var(--dim); font-size:.92rem;}
.convert-label .ico{width:17px; height:17px;}
.fmt-pill{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--border); border-radius:5px; font-weight:700; font-size:.88rem; background:var(--panel);}
.fmt-pill .fsvg{width:14px; height:17px;}
.file-convert .arrow{color:var(--dim); font-size:1.1rem;}
.target-sel{min-width:120px; padding:7px 30px 7px 12px; border:1px solid var(--border); border-radius:5px; background:var(--panel); color:var(--ink); font:inherit; font-weight:700; font-size:.88rem; cursor:pointer;}
.target-sel:disabled{cursor:default; opacity:1; background:var(--bg-soft);}
.btn-ghost{background:var(--panel); color:var(--ink); border:1px solid var(--border); padding:8px 14px; font-size:.92rem;}
.btn-ghost:hover{background:var(--bg-soft);}
.btn-ghost:disabled{opacity:.5; cursor:default;}
.btn-ghost .ico, .btn-success .ico, .btn-convert .ico{width:17px; height:17px;}
.opt-btn[aria-expanded="true"]{border-color:var(--brand); color:var(--brand);}
.remove-btn{border:0; background:transparent; color:var(--dim); font-size:1.6rem; line-height:1; width:34px; height:34px; border-radius:5px; cursor:pointer;}
.remove-btn:hover{background:var(--bg-soft); color:var(--ink);}
.remove-btn:disabled{opacity:.3; cursor:default;}
.file-options{display:flex; gap:24px; flex-wrap:wrap; align-items:center; margin-top:12px; padding:12px 14px; border-radius:6px; background:var(--bg-soft); font-size:.9rem;}
.file-options label{display:flex; align-items:center; gap:10px; font-weight:600;}
.file-options input[type=range]{width:140px;}
.file-options select{padding:6px 8px; border:1px solid var(--border); border-radius:5px; font:inherit; background:var(--panel);}
.q-val{min-width:36px; font-variant-numeric:tabular-nums; color:var(--dim);}
.file-status{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);}
.badge-state{display:inline-block; padding:3px 9px; border-radius:4px; font-size:.74rem; font-weight:700; letter-spacing:.05em; border:1px solid;}
.st-ok{color:#1E9E5A; background:rgba(30,158,90,.08); border-color:rgba(30,158,90,.35);}
.st-busy{color:#2B6CDE; background:rgba(43,108,222,.08); border-color:rgba(43,108,222,.35);}
.st-wait{color:var(--dim); background:var(--bg-soft); border-color:var(--border);}
.st-err{color:var(--down); background:rgba(194,74,59,.08); border-color:rgba(194,74,59,.35);}
.status-text{flex:1; min-width:160px; display:flex; align-items:center; gap:10px; font-size:.92rem;}
.out-name{font-weight:500; word-break:break-word;}
.muted{color:var(--dim);}
.err-text{color:var(--down);}
.row-progress{flex:0 1 220px; height:6px; border-radius:999px; background:var(--bg-soft); overflow:hidden;}
.row-progress span{display:block; height:100%; background:#2B6CDE; transition:width .2s;}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; color:#2B6CDE; vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .spinner{animation:none;} }
.btn-success{background:#1E9E5A; color:#fff;}
.btn-success:hover{background:#178a4d;}
.btn-sm.btn-success{padding:8px 14px; font-size:.9rem;}
.tool-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:14px; padding:14px 18px; border:1px solid var(--border); border-radius:8px; background:var(--panel); box-shadow:0 -1px 0 rgba(0,0,0,.02);}
.tool-bar[hidden]{display:none;}
.bar-status{display:flex; align-items:center; gap:8px; color:var(--dim); font-size:.95rem;}
.done-check{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#1E9E5A; color:#fff; font-size:.75rem;}
.bar-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.btn-convert{padding:11px 22px; font-size:1rem;}
.btn-convert[hidden], #zipBtn[hidden]{display:none;}
#zipBtn{padding:11px 20px; font-size:1rem;}
@media (max-width:760px){
  .file-convert{width:100%;}
  .file-main .remove-btn{margin-left:auto;}
  .tool-bar{position:sticky; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); z-index:5;}
}

.saved{display:inline-block; padding:2px 8px; border-radius:999px; background:rgba(30,158,90,.1); color:#1E9E5A; font-weight:700; font-size:.82rem;}

/* guides (/guides and /guides/<slug>) */
.article ul, .article ol{margin:0 0 14px; padding-left:22px;}
.article li{margin:5px 0;}
.article code{font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.88em; background:var(--bg-soft); padding:2px 6px; border-radius:4px; word-break:break-all;}
.article .table-wrap{margin:8px 0 16px;}
.article-meta{margin-bottom:14px;}
.article-tools{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px;}
.article-tools .btn{text-decoration:none;}
.prose .article-tools a{color:inherit;}
.prose .article-tools .btn-brand{color:#fff;}
.read-more{margin-top:44px;}
.read-more h2{font-size:1.35rem; margin-bottom:14px;}
.guide-links{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.guide-links li{border:1px solid var(--border); border-radius:8px; background:var(--panel); padding:14px 16px;}
.guide-links a{font-weight:700; color:var(--ink); text-decoration:none;}
.guide-links a:hover{color:var(--brand);}
.guide-links span{display:block; color:var(--dim); font-size:.92rem; margin-top:4px; line-height:1.5;}
.guide-list{grid-template-columns:repeat(2,1fr);}
@media (max-width:760px){ .guide-list{grid-template-columns:1fr;} }

/* "One PDF or separate PDFs?" after converting several images to PDF */
.pdf-choice{border:0; border-radius:16px; padding:0; width:min(520px, calc(100vw - 32px)); box-shadow:0 2px 6px rgba(17,20,28,.08), 0 18px 48px rgba(17,20,28,.2); color:var(--ink);}
.pdf-choice::backdrop{background:rgba(17,20,28,.5);}
.pdf-choice form{position:relative; padding:24px;}
.pdf-choice h2{font-size:1.3rem; margin:0 32px 4px 0;}
.pdf-choice-sub{margin:0 0 18px; color:var(--dim);}
.pdf-choice-x{position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:none; font-size:1.5rem; line-height:1; color:var(--dim); cursor:pointer;}
.pdf-choice-x:hover{background:var(--bg-soft); color:var(--ink);}
.pdf-choice-opts{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pdf-choice-opt{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px; border:2px solid var(--border); border-radius:12px; background:var(--panel); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color .15s, box-shadow .15s;}
.pdf-choice-opt svg{width:44px; height:44px;}
.pdf-choice-opt strong{font-size:1.05rem;}
.pdf-choice-opt span{font-size:.88rem; color:var(--dim); line-height:1.4;}
.pdf-choice-opt:hover, .pdf-choice-opt:focus-visible{border-color:var(--brand); box-shadow:0 4px 14px rgba(229,50,45,.14); outline:none;}
@media (max-width:480px){ .pdf-choice-opts{grid-template-columns:1fr;} }
/* ------------------------------------------------- sign in, account -- */
.acct{padding:40px 16px 48px; background:var(--bg-soft);}
body:has(.acct) .site-footer{margin-top:0;}
.wrap-plain:has(.acct){padding:0; max-width:none;}
.auth-card{max-width:420px; margin:0 auto; padding:32px 30px 26px; border-radius:16px; background:var(--panel); border:1px solid var(--border); box-shadow:0 2px 6px rgba(17,20,28,.04), 0 16px 40px rgba(17,20,28,.08);}
.auth-brand{display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; font-weight:800; font-size:1.15rem; color:var(--ink); text-decoration:none;}
.auth-brand .brand-mark{width:30px; height:30px;}
.auth-card h1{font-size:1.6rem; margin:0; letter-spacing:-.01em;}
.auth-lede{margin:6px 0 22px; color:var(--dim);}
.auth-google{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--ink); font-weight:700; text-decoration:none; transition:border-color .15s, box-shadow .15s;}
.auth-google:hover{border-color:#B9BEC7; box-shadow:0 2px 8px rgba(17,20,28,.08);}
.auth-google svg{width:20px; height:20px;}
.auth-or{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--dim); font-size:.85rem;}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:var(--border);}
.auth-form{display:grid; gap:8px;}
.auth-form label{font-weight:700; font-size:.9rem; margin-top:4px;}
.auth-form input{width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:1rem; background:#fff; color:var(--ink);}
.auth-form input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(229,50,45,.15);}
.auth-form .btn{justify-content:center; margin-top:6px; padding:12px; font-size:1rem;}
.auth-form .btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.auth-msg{margin:4px 0 0; padding:9px 12px; border-radius:8px; background:#FDECEC; color:#B42318; font-size:.9rem;}
.auth-small{margin:16px 0 0; color:var(--dim); font-size:.85rem; line-height:1.5;}
.auth-switch{margin:18px 0 0; padding-top:16px; border-top:1px solid var(--border); text-align:center; font-size:.95rem;}
.auth-card a:not(.auth-brand):not(.auth-google):not(.btn){color:var(--brand); font-weight:600;}
.auth-perks{max-width:420px; margin:18px auto 0; padding:0; list-style:none; display:grid; gap:6px; color:var(--dim); font-size:.92rem;}
.auth-perks li::before{content:"\2713"; color:#1E9E5A; font-weight:800; margin-right:8px;}


.ac{max-width:720px; margin:0 auto; display:grid; gap:14px;}
.ac h1{font-size:1.8rem; margin:0;}
.ac-email{margin:0 0 6px; color:var(--dim);}
.ac-email a{color:var(--brand); font-weight:600;}
.ac-card{padding:22px 24px; border-radius:14px; background:var(--panel); border:1px solid var(--border);}
.ac-card p{margin:6px 0 0; color:var(--dim);}
.ac-label{font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dim);}
.ac-plan{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.ac-plan h2{margin:4px 0 0; font-size:1.5rem;}
.ac-plan .btn{text-decoration:none;}
.ac-danger .btn{margin-top:12px; color:#B42318; border-color:#F3C9C5;}
@media (max-width:480px){ .auth-card{padding:24px 18px 20px;} .acct{padding-top:24px;} }
.ac-plan .btn{gap:8px; padding:11px 18px;}
.auth-code{display:grid; gap:8px; text-align:left;}
.auth-code .auth-ico{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#FDE8E7; color:var(--brand);}
.auth-code .auth-ico svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.auth-code h1{font-size:1.5rem; margin:6px 0 0;}
.auth-code .auth-lede{margin:0 0 8px;}
.auth-code label{font-weight:700; font-size:.9rem; margin-top:4px;}
.auth-code input{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:1rem; background:#fff; color:var(--ink);}
.auth-code input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(229,50,45,.15);}
.auth-code .auth-code-input{font-size:1.6rem; font-weight:800; letter-spacing:.4em; text-align:center; font-variant-numeric:tabular-nums; padding:10px 14px;}
.auth-code .btn{justify-content:center; margin-top:6px; padding:12px; font-size:1rem;}
.auth-code .auth-small{margin-top:8px;}
.auth-msg.ok{background:#E7F6EE; color:#16794A;}
.auth-link{border:0; background:none; padding:0; font:inherit; font-weight:600; color:var(--brand); cursor:pointer;}
.auth-link:hover{text-decoration:underline;}
.auth-link:disabled{color:var(--dim); cursor:default; text-decoration:none;}
.auth-code[hidden]{display:none;}

/* Phones: logo, Tools, Resume and Edit PDF must fit on one line */
@media (max-width:520px){
  .top-row{gap:4px; padding-left:12px; padding-right:12px;}
  .nav-long{display:none;}
  .main-nav{gap:0;}
  .main-nav .nav-item{padding-left:6px; padding-right:6px;}
  .top-row > .brand{gap:7px;}
  .brand-logo{height:30px;}
  .brand-name{font-size:1.05rem;}
  .brand .brand-mark{width:24px; height:24px;}
  .top-actions .btn-edit-pdf{padding:7px 9px;}
}
@media (max-width:370px){ .top-row > .brand .brand-name{display:none;} .brand-logo{height:25px;} }
@media (max-width:340px){ .top-row{padding-left:8px; padding-right:8px;} .main-nav .nav-item{padding-left:4px; padding-right:4px;} .top-actions .btn-edit-pdf{padding:6px 7px; font-size:.8rem;} }
.nav-item.nav-resume{gap:0;}
.related-tools{margin-top:34px;} .related-tools h3{margin:18px 0 8px; font-size:1.05rem;} .also-try{margin:18px 0; padding:12px 16px; border-radius:10px; background:var(--bg-soft);} .also-try a{color:var(--brand); font-weight:700;}

/* ------------------------------------------------------------- PDF tools -- */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.pt{margin:28px auto 8px; max-width:1040px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:22px;}
.pt-drop{display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 16px; border:2px dashed var(--border); border-radius:10px; text-align:center; transition:border-color .15s, background .15s;}
.pt-drop.is-over{border-color:var(--brand); background:var(--brand-soft);}
.pt-drop-ico{width:44px; height:44px; color:var(--brand);}
.pt-drop .btn-select{box-shadow:0 8px 22px rgba(229,50,45,.25);}
.pt-drop-sub{margin:0; color:var(--dim);}
.pt-private{display:flex; align-items:center; gap:6px; margin:4px 0 0; font-size:.9rem; font-weight:600; color:var(--ok);}
.pt-private .ico{width:17px; height:17px;}
.pt-drop-msg{margin:4px 0 0; font-weight:600; color:var(--dim);}
.pt-drop-msg.bad, .pt-msg.bad{color:var(--down);}
.pt-drop-msg a, .pt-msg a{color:var(--brand); font-weight:700;}
.pt-filebar{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border);}
.pt-filebar .ico{width:22px; height:22px; color:var(--brand); flex:none;}
.pt-fname{font-weight:700; overflow-wrap:anywhere; min-width:0;}
.pt-fmeta{color:var(--dim); font-size:.92rem;}
.pt-filebar .pt-link{margin-left:auto;}
.pt-link{border:0; background:none; padding:4px 2px; font:inherit; font-weight:700; color:var(--brand); cursor:pointer;}
.pt-link:hover{text-decoration:underline;}
.pt-link:disabled{color:var(--dim); cursor:default; text-decoration:none; opacity:.6;}
.pt-opts{display:flex; flex-direction:column; gap:14px; max-width:620px;}
.pt-radios{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.pt-radios legend{font-weight:700; margin-bottom:6px; padding:0;}
.pt-radios label, .pt-check{display:flex; align-items:center; gap:8px; cursor:pointer;}
.pt-radios input, .pt-check input{width:18px; height:18px; accent-color:var(--brand); margin:0;}
.pt-inline{flex-direction:row; flex-wrap:wrap; gap:8px 18px;}
.pt-row{display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px;}
.pt-field{display:flex; flex-direction:column; gap:6px; font-weight:600;}
.pt-field-s{max-width:280px;}
.pt-field input, .pt-field select{font:inherit; font-weight:400; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--ink); width:100%; box-sizing:border-box;}
.pt-field input:focus, .pt-field select:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:transparent;}
.pt-pw{display:flex; position:relative;}
.pt-pw input{padding-right:64px;}
.pt-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:var(--bg-soft); border-radius:6px; padding:5px 9px; font:inherit; font-size:.85rem; font-weight:700; color:var(--dim); cursor:pointer;}
.pt-hint{margin:0; color:var(--dim); font-size:.95rem;}
.pt-bar{position:sticky; bottom:0; z-index:5; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px 18px; margin:18px -22px -22px; padding:14px 22px; background:var(--panel); border-top:1px solid var(--border); border-radius:0 0 12px 12px;}
.pt-msg{margin:0 auto 0 0; color:var(--dim); font-weight:600;}
.pt-go{padding:13px 30px; font-size:1.05rem; border-radius:8px;}
.pt-go:disabled{opacity:.55; cursor:default;}
.pt-go.is-busy{cursor:progress;}

.pt-pages{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); gap:16px;}
.pt-page{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px 8px; border:2px solid transparent; border-radius:10px; background:var(--bg-soft); user-select:none;}
.pt-thumb{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:3 / 4; transition:transform .2s;}
.pt-thumb canvas{max-width:100%; max-height:100%; width:auto; height:auto; background:#fff; box-shadow:0 1px 4px rgba(20,24,32,.18); opacity:0; transition:opacity .2s;}
.pt-thumb canvas.is-drawn{opacity:1;}
.pt-num{font-size:.85rem; font-weight:700; color:var(--dim);}
.pt-part{position:absolute; top:-10px; left:8px; padding:2px 8px; border-radius:999px; font-size:.75rem; font-weight:700; color:#fff; background:var(--pc);}
.pt-page[data-part]{border-color:var(--pc); background:color-mix(in srgb, var(--pc) 8%, #fff);}
.pt-page[data-part="0"]{--pc:#E5322D;} .pt-page[data-part="1"]{--pc:#2F6FDE;} .pt-page[data-part="2"]{--pc:#1E9E5A;}
.pt-page[data-part="3"]{--pc:#B85CD6;} .pt-page[data-part="4"]{--pc:#E08A1E;} .pt-page[data-part="5"]{--pc:#1A9AA8;}
.pt-page[role="checkbox"]{cursor:pointer;}
.pt-page[role="checkbox"]:hover{border-color:var(--border);}
.pt-page[role="checkbox"]:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.pt-tick{position:absolute; top:6px; right:6px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; border:2px solid var(--border); background:#fff; color:transparent; font-size:.8rem; font-weight:800;}
.pt-page.is-picked{border-color:var(--brand); background:var(--brand-soft);}
.pt-page.is-picked .pt-tick{background:var(--brand); border-color:var(--brand); color:#fff;}
.pt-org .pt-page{cursor:grab;}
.pt-org .pt-page.is-drag{opacity:.4;}
.pt-blank .pt-thumb span{display:flex; align-items:center; justify-content:center; width:75%; height:100%; background:#fff; box-shadow:0 1px 4px rgba(20,24,32,.18); font-size:.8rem; color:var(--dim);}
.pt-tools{display:flex; gap:3px;}
.pt-tools button{width:26px; height:26px; border:1px solid var(--border); border-radius:6px; background:var(--panel); font:inherit; font-size:.95rem; line-height:1; color:var(--ink); cursor:pointer; padding:0;}
.pt-tools button:hover:not(:disabled){border-color:var(--brand); color:var(--brand);}
.pt-tools button:disabled{opacity:.35; cursor:default;}
.pt-tools [data-a="del"]:hover{background:var(--down); border-color:var(--down); color:#fff !important;}

.pt-crop{margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:10px;}
.pt-crop-nav{display:flex; align-items:center; gap:14px; font-weight:600;}
.pt-crop-stage{position:relative; display:inline-block; line-height:0; box-shadow:0 2px 10px rgba(20,24,32,.18); touch-action:none; max-width:100%;}
.pt-crop-stage canvas{display:block; max-width:100%; height:auto; background:#fff;}
.pt-crop-box{position:absolute; box-sizing:border-box; border:2px solid var(--brand); box-shadow:0 0 0 9999px rgba(20,24,32,.45); cursor:move; outline:none;}
.pt-crop-box:focus-visible{border-style:dashed;}
.pt-crop-stage{overflow:hidden;}
.pt-crop-box i{position:absolute; width:18px; height:18px; margin:-10px 0 0 -10px; background:#fff; border:2px solid var(--brand); border-radius:50%; box-sizing:border-box;}
.pt-crop-box i[data-h="nw"]{left:0; top:0; cursor:nwse-resize;} .pt-crop-box i[data-h="n"]{left:50%; top:0; cursor:ns-resize;}
.pt-crop-box i[data-h="ne"]{left:100%; top:0; cursor:nesw-resize;} .pt-crop-box i[data-h="e"]{left:100%; top:50%; cursor:ew-resize;}
.pt-crop-box i[data-h="se"]{left:100%; top:100%; cursor:nwse-resize;} .pt-crop-box i[data-h="s"]{left:50%; top:100%; cursor:ns-resize;}
.pt-crop-box i[data-h="sw"]{left:0; top:100%; cursor:nesw-resize;} .pt-crop-box i[data-h="w"]{left:0; top:50%; cursor:ew-resize;}

.pt-done{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:28px 12px;}
.pt-done-ico{display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; background:var(--ok-soft); color:var(--ok); font-size:1.8rem; font-weight:800;}
.pt-done-h{margin:4px 0 0; font-size:1.5rem;}
.pt-done-text{margin:0; color:var(--dim); max-width:520px;}
.pt-done-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px;}
.pt-done-btns .btn-brand{padding:13px 28px; font-size:1.05rem; border-radius:8px;}
.pt-done-btns .btn-ghost{padding:12px 20px;}
.pt-next{margin:10px 0 0; color:var(--dim);}
.pt-next a{margin:0 6px; color:var(--brand); font-weight:700;}

/* tool tiles: the PDF Tools menu and the /pdf-tools page */
.pt-tile{display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border-radius:8px; color:#fff; background:var(--tc, var(--brand));}
.pt-tile .ico{width:18px; height:18px; color:#fff !important;}
.pt-tile-merge,.pt-tile-split,.pt-tile-remove,.pt-tile-extract,.pt-tile-organize,.pt-tile-rotate{--tc:#E5322D;}
.pt-tile-compress,.pt-tile-repair{--tc:#1E9E5A;}
.pt-tile-image,.pt-tile-word,.pt-tile-ppt,.pt-tile-excel,.pt-tile-html{--tc:#E08A1E;}
.pt-tile-archive,.pt-tile-text{--tc:#2F6FDE;}
.pt-tile-edit,.pt-tile-numbers,.pt-tile-watermark,.pt-tile-crop,.pt-tile-form{--tc:#B85CD6;}
.pt-tile-unlock,.pt-tile-lock,.pt-tile-sign,.pt-tile-whiteout{--tc:#2B4C7E;}
.pdf-menu{left:50%; transform:translateX(-50%); width:min(800px, calc(100vw - 32px)); display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 18px; padding:18px;}
.pdf-menu h3{margin:0 0 4px; padding:0 12px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim);}
.pdf-menu a{padding:7px 12px; font-size:.93rem;}
.pdf-menu .pt-tile{width:26px; height:26px; border-radius:7px;}
.pdf-menu .pt-tile .ico{width:16px; height:16px;}
.pdf-menu-group{min-width:0;}
.pdf-menu a.pdf-menu-all{grid-column:1 / -1; justify-content:center; margin-top:6px; border-top:1px solid var(--border); border-radius:0; color:var(--brand);}
.pt-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px;}
.pt-card{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; height:100%; box-sizing:border-box; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--ink); text-decoration:none; transition:box-shadow .15s, border-color .15s, transform .15s;}
.pt-card:hover{border-color:transparent; box-shadow:var(--shadow); transform:translateY(-2px);}
.pt-card .pt-tile{grid-row:span 2; width:40px; height:40px; border-radius:10px;}
.pt-card .pt-tile .ico{width:22px; height:22px;}
.pt-card strong{font-size:1.05rem;}
.pt-card span:not(.pt-tile){color:var(--dim); font-size:.92rem; line-height:1.4;}
@media (max-width:1100px){ .nav-pdf .pdf-menu{left:auto; right:-120px; transform:none;} }
@media (max-width:640px){
  .pt{padding:14px; margin-top:18px;}
  .pt-bar{margin:14px -14px -14px; padding:12px 14px;}
  .pt-go{flex:1;}
  .pt-pages{grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:12px;}
  .pt-filebar .pt-link{margin-left:0;}
}
.pt [hidden]{display:none !important;}
.pt-org{grid-template-columns:repeat(auto-fill, minmax(152px, 1fr));}
.pt-org .pt-tools button{width:24px; height:24px; font-size:.9rem;}
.pt-opts{max-width:none;} .pt-opts > :not(.pt-crop){max-width:620px;}
@media (max-width:640px){ .pt-org{grid-template-columns:repeat(2, 1fr); gap:10px;} .pt-org .pt-page{padding:8px 4px 6px;} .pt-org .pt-tools{gap:2px;} .pt-org .pt-tools button{width:22px; height:22px;} }
.pt-go{white-space:nowrap;}
.pt-fn{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; font-weight:700; color:var(--ink);}
.pt-file{cursor:grab;}
.pt-file.is-drag{opacity:.4;}