/* Features page. Everything here is a class-based translation of the approved mockup's inline
   styles — the portal's CSP is style-src 'self' with no 'unsafe-inline', so style="" attributes
   are dropped by the browser. Only rules that site.css genuinely has no equivalent for live here;
   see Features.cshtml for which site.css classes cover the rest. */

/* --- Pipeline diagram ------------------------------------------------------
   A horizontal stepper: content stream -> ... -> self-contained HTML. Wraps
   to a vertical stack on narrow screens rather than overflowing. */
.pipeline { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.pipeline__arrow { display: flex; align-items: center; color: #a9b0b9; flex: none; }
.stage {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 150px; min-width: 0; box-shadow: var(--shadow);
}
.stage__name { font-size: .906rem; font-weight: 700; line-height: 1.3; }
.stage__meta { font-family: var(--font-mono); font-size: .72rem; color: var(--fg-muted); }
/* The final stage is the product's promise — a self-contained file — so it
   wears the Convert green edge instead of the generic accent. */
.stage--final { border-color: var(--pc-cv-deep); box-shadow: 0 0 0 1px var(--pc-cv-deep), var(--shadow); }
.icon-tile--cv { border-color: var(--pc-cv); color: var(--pc-cv-deep); }

@media (max-width: 700px) {
  .pipeline { flex-direction: column; }
  .pipeline__arrow { align-self: center; transform: rotate(90deg); }
}

/* The engine-comparison table: no dangling border on the last row, since the
   card's own bottom edge already closes off the box. */
.engine-table tbody tr:last-child td,
.engine-table tbody tr:last-child th { border-bottom: none; }

/* --- Photo caption band -----------------------------------------------------
   A contained (not full-bleed) photo with a bottom-up gradient caption, used
   once for the "Review, not re-key" spot. Distinct from site.css's .band,
   which is a full-bleed image with a full-panel scrim. */
.photo-caption { position: relative; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.photo-caption__img { display: block; width: 100%; height: 300px; object-fit: cover; }
.photo-caption__text {
  position: absolute; inset: auto 0 0 0; padding: 28px 32px;
  background: linear-gradient(to top, rgba(12, 20, 34, .88), rgba(12, 20, 34, 0));
}