/* ─── pages/feature.css ─ feature / endpoint pages (layouts/feature.njk).
   Sections reuse site.css components (steps, record cards, JSON sample, plan
   cards, FAQ, final CTA); these rules add the breadcrumb, the lookup demo
   console, the stats row and the few layout tweaks those pages need. ── */

/* Breadcrumb, above the hero */
.crumbs { padding-top: 24px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 12px/1 var(--font-mono); letter-spacing: .4px; color: var(--fg-muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--fg-subdued); }
.crumbs a { color: var(--fg-muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current] { color: var(--fg-secondary); }
.page-feature .stage { padding-top: 40px; }

/* Lookup demo under the hero: a dashed card like the plan cards, with a
   search field, a status line and the resolved profile */
.ft-demo {
  position: relative; width: 100%; max-width: 760px; margin: 48px auto 0;
  padding: 28px 28px 12px; border: 1px dashed var(--brand); background: var(--bg-base);
}
.ft-demo-label { margin: 0 0 8px; font: 700 11px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--hint); }
.ft-demo-in {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--brand); background: var(--bg-elevated);
  font: 400 14px/1.4 var(--font-mono); color: var(--fg-primary);
}
.ft-demo-icon {
  width: 14px; height: 14px; flex-shrink: 0; background: var(--brand);
  -webkit-mask: url('/assets/icons/search.svg') center/contain no-repeat;
  mask: url('/assets/icons/search.svg') center/contain no-repeat;
}
.ft-demo-in b { font-weight: 400; min-height: 1.4em; }
.ft-demo-ok { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font: 700 12px/1 var(--font-mono); letter-spacing: .6px; text-transform: uppercase; color: var(--success); }
.ft-demo .ff-row:last-child { border-bottom: none; }
.ft-demo-mark { width: 8px; height: 8px; flex-shrink: 0; background: var(--success); }
.ft-demo-caret { display: inline-block; width: 2px; height: 16px; margin-left: -8px; background: var(--brand); opacity: 0; }

/* Simulated lookup (site.js "Feature lookup demo"): types the address, shows
   "resolving", then reveals the profile row by row. .is-armed is only ever
   added by JS, so without JS (or with reduced motion) the finished profile
   is simply there. Rows cut in, no fades - same as the site's other reveals. */
.ft-demo.is-typing .ft-demo-caret { animation: ft-blink 640ms steps(1) infinite; }
.ft-demo.is-looking .ft-demo-mark { background: var(--brand); animation: ft-blink 560ms steps(1) infinite; }
@keyframes ft-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.ft-demo.is-armed .ft-demo-rows .ff-row { visibility: hidden; }
.ft-demo.is-armed .ft-demo-rows .ff-row.show { visibility: visible; }
.ft-demo.is-armed .ft-demo-ok { visibility: hidden; }
.ft-demo.is-armed.is-looking .ft-demo-ok, .ft-demo.is-armed.is-done .ft-demo-ok { visibility: visible; }
.ft-demo.is-looking .ft-demo-ok { color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .ft-demo.is-armed .ft-demo-rows .ff-row, .ft-demo.is-armed .ft-demo-ok { visibility: visible; }
  .ft-demo .ft-demo-caret { display: none; }
}

/* "Other tools" beside the intro copy */
.ft-sub { margin: 0 0 14px; font: 700 11px/1 var(--font-mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--hint); }
.ft-tool { align-items: start; }
.ft-tool b { color: var(--fg-primary); }
.ft-tool a { white-space: nowrap; }

/* Record-card grid widths */
.recs--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.recs--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ft-link-card { color: inherit; transition: border-color 100ms steps(2); }
.ft-link-card:hover { border-color: var(--brand); }
.ft-link-card:hover .rec-h { color: var(--fg-primary); }
.ft-go { margin-top: auto; font: 700 11px/1 var(--font-mono); letter-spacing: .8px; text-transform: uppercase; color: var(--brand); }

/* Stats row on the orange band */
.ft-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.ft-stat { display: flex; flex-direction: column; gap: 10px; }
.ft-stat-v { font: 800 48px/1 var(--font-mono); letter-spacing: -1.5px; color: var(--ink); }
.ft-stat-l { font: 400 14px/20px var(--font-mono); color: var(--ink-body); }

/* Profile checklist (plan-card ticks, full width) and the code sample label */
.ft-feats { margin-top: 24px; border-top: 1px dashed var(--brand-line); }
.ft-feats .p-feat { font-size: 14px; line-height: 20px; }
.page-feature .faq-more { line-height: 1.6; }   /* the shared style assumes one short line */
.ft-code-h { margin: 0 0 10px; font: 700 12px/1 var(--font-mono); letter-spacing: .4px; color: var(--fg-secondary); }
.page-feature .sec-body code, .page-feature .step code, .page-feature .faq-a code { font: inherit; color: var(--fg-secondary); }

@media (max-width:1040px) {
  .recs--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .recs--3, .recs--2 { grid-template-columns: 1fr; }
  .ft-stats { grid-template-columns: 1fr; gap: 28px; }
  .ft-stat-v { font-size: 40px; }
  .ft-demo { padding: 20px 16px 8px; }
}