/* ==========================================================================
   pdf to word editor — design system
   Light theme, red as accent only, soft neutral shadows, graduated radii.
   ========================================================================== */

:root {
  /* Surfaces & text */
  --bg: #f6f6f7;
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --text: #1b1b21;
  --text-muted: #6c6c78;
  --text-faint: #9a9aa6;

  /* Lines */
  --border: rgba(20, 20, 30, 0.08);
  --border-strong: rgba(20, 20, 30, 0.16);

  /* Brand */
  --brand: #e8322c;
  --brand-ink: #c11f1a;
  --brand-wash: #fdece9;

  /* Accents (per-tool) */
  --red: #e8322c;
  --blue: #3b68ff;
  --green: #10b981;
  --orange: #f59e0b;
  --purple: #7c4dff;
  --ink: #1b1b21;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevation — neutral, layered, never colored */
  --shadow-sm: 0 1px 2px rgba(17, 17, 26, 0.04), 0 2px 8px rgba(17, 17, 26, 0.05);
  --shadow-md: 0 2px 4px rgba(17, 17, 26, 0.04), 0 14px 34px rgba(17, 17, 26, 0.09);
  --shadow-lg: 0 6px 18px rgba(17, 17, 26, 0.08), 0 28px 64px rgba(17, 17, 26, 0.14);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 44px);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
  max-width: 100%;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* ---------- Typography scale ---------- */

h1 {
  margin-bottom: 20px;
  font-size: 4rem;
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 800;
}

h2 {
  margin-bottom: 14px;
  font-size: 2.7rem;
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 750;
}

h3 {
  letter-spacing: 0;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lead {
  max-width: 62ch;
  margin: 0 auto 30px;
  color: var(--text-muted);
  font-size: 1.12rem;
  line-height: 1.65;
}

/* ---------- Shell & section rhythm ---------- */

.site-shell {
  min-height: 100vh;
}

.hero,
.live-tools,
.tools-section,
.workspace-section,
.workflow-section,
.security-section {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section-inner,
.hero-content,
.tools-section,
.live-tools,
.workspace-section {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Top bar (sticky) ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--maxw);
  margin: 12px auto;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), margin var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.topbar.scrolled {
  margin-top: 6px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: lowercase;
}

.brand-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: var(--r-sm);
  color: #fff;
  background: linear-gradient(150deg, var(--brand), var(--brand-ink));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: var(--shadow-sm);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 30px);
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.nav-links a {
  position: relative;
  padding: 4px 2px;
  /* Longer languages (German runs ~33% over English) otherwise break these
     labels mid-phrase and make the bar two rows tall. */
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

/* ---------- Buttons ---------- */

.nav-cta,
.primary-action,
.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-weight: 650;
  letter-spacing: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nav-cta,
.primary-action {
  color: #fff;
  background: linear-gradient(150deg, var(--brand), var(--brand-ink));
  box-shadow: var(--shadow-sm);
}

.nav-cta:hover,
.primary-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.nav-cta:active,
.primary-action:active,
.secondary-action:active {
  transform: translateY(0);
}

.secondary-action {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.secondary-action:hover {
  transform: translateY(-2px);
  border-color: var(--text);
  box-shadow: var(--shadow-md);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(48px, 9vw, 104px);
  padding-bottom: clamp(64px, 11vw, 128px);
  overflow: hidden;
  background: radial-gradient(
      70% 55% at 50% -8%,
      var(--brand-wash),
      transparent 70%
    ),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}

.motion-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.motion-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(20, 20, 30, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 30, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(
    60% 60% at 50% 40%,
    #000 0%,
    transparent 78%
  );
}

/* Static decorative document cards — no infinite animation */
.motion-grid span {
  position: absolute;
  display: block;
  width: 84px;
  height: 104px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(14px) rotate(var(--rot, -6deg));
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.hero.in .motion-grid span {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, -6deg));
}

.motion-grid span::before {
  content: "PDF";
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 800;
}

.motion-grid span::after {
  content: "";
  position: absolute;
  inset: 14px 14px auto 14px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  box-shadow: 0 14px 0 var(--surface-2), 0 28px 0 var(--surface-2);
}

.motion-grid span:nth-child(1) {
  left: 6%;
  top: 22%;
  --rot: -9deg;
  transition-delay: 0.05s;
}
.motion-grid span:nth-child(2) {
  right: 8%;
  top: 16%;
  --rot: 8deg;
  transition-delay: 0.12s;
}
.motion-grid span:nth-child(3) {
  left: 13%;
  bottom: 12%;
  --rot: 6deg;
  transition-delay: 0.19s;
}
.motion-grid span:nth-child(4) {
  right: 15%;
  bottom: 16%;
  --rot: -7deg;
  transition-delay: 0.26s;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.primary-action,
.secondary-action {
  min-width: 176px;
  min-height: 50px;
}

/* ---------- Live tools ---------- */

.live-tools {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-top: clamp(56px, 9vw, 104px);
  padding-bottom: clamp(56px, 9vw, 104px);
}

.live-tools-copy {
  position: sticky;
  top: 96px;
}

.live-tools-copy h2 {
  font-size: 2.35rem;
}

.live-tools-copy p {
  color: var(--text-muted);
}

.tool-workbench {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 26px 70px rgba(17, 17, 26, 0.11);
  overflow: hidden;
  min-width: 0;
}

/* Tool selector: horizontal scroll chips instead of a wall of buttons */
.tool-selector {
  display: flex;
  gap: 8px;
  padding: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.tool-selector::-webkit-scrollbar {
  height: 6px;
}
.tool-selector::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--border-strong);
}

.tool-selector button {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  background: var(--surface);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.tool-selector button:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.tool-selector button.active {
  color: #fff;
  background: linear-gradient(150deg, var(--brand), var(--brand-ink));
  border-color: transparent;
}

.workbench-body {
  padding: clamp(20px, 4vw, 32px);
  min-width: 0;
}

.workbench-body h3 {
  margin: 0 0 6px;
  font-size: 1.75rem;
  letter-spacing: 0;
}

.workbench-body > p {
  margin: 0;
  color: var(--text-muted);
  max-width: 62ch;
}

.tool-options {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  min-width: 0;
}

.tool-options label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--text);
}

.tool-options input,
.tool-options select {
  min-height: 46px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0 14px;
  background: var(--surface);
  font-weight: 500;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tool-options input:focus,
.tool-options select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-wash);
}

.option-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
}

/* Upload area — static, reacts to hover + real drag-over */
.real-upload,
.upload-drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.real-upload {
  min-height: 210px;
  margin: 20px 0;
  padding: 28px;
  isolation: isolate;
}

.real-upload::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: calc(var(--r-md) - 4px);
  background: linear-gradient(135deg, rgba(232, 50, 44, 0.08), rgba(51, 132, 255, 0.06));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.real-upload:hover,
.upload-drop:hover {
  border-color: var(--brand);
  background: var(--brand-wash);
}

.real-upload.drag,
.upload-drop.drag {
  border-color: var(--brand);
  background: var(--brand-wash);
  transform: scale(1.01);
}

.real-upload:hover::before,
.real-upload.drag::before {
  opacity: 1;
}

.real-upload input,
.upload-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.real-upload strong {
  font-size: 1.05rem;
}

.real-upload small,
.upload-drop small {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.privacy-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--border));
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: color-mix(in srgb, var(--green) 72%, var(--text));
  font-size: 0.78rem;
  font-weight: 700;
}

.upload-badge {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: var(--r-pill);
  color: #fff;
  background: linear-gradient(150deg, var(--brand), var(--brand-ink));
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease-out);
}

.real-upload:hover .upload-badge,
.upload-drop:hover .upload-badge {
  transform: translateY(-3px) scale(1.05);
}

.file-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  overflow: auto;
  scrollbar-width: thin;
}

.file-list:empty {
  display: none;
}

.file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 55%, var(--surface)));
  animation: row-in 0.35s var(--ease-out) both;
}

.file-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

.file-list strong {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.file-index {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
}

.file-list li {
  gap: 10px;
}

.file-list li > span:first-of-type {
  flex: 1;
}

.file-list li[draggable="true"] { cursor:grab; }
.file-list li[draggable="true"]:active { cursor:grabbing; }
.file-thumb { position:relative; display:grid; flex:0 0 42px !important; width:42px; height:52px; place-items:center; overflow:hidden; border:1px solid var(--border); border-radius:5px; background:var(--surface-2); color:var(--text-faint); font-size:.6rem; }
.file-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.file-thumb small { position:absolute; right:2px; bottom:2px; padding:1px 3px; border-radius:3px; background:rgba(17,17,26,.76); color:#fff; font-size:.55rem; }
.file-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.file-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.file-actions button {
  display: grid;
  width: 30px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.file-actions button:hover:not(:disabled) {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-wash);
}

.file-actions button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.strength-meter { display:block; margin-top:4px; color:var(--text-faint); font-size:.75rem; }
.strength-meter[data-score="0"],.strength-meter[data-score="1"] { color:#b42318; }
.strength-meter[data-score="2"],.strength-meter[data-score="3"] { color:#9a6700; }
.strength-meter[data-score="4"],.strength-meter[data-score="5"] { color:#087a55; }
.option-command { min-height:44px; padding:0 14px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--brand-ink); font-weight:700; }
.check-option { grid-template-columns:auto 1fr !important; align-items:center; }
.check-option input { width:18px; height:18px; accent-color:var(--brand); }
.organizer-extra { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.organizer-extra label { display:flex; align-items:center; gap:5px; font-size:.72rem; color:var(--text-muted); }
.organizer-extra input { width:82px; accent-color:var(--brand); }

/* ---------- Placement (sign / add text) ---------- */

.placer {
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}

.placer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 650;
}

.pager button,
.placer-bar > button {
  display: grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.84rem;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pager button:hover,
.placer-bar > button:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.size-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-muted);
}

.size-control input {
  width: 120px;
  accent-color: var(--brand);
}

.signature-pad {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.pad-hint {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.84rem;
}

#sig-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 150px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-sm);
  background: repeating-linear-gradient(
    0deg,
    var(--surface),
    var(--surface) 28px,
    var(--surface-2) 28px,
    var(--surface-2) 29px
  );
  cursor: crosshair;
  touch-action: none;
}

.pad-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.pad-actions button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.pad-actions button:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.pad-actions span {
  color: var(--text-faint);
  font-size: 0.8rem;
}

.placer-stage {
  position: relative;
  margin: 14px;
  line-height: 0;
  cursor: crosshair;
  touch-action: none;
}

.placer-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.placer-item {
  position: absolute;
  cursor: grab;
  outline: 2px dashed var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.placer-item:active {
  cursor: grabbing;
}

.placer-item img {
  display: block;
  width: 100%;
  height: auto;
}

.placed-text {
  display: block;
  color: #d91a14;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  white-space: nowrap;
}

.placer-hint {
  margin: 0;
  padding: 0 14px 12px;
  color: var(--text-faint);
  font-size: 0.78rem;
}

/* ---------- Scanner ---------- */

.scanner {
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}

.scan-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.scan-bar strong {
  font-size: 0.86rem;
  font-weight: 650;
}

.scan-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.scan-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.scan-mode select {
  min-height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0 8px;
  background: var(--surface);
  font-size: 0.8rem;
}

.scan-actions button,
.scan-crop-actions button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.scan-actions button:hover,
.scan-crop-actions button:hover {
  color: var(--brand);
  border-color: var(--brand);
}

#scan-video {
  display: block;
  width: 100%;
  max-height: 460px;
  background: #101014;
  object-fit: contain;
}

#scan-video[hidden] + .scan-capture {
  display: none;
}

.scan-capture {
  display: block;
  width: calc(100% - 28px);
  min-height: 46px;
  margin: 14px;
  border: 0;
  border-radius: var(--r-sm);
  color: #fff;
  background: linear-gradient(150deg, var(--brand), var(--brand-ink));
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.scan-stage {
  position: relative;
  margin: 14px;
  line-height: 0;
  touch-action: none;
}

.scan-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  background: #101014;
}

.scan-corners {
  position: absolute;
  inset: 0;
}

.scan-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scan-outline polygon {
  fill: rgba(232, 50, 44, 0.16);
  stroke: var(--brand);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

.scan-handle {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: grab;
  touch-action: none;
}

.scan-handle:active {
  cursor: grabbing;
  transform: scale(1.15);
}

.scan-stage[hidden] + .scan-crop-actions {
  display: none;
}

.scan-crop-actions {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px;
}

.scan-primary {
  color: #fff !important;
  background: var(--text) !important;
  border-color: var(--text) !important;
}

.scan-shots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 14px;
}

.scan-shots:empty {
  display: none;
}

.scan-shot {
  position: relative;
  width: 74px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}

.scan-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.scan-shot span {
  position: absolute;
  bottom: 3px;
  inset-inline-start: 4px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

.scan-shot button {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.6rem;
  line-height: 1;
}

.scan-hint {
  margin: 0;
  padding: 12px 14px;
  color: var(--text-faint);
  font-size: 0.78rem;
}

/* ---------- Redaction ---------- */

.redact-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.redact-bar strong {
  font-size: 0.85rem;
  font-weight: 650;
}

.redact-bar button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.redact-bar button:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.redact-box {
  position: absolute;
  background: #0d0d12;
  border: 1px solid #0d0d12;
  border-radius: 2px;
}

.redact-box.drawing {
  background: rgba(13, 13, 18, 0.55);
  border: 1px dashed #fff;
}

.redact-del {
  position: absolute;
  top: -9px;
  inset-inline-end: -9px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.redact-box:hover .redact-del {
  opacity: 1;
}

/* ---------- Page organizer ---------- */

.organizer {
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}

.organizer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.organizer-bar strong {
  font-size: 0.88rem;
  font-weight: 650;
}

.organizer-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.organizer-actions button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.organizer-actions button:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
  max-height: 460px;
  padding: 14px;
  overflow-y: auto;
}

.page-grid.is-dragging {
  cursor: grabbing;
}

.page-grid { grid-template-columns:repeat(auto-fill,minmax(var(--thumb-size,150px),1fr)); }

.pg-tile {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pg-tile:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.pg-tile.dragging {
  opacity: 0.55;
  transform: scale(0.94);
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
}

.pg-tile.removed {
  opacity: 0.42;
  border-color: var(--brand);
  border-style: dashed;
}

.pg-tile.selected { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-wash),var(--shadow-md); }

.pg-tile.removed .pg-thumb {
  filter: grayscale(1);
}

/* Square box: a thumbnail that fits here still fits after a 90° rotation.
   The image is absolutely positioned so max-height resolves against the box
   height — a percentage height against an aspect-ratio box does not. */
.pg-thumb {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-2);
  overflow: hidden;
}

.pg-thumb img {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(17, 17, 26, 0.16);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.28s var(--ease-out);
}

.pg-skeleton {
  width: 66%;
  height: 84%;
  border-radius: 3px;
  background: linear-gradient(
      100deg,
      transparent 20%,
      rgba(255, 255, 255, 0.7) 45%,
      transparent 70%
    )
    var(--border);
  background-size: 220% 100%;
  animation: skeleton 1.3s linear infinite;
}

.pg-bar {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pg-num {
  flex: 1;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.pg-handle,
.pg-btn {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-faint);
  font-size: 0.76rem;
  line-height: 1;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.pg-handle {
  cursor: grab;
  touch-action: none;
}

.pg-handle:active {
  cursor: grabbing;
}

.pg-handle:hover,
.pg-btn:hover {
  color: var(--brand);
  background: var(--brand-wash);
}

.organizer-hint {
  margin: 0;
  padding: 0 14px 12px;
  color: var(--text-faint);
  font-size: 0.78rem;
}

.password-row {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--brand-wash);
}

.password-row > span {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--brand-ink);
}

.password-row input {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0 14px;
  background: var(--surface);
}

.password-row input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(232, 50, 44, 0.18);
}

.password-row small {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.run-row {
  display: flex;
  gap: 8px;
  min-width: 0;
  align-items: stretch;
}

.cancel-tool {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 650;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.cancel-tool:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.run-tool {
  position: relative;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--r-sm);
  color: #fff;
  background: linear-gradient(150deg, var(--brand), var(--brand-ink));
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.run-tool:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.run-tool:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.run-tool.is-loading {
  color: transparent;
  pointer-events: none;
}

.compression-result { display:grid; gap:14px; margin-top:16px; padding:16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); }
.compression-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.compression-stats span { display:grid; gap:3px; padding:10px; border-radius:var(--r-sm); background:var(--surface); text-align:center; }
.compression-stats small { color:var(--text-faint); font-size:.7rem; }
.compression-stats strong { color:var(--text); font-size:.95rem; }
.quality-compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quality-compare figure { margin:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-sm); background:#fff; }
.quality-compare canvas { display:block; width:100%; height:auto; }
.quality-compare figcaption { padding:7px 9px; background:var(--surface); color:var(--text-muted); font-size:.72rem; }
.download-result { min-height:48px; border:0; border-radius:var(--r-sm); background:linear-gradient(150deg,var(--brand),var(--brand-ink)); color:#fff; font-weight:750; box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.download-result:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.batch-results { display:grid; gap:8px; margin-bottom:14px; padding:12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2); }
.batch-results ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.batch-results li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:8px; border-radius:6px; background:var(--surface); font-size:.78rem; }
.batch-results li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.batch-results li small { color:var(--text-muted); }
.batch-results li.done small { color:#087a55; }.batch-results li.failed small { color:#b42318; }
.batch-results button { min-height:28px; padding:0 8px; border:1px solid var(--border); border-radius:5px; background:var(--surface); color:var(--text-muted); }
@media (max-width:560px){.compression-stats{grid-template-columns:1fr}.quality-compare{grid-template-columns:1fr 1fr}}

.run-tool.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.tool-progress {
  margin-top: 14px;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--border));
  overflow: hidden;
}

.tool-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--orange));
  transition: width 0.3s var(--ease);
}

.tool-status {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.tool-status[data-tone="ready"] {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
}

.tool-status[data-tone="working"] {
  border-color: color-mix(in srgb, var(--blue) 26%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.tool-status[data-tone="success"] {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border));
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}

.tool-status[data-tone="error"] {
  border-color: color-mix(in srgb, var(--red) 34%, var(--border));
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: color-mix(in srgb, var(--red) 62%, var(--text));
}

.tool-status strong {
  color: var(--text);
  font-weight: 650;
}

/* ---------- Tools section ---------- */

.tools-section {
  position: relative;
  max-width: none;
  padding-top: 72px;
  padding-bottom: 86px;
  overflow: hidden;
  background:
    radial-gradient(circle at 6% 18%, rgba(232, 50, 44, 0.07), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(232, 50, 44, 0.06), transparent 30%),
    #f7f7fb;
}

.section-heading {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto 34px;
  text-align: center;
}

.section-heading h2 {
  margin-bottom: 10px;
  font-size: 3.05rem;
  line-height: 1.08;
  font-weight: 800;
}

.section-heading p {
  max-width: 850px;
  margin-inline: auto;
  font-size: 1.08rem;
  line-height: 1.55;
}

.section-heading p,
.workspace-copy p,
.security-section p {
  color: var(--text-muted);
}

.category-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 34px;
  min-width: 0;
}

.category-tabs button {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: #54545f;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(17, 17, 26, 0.04);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.category-tabs button:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.category-tabs button.active {
  color: #fff;
  background: #2d2d36;
  border-color: #2d2d36;
}

.tools-grid {
  position: relative;
  z-index: 1;
  max-width: 1880px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.tool-card {
  --accent: var(--brand);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 34px 34px 28px;
  border: 1px solid #dedee8;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(17, 17, 26, 0.03);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tool-visual { position:relative; display:flex; align-items:center; justify-content:flex-start; gap:0; width:82px; height:58px; margin-bottom:24px; border:0; border-radius:0; background:transparent; overflow:visible; }
.tool-visual::before { display:none; }
.visual-file { position:absolute; display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:6px; background:color-mix(in srgb,var(--accent) 18%,#fff); color:var(--accent); box-shadow:none; transition:transform .3s var(--ease-out); }
.visual-file-a { left:0; top:0; transform:none; }.visual-file-b { left:20px; top:18px; transform:none; color:#fff; background:var(--accent); }
.tool-card:hover .visual-file-a { transform:translate(-2px,-2px); }.tool-card:hover .visual-file-b { transform:translate(2px,2px); }
.visual-file b { position:absolute; top:50%; left:50%; max-width:30px; transform:translate(-50%,-50%); overflow:hidden; color:inherit; font-size:.72rem; letter-spacing:0; text-overflow:ellipsis; font-weight:800; }
.visual-file svg { width:20px; height:20px; margin:0; }
.visual-file b + svg { opacity:0; }
.tool-visual > i { display:none; }

.tool-card.in {
  opacity: 1;
  transform: translateY(0);
}

.tool-card[hidden] {
  display: none;
}

.tool-card::after {
  display: none;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 30%, #dedee8);
  box-shadow: 0 18px 42px rgba(17, 17, 26, 0.1);
}

.tool-card:hover::after {
  transform: scale(1.25);
}

.tool-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  place-items: center;
  border-radius: var(--r-sm);
  color: #fff;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent);
  transition: transform var(--dur) var(--ease-out);
}

.tool-icon svg {
  width: 22px;
  height: 22px;
}

.tool-card:hover .tool-icon {
  transform: translateY(-2px) rotate(-4deg);
}

.tool-card-badge {
  display: none;
}

.tool-card > span:not(.tool-card-badge) {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tool-card h3 {
  margin: 0 0 10px;
  color: #31313b;
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: 800;
}

.tool-card h3 a {
  transition: color var(--dur) var(--ease);
}

.tool-card h3 a:hover {
  color: var(--accent);
}

.tool-card p {
  flex: 1;
  margin: 0;
  color: #7d7d89;
  font-size: 0.94rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.tool-card-action {
  position: relative;
  z-index: 1;
  display: none;
}

.tool-card button:not(.tool-card-action):hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.tool-card button:not(.tool-card-action):disabled {
  background: var(--surface-2);
  color: var(--text-faint);
  cursor: not-allowed;
  box-shadow: none;
}
.tool-card-link { position:relative; z-index:1; display:none; width:100%; min-height:42px; place-items:center; border-radius:var(--r-sm); background:var(--accent); color:#fff; font-weight:650; box-shadow:var(--shadow-sm); }
.tool-card-link:hover { color:#fff; transform:translateY(-2px); }

.mobile-save-sheet { position:fixed; z-index:9999; inset:0; display:grid; place-items:end center; padding:16px; background:rgba(17,17,26,.48); backdrop-filter:blur(4px); }
.mobile-save-sheet > div { position:relative; display:grid; width:min(100%,440px); gap:10px; padding:24px; border-radius:16px 16px 10px 10px; background:var(--surface); box-shadow:var(--shadow-lg); text-align:center; }
.mobile-save-close { position:absolute; top:10px; right:10px; display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:50%; background:var(--surface-2); color:var(--text-muted); font-size:1.3rem; }
.mobile-save-icon { display:grid; width:54px; height:54px; margin:auto; place-items:center; border-radius:50%; background:var(--brand-wash); color:var(--brand); font-size:1.6rem; font-weight:800; }
.mobile-save-sheet h3 { margin:2px 0 0; font-size:1.2rem; }.mobile-save-sheet p { margin:0; overflow-wrap:anywhere; color:var(--text-muted); font-size:.82rem; }
.mobile-save-button { min-height:50px; border:0; border-radius:var(--r-sm); background:var(--brand); color:#fff; font-weight:750; }.mobile-save-sheet small { color:var(--text-faint); font-size:.75rem; }

.accent-red {
  --accent: var(--red);
}
.accent-blue {
  --accent: var(--blue);
}
.accent-green {
  --accent: var(--green);
}
.accent-orange {
  --accent: var(--orange);
}
.accent-purple {
  --accent: var(--purple);
}
.accent-dark {
  --accent: var(--ink);
}

/* ---------- Workspace preview ---------- */

.workspace-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(64px, 10vw, 112px);
  padding-bottom: clamp(64px, 10vw, 112px);
}

.workspace-copy {
  max-width: 46ch;
}

.editor-preview {
  position: relative;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  background: var(--text);
  color: #fff;
}

.preview-toolbar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.preview-toolbar span:nth-child(2) {
  background: #febc2e;
}
.preview-toolbar span:nth-child(3) {
  background: #28c840;
  margin-right: 8px;
}
.preview-toolbar strong {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
}

.upload-drop {
  min-height: 260px;
  margin: 16px 0;
  padding: 28px;
}

.upload-drop strong {
  font-size: 1.25rem;
}

.file-flow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.file-flow span {
  display: grid;
  width: 76px;
  height: 46px;
  place-items: center;
  border-radius: var(--r-sm);
  color: #fff;
  background: var(--brand);
  font-weight: 700;
  font-size: 0.85rem;
}

.file-flow span:last-child {
  background: var(--blue);
}

.file-flow i {
  flex: 1;
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--orange), var(--green), var(--blue));
}

/* ---------- Workflow ---------- */

.workflow-section {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(48px, 7vw, 80px);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.workflow-step {
  display: grid;
  min-width: 200px;
  align-content: center;
  gap: 6px;
  padding: 22px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.workflow-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.workflow-step span {
  color: var(--brand);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.workflow-step strong {
  font-size: 1.05rem;
  font-weight: 650;
}

/* ---------- Security / closing ---------- */

.security-section {
  padding-top: clamp(72px, 11vw, 128px);
  padding-bottom: clamp(72px, 11vw, 128px);
  text-align: center;
  color: #fff;
  background: radial-gradient(60% 60% at 20% 10%, rgba(232, 50, 44, 0.28), transparent 60%),
    radial-gradient(50% 50% at 85% 40%, rgba(59, 104, 255, 0.24), transparent 55%),
    #17171d;
}

.security-section .eyebrow {
  color: #ff8f8b;
}

.security-section h2,
.security-section p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.security-section p {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Footer ---------- */

.site-footer {
  padding: clamp(44px, 7vw, 72px) var(--gutter) 40px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 36px;
  max-width: var(--maxw);
  margin: 0 auto 32px;
}

.footer-brand p {
  max-width: 34ch;
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-col h4 {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer-col a {
  display: block;
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color var(--dur) var(--ease);
}

.footer-col a:hover {
  color: var(--brand);
}

.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.84rem;
}

/* ---------- Tool landing pages ---------- */

.doc-page {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) var(--gutter) clamp(48px, 8vw, 88px);
}

.crumbs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--text-faint);
  font-size: 0.84rem;
}

.crumbs a:hover {
  color: var(--brand);
}

.doc-head {
  padding-bottom: 12px;
}

.doc-head h1 {
  font-size: 2.7rem;
}

.lead-left {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.doc-head .primary-action {
  margin-top: 10px;
}

.privacy-line {
  margin: 12px 0 0;
  color: var(--text-faint);
  font-size: 0.86rem;
}

.doc-section {
  padding-top: clamp(30px, 5vw, 48px);
}

.doc-section h2 {
  font-size: 1.85rem;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  counter-increment: step;
  margin-bottom: 12px;
  padding-block: 14px;
  padding-inline: 52px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  line-height: 1.6;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.faq {
  display: grid;
  gap: 8px;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}

.faq summary {
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  float: inline-end;
  color: var(--brand);
  font-weight: 700;
}

.faq details[open] summary::after {
  content: "−";
}

.faq summary:hover {
  color: var(--brand);
}

.faq details p {
  margin: 0;
  padding: 0 16px 15px;
  color: var(--text-muted);
  line-height: 1.65;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.related-card {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.related-card strong {
  font-size: 0.95rem;
  letter-spacing: 0;
}

.related-card span {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 520px);
  padding: 13px 18px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--text) 94%, var(--green));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 550;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.toast::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* ---------- Scroll reveal (generic) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Focus ---------- */

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

.skip-link {
  position: absolute;
  top: -60px;
  inset-inline-start: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--text);
  color: #fff;
  font-weight: 650;
  transition: top 160ms var(--ease);
}

.skip-link:focus {
  top: 12px;
}

.seo-content {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Keyframes (finite / loaders only) ---------- */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes skeleton {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -80% 0;
  }
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .live-tools,
  .workspace-section {
    grid-template-columns: 1fr;
  }

  .live-tools-copy {
    position: static;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* With nowrap labels the bar needs to drop the links earlier in verbose
   languages than it did in English. */
@media (max-width: 900px) {
  .nav-links {
    gap: 14px;
    font-size: 0.86rem;
  }
}

@media (max-width: 820px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 760px) {
  .topbar,
  .hero,
  .live-tools,
  .tools-section,
  .workspace-section,
  .workflow-section,
  .security-section {
    min-width: 0;
  }

  .tool-selector {
    margin-inline: calc(clamp(20px, 5vw, 44px) * -1);
    padding-inline: clamp(20px, 5vw, 44px);
    scroll-padding-inline: clamp(20px, 5vw, 44px);
  }

  .category-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-inline: calc(clamp(20px, 5vw, 44px) * -1);
    padding-inline: clamp(20px, 5vw, 44px);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .category-tabs button {
    flex: 0 0 auto;
  }

  .workbench-body {
    padding-inline: clamp(16px, 5vw, 24px);
  }

  .real-upload {
    min-height: 170px;
    padding: 22px 16px;
  }

  .upload-badge {
    width: 52px;
    height: 52px;
    font-size: 1.65rem;
  }

  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .motion-grid span {
    display: none;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: 2.35rem;
    line-height: 1.08;
  }

  h2 {
    font-size: 1.8rem;
  }

  .topbar {
    margin-inline: 10px;
    padding-inline: 10px;
  }

  .brand {
    min-width: 0;
  }

  .brand span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-cta {
    min-width: auto;
    padding-inline: 12px;
    font-size: 0.88rem;
  }

  .hero {
    padding-top: 34px;
    padding-bottom: 44px;
  }

  .lead {
    font-size: 1rem;
  }

  .run-row {
    display: grid;
    grid-template-columns: 1fr;
    position: sticky;
    bottom: 10px;
    z-index: 8;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .cancel-tool {
    min-height: 46px;
  }

  .run-tool {
    min-height: 48px;
  }

  .file-list li {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .file-list strong {
    font-size: 0.78rem;
  }

  .file-actions {
    margin-inline-start: auto;
  }

  .file-actions button {
    width: 34px;
    min-height: 30px;
  }

  .batch-results li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .batch-results li button {
    grid-column: 1 / -1;
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }

  .tool-card {
    min-height: auto;
    padding: 18px;
  }

  .tool-visual {
    height: 96px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .file-flow {
    flex-direction: column;
  }

  .file-flow i {
    width: 8px;
    height: 44px;
  }

  .hero-actions .primary-action,
  .hero-actions .secondary-action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .tool-card,
  .motion-grid span {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Language switcher ---------- */

/* ---------- Visual watermark studio ---------- */
.watermark-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:22px;margin:24px calc(clamp(20px,4vw,32px)*-1) 8px;padding:22px;background:#f3f4f8;border-block:1px solid var(--border);min-width:0;max-width:calc(100% + clamp(20px,4vw,32px)*2);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.watermark-studio h4{margin:0;font-size:1.15rem;letter-spacing:0}.wm-preview{min-width:0}.wm-preview>h4{margin-bottom:14px}.wm-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:16px;max-height:740px;overflow:auto;padding:2px 6px 14px 2px}.wm-pages figure{margin:0}.wm-page-canvas{position:relative;display:grid;place-items:center;aspect-ratio:3/4;overflow:hidden;background:#fff;border:1px solid #d9dbe4;border-radius:6px;box-shadow:0 5px 15px rgba(29,31,42,.08)}.wm-page-canvas canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto}.wm-pages figcaption{margin-top:6px;text-align:center;color:var(--text-muted);font-size:.78rem;font-weight:650}
.wm-panel{align-self:start;position:sticky;top:16px;overflow:hidden;min-width:320px;max-width:100%;background:#fff;border:1px solid var(--border-strong);border-radius:8px;box-shadow:0 14px 35px rgba(28,30,40,.11)}.wm-panel>h4{padding:18px 20px;border-bottom:1px solid var(--border);text-align:center}.wm-tabs,.wm-layer{display:grid;grid-template-columns:1fr 1fr}.wm-tabs button,.wm-layer button{min-height:82px;border:0;border-bottom:1px solid var(--border);background:#fff;color:var(--text-muted);font-size:1.6rem;font-weight:750}.wm-tabs button+button{border-inline-start:1px solid var(--border)}.wm-tabs span,.wm-layer span{display:block;margin-top:5px;font-size:.82rem;letter-spacing:0}.wm-tabs button.active,.wm-layer button.active{color:var(--brand);box-shadow:inset 0 -3px var(--brand);background:#fffafa}.wm-fields{display:grid;gap:15px;padding:18px;min-width:0}.wm-fields label{display:grid;gap:6px;min-width:0;font-size:.82rem;font-weight:700}.wm-fields input,.wm-fields select{width:100%;min-width:0;min-height:42px;padding:0 10px;border:1px solid var(--border-strong);border-radius:6px;background:#fff;color:var(--text)}.wm-fields input[type=color]{padding:4px;min-width:42px}.wm-fields input[type=range]{padding:0}.wm-fields fieldset{display:grid;grid-template-columns:minmax(96px,1fr) 62px repeat(4,minmax(32px,42px));gap:6px;min-width:0;padding:0;border:0}.wm-fields legend{margin-bottom:7px;font-size:.82rem;font-weight:700}.wm-fields fieldset button{min-width:0;border:1px solid var(--border-strong);border-radius:6px;background:#fff}.wm-fields fieldset button.active{color:var(--brand);border-color:var(--brand);background:#fff2f1}.wm-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0}.wm-position-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}.wm-position-row strong,.wm-fields>strong{font-size:.82rem}.wm-position{display:grid;grid-template-columns:repeat(3,26px);width:max-content;margin-top:7px;border:1px solid var(--border-strong)}.wm-position button{width:26px;height:26px;border:0;border-inline-end:1px dashed #ccd0d9;border-bottom:1px dashed #ccd0d9;background:#fff}.wm-position button:nth-child(3n){border-inline-end:0}.wm-position button:nth-child(n+7){border-bottom:0}.wm-position button.active{background:radial-gradient(circle,var(--brand) 0 5px,#ffd8d5 6px 11px,#fff 12px)}.wm-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px!important}.wm-check input{width:20px;min-height:20px}.wm-layer{gap:8px}.wm-layer button{min-height:67px;border:1px solid var(--border)!important;border-radius:6px;font-size:1.2rem}.wm-layer span{font-size:.74rem}
.wm-fields [hidden]{display:none!important}
.wm-mark{position:absolute;left:50%;top:50%;z-index:2;max-width:82%;padding:2px 5px;color:var(--wm-color);opacity:var(--wm-opacity);transform:translate(-50%,-50%) rotate(var(--wm-rotation));white-space:nowrap;background-position:center;background-size:contain;background-repeat:no-repeat;pointer-events:none}.wm-mark:empty{width:55%;aspect-ratio:3/1}.wm-mark.at-top-left{left:19%;top:15%}.wm-mark.at-top-center{top:15%}.wm-mark.at-top-right{left:81%;top:15%}.wm-mark.at-middle-left{left:19%}.wm-mark.at-middle-right{left:81%}.wm-mark.at-bottom-left{left:19%;top:85%}.wm-mark.at-bottom-center{top:85%}.wm-mark.at-bottom-right{left:81%;top:85%}.wm-mark.mosaic{inset:5%;width:90%;max-width:none;height:90%;padding:0;transform:none;background-image:repeating-linear-gradient(135deg,transparent 0 18%,color-mix(in srgb,var(--wm-color) 25%,transparent) 19% 20%,transparent 21% 34%);font-size:0!important}
@media(max-width:1100px){.watermark-studio{grid-template-columns:1fr;overflow-x:hidden}.wm-panel{position:static;grid-row:1;width:100%;min-width:0}.wm-fields fieldset{grid-template-columns:minmax(112px,1fr) 62px repeat(4,minmax(34px,42px))}}
@media(max-width:850px){.watermark-studio{margin-inline:calc(clamp(20px,4vw,32px)*-1);padding:14px}.wm-pages{max-height:520px;grid-template-columns:repeat(2,minmax(0,1fr))}.wm-fields fieldset{grid-template-columns:minmax(0,1fr) repeat(4,36px)}.wm-fields fieldset select,.wm-fields fieldset input[type=number]{grid-column:auto}.wm-two{grid-template-columns:1fr}.wm-position-row{align-items:flex-end}}
@media(max-width:430px){.wm-fields fieldset{grid-template-columns:minmax(0,1fr) repeat(4,30px)}.wm-fields fieldset select,.wm-fields fieldset input[type=number]{grid-column:1/-1}.wm-pages{gap:10px}.wm-tabs button{font-size:1.35rem}}
[dir="rtl"] .watermark-studio,[dir="rtl"] .wm-panel{text-align:right}

.lang-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: 0 auto 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.lang-switch a {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.lang-switch a:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.lang-switch a[aria-current="true"] {
  color: #fff;
  background: var(--text);
  border-color: var(--text);
}

/* ---------- RTL ---------- */

[dir="rtl"] .steps li {
  padding-inline: 52px 16px;
}

/* Chevrons and arrows are directional glyphs: mirror them rather than
   translating them into different characters. */
[dir="rtl"] .pager button,
[dir="rtl"] .file-actions button[data-move] {
  transform: scaleX(-1);
}

/* The page organiser drag maths compares clientX against tile centres, which
   already works in RTL because getBoundingClientRect is viewport-absolute. */
[dir="rtl"] .tool-selector {
  direction: rtl;
}
.ocr-review { margin-block:24px; min-width:0; }
.ocr-review-page { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; padding-block:20px; border-bottom:1px solid #aaa; }
.ocr-review-page img { width:100%; height:auto; max-height:520px; object-fit:contain; }
.ocr-review-page label { min-width:0; }
.ocr-review-page textarea { display:block; box-sizing:border-box; width:100%; min-height:300px; padding:12px; font:16px/1.6 Arial,sans-serif; resize:vertical; }
.ocr-review button { min-height:44px; margin-block:16px; }
@media(max-width:640px) { .ocr-review-page { grid-template-columns:minmax(0,1fr); } }
.excel-review { margin-block:24px; min-width:0; }
.excel-review-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-block:12px; }
.excel-review-toolbar button,.excel-review-toolbar select { min-height:44px; padding:8px 12px; }
.excel-review-grid { max-height:500px; overflow:auto; max-width:100%; }
.excel-review-grid table { border-collapse:collapse; }
.excel-review-grid td { padding:0; border:1px solid #9ca3af; }
.excel-review-grid input { width:160px; min-height:44px; border:0; padding:8px; box-sizing:border-box; }
.excel-review-grid .merged-cell { border:2px solid #087f8c; }
.excel-review-grid input:focus { outline:2px solid #087f8c; outline-offset:-2px; }