/* Shared demo portal chrome — solid panels on top of the mountain backdrop */

.demo-portal .tile,
#customize-app .tile,
#customize-app .reveal-card-scroll {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.demo-portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.demo-portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--ft-radius-xl);
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--ft-neutral-300);
  background: #fff;
  color: var(--ft-neutral-900);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.demo-portal-btn:hover {
  background: var(--ft-neutral-100);
}

.demo-portal-btn--primary {
  border-color: transparent;
  background: var(--ft-orange-500);
  color: var(--ft-neutral-900);
  box-shadow: var(--ft-shadow-sm);
}

.demo-portal-btn--primary:hover {
  filter: brightness(1.03);
  background: var(--ft-orange-500);
}

.demo-portal-btn--accent {
  border-color: rgb(255 147 39 / 0.35);
  color: var(--ft-orange-900);
  background: var(--ft-orange-100);
}

.demo-portal-btn--accent:hover {
  background: rgb(255 224 199 / 0.85);
}

.demo-portal-btn--danger {
  border-color: rgb(220 38 38 / 0.2);
  color: #dc2626;
}

.demo-portal-btn--danger:hover {
  background: #fef2f2;
}

/* Proposal results wizard — design system alignment */
#customize-app .reveal-card,
#customize-app .reveal-card-scroll {
  border: 1px solid var(--ft-neutral-300) !important;
  border-radius: var(--ft-radius-3xl) !important;
  box-shadow: var(--ft-shadow-md) !important;
  background: #ffffff !important;
}

#customize-app .reveal-card:not(.reveal-card-scroll) {
  background: linear-gradient(180deg, #ffffff 0%, var(--ft-neutral-100) 100%) !important;
  border-color: var(--ft-neutral-300) !important;
}

#customize-app .reveal-plan-hero-block {
  background: #ffffff;
  border: 1px solid var(--ft-neutral-300);
  border-radius: var(--ft-radius-2xl);
  box-shadow: var(--ft-shadow-sm);
  padding-top: 1.5rem;
}

#customize-app .reveal-plan-hero-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: auto;
  height: 4px;
  border-radius: var(--ft-radius-2xl) var(--ft-radius-2xl) 0 0;
  background: var(--ft-gradient-brand);
}

#customize-app .reveal-plan-hero,
#customize-app .reveal-plan-hero-company {
  font-family: var(--ft-font-heading);
  color: var(--ft-neutral-900);
}

#customize-app .reveal-plan-hero-accent {
  color: var(--ft-orange-500);
}

#customize-app .reveal-plan-hero-accent::after {
  background: linear-gradient(90deg, rgb(255 147 39 / 0.35), rgb(255 147 39 / 0.08));
}

#customize-app .reveal-plan-hero-goals {
  color: var(--ft-neutral-900);
  font-weight: 800;
  background: linear-gradient(transparent 62%, rgb(255 147 39 / 0.2) 62%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#customize-app .reveal-eyebrow,
#customize-app .reveal-plan-hero-eyebrow {
  color: var(--ft-teal-900);
  letter-spacing: 0.08em;
}

#customize-app .reveal-plan-stat-icon {
  color: var(--ft-teal-500);
  border-color: rgb(64 189 175 / 0.35);
  background: var(--ft-teal-100);
}

#customize-app .reveal-plan-stat-value {
  font-family: var(--ft-font-heading);
  color: var(--ft-neutral-900);
}

#customize-app .reveal-plan-stat-label {
  color: var(--ft-neutral-700);
}

#customize-app .reveal-plan-stats {
  border-top-color: var(--ft-neutral-300);
}

#customize-app .reveal-plan-stat + .reveal-plan-stat {
  border-left-color: var(--ft-neutral-300);
}

#customize-app .reveal-step-nav {
  background: var(--ft-neutral-100);
  border: 1px solid var(--ft-neutral-300);
  padding: 3px;
}

#customize-app .reveal-step-nav-btn.is-active {
  background: #fff;
  color: var(--ft-neutral-900);
  box-shadow: var(--ft-shadow-sm);
}

#customize-app .reveal-step-nav-btn.is-active .reveal-step-nav-num {
  background: var(--ft-orange-500);
  color: var(--ft-neutral-900);
}

#customize-app .reveal-step-nav-sticky.is-stuck {
  background: rgb(255 255 255 / 0.94);
  border: 1px solid var(--ft-neutral-300);
  border-top: none;
}

#customize-app .reveal-scroll-section + .reveal-scroll-section {
  background: var(--ft-neutral-100);
  box-shadow: inset 0 1px 0 var(--ft-neutral-300);
}

#customize-app .reveal-scroll-section-num {
  background: var(--ft-teal-500);
  color: #fff;
}

#customize-app .reveal-scroll-section-title {
  font-family: var(--ft-font-heading);
  color: var(--ft-teal-900);
}

#customize-app .reveal-module-explorer-grid {
  border-color: var(--ft-neutral-300);
  border-radius: var(--ft-radius-2xl);
}

#customize-app .reveal-module-nav {
  background: var(--ft-neutral-100);
  border-right-color: var(--ft-neutral-300);
}

#customize-app .reveal-module-row {
  border-color: var(--ft-neutral-300);
  color: var(--ft-neutral-900);
  background: #fff;
}

#customize-app .reveal-module-row.is-selected {
  border-color: var(--ft-orange-500);
  background: var(--ft-orange-100);
  box-shadow: 0 0 0 2px rgb(255 147 39 / 0.15);
}

#customize-app .reveal-module-row-num {
  background: var(--ft-teal-500);
}

#customize-app .reveal-module-nav-meta,
#customize-app .reveal-module-nav-summary {
  border-top-color: var(--ft-neutral-300);
  color: var(--ft-neutral-700);
}

#customize-app .reveal-lesson-badge {
  color: var(--ft-teal-900);
  background: var(--ft-teal-100);
  border-color: rgb(64 189 175 / 0.35);
}

#customize-app .reveal-lesson-card {
  border-radius: var(--ft-radius-xl);
  border-color: var(--ft-neutral-300);
}

#customize-app .reveal-lesson-card-title {
  font-family: var(--ft-font-heading);
}

#customize-app .reveal-kpi-dashboard .kpi-roi-embed.tile {
  background: #fff !important;
  border: 1px solid var(--ft-neutral-300) !important;
  box-shadow: var(--ft-shadow-sm) !important;
}

#customize-app .reveal-kpi-explainer {
  border-top-color: var(--ft-neutral-300);
}

#customize-app .reveal-timeline-item.is-done .reveal-timeline-marker {
  background: var(--ft-orange-500);
  border-color: var(--ft-orange-500);
  color: var(--ft-neutral-900);
}

#customize-app .reveal-timeline-marker {
  border-color: var(--ft-neutral-300);
}

#customize-app .reveal-founders-names {
  color: var(--ft-teal-900);
}

#customize-app .goal-recap,
#customize-app .reveal-survey-recap {
  background: var(--ft-orange-100);
  border-color: rgb(255 147 39 / 0.35);
}

#customize-app .goal-recap-label,
#customize-app .reveal-survey-recap-heading {
  color: var(--ft-orange-900);
}

#customize-app .survey-chip.selected {
  border-color: var(--ft-orange-500);
  background: var(--ft-orange-100);
  color: var(--ft-orange-900);
}

#customize-app .progress-dot.active {
  background: var(--ft-orange-500);
}

#customize-app .progress-dot.done {
  background: var(--ft-orange-100);
}

#customize-app .reveal-founders-box {
  background: #fff;
  border-color: var(--ft-neutral-300);
  border-radius: var(--ft-radius-2xl);
}

#customize-app .reveal-quote-calc {
  border-color: var(--ft-neutral-300);
  border-radius: var(--ft-radius-2xl);
  box-shadow: var(--ft-shadow-sm);
}

#customize-app .reveal-quote-calc-label,
#customize-app .reveal-quote-discount-note {
  color: var(--ft-teal-900);
}

#customize-app .reveal-quote-total-new,
#customize-app .reveal-roi-cost-new,
#customize-app .reveal-meta {
  color: var(--ft-orange-500);
}

#customize-app .reveal-roi-calc {
  background: #fff;
  border: 1px solid var(--ft-neutral-300);
  border-radius: var(--ft-radius-2xl);
  box-shadow: var(--ft-shadow-sm);
}

#customize-app .reveal-title,
#customize-app .reveal-lesson-card-play-icon {
  font-family: var(--ft-font-heading);
}

#customize-app .reveal-lesson-card-play-icon {
  color: var(--ft-orange-500);
}

#customize-app .reveal-visual {
  background: var(--ft-teal-100);
  border-color: rgb(64 189 175 / 0.35);
  color: var(--ft-teal-900);
}

#customize-app .reveal-module-pill {
  background: var(--ft-orange-100);
  border-color: rgb(255 147 39 / 0.35);
  color: var(--ft-orange-900);
}