/* How it works, Privacy and the end: the page below the hero (styles.css has the base). */

/* ─── How it works ─── */
.section { padding-block: clamp(84px, 11vw, 150px); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(40px, 6vw, 72px); }
.step { background: var(--tile); padding: 12px 12px 30px; border-radius: 3px; }
.step > :not(.frag) { padding-inline: 10px; }
.num { display: block; color: var(--orange); font-size: 14px; }
.step h3 { font-size: 28px; margin: 8px 0 12px; }
.step p { color: var(--note); }
.frag { position: relative; height: 230px; margin-bottom: 26px; background: var(--bg); border-radius: 2px; overflow: hidden; display: grid; place-items: center; }

.frag.scan { background: var(--scan); }
.finder { position: relative; width: 168px; aspect-ratio: 1; display: grid; place-items: center; }
.finder::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--paper);
  mask: conic-gradient(at 26px 26px, #0000 75%, #000 0) 0 0 / calc(100% - 26px) calc(100% - 26px); }
.finder svg { width: 112px; fill: var(--paper); opacity: .9; shape-rendering: crispEdges; }
.finder i { position: absolute; left: 10px; right: 10px; top: 10px; height: 2px; background: var(--orange); animation: scanline 2.6s ease-in-out infinite alternate; }
@keyframes scanline { to { top: calc(100% - 12px); } }

.pay-in, .split-in { width: 100%; padding: 0 18px; }
.pay-amt { font-size: 38px; color: var(--orange); margin: 2px 0 26px; }
.pay-amt small { font-size: .58em; }
.slider { position: relative; height: 57px; background: var(--tile); border-radius: 3px; display: grid; place-items: center; font-weight: 600; font-size: 15px; overflow: hidden; }
.slider b { position: absolute; left: 4px; top: 4px; width: 49px; height: 49px; display: grid; place-items: center; background: var(--paper); color: var(--ink); border-radius: 2px; font-weight: 400; animation: slide 3.4s cubic-bezier(.65, 0, .25, 1) infinite; }
.slider span { animation: fade 3.4s infinite; }
@keyframes slide { 0%, 25% { left: 4px; } 62%, 88% { left: calc(100% - 53px); } 100% { left: 4px; } }
@keyframes fade { 0%, 25% { opacity: 1; } 55%, 92% { opacity: 0; } }

.chips { display: flex; gap: 5px; margin-bottom: 16px; }
.chips span { flex: 1 1 auto; display: grid; place-items: center; height: 40px; padding: 0 8px; background: var(--chip); font-size: 13px; font-weight: 500; border-radius: 2px; white-space: nowrap; }
.chips .on { background: var(--paper); color: var(--ink); }
.row { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; }
.row p { line-height: 1.3; }
.row .wide { font-size: 15px; }

/* ─── Privacy ─── */
.paper { background: var(--paper); color: var(--ink); }
.paper .eyebrow { color: var(--ink-2); }
.paper .num { color: #b8501e; } /* orange, darkened to read on paper */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 5vw, 80px); margin-top: clamp(40px, 6vw, 72px); }
.fact { padding: 22px 0 38px; border-top: 1.4px solid var(--ink); }
.fact .num { margin-bottom: 18px; }
.fact dt { font-size: clamp(20px, 1.9vw, 24px); font-weight: 400; letter-spacing: -.08em; margin-bottom: 10px; }
.fact dd { color: var(--ink-2); max-width: 30em; }

/* ─── End ─── */
.end { position: relative; overflow: hidden; }
.end .glow { --r: clamp(180px, 24vw, 340px); right: 0; left: auto; top: 50%; width: 0; }
.end h2 { font-size: clamp(40px, 7vw, 96px); margin-bottom: 40px; position: relative; }
.end .soon { background: var(--paper); color: var(--ink); position: relative; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-block: 34px 44px; border-top: 1px solid #333; }
.foot .caption { max-width: 46em; }

@media (max-width: 900px) {
  .hero-grid, .steps, .facts { grid-template-columns: minmax(0, 1fr); }
  .end .glow { --r: 160px; top: 90%; }
  .try { justify-self: stretch; max-width: 520px; }
  .try .glow { --r: 190px; left: 92%; top: 55%; }
  .nav-links a:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { transform: none; }
}