:root{
  --ink:#242424;
  --ink-soft:#6b6b6b;
  --ink-faint:#a8a8a8;
  --line:#e6e6e6;
  --line-2:#d5d5d1;
  --bg:#ffffff;
  --bg-soft:#fafafa;
  --bg-softer:#f4f4f1;
  --accent:#6d60aa;
  --accent-soft:#f1eefa;
  --accent-deep:#191a42;
  --accent-warm:#e8c97a;
  --danger:#c53030;
  --danger-soft:#fdecec;
  /* --serif retired 2026-04-26 per CLAUDE.md §15 amendment 2026-04-24
     ("system-ui ONLY"). Token now resolves to the same sans stack as
     --sans so the ~34 legacy rules that still pull var(--serif) (in
     this file alone) render in system-ui without per-rule edits.
     The legacy italic styles paired with these rules are kept where
     they still read OK (small captions, meta lines); the bigger
     visual offenders — italic footer copyright + brand tagline body
     copy — are explicitly de-italicised below. */
  --serif:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:10px;
  --r-lg:14px;
  --r-xl:20px;
  --shadow-sm:0 1px 2px rgba(20,20,20,.04), 0 2px 6px rgba(20,20,20,.04);
  --shadow-md:0 2px 8px rgba(20,20,20,.06), 0 12px 32px rgba(20,20,20,.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}
img{max-width:100%;display:block}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  height:64px;
  display:flex;align-items:center;
}
.topbar-inner{
  max-width:1200px;width:100%;margin:0 auto;
  padding:0 28px;
  display:flex;align-items:center;gap:10px;
}
.brand{
  font-family:var(--serif);
  font-weight:700;
  font-size:23px;
  letter-spacing:-0.015em;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:2px;
  line-height:1;
}
.brand .dot{color:var(--accent);}
.brand .mark{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  margin-left:2px;transform:translateY(-1px);
}
.brand-logo{height:36px;width:auto;display:block}
.footer-brand .brand-logo{height:32px}
/* Active-language indicator in the topbar — sits next to the brand
   logo so the user always sees what language they're reading without
   scrolling to the footer. Visual style: clean 2-letter code in a
   rounded rectangle (8px radius matching the canonical jpg-to-pdf
   button shape, NOT the footer's 999px lang pill — this badge reads
   as a static indicator, not as a primary CTA). Click delegates to
   the canonical footer language modal via shared JS. */
.topbar-lang-pill{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:10px;
  min-width:34px;height:24px;padding:0 8px;
  border:1px solid var(--line-2,#d6d8f5);border-radius:6px;
  background:transparent;cursor:pointer;
  font-family:var(--sans);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;
  color:var(--ink-soft);
  transition:border-color .15s,color .15s,background .15s;
}
.topbar-lang-pill:hover{
  color:var(--ink);
  border-color:var(--ink-soft);
  background:var(--bg-soft);
}
.topbar-lang-pill:focus-visible{
  outline:2px solid #4F46E5;outline-offset:2px;
}
.nav{display:flex;gap:4px;margin-left:16px}
.nav-link{
  font-size:13px;font-weight:500;
  color:var(--ink-soft);
  padding:7px 14px;border-radius:999px;
  transition:background .15s,color .15s;
}
.nav-link:hover{color:var(--ink);background:var(--bg-soft)}
.nav-link.active{color:#fff;background:var(--ink)}
.topbar .spacer{flex:1}
.topbar-meta{
  color:var(--ink-soft);font-size:13px;
}
/* .btn-login removed 2026-04-30 — PDFluna has no account system by
   design; the button has been deleted from header.php. */

/* ── Tools dropdown ──────────────────────────────────────── */
.tools-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:500;color:var(--ink-soft);
  transition:background .15s,color .15s;
}
.tools-toggle:hover{color:var(--ink);background:var(--bg-soft)}
.tools-toggle svg{transition:transform .2s}
.tools-toggle.open svg{transform:rotate(180deg)}
.mega{
  /* position: fixed so the dropdown stays pinned under the sticky
     .topbar when the user scrolls (was `absolute` which anchored to
     the document and scrolled away with the page — closing visually
     even though the menu was still "open" in DOM). */
  position:fixed;top:64px;left:0;right:0;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-md);
  z-index:39;display:none;
  padding:36px 0 40px;
  max-height:calc(100vh - 64px);
  overflow-y:auto;
}
.mega.open{display:block}
.mega-inner{
  max-width:1200px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:36px;
}
.mega-col h4{
  font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:14px;
}
.mega-link{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;margin:0 -10px;border-radius:8px;
  color:var(--ink);font-size:13.5px;font-weight:500;
  transition:background .12s;
}
.mega-link:hover{background:var(--bg-soft)}
.mega-link .glyph{
  width:28px;height:28px;border-radius:7px;
  background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--ink);flex-shrink:0;
  border:1px solid var(--line);
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  max-width:760px;margin:0 auto;
  padding:72px 28px 40px;text-align:center;
}
.hero-kicker{
  font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:20px;
}
.hero h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(38px, 5.5vw, 62px);
  line-height:1.05;letter-spacing:-0.02em;
  margin-bottom:20px;
}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-sub{
  font-family:var(--serif);
  font-size:19px;line-height:1.5;color:var(--ink-soft);
  max-width:560px;margin:0 auto 28px;
}
.trust{
  display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;justify-content:center;
}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);
  font-size:12.5px;color:var(--ink-soft);
}
.pill-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
}

/* ── Tools catalog ───────────────────────────────────────── */
.catalog{max-width:1200px;margin:0 auto;padding:20px 28px 80px}
.cat-title{
  font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  margin:40px 0 14px;
}
.tools-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.tool-card{
  position:relative;display:block;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 22px;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.tool-card:hover{
  border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.tool-card.featured{
  background:linear-gradient(180deg,var(--bg) 0%,var(--accent-soft) 180%);
  border-color:var(--accent);
}
.tc-glyph{
  width:40px;height:40px;border-radius:10px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--ink);
  margin-bottom:14px;
  font-family:var(--serif);
}
.tool-card.featured .tc-glyph{
  background:var(--accent);
  color:#fff;border-color:var(--accent);
}
.tc-name{
  font-family:var(--serif);font-weight:700;
  font-size:17px;letter-spacing:-0.01em;
  color:var(--ink);margin-bottom:4px;
}
.tc-desc{
  font-size:13px;color:var(--ink-soft);line-height:1.45;
}
.tc-badge{
  position:absolute;top:14px;right:14px;
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);
}
.tool-card.featured .tc-badge{color:var(--accent)}

/* ── Tool page ───────────────────────────────────────────── */
.tool-wrap{
  max-width:860px;margin:0 auto;
  padding:40px 28px 60px;
}
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--serif);font-style:italic;
  font-size:14px;color:var(--ink-soft);
  margin-bottom:28px;
  transition:color .15s;
}
.back-link:hover{color:var(--ink)}
.tool-hero{
  display:flex;align-items:flex-start;gap:20px;
  padding-bottom:28px;border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.tool-hero .tc-glyph{width:56px;height:56px;font-size:24px;margin-bottom:0;border-radius:12px}
.tool-hero h1{
  font-family:var(--serif);font-weight:700;
  font-size:34px;letter-spacing:-0.015em;line-height:1.1;
  margin-bottom:6px;
}
.tool-hero p{
  font-family:var(--serif);font-size:16px;
  color:var(--ink-soft);line-height:1.5;
}

/* ── Dropzone ────────────────────────────────────────────── */
.dropzone{
  position:relative;
  border:1.5px dashed var(--line-2);
  border-radius:var(--r-xl);
  background:var(--bg);
  overflow:hidden;
  transition:border-color .2s,background .2s;
}
.dropzone:hover,.dropzone.drag-over{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.dropzone input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}
.dz-inner{padding:64px 28px;text-align:center}
.dz-glyph{
  width:64px;height:64px;border-radius:50%;
  background:var(--bg-soft);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--ink);
  margin:0 auto 16px;
  font-family:var(--serif);
}
.dz-title{
  font-family:var(--serif);font-weight:700;font-size:20px;
  letter-spacing:-0.01em;margin-bottom:6px;
}
.dz-sub{
  font-family:var(--serif);font-style:italic;
  color:var(--ink-soft);font-size:14.5px;margin-bottom:22px;
}
.btn-browse{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 26px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:14px;font-weight:500;
  transition:background .15s;
}
.btn-browse:hover{background:#000}
.dz-limits{
  display:flex;gap:18px;flex-wrap:wrap;
  align-items:center;justify-content:center;
  margin-top:18px;font-size:12px;color:var(--ink-faint);
  font-family:var(--serif);font-style:italic;
}

/* ── File list ───────────────────────────────────────────── */
.file-list{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.file-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .15s;
}
.file-item:hover{border-color:var(--line-2)}
.fi-glyph{
  width:32px;height:32px;border-radius:8px;
  background:var(--bg-soft);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:14px;flex-shrink:0;
}
.fi-name{
  flex:1;font-size:14px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fi-size{
  font-family:var(--serif);font-style:italic;
  font-size:12.5px;color:var(--ink-faint);flex-shrink:0;
}
.fi-rm{
  font-size:20px;line-height:1;color:var(--ink-faint);
  padding:4px 8px;border-radius:6px;
  transition:color .12s,background .12s;
}
.fi-rm:hover{color:var(--danger);background:var(--danger-soft)}

/* ── Options box ─────────────────────────────────────────── */
.opts{
  margin-top:18px;
  background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;
}
.opts h3{
  font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:14px;
}
.opts-label{
  display:block;font-size:12px;font-weight:500;
  color:var(--ink-soft);margin-bottom:6px;
}
.opts-input{
  width:100%;padding:7px 0;
  background:transparent;border:none;
  border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:15px;color:var(--ink);
  outline:none;transition:border-color .15s;
}
.opts-input:focus{border-bottom-color:var(--ink)}
.opts-hint{
  margin-top:8px;font-family:var(--serif);font-style:italic;
  font-size:12.5px;color:var(--ink-faint);line-height:1.5;
}
.opts-hint code{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-style:normal;font-size:12px;
  background:var(--bg-soft);padding:1px 5px;border-radius:4px;
  border:1px solid var(--line);
}
.row{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:8px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);
  font-size:13px;font-weight:500;color:var(--ink-soft);
  transition:all .15s;
}
.chip:hover,.chip.on{
  border-color:var(--ink);color:var(--ink);background:var(--bg);
}
.chip.on{background:var(--ink);color:#fff}

/* ── Progress ────────────────────────────────────────────── */
.prog{display:none;margin-top:18px}
.prog.show{display:block}
.prog-bar{
  height:4px;background:var(--line);border-radius:2px;
  overflow:hidden;margin-bottom:10px;
}
.prog-fill{
  height:100%;background:var(--accent);
  border-radius:2px;width:0%;transition:width .3s ease;
}
.prog-label{
  font-family:var(--serif);font-style:italic;
  font-size:13px;color:var(--ink-soft);text-align:center;
}

/* ── Result ──────────────────────────────────────────────── */
.result{
  display:none;margin-top:18px;
  background:var(--accent-soft);
  border:1px solid var(--accent);
  border-radius:var(--r-lg);
  padding:20px 24px;
  align-items:center;gap:18px;
}
.result.show{display:flex}
.result-glyph{
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.result-info strong{
  display:block;font-family:var(--serif);
  font-weight:700;font-size:16px;color:var(--ink);
  letter-spacing:-0.005em;margin-bottom:2px;
}
.result-info span{font-size:13px;color:var(--ink-soft)}
.result-actions{margin-left:auto;flex-shrink:0}
.btn-dl{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:500;
  transition:background .15s;
}
.btn-dl:hover{background:#000}

/* ── Actions ─────────────────────────────────────────────── */
.actions{
  margin-top:24px;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap;
}
.btn-go{
  padding:12px 28px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-size:14px;font-weight:500;
  transition:background .15s,transform .12s;
}
.btn-go:hover{background:#000;transform:translateY(-1px)}
.btn-go:disabled{background:var(--ink-faint);cursor:not-allowed;transform:none}
.btn-clear{
  padding:11px 20px;border-radius:999px;
  border:1px solid var(--line);background:transparent;
  font-size:13.5px;font-weight:500;color:var(--ink-soft);
  transition:border-color .15s,color .15s;
}
.btn-clear:hover{border-color:var(--ink);color:var(--ink)}

/* ── Image grid (PDF → JPG/PNG) ──────────────────────────── */
.img-grid{
  margin-top:20px;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
.img-card{
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  transition:box-shadow .15s,border-color .15s;
}
.img-card:hover{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.img-card img{width:100%;display:block}
.img-card a{
  display:block;text-align:center;
  padding:10px;
  font-family:var(--serif);font-style:italic;
  font-size:13px;color:var(--ink);
  border-top:1px solid var(--line);background:var(--bg-soft);
}
.img-card a:hover{background:var(--accent-soft);color:var(--accent)}

/* ── Coming soon ─────────────────────────────────────────── */
.cs{
  text-align:center;padding:72px 28px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-xl);
}
.cs-glyph{
  width:64px;height:64px;margin:0 auto 18px;
  border-radius:50%;background:var(--bg-soft);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:26px;
}
.cs h2{
  font-family:var(--serif);font-weight:700;font-size:26px;
  letter-spacing:-0.015em;margin-bottom:10px;
}
.cs p{
  font-family:var(--serif);font-size:15px;color:var(--ink-soft);
  max-width:380px;margin:0 auto 22px;line-height:1.6;
}
.cs-form{display:flex;gap:8px;max-width:400px;margin:0 auto}
.cs-form input{flex:1}

/* ── SEO section ─────────────────────────────────────────── */
.seo{max-width:860px;margin:0 auto;padding:20px 28px 60px}
.seo h2{
  font-family:var(--serif);font-weight:700;
  font-size:26px;letter-spacing:-0.015em;margin-bottom:14px;
}
.seo p{
  font-family:var(--serif);font-size:16px;line-height:1.65;
  color:var(--ink-soft);margin-bottom:10px;
}
.steps{
  display:grid;gap:12px;margin-top:24px;
  grid-template-columns:repeat(3,1fr);
}
.step{
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 24px;
}
.step-num{
  font-family:var(--serif);font-weight:700;
  font-size:13px;color:var(--accent);
  letter-spacing:.06em;margin-bottom:10px;
}
.step h3{
  font-family:var(--serif);font-weight:700;font-size:17px;
  letter-spacing:-0.01em;margin-bottom:6px;
}
.step p{
  font-family:var(--sans);font-size:13.5px;
  color:var(--ink-soft);line-height:1.55;margin:0;
}
.seo--editor{
  margin-top:0;
  padding-top:48px;padding-bottom:56px;
}
.seo--editor .seo-inner{max-width:880px;margin:0 auto;padding:0 28px}
.seo--editor h2{margin-top:56px}
.seo--editor h2:first-child{margin-top:0}
.seo-list{
  margin:18px 0 8px;padding:0;list-style:none;
  display:grid;gap:10px;
}
.seo-list li{
  font-family:var(--serif);font-size:15.5px;line-height:1.6;
  color:var(--ink-soft);
  padding-left:22px;position:relative;
}
.seo-list li::before{
  content:"";position:absolute;left:0;top:10px;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
.seo-list strong{color:var(--ink);font-weight:600;font-family:var(--sans);margin-right:4px}
.faq{
  /* No border-top — the bottom border on each `.faq details` already
     provides the divider rhythm; an extra top border above the first
     item read as a stray horizontal line above the section heading
     (especially in the editor SEO surface where the H2 sits flush
     above the first item). The first details' bottom border closes
     the strip naturally. */
  margin-top:24px;
}
.faq details{
  border-bottom:1px solid var(--line);
  padding:24px 0;
  transition:padding .2s ease;
}
.faq details[open]{padding-bottom:28px}
.faq summary{
  cursor:pointer;
  font-family:var(--serif);font-weight:600;
  font-size:19px;line-height:1.45;
  letter-spacing:-0.005em;
  color:var(--ink);
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;
  list-style:none;
  outline:none;
  transition:color .15s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:"";display:none}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{color:var(--accent)}
.faq summary::after{
  content:"+";
  flex-shrink:0;
  font-family:var(--sans);font-weight:200;
  font-size:28px;line-height:1;
  color:var(--ink-faint);
  margin-top:-2px;
  transition:transform .25s ease, color .15s ease;
  transform-origin:center;
}
.faq details[open] summary{color:var(--ink)}
.faq details[open] summary::after{
  transform:rotate(45deg);
  color:var(--accent);
}
.faq details p{
  margin:14px 52px 0 0;
  max-width:720px;
  font-family:var(--serif);
  font-size:16.5px;line-height:1.7;
  color:var(--ink-soft);
}

/* ── Footer ──────────────────────────────────────────────── */
footer{
  background:var(--bg-softer);
  border-top:1px solid var(--line);
  padding:52px 28px 32px;
  margin-top:40px;
}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{
  display:grid;grid-template-columns:1.6fr repeat(4,1fr);
  gap:40px;margin-bottom:40px;
}
.footer-brand .brand{margin-bottom:14px;display:inline-flex}
.footer-brand p{
  font-family:var(--serif);font-size:14px;
  color:var(--ink-soft);line-height:1.65;max-width:280px;
}
.footer-social{margin-top:20px}
.footer-social h4{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:12px;
}
.footer-social-links{display:flex;gap:10px}
.footer-social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);
  color:var(--ink-soft);
  transition:color .15s,border-color .15s,background .15s,transform .15s;
}
.footer-social-link:hover{
  color:var(--primary,#4F46E5);
  border-color:var(--primary,#4F46E5);
  background:var(--bg);
  transform:translateY(-1px);
}
.footer-social-link svg{display:block}
.footer-col h4{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:14px;
}
.footer-col a{
  display:block;font-size:13.5px;color:var(--ink-soft);
  margin-bottom:9px;transition:color .12s;
}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{
  /* No border-top here — the rebuilt footer in /assets/css/footer.css
     already draws the divider via `.footer-grid { border-bottom }`.
     Two adjacent borders with the gap between them rendered visually
     as a double line. global.css still serves legacy templates that
     don't load footer.css, so we keep the rule but drop the divider;
     legacy markup just gets a flush bottom strip, which is fine. */
  padding-top:22px;
  display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--ink-faint);
}
.footer-bottom .footer-legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-bottom .footer-legal a{color:var(--ink-faint)}
.footer-bottom .footer-legal a:hover{color:var(--ink-soft)}

/* Language picker trigger — matches legal-link typography so it sits in
   the row without breaking the line rhythm. Globe icon inherits text
   colour via currentColor. */
.footer-lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:0;margin:0;background:none;border:0;
  font:inherit;color:var(--ink-faint);
  font-size:13px;
  cursor:pointer;transition:color .15s;
}
.footer-lang-btn:hover,.footer-lang-btn:focus-visible{color:var(--ink-soft)}
.footer-lang-btn:focus-visible{outline:2px solid var(--primary,#4F46E5);outline-offset:3px;border-radius:4px}
.footer-lang-icon{flex:none;opacity:.85}
.footer-lang-btn:hover .footer-lang-icon{opacity:1}

/* ── Generic modal shell — reusable, lives here so any tool page
      can drop in a `.pdfluna-modal` and inherit the same UX. ────── */
.pdfluna-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:pdflunaModalIn .15s ease-out;
}
.pdfluna-modal[hidden]{display:none}
.pdfluna-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(17,17,34,.45);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.pdfluna-modal-card{
  position:relative;
  width:min(640px,100%);max-height:calc(100vh - 48px);
  background:#fff;border-radius:14px;
  box-shadow:0 20px 60px rgba(17,17,34,.18),0 2px 8px rgba(17,17,34,.08);
  padding:28px 28px 20px;
  overflow-y:auto;
  animation:pdflunaCardIn .2s ease-out;
}
.pdfluna-modal-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:999px;
  color:var(--ink-faint);cursor:pointer;
  transition:color .15s,background .15s;
}
.pdfluna-modal-close:hover{color:var(--ink);background:var(--bg-soft)}
.pdfluna-modal-close:focus-visible{outline:2px solid var(--primary,#4F46E5);outline-offset:2px}
.pdfluna-modal-title{
  font-family:var(--serif);font-weight:600;
  font-size:22px;text-align:center;
  color:var(--ink);margin:4px 0 22px;
}
@keyframes pdflunaModalIn{from{opacity:0}to{opacity:1}}
@keyframes pdflunaCardIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ── Language grid — 2 columns, divider lines between rows. ───── */
.pdfluna-lang-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:28px;
}
.pdfluna-lang-option{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:14px 4px;background:none;border:0;
  border-bottom:1px solid var(--line);
  font:inherit;font-size:15px;color:var(--ink);
  text-align:left;cursor:pointer;
  transition:color .12s,background .12s;
}
.pdfluna-lang-option:hover{color:var(--primary,#4F46E5);background:var(--bg-soft)}
.pdfluna-lang-option:focus-visible{outline:2px solid var(--primary,#4F46E5);outline-offset:-2px}
.pdfluna-lang-option--selected{font-weight:600}
.pdfluna-lang-option-check{flex:none;color:var(--primary,#4F46E5);opacity:0;transition:opacity .12s}
.pdfluna-lang-option--selected .pdfluna-lang-option-check{opacity:1}

@media (max-width:520px){
  .pdfluna-lang-grid{grid-template-columns:1fr;column-gap:0}
  .pdfluna-modal-card{padding:24px 20px 16px}
  .pdfluna-modal-title{font-size:20px}
}

/* ── Utils ───────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .3s ease both}

@media (max-width:860px){
  .mega-inner{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .steps{grid-template-columns:1fr}
  .tool-hero{flex-direction:column;gap:14px}
  .result.show{flex-direction:column;align-items:flex-start}
  .result-actions{margin-left:0}
  .hero{padding:48px 24px 32px}
  .nav{display:none}
}
@media (max-width:520px){
  .footer-top{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr 1fr}
}