/* ==========================================================================
   product-ui.css — real product-UI presentation layer (homepage only)
   QA pass: hero balance, blind-spot rhythm, journey containment, no decoration.
   Core layout uses Grid/Flex only — no absolute positioning for layout.
   ========================================================================== */

/* ---- Slightly wider content container on large desktops ---- */
.wrap { max-width: 1260px; }

/* ---- Base product screenshot (frame hugs the crop) ----
   AUDIT FINDING A02: the label used to be absolutely positioned INSIDE this
   frame, so it sat on top of the screenshot and obscured the product UI. This
   stylesheet loads AFTER style.css, so leaving the overlay here silently
   defeated the fix. The label is now a normal-flow caption bar above the image
   (see .pshot-tag in style.css) and the frame is no longer a positioning
   context. No container crops or masks the screenshot. ---- */
.pshot { margin: 0; min-width: 0; }
.pshot-frame {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  padding: 8px;
  box-shadow: 0 22px 48px -28px rgba(10, 19, 48, .55), 0 3px 12px -8px rgba(10, 19, 48, .35);
  border: 1px solid var(--navy-line);
}
.pshot-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}
.pshot-tag {
  display: block;
  margin: 0 0 8px;
  padding: 2px 2px 0;
  font: 700 11px/1.4 "Manrope", system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase;
  /* The label sits INSIDE the navy .pshot-frame, above the screenshot and
     outside the image itself. A light blue on the navy gradient measures
     ~9.7:1; --muted would only reach ~3.6:1 here, so this must stay light. */
  color: #B9C6E6;
}

/* ---- HERO: balanced columns (copy ~40%, gap, product ~53%) ---- */
.hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.34fr);
  gap: 58px;
  align-items: center;
  padding-top: 86px;
  padding-bottom: 86px;
}

/* ---- Product journey styles removed: the "See the deal more clearly" section
   was deleted from the homepage as repetitive of the Product section. ---- */

/* ---- Wide product band (replaces arbitrary progress bars) ---- */
.pband { margin: 28px 0 0; }
.pband-caption { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: .95rem; }

/* ---- Intelligence layer: two clear columns, real gutter, no overlap ---- */
.pstack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 44px;
  align-items: center;
  margin-top: 30px;
}
.pstack > * { min-width: 0; }
.pstack-eco { min-width: 0; }
/* The ecosystem logos live in a narrow column: a clean 3x2 grid so no tile can
   ever be squeezed or hidden behind the screenshot. */
.pstack .stack-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.pstack .stack-logo { min-width: 0; height: 88px; padding: 12px 10px; }
.pstack-note { margin: 18px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.pstack .stack-flow { margin-top: 0; }

/* Additional signal types (email, partner signals) feeding the same layer. */
.pstack .src-row { margin-top: 18px; gap: 10px; }
.pstack .src-chip { padding: 9px 13px; }
.pstack .src-chip img, .pstack .src-chip .src-ico, .pstack .src-chip .src-ico svg { width: 22px; height: 22px; }
.pstack .src-chip span { font-size: 13.5px; }

/* ---- Blind-spot rhythm ---- */
.blind-product { margin-top: 52px; }
.blind-product-cap { margin: 0 0 16px; text-align: center; font: 600 12px/1 "Manrope", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Compact signal chips — sized as the INPUT ECOSYSTEM */
.src-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.src-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
}
.src-chip img { width: 26px; height: 26px; object-fit: contain; }
.src-chip .src-ico { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--blue); }
.src-chip .src-ico svg { width: 26px; height: 26px; }
.src-chip span { font: 600 15px/1 "Manrope", system-ui, sans-serif; color: var(--ink-2); }
/* Two-line chip label: a bold source name over its plain-language meaning. */
.src-chip-text { display: grid; gap: 3px; min-width: 0; }
.src-chip-text strong { font: 700 15px/1.15 "Manrope", system-ui, sans-serif; color: var(--ink); letter-spacing: -.005em; }
.src-chip-text small { font: 500 12.5px/1.25 "Manrope", system-ui, sans-serif; color: var(--muted); }
.src-chip.eco { padding: 11px 14px; }
.src-chip.eco span { font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Three sources converging on one answer.
   Each chip sits in its own equal-width cell of a 3-column grid, and the
   connector is a single SVG whose viewBox matches that grid exactly, so the
   drop lines always align to the centre of each chip and the merge point sits
   dead centre — at any width. No absolutely-positioned pseudo-elements that
   can drift out of alignment.
   -------------------------------------------------------------------------- */
.src-flow { margin: 0 auto; max-width: 760px; }
.src-flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.src-flow-grid .src-chip { width: 100%; justify-content: center; text-align: center; }
.src-flow .src-connect { display: block; width: 100%; height: auto; margin: 4px 0 0; }
.src-flow .src-connect path,
.src-flow .src-connect line {
  fill: none;
  stroke: rgba(24, 121, 252, .38);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.src-flow .src-connect .src-arrow { fill: rgba(24, 121, 252, .55); stroke: none; }
.sources-flow { display: none; }

/* DealAlign node under the connector keeps clear separation. */
.blind-spot .da-node { margin-top: 4px; }

/* ---- Bottom benefit lines — larger, centred as ONE group ---- */
.nt-negatives {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 12px 40px; margin: 32px 0 0;
}
.nt-negatives li {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; box-shadow: none; padding: 0;
  font-size: 16.5px; font-weight: 600; line-height: 1.5; color: var(--ink-2);
}
.nt-negatives li::before {
  content: "\2713"; color: var(--good); font-weight: 800; font-size: 15px; line-height: 1;
}

/* ---- Slightly tighter product-story sections (homepage only) ---- */
main .section { padding-top: 62px; padding-bottom: 62px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-grid { gap: 42px; padding-top: 74px; padding-bottom: 74px; }
  .pstack { gap: 34px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pstack { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pstack .stack-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Stacked sources: the horizontal merge no longer reads, so the diagram
     becomes a simple vertical list with one downward connector. */
  .src-flow { max-width: 460px; }
  .src-flow-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .src-flow .src-connect { display: none; }
  .src-flow .src-connect-vertical { display: block; width: 2px; height: 30px; margin: 14px auto 0; background: rgba(24, 121, 252, .38); }
  .blind-spot .da-node { margin-top: 14px; }
}
/* The vertical connector only exists in the stacked layout. */
.src-flow .src-connect-vertical { display: none; }
@media (max-width: 560px) {
  .pshot-frame { padding: 6px; border-radius: 12px; }
  .pshot-frame img { border-radius: 7px; }
  .pstack .stack-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .src-chip { padding: 9px 13px; }
  .src-chip img, .src-chip .src-ico, .src-chip .src-ico svg { width: 22px; height: 22px; }
  .src-chip span, .src-chip.eco span { font-size: 13.5px; }
  .nt-negatives { gap: 10px 22px; }
  .nt-negatives li { font-size: 15px; }
  main .section { padding-top: 46px; padding-bottom: 46px; }
}