/* paper-chain.io — Data-forward Editorial design system (shared tokens + components) */
:root{
  --dfe-ink:#0A1C2E; --dfe-ink2:#0D234A; --dfe-blue:#2f6fed; --dfe-blued:#1F4FD8;
  --dfe-green:#16a34a; --dfe-red:#dc2626; --dfe-amber:#d97706; --dfe-teal:#14B8A6;
  --dfe-mut:#5B6B82; --dfe-line:#EDF1F6; --dfe-surf:#F7F9FC; --dfe-card:#FFFFFF;
  --dfe-px:clamp(20px,5vw,64px); --dfe-max:1200px;
  --dfe-ff-head:'Space Grotesk','Sora',system-ui,sans-serif;
  --dfe-ff-body:'Inter',system-ui,sans-serif;
  --dfe-ff-mono:'IBM Plex Mono','JetBrains Mono',monospace;
  --dfe-shadow:0 12px 40px rgba(10,28,46,.10); --dfe-shadow-sm:0 6px 20px rgba(10,28,46,.08);
}
.dfe-wrap{max-width:var(--dfe-max);margin:0 auto;padding:0 var(--dfe-px)}
.dfe-sec{padding:clamp(48px,7vw,88px) 0}
.dfe-sec--tight{padding:clamp(36px,5vw,60px) 0}
.dfe-eyebrow{font-family:var(--dfe-ff-mono);font-size:12px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dfe-blue);margin:0 0 14px}
.dfe-h1{font-family:var(--dfe-ff-head);font-weight:700;font-size:clamp(32px,5vw,54px);line-height:1.06;
  letter-spacing:-.02em;color:var(--dfe-ink);margin:0 0 20px}
.dfe-h2{font-family:var(--dfe-ff-head);font-weight:700;font-size:clamp(26px,3.5vw,34px);line-height:1.15;
  letter-spacing:-.01em;color:var(--dfe-ink);margin:0 0 10px}
.dfe-h3{font-family:var(--dfe-ff-head);font-weight:600;font-size:19px;color:var(--dfe-ink);margin:0 0 6px}
.dfe-accent{color:var(--dfe-blue)}
.dfe-lead{font-family:var(--dfe-ff-body);font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--dfe-mut);margin:0 0 28px;max-width:40em}
.dfe-sub{font-family:var(--dfe-ff-body);font-weight:600;font-size:clamp(18px,2vw,22px);line-height:1.4;color:var(--dfe-ink);margin:0 0 26px;max-width:40em}
/* buttons */
.dfe-cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.dfe-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--dfe-ff-body);
  font-weight:700;font-size:15.5px;border-radius:12px;padding:14px 22px;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;transition:transform .12s ease,box-shadow .12s ease}
.dfe-btn:hover{transform:translateY(-1px)}
.dfe-btn-primary{background:var(--dfe-blue);color:#fff;box-shadow:0 6px 18px rgba(47,111,237,.28)}
.dfe-btn-green{background:var(--dfe-green);color:#fff;box-shadow:0 6px 18px rgba(22,163,74,.28)}
.dfe-btn-outline{background:#fff;color:var(--dfe-ink);border-color:#D5DEEA}
.dfe-btn-ghost{background:none;color:var(--dfe-blue);font-weight:600;padding:14px 6px}
.dfe-btn-dark{background:#12253c;color:#dCE6EF;border-color:#26415f}
/* hero */
.dfe-hero{display:grid;grid-template-columns:1fr 430px;gap:48px;align-items:center}
.dfe-hero-vis{position:relative;min-height:320px}
.dfe-mini{position:absolute;width:210px;border-radius:18px;padding:22px;box-shadow:var(--dfe-shadow);text-align:center}
.dfe-mini-ok{left:0;top:8px;background:#F0FDF4;border:1px solid #BBF7D0}
.dfe-mini-bad{right:0;top:70px;background:#FEF2F2;border:1px solid #FECACA}
.dfe-mini .n{font-family:var(--dfe-ff-head);font-weight:700;font-size:26px}
.dfe-mini .s{font-family:var(--dfe-ff-body);font-weight:800;font-size:13px;letter-spacing:.06em;margin-top:8px}
.dfe-mini .t{font-family:var(--dfe-ff-body);font-size:12px;color:var(--dfe-mut);margin-top:4px}
/* stat strip */
.dfe-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px;max-width:720px}
.dfe-stat{background:var(--dfe-surf);border:1px solid var(--dfe-line);border-radius:14px;padding:18px 20px}
.dfe-stat-n{font-family:var(--dfe-ff-head);font-weight:700;font-size:clamp(22px,2.4vw,28px);color:var(--dfe-ink)}
.dfe-stat-l{font-family:var(--dfe-ff-body);font-size:12.5px;color:var(--dfe-mut);margin-top:4px}
/* section head */
.dfe-head{max-width:44em;margin:0 0 34px}
/* steps */
.dfe-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dfe-step{background:var(--dfe-card);border:1px solid var(--dfe-line);border-radius:16px;padding:24px;box-shadow:var(--dfe-shadow-sm)}
.dfe-step-n{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:var(--dfe-ff-head);font-weight:700;color:#fff;font-size:16px;margin-bottom:18px}
.dfe-step p{font-family:var(--dfe-ff-body);font-size:13.5px;color:var(--dfe-mut);margin:6px 0 0;line-height:1.55}
/* why tiles */
.dfe-why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dfe-tile{background:var(--dfe-card);border:1px solid var(--dfe-line);border-radius:16px;padding:26px;
  box-shadow:var(--dfe-shadow-sm);border-top:4px solid var(--dfe-blue)}
.dfe-tile p{font-family:var(--dfe-ff-body);font-size:13.5px;color:var(--dfe-mut);margin:6px 0 0;line-height:1.55}
/* demo video */
.dfe-demo{background:var(--dfe-ink);border-radius:0}
.dfe-demo-inner{max-width:940px;margin:0 auto;text-align:center;padding:clamp(48px,7vw,80px) var(--dfe-px)}
.dfe-demo .dfe-eyebrow{color:var(--dfe-teal)}
.dfe-demo h2{color:#fff}
.dfe-demo p{color:#c7d4e3;max-width:600px;margin:0 auto 32px;font-family:var(--dfe-ff-body);font-size:16px;line-height:1.6}
.dfe-video{border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.15)}
.dfe-video video{width:100%;display:block}
/* article */
.dfe-article{display:flex;align-items:stretch;border:1px solid var(--dfe-line);border-radius:16px;overflow:hidden;
  background:#fff;box-shadow:var(--dfe-shadow-sm);text-decoration:none}
.dfe-article-logo{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;background:var(--dfe-surf);padding:26px;border-right:1px solid var(--dfe-line)}
.dfe-article-logo img{max-width:100%;max-height:96px;height:auto}
.dfe-article-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:26px 30px}
/* final CTA */
.dfe-cta{background:linear-gradient(135deg,#0A1C2E,#123456);border-radius:24px;padding:clamp(36px,5vw,56px);color:#fff}
.dfe-cta .dfe-eyebrow{color:#7fd1a8}
.dfe-cta h2{color:#fff}
.dfe-cta p{color:#c7d4e3;font-family:var(--dfe-ff-body);font-size:16px;margin:0 0 24px;max-width:44em}
/* responsive */
@media(max-width:980px){
  .dfe-hero{grid-template-columns:1fr;gap:24px}
  .dfe-hero-vis{min-height:0;display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap}
  .dfe-mini{position:static;width:calc(50% - 8px);min-width:180px}
  .dfe-steps{grid-template-columns:repeat(2,1fr)}
  .dfe-why{grid-template-columns:1fr}
}
.dfe-ring{animation:dfe-draw 1.15s cubic-bezier(.22,.61,.36,1) .25s both}
@keyframes dfe-draw{from{stroke-dashoffset:var(--c)}to{stroke-dashoffset:var(--o)}}
@media(prefers-reduced-motion:reduce){.dfe-ring{animation:none;stroke-dashoffset:var(--o)}}
@media(max-width:560px){
  .dfe-stats{grid-template-columns:1fr}
  .dfe-steps{grid-template-columns:1fr}
  .dfe-article{flex-direction:column}
  .dfe-article-logo{border-right:none;border-bottom:1px solid var(--dfe-line)}
  .dfe-mini{width:100%}
}

/* Emoji -> monochrome outline-icon replacements */
.e-ico{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;flex-shrink:0}
.e-ico-dot{width:0.62em;height:0.62em;display:inline-block;vertical-align:0.02em;flex-shrink:0}

/* Home page: What you get — report screenshots */
.dfe-results-grid{display:flex;flex-direction:column;gap:32px;align-items:center;max-width:900px;margin:0 auto}
.dfe-result-frame{background:#fff;border-radius:16px;border:1px solid var(--dfe-line);box-shadow:var(--dfe-shadow);padding:14px;width:100%;display:flex}
.dfe-result-frame img{width:100%;height:auto;display:block;border-radius:6px}
/* The findings report, scrolled slowly from top to bottom on a loop. The travel
   is the image's own height less the window it shows through — a percentage of
   the image plus the fixed window — so it needs no measuring in JS and stays
   right at any width. Hovering pauses it for anyone who wants to read a row. */
.dfe-report-scroll{position:relative;width:100%;height:520px;
  overflow:hidden;border-radius:6px;background:#fff}
/* aspect-ratio gives the image its true height before the bytes arrive. Without
   it a lazily-loaded image measures 0 tall, and the -100% below resolves to 0 —
   so the travel came out POSITIVE and pushed the report down the box, leaving
   white space above it. That only showed on a phone, where the section sits far
   enough below the fold for the browser to defer the fetch until the animation
   is already well into its cycle. */
.dfe-report-scroll img{display:block;width:100%;height:auto;aspect-ratio:1080/2839;
  animation:pc-report-scroll-lg 45s linear infinite}
.dfe-report-scroll:hover img{animation-play-state:paused}
/* min(0px, …) is the belt to that braces: however the height resolves, the
   travel can never be positive, so the image can never move downwards. */
@keyframes pc-report-scroll-lg{
  0%,4%{transform:translateY(0)}
  76%,84%{transform:translateY(min(0px,calc(-100% + 520px)))}
  100%{transform:translateY(0)}
}
/* The window height is written into each keyframe set rather than read from a
   custom property: var() inside @keyframes is resolved inconsistently across
   engines, and this is the one place a phone was reported broken. */
@keyframes pc-report-scroll-sm{
  0%,4%{transform:translateY(0)}
  76%,84%{transform:translateY(min(0px,calc(-100% + 360px)))}
  100%{transform:translateY(0)}
}
@media (max-width:720px){
  .dfe-report-scroll{height:360px}
  .dfe-report-scroll img{animation-name:pc-report-scroll-sm}
}
@media (prefers-reduced-motion:reduce){.dfe-report-scroll img{animation:none}}

/* ── Home hero: document-check animation ───────────────────
   CSS only: no requestAnimationFrame, no inline style writes, no images.
   Seven cards land and are scanned in sequence, then the two result rings
   sweep in below the stack; everything stays on screen for a 3s hold before
   the 17.1s cycle repeats. Off-screen the whole thing is parked by adding
   .pcd-paused (one class toggle from an IntersectionObserver).
   --pcd-n must be inherits:true — the counter is rendered in ::after, which
   cannot see a non-inherited registered property on its originating element. */
@property --pcd-n{syntax:'<integer>';initial-value:0;inherits:true}
.pcd-stage{--pcd-s:1;position:relative;display:flex;flex-direction:column;align-items:center;
 gap:20px;padding-top:56px;width:360px;max-width:100%;margin:0 auto;
 transform:scale(var(--pcd-s));transform-origin:top center;contain:layout paint style}
.pcd-deck{position:relative;width:300px;height:234px}
.pcd-card{position:absolute;inset:0;background:#fff;border:1px solid #E5EAF5;border-radius:12px;
 box-shadow:0 4px 16px rgba(13,35,74,.12);overflow:hidden;opacity:0;animation-duration:17.1s;
 animation-timing-function:cubic-bezier(.22,.68,.32,1);animation-iteration-count:infinite;animation-fill-mode:both}
.pcd-swift{border-color:#cfe0ff}
.pcd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;
 border-bottom:1px solid #E5EAF5;background:#fbfdff}
.pcd-swift .pcd-head{background:#DFEEFF}
.pcd-name{font-family:'Sora','Space Grotesk',system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcd-tag{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:#6B7A99;border:1px solid #E5EAF5;
 border-radius:4px;padding:2px 5px;background:#fff;flex:0 0 auto}
.pcd-body{padding:7px 13px}
.pcd-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:5.5px 0;border-bottom:1px solid #f2f6fc}
.pcd-r:last-child{border-bottom:none}
.pcd-k{font-size:9.5px;color:#6B7A99;flex:0 0 auto}
.pcd-v{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10px;color:#0D234A;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.pcd-flag .pcd-v{color:#dc2626;font-weight:500}
.pcd-flag{background:#fff5f5;margin:0 -13px;padding:5.5px 13px;border-bottom-color:#f8d2d2}
.pcd-scan{position:absolute;left:0;right:0;top:0;height:26px;opacity:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(0,196,180,0),rgba(0,196,180,.20) 45%,rgba(0,196,180,.55) 50%,rgba(0,196,180,.20) 55%,rgba(0,196,180,0));
 animation-duration:17.1s;animation-timing-function:cubic-bezier(.4,0,.5,1);animation-iteration-count:infinite;animation-fill-mode:both}
.pcd-tick{position:absolute;right:10px;bottom:9px;width:20px;height:20px;border-radius:50%;background:#16A34A;
 color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;animation-duration:17.1s;
 animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-iteration-count:infinite;animation-fill-mode:both}

/* ── results: a row BELOW the stack ─────── */
.pcd-results{display:flex;gap:12px;justify-content:center;width:100%}
.pcd-res{width:174px;padding:16px 13px 14px;border-radius:16px;text-align:center;
 box-shadow:0 10px 26px rgba(13,35,74,.13);opacity:0;
 animation-duration:17.1s;animation-timing-function:cubic-bezier(.34,1.3,.64,1);
 animation-iteration-count:infinite;animation-fill-mode:both}
.pcd-res.pcd-ok{background:#f3fcf6;border:1px solid #cdeed8;animation-name:pcd-res-ok}
.pcd-res.pcd-bad{background:#fff5f5;border:1px solid #f8d2d2;animation-name:pcd-res-bad}
.pcd-ring{position:relative;width:78px;height:78px;margin:0 auto}
.pcd-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pcd-ring .pcd-trk{fill:none;stroke:#E5EAF5;stroke-width:11}
.pcd-ring .pcd-val{fill:none;stroke-width:11;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16;
 animation-duration:17.1s;animation-timing-function:cubic-bezier(.3,.7,.3,1);animation-iteration-count:infinite;animation-fill-mode:both}
.pcd-ok .pcd-val{stroke:#16a34a;animation-name:pcd-ring-ok} .pcd-bad .pcd-val{stroke:#dc2626;animation-name:pcd-ring-bad}
.pcd-rv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 font:700 22px 'Space Grotesk',sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
 animation-duration:17.1s;animation-timing-function:cubic-bezier(.3,.7,.3,1);animation-iteration-count:infinite;animation-fill-mode:both}
.pcd-ok .pcd-rv{color:#16a34a;animation-name:pcd-n-ok} .pcd-bad .pcd-rv{color:#dc2626;animation-name:pcd-n-bad}
.pcd-rv::after{counter-reset:pcdn var(--pcd-n);content:counter(pcdn) '%'}
.pcd-lbl{font:700 11.5px 'JetBrains Mono',monospace;letter-spacing:.14em;margin-top:10px}
.pcd-ok .pcd-lbl{color:#16a34a} .pcd-bad .pcd-lbl{color:#dc2626}
.pcd-sub{font:500 10px/1.45 'Inter',system-ui,sans-serif;color:#5B6B82;margin-top:4px}

.pcd-c0{z-index:2;animation-name:pcd-card-0}
.pcd-c0 .pcd-scan{animation-name:pcd-scan-0}
.pcd-c0 .pcd-tick{animation-name:pcd-tick-0}
.pcd-c1{z-index:3;animation-name:pcd-card-1}
.pcd-c1 .pcd-scan{animation-name:pcd-scan-1}
.pcd-c1 .pcd-tick{animation-name:pcd-tick-1}
.pcd-c2{z-index:4;animation-name:pcd-card-2}
.pcd-c2 .pcd-scan{animation-name:pcd-scan-2}
.pcd-c2 .pcd-tick{animation-name:pcd-tick-2}
.pcd-c3{z-index:5;animation-name:pcd-card-3}
.pcd-c3 .pcd-scan{animation-name:pcd-scan-3}
.pcd-c3 .pcd-tick{animation-name:pcd-tick-3}
.pcd-c4{z-index:6;animation-name:pcd-card-4}
.pcd-c4 .pcd-scan{animation-name:pcd-scan-4}
.pcd-c4 .pcd-tick{animation-name:pcd-tick-4}
.pcd-c5{z-index:7;animation-name:pcd-card-5}
.pcd-c5 .pcd-scan{animation-name:pcd-scan-5}
.pcd-c5 .pcd-tick{animation-name:pcd-tick-5}
.pcd-c6{z-index:8;animation-name:pcd-card-6}
.pcd-c6 .pcd-scan{animation-name:pcd-scan-6}
.pcd-c6 .pcd-tick{animation-name:pcd-tick-6}

@keyframes pcd-card-0{
 0%,0.0% {opacity:0;transform:translate3d(-20px,54px,0) scale(.96)}
 3.509% ,94.737% {opacity:1;transform:translate3d(0px,0px,0) scale(1)}
 100% {opacity:0;transform:translate3d(0px,-10px,0) scale(.97)}
}
@keyframes pcd-card-1{
 0%,9.357% {opacity:0;transform:translate3d(-15px,54px,0) scale(.96)}
 12.865% ,94.737% {opacity:1;transform:translate3d(5px,-8px,0) scale(1)}
 100% {opacity:0;transform:translate3d(5px,-18px,0) scale(.97)}
}
@keyframes pcd-card-2{
 0%,18.713% {opacity:0;transform:translate3d(-10px,54px,0) scale(.96)}
 22.222% ,94.737% {opacity:1;transform:translate3d(10px,-16px,0) scale(1)}
 100% {opacity:0;transform:translate3d(10px,-26px,0) scale(.97)}
}
@keyframes pcd-card-3{
 0%,28.07% {opacity:0;transform:translate3d(-5px,54px,0) scale(.96)}
 31.579% ,94.737% {opacity:1;transform:translate3d(15px,-24px,0) scale(1)}
 100% {opacity:0;transform:translate3d(15px,-34px,0) scale(.97)}
}
@keyframes pcd-card-4{
 0%,37.427% {opacity:0;transform:translate3d(0px,54px,0) scale(.96)}
 40.936% ,94.737% {opacity:1;transform:translate3d(20px,-32px,0) scale(1)}
 100% {opacity:0;transform:translate3d(20px,-42px,0) scale(.97)}
}
@keyframes pcd-card-5{
 0%,46.784% {opacity:0;transform:translate3d(5px,54px,0) scale(.96)}
 50.292% ,94.737% {opacity:1;transform:translate3d(25px,-40px,0) scale(1)}
 100% {opacity:0;transform:translate3d(25px,-50px,0) scale(.97)}
}
@keyframes pcd-card-6{
 0%,56.14% {opacity:0;transform:translate3d(10px,54px,0) scale(.96)}
 59.649% ,94.737% {opacity:1;transform:translate3d(30px,-48px,0) scale(1)}
 100% {opacity:0;transform:translate3d(30px,-58px,0) scale(.97)}
}
@keyframes pcd-scan-0{
 0%,2.339% {opacity:0;transform:translate3d(0,0,0)}
 2.69% {opacity:1}
 7.544% {opacity:1}
 7.895%,100% {opacity:0;transform:translate3d(0,206px,0)}
}
@keyframes pcd-scan-1{
 0%,11.696% {opacity:0;transform:translate3d(0,0,0)}
 12.047% {opacity:1}
 16.901% {opacity:1}
 17.251%,100% {opacity:0;transform:translate3d(0,206px,0)}
}
@keyframes pcd-scan-2{
 0%,21.053% {opacity:0;transform:translate3d(0,0,0)}
 21.404% {opacity:1}
 26.257% {opacity:1}
 26.608%,100% {opacity:0;transform:translate3d(0,206px,0)}
}
@keyframes pcd-scan-3{
 0%,30.409% {opacity:0;transform:translate3d(0,0,0)}
 30.76% {opacity:1}
 35.614% {opacity:1}
 35.965%,100% {opacity:0;transform:translate3d(0,206px,0)}
}
@keyframes pcd-scan-4{
 0%,39.766% {opacity:0;transform:translate3d(0,0,0)}
 40.117% {opacity:1}
 44.971% {opacity:1}
 45.322%,100% {opacity:0;transform:translate3d(0,206px,0)}
}
@keyframes pcd-scan-5{
 0%,49.123% {opacity:0;transform:translate3d(0,0,0)}
 49.474% {opacity:1}
 54.327% {opacity:1}
 54.678%,100% {opacity:0;transform:translate3d(0,206px,0)}
}
@keyframes pcd-scan-6{
 0%,58.48% {opacity:0;transform:translate3d(0,0,0)}
 58.83% {opacity:1}
 63.684% {opacity:1}
 64.035%,100% {opacity:0;transform:translate3d(0,206px,0)}
}
@keyframes pcd-tick-0{
 0%,7.193% {opacity:0;transform:scale(.5)}
 8.947% ,94.737% {opacity:1;transform:scale(1)}
 100% {opacity:0;transform:scale(1)}
}
@keyframes pcd-tick-1{
 0%,16.55% {opacity:0;transform:scale(.5)}
 18.304% ,94.737% {opacity:1;transform:scale(1)}
 100% {opacity:0;transform:scale(1)}
}
@keyframes pcd-tick-2{
 0%,25.906% {opacity:0;transform:scale(.5)}
 27.661% ,94.737% {opacity:1;transform:scale(1)}
 100% {opacity:0;transform:scale(1)}
}
@keyframes pcd-tick-3{
 0%,35.263% {opacity:0;transform:scale(.5)}
 37.018% ,94.737% {opacity:1;transform:scale(1)}
 100% {opacity:0;transform:scale(1)}
}
@keyframes pcd-tick-4{
 0%,44.62% {opacity:0;transform:scale(.5)}
 46.374% ,94.737% {opacity:1;transform:scale(1)}
 100% {opacity:0;transform:scale(1)}
}
@keyframes pcd-tick-5{
 0%,53.977% {opacity:0;transform:scale(.5)}
 55.731% ,94.737% {opacity:1;transform:scale(1)}
 100% {opacity:0;transform:scale(1)}
}
@keyframes pcd-tick-6{
 0%,63.333% {opacity:0;transform:scale(.5)}
 65.088% ,94.737% {opacity:1;transform:scale(1)}
 100% {opacity:0;transform:scale(1)}
}
@keyframes pcd-res-ok{
 0%,66.959% {opacity:0;transform:translate3d(0,16px,0) scale(.88)}
 70.175% ,94.737% {opacity:1;transform:translate3d(0,0,0) scale(1)}
 100% {opacity:0;transform:translate3d(0,-6px,0) scale(.98)}
}
@keyframes pcd-res-bad{
 0%,69.883% {opacity:0;transform:translate3d(0,16px,0) scale(.88)}
 73.099% ,94.737% {opacity:1;transform:translate3d(0,0,0) scale(1)}
 100% {opacity:0;transform:translate3d(0,-6px,0) scale(.98)}
}
@keyframes pcd-ring-ok{0%,68.129%{stroke-dashoffset:314.16}75.439%,100%{stroke-dashoffset:65.97}}
@keyframes pcd-ring-bad{0%,71.053%{stroke-dashoffset:314.16}78.363%,100%{stroke-dashoffset:248.19}}
@keyframes pcd-n-ok{0%,68.129%{--pcd-n:0}75.439%,100%{--pcd-n:79}}
@keyframes pcd-n-bad{0%,71.053%{--pcd-n:0}78.363%,100%{--pcd-n:21}}

.pcd-paused .pcd-card,.pcd-paused .pcd-scan,.pcd-paused .pcd-tick,
.pcd-paused .pcd-res,.pcd-paused .pcd-val,.pcd-paused .pcd-rv{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
 .pcd-card,.pcd-scan,.pcd-tick,.pcd-res,.pcd-val,.pcd-rv{animation:none!important}
 .pcd-card{opacity:1} .pcd-scan{display:none} .pcd-tick{opacity:1}
 .pcd-res{opacity:1;transform:none}
 .pcd-ok .pcd-val{stroke-dashoffset:65.97} .pcd-bad .pcd-val{stroke-dashoffset:248.19}
 .pcd-ok .pcd-rv{--pcd-n:79} .pcd-bad .pcd-rv{--pcd-n:21}
 .pcd-c0{transform:translate3d(0px,0px,0)}
 .pcd-c1{transform:translate3d(5px,-8px,0)}
 .pcd-c2{transform:translate3d(10px,-16px,0)}
 .pcd-c3{transform:translate3d(15px,-24px,0)}
 .pcd-c4{transform:translate3d(20px,-32px,0)}
 .pcd-c5{transform:translate3d(25px,-40px,0)}
 .pcd-c6{transform:translate3d(30px,-48px,0)}
}

/* Narrow phones: the stage is 360px wide, so scale it down rather than let it
   overflow, and pull the slack back off the bottom (stage height ~478px). */
@media(max-width:430px){.pcd-stage{--pcd-s:.90;margin-bottom:calc((var(--pcd-s) - 1) * 478px)}}
@media(max-width:370px){.pcd-stage{--pcd-s:.78}}

/* ── Trusted across industries ─────────────────────────────
   A seamless marquee: the track holds the seven items twice and slides a
   whole half-width, so the moment the copy reaches the original's start the
   animation restarts on an identical frame and the join is invisible.
   Direction is left-to-right, so the track starts shifted back by that half
   and travels to zero. Width and height are set on every image because a
   lazily-loaded image with no intrinsic size collapses the row to nothing and
   then shoves the page down when it arrives — the bug the home page's report
   animation hit before. */
.pc-industries{background:#fff;border-bottom:1px solid var(--dfe-line);overflow:hidden}
.pc-industries .dfe-sub{font-weight:500;font-size:clamp(15px,1.6vw,17px);color:var(--dfe-ink-2,#586A79);margin:0}
.pc-marquee{position:relative;overflow:hidden;padding:8px 0 4px;
            -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
                    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pc-marquee-track{display:flex;align-items:center;gap:clamp(20px,3.5vw,44px);
                  width:max-content;margin:0;padding:0;list-style:none;
                  transform:translate3d(-50%,0,0);
                  animation:pc-ind-scroll 46s linear infinite;will-change:transform}
.pc-marquee:hover .pc-marquee-track,
.pc-marquee:focus-within .pc-marquee-track{animation-play-state:paused}
@keyframes pc-ind-scroll{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* The industry name is drawn into the artwork, taking about a ninth of the
   square, so the tile has to be large enough for those words to read — at the
   148px the icons alone needed, the caption came out around 10px. */
.pc-ind-item{flex:0 0 auto;width:clamp(140px,17vw,200px);text-align:center}
.pc-ind-item img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
@media (prefers-reduced-motion:reduce){
  /* Standing still, the duplicated half would read as the list repeating, so
     the track is laid out as a centred wrap and the copy is hidden. */
  .pc-marquee{-webkit-mask-image:none;mask-image:none}
  .pc-marquee-track{animation:none;transform:none;width:auto;flex-wrap:wrap;justify-content:center;gap:24px}
  .pc-ind-item[aria-hidden="true"]{display:none}
}