/* Work Data Lab website — tokens from the Work Data Lab design system (tokens.json), plus shared site layout. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --paper: #F7F5F0; --surface: #FFFFFF; --surface-subtle: #EFECE5; --seam: #E3DFD6; --seam-strong: #CFCAC0;
  --border-control: #8A8D98; --ink: #14161F; --ink-secondary: #4A4E5C; --ink-muted: #666A76; --ink-faint: #8A8D98;
  --indigo-50: #f3f6ff; --indigo-100: #e6ecff; --indigo-200: #cfd9fc; --indigo-300: #adbbf0; --indigo-400: #8193dd;
  --indigo-500: #5b6dc2; --indigo-600: #2f3a8f; --indigo-700: #202873; --indigo-800: #151a59; --indigo-900: #0b0e3f;
  --primary: var(--indigo-600); --primary-hover: var(--indigo-700); --primary-press: var(--indigo-800); --primary-soft: var(--indigo-50);
  --on-primary: #FFFFFF; --focus-ring: var(--indigo-600); --selection: #DCE2FA;
  --data-1: #2f3a8f; --data-2: #b87a1e; --data-3: #4a8dbf; --data-4: #b4532f; --data-5: #2c8a6c; --data-6: #a0527f; --data-7: #4f5566;
  --success: #2e6b53; --success-soft: #e6efe9; --warning: #85570f; --warning-soft: #f5ebd8; --error: #9c3d2c; --error-soft: #f5e4df;
  --tag-find-ink: #215d87; --tag-find-soft: #eaf1f7; --tag-pin-ink: #7a4a06; --tag-pin-soft: #f6eedf;
  --tag-name-ink: #005941; --tag-name-soft: #e5f1ec; --tag-judge-ink: #6a2950; --tag-judge-soft: #f4e8ef;
  --prov-verified: var(--indigo-700); --prov-vendor: var(--ink-secondary); --prov-pending: var(--ink-muted);
  --font-display: "Instrument Serif", "Geist", Georgia, serif;
  --font-sans: "Geist", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-0: 0px; --radius-1: 2px; --radius-2: 4px;
  --shadow-float: 0 1px 0 rgba(20,22,31,0.04), 0 8px 24px rgba(20,22,31,0.08);
  --border-hairline: 1px; --border-rule: 2px;
  --duration-instant: 120ms; --duration-quick: 200ms; --duration-calm: 320ms; --duration-slow: 600ms; --stagger: 40ms;
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-settle: cubic-bezier(0.16, 1, 0.3, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-linear: linear;
  --grid-web-max: 1200px; --grid-web-gutter: 24px; --grid-web-margin: 32px; --grid-product-gutter: 16px; --seam-gap: 1px;
}

body { margin: 0; background: var(--paper); }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

/* ---------- Type ---------- */
.h-hero { font: 500 clamp(40px, 5.4vw, 76px)/1.04 "Geist",system-ui,sans-serif; letter-spacing: -0.03em; letter-spacing: -0.02em; color: var(--ink); margin: 0; text-wrap: balance; }
.h-sec { font: 500 clamp(30px, 3.6vw, 50px)/1.08 "Geist",system-ui,sans-serif; letter-spacing: -0.03em; letter-spacing: -0.015em; color: var(--ink); margin: 0; text-wrap: balance; }
.h-card { font: 500 clamp(22px, 2.1vw, 28px)/1.15 "Geist",system-ui,sans-serif; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
.lead { font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--font-sans); color: var(--ink-secondary); margin: 0; max-width: 40ch; }
.body { font: 400 16px/26px var(--font-sans); color: var(--ink-secondary); margin: 0; }
.small { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); margin: 0; }
.mono { font: 400 12px/16px var(--font-mono); letter-spacing: .02em; }
em.it { font-style: italic; }

/* ---------- Nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; min-height: 64px; padding: 0 32px; background: rgba(247,245,240,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--seam); }
.site-nav .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.site-nav .brand-word { font: 500 22px/1.06 "Geist",system-ui,sans-serif; letter-spacing: -0.03em; letter-spacing: -.01em; }
.site-nav .brand-lab { font: 500 10px/1 var(--font-sans); letter-spacing: .16em; }
.site-nav ul { display: flex; gap: 28px; margin: 0 auto 0 0; padding: 0; list-style: none; }
.site-nav ul a { font: 400 14px/20px var(--font-sans); color: var(--ink-secondary); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color var(--duration-instant) var(--ease-soft); }
.site-nav ul a:hover { color: var(--ink); }
.site-nav ul a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 760px) {
  .site-nav { padding: 12px 16px; }
  .site-nav ul { order: 3; width: 100%; gap: 20px; overflow-x: auto; margin: 0; }
  .site-nav .wdl-btn { margin-left: auto; }
}

/* ---------- Layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.sec { padding: 80px 0; border-top: 1px solid var(--seam); }
.sec--surface { background: var(--surface); }
.sec--ink { background: var(--ink); color: var(--surface); border-top: 0; }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: 40px; }
.sec-head > :first-child { grid-column: span 7; }
.sec-head > :last-child { grid-column: 9 / span 4; }
.two { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.two > .l { grid-column: span 6; }
.two > .r { grid-column: 8 / span 5; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stack { display: flex; flex-direction: column; }
.eyebrow-dot { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow-dot::before { content: ""; width: 8px; height: 8px; background: var(--primary); }
.patch-pad { padding: 32px; }
.num-label { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); letter-spacing: .04em; }
.ic { width: 24px; height: 24px; flex: none; color: var(--ink); }
.trust-line { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.trust-line span { display: inline-flex; align-items: center; gap: 8px; }
.trust-line span::before { content: ""; width: 6px; height: 6px; background: var(--ink); }
.arrow-link { font: 500 15px/22px var(--font-sans); color: var(--primary); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.wdl-btn--light { background: var(--surface); color: var(--ink); }
.wdl-btn--light:hover { background: var(--surface-subtle); }
.wdl-btn--ghost-light { background: transparent; color: var(--surface); border-color: #8A8D98; }
.wdl-btn--ghost-light:hover { border-color: var(--surface); }

@media (max-width: 900px) {
  .sec { padding: 56px 0; }
  .sec-head > *, .two > * { grid-column: 1 / -1 !important; }
  .sec-head { margin-bottom: 28px; }
}
.nb-s { display: none; }
.lead, .body, p { text-wrap: pretty; }
.hstats span { text-wrap: balance; }
.h-sec, h3 { text-wrap: balance; }
@media (max-width: 720px) {
  .wdl-footer { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 400px) {
  .nb-l { display: none; } .nb-s { display: inline; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .row > .wdl-btn--lg { flex: 1 1 100%; }
  .patch-pad { padding: 24px; }
}

/* ---------- Motion: one gentle reveal per element, the first time it comes into view ---------- */
/* The page runtime adds .rv to elements and .in when they enter the viewport. Without the runtime (canvas, no JS) nothing is hidden. */
.rv { transition: opacity 900ms cubic-bezier(.22,.61,.36,1), transform 1200ms cubic-bezier(.16,1,.3,1); transition-delay: var(--rd, 0ms); }
.rv:not(.in) { opacity: 0; transform: translateY(18px); }
.draw-x { transform-origin: left center; animation: wdl-grow-x 1200ms var(--ease-settle) 300ms both; }
@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.count { --n: var(--to); counter-reset: n var(--n); }
.count.rv.in { animation: count-up 1600ms cubic-bezier(.22,.61,.36,1) both; }
.count::after { content: counter(n); }
@keyframes count-up { from { --n: 0; } }

/* Redaction demo */
.redact { display: inline; padding: 1px 4px; margin: 0 -1px; background: var(--primary-soft); color: var(--prov-verified); font: 500 0.82em/1 var(--font-mono); border: 1px solid var(--indigo-200); white-space: nowrap; animation: wdl-fade 400ms var(--ease-soft) both; animation-delay: calc(900ms + var(--i, 0) * 180ms); }
.pii { background-image: linear-gradient(var(--warning-soft), var(--warning-soft)); background-repeat: no-repeat; background-size: 100% 100%; animation: pii-mark 500ms var(--ease-soft) both; animation-delay: calc(300ms + var(--i, 0) * 120ms); padding: 0 2px; }
@keyframes pii-mark { from { background-size: 0% 100%; } }

/* Hero headline: slow, soft fade on load */
@keyframes m-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.h-hero.wdl-rise { animation: m-rise 1000ms cubic-bezier(.22,.61,.36,1) 100ms both; }

/* Card lift on hover */
.ds, .cat, .mm, .step, .stg { transition: transform 400ms cubic-bezier(.2,.7,.1,1), box-shadow 400ms ease, border-color 300ms ease; }
.ds:hover, .cat:hover, .step:hover, .stg:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(20,22,31,.35); }
.wdl-btn { transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.wdl-btn:hover { transform: translateY(-1px); }
.wdl-btn:active { transform: scale(.98); }

/* Button and link colors must survive the global a:hover rule */
a.wdl-btn--primary, a.wdl-btn--primary:hover { color: var(--on-primary); }
a.wdl-btn--light, a.wdl-btn--light:hover { color: var(--ink); }
a.wdl-btn--ghost-light, a.wdl-btn--ghost-light:hover { color: #FFFFFF; }
a.wdl-btn--secondary, a.wdl-btn--secondary:hover { color: var(--ink); }
.dk a:not(.wdl-btn):hover, .sec--ink a:not(.wdl-btn):hover, .grid-bg a:not(.wdl-btn):hover, .wdl-patch--indigo a:not(.wdl-btn):hover { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  .rv:not(.in) { opacity: 1; transform: none; }
}

/* ---------- Display type: Geist (clean, wide, Apple/OpenAI-like) ---------- */
:root { --font-display: "Geist", system-ui, -apple-system, sans-serif; }
.h-hero { letter-spacing: -0.045em !important; font-weight: 500 !important; }
.h-sec { letter-spacing: -0.035em !important; font-weight: 500 !important; }
em.it { font-style: normal; color: #2f3a8f; }
.dk em.it, .sec--ink em.it, [style*="#FFFFFF"] > em.it, .grid-bg em.it { color: #adbbf0; }
.wdl-serif, .wdl-stat__value, .wdl-kpi__value, .wdl-q { font-family: "Geist", system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: -0.03em; }
.wdl-stat__value .wdl-vs { font-family: "Geist", system-ui, sans-serif; font-style: normal; }
.wdl-faq summary { letter-spacing: -0.01em; }

/* ---------- Marquee of tools ---------- */
.marq { display: flex; overflow: hidden; overflow: clip; contain: paint; max-width: 100%; border-top: 1px solid var(--seam, #E3DFD6); border-bottom: 1px solid var(--seam, #E3DFD6); background: #FFFFFF; padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marq-track { display: flex; flex-shrink: 0; gap: 48px; padding-right: 48px; animation: marq 70s linear infinite; }
.marq-track span { font: 500 20px/1 "Geist", system-ui, sans-serif; letter-spacing: -0.02em; color: #8A8D98; white-space: nowrap; }
.marq:hover .marq-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-100%); } }
.playhead { animation: mm-play 4s linear infinite; }
@keyframes mm-play { from { transform: translateX(-118px); } to { transform: translateX(82px); } }
@media (prefers-reduced-motion: reduce) { .marq-track, .playhead { animation: none !important; } }

/* Slower, calmer timing for the design-system animations */
:root { --duration-calm: 520ms; --duration-slow: 1000ms; --stagger: 70ms; }