/* Keep meaningful interface copy comfortably readable across viewports. */
:root { --text-body: 16px; --text-secondary: 14px; }

.marketing .p2-eyebrow,
.marketing .p2-workspace-workflow-link,
.marketing .p2-space-category,
.marketing .p2-footer nav,
.marketing .p2-footer-column h3,
.marketing .p2-footer-bottom,
.marketing .p2-badge,
.marketing .p2-button,
.marketing .p2-text-link,
.marketing .p2-question-trigger,
.marketing .p2-faq-answer,
.marketing .p2-closing-demo,
.marketing .p2-mode-switch label,
.marketing .p2-fine,
.marketing .p2-scroll,

.landing .landing-eyebrow,
.landing .landing-button-small { font-size: max(14px, 1em); }
.landing-header-compact .landing-desktop-nav,
.landing-header-compact .landing-login,
.landing-header-compact .landing-button-small { font-size: max(14px, 1em); }

.hero-explorer :is(.demo-audiences button, .demo-toolbar, .demo-sample, .demo-heading p, .demo-state,
  .demo-node small, .demo-node strong, .demo-config-node label, .demo-config-node .ui-select-trigger, .demo-delivery,
  .demo-delivery strong, .demo-approval-setting, .demo-approval-setting > span:last-child,
  .demo-run, .demo-node-detail, .demo-flow-note, .demo-document-meta,
  .demo-document-kicker, .demo-document-heading p, .demo-metrics span, .demo-chart-bars small,
  .demo-growth-chart > div, .demo-email-body, .demo-output-list li > span, .demo-output-list strong,
  .demo-output-list p, .demo-output-list small, .demo-insight p, .demo-document-footer,
  .demo-review-actions strong, .demo-review-actions div > span, .demo-review-actions button,
  .demo-auto-note, .demo-source-copy p, .demo-source-records > div, .demo-source-records strong,
  .demo-source-footnote, .demo-dispatch-heading p, .demo-channel-header > strong,
  .demo-channel-header small, .demo-channel-message > p, .demo-report-attachment strong,
  .demo-report-attachment div > span, .demo-dispatch-highlight, .demo-channel-status) { font-size: 14px; }
.hero-explorer .demo-workspace { height: 740px; min-height: 740px; }
.hero-explorer .demo-heading p { letter-spacing: .04em; }
.hero-explorer .demo-config-node label { margin-top: 12px; }
.hero-explorer .demo-approval-setting { flex-wrap: wrap; }
.hero-explorer .demo-document-kicker { letter-spacing: .04em; }
.hero-explorer .demo-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-explorer .demo-growth-chart > div { grid-template-columns: minmax(70px, 88px) minmax(0, 1fr) 42px; }
.hero-explorer .demo-review-actions { flex-wrap: wrap; }
.hero-explorer .demo-review-actions button { min-height: 44px; }
.hero-explorer .demo-channel-header small { margin-left: auto; }
@media (max-width: 640px) {
  .hero-explorer .demo-workspace { height: 1320px; min-height: 1320px; }
  .hero-explorer .demo-heading p { max-width: calc(100% - 90px); }
  .hero-explorer .demo-sample { font-size: 14px; }
  .hero-explorer .demo-audiences button { font-size: 14px; }
  .hero-explorer .demo-source-records strong { font-size: 14px; }
  .hero-explorer .demo-review-actions button { width: 100%; }
}

.pricing-page :is(.pricing-principles, .pricing-billing-note, .pricing-card-badge, .pricing-card-description,
  .pricing-price span, .pricing-work, .pricing-plan-cta, .pricing-card-features > p, .pricing-card li,
  .pricing-compare-link, .pricing-seat-note, .pricing-demo-banner p, .pricing-discount-grid > article > span:not(.p2-icon),
  .pricing-table) { font-size: max(14px, 1em); }
.marketing :is(.program-back, .program-offer-top, .program-workflow > p, .program-workflow li,
  .program-workflow li > span, .program-offer-note, .program-number, .program-principles span,
  .program-details .p2-eyebrow) { font-size: max(14px, 1em); }
.alt-container :is(.alt-eyebrow, .alt-art-card > span, .alt-art-card small, .alt-button, .alt-link,
  .alt-card p, .alt-card > span, .alt-detail-note, .alt-disclaimer) { font-size: max(14px, 1em); }

.grunt-screen :is(.company-preview-badge, .company-footer, .signin-panel-header > .muted, .signin-panel-footer,
  .field-hint, .text-button, .demo-note p, .profile-heading, .profile-heading span, .custom-goal p,
  .demo-template-heading small, .template-card-actions > span, .workspace-card strong, .workspace-card small,
  .editor-side-title, .setup-checklist, .sidebar-grunt p, .sidebar-demo-note, .eyebrow, .demo-editor-heading > div > p:last-child,
  .demo-run-banner p, .output-title p, .approval-actions p, .run-context, .run-context pre,
  .demo-complete p, .output-placeholder) { font-size: max(14px, 1em); }
.auth-layout :is(.auth-brand-header > span, .signin-panel-footer, .signin-panel-header, .company-progress-caption) { font-size: max(14px, 1em); }
.onboarding-layout :is(.onboarding-eyebrow, .profile-heading > span) { font-size: max(14px, 1em); }
.signin-page :is(.signin-eyebrow, .signin-preview-label, .signin-panel-header, .signin-panel-header > a,
  .signin-panel-footer, .signin-password-note, .signin-account-note, .signin-app-link,
  .signin-mascot-message, .signin-mini-workflow > span) { font-size: max(14px, 1em); }
.signin-page .signin-password-note { font-size: max(14px, 1em) !important; }
.workspace-layout :is(.live-eyebrow, .eyebrow, .workspace-nav-count, .workspace-sidebar-footer,
  .workspace-sidebar label, .live-wallet span, .setup-checklist, .workspace-canvas-footer,
  .live-run time, .demo-status-pill, .setup-strip p, .demo-node-top, .demo-flow-node .demo-node-detail,
  .demo-node-bottom, .editor-next p, .editor-next li, .output-title p, .workspace-navigation a,
  .workspace-navigation button) { font-size: max(14px, 1em); }

.live-app :is(.live-product, .live-button, .live-eyebrow, .live-note, .live-error, .live-pending, .live-hint,
  .live-count, .live-workspace-label p, .live-sidebar label, .live-sidebar select, .live-wallet p,
  .live-heading p, .live-section-heading > span, .live-node small, .live-node p, .live-node-state,
  .live-badge, .live-run-detail, .live-inbox > p, .live-notification p, .live-app time) { font-size: max(14px, 1em); }

.not-found :is(.not-found-link-copy > span, .not-found-home) { font-size: max(14px, 1em); }

.company-page :is(.company-preview-badge, .company-footer, .company-progress-caption, .company-progress-caption strong,
  .company-progress-caption > span, .company-speaker, .company-speech-signoff, .company-edit-website,
  .company-mascot-caption, .goals-speaker, .goals-speech-note, .goals-mascot-caption,
  .goals-options-count, .goals-bubble, .goals-bubble > span:not(.goals-bubble-mark),
  .goals-selection-summary p, .goals-selection-summary > div > span, .goals-selection-summary > button,
  .goals-confirmation, .template-speaker, .template-grunt-tip p, .template-mascot-caption,
  .template-heading > span, .template-recommendation, .template-recommendation strong,
  .template-recommendation > span, .template-flow-heading, .template-flow-heading strong,
  .template-mini-node > strong, .template-flow-preview > p, .template-human-note,
  .template-current-selection p, .template-current-selection > div > span, .template-confirmation,
  .template-category, .template-description, .template-result, .template-account-line) { font-size: max(14px, 1em); }

@media (max-width: 760px) {
  .marketing .p2-lead,
  .marketing .p2-section-heading > p:last-child,
  .marketing .p2-together .p2-mode-description,
  .marketing .p2-workspace-workflow-link,
  .marketing .p2-shared-note,
  .marketing .p2-footer nav,
  .marketing .p2-footer-bottom,
  .marketing .p2-button { font-size: max(14px, 1em); }
}

@media (max-width: 560px) {
  .landing .landing-eyebrow { letter-spacing: .04em; }
  .landing .landing-button-small,
  .landing-header-compact .landing-button-small { font-size: 14px; }
}
/* Shared surfaces, controls, and portals. */
.p2-glass,
.ui-card {
  border: 1px solid var(--ui-edge);
  color: var(--ui-ink);
  background: var(--ui-surface-glass);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-ink) 7%, transparent), var(--ui-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
}
.ui-card { min-width: 0; border-radius: 22px; }
.ui-card-featured { border-color: var(--ui-edge-strong); background: var(--ui-surface-featured); color: var(--ui-ink); }
.ui-card-inset { border-color: var(--ui-edge-soft); border-radius: 16px; background: var(--ui-surface-inset); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-ink) 5%, transparent); }
.ui-card-link { color: inherit; text-decoration: none; transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ui-card-link:hover { translate: 0 -2px; border-color: var(--ui-edge-strong); box-shadow: var(--ui-shadow); }
.ui-card-link:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 4px; }
.ui-dropdown, .ui-select { position: relative; min-width: 0; }
.ui-select { width: 100%; }
.ui-select-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--ui-control-edge); border-radius: 12px; background: var(--ui-surface-control); color: var(--ui-ink); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-ink) 5%, transparent), 0 4px 14px #17283b12; font: inherit; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer; }
.ui-select-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-trigger > svg { flex: 0 0 auto; color: var(--ui-purple); transition: rotate .15s ease; }
.ui-select-trigger[aria-expanded="true"] > svg { rotate: 180deg; }
.ui-select-trigger:disabled { cursor: not-allowed; opacity: .55; }
.ui-popup { position: fixed; z-index: 2000; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--ui-control-edge); border-radius: 14px; background: var(--ui-surface-raised); color: var(--ui-ink); box-shadow: var(--ui-shadow); -webkit-backdrop-filter: blur(22px) saturate(130%); backdrop-filter: blur(22px) saturate(130%); animation: ui-popup-in .12s ease-out both; }
.ui-select-popup { padding: 5px; }
.ui-select-popup [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 9px 11px; border-radius: 9px; color: var(--ui-ink); font-size: 14px; line-height: 1.4; cursor: pointer; }
.ui-select-popup [role="option"].is-active, .ui-select-popup [role="option"]:hover { background: var(--ui-surface-hover); color: var(--ui-ink); }
.ui-select-popup [role="option"][aria-selected="true"] { font-weight: 650; }
.ui-select-popup [role="option"][aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-select-check { color: var(--ui-success); }
.ui-dropdown-menu { width: 224px; padding: 6px; }
.ui-dropdown-menu > div { display: grid; gap: 2px; }
.ui-dropdown-menu [role="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ui-ink); font: inherit; font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; }
.ui-dropdown-menu [role="menuitem"]:hover, .ui-dropdown-menu [role="menuitem"]:focus-visible { outline: 0; background: var(--ui-surface-hover); color: var(--ui-ink); }
.ui-dropdown-menu [role="menuitem"]:disabled { cursor: not-allowed; opacity: .55; }
.ui-menu-item-icon { display: grid; flex: 0 0 20px; place-items: center; color: var(--ui-purple); }
.live-app { min-height: 100vh; color: var(--ui-ink); background: var(--ui-screen-background); }
.live-app :is(.live-header, .live-sidebar, .demo-editor-sidebar) { color: var(--ui-ink); background: var(--ui-surface-raised); border-color: var(--ui-edge); }
.live-app :is(.live-content, .demo-editor-main) { color: var(--ui-ink); background: transparent; }
.live-app :is(.live-card, .live-auth-card, .live-settings, .live-inbox, .live-run, .workspace-panel, .workspace-editor-surface, .workspace-sidebar, .workspace-panel, .workspace-current-flow, .demo-editor-heading, .editor-heading, .editor-tabs, .editor-toolbar) { color: var(--ui-ink); border-color: var(--ui-edge); background-color: var(--ui-surface-glass); }
.live-app :is(.live-node, .workspace-layout .live-node, .demo-flow-node, .workspace-card, .workspace-layout .workspace-panel, .demo-account) { color: var(--ui-ink); border-color: var(--ui-edge); background: var(--ui-surface); }
.live-app :is(.live-workspace-label p, .live-product, .live-heading p, .live-muted, .live-hint, .live-empty, .live-run time, .workspace-layout p, .workspace-layout small, .demo-node-detail, .demo-node-top, .demo-node-bottom, .output-placeholder) { color: var(--ui-muted); }
.live-app :is(.live-workspace-label strong, .live-heading h1, .workspace-layout h1, .workspace-layout h2, .workspace-layout h3, .demo-editor-heading h1) { color: var(--ui-ink); }
.live-app :is(.live-nav-title, .workspace-navigation [aria-current], .live-unread, .live-node-active, .active-node) { color: var(--ui-link); border-color: var(--ui-edge-strong); background: var(--ui-surface-selected); }
.live-app :is(.live-node-icon, .workspace-panel-icon, .account-avatar, .editor-title-icon, .node-symbol) { color: var(--ui-purple); border-color: var(--ui-edge); background: var(--ui-surface-selected); }
.live-app :is(.live-note, .live-pending, .demo-run-banner.waiting, .setup-strip) { color: var(--ui-warning); border-color: var(--ui-edge); background: var(--ui-surface-warning); }
.live-app :is(.live-error, .field-error) { color: var(--ui-danger); border-color: var(--ui-edge); background: var(--ui-surface-danger); }
.live-app :is(.live-completed, .live-available, .live-node-done, .done-node, .demo-run-banner.success) { color: var(--ui-success); border-color: var(--ui-edge); background: var(--ui-surface-success); }
.live-app :is(.live-notification, .live-run-detail, .workspace-canvas-footer, .demo-canvas-toolbar, .demo-run-banner, .editor-next, .demo-output, .output-placeholder, .approved-output, .demo-complete) { color: var(--ui-ink); border-color: var(--ui-edge); background-color: var(--ui-surface-raised); }
.live-app :is(.demo-output textarea, .live-form input, .live-form select, .live-form textarea, .company-profile input, .company-profile textarea) { color: var(--ui-ink); border-color: var(--ui-edge); background: var(--ui-surface-control); }
.live-app :is(.company-profile, .workspace-inbox, .live-wallet) { border-color: var(--ui-edge); background-color: var(--ui-surface-glass); }
.live-app :is(.company-profile h2, .profile-heading, .workspace-card strong, .workspace-panel-intro h2) { color: var(--ui-ink); }
.live-app .demo-status-pill.success { color: var(--ui-success); background: var(--ui-surface-success); }
.live-app .live-count { color: var(--ui-primary-foreground); background: var(--ui-primary); }
.live-app .live-badge { color: var(--ui-link); background: var(--ui-surface-selected); }
.grunt-screen :is(.company-profile, .goals-speech, .template-speech, .template-card, .company-speech, .goals-group, .goals-action-bar, .template-action-bar, .company-url-field, .custom-goal, .goals-confirmation, .template-confirmation, .human-note, .demo-note, .demo-account, .demo-dialog, .demo-editor-sidebar, .demo-editor-main, .demo-canvas, .demo-flow-node, .editor-next, .demo-run-banner, .demo-output, .output-placeholder, .approved-output, .demo-complete) { color: var(--ui-ink); border-color: var(--ui-edge); }
.grunt-screen :is(.company-profile, .goals-speech, .template-card, .company-speech, .goals-group, .goals-action-bar, .template-action-bar, .company-url-field, .custom-goal, .demo-note, .demo-account, .demo-dialog, .demo-editor-sidebar, .demo-flow-node, .editor-next, .demo-run-banner, .demo-output, .output-placeholder, .approved-output, .demo-complete) { background-color: var(--ui-surface); }
.grunt-screen :is(.template-speech, .template-recommendation, .goals-confirmation, .template-confirmation, .human-note) { background-color: var(--ui-surface-selected); }
.grunt-screen :is(.template-flow-preview, .template-mini-node, .demo-mini-flow li > span, .demo-output textarea) { color: var(--ui-ink); background-color: var(--ui-surface-control); }
.grunt-screen :is(.company-speech h1, .goals-speech h1, .template-speech h1, .goals-options-heading h2, .template-heading h2, .template-card strong, .company-profile strong, .demo-template-heading strong) { color: var(--ui-ink); }
.grunt-screen :is(.company-explanation, .company-speech-signoff, .goals-speech > p, .template-speech > p, .goals-options-heading p, .template-heading p, .template-description, .template-flow-preview > p, .demo-template-description, .template-current-selection p) { color: var(--ui-muted); }
.grunt-screen :is(.goals-bubble, .template-card, .template-mini-node, .demo-account) { border-color: var(--ui-edge); }
.marketing :is(.p2-template-builder, .p2-template-node, .p2-template-placeholder, .p2-question-item, .pricing-discount-grid article, .pricing-demo-banner, .program-card, .alt-card, .workflow-index-card, .integration-card) { color: var(--ui-ink); border-color: var(--ui-edge); background-color: var(--ui-surface-glass); }
.marketing :is(.p2-template-node, .p2-template-placeholder) { background: var(--ui-surface); }
.marketing :is(.p2-template-node strong, .p2-template-placeholder strong, .pricing-discount-grid h3, .pricing-table, .alt-card h3, .alt-card strong) { color: var(--ui-ink); }
.marketing :is(.p2-template-node small, .p2-template-picker > button, .p2-template-description, .p2-template-builder-footer, .pricing-card-description, .pricing-work, .pricing-card li, .pricing-discount-grid p, .p2-question-trigger, .p2-faq-answer) { color: var(--ui-muted); }
.marketing :is(.p2-question-trigger, .p2-template-picker > button:hover, .pricing-table thead, .p2-space-card li) { background: var(--ui-surface-control); }
.marketing .ui-card.ui-card-featured, .marketing .pricing-card-featured { border-color: var(--ui-edge-strong); color: var(--ui-ink); background: var(--ui-surface-featured); box-shadow: var(--ui-shadow); }
@keyframes ui-popup-in { from { opacity: 0; translate: 0 -3px; } to { opacity: 1; translate: 0 0; } }
@supports not (backdrop-filter: blur(1px)) {
  .p2-glass, .ui-card { background: var(--ui-surface); }
  .ui-popup { background: var(--ui-surface-raised); }
}
@media (prefers-reduced-transparency: reduce) {
  .p2-glass, .ui-card { background: var(--ui-surface); }
  .ui-popup { background: var(--ui-surface-raised); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-popup { animation: none; }
}
/* Shared primary appearance for Button/ButtonLink, selected controls, and native
   application buttons. Feature styles own dimensions; this file owns states.
   Register the shade so the gradient animates without dimming text or shadows. */
@property --ui-primary-shade {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* Loading is temporary unavailability, not an inactive action. Keep the primary
   appearance while native disabled semantics still prevent early/repeat clicks. */
:is(.ui-primary, .primary-button):not(:disabled):not([aria-disabled="true"]),
:is(.ui-primary, .primary-button)[aria-busy="true"] {
  --ui-primary-shade: 0%;
  color: var(--ui-primary-foreground);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ui-primary-start), black var(--ui-primary-shade)),
    color-mix(in srgb, var(--ui-primary-end), black var(--ui-primary-shade)));
  border: 1px solid var(--ui-primary-border);
  box-shadow: var(--ui-primary-shadow);
  transition: --ui-primary-shade var(--ui-primary-transition);
}

@media (hover: hover) {
  :is(.ui-primary, .primary-button):not(:disabled):not([aria-disabled="true"]):hover {
    --ui-primary-shade: var(--ui-primary-hover-shade);
  }
}

:is(.ui-primary, .primary-button):not(:disabled):not([aria-disabled="true"]):active {
  --ui-primary-shade: var(--ui-primary-hover-shade);
}

:is(.ui-primary, .primary-button):not(:disabled):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 4px;
}

:is(.ui-primary, .primary-button):is(:disabled, [aria-disabled="true"]) {
  opacity: 1;
  cursor: not-allowed;
}

:is(.ui-primary, .primary-button):is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
  --ui-primary-shade: 0%;
  color: var(--ui-muted);
  background: var(--ui-surface-inset);
  border: 1px solid var(--ui-edge);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.ui-primary, .primary-button):not(:disabled):not([aria-disabled="true"]),
  :is(.ui-primary, .primary-button)[aria-busy="true"] {
    transition: none;
  }
}
/* Light-theme materials. Keep font, layout, and type metrics in the components;
   this file owns color, translucency, decorative edges, and surface interaction. */
/* Typed stops let glass and purple gradients interpolate instead of snapping. */
@property --hero-button-start {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}
@property --hero-button-end {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

:root {
  /* Frosted outer panels; a light highlight instead of a dark inset outline. */
  :is(.p2-glass, .ui-card, .demo-workspace, .p2-template-explorer,
      .p2-shared-scene, .calculator-results, .alt-visual:where(:not(.alt-visual-steps)),
      .alt-example-workspace, .alt-table-wrap, .alt-bottom,
      .live-card, .live-auth-card, .workspace-panel, .workspace-editor-surface) {
    border-color: var(--ui-edge);
    box-shadow: var(--ui-panel-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
  }
  :is(.alt-visual:where(:not(.alt-visual-steps)), .alt-example-workspace, .alt-table-wrap, .workflow-search,
      .workflow-index-empty, .integration-example blockquote, .workflow-preview blockquote) {
    background: var(--ui-surface-glass);
    border-color: var(--ui-edge);
    color: var(--ui-ink);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
  }

  /* Nested layers must remain translucent or the outer glass cannot show through. */
  .marketing :is(.demo-node, .demo-artifact, .demo-source-preview,
      .demo-channel-message, .demo-report-attachment, .p2-template-builder,
      .p2-template-node, .p2-template-placeholder, .p2-space-card,
      .p2-template-picker > button, .calculator-role, .calculator-result-metrics > div) {
    background: var(--ui-surface-glass-nested);
    border-color: var(--ui-edge-glass-nested);
    box-shadow: var(--ui-shadow-glass-nested);
    /* The enclosing panel supplies blur; don't frost every nested layer again. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .marketing .pricing-table-scroll { background: var(--ui-surface-glass); }
  .marketing .p2-template-picker > button[aria-pressed=true] {
    background: color-mix(in srgb, var(--ui-surface-glass-nested), var(--ui-surface-selected) 12%);
    box-shadow: var(--ui-shadow-glass-nested);
  }
  .marketing .calculator-role.ui-card,
  .marketing .hero-explorer :is(.demo-node, .demo-artifact, .demo-source-preview),
  .marketing .p2-templates :is(.p2-template-builder, .p2-template-node,
      .p2-template-placeholder, .p2-template-picker > button) {
    box-shadow: inset 0 1px 0 #ffffff40, 0 8px 24px #4936551a, 0 2px 6px #4936550d;
  }
  .marketing :is(.demo-toolbar, .hero-demo-canvas, .p2-template-toolbar,
      .p2-template-builder-heading, .demo-document-meta, .demo-document-footer,
      .demo-dispatch-top, .pricing-table thead) {
    background: var(--ui-surface-inset);
    border-color: var(--ui-edge-soft);
  }
  .marketing .p2-template-flow {
    background: radial-gradient(#76658126 .8px, transparent .8px) 0 0 / 14px 14px;
  }
  .marketing :is(.p2-template-toolbar, .p2-template-builder-heading, .p2-template-builder-footer) { background: transparent; }
  .marketing :is(.p2-question-trigger, .p2-space-card li) { background: transparent; }
  .marketing :is(.demo-node-icon, .demo-source-app, .demo-source-packet,
      .demo-dispatch-route > span, .p2-template-node-icon, .p2-template-placeholder-icon,
      .calculator-metric-icon) {
    border-color: var(--ui-edge-glass-nested);
    background: var(--ui-surface-glass-detail);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .marketing :is(.p2-template-node strong, .p2-template-placeholder strong,
      .p2-template-picker > button, .p2-question-trigger) { color: var(--ui-ink); }
  .marketing .demo-node-complete .demo-node-icon { color: var(--ui-success); }

  /* Shared interactive surfaces: stable geometry and no purple hover border. */
  :is(.ui-card-link, .p2-button.p2-glass, .pricing-card,
      .alt-directory-nav a) {
    transition-property: background, box-shadow;
  }
  :is(.ui-card-link, .p2-button.p2-glass, .pricing-card,
      .alt-directory-nav a):hover {
    transform: none;
    translate: none;
    border-color: var(--ui-edge);
  }
  .marketing .pricing-card-featured:hover { border-color: var(--ui-edge-strong); }
  @media (hover: hover) {
    :is(.ui-card-link, .p2-button.p2-glass, .alt-directory-nav a,
        .p2-template-picker > button):hover {
      background: color-mix(in srgb, var(--ui-surface-hover) 70%, transparent);
      box-shadow: inset 0 1px 0 #ffffffcc, var(--ui-shadow);
    }
    .marketing .p2-template-placeholder:hover {
      background: color-mix(in srgb, var(--ui-surface-hover) 70%, transparent);
      border-color: var(--ui-edge-glass-nested);
    }
  }

  /* Shared edges and elevation. Nested controls compensate for the white glass
     behind them below, matching the CTA's rendered cream rather than its alpha. */
  .marketing .p2-hero :is(.p2-actions .p2-glass, .demo-audiences button),
  :is(.landing-product-links, .ui-select-trigger, .ui-popup, .calculator-role-fields input,
      .live-form input, .live-form textarea, .live-form select,
      .company-profile input, .company-profile textarea, .company-url-field,
      .demo-output textarea, .workflow-search) {
    --hero-button-start: var(--ui-surface-glass);
    --hero-button-end: var(--ui-surface-glass);
    color: var(--ui-ink);
    background: linear-gradient(135deg, var(--hero-button-start), var(--hero-button-end));
    border-color: var(--ui-edge);
    border-radius: 14px;
    box-shadow: var(--ui-panel-shadow);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
    transition: --hero-button-start .24s ease, --hero-button-end .24s ease,
      color .24s ease, border-color .24s ease, box-shadow .24s ease,
      --ui-primary-shade var(--ui-primary-transition);
  }
  :is(.landing-product-links, .ui-select-trigger, .ui-popup, .calculator-role-fields input,
      .live-form input, .live-form textarea, .live-form select,
      .company-profile input, .company-profile textarea, .company-url-field,
      .demo-output textarea, .workflow-search) {
    --hero-button-start: var(--ui-surface-control);
    --hero-button-end: var(--ui-surface-control);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .marketing .p2-hero .demo-audiences button[aria-pressed=true] {
    --hero-button-start: color-mix(in srgb, var(--ui-primary-start), black var(--ui-primary-shade));
    --hero-button-end: color-mix(in srgb, var(--ui-primary-end), black var(--ui-primary-shade));
    color: var(--ui-primary-foreground);
    border-color: var(--ui-primary-border);
    box-shadow: var(--ui-primary-shadow);
  }
  @media (hover: hover) {
    .marketing .p2-hero :is(.p2-actions .p2-glass, .demo-audiences button):not([aria-pressed=true]):hover,
    :is(.ui-select-trigger, .calculator-role-fields input,
        .live-form input, .live-form textarea, .live-form select,
        .company-profile input, .company-profile textarea, .company-url-field,
        .demo-output textarea, .workflow-search):not(:disabled):hover {
      --hero-button-start: color-mix(in srgb, var(--ui-surface-hover) 70%, transparent);
      --hero-button-end: color-mix(in srgb, var(--ui-surface-hover) 70%, transparent);
      box-shadow: inset 0 1px 0 #ffffffcc, 0 8px 22px #49365529, 0 2px 6px #49365514;
    }
    :is(.ui-select-trigger, .calculator-role-fields input,
        .live-form input, .live-form textarea, .live-form select,
        .company-profile input, .company-profile textarea, .company-url-field,
        .demo-output textarea, .workflow-search):not(:disabled):hover {
      --hero-button-start: var(--ui-surface-control-hover);
      --hero-button-end: var(--ui-surface-control-hover);
    }
  }

  /* Comparison, integration, workflow, and program page-specific illustrations. */
  .alt-container { --alt-paper: var(--ui-surface-glass-nested); --alt-accent: var(--ui-link); }
  :is(.alt-step-detail, .alt-example-result, .alt-visual-step, .alt-mark,
      .integration-flow li,
      .workflow-step-number, .integration-logo-fallback) {
    background: var(--ui-surface-glass-nested);
    border-color: var(--ui-edge-glass-nested);
    color: var(--ui-ink);
  }
  /* The brief's numbered markers read like the argument's numbered rows. */
  .alt-visual-blueprint .alt-visual-step { background: var(--ui-surface-selected); color: var(--ui-link); }
  :is(.integration-example, .workflow-preview) blockquote {
    background: var(--ui-surface-glass-nested);
    border-color: var(--ui-edge-glass-nested);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .alt-table :is(th, td):nth-child(2) { background: var(--ui-surface-inset); }
  :is(.workflow-related-card li, .workflow-index-card ol) { color: var(--ui-muted); }
  :is(.workflow-preview-result, .integration-result, .alt-example-review) { color: var(--ui-success); }
  .workflow-preview-result { background: var(--ui-surface-success); }
  .workflow-search input::placeholder { color: var(--ui-subtle); opacity: 1; }
  :is(.not-found-description, .not-found-link-copy > span) { color: var(--ui-muted); }
  .not-found-link { background: var(--ui-surface-glass); border-color: var(--ui-edge); }
  .not-found-link:hover { transform: none; border-color: var(--ui-edge); background: var(--ui-surface-hover); }
  .not-found-link-copy strong { color: var(--ui-ink); }

  /* Larger dialogs retain a denser reading surface. Option popups use glass above. */
  :is(.landing-mobile-nav, .demo-dialog, .oe-dialog) {
    background: #fffdf8f5;
    border-color: var(--ui-edge);
    color: var(--ui-ink);
    box-shadow: var(--ui-panel-shadow);
  }
  .ui-popup :is([role="option"].is-active, [role="option"]:hover,
      [role="menuitem"]:hover, [role="menuitem"]:focus-visible) {
    background: var(--ui-surface-control-hover);
    box-shadow: inset 0 1px 0 #ffffffcc, var(--ui-shadow);
  }
  :is(.grunt-screen, .demo-dialog) :is(.live-button, .secondary-button, .signin-provider):not(:disabled):hover {
    border-color: var(--ui-control-edge);
  }

  /* Auth, onboarding, and workspace share the light material. */
  :is(.grunt-screen, .live-app) :is(.company-profile, .company-speech,
      .goals-speech, .template-speech, .goals-group, .template-card,
      .demo-account, .demo-flow-node, .demo-output, .output-placeholder,
      .approved-output, .demo-complete, .workspace-current-flow, .workspace-panel) {
    background: var(--ui-surface-glass);
    border-color: var(--ui-edge);
    box-shadow: inset 0 1px 0 #ffffffb3, var(--ui-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    backdrop-filter: blur(16px) saturate(115%);
  }
  :is(.grunt-screen, .live-app) :is(.demo-canvas, .demo-editor-main,
      .demo-editor-sidebar, .workspace-sidebar, .workspace-editor-heading,
      .workspace-canvas-toolbar, .workspace-canvas-footer) {
    background-color: var(--ui-surface-inset);
    border-color: var(--ui-edge-soft);
  }
  :is(.grunt-screen, .live-app) :is(.goals-group, .template-card,
      .demo-flow-node, .demo-account, .workspace-current-flow) {
    background: var(--ui-surface-glass-nested);
    border-color: var(--ui-edge-glass-nested);
    box-shadow: var(--ui-shadow-glass-nested);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .grunt-screen :is(.company-speech, .goals-speech)::after,
  .grunt-screen .company-speech::before { background: var(--ui-surface-glass); border-color: var(--ui-edge); }
  .auth-layout :is(.signin-password-note, .signin-new-account > span) { color: var(--ui-muted); }
  :is(.grunt-screen, .demo-dialog) :is(.demo-account small, .profile-heading > span,
      .company-footer > p, .goals-options-count, .goals-selection-summary > div > span,
      .template-heading > span, .demo-template-heading small, .template-card-actions > span,
      .template-current-selection > div > span, .connection-card p,
      .workspace-card small, .sidebar-demo-note, .setup-checklist,
      .demo-node-top, .demo-node-detail, .demo-node-bottom, .run-context,
      .permission-list, .dialog-footnote) { color: var(--ui-muted); }
  .grunt-screen .setup-checklist :is(.done, svg) { color: var(--ui-success); }
  .grunt-screen .approval-node > strong { color: var(--ui-warning); }
  .live-app .live-run-detail dt { color: var(--ui-muted); }
  :is(.grunt-screen, .live-app, .demo-dialog) :is(input, textarea)::placeholder { color: var(--ui-subtle); opacity: 1; }
  .demo-dialog .connection-card { background: var(--ui-surface-glass); border-color: var(--ui-edge); }

}