/* ==========================================================================
   GetNFC — the tap picture
   A still illustration. No animation and no scripting: it draws once and
   stays put, which keeps it quick on a slow phone and calm to look at.
   ========================================================================== */

.demo{
  margin:0;
  background:linear-gradient(160deg,#F7F9FD 0%,#EAF0FA 100%);
  border:1px solid rgba(11,36,71,.1);
  border-radius:var(--radius-lg,22px);
  padding:18px 18px 4px;
  box-shadow:var(--shadow,0 14px 40px -22px rgba(15,23,42,.28));
}

.dark .demo{
  background:linear-gradient(160deg,rgba(248,250,252,.09) 0%,rgba(248,250,252,.03) 100%);
  border-color:rgba(248,250,252,.16);
  box-shadow:none;
}

.demo .scene{
  display:block;
  width:100%;
  height:auto;
  max-height:min(62vh,540px);
}

.demo__cap{
  max-width:46ch;
  margin:6px auto 16px;
  padding:0 6px;
  text-align:center;
  font-size:14.5px;
  line-height:1.5;
  color:var(--muted,#57667F);
}

.dark .demo__cap{color:var(--hero-muted,#A6BCDA)}

/* the three small pages on the tap page */
.minis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:22px;
  margin-top:28px;
}

.mini{
  margin:0;
  background:var(--surface,#fff);
  border:1px solid var(--border,#E2E8F0);
  border-radius:var(--radius,16px);
  padding:18px 18px 12px;
  text-align:center;
}

.mini svg{display:block;width:100%;height:auto;max-width:180px;margin:0 auto}

.mini figcaption{
  margin-top:12px;
  font-family:Manrope,system-ui,sans-serif;
  font-weight:700;
  font-size:15px;
}

@media (max-width:640px){
  .demo{padding:12px 12px 2px}
  .demo .scene{max-height:none}
}

/* the four steps under the picture */
.stages{
  display:grid;gap:1px;margin-top:34px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--border);overflow:hidden;
}
@media (min-width:800px){.stages{grid-template-columns:repeat(4,1fr)}}
.stage{background:var(--surface);padding:24px 22px}
.stage b{font-family:"Manrope",sans-serif;font-size:17px;display:block;margin-bottom:8px}
.stage p{color:var(--muted);font-size:15.5px}
.stage em{
  font-style:normal;font-size:12.5px;font-weight:600;
  color:var(--brand-deep);display:block;margin-bottom:10px;
}

:root[data-theme="dark"] .demo:not(.dark .demo){background:linear-gradient(160deg,#111B2D 0%,#0D1626 100%);border-color:var(--border)}