/* === Variables === */
:root {
  --accent: #2f5df3;
  --accent-soft: #e3e8ff;
  --bg: #f7f7fb;
  --bg-alt: #ffffff;
  --border: #dddddd;
  --muted: #555;
  --radius-lg: 14px;
  --radius-md: 10px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
  --text: #222;
}

/* === Reset & base === */
* {
  box-sizing: border-box;
}
@media (min-width: 801px) {
.feature-block.feature-block-left-2 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
}
}

body {
  background: linear-gradient(
      130deg,
      rgb(230, 237, 255) 0%,
      rgb(240, 244, 255) 40%,
      rgb(255, 255, 255) 85%
    )
    rgb(233, 240, 255);
  color: rgb(17, 17, 17);
  font-family: "Work Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: clamp(0.9rem, 0.95rem + 0.25vw, 1.1rem);
  line-height: 1.6;
  margin: 0px;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0px;
  z-index: -1;
  background: url("download.svg") center center / cover no-repeat,
    radial-gradient(circle at 0% 0%, rgba(0, 80, 255, 0.37) 0%, transparent 55%),
    linear-gradient(
      135deg,
      rgba(15, 23, 42, 0) 0%,
      rgba(30, 41, 59, 0) 45%,
      rgba(11, 17, 32, 0) 100%
    );
  opacity: 1;
  pointer-events: none;
}

html,
body {
  max-width: 100%;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

.prefill-notes {
    display: none;
}

/* === Typography & links === */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  background: var(--accent);
  border: 0px;
  border-radius: 999px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
}

button.pill-btn {
  font-size: 0.9rem;
  margin-bottom: 8px;
}

div br + br {
  display: block;
  margin-bottom: 1.5rem;
}

h1 {
  font-size: clamp(1.8rem, 1.6vw + 1.3rem, 3rem);
  letter-spacing: -1.7px;
  line-height: 1.1;
  margin-top: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.feature-title {
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  margin-bottom: 25px;
}

h2 {
  font-size: clamp(1.6rem, 1rem + 1.5vw, 2.4rem);
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin-bottom: 20px;
  margin-top: 10px;
}

h3 {
  font-size: clamp(1.6rem, 1rem + 1.4vw, 2.2rem);
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin-bottom: 20px;
  margin-top: 10px;
}

.nobackground h2 {
    margin-bottom: 0px;
    margin-top: 50px;
}


.feature-title {
  margin-bottom: 25px;
}

h3 {
  font-size: 1.9rem;
  letter-spacing: -1px;
  margin-bottom: 20px;
  margin-top: 0px;
}

h4 {
  font-size: 1.4rem;
  letter-spacing: -1px;
  margin-bottom: 0px;
  margin-top: 10px;
}

.nd-title-row h4 {
    margin-top: 0px;
}

h5 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  margin-top: 0px;
}

h6 {
  font-size: 1rem;
  margin-bottom: 0px;
  margin-top: 0px;
}

label {
  font-weight: 700;
}

p {
  font-weight: 400;
  margin-bottom: 1.5rem;
  margin-top: 0px;
}

.nobackground .page-intro {
    padding-top: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
    /* padding-bottom: 20px; */
}

p.field-hint {
  margin-bottom: 0px;
}

p.section-subtitle-2 {
  margin-bottom: 27px;
}

p.section-subtitle-2 {
    margin-bottom: 20px;
}

p.small {
  font-size: 1rem;
}

p.time-estimate {
  font-size: 1rem;
  font-style: italic;
}

/* === Layout === */
.main-container {
  margin: 0px auto;
  max-width: 1040px;
  padding: 24px 16px 0px;
}
.centered-main-container {
  margin: 0px auto;
  max-width: 1040px;
  padding: 24px 16px 0px;
  text-align: center;
}

.main-container-2,
.section-2 {
  margin-bottom: 0px;
}

.outer-heading {
  margin-bottom: 20px;
  text-align: center;
}

.page {
  margin: 0px auto;
  max-width: 1040px;
  padding: 0px;
}

.page-intro {
  margin: 10px auto 24px;
  max-width: 780px;
}

.page-intro p,
.page-intro ul,
.page-intro li {
  font-size: 0.96rem;
}

.section {
  margin-bottom: 40px;
}

.section-divider {
  display: flex;
  justify-content: center;
  margin: 60px 0px;
}

.section-heading {
  margin: 30px auto 16px;
  max-width: 780px;
}

.section-separator {
  border-top: 3px solid rgb(255, 255, 255);
  margin-bottom: 60px;
  margin-top: 60px;
}

.section-subtitle {
  color: var(--muted);
  margin-bottom: 40px;
}

.section-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.examples-nav {
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(229, 231, 235);
  margin-top: 15px;
}

.examples-nav-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 8px;
  margin: 0px auto;
  max-width: 1040px;
  overflow-x: auto;
  padding: 8px 16px 10px;
  white-space: nowrap;
}

.examples-nav-label {
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
}

.examples-nav-link {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  padding: 6px 12px;
  text-decoration: none;
}

.examples-nav-link.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.examples-nav-link:hover {
  background: rgb(249, 250, 251);
  border-color: var(--border);
  color: var(--accent);
  text-decoration: none;
}

.site-header {
  margin: 0px auto;
  max-width: 1040px;
  padding: 12px 16px 0px;
}

/* === Buttons === */
.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 500;
  justify-content: center;
  padding: 10px 18px;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: rgb(255, 255, 255);
  font-size: 1.4rem;
}

a.btn.btn-primary {}

.btn-primary:hover {
  background: rgb(34, 69, 196);
  border-color: rgb(34, 69, 196);
  text-decoration: none;
}

.btn-secondary {
  background: rgb(255, 255, 255);
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: rgb(240, 240, 245);
  text-decoration: none;
}

.expand-btn {
  background: rgb(226, 232, 240);
  border: none;
  border-radius: 20px;
  color: rgb(51, 65, 85);
  cursor: pointer;
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin: -10px auto 0px;
  padding: 8px 16px;
  position: relative;
  z-index: 10;
}

.expand-btn:hover {
  background: rgb(203, 213, 225);
}

.link-button a {
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 10px 18px;
  text-decoration: none;
  white-space: nowrap;
}

.link-button a:hover {
  background: rgb(34, 69, 196);
  border-color: rgb(34, 69, 196);
  text-decoration: none;
}

/* === Forms === */
select#rating {
  height: 40px;
}

textarea {
  min-height: 200px;
  resize: vertical;
}

textarea#job_spec {
    min-height: 140px;
    white-space: pre-wrap;
    font-family: system-ui;
    padding: 15px;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
select {
  border: 1px solid rgb(204, 204, 204);
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  margin: 12px 0 25px;
  padding: 10px;
  width: 100%;
}

.feedback-form {
  background: rgb(255, 255, 255);
  border: 1px dashed rgb(221, 221, 221);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  margin: 2rem auto 0px;
  max-width: 720px;
  padding: 24px 24px 28px;
}

.feedback-form .small {
  color: var(--muted);
  font-size: 0.9rem;
}

.feedback-form button[type="submit"] {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 1.5rem;
  padding: 10px 18px;
}

.feedback-form button[type="submit"]:hover {
  background: rgb(34, 69, 196);
  border-color: rgb(34, 69, 196);
}

.feedback-form h2 {
  margin-bottom: 0.5rem;
  margin-top: 0px;
}

.feedback-form h3 {
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}

.feedback-form input[type="checkbox"] {
  border-radius: 3px;
  height: auto;
  margin: 0px 6px 0px 0px;
  margin-right: 6px;
  padding: 0px;
  width: auto;
}

.feedback-form input[type="number"] {
  appearance: auto;
  height: auto;
  margin-bottom: 0.75rem;
  margin-top: 0.25rem;
  max-width: 90px;
  width: 100%;
}

.feedback-form input[type="number"]::-webkit-inner-spin-button,
.feedback-form input[type="number"]::-webkit-outer-spin-button {
  margin: 0px;
}

.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
  border: 1px solid rgb(204, 204, 204);
  border-radius: 8px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.95rem;
  margin: 0.25rem 0px 0.5rem;
  padding: 10px;
  width: 100%;
}

.feedback-form label {
  display: block;
  font-weight: 500;
  margin: 1rem 0px 0.35rem;
}

.feedback-form select#rating {
  font-size: 0.9rem;
  max-width: 160px;
}

.char-hint {
  color: rgb(107, 114, 128);
  font-size: 0.9rem;
  margin-bottom: 12px;
  margin-top: 4px;
}

/* === Components === */
.autosave-notice {
  background: #fff;
  border-radius: 10px;
  bottom: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  left: 16px;
  padding: 10px 12px;
  position: fixed;
  z-index: 9999;
}

.autosave-notice--hide {
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.35s ease;
}

.criteria-card {
  margin: 0px auto 28px;
  margin-bottom: 24px;
  max-width: 880px;
}

.criteria-card h3 {
  margin-bottom: 6px;
  margin-top: 0px;
}

.criteria-card h4 {
  margin-bottom: 6px;
  margin-top: 16px;
}

.criteria-card p,
.criteria-card ul,
.criteria-card li {
  font-size: 0.95rem;
}

.criteria-card--bonus {
  margin-top: 40px;
}

.criteria-header {
  margin-bottom: 10px;
}

.criteria-meta {
  color: var(--muted);
  font-size: 0.95rem;
}

.criteria-quotes {
  border-left: 3px solid var(--accent-soft);
  color: var(--muted);
  font-size: 0.95em;
  font-style: italic;
  margin: 8px 0px 0px;
  padding-left: 14px;
}

.demo-arrow {
  align-items: center;
  align-self: center;
  color: var(--accent);
  display: flex;
  font-size: 2rem;
  font-weight: bold;
  justify-content: center;
  padding: 0px 4px;
}

.demo-caption {
  color: var(--muted);
  margin: 0px;
}

.demo-card {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 30px;
}

.demo-card-narrow {
  margin: auto;
  max-width: 600px;
  padding: 30px;
}

.demo-card-narrow-2 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  max-width: 800px;
  text-align: center;
}

.demo-card-narrow.why-built {
  overflow: hidden;
  position: relative;
}

.demo-card.demo-card-narrow-2 {
  background: none;
  box-shadow: none;
  margin-bottom: 0px;
  padding: 0px;
}

.demo-content {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  margin-top: 12px;
}

.demo-content--with-arrow {
  align-items: stretch;
  grid-template-columns: 1fr auto 1fr;
}

.demo-header {
  margin-bottom: 0px;
  padding: 0px;
}

.demo-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.demo-list {
  margin: 4px 0px;
  padding-left: 16px;
}

.demo-list li {
  margin-bottom: 2px;
}

.demo-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.demo-panel--after {
  background: rgb(255, 255, 255);
  border-color: var(--accent);
  box-shadow: rgba(47, 93, 243, 0.1) 0px 4px 12px;
}

.demo-panel--before {
  background: rgb(244, 244, 246);
  border-color: rgb(224, 224, 224);
}

.demo-panel-body {
  flex: 1 1 auto;
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
}

.demo-panel-body--scroll {
  margin-top: 20px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.4rem;
}

.demo-panel-body--scroll > p:first-of-type {
  margin-top: 0px;
}

.demo-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0px 0px 4px;
}

.error {
  color: rgb(176, 0, 32);
  font-size: 0.9rem;
  margin-top: 16px;
}

.job-spec {
  font-size: 1rem;
  line-height: 1.4;
}

.job-spec-demo {
  border-radius: var(--radius-md);
  font-size: 1rem;
  line-height: 1.4;
  max-height: 300px;
  overflow-y: auto;
  padding: 16px 0.5rem 16px 16px;
}

.job-spec-preview {
  background: rgb(248, 250, 252);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;
  margin-bottom: 20px;
  max-height: 210px;
  overflow: hidden;
  padding: 20px;
  position: relative;
  transition: max-height 0.6s ease-in-out;
}

.job-spec-preview.expanded {
  max-height: 5000px;
}

.job-spec-preview.expanded .fade-overlay {
  opacity: 0;
}

.loader-card {
  padding: 28px 24px;
  text-align: center;
}

.loader-page {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0px;
  min-height: 100vh;
  padding: 16px;
}

.loader-shell {
  max-width: 520px;
  width: 100%;
}

.notice {
  background: rgb(255, 247, 237);
  border: 1px dashed rgb(249, 115, 22);
  border-radius: var(--radius-lg);
  color: rgb(124, 45, 18);
  font-size: 0.95rem;
  margin: 20px auto 10px;
  max-width: 720px;
  padding: 12px 14px;
}

.outline-box {
  /* background: #2f5df30d; */
  /* border: 1px solid rgb(229, 231, 235); */
  border-radius: 10px;
  font-size: 0.95rem;
  margin-bottom: 14px;
  margin-top: -20px;
  padding: 10px 12px;
}

.outline-toggle {
  align-items: center;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 10px 0px 0px;
}

.question-pod {
  border-radius: 12px;
  padding: 20px;
}

.question-pod h5 {
  margin: 8px 0px 4px;
}

.question-pod p {
  margin-bottom: 10px;
  margin-top: 8px;
}

.question-pod p.small {
  font-size: 1rem;
}

.question-pod-title {
  margin: 0px 0px 8px;
}

.question-pods {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  margin-top: 0px;
}

.spinner {
  animation: 0.8s linear 0s infinite normal none running spin;
  border-bottom-color: rgb(221, 221, 221);
  border-image: initial;
  border-left-color: rgb(221, 221, 221);
  border-radius: 50%;
  border-right-color: rgb(221, 221, 221);
  border-style: solid;
  border-top-color: var(--accent);
  border-width: 6px;
  height: 56px;
  margin: 0px auto 24px;
  width: 56px;
}

.status {
  color: var(--muted);
  margin-top: 12px;
}

.status-step {
  color: var(--text);
  font-weight: 600;
}

.story-card {
  margin: 0px auto;
  margin-top: 10px;
  max-width: 780px;
}

.story-reassure {
  margin: 12px 0px 16px;
}

.story-reassure p {
  margin: 0px;
}

.nd-note {
  background: rgb(250, 250, 250);
  border: 1px dashed rgb(198, 198, 216);
  border-radius: var(--radius-lg);
  color: var(--muted);
  margin-top: 32px;
  padding: 14px 16px;
}

.step-badge {
  background: white;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 50px;
  color: var(--accent);
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
  padding: 4px 10px;
  text-transform: uppercase;
}

.step-badge-2 {
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent);
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0px;
  padding: 4px 10px;
  text-transform: uppercase;
}

.step-badge.hero-pill {
  background-color: rgb(255, 255, 255);
  margin-bottom: 20px;
}

.step-form {
  margin: 32px auto 0px;
  margin-top: 24px;
  max-width: 780px;
  text-align: center;
}

/* === Header, nav & footer === */
.footer-brand {
  align-items: center;
  color: rgb(30, 41, 59);
  display: flex;
  font-size: 1.1rem;
  font-weight: 700;
  gap: 10px;
  margin-bottom: 15px;
  max-width: 200px;
}

.footer-col.brand-col {
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.5fr 1fr 1fr;
  margin: 0px auto;
  max-width: 1100px;
}

.footer-heading {
  color: rgb(148, 163, 184);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  margin-top: 5px;
  text-transform: uppercase;
}

.footer-links {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.footer-links a {
  color: rgb(71, 85, 105);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-text {
  color: rgb(100, 116, 139);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.site-footer {
  background-color: rgb(248, 250, 252);
  border-top: 1px solid rgb(226, 232, 240);
  color: var(--muted);
  font-size: 0.85rem;
  margin: 40px auto 10px;
  margin-top: 80px;
  max-width: 1040px;
  padding: 60px 20px;
  text-align: center;
}

.site-footer a {
  color: var(--accent);
}

.site-links {
  align-items: center;
  display: flex;
  gap: 18px;
}

.site-links a {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.site-links a:hover {
  color: var(--accent);
}

.site-logo {
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: -1px;
}

.site-logo a,
.site-logo a:hover {
  border-bottom: none;
  text-decoration: none;
}

.site-nav {
  align-items: center;
  display: flex;
  font-size: 0.95rem;
  justify-content: space-between;
  padding-bottom: 10px;
}

.badge-beta {
  background-color: rgb(224, 242, 254);
  border-radius: 12px;
  color: rgb(2, 132, 199);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.site-beta-pill {
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent);
  display: inline-block;
  font-size: 0.7rem;
  margin-left: 6px;
  padding: 2px 8px;
  text-transform: uppercase;
}

/* === Why built === */
.why-avatar {
  align-items: center;
  background: var(--accent-soft);
  border-radius: 50%;
  color: var(--accent);
  display: flex;
  font-size: 0.9rem;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.why-eyebrow {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.why-footer {
  align-items: center;
  border-top: 1px dashed rgb(221, 221, 221);
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding-top: 14px;
}

.why-highlight {
  background: rgba(240, 253, 244, 0.76);
  border-radius: 12px;
  margin: 28px 0px 30px;
  padding: 14px 16px;
}

.why-highlight p {
  font-size: 0.98em;
  margin: 6px 0px 0px;
}

.why-highlight-2 {
  background: rgb(240, 253, 244);
  border-radius: 12px;
  padding: 14px 16px;
}

.why-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.why-name {
  color: var(--text);
  font-weight: 600;
}

.why-role {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* === Utilities === */
.black-text {
  color: #111;
}

.small {
  color: var(--muted);
  font-size: 0.9rem;
}

p.reassure.small {
    text-align: c;
}

/* === Misc === */
#stream-output {
  margin-top: 0.75rem;
}

.buzzword {
  border-radius: 3px;
  color: #fff;
  padding: 0px 2px;
  font-weight: 700;
}

.copyright {
  color: rgb(148, 163, 184);
  font-size: 0.85rem;
}

.fade-overlay {
  background: linear-gradient(rgba(248, 250, 252, 0), rgb(248, 250, 252));
  bottom: 0px;
  height: 100px;
  left: 0px;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.3s;
  width: 100%;
}

.hero-subtitle {
  color: var(--muted);
  font-size: clamp(1.2rem, 0.9rem + 0.7vw, 1.45rem);
  margin: 20px 0px 35px;
}

p.hero-subtitle.form-subtitle {
    margin-top: 0px;
}

.hint-title {
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: 12px;
}

.stream-loader {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  gap: 0.75rem;
  opacity: 1;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: opacity 0.5s ease;
}

.stream-loader--hidden {
  opacity: 0;
}

.stream-loader-spinner {
  animation: stream-spin 0.8s linear infinite;
  border: 5px solid var(--accent);
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.2);
  display: block;
  flex-shrink: 0;
  height: 30px;
  margin: 0 auto;
  width: 30px;
}

.stream-loader-text {
  margin: 0;
}

.what-grid h4 {
  margin-top: 0px;
}

/* === Animations === */
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes stream-spin {
  to {
    transform: rotate(360deg);
  }
}

/* === Media: (max-width: 800px) === */
@media (max-width: 800px) {
  .criteria-card {
    margin-bottom: 22px;
    padding: 18px 16px;
  }

  .demo-arrow {
    margin: 10px 0px;
    transform: rotate(90deg);
  }

  .demo-card-narrow {
    padding: 24px;
  }

  .demo-content {
    grid-template-columns: 1fr;
  }

  .demo-content--with-arrow {
    grid-template-columns: 1fr;
  }

  .examples-nav-inner {
    padding: 8px 12px 10px;
  }

  .footer-brand {
    justify-content: center;
  }

  .footer-grid {
    gap: 40px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-text {
    margin: 0px auto 20px;
  }

  .page-intro {
    padding: 0px 4px;
  }

  .question-pods {
    grid-template-columns: 1fr;
  }

  .section-divider {
    margin: 45px 0px;
  }

  .site-links a {
    margin-left: 0px;
    margin-right: 14px;
  }

  .site-nav {
    align-items: center;
    flex-direction: column;
    gap: 6px;
  }
}

/* --- Variables & Reset --- */
:root {
  --nd-bg: #ffffff;
  --nd-border: #e2e8f0;
  --nd-text-main: #334155;
  --nd-text-muted: #64748b;
  --nd-highlight-bg: #f8fafc;
  
  /* Traffic Light Colors */
  --color-green: #10b981;
  --color-amber: #f5c20b;
  --color-orange: #f97316;
  --color-red: #ef4444;
}

.nd-fit-card {
  /* font-family: system-ui, -apple-system, sans-serif; */
  /* background: var(--nd-bg); */
  /* border: 1px solid var(--nd-border); */
  /* border-radius: 16px; */
  /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
  /* max-width: 800px; */
  /* margin: 20px auto; */
  /* overflow: hidden; */
}

/* --- Header Section --- */
.nd-header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--nd-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--nd-border);
  padding-top: 24px;
}

.nd-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.beta-badge {
  background: #eff6ff;
  color: #3b82f6;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nd-summary {
  margin: 0;
  /* font-size: 0.95rem; */
  /* color: var(--nd-text-main); */
  line-height: 1.5;
}

/* Donut Chart (CSS Only) */
.score-donut {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
  /* Conic gradient creates the chart based on --p variable */
  background: conic-gradient(var(--chart-color) calc(var(--p)*1%), #f1f5f9 0);
}

.score-donut.amber {}
.key{font-size: 0.95rem;/* border-bottom: 1px solid var(--nd-border); */padding-bottom: 24px;margin-bottom: 0px;}
.key .amber { color: var(--color-amber); font-weight: 500;}
.key .green { color: var(--color-green); font-weight: 500;}
.key .red { color: var(--color-red); font-weight: 500;}

.score-donut.amber, .key .amber { --chart-color: var(--color-amber); }
.score-donut.green, .key .green { --chart-color: var(--color-green); }
.score-donut.red, .key .red { --chart-color: var(--color-red); }

.score-inner {
  position: absolute;
  inset: 10px; /* Thickness of ring */
  background: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-number {
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: #1e293b;
}

.score-label {
  font-size: 0.7rem;
  color: var(--nd-text-muted);
}

/* --- Metrics Grid --- */
.nd-metrics-grid {
  padding: 24px 0px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 Columns */
  gap: 30px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.full-width {
  grid-column: 1 / -1;
}

.metric-top {
  display: flex;
  justify-content: space-between;
  font-size: 1.3rem;
  font-weight: 600;
  color: #1e293b;
}

/* Progress Bars */
.metric-card .progress-track {
  width: 100%;
  height: 8px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
}

.progress-fill.green { background: var(--color-green); }
.metric-card .progress-fill.amber {background: var(--color-amber);height: 8px;}
.progress-fill.orange { background: var(--color-orange); }
.progress-fill.red { background: var(--color-red); }

.metric-text {
  /* font-size: 0.9rem; */
  color: var(--nd-text-main);
  margin: 0;
  line-height: 1.4;
}

.metric-text p {
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(85 85 85);
}

.metric-evidence {
  font-size: 0.85rem;
  color: var(--nd-text-muted);
  font-style: italic;
  background: #f8fafc;
  padding: 8px;
  border-radius: 6px;
  border-left: 3px solid #cbd5e1;
  margin-top: 4px;
}

.metric-evidence.missing {
  color: #94a3b8;
  border-left-color: #e2e8f0;
  font-style: normal;
}

/* --- Questions Section --- */
.nd-questions-box {
  /* background: #f8fafc; */
  /* border-top: 1px solid var(--nd-border); */
  padding: 24px;
  border-radius: var(--radius-lg);
  background: rgba(240, 253, 244, 0.76);
  margin-bottom: 25px;
}

.q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.q-header h3 {
  margin: 0;
  /* font-size: 1rem; */
  color: #1e293b;
  font-weight: 700;
}

.copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}

.copy-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #94a3b8;
}

.q-list {
  margin: 0;
  padding-left: 20px;
}

.q-list li {
  margin-bottom: 8px;
  color: #334155;
  /* font-size: 0.95rem; */
  line-height: 1.5;
}

/* --- Mobile Responsive --- */
@media (max-width: 600px) {
  .nd-header {
    flex-direction: column-reverse; /* Put chart on top or keep text top? */
    align-items: flex-start;
  }
  .score-donut {
    align-self: center;
    margin-bottom: 15px;
  }
  .nd-metrics-grid {
    grid-template-columns: 1fr; /* Stack into 1 column */
  }
}
.nd-title-row-2{
  display:flex;
  align-items:flex-start;   /* keep h2 top aligned */
  gap:10px;
  /* margin-bottom: 20px; */
}

.nd-title-row-2 h2{
  /* margin:0; */                 /* important: kill default margins */
  margin-top: 0px;
}

.nd-title-row-2 .beta-badge{
  margin-right: auto;         /* push badge to the right */
  margin-top: 18px;           /* nudge slightly down */
}

/* Make space for the icon */
.pill-btn.gold-standard {
    /* padding-right: 36px; */ /* Increases right padding to fit the icon */
    /* position: relative; */  /* Needed to position the icon absolutely */
}

/* The icon itself */
.pill-btn.gold-standard::after {
    content: "★";         /* You can also use a star '★' */
    position: absolute;
    right: 12px;           /* Position from the right edge */
    top: 50%;
    transform: translateY(-50%); /* Centers it vertically */
    font-size: 1rem;
    line-height: 1;
}

/* Optional: Make the star yellow/gold when the button is NOT active */
.pill-btn.gold-standard:not(.active)::after {
    text-shadow: 0 0 0 #F59E0B; /* A trick to color the emoji slightly if needed, or just use color */
    color: #F59E0B; /* Gold color */
}

/* Optional: Make the star white when the button IS active */
.pill-btn.gold-standard.active::after {
    color: white;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5)); /* Nice subtle glow */
}

/*Vibe Check*/
/* --- Vibe Check Card Variables --- */
:root {
    /* Default Theme (Neutral/Foggy) */
    --vibe-primary: #d97706; /* Amber-600 */
    --vibe-bg: #fffbeb;      /* Amber-50 */
    --vibe-border: #fcd34d;  /* Amber-300 */
    --vibe-text: #451a03;    /* Amber-950 */
}

/* Theme Overrides (Apply these classes to the main container) */
.vibe-theme-poor {
    --vibe-primary: #dc2626; /* Red-600 */
    --vibe-bg: #fef2f2;      /* Red-50 */
    --vibe-border: #fca5a5;  /* Red-300 */
    --vibe-text: #450a0a;    /* Red-950 */
}

.vibe-theme-excellent {
    --vibe-primary: #16a34a; /* Green-600 */
    --vibe-bg: #f0fdf4;      /* Green-50 */
    --vibe-border: #86efac;  /* Green-300 */
    --vibe-text: #052e16;    /* Green-950 */
}

/* --- Card Structure --- */
.vibe-card {
    background-color: var(--vibe-bg);
    border: 2px solid var(--vibe-border);
    border-radius: 12px;
    padding: 0; /* Header is full width */
    margin-bottom: 2rem; /* Space before Prep Radar */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Keeps header corners rounded */
    /* font-family: system-ui, -apple-system, sans-serif; */
    color: var(--vibe-text);
    position: relative;
}

/* Header Bar */
.vibe-header {
    background-color: var(--vibe-primary);
    color: white;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Main Content Area */
.vibe-body {
    padding: 30px;
}

/* The Funny Headline */
.vibe-headline {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--vibe-border);
    padding-bottom: 1rem;
}

/* The Roast Text */
.vibe-roast-text {
    /* font-size: 1rem; */
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #374151; /* Slate-700 */
}

/* Grid for Verdict & Meter */
.vibe-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Individual Stat Box */
.stat-box {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--vibe-border);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--vibe-primary);
    margin-bottom: 4px;
}

.stat-value {
    font-weight: 600;
    font-size: 1.5rem;
    font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Buzzword Meter Bar */
.meter-track {
    width: 100%;
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 99px;
    margin-top: 6px;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    background-color: var(--vibe-primary);
    border-radius: 99px;
    /* Width set inline in HTML */
}

/* The Best Quote (Code block style) */
.vibe-quote-box {
    background-color: rgba(0,0,0,0.03);
    border-left: 4px solid var(--vibe-primary);
    padding: 12px;
    border-radius: 0 4px 4px 0;
    /* font-style: italic; */
    font-size: 0.95rem;
}

.quote-label {
    font-weight: 400;
    font-size: 1.5rem;
    display: block;
    margin-bottom: 4px;
    /* opacity: 0.7; */
    /* font-style: normal; */
    letter-spacing: -0.3px;
    font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Footer / Share Action */
.vibe-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--vibe-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255,255,255,0.5);
}

.brand-watermark {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.6;
}

.share-btn {
    background-color: var(--vibe-primary);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.share-btn:hover {
    opacity: 0.9;
}

/* Mobile Tweaks */
@media (max-width: 600px) {
    .vibe-stats-grid {
        grid-template-columns: 1fr; /* Stack stats on phone */
    }
}

.nobackground{
  background: none;
  box-shadow: none;
  margin-bottom: -10px;
  padding-bottom: 0px;
  max-width: 780px;
  padding: 0;
  text-align: center;
  }

  .nobackground-section{margin-bottom:30px;}

  .nobottompad{margin-bottom:0;}

 
/* =========================================
   THE NEON STEPPER (Bold & Glowing)
   ========================================= */

/* 1. The Container (Dark Glass Pill) */
.stepper-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: rgb(4 12 30 / 89%); /* Slightly darker/more opaque */
    backdrop-filter: blur(10px);
    padding: 15px; /* More padding to let the glow breathe */
    border-radius: 15px;
    margin-bottom: 50px;
    position: relative;
    /* border: 1px solid rgba(255, 255, 255, 0.08); */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    
    /* Ensure lines stay within this container */
    overflow: visible;
    margin-top: 0px;
    padding-bottom: 12px;
}

/* 2. Individual Step Item */
.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    z-index: 2;
}

/* =========================================
   THE INTELLIGENT CONNECTOR LINES
   ========================================= */

/* 1. DEFAULT STATE (The "Past"): Make ALL lines Blue & Glowing */
/* This automatically handles all previous steps */
.stepper-item::after {
    content: '';
    position: absolute;
    top: 19px;
    transform: translateY(-50%);
    left: 50%;
    width: 100%;
    height: 8px;
    border-radius: 6px;
    z-index: -1;

    /* THE NEON LOOK (Default) */
    background-color: #2563eb; /* Neon Blue */
    box-shadow: 0 0 4px rgba(37, 99, 235, 0.9); /* Blue Glow */
    transition: all 0.3s ease; /* Smooth color change */
}

/* 2. THE EXCEPTION (The "Future"): Turn lines Gray starting from the Active step */

/* The line extending FROM the active step to the next one is still incomplete (Gray) */
.stepper-item.active::after {
    background-color: #000000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important; /* No Blue Glow */
}

/* All lines belonging to steps AFTER the active one are also Gray */
.stepper-item.active ~ .stepper-item::after {
    background-color: #000000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important;
}

/* Hide line on the last item (Standard rule) */
.stepper-item:last-child::after {
    content: none;
}

/* Hide line on the last item */
.stepper-item:last-child::after {
    content: none;
}

/* 4. The Circle (Counter) */
.step-counter {
    width: 36px; /* Slightly larger for boldness */
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Solid background to cover the line underneath clearly */
    background-color: #000000;
    color: #94a3b8;
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
    
    /* Thick Border */
    border: 4px solid #2f5df39e;
    box-shadow: 0 4px 10px rgb(0 0 0 / 32%);
    z-index: 5; /* Sit nicely on top */
    transition: all 0.3s ease;
    border-color: var(--accent);
    /* box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 0 20px rgba(37, 99, 235, 0.6), 0 0 40px rgba(37, 99, 235, 0.4); */
    transform: scale(0.9);
}

.completed .step-counter {
    /* background-color: rgb(54 167 31 / 90%); */
    /* background-color: #fff; */
    /* color: var(--accent); */
    /* border-color: var(--accent); */
    z: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 0 20px rgba(37, 99, 235, 0.6), 0 0 40px rgba(37, 99, 235, 0.4);
    /* box-shadow: 0px 0px 6px rgb(47 93 243 / 77%); */
    /* border: 8px solid; */
    background-color: #9cb2f9;
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2), 0 0 20px rgba(37, 99, 235, 0.6), 0 0 40px rgba(37, 99, 235, 0.4);
    /* box-shadow: 0px 0px 6px rgb(47 93 243 / 77%); */
    border: 8px solid;
}

/* 5. The Text Label */
.step-name {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #94a3b8;
    font-weight: 600;
    text-align: center;
    
    /* Fix for wrapping */
    /* width: 170px; */ /* Force it wider */
    max-width: 200px; /* Remove constraint */
    /* white-space: nowrap; */ /* Prevent wrapping on desktop */
    line-height: 1.4;
    margin-top: 5px;
    /* text-shadow: 0 2px 4px rgba(0,0,0,0.5); */
}

.completed .step-name {
    /* color: #2f5df3; */
}

/* =========================================
   ACTIVE STATE (The "Neon" Effect)
   ========================================= */

/* The Active Circle */
.stepper-item.active .step-counter {
    background-color: #fff; /* Bright Blue Fill */
    color: var(--accent);
    border-color: var(--accent); /* Lighter Blue Border */
    
    /* The Fancy Glowing Soft Shadow */
    box-shadow: 
        0 0 0 4px rgba(37, 99, 235, 0.2), 
        0 0 20px rgba(37, 99, 235, 0.6),  
        0 0 40px rgba(37, 99, 235, 0.4);  /* Outer Glow */
    box-shadow: 0px 0px 6px rgb(47 93 243 / 77%);
    border: 8px solid;
}

/* The Active Text */
.stepper-item.active .step-name {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255,255,255,0.5);
}

/* OPTIONAL: Highlight the line leading UP to the active step? 
   (Requires complex CSS selectors or JS, but we can fake the 'glow' on all lines slightly) */

/* =========================================
   MOBILE TWEAKS
   ========================================= */
@media (max-width: 768px) {
    .stepper-wrapper {
        padding: 20px 10px;
    }

    .step-name {
        display: none; /* Still hide text on mobile to save space */
    }
    
    /* On mobile, wrapping text is okay if you really want it shown */
    .stepper-item.active .step-name {
        display: block;
        white-space: normal; /* Allow wrap on mobile */
        width: 120px;
        position: absolute;
        top: 60px;
    }
}
/* --- The "Action Step" Badge (BOTTOM VERSION) --- */

/* 1. Target the CIRCLE */
.stepper-item.action-step .step-counter {
    position: relative;
    overflow: visible;
}

/* 2. The Bubble Container (Now Below) */
.stepper-item.action-step .step-counter::after {
    content: 'Your only task'; /* Changed emoji to point down, or keep generic */
    position: absolute;
    
    /* Move below the circle (50px height + gap) */
    top: 69px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f2533; /* Ensure this variable is defined, e.g. #f43f5e */
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 80px;
    letter-spacing: 0.1px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
    
    /* Reuse the bounce animation */
    animation: bounceHintBottom 2s infinite ease-in-out;
}

/* 3. The Little Triangle (Now Points UP) */
.stepper-item.action-step .step-counter::before {
    content: '';
    position: absolute;
    
    /* Position between circle and bubble */
    top: 58px;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    
    /* FLIP: Transparent top, Colored bottom */
    border-color: transparent transparent #1f2533 transparent;
    z-index: 10;
    
    /* Sync animation */
    animation: bounceArrowBottom 2s infinite ease-in-out;
}

/* =========================================
   THE "TRAFFIC LIGHT" SYSTEM (Green / White / Dark)
   ========================================= */

/* 1. COMPLETED STATE (The History) - Green & Calm */
.stepper-item.completed .step-counter {
    background-color: #10b981; /* Emerald Green */
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); /* Subtle Green Glow */
}

/* Make the line coming FROM a completed step Green */
.stepper-item.completed::after {
    background-color: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8) !important;
}

/* 2. ACTIVE STATE (The Hero) - Bright White & Glowing */
.stepper-item.active .step-counter {
    background-color: #ffffff; /* Pure White */
    border-color: #ffffff;
    color: #2563eb; /* Blue Text for contrast */
    font-weight: 900;
    
    /* THE "PREMIUM" GLOW (This is what you are missing) */
    /* box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.2), 
        0 0 20px rgba(255, 255, 255, 0.3); */  /* The Far Glow */
    transform: scale(1); /* Make it physically bigger */
    box-shadow: 0 0 8px rgb(255, 255, 255) !important;
}

/* The active step text should be white (popping against dark bg) */
.stepper-item.active .step-name {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255,255,255,0.6);
}

/* 3. FUTURE STATE (The Mystery) - Ghostly */
/* (This uses your default styles, just ensure they are dark enough) */
.stepper-item .step-counter {
    border: 2px solid rgba(255, 255, 255, 0.15); /* Slightly clearer border */
    background-color: rgb(18 25 37); /* Subtle glass fill */
    /* color: #64748b; */
}

/* The Line Logic (Override) */
/* If a step is ACTIVE, the line leaving it should be Dark (Future) */
.stepper-item.active::after {
    /* background-color: #334155 !important; */
    /* box-shadow: none !important; */
    box-shadow: 0 0 8px #3341555c !important;
}

/* Hide the number in completed steps */
.stepper-item.completed .step-counter {
    font-size: 0; /* Hides text */
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8) !important;
}

/* Add the checkmark */
.stepper-item.completed .step-counter::before {
    content: '✓';
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

/* 4. Define the Bottom Bounce Animation */
@keyframes bounceHintBottom {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(5px); } /* Moves DOWN slightly */
}

@keyframes bounceArrowBottom {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); } /* Moves DOWN slightly */
}


/* Animation Keyframes */
@keyframes bounceHint {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes bounceArrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* --- Mobile Responsiveness --- */
@media (max-width: 600px) {
    .step-name {
        font-size: 0.6rem; /* Shrink text */
    }
}


/* =========================================
   THE BEACON PULSE (Robust & Mobile Safe)
   ========================================= */

/* The Animation Definitions */
@keyframes pulse-ring {
    0% {
        /* Start: solid pink ring close to button */
        box-shadow: 0 0 0 0 rgb(47, 93, 243, 0.7); 
    }
    70% {
        /* End: wide, transparent ring */
        box-shadow: 0 0 0 12px rgba(236, 72, 153, 0); 
    }
    100% {
        box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
    }
}

@keyframes gentle-wiggle {
    0%, 85% { transform: rotate(0deg); } /* Stay still most of the time */
    90% { transform: rotate(-2deg); }
    95% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

/* The Class to Apply */
.pulse-btn {
    /* 1. The Ripple Effect */
    animation: pulse-ring 2s infinite cubic-bezier(0.66, 0, 0, 1);
    
    /* 2. Optional: Make the button itself pop a bit more */
    position: relative;
    z-index: 1; /* Ensure the shadow ripples go "under" neighbors if tight */
    transition: all 0.3s ease;
}

/* Optional: Pause animation when they hover (so it's not annoying) */
.pulse-btn:hover {
    animation: none;
}
.centre-card{text-align:center;margin-top: 40px;}

.pwyw-reveal {
  margin-top: 14px;
}


/* */
/* WRAPPER */
    .spi-wrapper {
        width: 100%;
        /* max-width: 900px; */ /* Adjust as needed */
        margin: 0 auto 30px auto; /* Centers it and adds bottom gap */
        position: relative;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    .spi-track {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        z-index: 1;
        padding-top: 20px;
    }

    /* LINES */
    .spi-line-bg {
        position: absolute;
        top: 45px; /* Half of circle height */
        left: 0;
        right: 0;
        height: 4px;
        background: #ffffff;
        z-index: -1;
        border-radius: 4px;
    }

    .spi-line-fill {
        position: absolute;
        top: 45px;
        left: 0;
        height: 4px;
        background: linear-gradient(90deg, #4ade80, #3b82f6);
        border-radius: 4px;
        z-index: -1;
        transition: width 0.4s ease; /* Smooth animation on load */
    }

    /* STEPS */
    .spi-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        flex: 1;
    }

    /* CIRCLES */
    .spi-circle {
        width: 50px;
        height: 50px;
        background: #fff;
        border: 3px solid #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #9ca3af;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }

    /* LABELS */
    .spi-label-group {
        margin-top: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .spi-label-title {
        font-size: 14px;
        font-weight: 600;
        color: #505d77;
        margin-bottom: 4px;
    }

    .spi-label-badge {
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 12px;
        background: #ffffff;
        color: #5f5e5e;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    /* --- STATE: COMPLETED --- */
    .spi-step.spi-completed .spi-circle {
        border-color: #4ade80;
        background: #4ade80;
        color: white;
    }
    .spi-step.spi-completed .spi-label-title {
        color: #166534;
    }

    /* --- STATE: ACTIVE (The User Part) --- */
    .spi-step.spi-active .spi-circle {
        width: 60px;
        height: 60px;
        border-color: #3b82f6;
        color: #3b82f6;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
        transform: translateY(-5px);
    }
    .spi-step.spi-active .spi-label-title {
        color: #1e40af;
        font-size: 16px;
    }
    .spi-step.spi-active .spi-label-badge {
        background: #dbeafe;
        color: #1e40af;
    }

    /* --- STATE: AUTO (Future Steps) --- */
    .spi-step.spi-auto .spi-circle {
        border-color: #a855f7;
        color: #a855f7;
        width: 40px;
        height: 40px;
        margin-top: 5px; 
        font-size: 14px;
    }
    .spi-step.spi-auto .spi-label-badge {
        background: #f3e8ff;
        color: #7e22ce;
        border: 1px solid #d8b4fe;
    }

    /* RESPONSIVE */
    @media (max-width: 700px) {
        .spi-step:not(.spi-active) .spi-label-title { display: none; }
        .spi-step:not(.spi-active) .spi-label-badge {  } /* Hide badges too on mobile to save space? */
        .spi-step.spi-active .spi-label-title { display: none; }
    }

 .outline-details {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(240, 253, 244, 0.76);
  margin: 12px 0;
  overflow: hidden;
  /* background-color: #f3f3f3; */
  margin-bottom: 20px;
}

.outline-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  user-select: none;
}

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

.outline-title { font-weight: 600; opacity: 0.9; }
.outline-sub { opacity: 0.7; font-size: 0.95em; }

.outline-summary::after {
  content: "▾";
  margin-left: auto;
  opacity: 0.6;
  transition: transform 150ms ease;
}
.outline-details[open] .outline-summary::after {
  transform: rotate(180deg);
}

.outline-details[open] .outline-summary {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.outline-details .outline-box {
  padding: 10px 12px 12px;
}