/* Features: 3 x 2 numbered cards with animated line diagrams (reference "intel cards"). */
.fe-head { margin-bottom: 48px; }
.fe-head .head__copy { max-width: 900px; }
.fe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fe-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 30px var(--gutter) 40px; background: var(--bg); transition: background-color .3s var(--ease); }
.fe-in { display: flex; flex-direction: column; min-width: 0; }
.fe-num { font: 500 12px/1 var(--f-mono); letter-spacing: 0.04em; color: var(--mist); transition: color .2s var(--ease); }
.fe-card:hover .fe-num { color: var(--accent-text); }
.fe-fig { display: grid; place-items: center; height: 236px; margin: 14px 0 30px; }
.fe-fig svg { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.fe-card .body { margin-top: 12px; max-width: 360px; }
.fe-card .h3 + .body { min-height: 4.65em; }

/* diagram primitives (all colors from tokens, so light, dark mode and dark bands work) */
.fe-ln { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.fe-ln--soft { stroke: var(--line); }
.fe-ln--fg { stroke: var(--fg); }
.fe-ln--red { stroke: var(--accent-line); stroke-width: 1.5; }
.fe-dash { stroke-dasharray: 3 3; }
.fe-dot { fill: var(--mist); }
.fe-box { fill: var(--surface-raised); stroke: var(--line-strong); stroke-width: 1; }
.fe-box--bg { fill: var(--bg); }
.fe-box--fg { stroke: var(--fg); }
.fe-box--red { stroke: var(--accent-line); }
.fe-solid { fill: var(--accent); }
.fe-fill-mist { fill: var(--mist); }
.fe-fill-line { fill: var(--line-strong); }
.fe-fill-soft { fill: var(--line); }
.fe-fill-fg { fill: var(--fg); }
.fe-fill-bg { fill: var(--bg); }
.fe-gold { fill: var(--gold); opacity: .5; }
.fe-t { font-family: var(--f-mono); font-size: 11px; font-weight: 400; fill: var(--mist); letter-spacing: 0; }
.fe-t--sm { font-size: 9.5px; }
.fe-t--fg { fill: var(--fg); }
.fe-t--ink { fill: var(--accent-ink); font-weight: 500; }
.fe-t--red { fill: var(--accent-text); }
.fe-red-fill { fill: var(--accent-line); }
.fe-red-stroke { stroke: var(--accent-line); }

@media (max-width: 1060px) { .fe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .fe-head { margin-bottom: 32px; }
  .fe-grid { grid-template-columns: minmax(0, 1fr); }
  .fe-card { padding: 26px 16px 34px; }
  .fe-fig { height: 216px; margin: 8px 0 22px; }
  .fe-card .h3 + .body { min-height: 0; }
}