:root{
  --brand:#6366F1;
  --brand-600:#5458e8;
  --brand-50:#eef2ff;
  --sand:#fbfbfd;
}
.bg-brand-sand{ background: var(--sand); }
.text-brand{ color: var(--brand); }
.logo-gradient{ width:32px;height:32px;border-radius:10px; overflow:hidden; display:inline-block;
  /* Use the explicit brand logo asset if present */
  background-image: url('/static/logo.svg');
  /* ensure transparent SVGs render on a white background */
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 3px; /* small white padding so the logo sits on white */
  box-shadow: 0 4px 18px rgba(99,102,241,.18);
}
.card{ background:#fff;border:1px solid #eaeaf0;border-radius:16px;padding:18px;box-shadow:0 4px 14px rgba(15,23,42,.04);}
.input{ width:100%;border:1px solid #d1d5db;border-radius:10px;padding:10px 12px;outline:none;}
.input:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.logo-badge{ width:36px;height:36px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:#fff;background:linear-gradient(135deg,#7c3aed,#2563eb);box-shadow:0 6px 18px rgba(99,102,241,.28);}
.btn-primary{ background: linear-gradient(135deg, var(--brand), #3b82f6); color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:600; box-shadow:0 8px 22px rgba(99,102,241,.25); transition: all 0.2s; cursor: pointer; position: relative; }
.btn-primary:hover{ background: linear-gradient(135deg, var(--brand-600), #2563eb); transform: translateY(-1px); box-shadow:0 12px 28px rgba(99,102,241,.3); }
.btn-primary:hover{ background:var(--brand-600); transform: translateY(-1px); box-shadow:0 12px 28px rgba(99,102,241,.3); }
.btn-secondary{ background:#f3f4f6; color:#111827; border:1px solid #e5e7eb; padding:10px 14px; border-radius:10px; transition: all 0.2s; cursor: pointer; }
.btn-secondary:hover{ background:#e5e7eb; }
.btn-ghost{ background:#fff; color:#111827; border:1px solid #e5e7eb; padding:10px 14px; border-radius:10px; transition: all 0.2s; cursor: pointer; }
.btn-ghost:hover{ background:#f9fafb; border-color: var(--brand); }
.btn-primary:disabled,.btn-secondary:disabled{ opacity:.6; cursor:not-allowed; }
.steps{ display:flex; align-items:center; gap:8px;}
.steps .step{ width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid #dbe1f0;background:#fff;font-weight:600;color:#64748b;}
.steps .step.active{ background:var(--brand); color:#fff; border-color:var(--brand);}
.steps .bar{ width:28px;height:2px;background:#e5e7eb; }
.step-panel.hidden{ display:none; }
.choice{ position:relative;border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fff;cursor:pointer;transition:.2s all;text-align:left;}
.choice:hover{ border-color: var(--brand); box-shadow:0 4px 14px rgba(99,102,241,.12); }
.choice .emoji{ font-size:20px; }
.choice .title{ font-weight:600; }
.choice.preselected{ background: linear-gradient(135deg, var(--brand-50), #f0f9ff); border-color: var(--brand); }
.choice.preselected.selected{ background: linear-gradient(135deg, var(--brand), #3b82f6); color: white; }
.choice.selected:after{ content:"✓"; position:absolute; right:10px; top:10px; color:#fff; background:var(--brand); border-radius:999px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:12px; }
.summary{ list-style:none; padding:0; margin:0; display:grid; gap:6px;}
.summary li{ display:flex; justify-content:space-between; font-size:13px; color:#334155; }
.post{ border:1px solid #e5e7eb;border-radius:12px;padding:12px; }
.caption{ white-space:pre-wrap; }

/* Landing Page Styles */
.hero-visual { 
  /* keep a subtle background but ensure the inner logo image sits on white */
  background: linear-gradient(135deg, var(--brand-50) 0%, #ffffff 100%);
  aspect-ratio: 16/9;
}

/* If the hero shows the logo svg directly, place it on a white card so transparent bg looks correct */
.hero-visual img {
  background: #fff;
  padding: 28px;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}

/* Header logo styling to ensure transparent SVGs sit on a white rounded background
   and scale cleanly inside the header without appearing visually offset. */
.header-logo {
  display: inline-block;
  object-fit: contain;
}

/* Styling for the text logo in header */
.header-logo-text {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
}

details summary {
  list-style: none;
  padding: 8px 0;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary::after {
  content: "−";
  float: right;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand);
}

details:not([open]) summary::after {
  content: "+";
  float: right;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Animation delays for background elements */
.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Progress bar styling */
#progress-bar {
  transition: width 0.3s ease;
}

/* Enhanced step indicators */
.steps {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  background: #e2e8f0;
  color: #64748b;
  border: 2px solid #e2e8f0;
}

.step.active {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  color: white;
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bar {
  width: 24px;
  height: 2px;
  background: #e2e8f0;
  transition: background-color 0.3s ease;
}

.step.active + .bar,
.step.active ~ .step + .bar {
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
}

/* Enhanced form styling */
.input {
  transition: all 0.2s ease;
}

.input:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

/* Button hover effects */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card hover effects */
.step-panel {
  transition: all 0.3s ease;
}

.step-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* Responsive utilities */
@media (max-width: 768px) {
  .hero-visual {
    aspect-ratio: 4/3;
  }
}