/* Whispers theme on top of /assets/project.css: noir ink, gold accents. */

:root {
  --ink: #17131f;
  --ink-rgb: 23, 19, 31;
  --ink-soft: #3a3247;
  --paper: #fbf8f1;
  --paper-deep: #f1ebdd;
  --accent: #c9a96a;
  --accent-soft: #e9d3a2;
  --accent-soft-rgb: 233, 211, 162;
  --accent-line: #a07c3c;
  --tint-1: #efe7f2;
  --tint-2: #f6ecd6;
  --hero-bg:
    radial-gradient(circle at 77% 30%, rgba(255, 255, 255, 0.85) 0 12%, transparent 34%),
    linear-gradient(120deg, #e8c27d 0%, #ead8b4 28%, #cdc3da 63%, #aea6cc 100%);
  --abstract-bg: linear-gradient(120deg, #f5ead3, var(--paper) 40%, #ece6f1);
  --feature-bg: #1f1a2e;
  --dark-bg: #0b0910;
  --closing-bg: var(--accent);
}

.overview-section {
  background: var(--dark-bg);
}

/* Whisper path: four steps in one strip */

.flow-card {
  padding: 0;
}

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.flow li {
  position: relative;
  padding: 34px 30px 32px;
  border-left: 1px solid var(--line);
  counter-increment: flow;
}

.flow li:first-child {
  border-left: 0;
}

.flow li:nth-child(2) {
  background: var(--tint-1);
}

.flow li:nth-child(3) {
  background: var(--tint-2);
}

.flow li::before {
  display: block;
  margin-bottom: 30px;
  color: rgba(var(--ink-rgb), 0.38);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  content: "0" counter(flow);
}

.flow li:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -11px;
  width: 22px;
  height: 22px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--white);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.flow li:nth-child(2)::after {
  background: var(--tint-1);
}

.flow li:nth-child(3)::after {
  background: var(--tint-2);
}

.flow-step {
  display: block;
  margin-bottom: 6px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.flow-note {
  color: rgba(var(--ink-rgb), 0.63);
  font-size: 0.88rem;
}

/* Quote in the dark promo band */

.promo-heading blockquote {
  margin: 0 auto 26px;
  max-width: 880px;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.promo-heading blockquote::before {
  content: "“";
  color: var(--accent);
}

.promo-heading blockquote::after {
  content: "”";
  color: var(--accent);
}

@media (max-width: 760px) {
  .flow {
    grid-template-columns: 1fr;
  }

  .flow li {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .flow li:first-child {
    border-top: 0;
  }

  .flow li::after {
    display: none;
  }

  .flow li::before {
    margin-bottom: 14px;
  }
}