/* Interactive demo at /demo.html. It uses the site's own palette (navy, one soft blue accent, thin borders)
   and keeps motion for things that explain a step. Entrance animations run only inside [data-enter],
   which demo.js sets when something new appears. */
.demo-page {
  --demo-bg: #081423;
  --demo-surface: #0d1a2b;
  --demo-raised: #132236;
  --demo-line: #223146;
  --demo-line-strong: #33445c;
  --demo-text: #d7e3f9;
  --demo-muted: #8c99b0;
  --demo-primary: #adc6ff;
  --demo-strong: #8fd6b0;
  --demo-partial: #a0cafc;
  --demo-below: #d6b48c;
  --demo-no: #f0a3a3;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-page .material-symbols-outlined {
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.18em;
}

/* Hero */
.demo-intro {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 48px 28px;
}
.demo-intro h1 {
  font:
    600 48px/1.08 Geist,
    sans-serif;
  letter-spacing: -0.03em;
  margin: 12px 0 16px;
  max-width: 800px;
  color: #fff;
}
.demo-intro > p {
  max-width: 700px;
  color: var(--demo-text);
  font-size: 17px;
  line-height: 1.65;
}
.demo-disclaimer {
  margin-top: 22px;
  padding: 12px 16px;
  border: 1px solid var(--demo-line);
  border-left: 2px solid var(--demo-primary);
  border-radius: 8px;
  background: var(--demo-surface);
  font-size: 14px;
  line-height: 1.6;
  max-width: 700px;
}

/* Layout */
.demo-app {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 48px 120px;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.demo-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 28px;
  align-items: start;
}
.demo-panel {
  min-width: 0;
  color: var(--demo-text);
}
.demo-kicker {
  margin: 0 0 6px;
  font:
    500 11px/1.5 'JetBrains Mono',
    monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--demo-muted);
}
.demo-panel h2 {
  font:
    600 28px/1.2 Geist,
    sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 10px;
  outline: none;
}
.demo-panel > p {
  line-height: 1.65;
  margin: 0 0 18px;
  font-size: 15px;
}

/* Step rail with a progress line that fills as steps are reached. */
.demo-rail-wrap {
  position: sticky;
  top: 92px;
}
.demo-progress {
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--demo-line);
}
.demo-progress span {
  display: block;
  width: 100%;
  height: var(--fill, 0%);
  background: var(--demo-primary);
  transition: height 0.6s var(--ease);
}
.demo-rail {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.demo-rail button {
  width: 100%;
  display: flex;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--demo-text);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.demo-rail button:hover:not(:disabled) {
  background: var(--demo-surface);
}
.demo-rail button[aria-current='step'] {
  background: var(--demo-surface);
  border-color: var(--demo-line);
}
.demo-rail button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.demo-rail strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.demo-rail small {
  color: var(--demo-muted);
  font-size: 12px;
}
.demo-rail-n {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--demo-line-strong);
  background: var(--demo-bg);
  font:
    500 12px 'JetBrains Mono',
    monospace;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.demo-rail-n > * {
  grid-area: 1 / 1;
  transition:
    opacity 0.25s,
    transform 0.3s var(--ease);
}
.demo-rail-n .material-symbols-outlined {
  opacity: 0;
  transform: scale(0.5);
  font-size: 16px;
}
.demo-rail .done .demo-rail-n {
  border-color: var(--demo-primary);
  color: var(--demo-primary);
}
.demo-rail .done .demo-rail-n .n {
  opacity: 0;
  transform: scale(0.5);
}
.demo-rail .done .demo-rail-n .material-symbols-outlined {
  opacity: 1;
  transform: none;
}
.demo-rail [aria-current='step'] .demo-rail-n {
  background: var(--demo-primary);
  border-color: var(--demo-primary);
  color: #001a42;
}

/* Guide */
.demo-guide {
  position: sticky;
  top: 92px;
  padding: 16px;
  border: 1px solid var(--demo-line);
  border-radius: 10px;
  background: var(--demo-surface);
  color: var(--demo-text);
  font-size: 14px;
  line-height: 1.65;
}
.demo-guide p {
  margin: 10px 0 0;
}
.demo-tag {
  display: flex;
  gap: 6px;
  align-items: center;
  font:
    500 11px/1.5 'JetBrains Mono',
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--demo-muted);
}
.demo-note {
  color: var(--demo-muted);
}
.demo-tally {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  font-weight: 600;
}
.demo-tally span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.demo-tally .yes {
  color: var(--demo-strong);
}
.demo-tally .no {
  color: var(--demo-no);
}

/* Form controls */
.demo-label {
  display: block;
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 600;
}
.demo-panel textarea,
.demo-panel input:not([type='checkbox']),
.demo-panel select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--demo-line-strong);
  border-radius: 8px;
  background: var(--demo-bg);
  color: var(--demo-text);
  font:
    14.5px/1.6 Inter,
    sans-serif;
  transition: border-color 0.2s;
}
.demo-panel textarea:focus,
.demo-panel input:focus,
.demo-panel select:focus {
  outline: none;
  border-color: var(--demo-primary);
}
.demo-btn:focus-visible,
.demo-pick:focus-visible,
.demo-rail button:focus-visible,
.demo-below > summary:focus-visible {
  outline: 2px solid var(--demo-primary);
  outline-offset: 3px;
}

/* Buttons, in the same style as the site's "Book a demo" button. */
.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.demo-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--demo-line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--demo-text);
  font:
    600 14px Inter,
    sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.demo-btn:hover:not(:disabled) {
  border-color: var(--demo-primary);
}
.demo-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.demo-btn.primary {
  border-color: var(--demo-primary);
  background: var(--demo-primary);
  color: #001a42;
}
.demo-btn.primary:hover:not(:disabled) {
  background: #c4d6ff;
}
.demo-btn.primary .material-symbols-outlined:last-child {
  transition: transform 0.2s var(--ease);
}
.demo-btn.primary:hover:not(:disabled) .material-symbols-outlined:last-child {
  transform: translateX(2px);
}
.demo-btn.small {
  height: 32px;
  font-size: 13px;
  padding: 0 12px;
}
.demo-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.demo-hint {
  font-size: 13px;
  color: var(--demo-muted);
}

/* Results, chips and code */
.demo-result {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--demo-line);
  border-radius: 10px;
  background: var(--demo-surface);
}
.demo-result h3 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 6px;
  font:
    600 17px Geist,
    sans-serif;
  color: #fff;
}
.demo-result h3 .material-symbols-outlined {
  color: var(--demo-primary);
}
.demo-result p {
  margin: 6px 0;
  line-height: 1.6;
}
.demo-bench {
  border-left: 2px solid var(--demo-primary);
}
.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.demo-chip {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--demo-line-strong);
  font-size: 12px;
  color: var(--demo-text);
}
.demo-chip.soft {
  color: var(--demo-partial);
}
.demo-chip.muted {
  color: var(--demo-muted);
}
.demo-chip.strong {
  color: var(--demo-strong);
  border-color: #35584a;
}
.demo-chip.partial {
  color: var(--demo-partial);
  border-color: #34506f;
}
.demo-chip.below {
  color: var(--demo-below);
  border-color: #5a4a37;
}
.demo-code {
  display: block;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--demo-bg);
  border: 1px solid var(--demo-line);
  font:
    12.5px/1.6 'JetBrains Mono',
    monospace;
  color: var(--demo-partial);
  overflow-wrap: anywhere;
}

/* A thin line moves down the brief while Aaron reads it. */
.demo-scan {
  position: relative;
}
.demo-scan textarea {
  display: block;
}
.demo-beam {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 0;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  background: var(--demo-primary);
}
.demo-scan.on .demo-beam {
  opacity: 1;
  animation: demo-beam 1.05s var(--ease) infinite;
}
.demo-scan.on textarea {
  border-color: var(--demo-primary);
}
@keyframes demo-beam {
  from {
    top: 4%;
  }
  to {
    top: 96%;
  }
}

/* Simulated search console */
.demo-console {
  margin-top: 18px;
  padding: 12px 14px 14px;
  border: 1px solid var(--demo-line);
  border-radius: 10px;
  background: #060f1b;
  font:
    13px/1.75 'JetBrains Mono',
    monospace;
  color: #b8c8e6;
}
.demo-console-head {
  margin-bottom: 8px;
  color: var(--demo-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.demo-console .dot {
  display: none;
}
.demo-console p {
  margin: 0;
  opacity: 0;
  animation: demo-line 0.3s ease forwards;
  animation-delay: calc(var(--i) * 1.1s + 0.1s);
}
.demo-console-mark {
  color: var(--demo-primary);
  margin-right: 8px;
}
@keyframes demo-line {
  to {
    opacity: 1;
  }
}
.demo-bar {
  height: 2px;
  margin-top: 12px;
  background: var(--demo-line);
}
.demo-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--demo-primary);
  animation: demo-fill 5s linear forwards;
}
@keyframes demo-fill {
  to {
    width: 100%;
  }
}

/* Profile cards */
.demo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.demo-profile {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--demo-line);
  border-radius: 10px;
  background: var(--demo-surface);
  transition: border-color 0.2s;
}
.demo-profile:hover {
  border-color: var(--demo-line-strong);
}
.demo-profile.benchmark,
.demo-profile.decided.yes {
  border-left: 2px solid var(--demo-strong);
}
.demo-profile.decided.no {
  border-left: 2px solid var(--demo-no);
}
.demo-profile.decided.hold {
  border-left: 2px solid var(--demo-below);
}
.demo-profile.flash {
  animation: demo-flash 0.8s ease;
}
@keyframes demo-flash {
  from {
    background-color: var(--demo-raised);
  }
}
.demo-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: hsl(var(--h) 22% 20%);
  color: hsl(var(--h) 45% 78%);
  font-size: 13px;
  font-weight: 600;
}
.demo-profile-body {
  min-width: 0;
  flex: 1;
}
.demo-profile-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  align-items: baseline;
}
.demo-profile-top strong {
  color: #fff;
  font-size: 15px;
}
.demo-profile-top small {
  color: var(--demo-muted);
  font-size: 12px;
}
.demo-headline {
  display: block;
  font-size: 13px;
  color: var(--demo-partial);
  margin-top: 2px;
}
.demo-profile-body p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

/* Judging */
.demo-judge {
  border: 0;
  margin: 12px 0 0;
  padding: 0;
}
.demo-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.demo-pick {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--demo-line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--demo-text);
  font:
    600 13px Inter,
    sans-serif;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.demo-pick:hover {
  border-color: var(--demo-muted);
}
.demo-pick.yes.on {
  border-color: var(--demo-strong);
  color: var(--demo-strong);
  background: #13281f;
}
.demo-pick.no.on {
  border-color: var(--demo-no);
  color: var(--demo-no);
  background: #2a1719;
}
.demo-pick.hold.on {
  border-color: var(--demo-below);
  color: var(--demo-below);
  background: #2a2216;
}
.demo-stamp {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--demo-strong);
}
.demo-stamp.no {
  color: var(--demo-no);
}
.demo-stamp.hold {
  color: var(--demo-below);
}
.demo-reason {
  animation: demo-open 0.25s ease;
}
@keyframes demo-open {
  from {
    opacity: 0;
  }
}
.demo-panel textarea.shake {
  border-color: var(--demo-no);
  animation: demo-shake 0.35s;
}
@keyframes demo-shake {
  25%,
  75% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
}

/* Benchmark match */
.demo-match {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
  margin-top: 12px;
}
.demo-meter {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--demo-line);
  overflow: hidden;
}
.demo-meter span {
  display: block;
  height: 100%;
  width: var(--score);
  background: var(--demo-partial);
}
.demo-match.strong .demo-meter span {
  background: var(--demo-strong);
}
.demo-match.below .demo-meter span {
  background: var(--demo-below);
}
.demo-match small {
  color: var(--demo-muted);
  font-size: 12px;
}
.demo-row-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-top: 12px;
}
.demo-check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
}
.demo-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--demo-primary);
}
.demo-new {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  color: var(--demo-muted);
}
.demo-below {
  margin-top: 18px;
}
.demo-below > summary {
  display: flex;
  gap: 6px;
  align-items: center;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--demo-muted);
}
.demo-below > summary::-webkit-details-marker {
  display: none;
}
.demo-below > summary .material-symbols-outlined {
  transition: transform 0.25s var(--ease);
}
.demo-below[open] > summary .material-symbols-outlined {
  transform: rotate(180deg);
}

/* Drafts */
.demo-drafts {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.demo-draft {
  position: relative;
  padding: 14px;
  border: 1px solid var(--demo-line);
  border-radius: 10px;
  background: var(--demo-surface);
}
.demo-draft-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.demo-draft-head > div:not(.demo-avatar) {
  flex: 1;
  min-width: 0;
}
.demo-draft-head strong {
  display: block;
  color: #fff;
}
.demo-draft-head small {
  color: var(--demo-muted);
  font-size: 12px;
}
.demo-draft-head .demo-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}
.demo-writing {
  display: none;
}

/* Approved */
.demo-approved {
  padding: 22px;
}
.demo-burst {
  color: var(--demo-strong);
  margin-bottom: 8px;
}
.demo-burst .material-symbols-outlined {
  font-size: 32px;
}
.demo-sent {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 10px 0 8px;
}
.demo-sent strong {
  font:
    600 28px 'JetBrains Mono',
    monospace;
  color: #fff;
}
.demo-sent span {
  color: var(--demo-muted);
  font-size: 13px;
}

/* Recall chat */
.demo-chat {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.demo-q,
.demo-a {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  line-height: 1.6;
}
.demo-q {
  justify-self: end;
  max-width: 80%;
  background: var(--demo-raised);
  border: 1px solid var(--demo-line);
}
.demo-a {
  border: 1px solid var(--demo-line);
  border-left: 2px solid var(--demo-primary);
  background: var(--demo-surface);
}
.demo-a p {
  margin: 6px 0 0;
}
.demo-a .typing::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--demo-primary);
  animation: demo-caret 0.8s steps(1) infinite;
}
@keyframes demo-caret {
  50% {
    opacity: 0;
  }
}

/* End of the loop */
.demo-end {
  margin-top: 28px;
  padding: 20px;
}
.demo-ring {
  color: var(--demo-primary);
  margin-bottom: 6px;
}
.demo-ring .material-symbols-outlined {
  font-size: 28px;
}
.demo-end ol {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.demo-end li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}
.demo-end li .material-symbols-outlined {
  color: var(--demo-strong);
  margin-top: 2px;
}

/* Entrance animations: a short fade and lift, only when demo.js marks the stage as freshly entered. */
@keyframes demo-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes demo-fade {
  from {
    opacity: 0;
  }
}
[data-enter] .demo-panel > *,
[data-enter] .demo-guide {
  animation: demo-rise 0.4s var(--ease) both;
}
[data-enter] .demo-guide {
  animation-delay: 0.1s;
}
[data-enter] .demo-list > .demo-profile {
  animation: demo-rise 0.4s var(--ease) both;
  animation-delay: calc(0.08s + var(--i) * 45ms);
}
[data-enter] .demo-chip.pop {
  animation: demo-fade 0.3s ease both;
  animation-delay: calc(0.1s + var(--i) * 40ms);
}
[data-enter] .demo-meter span {
  animation: demo-meter 0.9s var(--ease) both;
  animation-delay: 0.2s;
}
@keyframes demo-meter {
  from {
    width: 0;
  }
}
[data-enter] .demo-end li {
  animation: demo-fade 0.3s ease both;
  animation-delay: calc(0.15s + var(--i) * 70ms);
}
[data-enter='step'] .demo-draft {
  animation: demo-rise 0.4s var(--ease) both;
  animation-delay: calc(0.08s + var(--i) * 80ms);
}

.demo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Smaller screens */
@media (max-width: 1080px) {
  .demo-stage {
    grid-template-columns: 1fr;
  }
  .demo-guide {
    position: static;
    order: -1;
  }
}
@media (max-width: 760px) {
  .demo-intro,
  .demo-app {
    padding-left: 16px;
    padding-right: 16px;
  }
  .demo-intro {
    padding-top: 44px;
  }
  .demo-intro h1 {
    font-size: 34px;
  }
  .demo-panel h2 {
    font-size: 24px;
  }
  .demo-app {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .demo-rail-wrap {
    position: static;
  }
  .demo-progress {
    left: 24px;
    right: 24px;
    top: 22px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .demo-progress span {
    height: 100%;
    width: var(--fill, 0%);
    transition: width 0.6s var(--ease);
  }
  .demo-rail {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .demo-rail button {
    justify-content: center;
    padding: 7px 0;
  }
  .demo-rail-text {
    display: none;
  }
  .demo-profile {
    padding: 13px;
    gap: 12px;
  }
  .demo-avatar {
    width: 36px;
    height: 36px;
  }
}

/* Respect the visitor's reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
  .demo-page *,
  .demo-page *::before,
  .demo-page *::after {
    animation: none !important;
    transition: none !important;
  }
  .demo-console p {
    opacity: 1;
  }
  .demo-bar span {
    width: 100%;
  }
}