/* ═══════════════════════════════════════════════════════════════════════════
   product_demo_hero.css
   Product-demo hero / spotlight / flow layout and per-surface overrides.
   Split from nav_tree.css to isolate product-hero rules from shared nav
   shell chrome — reducing CSS blast radius on unrelated surfaces.

   Loaded via _inject_internal_nav_shell for _PRODUCT_NAV_PAGE_KEYS only.
   Nav shell chrome (sidebar, links, brand, collapse) stays in nav_tree.css.

   RELATIONSHIP TO product_hero.css:
   product_hero.css is a COMPLEMENTARY stylesheet hardcoded into three
   static HTML files.  On release-demo and release-gate surfaces, both files
   load: product_hero.css first (hardcoded <link>), then this file (injected
   before </head>).  Rules in this file win on any selector conflict by source
   order.  The two files own separate concerns:
   - product_hero.css: decision-state color palette (--ph-block/allow/warn)
     and bbfr/afw/ais/acp variant themes.
   - this file: nav-shell-integrated layout, --type-display-hero-* font
     tokens, proof/gallop surface overrides, @keyframes, @media breakpoints.
   Do NOT inline the --ph-* color tokens here; keep the ownership split clean.

   Version stamp: _PRODUCT_HERO_CSS_VERSION in api/routes/dashboard.py.
   Cache-busted independently from nav_tree.css (_NAV_SHELL_ASSET_VERSION).
═══════════════════════════════════════════════════════════════════════════ */

.product-demo-hero {
  display: grid;
  gap: 1.1rem;
  padding: 1.2rem 1.3rem 1.3rem;
  border-radius: 28px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at top right, rgba(23, 90, 156, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 244, 250, 0.92));
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
  color: #10243a;
}

.product-demo-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.product-demo-flow-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.68);
  color: #60758c;
  font-family: var(--font-mono, "Cascadia Code", monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-demo-flow-step.is-complete {
  border-color: rgba(23, 90, 156, 0.16);
  background: rgba(23, 90, 156, 0.08);
  color: #175a9c;
}

.product-demo-flow-step.is-active {
  border-color: rgba(23, 90, 156, 0.22);
  background: linear-gradient(180deg, rgba(23, 90, 156, 0.12), rgba(255, 255, 255, 0.92));
  color: #10243a;
  box-shadow: inset 0 0 0 1px rgba(23, 90, 156, 0.08);
}

.product-demo-head {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.product-demo-hero {
  --type-page-headline-size: clamp(2.2rem, 3.7vw, 3.35rem);
  --type-page-headline-line-height: 0.94;
  --type-page-headline-letter-spacing: -0.02em;

  --type-body-size: 0.98rem;
  --type-body-line-height: 1.55;

  --type-meta-size: 0.88rem;
  --type-meta-line-height: 1.45;

  --type-mono-evidence-size: 0.68rem;
  --type-mono-evidence-letter-spacing: 0.12em;

  --type-display-hero-size: clamp(3.6rem, 9vw, 6.8rem);
  --type-display-hero-line-height: 0.9;
  --type-display-hero-letter-spacing: -0.05em;
}

.product-demo-kicker {
  color: #60758c;
  font-family: var(--type-mono-evidence-family);
  font-size: 0.72rem;
  font-weight: var(--type-mono-evidence-weight);
  line-height: var(--type-mono-evidence-line-height);
  letter-spacing: 0.16em;
  text-transform: var(--type-mono-evidence-transform);
}

.product-demo-title {
  margin: 0;
  color: #10243a;
  font-family: var(--type-page-headline-family);
  font-size: var(--type-page-headline-size);
  font-weight: var(--type-page-headline-weight);
  line-height: var(--type-page-headline-line-height);
  letter-spacing: var(--type-page-headline-letter-spacing);
  text-transform: var(--type-page-headline-transform);
}

.product-demo-description {
  margin: 0;
  max-width: 58ch;
  color: #42566d;
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  text-transform: var(--type-body-transform);
}

.product-demo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.2rem;
}

.product-demo-meta-item {
  display: grid;
  gap: 0.24rem;
  min-width: min(100%, 14rem);
}

.product-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.product-demo-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.05rem;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.product-demo-meta-label,
.product-demo-next-label,
.product-demo-moment-label {
  color: #60758c;
  font-family: var(--type-mono-evidence-family);
  font-size: var(--type-mono-evidence-size);
  font-weight: var(--type-mono-evidence-weight);
  line-height: var(--type-mono-evidence-line-height);
  letter-spacing: var(--type-mono-evidence-letter-spacing);
  text-transform: var(--type-mono-evidence-transform);
}

.product-demo-meta-value,
.product-demo-next-value {
  color: #10243a;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.product-demo-label {
  color: #60758c;
  font-family: var(--type-mono-evidence-family);
  font-size: var(--type-mono-evidence-size);
  font-weight: var(--type-mono-evidence-weight);
  line-height: var(--type-mono-evidence-line-height);
  letter-spacing: var(--type-mono-evidence-letter-spacing);
  text-transform: var(--type-mono-evidence-transform);
}

.product-demo-value {
  color: #10243a;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.product-demo-note {
  color: #42566d;
  font-family: var(--type-meta-family);
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line-height);
  letter-spacing: var(--type-meta-letter-spacing);
  text-transform: var(--type-meta-transform);
}

.product-demo-spotlight {
  display: grid;
  gap: 0.9rem;
  align-content: center;
  padding: 1.25rem 1.2rem;
  border-radius: 24px;
  border: 1px solid rgba(23, 90, 156, 0.14);
  background:
    radial-gradient(circle at top, rgba(23, 90, 156, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(16, 36, 58, 0.98), rgba(22, 47, 72, 0.94));
  color: #f8fbff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.product-demo-moment-label,
.product-demo-next-label {
  color: rgba(222, 234, 245, 0.72);
}

.product-demo-moment-value {
  color: #ffffff;
  font-family: var(--type-display-hero-family);
  font-size: var(--type-display-hero-size);
  font-weight: var(--type-display-hero-weight);
  letter-spacing: var(--type-display-hero-letter-spacing);
  line-height: var(--type-display-hero-line-height);
  text-transform: var(--type-display-hero-transform);
  text-wrap: balance;
}

.product-demo-moment-note {
  color: rgba(234, 241, 247, 0.86);
  font-family: var(--type-meta-family);
  font-size: 0.94rem;
  font-weight: var(--type-meta-weight);
  line-height: 1.55;
  letter-spacing: var(--type-meta-letter-spacing);
  text-transform: var(--type-meta-transform);
}

.product-demo-next {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.product-demo-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #10243a;
  font-family: var(--type-body-family);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: none;
}

.product-demo-primary-action:hover {
  background: #ffffff;
  color: #0f4f88;
}

.product-demo-moment-value.is-allow,
.product-demo-meta-value.is-allow,
.product-demo-value.is-allow,
.product-demo-next-value.is-allow {
  color: #16784d;
}

.product-demo-moment-value.is-hold,
.product-demo-meta-value.is-hold,
.product-demo-value.is-hold,
.product-demo-next-value.is-hold {
  color: #8c5a00;
}

.product-demo-moment-value.is-block,
.product-demo-meta-value.is-block,
.product-demo-value.is-block,
.product-demo-next-value.is-block {
  color: #b43b33;
}

.product-demo-moment-value.is-neutral,
.product-demo-meta-value.is-neutral,
.product-demo-value.is-neutral,
.product-demo-next-value.is-neutral {
  color: #35506b;
}

.product-demo-skeleton.is-skeleton {
  display: inline-block;
  min-width: 10ch;
  min-height: 1.1em;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.14));
  background-size: 220% 100%;
  color: transparent !important;
  user-select: none;
  animation: product-demo-skeleton 1.4s linear infinite;
}

.product-demo-hero--afw .product-demo-spotlight {
  justify-items: center;
  text-align: center;
}

.product-demo-hero--afw .product-demo-moment-value {
  --type-display-hero-size: clamp(4.2rem, 10vw, 8rem);
  --type-display-hero-letter-spacing: -0.08em;
}

.product-demo-hero--afw .product-demo-moment-note {
  max-width: 28ch;
}

.product-demo-hero--proof .product-demo-moment-value,
.product-demo-hero--ais .product-demo-moment-value,
.product-demo-hero--acp .product-demo-moment-value {
  --type-display-hero-size: clamp(2.9rem, 6.4vw, 5rem);
}

.product-demo-hero--ais .product-demo-spotlight {
  background:
    radial-gradient(circle at top, rgba(214, 162, 74, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(44, 32, 12, 0.98), rgba(72, 49, 14, 0.94));
}

.product-demo-hero--acp .product-demo-spotlight {
  background:
    radial-gradient(circle at top, rgba(95, 146, 196, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(15, 31, 50, 0.98), rgba(19, 40, 65, 0.94));
}

.product-demo-hero--proof .product-demo-spotlight {
  background:
    radial-gradient(circle at top, rgba(84, 177, 231, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(14, 30, 46, 0.98), rgba(18, 39, 61, 0.94));
}

/* SCOPED: proof moment-value inherits --type-display-hero-size from the shared
   .product-demo-hero--proof rule above (clamp(2.9rem,6.4vw,5rem)).
   Only per-proof layout/tracking overrides belong here. */
.product-demo-hero--proof .product-demo-moment-value {
  --type-display-hero-letter-spacing: -0.07em;
  max-width: 9.5ch;
}

.product-demo-hero--proof .product-demo-moment-note {
  max-width: 30ch;
}

.product-demo-hero {
  gap: 1rem;
  padding: 1.15rem 1.2rem 1.1rem;
}

.product-demo-description {
  max-width: 46ch;
  color: #23384d;
}

.product-demo-meta-label,
.product-demo-next-label,
.product-demo-moment-label,
.product-demo-label {
  color: #556a7f;
}

.product-demo-meta-value,
.product-demo-next-value,
.product-demo-value {
  color: #10243a;
}

.product-demo-note {
  color: #31475d;
}

.product-demo-grid {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem 0;
  padding: 0.72rem 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.product-demo-grid .product-demo-card {
  min-width: min(100%, 9.5rem);
  flex: 1 1 10.5rem;
  gap: 0.18rem;
  padding: 0 0.85rem;
  border: 0;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-demo-grid .product-demo-card:first-child {
  padding-left: 0;
  border-left: 0;
}

.product-demo-grid .product-demo-card:last-child {
  padding-right: 0;
}

.product-demo-grid .product-demo-note {
  display: none;
}

.product-demo-spotlight {
  min-height: clamp(250px, 36vh, 340px);
  justify-items: center;
  text-align: center;
  padding: 1.3rem 1.25rem;
}

.product-demo-moment-note {
  max-width: 26ch;
}

.product-demo-next {
  width: 100%;
  justify-items: center;
  gap: 0.35rem;
}

.product-demo-next-value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.product-demo-spotlight .product-demo-next-value,
.product-demo-spotlight .product-demo-note {
  color: rgba(244, 247, 255, 0.9);
}

.product-demo-spotlight .product-demo-note {
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-line-height);
}

.product-demo-hero--afw .product-demo-moment-value {
  --type-display-hero-size: clamp(4.6rem, 12vw, 8.6rem);
}

.product-demo-hero--acp .product-demo-moment-value {
  --type-display-hero-size: clamp(4rem, 10vw, 7rem);
}

body[data-nav-shell-page="evidence-proof"] .hero {
  display: none;
}

body[data-nav-shell-page="evidence-proof"] .shell {
  max-width: 1240px;
  padding-top: 28px;
}

body[data-nav-shell-page="evidence-proof"] .summary-panel,
body[data-nav-shell-page="evidence-proof"] .snapshot-panel,
body[data-nav-shell-page="evidence-proof"] .cta-panel,
body[data-nav-shell-page="evidence-proof"] .scenario-card {
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

body[data-nav-shell-page="evidence-proof"] .summary-panel,
body[data-nav-shell-page="evidence-proof"] .snapshot-panel,
body[data-nav-shell-page="evidence-proof"] .cta-panel {
  margin-bottom: 16px;
}

body[data-nav-shell-page="evidence-proof"] .summary-panel h2,
body[data-nav-shell-page="evidence-proof"] .snapshot-panel h2,
body[data-nav-shell-page="evidence-proof"] .cta-panel h2 {
  color: #10243a;
}

body[data-nav-shell-page="evidence-proof"] .summary-panel p,
body[data-nav-shell-page="evidence-proof"] .snapshot-panel p,
body[data-nav-shell-page="evidence-proof"] .cta-panel p,
body[data-nav-shell-page="evidence-proof"] .summary,
body[data-nav-shell-page="evidence-proof"] .preview-caption,
body[data-nav-shell-page="evidence-proof"] .fact-value {
  color: #31475d;
}

body[data-nav-shell-page="evidence-proof"] .summary-label,
body[data-nav-shell-page="evidence-proof"] .fact-label {
  color: #556a7f;
}

body[data-nav-shell-page="evidence-proof"] .hero-actions {
  justify-content: flex-start;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-flow,
body[data-nav-shell-page="evidence-proof"] .product-demo-kicker,
body[data-nav-shell-page="evidence-proof"] .cta-panel {
  display: none;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 0.9rem 1rem;
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
  min-height: 0;
  align-items: start;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-head {
  gap: 0.65rem;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-title {
  font-size: clamp(1.85rem, 3vw, 2.45rem);
  line-height: 0.98;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-description {
  max-width: none;
  font-size: 0.92rem;
  line-height: 1.48;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-grid--context {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  align-self: start;
  margin-top: 0;
  padding: 0.95rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: rgba(248, 251, 255, 0.94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

body[data-nav-shell-page="evidence-proof"] .product-demo-grid--context::before {
  content: attr(data-summary-title);
  grid-column: 1 / -1;
  color: #556a7f;
  font-family: var(--font-mono, "Cascadia Code", monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-grid--context .product-demo-card {
  min-width: 0;
  gap: 0.24rem;
  padding: 0.82rem 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body[data-nav-shell-page="evidence-proof"] .product-demo-grid--context .product-demo-card:first-child,
body[data-nav-shell-page="evidence-proof"] .product-demo-grid--context .product-demo-card:last-child {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-grid--context .product-demo-label {
  font-size: 0.64rem;
  letter-spacing: 0.13em;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-grid--context .product-demo-value {
  font-size: 0.95rem;
  line-height: 1.35;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-spotlight {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
}

body[data-nav-shell-page="evidence-proof"] .product-demo-hero--proof.proof-operator-surface {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 1.05rem;
  margin-bottom: 0.95rem;
  min-height: 0;
  align-items: start;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

body[data-nav-shell-page="evidence-proof"] .proof-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: 0.85rem;
}

body[data-nav-shell-page="evidence-proof"] .proof-trace-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: stretch;
}

/* Proof bundle dark-hero correction block removed (2026-04):
   evidence-proof is now classified INTERNAL. data-brand-mode="internal" is
   stamped server-side. The dark internal shell provides correct dark theme
   context; the proof bundle's inline CSS renders correctly without overrides. */

body[data-nav-shell-page="evidence-proof"] .proof-operator-block {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

/* Proof fallback product-mode correction block removed (2026-04):
   evidence-proof is classified INTERNAL. The fallback page uses design_tokens.css
   dark-theme vars (var(--text), glass panels) which render correctly on the
   internal dark shell without any light-mode overrides. */