/* Shared visual contract for homepage capability destinations. */

html:not(.app-route-document) body.product-page-theme {
  --void: #f8fafc;
  --graphite: #ffffff;
  --graphite-2: #f1f5f9;
  --graphite-3: #e2e8f0;
  --paper: #0f172a;
  --paper-soft: #475569;
  --paper-muted: #94a3b8;
  --mist: #eff6ff;
  --cyan: #3b82f6;
  --green: #2563eb;
  --amber: #f59e0b;
  --ink: #0f172a;
  --text-soft: #475569;
  --text-muted: #94a3b8;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --border-dark: #e2e8f0;
  --border-light: #eef2f7;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --max: 1280px;
  min-width: 320px;
  background:
    radial-gradient(circle at 76% 0%, rgba(219, 234, 254, 0.56), transparent 30rem),
    linear-gradient(180deg, #ffffff 0, #fbfdff 30rem, #f8fafc 52rem, #f8fafc 100%);
  color: #0f172a;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html:not(.app-route-document) body.product-page-theme::before {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(226, 232, 240, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.28) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 34rem);
}

body.product-page-theme,
body.product-page-theme button,
body.product-page-theme input,
body.product-page-theme select,
body.product-page-theme textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.product-page-theme h1,
body.product-page-theme h2,
body.product-page-theme h3 {
  color: #0f172a;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-optical-sizing: auto;
}

body.product-page-theme a:focus-visible,
body.product-page-theme button:focus-visible,
body.product-page-theme input:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #ffffff;
}

/* Navigation mirrors the homepage's calm, fixed white header. */
html:not(.app-route-document) body.product-page-theme .site-shell > .nav {
  inset: 0 0 auto;
  width: 100%;
  max-width: none;
  height: 72px;
  padding: 12px max(24px, calc((100vw - 1440px) / 2));
  transform: none;
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

html:not(.app-route-document) body.product-page-theme .site-shell > .nav::before,
html:not(.app-route-document) body.product-page-theme .site-shell > .nav::after {
  display: none;
}

html:not(.app-route-document) body.product-page-theme .nav-logo-mark {
  width: 148px;
  height: 42px;
}

html:not(.app-route-document) body.product-page-theme .nav-links {
  gap: 30px;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 550;
}

html:not(.app-route-document) body.product-page-theme .nav-menu-trigger {
  color: #334155;
  font-weight: 550;
}

html:not(.app-route-document) body.product-page-theme .nav-links a:hover,
html:not(.app-route-document) body.product-page-theme .nav-menu-trigger:hover,
html:not(.app-route-document) body.product-page-theme .nav-menu-trigger[aria-expanded="true"] {
  color: #0f172a;
}

html:not(.app-route-document) body.product-page-theme .nav-dropdown {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05);
}

html:not(.app-route-document) body.product-page-theme .nav-dropdown a {
  border-radius: 8px;
  color: #334155;
}

html:not(.app-route-document) body.product-page-theme .nav-dropdown a span,
html:not(.app-route-document) body.product-page-theme .nav-dropdown-label {
  color: #64748b;
}

html:not(.app-route-document) body.product-page-theme .nav-dropdown a:hover {
  background: #eff6ff;
  color: #0f172a;
}

html:not(.app-route-document) body.product-page-theme .btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 650;
  box-shadow: none;
}

html:not(.app-route-document) body.product-page-theme .btn-primary {
  border-color: #0f172a;
  background: #0f172a;
  color: #ffffff;
  box-shadow: none;
}

html:not(.app-route-document) body.product-page-theme .btn-primary:hover {
  border-color: #1e293b;
  background: #1e293b;
  box-shadow: none;
}

html:not(.app-route-document) body.product-page-theme .btn-secondary,
html:not(.app-route-document) body.product-page-theme .reporting-btn-secondary {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: none;
}

html:not(.app-route-document) body.product-page-theme .btn-secondary:hover,
html:not(.app-route-document) body.product-page-theme .reporting-btn-secondary:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

/* Shared editorial language. */
html:not(.app-route-document) body.product-page-theme .eyebrow,
html:not(.app-route-document) body.product-page-theme .reporting-kicker,
html:not(.app-route-document) body.product-page-theme .aia-kicker,
html:not(.app-route-document) body.product-page-theme .section-kicker {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

html:not(.app-route-document) body.product-page-theme .eyebrow::before {
  display: none;
}

html:not(.app-route-document) body.product-page-theme :is(
  .connector-catalog-page,
  .measurement-page,
  .pricing-optimization-page,
  .product-catalog-optimization-page,
  .product-detail-page,
  .semantic-layer-page,
  .reporting-dashboards-page,
  .ai-assisted-analysis-page
) {
  width: min(1280px, calc(100% - 48px));
  max-width: 1280px;
  padding-top: 132px;
  color: #0f172a;
}

html:not(.app-route-document) body.product-page-theme :is(
  .measurement-hero,
  .pricing-optimization-hero,
  .semantic-layer-hero,
  .product-detail-hero,
  .connector-catalog-header,
  .reporting-hero,
  .aia-hero
) h1 {
  color: #0f172a;
  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.99;
  text-wrap: balance;
}

html:not(.app-route-document) body.product-page-theme :is(
  .measurement-hero,
  .pricing-optimization-hero,
  .semantic-layer-hero,
  .product-detail-hero,
  .connector-catalog-header,
  .reporting-hero
) p,
html:not(.app-route-document) body.product-page-theme .aia-hero-copy > p {
  color: #475569;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 400;
  line-height: 1.68;
}

html:not(.app-route-document) body.product-page-theme .connector-catalog-actions {
  flex-wrap: wrap;
  gap: 10px;
}

/* The older three-step product pages now use the homepage card system. */
html:not(.app-route-document) body.product-page-theme :is(
  .measurement-summary-item,
  .semantic-layer-summary-item,
  .pricing-optimization-board,
  .product-detail-meta-item,
  .product-detail-summary,
  .connector-stat,
  .connector-index-panel,
  .connector-list-panel,
  .connector-detail-panel,
  .measurement-panel,
  .semantic-layer-panel,
  .pricing-optimization-panel
) {
  border-color: #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html:not(.app-route-document) body.product-page-theme :is(
  .measurement-flow,
  .semantic-layer-flow,
  .semantic-layer-benefits,
  .pricing-optimization-flow
) {
  gap: 12px;
  overflow: visible;
  border: 0;
  background: transparent;
}

html:not(.app-route-document) body.product-page-theme :is(
  .measurement-step,
  .semantic-layer-step,
  .semantic-layer-benefit,
  .pricing-optimization-step
) {
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html:not(.app-route-document) body.product-page-theme :is(
  .measurement-step-number,
  .semantic-layer-step-number,
  .semantic-layer-map-label,
  .pricing-optimization-step-number
) {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}

html:not(.app-route-document) body.product-page-theme :is(
  .measurement-summary-item strong,
  .semantic-layer-summary-item strong,
  .pricing-optimization-board-row span,
  .product-detail-meta-item strong,
  .measurement-step h2,
  .semantic-layer-step h2,
  .pricing-optimization-step h2,
  .measurement-panel-header h2,
  .semantic-layer-panel-header h2,
  .pricing-optimization-panel-header h2,
  .measurement-benefit strong,
  .semantic-layer-benefit strong,
  .pricing-optimization-benefit strong,
  .measurement-map-table,
  .semantic-layer-map-table,
  .pricing-optimization-map-table
) {
  color: #0f172a;
}

html:not(.app-route-document) body.product-page-theme :is(
  .measurement-summary-item span,
  .semantic-layer-summary-item span,
  .pricing-optimization-board-row small,
  .product-detail-meta-item span,
  .product-detail-summary,
  .measurement-step p,
  .semantic-layer-step p,
  .pricing-optimization-step p,
  .measurement-panel-header p,
  .semantic-layer-panel-header p,
  .pricing-optimization-panel-header p,
  .measurement-benefit span,
  .semantic-layer-benefit span,
  .pricing-optimization-benefit span,
  .measurement-note,
  .semantic-layer-note,
  .pricing-optimization-note
) {
  color: #64748b;
}

html:not(.app-route-document) body.product-page-theme .measurement-summary-item.is-warning {
  border-color: #fde68a;
  background: #fffbeb;
}

html:not(.app-route-document) body.product-page-theme .product-catalog-screenshot {
  border-color: #e2e8f0;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

/* Connector catalog uses the same compact white cards as homepage breadth. */
html:not(.app-route-document) body.product-page-theme .connector-card-grid {
  gap: 12px;
  background: transparent;
}

html:not(.app-route-document) body.product-page-theme .connector-card {
  border-color: #e2e8f0;
  border-radius: 13px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html:not(.app-route-document) body.product-page-theme .connector-card:hover {
  transform: translateY(-2px);
  border-color: #bfdbfe;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

html:not(.app-route-document) body.product-page-theme :is(.connector-search, .contract-search, .contract-field-search) {
  border-color: #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: none;
}

html:not(.app-route-document) body.product-page-theme :is(.connector-search, .contract-search, .contract-field-search):focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

/* Bring the two new pages onto the exact same shared tokens. */
html:not(.app-route-document) body.product-page-theme .reporting-dashboards-page {
  --reporting-ink: #0f172a;
  --reporting-copy: #475569;
  --reporting-muted: #64748b;
  --reporting-faint: #94a3b8;
  --reporting-border: #e2e8f0;
  --reporting-border-subtle: #eef2f7;
  --reporting-surface: #ffffff;
  --reporting-surface-soft: #f8fafc;
  --reporting-surface-tint: #eff6ff;
  --reporting-accent: #2563eb;
  --reporting-accent-deep: #1d4ed8;
  --reporting-teal: #2563eb;
  --reporting-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

html:not(.app-route-document) body.product-page-theme .ai-assisted-analysis-page {
  --aia-ink: #0f172a;
  --aia-copy: #475569;
  --aia-muted: #64748b;
  --aia-faint: #94a3b8;
  --aia-border: #e2e8f0;
  --aia-border-subtle: #eef2f7;
  --aia-surface: #ffffff;
  --aia-surface-soft: #f8fafc;
  --aia-blue: #2563eb;
  --aia-blue-deep: #1d4ed8;
  --aia-blue-soft: #eff6ff;
}

html:not(.app-route-document) body.product-page-theme :is(
  .reporting-surface-card,
  .reporting-template-card,
  .reporting-control,
  .reporting-health-panel,
  .reporting-health-aside,
  .reporting-boundary-grid article,
  .reporting-cta,
  .aia-question-card,
  .aia-context-grid article,
  .aia-governance-steps,
  .aia-receipt,
  .aia-boundary-card,
  .aia-connect-panel,
  .aia-faq-grid article
) {
  border-color: #e2e8f0;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Semantic contract library: same page language despite its interactive layout. */
body.product-page-theme .page-shell > .nav {
  position: fixed;
  inset: 0 0 auto;
  border-bottom: 1px solid rgba(226, 232, 240, 0.88);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

body.product-page-theme .page-shell > .nav .nav-inner,
body.product-page-theme .page-shell > :is(.hero, main),
body.product-page-theme .page-shell > footer .footer-inner {
  width: min(1280px, calc(100% - 48px));
  max-width: 1280px;
}

body.product-page-theme .page-shell > .hero {
  padding-top: 132px;
}

body.product-page-theme .page-shell > .hero h1 {
  max-width: 960px;
  color: #0f172a;
  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.99;
  text-wrap: balance;
}

body.product-page-theme :is(
  .contract-proof-strip,
  .contract-live-summary,
  .contract-status-card,
  .contract-explorer,
  .note-card,
  .link-panel
) {
  border-color: #e2e8f0;
  border-radius: 13px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.product-page-theme .contract-status-mark,
body.product-page-theme .contract-live-dot,
body.product-page-theme .contract-result-status::before,
body.product-page-theme .contract-detail-status::before {
  background: #2563eb;
}

body.product-page-theme .contract-filters button.is-active {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

body.product-page-theme footer {
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  color: #94a3b8;
}

body.product-page-theme footer a:hover {
  color: #0f172a;
}

@media (max-width: 980px) {
  html:not(.app-route-document) body.product-page-theme .site-shell > .nav {
    padding-right: 16px;
    padding-left: 16px;
  }

  html:not(.app-route-document) body.product-page-theme :is(
    .measurement-hero,
    .pricing-optimization-hero,
    .semantic-layer-hero,
    .product-detail-hero,
    .connector-catalog-header,
    .reporting-hero,
    .aia-hero
  ) h1,
  body.product-page-theme .page-shell > .hero h1 {
    font-size: clamp(2.7rem, 9vw, 4.25rem);
  }
}

@media (max-width: 700px) {
  html:not(.app-route-document) body.product-page-theme :is(
    .connector-catalog-page,
    .measurement-page,
    .pricing-optimization-page,
    .product-catalog-optimization-page,
    .product-detail-page,
    .semantic-layer-page,
    .reporting-dashboards-page,
    .ai-assisted-analysis-page
  ),
  body.product-page-theme .page-shell > .nav .nav-inner,
  body.product-page-theme .page-shell > :is(.hero, main),
  body.product-page-theme .page-shell > footer .footer-inner {
    width: calc(100% - 32px);
  }

  html:not(.app-route-document) body.product-page-theme .site-shell > .nav {
    height: 64px;
  }

  html:not(.app-route-document) body.product-page-theme .nav-logo-mark {
    width: 126px;
  }

  html:not(.app-route-document) body.product-page-theme :is(
    .measurement-hero,
    .pricing-optimization-hero,
    .semantic-layer-hero,
    .product-detail-hero,
    .connector-catalog-header,
    .reporting-hero,
    .aia-hero
  ) h1,
  body.product-page-theme .page-shell > .hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.35rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.product-page-theme *,
  body.product-page-theme *::before,
  body.product-page-theme *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}