@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-v22-latin-regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-v22-latin-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-v22-latin-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --paper: #FBFAF7;
  --ink: #16130E;
  --muted: #5C574D;
  --accent: #2545D3;
  --accent-dark: #1B35A8;
  --line: #E4E0D6;
  --card: #FFFFFF;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
h1, h2, h3, .wordmark, .pct { font-family: "Space Grotesk", system-ui, sans-serif; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
a { color: var(--accent); }

.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.wordmark { font-size: 21px; font-weight: 700; color: var(--ink); text-decoration: none; }
.wordmark .accent { color: var(--accent); }
.brand-note { color: var(--muted); font-size: 13px; }
.site-header nav { margin-left: auto; display: flex; gap: 20px; }
.site-header nav a { color: var(--ink); text-decoration: none; font-size: 15px; }
.site-header nav a:hover { color: var(--accent); }

main { max-width: 880px; margin: 0 auto; padding: 0 20px 40px; }

.hero { padding: 56px 0 8px; text-align: left; }
.hero h1 { font-size: clamp(40px, 7vw, 64px); line-height: 1.04; margin: 0 0 18px; letter-spacing: -0.01em; }
.subhead { font-size: 19px; color: var(--muted); max-width: 620px; margin: 0 0 32px; }

.dropzone {
  border: 2px dashed #B9B2A2;
  border-radius: 16px;
  background: var(--card);
  padding: 48px 24px 40px;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease-out, background 160ms ease-out;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); outline: none; }
.dropzone.dragging { border-color: var(--accent); background: #EEF1FE; }
.dz-icon { color: var(--accent); }
.dz-title { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 24px; font-weight: 700; margin: 12px 0 2px; }
.dz-sub { color: var(--muted); margin: 4px 0 12px; }
.dz-note { color: var(--muted); font-size: 14px; margin: 18px 0 0; }

.btn {
  display: inline-block; border: none; cursor: pointer;
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500;
  border-radius: 10px; padding: 12px 22px; font-size: 16px;
  transition: background 160ms ease-out, transform 120ms ease-out;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-big { font-size: 18px; padding: 15px 28px; min-height: 52px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

.samples { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.samples-label { font-size: 14px; color: var(--muted); margin-right: 4px; }
.chip {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; min-height: 44px;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

.trust-row {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px;
  padding: 0; margin: 26px 0 0; color: var(--muted); font-size: 15px;
}
.trust-row li::before { content: "✓ "; color: var(--accent); font-weight: 700; }

.processing {
  margin-top: 28px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 28px;
}
.proc-file { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; margin: 0 0 14px; word-break: break-all; }
.progress-track { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width 300ms ease-in-out; }
.proc-stage { color: var(--muted); margin: 12px 0 0; font-size: 15px; }

.result-card {
  margin-top: 28px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px 28px;
}
.result-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; color: var(--muted); margin: 0; }
.pct { font-size: clamp(52px, 9vw, 84px); font-weight: 700; margin: 6px 0 18px; line-height: 1; }
.pct-word { font-size: 0.42em; font-weight: 500; color: var(--muted); }

/* ShinyText — approved micro-interaction: slow sheen across the % figure */
.shiny {
  background: linear-gradient(110deg, var(--ink) 35%, var(--accent) 48%, #8FA5F5 52%, var(--ink) 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0% { background-position: 120% 0; } 55%, 100% { background-position: -100% 0; } }

.name-compare { display: grid; gap: 14px; margin-bottom: 22px; }
.name-row { display: grid; gap: 2px; }
.name-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.name { margin: 0; font-size: 17px; word-break: break-all; }
.name .removed { color: var(--accent); text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.75; }
.name.after { font-weight: 700; }

.stats { border-collapse: collapse; width: 100%; margin-bottom: 22px; }
.stats th, .stats td { text-align: left; padding: 8px 10px 8px 0; border-top: 1px solid var(--line); font-size: 15px; vertical-align: top; }
.stats th { font-weight: 500; color: var(--muted); width: 150px; }
.stats td { word-break: break-all; }

.multi-note { color: var(--muted); font-size: 14.5px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.result-actions .btn { min-height: 52px; }
.copied-note { color: var(--accent); font-weight: 500; margin: 14px 0 0; }

.section { padding: 48px 0 0; }
.section h2 { font-size: 32px; margin: 0 0 20px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.steps h3 { margin: 0 0 8px; font-size: 18px; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; }

.section details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; }
.section summary { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500; cursor: pointer; font-size: 17px; }
.section details p { color: var(--muted); margin: 10px 0 2px; }

.site-footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 26px 24px 36px; color: var(--muted); font-size: 14.5px; text-align: center; }
.site-footer p { margin: 4px 0; }

#spark-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shiny { animation: none; -webkit-text-fill-color: var(--ink); color: var(--ink); background: none; }
  .progress-bar { transition: none; }
  * { transition: none !important; }
}