/* World app materials, from apps/world/src/ui/tokens.css at bf8e7d2.
   Shared by the landing and pricing pages; load after component styles.
   Smoke opacity is 0.15 higher than the app, as requested for the landing. */
.product-ui-page {
  --surface-glass: rgba(30, 32, 40, .65);
  --surface-glass-strong: rgba(28, 30, 38, .75);
  --glass-blur: blur(50px) saturate(1.45);
  --surface-tile: rgba(255, 255, 255, .065);
  --surface-tile-hover: rgba(255, 255, 255, .16);
  --surface-panel: rgba(255, 255, 255, .05);
  --surface-recessed: rgba(0, 0, 0, .22);
  --edge: rgba(255, 255, 255, .1);
  --shadow-surface: inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.12), 0 12px 40px rgba(0,0,0,.2);
  --ui-glass: var(--surface-glass);
  --ui-inner: var(--surface-tile);
  --ui-ink: #fff;
  --ui-muted: rgba(255,255,255,.72);
  --ui-line: var(--edge);
}

/* A single material for every top-level piece of interface. */
.product-ui-page :is(.header.glass-nav, .header.glass-nav.is-scrolled,
  .copy-conversation, .copy-workflow, .reviewed-2d .asset-ui,
  .reviewed-2d .flow-shell, .customer-flow, .site-footer-panel,
  .bespoke-around-clock, .bespoke-away-spark, .mini-scan-handle,
  .mini-motion-toggle, .canvas-stat) {
  background: var(--surface-glass);
  border-color: var(--edge);
  box-shadow: var(--shadow-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.product-ui-page .signup-dialog,
.product-ui-page .header.glass-nav > .mobile-menu:not([hidden]) {
  background: var(--surface-glass-strong);
  border-color: var(--edge);
  box-shadow: var(--shadow-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Inset tiles inherit the same neutral material instead of olive fills. */
.product-ui-page .reviewed-2d :is(.product, .chief, .asset-worker,
  .review-sheet, .tiny-output, .decision-paths > div),
.product-ui-page .cf-node,
.product-ui-page .copy-conversation li > div,
.product-ui-page .canvas-node-icon {
  background: var(--surface-tile);
  border-color: var(--edge);
}
.product-ui-page .cf-node-chief,
.product-ui-page .cf-node-pack,
.product-ui-page .reviewed-2d .decision-paths > div:first-child {
  background: rgba(24,153,214,.22);
  border-color: #1899d6;
}
.product-ui-page .cf-node-gate,
.product-ui-page .cf-node-revision { border-color: rgba(255,159,10,.6); }
.product-ui-page .cf-node-review { border-color: rgba(255,214,10,.6); }
.product-ui-page .cf-edge-label { stroke: transparent; }
.product-ui-page .reviewed-2d .people .face { border-color: var(--edge); }
.product-ui-page .signup-dialog .signup-field input,
.product-ui-page .signup-dialog .waitlist-form input:focus,
.product-ui-page .canvas-controls { background: var(--surface-recessed); }
.product-ui-page .mini-motion-toggle:hover { background: var(--surface-tile-hover); }

/* Match the app's opaque fallback without changing the neutral hue. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .product-ui-page { --surface-glass: #1e2028; --surface-glass-strong: #1c1e26; }
}
@media (prefers-reduced-transparency:reduce) {
  .product-ui-page { --surface-glass: #1e2028; --surface-glass-strong: #1c1e26; }
}