/* ── Demo Modal v2 ──
   Self-contained styles using tokens.css variables.
   Progressive staged form, social proof, abandoned capture.
   Include AFTER tokens.css and components.css. */

@keyframes demo-spin {
  to { transform: rotate(360deg); }
}
@keyframes demo-fade-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demo-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes demo-bar-rise {
  from { transform: scaleY(0.25); opacity: 0.45; }
  to   { transform: scaleY(1); opacity: 1; }
}
@keyframes demo-line-draw {
  from { stroke-dashoffset: 320; }
  to   { stroke-dashoffset: 0; }
}
@keyframes demo-point-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.72; }
}

html.overflow-hidden,
body.overflow-hidden {
  overflow: hidden !important;
}

/* ── Backdrop & Wrapper ── */
#demo-request-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.15s ease;
}
#demo-request-modal.hidden { display: none !important; }
#demo-request-modal.demo-modal-closing { opacity: 0; pointer-events: none; }

#demo-request-modal > div[data-demo-backdrop] {
  position: absolute;
  inset: 0;
  background: rgba(8,17,42,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#demo-request-modal > div[data-demo-wrapper] {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* ── Card ── */
.demo-modal-card {
  width: 100%;
  max-width: 62rem;
  max-height: min(92vh, 54rem);
  background: var(--color-white, #fff);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 1rem;
  box-shadow:
    0 2px 6px rgba(8,17,42,0.06),
    0 12px 40px rgba(8,17,42,0.12),
    0 0 0 1px rgba(74,111,232,0.08);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(17rem, 0.85fr) minmax(0, 1.15fr);
  animation: demo-fade-in 0.25s ease;
}

.demo-modal-main {
  min-width: 0;
  max-height: min(92vh, 54rem);
  overflow-y: auto;
  background:
    radial-gradient(circle at 90% 5%, rgba(74,111,232,0.08), transparent 28rem),
    var(--color-white, #fff);
}

.demo-modal-aside {
  position: relative;
  /* The panel holds an eyebrow and three short lines. It used to be a fixed
     height with justify-content:space-between, which spread those apart and left
     ~281px of dead space, pushing the form down until the submit button rendered
     BELOW THE FOLD at 1440x900 - on every page that does not load brand.css,
     which is 263 of them. brand.css has carried a local fix for its own 30 pages
     since Brand 2.0; this moves the fix to the source so it applies everywhere.
     The effective height came from the light-theme override further down, not
     from here, so both had to change. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: flex-start;
  padding: 2rem;
  color: var(--color-white, #fff);
  background:
    radial-gradient(circle at 12% 8%, rgba(74,111,232,0.62), transparent 16rem),
    linear-gradient(145deg, #071226 0%, #0b1c3f 52%, #0c1325 100%);
}
.demo-modal-aside::after {
  content: "";
  position: absolute;
  inset: auto -5rem -7rem 20%;
  height: 15rem;
  border-radius: 50%;
  background: rgba(20,184,166,0.18);
  filter: blur(36px);
  pointer-events: none;
}
.demo-modal-aside > * {
  position: relative;
  z-index: 1;
}
.demo-aside-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.demo-modal-aside h3 {
  max-width: 16rem;
  margin: 0;
  font-family: var(--font-serif, 'Source Serif 4', serif);
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.demo-modal-aside p {
  max-width: 18rem;
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 0.9rem;
  line-height: 1.65;
}
.demo-visual-panel {
  position: relative;
  min-height: 11.5rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0.85rem;
  background: rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.demo-visual-panel::before {
  content: "";
  position: absolute;
  inset: 1rem;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 3.25rem 2.25rem;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
}
.demo-visual-chart {
  position: absolute;
  inset: 2.2rem 1.25rem 1.4rem 1.25rem;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}
.demo-visual-chart span {
  flex: 1;
  min-width: 0;
  height: var(--bar-height);
  transform-origin: bottom;
  border-radius: 0.35rem 0.35rem 0 0;
  background: linear-gradient(180deg, #8fb1ff, #4a6fe8);
  animation: demo-bar-rise 1.2s cubic-bezier(.2,.8,.2,1) both;
}
.demo-visual-chart span:nth-child(2) { animation-delay: 0.08s; }
.demo-visual-chart span:nth-child(3) { animation-delay: 0.16s; }
.demo-visual-chart span:nth-child(4) { animation-delay: 0.24s; }
.demo-visual-line {
  position: absolute;
  inset: 1.25rem 1rem 1rem;
  width: calc(100% - 2rem);
  height: calc(100% - 2.25rem);
  overflow: visible;
}
.demo-visual-line path {
  stroke: #2dd4bf;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 320;
  animation: demo-line-draw 1.4s ease both;
}
.demo-visual-line circle {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  animation: demo-point-pulse 1.6s ease-in-out infinite;
}
.demo-visual-metric {
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding: 1rem 0;
  color: var(--color-white, #fff);
  font-family: var(--font-serif, 'Source Serif 4', serif);
  font-size: 1.35rem;
  line-height: 1.22;
}
.demo-aside-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.demo-aside-stack span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 0.38rem 0.65rem;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.84);
  font-size: 0.72rem;
  font-weight: 650;
}

/* ── Header ── */
.demo-modal-header {
  padding: 2rem 2rem 1rem;
  position: relative;
}
.demo-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-3, 0.75rem);
  color: var(--brand-primary, #4a6fe8);
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.demo-modal-kicker::before {
  content: '';
  flex: 0 0 auto;
  width: 1.5rem;
  height: 2px;
  background: var(--brand-primary, #4a6fe8);
  border-radius: 1px;
}
.demo-modal-heading {
  margin: 0 0 var(--space-2, 0.5rem);
  color: var(--text-primary, #0a1628);
  font-family: var(--font-serif, 'Source Serif 4', serif);
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.demo-modal-sub {
  margin: 0;
  color: var(--text-secondary, #4B5563);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.demo-trust-row {
  margin: 0 2rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.demo-trust-row span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(74,111,232,0.14);
  border-radius: 999px;
  padding: 0.38rem 0.7rem;
  background: rgba(74,111,232,0.06);
  color: var(--brand-primary, #4a6fe8);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Social proof strip ── */
.demo-social-strip {
  margin: 0 var(--space-6, 1.5rem) var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(74,111,232,0.04);
  border: 1px solid rgba(74,111,232,0.1);
  border-radius: var(--radius-sm, 0.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: var(--text-secondary, #4B5563);
}
.demo-social-strip .demo-stars {
  color: #F59E0B;
  letter-spacing: 0.05em;
}

/* ── Smart routing copy ── */
.demo-route-hint {
  margin: 0 2rem;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: linear-gradient(135deg, rgba(74,111,232,0.08), rgba(20,184,166,0.08));
  border: 1px solid rgba(74,111,232,0.14);
  border-radius: 0.8rem;
  font-size: 0.875rem;
  color: var(--text-primary, #0a1628);
  line-height: 1.5;
  font-weight: 500;
  display: none;
}
.demo-route-hint.visible { display: block; }

/* ── Dismiss button ── */
.demo-dismiss {
  position: absolute;
  top: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--color-navy-900, #0a1628);
  border: none;
  border-radius: 50%;
  color: var(--color-white, #fff);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.demo-dismiss:hover {
  background: var(--color-navy-700, #1a2f5e);
  transform: scale(1.05);
}
.demo-dismiss svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ── Form body ── */
.demo-modal-body {
  padding: 1.25rem 2rem 2rem;
}

/* ── Steps ── */
.demo-step { display: none; animation: demo-slide-up 0.25s ease; }
.demo-step.active { display: block; }

/* ── Step 1: Email-only ── */
.demo-step-1 {
  text-align: center;
  padding-top: var(--space-4, 1rem);
}
.demo-step-1 .input-el {
  text-align: center;
  font-size: 1.0625rem;
  padding: 0.875rem 1rem;
}

/* ── Form fields ── */
.demo-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.demo-optional-scroll {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: min(26vh, 18rem);
  overflow-y: auto;
  padding-right: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(74,111,232,0.38) rgba(148,163,184,0.12);
}
.demo-optional-scroll::-webkit-scrollbar {
  width: 0.45rem;
}
.demo-optional-scroll::-webkit-scrollbar-track {
  background: rgba(148,163,184,0.12);
  border-radius: 999px;
}
.demo-optional-scroll::-webkit-scrollbar-thumb {
  background: rgba(74,111,232,0.38);
  border-radius: 999px;
}
.demo-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.demo-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary, #0a1628);
  letter-spacing: 0.02em;
}
.demo-input {
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 0.9375rem;
  color: var(--text-primary, #0a1628);
  background: var(--color-white, #fff);
  border: 1px solid var(--border-default, #E5E7EB);
  border-radius: 0.625rem;
  padding: 0.75rem 0.875rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
.demo-input::placeholder { color: var(--text-muted, #9CA3AF); }
.demo-input:focus {
  border-color: var(--brand-primary, #4a6fe8);
  box-shadow: 0 0 0 3px rgba(74,111,232,0.12);
}
.demo-input.error { border-color: #ef4444; }
.demo-input.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }

.demo-error-text {
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 0.25rem;
}

.demo-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #9CA3AF);
}

/* Two-column row */
.demo-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 480px) {
  .demo-row-two { grid-template-columns: 1fr; }
}

/* ── Choice pills (interests/systems) ── */
.demo-choice-label {
  display: block;
  cursor: pointer;
}
.demo-choice-label input[type="checkbox"],
.demo-choice-label input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.demo-choice-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--border-default, #E5E7EB);
  border-radius: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary, #4B5563);
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.demo-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.demo-choice-grid--compact .demo-choice-pill {
  padding-block: 0.56rem;
}
.demo-choice-pill:hover {
  border-color: var(--brand-primary, #4a6fe8);
  background: rgba(74,111,232,0.04);
}
.demo-choice-label input:checked ~ .demo-choice-pill {
  border-color: var(--brand-primary, #4a6fe8);
  background: rgba(74,111,232,0.06);
  color: var(--brand-primary, #4a6fe8);
}
.demo-choice-check {
  width: 1rem;
  height: 1rem;
  color: var(--brand-primary, #4a6fe8);
  opacity: 0;
  flex-shrink: 0;
}
.demo-choice-label input:checked ~ .demo-choice-pill .demo-choice-check {
  opacity: 1;
}

/* ── Selected pills preview ── */
.demo-pills-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
  min-height: 0;
}
.demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill, 9999px);
  font-size: 0.75rem;
  font-weight: 500;
}
.demo-pill--selected {
  background: rgba(74,111,232,0.1);
  color: var(--brand-primary, #4a6fe8);
}
.demo-pill--empty {
  background: var(--color-gray-100, #F3F4F6);
  color: var(--text-muted, #9CA3AF);
}

/* ── Buttons ── */
.demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.5rem;
  border: none;
  border-radius: var(--radius-pill, 9999px);
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.demo-privacy-note {
  margin: 1rem 0 0;
  color: var(--text-muted, #9CA3AF);
  font-size: 0.72rem;
  line-height: 1.55;
}
.demo-btn-primary {
  background: var(--brand-primary, #4a6fe8);
  color: var(--color-white, #fff);
}
.demo-btn-primary:hover {
  background: var(--brand-hover, #3658d4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74,111,232,0.25);
}
.demo-btn-primary:active { transform: translateY(0); }
.demo-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.demo-btn-secondary {
  background: transparent;
  color: var(--text-secondary, #4B5563);
  border: 1px solid var(--border-default, #E5E7EB);
}
.demo-btn-secondary:hover {
  background: var(--color-gray-50, #F9FAFB);
}

.demo-btn .demo-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: var(--color-white, #fff);
  border-radius: 50%;
  animation: demo-spin 0.7s linear infinite;
}

/* ── Step indicator dots ── */
.demo-step-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-5, 1.25rem);
}
.demo-step-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-gray-200, #E5E7EB);
  transition: background 0.2s;
}
.demo-step-dot.active {
  background: var(--brand-primary, #4a6fe8);
}

/* ── Abandoned capture micro-modal ── */
.demo-abandon-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,17,42,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 1.5rem;
  animation: demo-fade-in 0.2s ease;
}
.demo-abandon-card {
  width: 90%;
  max-width: 22rem;
  background: var(--color-white, #fff);
  border-radius: 1rem;
  padding: var(--space-5, 1.25rem);
  box-shadow: 0 8px 32px rgba(8,17,42,0.18);
  text-align: center;
}
.demo-abandon-card h3 {
  margin: 0 0 var(--space-2, 0.5rem);
  font-family: var(--font-serif, 'Source Serif 4', serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-primary, #0a1628);
}
.demo-abandon-card p {
  margin: 0 0 var(--space-4, 1rem);
  font-size: 0.875rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.6;
}
.demo-abandon-card .demo-abandon-input {
  margin-bottom: var(--space-3, 0.75rem);
}
.demo-abandon-card .demo-btn {
  width: 100%;
  margin-bottom: var(--space-2, 0.5rem);
}
.demo-abandon-skip {
  font-size: 0.8125rem;
  color: var(--text-secondary, #4B5563);
  cursor: pointer;
  background: var(--color-white, #fff);
  border: 1px solid var(--border-default, #E5E7EB);
  border-radius: 999px;
  width: 100%;
  padding: 0.75rem 1rem;
}
.demo-abandon-skip:hover { border-color: rgba(74,111,232,0.35); color: var(--brand-primary, #4a6fe8); }
.demo-abandon-thanks {
  display: none;
  padding: var(--space-3, 0.75rem) 0;
  color: var(--brand-primary, #4a6fe8);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* ── Chili loading bridge ── */
#demo-chili-loading-bridge {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(10,18,42,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-white, #fff);
  font-family: var(--font-sans, 'IBM Plex Sans', system-ui, sans-serif);
}
#demo-chili-loading-bridge .demo-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: var(--color-white, #fff);
  border-radius: 50%;
  animation: demo-spin 0.7s linear infinite;
}
#demo-chili-loading-bridge p {
  font-size: 0.9375rem;
  opacity: 0.8;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .demo-modal-card {
    max-width: 36rem;
    grid-template-columns: 1fr;
  }
  .demo-modal-aside {
    display: none;
  }
}
@media (max-width: 640px) {
  #demo-request-modal > div[data-demo-wrapper] { padding: 0.75rem; }
  .demo-modal-card { border-radius: 1rem; max-height: 95vh; }
  .demo-modal-main { max-height: 95vh; }
  .demo-modal-heading { font-size: 1.5rem; }
  .demo-choice-grid { grid-template-columns: 1fr; }
  .demo-optional-scroll { max-height: 12rem; }
}
@media (max-width: 480px) {
  .demo-modal-header { padding: var(--space-5, 1.25rem) var(--space-4, 1rem) var(--space-4, 1rem); }
  .demo-modal-body { padding: 0 var(--space-4, 1rem) var(--space-5, 1.25rem); }
  .demo-social-strip { margin: 0 var(--space-4, 1rem) var(--space-2, 0.5rem); font-size: 0.75rem; }
  .demo-route-hint { margin: 0 var(--space-4, 1rem); font-size: 0.8125rem; }
  .demo-trust-row { margin: 0 var(--space-4, 1rem) 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-modal-card,
  .demo-step,
  .demo-visual-chart span,
  .demo-visual-line path,
  .demo-visual-line circle,
  .demo-btn,
  .demo-dismiss {
    animation: none !important;
    transition: none !important;
  }
}

/* Demo modal editorial reset: no space-age panel */
#demo-request-modal > div[data-demo-backdrop] {
  background: rgba(10,22,40,0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.demo-modal-card {
  max-width: 58rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(10,22,40,0.12);
  box-shadow: 0 28px 90px rgba(10,22,40,0.22);
  grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 1.22fr);
}
.demo-modal-main {
  background: #fff;
}
.demo-modal-aside {
  color: var(--text-primary, #0a1628);
  background: linear-gradient(180deg, #f8faff 0%, #eef2fb 100%);
  border-right: 1px solid rgba(10,22,40,0.1);
  /* This is the rule that actually set the height, overriding the base one
     above. Sized to content now; see the note on .demo-modal-aside above. */
  min-height: 0;
}
.demo-modal-aside::after { display: none; }
.demo-aside-eyebrow {
  border: 1px solid rgba(74,111,232,0.2);
  background: rgba(74,111,232,0.08);
  color: var(--brand-primary, #4a6fe8);
}
.demo-modal-aside h3 {
  max-width: 18rem;
  color: var(--text-primary, #0a1628);
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.045em;
}
.demo-modal-aside p {
  color: rgba(10,22,40,0.66);
  font-size: 0.95rem;
  line-height: 1.6;
}
.demo-proof-list {
  border-top: 1px solid rgba(10,22,40,0.12);
  border-bottom: 1px solid rgba(10,22,40,0.12);
}
.demo-proof-list div {
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(10,22,40,0.08);
}
.demo-proof-list div:last-child { border-bottom: 0; }
.demo-proof-list span {
  display: block;
  color: var(--brand-primary, #4a6fe8);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.demo-proof-list strong {
  display: block;
  color: var(--text-primary, #0a1628);
  font-size: 0.94rem;
  line-height: 1.35;
}
.demo-visual-metric {
  border: 0;
  padding: 1rem;
  border-radius: 0.9rem;
  background: #fff;
  color: var(--text-primary, #0a1628);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,0.08);
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.35;
}
.demo-modal-kicker::before { width: 1rem; }
.demo-trust-row span {
  background: rgba(10,22,40,0.035);
  color: rgba(10,22,40,0.72);
  border-color: rgba(10,22,40,0.1);
}
.demo-route-hint {
  background: #f8faff;
  border-color: rgba(10,22,40,0.1);
  color: rgba(10,22,40,0.74);
}

/* Demo modal conversion pass: simple, clear first-call scheduler */
.demo-modal-card {
  max-width: 42rem;
  grid-template-columns: 1fr;
  border-radius: 1.1rem;
  box-shadow: 0 24px 72px rgba(10,22,40,0.18);
}
.demo-modal-main {
  background: #fff;
}
.demo-modal-header {
  padding: 2rem 2rem 0.75rem;
}
.demo-modal-heading {
  max-width: 32rem;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
}
.demo-modal-sub {
  max-width: 33rem;
}
.demo-modal-body {
  padding: 1rem 2rem 2rem;
}
.demo-dismiss {
  background: #fff;
  color: var(--text-primary, #0a1628);
  border: 1px solid rgba(10,22,40,0.12);
  box-shadow: 0 1px 2px rgba(10,22,40,0.06);
}
.demo-dismiss:hover {
  background: #f8faff;
  border-color: rgba(74,111,232,0.24);
  color: var(--brand-primary, #4a6fe8);
}
.demo-btn-primary {
  min-height: 3rem;
}
@media (max-width: 480px) {
  .demo-modal-card { max-width: 100%; }
  .demo-modal-header { padding: 1.5rem 1.25rem 0.75rem; }
  .demo-modal-body { padding: 0.75rem 1.25rem 1.5rem; }
}

/* ── Dark mode (2026-06-03) ──
   Re-skins the form (light) pane to a dark surface so the input fields pop and
   the card reads as one cohesive dark panel with the navy aside. Scoped to the
   modal only via .demo-modal-card / .demo-modal-main; does not touch global
   theme tokens or any other page. Layout, structure, and behavior unchanged. */
.demo-modal-card {
  --demo-dk-surface: #0b1530;
  --demo-dk-surface-2: #111d3d;
  --demo-dk-field: #0e1a38;
  --demo-dk-field-focus: #122148;
  --demo-dk-border: rgba(148,163,184,0.28);
  --demo-dk-border-strong: rgba(159,176,214,0.55);
  --demo-dk-text: #f3f6fd;
  --demo-dk-text-2: #c2cbe3;
  --demo-dk-muted: #8b97b8;
  --demo-dk-accent: #8fb1ff;
  background: var(--demo-dk-surface);
  border-color: var(--demo-dk-border);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 18px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(143,177,255,0.12);
}

/* Form (formerly light) pane */
.demo-modal-card .demo-modal-main {
  background:
    radial-gradient(circle at 90% 5%, rgba(143,177,255,0.10), transparent 28rem),
    var(--demo-dk-surface);
}

/* Headings + copy */
.demo-modal-card .demo-modal-heading,
.demo-modal-card .demo-route-hint { color: var(--demo-dk-text); }
.demo-modal-card .demo-modal-sub,
.demo-modal-card .demo-social-strip { color: var(--demo-dk-text-2); }
.demo-modal-card .demo-modal-kicker { color: var(--demo-dk-accent); }
.demo-modal-card .demo-modal-kicker::before { background: var(--demo-dk-accent); }

/* Field labels */
.demo-modal-card .demo-field-label { color: var(--demo-dk-text); }

/* Inputs / selects / textareas */
.demo-modal-card .demo-input,
.demo-modal-card .demo-modal-main select,
.demo-modal-card .demo-modal-main textarea {
  color: var(--demo-dk-text);
  background: var(--demo-dk-field);
  border-color: var(--demo-dk-border-strong);
}
.demo-modal-card .demo-input::placeholder { color: var(--demo-dk-muted); }
.demo-modal-card .demo-input:focus,
.demo-modal-card .demo-modal-main select:focus,
.demo-modal-card .demo-modal-main textarea:focus {
  border-color: var(--demo-dk-accent);
  background: var(--demo-dk-field-focus);
  box-shadow: 0 0 0 3px rgba(143,177,255,0.18);
}

/* Choice pills / focus-area buttons */
.demo-modal-card .demo-choice-label { color: var(--demo-dk-text-2); }
.demo-modal-card .demo-choice-pill {
  color: var(--demo-dk-text-2);
  background: var(--demo-dk-field);
  border-color: var(--demo-dk-border);
}
.demo-modal-card .demo-choice-pill:hover {
  border-color: var(--demo-dk-accent);
  background: var(--demo-dk-field-focus);
}
.demo-modal-card .demo-choice-label input:checked ~ .demo-choice-pill {
  color: var(--demo-dk-text);
  border-color: var(--demo-dk-accent);
  background: rgba(143,177,255,0.16);
}

/* Selected-value preview pills */
.demo-modal-card .demo-pill {
  color: var(--demo-dk-text-2);
  background: var(--demo-dk-field);
  border-color: var(--demo-dk-border);
}
.demo-modal-card .demo-pill--selected {
  color: var(--demo-dk-text);
  background: rgba(143,177,255,0.16);
  border-color: var(--demo-dk-accent);
}
.demo-modal-card .demo-pill--empty { color: var(--demo-dk-muted); }

/* Trust row + social proof + route hint surfaces */
.demo-modal-card .demo-trust-row span {
  color: var(--demo-dk-accent);
  background: rgba(143,177,255,0.10);
  border-color: rgba(143,177,255,0.22);
}
.demo-modal-card .demo-social-strip {
  background: var(--demo-dk-surface-2);
  border-color: var(--demo-dk-border);
}
.demo-modal-card .demo-route-hint {
  background: linear-gradient(135deg, rgba(74,111,232,0.20), rgba(20,184,166,0.16));
  border-color: rgba(143,177,255,0.22);
}

/* Secondary button (Back) */
.demo-modal-card .demo-btn-secondary {
  color: var(--demo-dk-text-2);
  background: var(--demo-dk-field);
  border-color: var(--demo-dk-border-strong);
}
.demo-modal-card .demo-btn-secondary:hover {
  color: var(--demo-dk-text);
  border-color: var(--demo-dk-accent);
}

/* Dismiss (X) button on the dark surface */
.demo-modal-card .demo-dismiss {
  background: rgba(255,255,255,0.06);
  color: var(--demo-dk-text);
  border-color: var(--demo-dk-border-strong);
  box-shadow: none;
}
.demo-modal-card .demo-dismiss:hover {
  background: rgba(143,177,255,0.16);
  border-color: var(--demo-dk-accent);
  color: #fff;
}

/* Step dots */
.demo-modal-card .demo-step-dot { background: var(--demo-dk-border-strong); }
.demo-modal-card .demo-step-dot.active { background: var(--demo-dk-accent); }

/* Scrollbar */
.demo-modal-card .demo-modal-main { scrollbar-color: rgba(143,177,255,0.4) rgba(148,163,184,0.14); }

/* Field hints / small helper + privacy text */
.demo-modal-card .demo-hint,
.demo-modal-card .demo-privacy-note { color: var(--demo-dk-muted); }

/* Exit-intent (abandoned) card */
.demo-abandon-modal .demo-abandon-card {
  color: var(--demo-dk-text, #eef2fb);
  background: var(--demo-dk-surface-2, #111d3d);
  border: 1px solid rgba(148,163,184,0.22);
}
.demo-abandon-modal .demo-abandon-card h3 { color: var(--demo-dk-text, #eef2fb); }
.demo-abandon-modal .demo-abandon-card p { color: var(--demo-dk-text-2, #aeb9d4); }
.demo-abandon-modal .demo-abandon-card .demo-abandon-input {
  color: var(--demo-dk-text, #eef2fb);
  background: var(--demo-dk-field, #0e1a38);
  border: 1px solid rgba(148,163,184,0.34);
}
.demo-abandon-modal .demo-abandon-card .demo-abandon-input::placeholder { color: var(--demo-dk-muted, #6f7da3); }
.demo-abandon-skip { color: var(--demo-dk-text-2, #aeb9d4); }

/* ── Calendar mode ──
   When the ChiliPiper calendar iframe loads inside the modal, the card
   switches from the two-column (aside + form) grid to a single-column
   layout that fits the calendar snugly. */
.demo-modal-card--calendar {
  grid-template-columns: 1fr !important;
  max-width: min(94vw, 38rem) !important;
  max-height: 88vh !important;
  width: min(94vw, 38rem) !important;
}
.demo-modal-card--calendar .demo-modal-aside {
  display: none;
}
.demo-modal-card--calendar .demo-modal-main {
  max-height: 82vh;
  overflow: hidden;
  padding: 0;
}
.demo-modal-card--calendar .demo-modal-main iframe {
  width: 100% !important;
  height: 78vh !important;
  min-height: 560px !important;
  border: 0;
}

/* Booking celebration animation */
@keyframes demo-celebration-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.demo-booking-celebration {
  animation: demo-celebration-fadein 0.5s ease forwards;
}
@keyframes demo-celebration-fadein {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────────────────────────────────────────────────────────
   Brand 2.0 modal.

   This was carried in brand.css, which only 30 of the 292 pages that load the
   modal actually include. The other 262 rendered the 1.0 dark card: navy, serif
   heading, pill eyebrow, big shadow, rounded corners - none of which is the
   current brand. Moving it here makes the modal 2.0 everywhere.

   Every 2.0 token carries a literal fallback, because the token definitions
   live in brand.css and most of these pages do not load it. Where brand.css IS
   present its values win and nothing changes; elsewhere the fallback applies.

   The doubled .demo-modal-card.demo-modal-card selector is kept: these rules
   have to outrank the 1.0 rules earlier in this same file.
   ───────────────────────────────────────────────────────────────────────────── */

.demo-modal-card.demo-modal-card {
  /* Pinned rather than inherited. The 2.0 block sets font-family:inherit on the
     heading, which resolves to Geist on a brand.css page and Inter on a legacy
     one - the same modal in two typefaces. brand-chrome.css carries the Geist
     @font-face and nearly every page with the modal loads it, so naming the
     stack here makes the modal read the same everywhere. */
  font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--field, #ffffff);
  border: 1px solid var(--line, rgba(0, 9, 26, .12));
  border-radius: var(--radius, 2px);
  box-shadow: 0 24px 60px rgba(0, 9, 26, .18);
  color: var(--ink, #00091A);
  max-width: 860px;
}
/* The card's inner shell carries the dark surface. Redefining --demo-dk-*
   does not reach it: those are declared unlayered in demo-modal.css. */
.demo-modal-card.demo-modal-card .demo-modal-main { background: var(--field, #ffffff); color: var(--ink, #00091A); }
.demo-modal-card.demo-modal-card .demo-modal-header { background: transparent; border-bottom: 0; padding: 34px 36px 0; }
.demo-modal-card.demo-modal-card .demo-modal-kicker {
  color: var(--signal, #3263E9); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.demo-modal-card.demo-modal-card .demo-modal-kicker::before { display: none; }
.demo-modal-card.demo-modal-card .demo-modal-heading {
  color: var(--ink, #00091A); font-family: inherit;
  font-size: clamp(26px, 3vw, 34px); font-weight: 750;
  letter-spacing: -.03em; line-height: 1.12; margin: 10px 0 0; text-wrap: balance;
}
.demo-modal-card.demo-modal-card .demo-modal-sub {
  color: var(--ink2, #1E293B); font-size: 16px; line-height: 1.55;
  font-weight: 450; margin: 12px 0 0; max-width: 54ch;
}

/* Two columns: what the call covers,
then the form. */
.demo-modal-card.demo-modal-card .demo-modal-body {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: 32px; padding: 28px 36px 34px; background: transparent;
}
.demo-modal-card.demo-modal-card .demo-modal-aside {
  /* It ships as a flex column with space-between, which pushed the eyebrow
     and the list to opposite ends of a stretched grid row. */
  /* min-height: 480px in the original dark design left dead space below
     three short lines. */
  display: block; align-self: start; height: auto; min-height: 0;
  background: var(--paper, #F4F6FA); border: 1px solid var(--line, rgba(0, 9, 26, .12));
  border-radius: var(--radius, 2px); padding: 22px 22px 24px;
}
.demo-modal-card.demo-modal-card .demo-aside-eyebrow {
  /* Ships as a tinted chip in the old brand blue. */
  display: block; background: none; border: 0; padding: 0; width: auto;
  margin: 0 0 14px; color: var(--ink2, #1E293B);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.demo-modal-card.demo-modal-card .demo-aside-stack { list-style: none; margin: 0; padding: 0; }
.demo-modal-card.demo-modal-card .demo-aside-stack li {
  position: relative; padding: 0 0 12px 20px;
  font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--ink, #00091A);
}
.demo-modal-card.demo-modal-card .demo-aside-stack li:last-child { padding-bottom: 0; }
.demo-modal-card.demo-modal-card .demo-aside-stack li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--signal, #3263E9); border-radius: 1px;
}

.demo-modal-card.demo-modal-card .demo-field { margin-bottom: 14px; }
.demo-modal-card.demo-modal-card .demo-field-label {
  color: var(--ink2, #1E293B); font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none; margin-bottom: 6px; display: block;
}
.demo-modal-card.demo-modal-card .demo-input {
  background: var(--field, #ffffff); border: 1px solid var(--line, rgba(0, 9, 26, .12));
  border-radius: var(--radius, 2px); color: var(--ink, #00091A);
  min-height: var(--ctl-h, 52px); padding: 0 14px; font-size: 15px; width: 100%;
}
.demo-modal-card.demo-modal-card .demo-input::placeholder { color: var(--ink2, #1E293B); opacity: .55; }
.demo-modal-card.demo-modal-card .demo-input:focus { border-color: var(--signal, #3263E9); box-shadow: 0 0 0 3px var(--signal-wash, rgba(50, 99, 233, .04)); outline: none; }

.demo-modal-card.demo-modal-card .demo-btn,
.demo-modal-card.demo-modal-card .demo-btn-primary,
.demo-modal-card.demo-modal-card .demo-btn-secondary {
  border-radius: var(--radius, 2px); font-size: var(--ctl-fs, 16px); font-weight: 650; min-height: var(--ctl-h, 52px);
}
.demo-modal-card.demo-modal-card .demo-btn-primary { background: var(--ink, #00091A); color: #fff; border: 0; }
.demo-modal-card.demo-modal-card .demo-btn-primary:hover { background: var(--signal, #3263E9); }
.demo-modal-card.demo-modal-card .demo-privacy-note {
  color: var(--ink2, #1E293B); font-size: 12.5px; margin: 16px 0 0; grid-column: 2;
}
/* The note is its own grid row, so the body's 32px gap was landing on top of
   its margin and parking it 46px below the button it belongs to. Columns keep
   the 32px; rows do not need it. */
.demo-modal-card.demo-modal-card .demo-modal-body { column-gap: 32px; row-gap: 0; }
/* Built as a translucent circle for a dark card. Invisible on white. */
.demo-modal-card.demo-modal-card .demo-dismiss {
  background: var(--paper, #F4F6FA); border: 1px solid var(--line, rgba(0, 9, 26, .12)); border-radius: var(--radius, 2px);
  color: var(--ink, #00091A); width: 36px; height: 36px;
}
.demo-modal-card.demo-modal-card .demo-dismiss:hover { background: var(--field, #ffffff); border-color: var(--ink, #00091A); }

.demo-modal-card.demo-modal-card .demo-abandon-card {
  background: var(--field, #ffffff); color: var(--ink, #00091A);
  border: 1px solid var(--line, rgba(0, 9, 26, .12)); border-radius: var(--radius, 2px);
}

@media (max-width: 720px) {
.demo-modal-card.demo-modal-card .demo-modal-body { grid-template-columns: 1fr; gap: 22px; padding: 22px 22px 26px; }
.demo-modal-card.demo-modal-card .demo-modal-header { padding: 26px 22px 0; }
.demo-modal-card.demo-modal-card .demo-privacy-note { grid-column: 1; }
}

/* The 2.0 block above sets the aside to display:block at (0,3,0) specificity,
   which outranks the base mobile rule hiding it at (0,1,0). On a phone that
   stacked the three bullets ABOVE the form and pushed "Find a time" outside the
   card, which is overflow:hidden - the button was unreachable without scrolling
   inside the card, with no affordance saying so. It has been live on the 30
   brand.css pages since Brand 2.0 and would have shipped to all 292 with the
   port. Restores the original intent at matching specificity. */


/* ─────────────────────────────────────────────────────────────────────────────
   Brand in the modal, and the left column earning its space.

   The ported 2.0 block left the card with no brand mark at all and a short
   filled panel floating in a tall grid row - roughly 400px of empty white
   under it at 1440x900. Three changes:

   1. The official lockup sits in the header. Never the wordmark set in type.
   2. The panel loses its fill, border and radius. Brand 2.0 is hairlines, not
      cards, and this is the same hairline-separated list already used on
      /g2-review/, so the two review surfaces read as one system.
   3. The column stretches and the creature is pushed to its foot with
      margin-top:auto, so the dead space becomes the thing that makes the modal
      feel like Tribble rather than a generic form.

   The stretch is safe in a way the original min-height:30rem was not: nothing
   here asserts a height, so a short form gives a short column.
   ───────────────────────────────────────────────────────────────────────────── */
.demo-modal-card.demo-modal-card .demo-modal-logo {
  display: block;
  height: 25px;
  width: auto;
  margin: 0 0 22px;
}

.demo-modal-card.demo-modal-card .demo-modal-aside {
  /* Not stretched. Matching the form's height left 123px of nothing between
     the list and the creature, and he read as a sticker dropped in a gap.
     The column is its own height and simply ends before the form does, which
     is what a two-column layout is supposed to look like. */
  align-self: start;
  display: flex;
  flex-direction: column;
  /* the 1.0 rule sets gap:1.5rem, which added 24px under the eyebrow on top of
     its own margin and made the rule look detached from its heading */
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
}

.demo-modal-card.demo-modal-card .demo-aside-eyebrow {
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  width: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink2, #1E293B);
}

.demo-modal-card.demo-modal-card .demo-aside-stack {
  /* The 1.0 rule makes this a wrapping flex row, which shrank each row to its
     own text and left the hairlines ending mid-column. */
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink, #00091A);
}
.demo-modal-card.demo-modal-card .demo-aside-stack li {
  position: relative;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line, rgba(0, 9, 26, .12));
  font-size: 15px;
  line-height: 1.45;
  font-weight: 550;
  color: var(--ink, #00091A);
}
.demo-modal-card.demo-modal-card .demo-aside-stack li::before,
.demo-modal-card.demo-modal-card .demo-aside-stack li::marker { content: none; }

/* Pushed to the foot of the column, which is what fills the gap the form
   leaves beside it. Decorative, so it is aria-hidden with an empty alt. */
.demo-modal-card.demo-modal-card .demo-aside-mascot {
  /* width pinned, not auto: a rule elsewhere stretches images to their
     container and the creature came out 340px wide. */
  display: block;
  width: 72px;
  height: 72px;
  margin: 34px 0 0;
}

@media (max-width: 860px) {
  .demo-modal-card.demo-modal-card .demo-modal-logo { margin-bottom: 16px; }
}

/* ── Mobile: keep this LAST ───────────────────────────────────────────────────
   Everything above sets display on .demo-modal-card.demo-modal-card
   .demo-modal-aside at the same specificity, so whichever rule is last wins.
   This one has to stay at the end of the file. Without it the aside shows on a
   phone, stacks above the form, and pushes the submit button outside a card
   that is overflow:hidden. */
@media (max-width: 860px) {
  .demo-modal-card.demo-modal-card .demo-modal-aside { display: none; }
}