:root {
  --brand-mark-dark: url("assets/scrawny-mark-dark.svg");
  --brand-mark-light: url("assets/scrawny-mark-light.svg");

  --carbon: #0e1116;
  --bone: #f3f1ec;
  --paper: #f3f1ec;
  --white: #ffffff;
  --violet: #6b52d9;
  --sage: #778f5a;
  --coral: #c1685b;

  /* Legacy aliases kept only so the existing bootstrap layout resolves to the locked palette. */
  --periwinkle: var(--violet);
  --cobalt: var(--sage);
  --ochre: var(--sage);
  --stop-brick: var(--coral);
}

/* The Scrawny wordmark stays intentionally lean to match the brand name and symbol. */
.brand,
.footer-brand {
  font-weight: 560;
  letter-spacing: -0.035em;
}

/* Replace the retired dog asset with the locked Scrawny flow mark. */
.brand-dog,
.footer-dog,
.dog-art {
  background-image: var(--brand-mark-dark);
  aspect-ratio: 640 / 300;
}

.brand-dog {
  width: 58px;
}

.footer-dog {
  width: 48px;
}

.hero-mark {
  width: min(100%, 520px);
}

.mark-frame {
  min-height: 330px;
  padding: 34px;
  border: 1px solid rgba(243, 241, 236, 0.12);
  border-radius: 36px;
  background: rgba(25, 29, 37, 0.58);
}

.mark-frame::before,
.mark-frame::after {
  display: none;
}

.dog-art {
  width: min(100%, 500px);
  filter: none;
}

.hero .eyebrow,
.hero h1 span,
.text-link span,
.section-label-dark,
.closing h2 span,
:focus-visible {
  color: var(--violet);
}

.header-cta {
  border-color: rgba(107, 82, 217, 0.72);
}

.header-cta:hover,
.header-cta:focus-visible,
.button-primary {
  background: var(--violet);
  border-color: var(--violet);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--violet);
  border-color: var(--violet);
}

.signal-periwinkle {
  background: var(--violet);
}

.hero-spectrum {
  grid-template-columns: repeat(3, 1fr);
}

.spectrum-sage { background: var(--sage); }
.spectrum-violet { background: var(--violet); }
.spectrum-coral { background: var(--coral); }

.product-flow .product-topline,
.product-flow .product-signal span {
  background: var(--violet);
}

.product-works .product-topline,
.product-works .product-signal span {
  background: var(--sage);
}

.product-field .product-topline,
.product-field .product-signal span {
  background: var(--coral);
}

.loop-field::before { background: var(--sage); }
.loop-flow::before { background: var(--violet); }
.loop-works::before { background: var(--coral); }

.return-line span {
  color: var(--sage);
}

.rule-violet { background: var(--violet); }
.rule-sage { background: var(--sage); }
.rule-coral { background: var(--coral); }

.loop-section::after,
.hero::before {
  border-radius: 32px;
}

.hero::before {
  border-color: rgba(107, 82, 217, 0.16);
  transform: rotate(8deg);
}

.loop-section::after {
  border-color: rgba(119, 143, 90, 0.16);
  transform: rotate(-10deg);
}

@media (max-width: 980px) {
  .hero-mark {
    width: min(86vw, 500px);
  }

  .mark-frame {
    min-height: 300px;
  }
}

@media (max-width: 720px) {
  .brand-dog {
    width: 50px;
  }

  .hero-mark {
    width: min(92vw, 460px);
  }

  .mark-frame {
    min-height: 250px;
    padding: 24px;
    border-radius: 28px;
  }
}

@media (max-width: 440px) {
  .mark-frame {
    min-height: 220px;
    padding: 18px;
  }
}