/*
 * Nova Starter Solution — Demo-specific styles
 * Shared layout and base styles are in /assets/css/main.css
 */

/* Starter accent: a soft green to reinforce the "affordable & approachable" tone */
:root {
  --starter-green: #22c55e;
  --starter-green-dim: rgba(34,197,94,0.1);
}

/* Hero subtle background tint */
.demo-hero {
  background: radial-gradient(ellipse at 50% 0%, rgba(0,200,255,0.04) 0%, transparent 70%);
}

/* Override tier tag color for Starter */
.demo-hero-tag {
  border-color: rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.06);
  color: var(--starter-green);
}
.demo-hero-tag-dot {
  background: var(--starter-green);
  box-shadow: 0 0 8px var(--starter-green);
}

/* Starter-specific section tag color */
.demo-section-tag {
  color: var(--starter-green);
}

/* Who cards: green accent on hover */
.demo-who-card:hover {
  border-color: rgba(34,197,94,0.25);
}

/* Include icons: green variant */
.demo-include-icon.green {
  border-color: rgba(34,197,94,0.25);
}
.demo-include-icon.green svg {
  stroke: var(--starter-green);
}

/* Timeline box: green top line */
.demo-timeline-box::before {
  background: linear-gradient(90deg, transparent, var(--starter-green), var(--blue), transparent);
}

/* Workflow step numbers: subtle green blend */
.demo-step-num {
  background: linear-gradient(135deg, var(--starter-green), var(--blue));
}

/* Back link hover */
.demo-back-link:hover {
  color: var(--starter-green);
}

/* Responsive: stack demo-cta-actions on very small screens */
@media (max-width: 420px) {
  .demo-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .demo-cta-actions .btn-primary,
  .demo-cta-actions .btn-ghost {
    text-align: center;
    justify-content: center;
  }
}