/* ============================================================
   LocalPDF — Vercel Geist Design System
   Near-black ink on near-white canvas. Minimal chrome.
   ============================================================ */

/* Import Geist fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  /* Core palette */
  --canvas: #fafafa;
  --canvas-elevated: #ffffff;
  --hairline-soft: #f2f2f2;
  --ink: #171717;
  --on-primary: #ffffff;
  --body: #4d4d4d;
  --mute: #8f8f8f;
  --faint: #a1a1a1;
  --hairline: #ebebeb;
  
  /* Accent */
  --link: #0070f3;
  --link-deep: #0761d1;
  --link-soft: #d3e5ff;
  
  /* Semantic */
  --error: #ee0000;
  --error-deep: #c50000;
  --warning: #f5a623;
  --warning-soft: #ffefcf;
  --warning-deep: #ab570a;
  --ok: #0070f3;
  --ok-soft: #d3e5ff;
  
  /* Brand accent colors */
  --violet: #7928ca;
  --violet-soft: #d8ccf1;
  --cyan: #50e3c2;
  --cyan-soft: #aaffec;
  --pink: #ff0080;
  --magenta: #eb367f;
  
  /* Gradients */
  --gradient-develop-start: #007cf0;
  --gradient-develop-end: #00dfd8;
  --gradient-preview-start: #7928ca;
  --gradient-preview-end: #ff0080;
  --gradient-ship-start: #ff4d4d;
  --gradient-ship-end: #f9cb28;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill-category: 64px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* Shadows - deliberately minimal */
  --shadow-whisper: 0px 1px 1px rgba(0,0,0,0.04);
  --shadow-float: 0px 2px 2px rgba(0,0,0,0.04), 0px 8px 16px -4px rgba(0,0,0,0.08);
  --shadow-none: none;

  /* Spacing */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 40px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;
  --sp-section: 128px;

  --maxw: 1200px;
  --header-h: 64px;
  --font: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

html.dark {
  --canvas: #0a0a0a;
  --canvas-elevated: #171717;
  --hairline-soft: #1a1a1a;
  --ink: #ededed;
  --on-primary: #171717;
  --body: #a3a3a3;
  --mute: #737373;
  --faint: #525252;
  --hairline: #262626;
  
  --link: #3b9eff;
  --link-deep: #66b3ff;
  --link-soft: #1a3654;
  
  --error: #ff3333;
  --error-deep: #ff6666;
  --warning: #ffb84d;
  --warning-soft: #3d2a1a;
  --warning-deep: #ffd699;
  --ok: #3b9eff;
  --ok-soft: #1a3654;
  
  --shadow-whisper: 0px 1px 1px rgba(0,0,0,0.3);
  --shadow-float: 0px 2px 2px rgba(0,0,0,0.3), 0px 8px 16px -4px rgba(0,0,0,0.4);
  
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, a, label { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Vercel typography - tight tracking on large type */
h1, h2, h3, h4 { 
  line-height: 1.2; 
  margin: 0 0 0.5em; 
  font-weight: 600;
  color: var(--ink);
}
h1 { 
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); 
  letter-spacing: -0.05em; /* -2.4px at 48px */
}
h2 { 
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2rem); 
  letter-spacing: -0.04em; /* -1.28px at 32px */
}
h3 { 
  font-size: 1.25rem; 
  letter-spacing: -0.02em; /* -0.4px at 20px */
}
h4 { 
  font-size: 1rem; 
  letter-spacing: -0.01em; 
}

p { margin: 0 0 1rem; line-height: 1.5; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-deep); text-decoration: underline; }
code { 
  font-family: var(--mono); 
  background: var(--hairline-soft); 
  padding: 0.12em 0.4em; 
  border-radius: var(--radius-sm); 
  font-size: 0.875rem;
}
img, canvas, iframe, svg, video { max-width: 100%; }

:focus-visible { 
  outline: 3px solid var(--link); 
  outline-offset: 2px; 
  border-radius: var(--radius-sm); 
}

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 32px); }
.narrow { max-width: 820px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ---------------- Header - Vercel nav style ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.header-inner { 
  display: flex; 
  align-items: center; 
  gap: var(--sp-lg); 
  height: var(--header-h); 
  padding-inline: var(--sp-sm) var(--sp-lg);
}
.logo { 
  display: inline-flex; 
  align-items: center; 
  gap: var(--sp-sm); 
  font-size: 1rem; 
  font-weight: 600; 
  color: var(--ink);
  letter-spacing: -0.01em;
}
.logo:hover { color: var(--ink); text-decoration: none; }
.logo-icon { width: 32px; height: 32px; display: block; object-fit: contain; }
.logo-text { font-size: 0.938rem; }
.logo-text strong { font-weight: 600; }

.main-nav { 
  margin-left: auto; 
  display: flex; 
  align-items: center; 
  gap: var(--sp-xxs); 
}
.main-nav a { 
  color: var(--body); 
  font-weight: 400; 
  font-size: 0.875rem; 
  padding: var(--sp-xs) var(--sp-sm); 
  border-radius: var(--radius-full);
  transition: background 0.15s, color 0.15s;
}
.main-nav a:hover { 
  background: var(--hairline-soft); 
  color: var(--ink); 
  text-decoration: none; 
}
.main-nav a[aria-current="page"] { color: var(--ink); }

.header-tools { 
  display: flex; 
  align-items: center; 
  gap: var(--sp-xs); 
  margin-left: var(--sp-xs); 
}
.main-nav + .header-tools { margin-left: var(--sp-xs); }

/* Icon buttons - 6px square Vercel style */
.icon-btn { 
  width: 40px; 
  height: 40px; 
  display: grid; 
  place-items: center; 
  border-radius: var(--radius-sm); 
  border: 1px solid var(--hairline); 
  background: var(--canvas-elevated); 
  color: var(--ink); 
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.icon-btn:hover { 
  border-color: var(--body); 
  background: var(--hairline-soft);
}
.icon-sun { display: none; }
html.dark .icon-sun { display: block; }
html.dark .icon-moon { display: none; }

.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-toggle { display: grid; }
  .main-nav { display: none; }   /* replaced by the full-screen mobile menu */
  .header-inner { justify-content: space-between; }
  .header-tools { display: flex; gap: 8px; margin-left: auto; }
}

/* Header icon order on mobile: theme first, hamburger last (both on right). */

/* ---------------- Mobile menu ---------------- */
.mm-backdrop {
  position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.mm-backdrop.open { opacity: 1; visibility: visible; }
.mobile-menu {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: min(85%, 340px); height: 100%;
  background: var(--canvas-elevated); color: var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .25s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-float);
}
.mobile-menu.open { transform: translateX(0); }
.mm-head {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: flex-end;
  height: var(--header-h); padding-inline: var(--sp-md); 
  background: var(--canvas-elevated); 
  border-bottom: 1px solid var(--hairline);
}
.mm-body { padding: var(--sp-sm) var(--sp-md) var(--sp-xl); display: flex; flex-direction: column; }
.mm-body a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-sm) var(--sp-xxs); 
  font-size: 0.938rem; 
  font-weight: 500; 
  color: var(--ink);
  border-bottom: 1px solid var(--hairline); 
  text-decoration: none;
  letter-spacing: -0.01em;
}
.mm-body a::after { content: "\203A"; color: var(--faint); font-weight: 400; }
.mm-body a:hover, .mm-body a[aria-current="page"] { color: var(--link); }
.mm-body a.mm-sub { 
  padding-left: var(--sp-md); 
  font-weight: 400; 
  font-size: 0.875rem; 
  color: var(--body); 
}
.mm-body a.mm-sub:hover, .mm-body a.mm-sub[aria-current="page"] { color: var(--link); }
.mm-group {
  margin: var(--sp-lg) 0 var(--sp-xxs); 
  padding-top: var(--sp-md); 
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.75rem; 
  font-weight: 500; 
  letter-spacing: 0; 
  text-transform: uppercase; 
  color: var(--body);
  text-align: center;
}
body.menu-open { overflow: hidden; }
@media (min-width: 821px) { .mobile-menu, .mm-backdrop { display: none; } }

/* ---------------- Buttons - Vercel pill style ---------------- */
.btn {
  --btn-bg: var(--canvas-elevated); 
  --btn-fg: var(--ink); 
  --btn-bd: var(--hairline);
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: var(--sp-xs);
  font: inherit; 
  font-weight: 500; 
  font-size: 0.875rem;
  line-height: 1.43; 
  cursor: pointer;
  padding: 0 var(--sp-sm); 
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg); 
  color: var(--btn-fg); 
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Marketing CTAs - black pill */
.btn-primary { 
  --btn-bg: var(--ink); 
  --btn-fg: var(--on-primary); 
  --btn-bd: var(--ink); 
  border-radius: var(--radius-pill);
  padding: 0 14px;
  font-size: 1rem;
  font-weight: 500;
}
.btn-primary:hover { 
  --btn-bg: var(--body); 
  --btn-bd: var(--body); 
  color: var(--on-primary); 
}

/* Ghost button with hairline border */
.btn-ghost:hover { 
  border-color: var(--body); 
  background: var(--hairline-soft);
}
.btn-danger:hover { border-color: var(--error); color: var(--error); }

.btn-lg { 
  padding: 0 var(--sp-lg); 
  height: 48px;
  font-size: 1rem;
  border-radius: var(--radius-pill);
}
.btn-sm { 
  padding: 0 var(--sp-sm); 
  height: 32px;
  font-size: 0.875rem; 
}
.btn-block { width: 100%; }

/* ---------------- Hero - mesh gradient style ---------------- */
.hero { 
  text-align: center; 
  padding-block: clamp(var(--sp-3xl), 8vw, var(--sp-section)) var(--sp-lg); 
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, 100%);
  height: 400px;
  background: radial-gradient(circle at 30% 40%, var(--cyan) 0%, transparent 40%),
              radial-gradient(circle at 70% 50%, var(--violet) 0%, transparent 45%),
              radial-gradient(circle at 50% 70%, var(--pink) 0%, transparent 40%),
              radial-gradient(circle at 40% 30%, var(--gradient-develop-start) 0%, transparent 50%);
  opacity: 0.08;
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.hero .lead { 
  max-width: 680px; 
  margin: 0 auto var(--sp-lg); 
  color: var(--body); 
  font-size: 1rem;
  line-height: 1.5;
}

/* Mono eyebrow label */
.eyebrow { 
  display: inline-flex; 
  align-items: center; 
  gap: var(--sp-xs); 
  font-family: var(--mono);
  font-size: 0.75rem; 
  font-weight: 500; 
  letter-spacing: 0; 
  text-transform: uppercase; 
  color: var(--body); 
  background: var(--hairline-soft); 
  padding: var(--sp-xxs) var(--sp-md); 
  border-radius: var(--radius-pill-category);
  margin-bottom: var(--sp-lg); 
  border: 1px solid var(--hairline);
}

.tool-glyph { 
  width: 64px; 
  height: 64px; 
  border-radius: var(--radius-md); 
  display: inline-grid; 
  place-items: center; 
  margin-bottom: var(--sp-md); 
  color: var(--ink); 
  background: var(--canvas-elevated);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-whisper);
}

.convert-glyph { 
  display: inline-flex; 
  align-items: center; 
  gap: var(--sp-md); 
  margin-bottom: var(--sp-md); 
}
.convert-glyph .cg { 
  width: 56px; 
  height: 56px; 
  border-radius: var(--radius-md); 
  display: grid; 
  place-items: center; 
  color: var(--on-primary); 
  font-weight: 600; 
  letter-spacing: -0.01em; 
  box-shadow: var(--shadow-whisper);
  background: var(--ink);
  border: 1px solid var(--hairline);
}
.convert-glyph .cg-word { background: var(--ink); font-size: 1.25rem; }
.convert-glyph .cg-pdf { background: var(--ink); font-size: 0.938rem; }
.convert-glyph .cg-arrow { color: var(--mute); }

.privacy-pill { 
  display: inline-flex; 
  align-items: center; 
  gap: var(--sp-xs); 
  background: var(--ok-soft); 
  color: var(--ok); 
  border: 1px solid color-mix(in srgb, var(--ok) 20%, transparent); 
  padding: var(--sp-xs) var(--sp-md); 
  border-radius: var(--radius-pill); 
  font-size: 0.875rem; 
  font-weight: 500; 
}

/* ---------------- Tool card / dropzone - hairline style ---------------- */
.tool-card { 
  background: var(--canvas-elevated); 
  border: 1px solid var(--hairline); 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-whisper); 
  padding: clamp(var(--sp-md), 3vw, var(--sp-lg)); 
  text-align: left; 
  margin-top: var(--sp-xl); 
}

.dropzone {
  border: 2px dashed var(--hairline); 
  border-radius: var(--radius-md);
  background: var(--hairline-soft); 
  padding: clamp(var(--sp-xl), 6vw, 52px) var(--sp-lg); 
  text-align: center;
  cursor: pointer; 
  color: var(--ink); 
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.dropzone:hover, .dropzone.dragover { 
  background: var(--canvas-elevated); 
  border-color: var(--body); 
}
.dropzone.dragover { transform: scale(1.005); }
.dropzone svg { color: var(--ink); }

.drop-title { 
  font-size: 1.25rem; 
  font-weight: 600; 
  color: var(--ink); 
  margin: var(--sp-sm) 0 var(--sp-xxs);
  letter-spacing: -0.02em;
}
.drop-or { 
  color: var(--mute); 
  margin: var(--sp-xxs) 0 var(--sp-sm); 
  font-size: 0.875rem;
}
.drop-hint { 
  color: var(--mute); 
  font-size: 0.875rem; 
  margin: var(--sp-md) 0 0; 
}

.feature-badges { 
  list-style: none; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  gap: var(--sp-sm); 
  padding: 0; 
  margin: var(--sp-lg) 0 0; 
}
.feature-badges li { 
  display: inline-flex; 
  align-items: center; 
  gap: var(--sp-xs); 
  background: var(--ok-soft); 
  color: var(--ok); 
  border: 1px solid color-mix(in srgb, var(--ok) 20%, transparent); 
  padding: var(--sp-xs) var(--sp-md); 
  border-radius: var(--radius-pill-category); 
  font-size: 0.875rem; 
  font-weight: 500; 
}

/* file list - hairline cards */
.file-list { 
  list-style: none; 
  margin: 0 0 var(--sp-md); 
  padding: 0; 
  display: grid; 
  gap: var(--sp-sm); 
}
.file-item { 
  display: flex; 
  align-items: center; 
  gap: var(--sp-sm); 
  padding: var(--sp-sm) var(--sp-md); 
  border: 1px solid var(--hairline); 
  border-radius: var(--radius-md); 
  background: var(--canvas-elevated);
  position: relative;
}
.file-thumb { 
  width: 40px; 
  height: 40px; 
  border-radius: var(--radius-sm); 
  display: grid; 
  place-items: center; 
  flex: none; 
  background: var(--hairline-soft); 
  color: var(--ink); 
  font-weight: 600; 
  font-size: 0.813rem; 
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-meta { 
  flex: 1; 
  min-width: 0;
  padding-right: 40px; /* Space for the remove button on the right */
}
.file-name { 
  font-weight: 500; 
  font-size: 0.875rem;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  color: var(--ink);
}
.file-sub { 
  font-size: 0.813rem; 
  color: var(--mute); 
}
.file-sub.error { color: var(--error); }
.file-sub.done { color: var(--ok); }
.file-actions { 
  display: flex; 
  align-items: center; 
  gap: var(--sp-xxs); 
  margin-left: auto;
  position: absolute;
  right: var(--sp-md);
  top: 50%;
  transform: translateY(-50%);
}

.icon-mini { 
  background: none; 
  border: none; 
  color: var(--mute); 
  cursor: pointer; 
  width: 32px; 
  height: 32px; 
  border-radius: var(--radius-sm); 
  display: grid; 
  place-items: center; 
  font-size: 1rem;
  transition: color 0.15s, background 0.15s;
}
.icon-mini:hover { 
  color: var(--ink); 
  background: var(--hairline-soft); 
}
.icon-mini.danger:hover { color: var(--error); }
.icon-mini:disabled { opacity: .4; cursor: default; }

.panel-actions { 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--sp-sm); 
  align-items: center; 
}
.panel-actions .grow { margin-left: auto; }

.field-row { 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--sp-md); 
  align-items: flex-end; 
  margin: var(--sp-xxs) 0 var(--sp-md); 
}
.field { display: flex; flex-direction: column; gap: var(--sp-xs); }
.field label { 
  font-size: 0.875rem; 
  font-weight: 500; 
  color: var(--body); 
}
.field input[type="text"], 
.field input[type="number"], 
.field select {
  font: inherit; 
  padding: var(--sp-xs) var(--sp-sm); 
  border-radius: var(--radius-sm); 
  border: 1px solid var(--hairline); 
  background: var(--canvas-elevated); 
  color: var(--ink); 
  min-width: 140px;
  height: 40px;
  font-size: 0.875rem;
}
.field input:focus, .field select:focus { 
  border-color: var(--link); 
  outline: none; 
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 12%, transparent);
}
.hint { font-size: 0.813rem; color: var(--faint); }

.status { 
  margin: var(--sp-md) 0 0; 
  min-height: 1.4em; 
  text-align: center; 
  font-size: 0.875rem; 
  color: var(--mute); 
}
.status.error { color: var(--error); font-weight: 500; }
.status.ok { color: var(--ok); font-weight: 500; }

.spinner { 
  width: 14px; 
  height: 14px; 
  border: 2px solid currentColor; 
  border-right-color: transparent; 
  border-radius: 50%; 
  display: inline-block; 
  animation: spin 0.7s linear infinite; 
  vertical-align: -2px; 
}
.progress { 
  height: 6px; 
  border-radius: var(--radius-pill); 
  background: var(--hairline-soft); 
  overflow: hidden; 
  margin-top: var(--sp-md); 
  border: 1px solid var(--hairline); 
}
.progress > span { 
  display: block; 
  height: 100%; 
  width: 0; 
  background: var(--ink); 
  transition: width 0.2s ease; 
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Result panel */
.result-head { 
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  justify-content: space-between; 
  gap: var(--sp-sm); 
  margin-bottom: var(--sp-md); 
}
.result-head h2 { margin: 0; }
.result-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }
.result-tabs { 
  display: flex; 
  gap: var(--sp-xs); 
  flex-wrap: wrap; 
  margin-bottom: var(--sp-sm); 
}
.result-tabs button { 
  font: inherit; 
  font-size: 0.875rem; 
  font-weight: 500;
  padding: 0 var(--sp-sm); 
  height: 32px;
  border-radius: var(--radius-pill-category); 
  border: 1px solid var(--hairline); 
  background: var(--canvas-elevated); 
  color: var(--ink); 
  cursor: pointer; 
  max-width: 240px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.result-tabs button:hover {
  background: var(--hairline-soft);
  border-color: var(--body);
}
.result-tabs button[aria-selected="true"] { 
  background: var(--ink); 
  border-color: var(--ink); 
  color: var(--on-primary); 
}
.preview-frame { 
  width: 100%; 
  height: min(70vh, 640px); 
  border: 1px solid var(--hairline); 
  border-radius: var(--radius-md); 
  background: var(--hairline); 
}

/* thumbnail grid (pdf pages / images) */
.thumb-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); 
  gap: var(--sp-sm); 
  margin: var(--sp-xxs) 0 var(--sp-md); 
}
.thumb { 
  position: relative; 
  border: 1px solid var(--hairline); 
  border-radius: var(--radius-sm); 
  overflow: hidden; 
  background: var(--hairline-soft); 
  aspect-ratio: 3 / 4; 
  display: grid; 
  place-items: center; 
}
.thumb canvas, .thumb img { max-width: 100%; max-height: 100%; display: block; }
.thumb .tag { 
  position: absolute; 
  bottom: var(--sp-xs); 
  left: var(--sp-xs); 
  background: rgba(0,0,0,.7); 
  color: #fff; 
  font-size: 0.75rem; 
  padding: 2px var(--sp-xs); 
  border-radius: var(--radius-sm); 
  font-weight: 500;
}
.thumb .pick { position: absolute; inset: 0; cursor: pointer; }
.thumb.selected { 
  outline: 2px solid var(--ink); 
  outline-offset: -2px; 
}
.thumb .rot { position: absolute; top: var(--sp-xs); right: var(--sp-xs); }

/* steps + content */
.steps { 
  list-style: none; 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: var(--sp-md); 
  padding: 0; 
  margin: var(--sp-xl) 0 0; 
}
.steps li { 
  background: var(--canvas-elevated); 
  border: 1px solid var(--hairline); 
  border-radius: var(--radius-md); 
  padding: var(--sp-md); 
  display: flex; 
  align-items: center; 
  gap: var(--sp-sm); 
  font-weight: 400; 
  font-size: 0.938rem;
}
.step-num { 
  flex: none; 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  background: var(--hairline-soft); 
  color: var(--ink); 
  display: grid; 
  place-items: center; 
  font-weight: 600;
  border: 1px solid var(--hairline);
}

.content { padding-block: var(--sp-3xl) var(--sp-sm); }
.content section { margin-bottom: var(--sp-3xl); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.card { 
  background: var(--canvas-elevated); 
  border: 1px solid var(--hairline); 
  border-radius: var(--radius-md); 
  padding: var(--sp-lg); 
}
.card ul { margin: 0; padding-left: 1.25em; }
.card-ok h3 { color: var(--ok); }
.card-warn h3 { color: var(--warning); }

.faq details { 
  background: var(--canvas-elevated); 
  border: 1px solid var(--hairline); 
  border-radius: var(--radius-md); 
  padding: 0 var(--sp-lg); 
  margin-bottom: var(--sp-sm); 
}
.faq summary { 
  cursor: pointer; 
  font-weight: 500; 
  padding: var(--sp-md) 0; 
  list-style: none; 
  display: flex; 
  justify-content: space-between; 
  gap: var(--sp-sm); 
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { 
  content: "+"; 
  color: var(--ink); 
  font-size: 1.25rem; 
  line-height: 1; 
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: 0; color: var(--body); }

.breadcrumb { 
  font-size: 0.875rem; 
  color: var(--body); 
  padding-top: var(--sp-lg); 
}
.breadcrumb ol { 
  list-style: none; 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--sp-xs); 
  padding: 0; 
  margin: 0; 
}
.breadcrumb li + li::before { 
  content: "\203A"; 
  margin-right: var(--sp-xs); 
  color: var(--mute); 
}
.breadcrumb a { color: var(--body); }

/* ---------------- Tool directory (home) ---------------- */
.tool-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); 
  gap: var(--sp-md); 
  margin: var(--sp-sm) 0 0; 
}
.tool-tile {
  display: flex; 
  flex-direction: column; 
  gap: var(--sp-sm); 
  padding: var(--sp-lg); 
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline); 
  background: var(--canvas-elevated); 
  box-shadow: var(--shadow-whisper);
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s; 
  color: var(--ink);
}
.tool-tile:hover { 
  transform: translateY(-2px); 
  box-shadow: var(--shadow-float); 
  border-color: var(--body); 
  text-decoration: none; 
  color: var(--ink); 
}
.tool-tile .ti { 
  width: 48px; 
  height: 48px; 
  border-radius: var(--radius-md); 
  display: grid; 
  place-items: center; 
  color: var(--on-primary);
  background: var(--ink);
  border: 1px solid var(--hairline);
}
.tool-tile h3 { 
  margin: 0; 
  font-size: 1.125rem; 
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tool-tile p { 
  margin: 0; 
  color: var(--body); 
  font-size: 0.938rem; 
  line-height: 1.5;
}
.tool-tile .arrow { 
  margin-top: auto; 
  color: var(--link); 
  font-weight: 500; 
  font-size: 0.875rem; 
  display: inline-flex; 
  align-items: center; 
  gap: var(--sp-xs); 
}

.section-head { 
  text-align: center; 
  max-width: 680px; 
  margin: 0 auto var(--sp-xl); 
}
.section-head h2 {
  letter-spacing: -0.04em;
}
.section-head p { color: var(--body); }

.trust-row { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); 
  gap: var(--sp-md); 
  margin-top: var(--sp-sm); 
}
.trust { 
  padding: var(--sp-lg); 
  border: 1px solid var(--hairline); 
  border-radius: var(--radius-md); 
  background: var(--canvas-elevated); 
}
.trust .ti { 
  width: 44px; 
  height: 44px; 
  border-radius: var(--radius-md); 
  display: grid; 
  place-items: center; 
  background: var(--hairline-soft); 
  color: var(--ink); 
  margin-bottom: var(--sp-sm);
  border: 1px solid var(--hairline);
}
.trust h3 { 
  margin: 0 0 var(--sp-xs); 
  font-size: 1rem;
}
.trust p { 
  margin: 0; 
  color: var(--body); 
  font-size: 0.938rem; 
}

/* ---------------- Footer - Vercel style ---------------- */
.site-footer { 
  margin-top: auto; 
  border-top: 1px solid var(--hairline); 
  background: var(--canvas); 
  padding: var(--sp-3xl) 0 var(--sp-xl); 
}
.footer-grid { 
  display: grid; 
  grid-template-columns: 1fr auto; 
  gap: var(--sp-3xl); 
  align-items: start;
}
.footer-brand {
  max-width: 400px;
}
.footer-sections {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--sp-3xl);
  justify-content: end;
}
.footer-grid h4 { 
  font-family: var(--mono);
  font-size: 0.75rem; 
  text-transform: uppercase; 
  letter-spacing: 0; 
  font-weight: 500;
  color: var(--body); 
  margin: 0 0 var(--sp-sm); 
}
.footer-links { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: grid; 
  gap: var(--sp-xs); 
}
.footer-links.two-columns { 
  grid-template-columns: 1fr 1fr; 
  column-gap: var(--sp-md); 
}
.footer-links a { 
  color: var(--body); 
  font-size: 0.875rem; 
  transition: color 0.15s;
}
.footer-links a:hover { 
  color: var(--ink); 
  text-decoration: none;
}
.footer-about { 
  color: var(--body); 
  font-size: 0.875rem; 
  max-width: 320px; 
  line-height: 1.5;
}
.footer-bottom { 
  margin-top: var(--sp-xl); 
  padding-top: var(--sp-lg); 
  border-top: 1px solid var(--hairline); 
  color: var(--mute); 
  font-size: 0.875rem; 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--sp-sm); 
  justify-content: space-between; 
}

main { flex: 1 0 auto; }

/* Tablet / narrow desktop adjustments */
@media (max-width: 980px) and (min-width: 821px) {
  .header-inner { gap: var(--sp-sm); }
  .main-nav { gap: var(--sp-xxs); }
  .main-nav a { padding: var(--sp-xs); font-size: 0.875rem; }
}

@media (max-width: 760px) {
  .grid-2, .steps { grid-template-columns: 1fr; }
  .footer-grid { 
    grid-template-columns: 1fr !important; 
    gap: var(--sp-xl) !important;
  }
  .footer-brand {
    max-width: 100%;
  }
  .footer-sections { 
    grid-template-columns: 1fr 1fr !important; 
    gap: var(--sp-lg) !important; 
    justify-content: stretch;
    width: 100%;
  }
  .footer-links.two-columns { 
    grid-template-columns: 1fr; 
  }
  .panel-actions .grow { margin-left: 0; }
  .panel-actions .btn { flex: 1 1 auto; }
  .result-head { align-items: flex-start; }
  .result-actions { width: 100%; }
  .result-actions .btn { flex: 1 1 auto; }
  .preview-frame { height: 56vh; }
  .steps li { padding: var(--sp-md); }
}

@media (max-width: 520px) {
  .footer-bottom { flex-direction: column; gap: var(--sp-xs); }
  .field { width: 100%; }
  .field input[type="text"], 
  .field input[type="number"], 
  .field select { width: 100%; min-width: 0; }
  .field-row { gap: var(--sp-sm); }
  .hero { padding-top: var(--sp-lg); }
  .tool-card { padding: var(--sp-md); }
  .dropzone { padding: var(--sp-xl) var(--sp-md); }
  .drop-title { font-size: 1.125rem; }
  .btn-lg { padding: 0 var(--sp-lg); font-size: 1rem; }
  .result-tabs button { max-width: 150px; }
  .convert-glyph { gap: var(--sp-xs); }
  .convert-glyph .cg { width: 48px; height: 48px; }
  .privacy-pill { font-size: 0.813rem; padding: var(--sp-xs) var(--sp-sm); }
  .file-item { gap: var(--sp-sm); padding: var(--sp-sm); }
  .file-meta { padding-right: 32px; }
  .file-actions { right: var(--sp-sm); }
}

@media (prefers-reduced-motion: reduce) {
  * { 
    transition: none !important; 
    animation: none !important; 
    scroll-behavior: auto !important; 
  }
}