/* 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-size:15px;color:var(--dfe-mut);margin:0 0 26px;max-width:46em}
/* 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}