/* ─── /features/ landing page ─────────────────────────────────────────────────
   Featured bento (src/features.html): a hero with a stat strip, a full-width
   flagship card, then rows of two and three cards, each with its own small
   preview, and a closing list of every other feature. Cards are solid panels
   with a hairline border; the flagship carries a warm tint.
   ─────────────────────────────────────────────────────────────────────────── */
/* Panel tokens (--fx-panel, --r-lg ...) are shared with the feature pages
   and live in site.css. Pills and the round avatar keep circular ends. */
@supports (corner-shape: squircle) {
  .fx * { corner-shape: squircle; }
  .fx .fx-pills span, .fx .fx-avatar--round { corner-shape: round; }
}
.fx .is-brand { color: var(--brand); }
.fx .is-ok { color: var(--success); }
.fx .is-hi { color: var(--fg-primary); }

/* Hero: headline left, stat strip right */
.fx-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 40px;
  padding: 72px 0 48px;
}
.fx-h1 { margin: 0; font: 800 clamp(40px, 5.6vw, 68px)/1.02 var(--font-mono); letter-spacing: -1.5px; color: var(--fg-primary); }
.fx-h1 .eyebrow { display: block; margin-bottom: 22px; color: var(--brand); letter-spacing: 1.6px; }
.fx-lede { margin: 22px 0 0; max-width: 44ch; font: 400 15px/24px var(--font-mono); color: var(--fg-muted); }
.fx-stats {
  margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--fx-line-2); border-radius: var(--r-lg); background: var(--fx-panel); overflow: hidden;
}
.fx-stats > div { padding: 18px 18px 20px; }
.fx-stats > div + div { border-left: 1px solid var(--fx-line-2); }
.fx-stats dt { font: 800 18px/1 var(--font-mono); color: var(--fg-primary); }
.fx-stats dd { margin: 10px 0 0; font: 400 12px/1.45 var(--font-mono); color: var(--fg-muted); }

/* Bento: six columns so rows can hold one, two or three cards */
.fx-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding-bottom: 72px; }
.fx-card {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 26px; border: 1px solid var(--fx-line-2); border-radius: var(--r-lg); background: var(--fx-panel);
  transition: border-color .2s;
}
.fx-card:hover { border-color: var(--brand-line-strong); }
.fx-card--half { grid-column: span 3; }
.fx-card--third { grid-column: span 2; }

.fx-k { margin: 0 0 12px; font: 700 10px/1.4 var(--font-mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-muted); }
.fx-k b { color: var(--brand); font-weight: 700; }
.fx-h { margin: 0; font: 800 20px/1.2 var(--font-mono); letter-spacing: -.2px; color: var(--fg-primary); }
.fx-h--lg { font-size: 28px; }
.fx-body { margin: 12px 0 0; max-width: 56ch; font: 400 13px/21px var(--font-mono); color: var(--fg-muted); }

/* Explore link: stretched over the whole card */
.fx-go { margin-top: auto; padding-top: 22px; font: 700 11px/1 var(--font-mono); letter-spacing: .4px; color: var(--brand); }
.fx-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fx-go:hover { color: var(--brand-tint); }

/* Preview panel inside a card */
.fx-vis { margin-top: 20px; padding: 18px; border: 1px solid var(--fx-line-2); border-radius: var(--r-md); background: var(--fx-inset); }

/* ── Flagship ──────────────────────────────────────────────────────────────── */
.fx-flag {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px;
  padding: 34px 32px; border-color: var(--fx-line-2);
  background: linear-gradient(rgba(244,128,93,.06), rgba(244,128,93,.06)), var(--fx-panel);
}
.fx-flag .fx-k { color: var(--fg-muted); }
.fx-tabs { margin-top: 20px; }
.fx-tab-list { display: none; }
.fx-tabs.is-tabbed .fx-tab-list {
  display: inline-flex; gap: 4px; margin-bottom: 12px; padding: 4px;
  border: 1px solid var(--fx-line-2); border-radius: var(--r-md); background: var(--fx-inset);
}
.fx-tab-list [role="tab"] {
  height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-xs); background: transparent; cursor: pointer;
  font: 700 11px/1 var(--font-mono); color: var(--fg-muted);
}
.fx-tab-list [role="tab"]:hover { color: var(--fg-primary); }
.fx-tab-list [role="tab"][aria-selected="true"] { background: var(--fx-line-2); color: var(--fg-primary); }
.fx-tab-panel + .fx-tab-panel { margin-top: 12px; }
.fx-tabs.is-tabbed .fx-tab-panel + .fx-tab-panel { margin-top: 0; }
.fx-code {
  margin: 0; padding: 16px 18px; border: 1px solid var(--fx-line-2); border-radius: var(--r-md); background: var(--fx-inset);
  font: 400 12px/1.75 var(--font-mono); color: var(--fg-secondary); white-space: pre-wrap; overflow-wrap: anywhere;
}
.fx-code s { text-decoration: none; color: var(--brand); }
.fx-code i { font-style: normal; color: var(--fg-muted); }
.fx-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.fx-btn {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1px solid var(--brand); border-radius: var(--r-sm);
  background: var(--brand); font: 700 12px/1 var(--font-mono); color: var(--bg-base);
}
.fx-btn:hover { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--bg-base); }
.fx-btn--ghost { background: var(--fx-inset); border-color: var(--fx-line-2); color: var(--fg-primary); }
.fx-btn--ghost:hover { background: var(--fx-inset); border-color: var(--brand); color: var(--brand); }

.fx-resp-h { display: flex; justify-content: space-between; margin: 0 0 12px; font: 700 10px/1.4 var(--font-mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-muted); }
.fx-resp { margin: 0; border: 1px solid var(--fx-line-2); border-radius: var(--r-md); background: var(--fx-inset); overflow: hidden; }
.fx-resp > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px; }
.fx-resp > div + div { border-top: 1px solid var(--fx-line); }
.fx-resp dt { font: 700 10px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--fg-muted); }
.fx-resp dd { margin: 0; font: 400 12px/1.4 var(--font-mono); color: var(--fg-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-resp dd.is-brand { color: var(--brand); font-weight: 700; }
.fx-grade {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-xs);
  background: var(--fx-ok-bg); font: 800 10px/1 var(--font-mono); color: var(--success);
}
.fx-tag { font: 700 10px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; }

/* ── Company team: domain over three people ───────────────────────────────── */
.fx-team { display: flex; flex-direction: column; align-items: center; }
.fx-team-root {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 14px; border: 1px solid var(--brand); border-radius: var(--r-sm); background: var(--fx-panel);
}
.fx-team-root b { font: 700 12px/1 var(--font-mono); color: var(--fg-primary); }
.fx-team-root span, .fx-team-row span { font: 400 9px/1 var(--font-mono); letter-spacing: .8px; text-transform: uppercase; color: var(--fg-muted); }
.fx-team-row {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 30px;
}
/* connector: stem from the domain, then a rail across */
.fx-team-row::before { content: ""; position: absolute; left: 50%; top: -30px; height: 16px; border-left: 1px solid var(--fx-line-2); }
.fx-team-row::after { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: -14px; border-top: 1px solid var(--fx-line-2); }
.fx-team-row > div {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--fx-line-2); border-radius: var(--r-sm); background: var(--fx-panel);
}
.fx-team-row b { font: 700 12px/1.2 var(--font-mono); color: var(--fg-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-team-row i { font: 400 10px/1 var(--font-mono); font-style: normal; color: var(--success); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ── B2B search: filter pills and a count ─────────────────────────────────── */
.fx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-pills span {
  padding: 6px 10px; border: 1px solid var(--fx-line-2); border-radius: 999px; background: var(--fx-panel);
  font: 700 11px/1 var(--font-mono); color: var(--fg-primary);
}
.fx-pills span.is-dim { font-weight: 400; color: var(--fg-muted); }
.fx-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 18px 0 0; }
.fx-count b { font: 800 48px/1 var(--font-mono); letter-spacing: -1px; color: var(--brand); }
.fx-count span { font: 400 13px/1 var(--font-mono); color: var(--fg-secondary); }
.fx-count i { margin-left: auto; font: 700 10px/1 var(--font-mono); font-style: normal; letter-spacing: 1px; text-transform: uppercase; }

/* ── Small previews: grade, IP and reverse email ──────────────────────────── */
.fx-mini { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fx-mini > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-mini b { font: 700 12px/1.3 var(--font-mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-mini small { font: 400 11px/1.3 var(--font-mono); color: var(--fg-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-big-grade {
  display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border: 1px solid rgba(52,211,153,.3); border-radius: var(--r-md);
  background: var(--fx-ok-bg); font: 800 28px/1 var(--font-mono); color: var(--success);
}
.fx-stack { display: flex; flex-direction: column; gap: 12px; }
.fx-stack code { font: 400 11px/1.3 var(--font-mono); color: var(--fg-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-avatar {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--fx-line-2); font: 700 11px/1 var(--font-mono); color: var(--fg-primary);
}
.fx-avatar--round { border-radius: 50%; }

/* ── Second rows: profile chips, compact response, tiles, CRM logos ───────── */
.fx-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fx-chips span {
  display: block; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--fx-line-2); border-radius: var(--r-sm); background: var(--fx-panel);
  font: 400 11px/1.2 var(--font-mono); color: var(--fg-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.fx-chips i, .fx-tiles span { font: 400 9px/1 var(--font-mono); font-style: normal; letter-spacing: .8px; text-transform: uppercase; color: var(--fg-muted); }
.fx-chips i { display: block; margin-bottom: 5px; }
.fx-chips em { margin-left: 4px; font-style: normal; font-weight: 800; color: var(--success); }
.fx-resp--sm > div { min-height: 36px; grid-template-columns: 7.5em minmax(0, 1fr) auto; }
.fx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fx-tiles > div {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px;
  border: 1px solid var(--fx-line-2); border-radius: var(--r-sm); background: var(--fx-panel);
}
.fx-tiles b { font: 700 12px/1.2 var(--font-mono); color: var(--brand); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-tiles small { font: 400 10px/1.2 var(--font-mono); color: var(--fg-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fx-crms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fx-crms span { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 10px; border-radius: var(--r-sm); background: var(--fg-primary); }
.fx-crms img { width: auto; max-width: 100%; height: 18px; }
.fx-crms .is-tall img { height: 32px; }   /* Salesforce: the cloud holds the name */
.fx-log { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font: 400 11px/1.4 var(--font-mono); color: var(--fg-muted); }
.fx-log b { font-weight: 800; color: var(--fg-primary); }

/* ── Also in the API ──────────────────────────────────────────────────────── */
.fx-also { grid-column: 1 / -1; padding: 28px 32px 12px; }
.fx-k--plain { margin-bottom: 8px; }
.fx-also ul { list-style: none; margin: 0; padding: 0; }
.fx-also li + li { border-top: 1px solid var(--fx-line); }
.fx-also li:first-child { border-top: 1px solid var(--fx-line); }
.fx-also a {
  display: grid; grid-template-columns: 15em minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 0;
  color: var(--fg-primary);
}
.fx-also a b { font: 700 13px/1.3 var(--font-mono); }
.fx-also a span { font: 400 11px/1.5 var(--font-mono); color: var(--fg-muted); }
.fx-also a span em { font-style: normal; color: var(--fg-primary); }
.fx-also a i { font: 700 11px/1 var(--font-mono); font-style: normal; color: var(--brand); white-space: nowrap; }
.fx-also a:hover b { color: var(--brand); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .fx-hero { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 32px; }
  .fx-flag { grid-template-columns: minmax(0, 1fr); }
  .fx-card--third { grid-column: span 3; }
  .fx-card--odd { grid-column: 1 / -1; }   /* third of three, alone on its row: full width */
}
@media (max-width: 700px) {
  .fx-hero { padding: 48px 0 32px; }
  .fx-stats > div { padding: 14px 12px 16px; }
  .fx-bento { grid-template-columns: minmax(0, 1fr); }
  .fx-card--half, .fx-card--third, .fx-card--odd { grid-column: auto; }
  .fx-card, .fx-flag { padding: 24px 20px; }
  .fx-also { padding: 22px 20px 6px; }
  .fx-also a { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .fx-also a span { grid-column: 1; grid-row: 2; }
  .fx-also a i { grid-column: 2; grid-row: 1 / span 2; }
  .fx-resp > div { grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 10px; padding: 0 12px; }
  .fx-code { white-space: pre; overflow-wrap: normal; overflow-x: auto; }   /* scroll inside the box, keep the command's shape */
}
@media (max-width: 420px) {
  /* label above the value so emails fit */
  .fx-resp > div, .fx-resp--sm > div { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 10px 12px; }
  .fx-resp dt { grid-column: 1 / -1; }
  .fx-tiles { grid-template-columns: minmax(0, 1fr); }
  .fx-chips { grid-template-columns: minmax(0, 1fr); }
  .fx-team-row { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .fx-team-row::before, .fx-team-row::after { display: none; }
}