@font-face { font-family: "Poppins"; src: url("fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* Compact paper-sheet composition from the Figma concept. */
:root { min-height: 100%; font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; }
:root {
  --figma-stroke: rgba(0, 0, 0, .15);
  --radius-navbar: 14px;
  --radius-panel: 28px;
  --radius-quick-actions: 30px;
  --radius-tool-tile: 26px;
  --radius-control: 14px;
  --radius-mini-action: 12px;
  --radius-page-card: 12px;
  --radius-promise-chip: 9px;
}
@supports (corner-shape: squircle) {
  :root {
    --radius-navbar: 20px;
    --radius-panel: 50px;
    --radius-quick-actions: 57px;
    --radius-tool-tile: 45px;
    --radius-control: 28px;
    --radius-mini-action: 26px;
    --radius-page-card: 20px;
    --radius-promise-chip: 18px;
  }
  .site-header, .site-nav a, .quick-card, .hero-card, .privacy-section,
  .sidebar, .page-workspace, .tool-card, .drop-zone, .mini-action,
  .metadata-workspace, .security-workspace, .optimize-workspace, .password-dialog,
  .primary-button, .secondary-button, .danger-button, .trust-row span,
  .privacy-pill, .icon-button, .reset-button, .range-input, .page-card {
    corner-shape: squircle;
  }
}
body {
  position: relative;
  min-height: 100vh;
  border: 0;
  box-shadow: none;
  padding-top: 20px;
  background-color: #f1f1f1;
  background-image:
    radial-gradient(ellipse at 48% 6%, rgba(255,255,255,.34), transparent 58%),
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 32%, rgba(0,0,0,.012) 74%, rgba(255,255,255,.06)),
    linear-gradient(rgba(0,0,0,.009) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.009) 1px, transparent 1px),
    url("paper-noise.svg");
  background-size: auto, auto, 8px 8px, 8px 8px, 256px 256px;
  background-blend-mode: normal, soft-light, normal, normal, normal;
}

:root {
  background-color: #f1f1f1;
  background-image:
    radial-gradient(ellipse at 48% 6%, rgba(255,255,255,.34), transparent 58%),
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 32%, rgba(0,0,0,.012) 74%, rgba(255,255,255,.06)),
    linear-gradient(rgba(0,0,0,.009) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.009) 1px, transparent 1px),
    url("paper-noise.svg");
  background-size: auto, auto, 8px 8px, 8px 8px, 256px 256px;
  background-blend-mode: normal, soft-light, normal, normal, normal;
}

body::before {
  content: none;
}

.site-header,
.landing,
.workspace,
footer {
  width: min(100% - 32px, 880px);
  max-width: 880px;
}
footer a { color: inherit; text-underline-offset: 3px; }
footer a:hover { color: var(--ink); }

.legal-page { width: min(100% - 44px, 826px); margin: 54px auto 90px; }
.legal-hero { margin-bottom: 34px; }
.legal-hero h1 { max-width: 690px; margin-bottom: 16px; font-size: clamp(2.5rem, 7vw, 4.8rem); line-height: .96; letter-spacing: -.06em; }
.legal-hero h1 em { background: linear-gradient(100deg, #238cff, #9742f5); background-clip: text; -webkit-background-clip: text; color: transparent; font-style: normal; }
.legal-hero p { max-width: 650px; color: #66635d; }
.legal-card { padding: clamp(28px, 5vw, 52px); border: 3px solid rgba(0,0,0,.14); border-radius: 50px; corner-shape: superellipse(1.5); background: rgba(255,255,255,.6); box-shadow: var(--shadow); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.legal-summary { margin: 0 0 36px; padding: 20px 22px; border-radius: 22px; corner-shape: superellipse(1.5); background: rgba(83,99,244,.07); color: #47445d; }
.legal-section + .legal-section { margin-top: 34px; padding-top: 34px; border-top: 1px solid rgba(0,0,0,.12); }
.legal-section h2 { margin-bottom: 12px; font-size: clamp(1.35rem, 3vw, 1.8rem); letter-spacing: -.035em; }
.legal-section h3 { margin: 22px 0 8px; font-size: 1rem; }
.legal-section p, .legal-section li { color: #615e58; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 12px 0 0; padding-left: 22px; }
.legal-section li + li { margin-top: 8px; }
.legal-section a { color: #5363f4; text-underline-offset: 3px; }
.legal-back { display: inline-flex; margin-bottom: 28px; color: #66635d; text-decoration: none; font-weight: 700; }
.legal-back:hover { color: var(--ink); }

.site-header {
  width: min(100% - 84px, 826px);
  max-width: 826px;
  height: 50px;
  margin: 0 auto;
  padding: 0 14px 0 16px;
  position: relative;
  z-index: 20;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: var(--radius-navbar);
  corner-shape: superellipse(1.5);
  background: rgba(255,255,255,.3);
  box-shadow: 0 10px 28px rgba(45,40,31,.07), inset 0 0 0 1px rgba(28,27,24,.025);
  backdrop-filter: none;
}

.brand { width: 92px; height: 32px; overflow: hidden; }
.brand-logo { display: block; width: 92px; height: 32px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 3px; margin-left: auto; margin-right: 12px; }
.site-nav a { padding: 7px 10px; border-radius: 15px; corner-shape: superellipse(1.5); color: #615f59; text-decoration: none; font-size: .74rem; font-weight: 750; }
.site-nav a:hover { color: var(--ink); background: rgba(24,24,23,.055); }
.privacy-pill { padding: 6px 9px; font-size: .68rem; background: rgba(255,255,255,.65); }
.privacy-pill > span {
  display: inline-block;
  transform-origin: center;
  animation: privacy-pulse 1.8s ease-in-out infinite;
}
@keyframes privacy-pulse {
  0%, 100% { transform: scale(.88); text-shadow: 0 0 0 rgba(54,162,113,0); }
  50% { transform: scale(1.18); text-shadow: 0 0 8px rgba(54,162,113,.65); }
}

.landing {
  margin: 14px auto 0;
  padding: 48px 26px 74px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hero-shell { grid-template-columns: 240px minmax(0, 1fr); max-width: none; margin: 0 auto 66px; gap: 10px; }
.quick-card,
.hero-card,
.privacy-section,
.sidebar,
.page-workspace,
.metadata-workspace,
.security-workspace,
.optimize-workspace,
.drop-zone {
  border-radius: var(--radius-panel);
  corner-shape: superellipse(1.5);
  background: rgba(255,255,255,.9);
}
.quick-card { border-radius: var(--radius-quick-actions); background: rgba(255,255,255,.3); }
.hero-card,
.privacy-section { background: rgba(255,255,255,.3); }
.tool-card { border-radius: var(--radius-tool-tile); corner-shape: superellipse(1.5); }

.site-header,
.quick-card,
.hero-card,
.privacy-section,
.sidebar,
.page-workspace,
.tool-card,
.drop-zone,
.mini-action,
.metadata-workspace,
.security-workspace,
.optimize-workspace {
  border: 3px solid var(--figma-stroke);
}
.quick-card { padding: 34px 28px; }
.quick-card .eyebrow { margin-bottom: 18px; color: var(--ink); font-size: .94rem; font-weight: 700; letter-spacing: 0; text-align: center; text-transform: none; }
.quick-actions-list { display: grid; gap: 8px; }
.mini-action { display: flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 0; font-size: .7rem; font-weight: 600; padding: 4px 8px; border-width: 2px; border-radius: var(--radius-mini-action); corner-shape: superellipse(1.5); }
.mini-action:hover { animation: quick-action-shake .38s ease-in-out; }
@keyframes quick-action-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-2px) rotate(-.7deg); }
  50% { transform: translateX(2px) rotate(.7deg); }
  75% { transform: translateX(-1px) rotate(-.35deg); }
}
.mini-action > span { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; margin-right: 0; border-radius: 50%; background: #f4ac00; color: #fff; font-size: 1.05rem; }
.quick-mint > span { background: #00a88f; }
.quick-coral > span { background: #ea5b48; }
.quick-green > span { background: #56a83e; }
.quick-blue > span { background: #3e7dd6; }
.quick-orange > span { background: #d66a1f; }
.quick-slate > span { background: #52667a; }
.quick-optimize > span { background: #167d93; }
.hero-card { padding: 38px 40px; }
.hero-card h1 { font-size: clamp(2.15rem, 4.6vw, 3.05rem); }
.hero-card h1 {
  color: transparent;
  background: linear-gradient(105deg, #1688f5 0%, #5363f4 35%, #8250f5 70%, #9a46f2 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.hero-card h1 em { color: inherit; }
.hero-card > p { font-size: .92rem; }
.hero-actions { margin-top: 22px; }
.hero-card .primary-button {
  background: linear-gradient(105deg, #1688f5 0%, #5363f4 35%, #8250f5 70%, #9a46f2 100%);
  box-shadow: 0 7px 17px rgba(83, 99, 244, .2);
}
.hero-card .primary-button:hover {
  background: linear-gradient(105deg, #1688f5 0%, #5363f4 35%, #8250f5 70%, #9a46f2 100%);
  box-shadow: 0 12px 24px rgba(22, 136, 245, .28), 0 5px 10px rgba(24, 24, 23, .16);
  animation: quick-action-shake .38s ease-in-out;
}
.hero-card .text-link {
  color: var(--muted);
  text-decoration-color: currentColor;
}
.hero-card .text-link:hover {
  color: var(--ink);
}
.trust-row {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 8px 0 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-track {
  display: flex;
  width: max-content;
  animation: promise-flight 24s linear infinite;
  will-change: transform;
}
.trust-set { display: flex; gap: 16px; padding-right: 16px; }
@keyframes promise-flight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.trust-row span {
  position: relative;
  flex: none;
  border: 0 !important;
  background: none !important;
  color: #5363f4;
  font-weight: 500;
  box-shadow: none !important;
}
.trust-row span::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  corner-shape: inherit;
  background: linear-gradient(105deg, #1688f5, #9a46f2);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.trust-plane {
  position: absolute;
  z-index: 2;
  top: -6px;
  left: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)) padding-box,
              linear-gradient(105deg, #1688f5, #9a46f2) border-box;
  box-shadow: 0 4px 10px rgba(83,99,244,.12);
}
.trust-plane::before {
  content: "";
  width: 13px;
  height: 13px;
  background: linear-gradient(105deg, #1688f5, #9a46f2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21 23 12 2.01 3 2 10l15 2-15 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21 23 12 2.01 3 2 10l15 2-15 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-45deg);
}
.trust-cloud::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 18h13a4 4 0 0 0 .4-7.98A6.5 6.5 0 0 0 6.1 8.2 5 5 0 0 0 5 18ZM2.3 4l17.7 17.7 1.4-1.4L3.7 2.6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 18h13a4 4 0 0 0 .4-7.98A6.5 6.5 0 0 0 6.1 8.2 5 5 0 0 0 5 18ZM2.3 4l17.7 17.7 1.4-1.4L3.7 2.6Z'/%3E%3C/svg%3E");
  transform: none;
}
.trust-account::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-5 0-8 2.5-8 5v1h16v-1c0-2.5-3-5-8-5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-5 0-8 2.5-8 5v1h16v-1c0-2.5-3-5-8-5Z'/%3E%3C/svg%3E");
  transform: none;
}
.trust-browser::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v16H3Zm2 4v10h14V8Zm1-3.1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm3 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v16H3Zm2 4v10h14V8Zm1-3.1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm3 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E");
  transform: none;
}
.trust-storage::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-5 0-8 1.5-8 3.5S7 10 12 10s8-1.5 8-3.5S17 3 12 3ZM4 9v4c0 2 3 3.5 8 3.5s8-1.5 8-3.5V9c-1.7 1.7-4.8 2.5-8 2.5S5.7 10.7 4 9Zm0 6.5v2c0 2 3 3.5 8 3.5s8-1.5 8-3.5v-2c-1.7 1.7-4.8 2.5-8 2.5s-6.3-.8-8-2.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-5 0-8 1.5-8 3.5S7 10 12 10s8-1.5 8-3.5S17 3 12 3ZM4 9v4c0 2 3 3.5 8 3.5s8-1.5 8-3.5V9c-1.7 1.7-4.8 2.5-8 2.5S5.7 10.7 4 9Zm0 6.5v2c0 2 3 3.5 8 3.5s8-1.5 8-3.5v-2c-1.7 1.7-4.8 2.5-8 2.5s-6.3-.8-8-2.5Z'/%3E%3C/svg%3E");
  transform: none;
}
.trust-shield::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5.1 3.4 9.7 8 11 4.6-1.3 8-5.9 8-11V5Zm-1.2 14-3.3-3.3 1.4-1.4 1.9 1.9 4.5-4.5 1.4 1.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5.1 3.4 9.7 8 11 4.6-1.3 8-5.9 8-11V5Zm-1.2 14-3.3-3.3 1.4-1.4 1.9 1.9 4.5-4.5 1.4 1.4Z'/%3E%3C/svg%3E");
  transform: none;
}
.section-heading { margin-bottom: 16px; }
.section-heading h2,
.privacy-section h2 { font-size: clamp(1.65rem, 3vw, 2.15rem); }
.section-heading > p { font-size: .82rem; max-width: 300px; }
.tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 10px; row-gap: 16px; }
.tool-card { width: 100%; height: auto; min-height: 0; aspect-ratio: 198 / 160; padding: 22px; overflow: hidden; }
.tool-card:hover { animation: tool-tile-shake .38s ease-in-out; }
@keyframes tool-tile-shake {
  0%, 100% { transform: translateY(-4px) translateX(0) rotate(0); }
  25% { transform: translateY(-4px) translateX(-2px) rotate(-.7deg); }
  50% { transform: translateY(-4px) translateX(2px) rotate(.7deg); }
  75% { transform: translateY(-4px) translateX(-1px) rotate(-.35deg); }
}
.tool-card::after {
  position: absolute;
  right: 22px;
  bottom: 22px;
  color: #fff;
  font-size: 6.5rem;
  font-weight: 700;
  line-height: .8;
  opacity: .25;
  pointer-events: none;
}
.tool-card[data-tool="merge"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/merge.svg") center / contain no-repeat; mask: url("icons/merge.svg") center / contain no-repeat; }
.tool-card[data-tool="split"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/split.svg") center / contain no-repeat; mask: url("icons/split.svg") center / contain no-repeat; }
.tool-card[data-tool="reorder"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/shuffle.svg") center / contain no-repeat; mask: url("icons/shuffle.svg") center / contain no-repeat; }
.tool-card[data-tool="rotate"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/rotate-3d.svg") center / contain no-repeat; mask: url("icons/rotate-3d.svg") center / contain no-repeat; }
.tool-card[data-tool="delete"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/trash-2.svg") center / contain no-repeat; mask: url("icons/trash-2.svg") center / contain no-repeat; }
.tool-card[data-tool="extract"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/layers-2.svg") center / contain no-repeat; mask: url("icons/layers-2.svg") center / contain no-repeat; }
.tool-card[data-tool="metadata"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/cog.svg") center / contain no-repeat; mask: url("icons/cog.svg") center / contain no-repeat; }
.tool-card[data-tool="protect"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/lock.svg") center / contain no-repeat; mask: url("icons/lock.svg") center / contain no-repeat; }
.tool-card[data-tool="unlock"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/lock-open.svg") center / contain no-repeat; mask: url("icons/lock-open.svg") center / contain no-repeat; }
.tool-card[data-tool="optimize"]::after { content: ""; width: 92px; height: 92px; background: #fff; -webkit-mask: url("icons/paintbrush.svg") center / contain no-repeat; mask: url("icons/paintbrush.svg") center / contain no-repeat; }
.tool-card > * { position: relative; z-index: 1; }
.tool-heading { display: flex; align-items: center; gap: 10px; width: 100%; }
.tool-card strong { max-width: calc(100% - 58px); margin-top: 0; font-size: 1rem; line-height: 1.08; }
.tool-card small { margin-top: 14px; padding-top: 0; font-size: .7rem; line-height: 1.4; }
.tool-icon { flex: 0 0 48px; width: 48px; height: 48px; background: #fff; font-size: 1.38rem; }
.merge-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/merge.svg") center / contain no-repeat; mask: url("icons/merge.svg") center / contain no-repeat; }
.mini-action .merge-mask { width: 18px; height: 18px; }
.split-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/split.svg") center / contain no-repeat; mask: url("icons/split.svg") center / contain no-repeat; }
.mini-action .split-mask { width: 18px; height: 18px; }
.shuffle-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/shuffle.svg") center / contain no-repeat; mask: url("icons/shuffle.svg") center / contain no-repeat; }
.rotate-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/rotate-3d.svg") center / contain no-repeat; mask: url("icons/rotate-3d.svg") center / contain no-repeat; }
.mini-action .rotate-mask { width: 18px; height: 18px; }
.delete-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/trash-2.svg") center / contain no-repeat; mask: url("icons/trash-2.svg") center / contain no-repeat; }
.extract-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/layers-2.svg") center / contain no-repeat; mask: url("icons/layers-2.svg") center / contain no-repeat; }
.mini-action .extract-mask { width: 18px; height: 18px; }
.metadata-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/cog.svg") center / contain no-repeat; mask: url("icons/cog.svg") center / contain no-repeat; }
.mini-action .metadata-mask { width: 18px; height: 18px; }
.protect-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/lock.svg") center / contain no-repeat; mask: url("icons/lock.svg") center / contain no-repeat; }
.unlock-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/lock-open.svg") center / contain no-repeat; mask: url("icons/lock-open.svg") center / contain no-repeat; }
.optimize-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url("icons/paintbrush.svg") center / contain no-repeat; mask: url("icons/paintbrush.svg") center / contain no-repeat; }
.mini-action .optimize-mask { width: 18px; height: 18px; }
.mini-action > span > [class$="-mask"] { place-self: center; margin: 0; background: #fff; color: #fff; }
.amber { background: rgba(244, 172, 0, .4); }
.mint { background: rgba(0, 168, 143, .4); }
.lilac { background: rgba(121, 86, 232, .4); }
.coral { background: rgba(234, 91, 72, .4); }
.blue { background: rgba(62, 125, 214, .4); }
.green { background: rgba(86, 168, 62, .4); }
.orange { background: rgba(214, 106, 31, .4); }
.slate { background: rgba(82, 102, 122, .4); }
.security-protect { background: rgba(74, 79, 157, .4); }
.security-unlock { background: rgba(109, 92, 173, .4); }
.optimize { background: rgba(22, 125, 147, .4); }
.amber .tool-icon { color: #f4ac00; }
.mint .tool-icon { color: #00a88f; }
.lilac .tool-icon { color: #7956e8; }
.coral .tool-icon { color: #ea5b48; }
.blue .tool-icon { color: #3e7dd6; }
.green .tool-icon { color: #56a83e; }
.orange .tool-icon { color: #d66a1f; }
.slate .tool-icon { color: #52667a; }
.security-protect .tool-icon { color: #4a4f9d; }
.security-unlock .tool-icon { color: #6d5cad; }
.optimize .tool-icon { color: #167d93; }
.faq-section {
  margin-top: 72px;
  padding: 0;
}
.faq-heading { display: grid; grid-template-columns: 1fr minmax(220px, .72fr); column-gap: 30px; align-items: end; margin-bottom: 26px; }
.faq-heading .eyebrow { grid-column: 1 / -1; }
.faq-heading h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.15rem); line-height: 1.08; letter-spacing: -.045em; }
.faq-heading p { margin: 0; color: #69665f; font-size: .8rem; }
.faq-list { display: grid; gap: 11px; }
.faq-list details { position: relative; overflow: clip; border: 2px solid rgba(24,24,23,.14); border-radius: 24px; corner-shape: superellipse(1.5); background: rgba(255,255,255,.34); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.faq-list details:hover,
.faq-list details[open] { border-color: rgba(24,24,23,.2); background: rgba(255,255,255,.52); box-shadow: 0 12px 28px rgba(45,40,31,.07); }
.faq-list details:hover:not(.is-closing) { animation: quick-action-shake .38s ease-in-out; }
.faq-list details[open] { animation: faq-card-bounce .48s cubic-bezier(.2,.9,.3,1.25); }
.faq-list summary { position: relative; padding: 20px 58px 20px 22px; list-style: none; color: var(--ink); font-size: .86rem; font-weight: 650; cursor: pointer; transition: color .18s ease; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 21px; display: grid; place-items: center; width: 28px; height: 28px; transform: translateY(-50%); color: var(--ink); -webkit-text-fill-color: var(--ink); font-size: 1.4rem; font-weight: 400; line-height: 1; transition: color .18s ease, transform .28s cubic-bezier(.2,1.45,.4,1); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg) scale(1.08); }
.faq-list details[open] summary { color: #5363f4; background-image: linear-gradient(110deg, #168df2, #9a3df0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.faq-list details.is-closing summary { color: var(--ink); background-image: none; -webkit-text-fill-color: var(--ink); }
.faq-list details.is-closing summary::after { transform: translateY(-50%) rotate(0) scale(1); }
.faq-list summary:hover::after,
.faq-list details[open] summary::after { color: var(--ink); }
.faq-list summary:focus-visible { outline: 2px solid rgba(24,24,23,.45); outline-offset: -5px; border-radius: 20px; corner-shape: superellipse(1.5); }
.faq-list details p { max-width: 690px; margin: 0; padding: 0 58px 22px 22px; color: #5e5b55; font-size: .76rem; line-height: 1.65; animation: faq-answer-in .42s cubic-bezier(.2,.9,.3,1.18); }
@keyframes faq-card-bounce {
  0% { transform: scale(.992); }
  58% { transform: scale(1.006); }
  78% { transform: scale(.998); }
  100% { transform: scale(1); }
}
@keyframes faq-answer-in {
  0% { opacity: 0; transform: translateY(-7px); }
  68% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.privacy-section { margin-top: 54px; padding: 34px; gap: 22px; }
.privacy-section > div { transform: translateY(-8px); }
.privacy-section h2 { line-height: 1.08; }
.privacy-section > p { font-size: .8rem; }
.privacy-orb { width: 50px; height: 50px; }

.workspace { width: min(100% - 84px, 826px); max-width: 826px; margin: 14px auto 0; padding: 38px 0 70px; }
.workspace[data-tool="merge"] { --tool-accent-rgb: 244 172 0; }
.workspace[data-tool="split"] { --tool-accent-rgb: 0 168 143; }
.workspace[data-tool="reorder"] { --tool-accent-rgb: 121 86 232; }
.workspace[data-tool="rotate"] { --tool-accent-rgb: 62 125 214; }
.workspace[data-tool="delete"] { --tool-accent-rgb: 234 91 72; }
.workspace[data-tool="extract"] { --tool-accent-rgb: 214 106 31; }
.workspace[data-tool="metadata"] { --tool-accent-rgb: 82 102 122; }
.workspace[data-tool="protect"] { --tool-accent-rgb: 74 79 157; }
.workspace[data-tool="unlock"] { --tool-accent-rgb: 109 92 173; }
.workspace[data-tool="optimize"] { --tool-accent-rgb: 22 125 147; }
.workspace[data-tool] .drop-zone,
.workspace[data-tool] .page-workspace,
.workspace[data-tool] .metadata-workspace,
.workspace[data-tool] .security-workspace,
.workspace[data-tool] .optimize-workspace { border-color: rgb(var(--tool-accent-rgb) / .55); }
#choose-files {
  background: linear-gradient(105deg, #1688f5 0%, #5363f4 35%, #8250f5 70%, #9a46f2 100%);
  box-shadow: 0 7px 17px rgba(83, 99, 244, .2);
}
#choose-files:hover {
  background: linear-gradient(105deg, #1688f5 0%, #5363f4 35%, #8250f5 70%, #9a46f2 100%);
  box-shadow: 0 12px 24px rgba(22, 136, 245, .28), 0 5px 10px rgba(24, 24, 23, .16);
  animation: quick-action-shake .38s ease-in-out;
}
#export-button:not(:disabled):hover {
  background: var(--ink);
  box-shadow: 0 12px 24px rgba(24,24,23,.24), 0 5px 10px rgba(24,24,23,.16);
}
#export-button:disabled:hover {
  background: var(--ink);
  box-shadow: 0 7px 17px rgba(24,24,23,.16);
  transform: none;
  animation: none;
}
#add-files-top { background: rgba(255,255,255,.3); }
#add-files-top:hover {
  background: rgba(255,255,255,.3);
  box-shadow: 0 8px 16px rgba(24,24,23,.12);
}
#reset-button:hover {
  box-shadow: 0 6px 12px rgba(185,61,61,.12);
}
.workspace-topbar { padding: 0 14px; }
.editor { grid-template-columns: 210px minmax(0, 1fr); gap: 10px; }
.page-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
footer {
  width: min(100% - 84px, 826px);
  max-width: 826px;
  margin: 14px auto 24px;
  padding: 20px 10px;
}

.primary-button,
.secondary-button,
.danger-button,
.trust-row span,
.privacy-pill,
.icon-button,
.reset-button,
.range-input {
  corner-shape: superellipse(1.5);
  border-radius: var(--radius-control);
}

.sidebar { padding: 26px; }
.sidebar,
.page-workspace { background: rgba(255,255,255,.3); }
.aside-heading h2 { margin-bottom: 0; }
.file-list { margin-top: 14px; }
.metadata-workspace {
  min-width: 0;
  padding: 28px;
  border-radius: var(--radius-panel);
  corner-shape: superellipse(1.5);
  background: rgba(255,255,255,.3);
}
.security-workspace {
  min-width: 0;
  min-height: 430px;
  padding: 50px;
  border: 3px solid var(--figma-stroke);
  border-radius: var(--radius-panel);
  corner-shape: superellipse(1.5);
  background: rgba(255,255,255,.3);
  text-align: center;
  box-shadow: var(--shadow);
}
.optimize-workspace {
  min-width: 0;
  min-height: 430px;
  padding: 50px;
  border: 3px solid var(--figma-stroke);
  border-radius: var(--radius-panel);
  corner-shape: superellipse(1.5);
  background: rgba(255,255,255,.3);
  text-align: center;
  box-shadow: var(--shadow);
}
.optimize-workspace h2 { margin: 4px 0 10px; font-size: clamp(1.7rem, 4vw, 2.45rem); letter-spacing: -.045em; }
.optimize-workspace > p { max-width: 560px; margin: 0 auto 28px; color: #67645e; font-size: .83rem; }
.optimize-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: rgb(var(--tool-accent-rgb)); color: #fff; box-shadow: 0 10px 24px rgb(var(--tool-accent-rgb) / .2); }
.optimize-icon .optimize-mask { width: 30px; height: 30px; }
.check-option.optimize-check { align-items: center; width: min(100%, 500px); margin: 0 auto; padding: 17px 19px; border: 1px solid rgba(0,0,0,.1); border-radius: 18px; corner-shape: superellipse(1.5); background: rgba(255,255,255,.48); text-align: left; }
.optimize-check input { flex-basis: 32px; width: 32px; height: 32px; }
.optimize-check input::after { font-size: 1.08rem; }
.optimize-result { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(100%, 500px); margin: 18px auto 0; padding: 14px 18px; border-radius: 16px; corner-shape: superellipse(1.5); background: rgb(var(--tool-accent-rgb) / .1); color: rgb(var(--tool-accent-rgb)); font-size: .75rem; }
.optimize-result strong { font-size: .9rem; }
.optimize-workspace .progress-wrap { width: min(540px, 100%); margin: 22px auto 0; padding: 14px 18px; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; corner-shape: superellipse(1.5); background: rgba(255,255,255,.45); text-align: left; }
.security-workspace h2 { margin: 4px 0 10px; font-size: clamp(1.7rem, 4vw, 2.45rem); letter-spacing: -.045em; }
.security-workspace > p { max-width: 510px; margin: 0 auto 24px; color: #67645e; font-size: .83rem; }
.security-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: rgb(var(--tool-accent-rgb)); color: #fff; font-size: 1.7rem; box-shadow: 0 10px 24px rgb(var(--tool-accent-rgb) / .2); }
.security-icon > span { width: 29px; height: 29px; }
.protect-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; max-width: 540px; margin: 26px auto 0; text-align: left; }
.protect-fields > label { font-size: .7rem; font-weight: 700; }
.password-field { position: relative; }
.password-field input { width: 100%; min-width: 0; padding: 12px 58px 12px 14px; border: 1px solid rgba(0,0,0,.14); border-radius: 13px; corner-shape: superellipse(1.5); background: rgba(255,255,255,.62); color: var(--ink); }
.password-field input:focus { outline: 0; border-color: rgb(var(--tool-accent-rgb, 83 99 244)); box-shadow: inset 0 0 0 1px rgb(var(--tool-accent-rgb, 83 99 244)); }
.protect-fields[data-password-state="match"] .password-field input { border-color: #309566; }
.protect-fields[data-password-state="match"] .password-field input:focus { border-color: #309566; box-shadow: inset 0 0 0 1px #309566; }
.protect-fields[data-password-state="mismatch"] #protect-confirm { border-color: #c94b43; }
.protect-fields[data-password-state="mismatch"] #protect-confirm:focus { border-color: #c94b43; box-shadow: inset 0 0 0 1px #c94b43; }
.password-field button { position: absolute; top: 50%; right: 7px; display: grid; width: 32px; height: 32px; place-items: center; transform: translateY(-50%); padding: 0; border: 0; border-radius: 9px; background: transparent; color: #64615b; cursor: pointer; }
.password-field button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-field button:hover { background: rgba(24,24,23,.07); color: var(--ink); }
.password-match-status { grid-column: 2; min-height: 1em; margin: 1px 4px 0; font-size: .65rem; font-weight: 600; }
.password-match-status[data-state="match"] { color: #24784f; }
.password-match-status[data-state="mismatch"] { color: #ad3731; }
.svg-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.password-advice { grid-column: 1 / -1; margin: 8px 0 0; color: #716e67; text-align: center; font-size: .65rem; }
.security-workspace .progress-wrap { width: min(540px, 100%); margin: 22px auto 0; padding: 14px 18px; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; corner-shape: superellipse(1.5); background: rgba(255,255,255,.45); text-align: left; }
.security-workspace .progress-wrap > div { align-items: center; gap: 16px; margin-bottom: 8px; color: #57544f; font-weight: 600; }
.security-workspace .progress-wrap progress { display: block; height: 10px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(83,99,244,.12); }
.security-workspace .progress-wrap progress::-webkit-progress-bar { border-radius: 999px; background: rgba(83,99,244,.12); }
.security-workspace .progress-wrap progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #238cff, #9742f5); }
.security-workspace .progress-wrap progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #238cff, #9742f5); }
.unlock-status { padding: 15px 18px; border-radius: 16px; corner-shape: superellipse(1.5); background: rgb(var(--tool-accent-rgb) / .09); color: rgb(var(--tool-accent-rgb)) !important; }

.password-dialog { width: min(100% - 30px, 430px); padding: 0; border: 2px solid rgba(24,24,23,.16); border-radius: 30px; corner-shape: superellipse(1.5); background: rgba(249,249,249,.94); color: var(--ink); box-shadow: 0 30px 80px rgba(18,18,17,.28); }
.password-dialog::backdrop { background: rgba(24,24,23,.42); backdrop-filter: blur(7px); }
.password-dialog form { position: relative; padding: 34px; }
.password-dialog h2 { margin: 4px 0 9px; font-size: 1.55rem; line-height: 1.12; }
.password-dialog p { margin-bottom: 22px; color: #69665f; font-size: .76rem; }
.password-dialog label { display: block; margin-bottom: 6px; font-size: .7rem; font-weight: 700; }
.password-dialog .password-field { --tool-accent-rgb: 83 99 244; }
.password-dialog .field-error { min-height: 18px; margin: 8px 0 0; color: #a52d2d; }
.dialog-lock { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%; background: linear-gradient(105deg, #1688f5, #9a46f2); color: #fff; font-size: 1.25rem; }
.dialog-close { position: absolute; top: 18px; right: 20px; border: 0; background: transparent; color: #6c6962; font-size: 1.4rem; cursor: pointer; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.dialog-actions .primary-button { background: linear-gradient(105deg, #1688f5, #9a46f2); }
.metadata-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.metadata-heading h2 { margin: 4px 0 0; font-size: 1.55rem; line-height: 1.1; }
.metadata-selected-file { margin: 0 0 20px; color: #6a6862; font-size: .76rem; overflow-wrap: anywhere; }
.metadata-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.metadata-fields label { display: grid; gap: 6px; padding: 14px; border: 1px solid rgba(0,0,0,.09); border-radius: 18px; corner-shape: superellipse(1.5); background: rgba(255,255,255,.5); }
.metadata-fields label > span:first-child { font-size: .72rem; font-weight: 700; }
.metadata-fields input { min-width: 0; width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 10px; background: rgba(255,255,255,.72); color: var(--ink); font: inherit; font-size: .76rem; }
.metadata-fields input:focus { outline: 3px solid rgb(var(--tool-accent-rgb) / .2); border-color: rgb(var(--tool-accent-rgb) / .65); }
.metadata-input-wrap { position: relative; display: block; }
.metadata-input-wrap input { padding-right: 38px; }
.metadata-input-wrap button { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 50%; background: transparent; color: #77746d; font: 500 1.05rem/1 Poppins, sans-serif; cursor: pointer; }
.metadata-input-wrap button:hover { background: rgba(24,24,23,.08); color: var(--ink); }
#clear-metadata { border-color: rgba(185,61,61,.28); border-radius: var(--radius-control); corner-shape: superellipse(1.5); background: rgba(255,255,255,.3); color: #b93d3d; }
#clear-metadata:hover { background: rgba(255,255,255,.4); box-shadow: 0 6px 12px rgba(185,61,61,.12); }
.metadata-note { margin: 18px 0 0; color: #6a6862; font-size: .7rem; }
.metadata-option { padding-top: 18px; border-top: 1px solid rgba(0,0,0,.1); }
.check-option { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check-option input {
  appearance: none;
  display: grid;
  flex: 0 0 25px;
  place-items: center;
  width: 25px;
  height: 25px;
  margin: 0;
  border: 2px solid rgb(var(--tool-accent-rgb) / .65);
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.check-option input::after { content: "✓"; color: #fff; font-size: .9rem; font-weight: 800; line-height: 1; transform: scale(0); transition: transform .12s ease; }
.check-option input:checked { border-color: rgb(var(--tool-accent-rgb)); background: rgb(var(--tool-accent-rgb)); }
.check-option input:checked::after { transform: scale(1); }
.check-option input:focus-visible { outline: 2px solid rgb(var(--tool-accent-rgb) / .28); outline-offset: 2px; }
.check-option span { display: grid; gap: 3px; }
.check-option strong { font-size: .72rem; }
.check-option small { color: #6a6862; font-size: .62rem; line-height: 1.35; }
.page-workspace { padding: 24px; }
.drop-zone { padding: 52px; background: rgba(255,255,255,.3); box-shadow: var(--shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
.drop-illustration span:first-child { position: relative; color: transparent; }
.drop-illustration span:first-child::after { content: "PDF"; position: absolute; inset: 0; display: grid; place-items: center; background-image: linear-gradient(110deg, #168df2, #9a3df0); background-clip: text; -webkit-background-clip: text; color: #168df2; -webkit-text-fill-color: transparent; }
.file-item { padding: 12px; }
.page-card {
  padding: 13px;
  border-radius: var(--radius-page-card);
  corner-shape: superellipse(1.5);
  background: rgba(255,255,255,.6);
}
.workspace[data-tool] .page-card.selected {
  border-color: rgb(var(--tool-accent-rgb) / .78);
  background: rgb(var(--tool-accent-rgb) / .08);
}
.message { padding: 14px 18px; }
.primary-button { padding: 14px 21px; }
.secondary-button,
.danger-button { padding: 11px 16px; }
.compact { padding: 9px 13px; }
.trust-row span,
.privacy-pill { padding: 7px 12px; }
.trust-row span { padding: 7px 28px; border-radius: var(--radius-promise-chip); }
.range-input { margin-top: 8px; padding: 12px 14px; }
.range-input:focus,
.range-input:focus-visible {
  border-color: rgb(var(--tool-accent-rgb));
  outline: 0;
  box-shadow: inset 0 0 0 1px rgb(var(--tool-accent-rgb));
}

@media (min-width: 701px) and (max-width: 900px) {
  .hero-shell { grid-template-columns: minmax(0, 1fr); }
  .quick-card { display: none; }
  .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-card { aspect-ratio: 1.4; }
}

@media (max-width: 700px) {
  .site-header, .landing, .workspace, footer { width: min(100% - 20px, 880px); }
  .site-header { width: min(100% - 44px, 826px); }
  .workspace { width: min(100% - 44px, 826px); }
  footer { width: min(100% - 44px, 826px); }
  body { padding-top: 10px; }
  .site-header { margin-top: 0; }
  .site-nav { display: flex; gap: 0; margin-right: 6px; }
  .site-nav a { padding: 6px 7px; font-size: .68rem; }
  .privacy-pill { margin-left: auto; }
  .landing { padding: 28px 12px 52px; }
  .hero-shell { grid-template-columns: 1fr; margin-bottom: 50px; }
  .hero-card { padding: 32px 28px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-card { aspect-ratio: 1.6; }
  .workspace { padding-left: 0; padding-right: 0; }
  .faq-section { padding: 0; }
  .faq-heading { grid-template-columns: 1fr; gap: 8px; }
  .metadata-fields { grid-template-columns: 1fr; }
  .metadata-heading { align-items: stretch; flex-direction: column; }
  .security-workspace, .optimize-workspace { padding: 34px 24px; }
  .protect-fields { grid-template-columns: 1fr; }
  .password-match-status { grid-column: auto; }
  .password-advice { grid-column: auto; }
  .legal-page { width: min(100% - 28px, 826px); margin-top: 34px; }
  .legal-card { padding: 27px 22px; border-radius: 32px; }
}

@media (max-width: 430px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-card { aspect-ratio: 1.8; }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-pill > span { animation: none; }
  .faq-list details[open],
  .faq-list details:hover,
  .faq-list details p { animation: none; }
  .faq-list summary::after { transition: none; }
  .mini-action:hover,
  .tool-card:hover,
  .hero-card .primary-button:hover,
  #choose-files:hover { animation: none; }
  .trust-row { overflow: visible; }
  .trust-track { width: 100%; animation: none; transform: none; }
  .trust-set { flex-wrap: wrap; }
  .trust-set[aria-hidden="true"] { display: none; }
}