/* =====================================================================
   Fieldtone · page pieces (Needle industry template)
   Load after needle.css. Prefix ft-.
   ===================================================================== */
.ft-pay { display: grid; gap: 16px; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
.ft-pay label { display: grid; gap: 10px; font: 600 15px/1.3 var(--body); }
.ft-pay output { font: 700 22px/1.2 var(--display); }
.ft-pay [data-ft-out] { padding: 14px 16px; border-radius: var(--r-m); background: var(--volt); color: var(--volt-ink); font: 500 16px/1.45 var(--body); }
.ft-pay [data-ft-out] b { font: 800 20px/1.2 var(--display); }
.ft-steps { display: grid; gap: 0; counter-reset: st; }
.ft-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding-bottom: 20px; counter-increment: st; }
.ft-steps li::before { content: counter(st); grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--amp-soft); color: var(--amp); font: 600 14px/1 var(--mono); }
.ft-steps b { font: 700 17px/1.35 var(--display); padding-top: 4px; }
.ft-steps p { font-size: 15px; color: var(--ink-2); }
.ft-credits { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 15px; }
.ft-credits dt { font: 600 12px/1.6 var(--mono); color: var(--muted); }